08 — Design system — RELE
1. Tokens de color
| Token Tailwind | Hex | Uso |
|---|
bg | #EEF1F4 | Fondo página |
surface | #FFFFFF | Cards, header |
ink | #0C2340 | Texto principal |
ink-muted | #5A6B7D | Texto secundario |
primary | #0C2340 | Navy primary |
primary-soft | #D8E4F0 | Secciones suaves |
primary-strong | #071628 | Hover navy |
sea | #2F8F8C | CTA principal, acentos |
sea-soft | #D4EDEC | Badge REVIEWED, nota asesor |
sea-strong | #247370 | Hover sea |
coral | #E07A5F | FLAGGED, errores, abiertas |
coral-soft | #F8E4DD | Fondos error |
border | #D0D8E0 | Bordes |
Contraste (orientativo WCAG)
| Par | Uso | Nota |
|---|
| ink sobre bg | Cuerpo | Alto |
| white sobre sea | Botones | Alto |
| white sobre ink | Botones navy | Alto |
| white sobre coral | Botones flag | Alto |
| ink-muted sobre bg | Secundario | Verificar ≥ 4.5:1 en UI real |
2. Tipografía
| Rol | Familia | Clase | Tamaños guía |
|---|
| Display | Sora | font-display | H1 4xl–5xl · H2 3xl · logo 2xl |
| UI | Nunito Sans | font-sans | body base · labels xs bold · meta 11px |
Tracking: labels de sección tracking-[0.16em] en sea/uppercase corto.
3. Espaciado y layout
| Token | Valor |
|---|
| Page max | max-w-6xl home · max-w-5xl lista · max-w-2xl detalle/form |
| Header height | 72px home · 64px app |
| Card radius | rounded-2xl (16px) · botones rounded-full |
| Gap secciones | py-14 home · py-8 app |
| Padding card | p-4 / p-6 |
4. Componentes
4.1 Botones
| Variante | Clases clave | Uso |
|---|
| Primary sea | rounded-full bg-sea text-white font-bold | CTA principal |
| Primary ink | rounded-full bg-ink text-white | CTA secundario fuerte |
| Outline | rounded-full border border-border bg-surface | CTA alternativo |
| Danger/Flag | rounded-full bg-coral text-white | FLAGGED |
| Ghost text | font-bold text-ink | Salir |
Estados: hover sea-strong / opacidad; disabled no implementado en v1 salvo implícito form.
4.2 Badges de estado
| Status | Estilo sugerido |
|---|
| DRAFT | muted border |
| SUBMITTED | bg-primary-soft text-ink |
| REVIEWED | bg-sea-soft text-sea |
| FLAGGED | bg-coral-soft text-coral |
4.3 Cards
- Border
border-border, fondo surface, hover lista hover:border-sea.
- Meta code:
text-[11px] font-bold tracking-wide text-sea.
- Título: period · kWh · coste muted.
4.4 Stats chips
| Chip | Contenido | Acento |
|---|
| TOTAL | count | ink |
| ABIERTAS | open | coral text |
| kWh Σ | kwhTotal | sea soft bg |
| Elemento | Spec |
|---|
| Label | text-xs font-bold text-ink-muted |
| Input | rounded-xl border border-border px-4 py-3 w-full |
| Textarea | rows 2–3, mismo borde |
| Error | text-sm text-coral |
Logo display + Nombre · ROL + acciones. Sticky no obligatorio en app (sí en home marketing).
4.7 Empty / Error
| Tipo | Contenedor |
|---|
| Empty | rounded-2xl border bg-surface p-12 text-center |
| Error | rounded-2xl border-coral/40 bg-coral-soft p-6 + botón Reintentar ink |
5. Iconografía
v1: sin librería de iconos pesada; chevron/back como texto “←”.
Extensión L2+: set outline navy/sea coherente.
6. Elevación y bordes
| Nivel | Tratamiento |
|---|
| Flat | border only |
| Hero media | shadow-lg + rounded-[20px] |
| Sticky header home | bg-surface/95 + border-b |
7. Grid responsive
| Breakpoint | Comportamiento |
|---|
| < md | 1 col hero, form full |
| md+ | hero 2 col; login split 2 col; stats row |
| Mobile lista | card full width; targets ≥ 44px |
8. Mapeo Paper ↔ código
| Token Paper | Tailwind |
|---|
| Fog | bg-bg |
| Navy | text-ink / bg-ink / primary |
| Sea | bg-sea / text-sea |
| Coral | bg-coral / text-coral |
| Sora | font-display |
| Nunito Sans | font-sans |
9. Do / Don’t
| Do | Don’t |
|---|
| Usar sea para acción primaria de producto | Usar coral como brand principal |
| Números en extrabold display | Párrafos largos en H1 |
| Badges de estado siempre | Inventar estados “OK/KO” fuera del enum |
| Fog de fondo app | Fondo blanco puro full-bleed sin surface cards |
10. Checklist de paridad
