Tokens primitivos y semánticos, tipografía, espaciados, bordes y sombras. La fuente única para diseñar y construir en cualquier soporte.
El sistema parte de cinco colores núcleo extraídos del moodboard. Cada uno tiene un nombre propio y un rol fijo. No se sustituyen.
Variaciones del azul institucional. Se usan para hover, fondos washed e interacciones.
9 pasos para construir jerarquía de texto, separadores, fondos y estados disabled.
Tres semánticas para indicar resultado de operaciones, alertas y errores.
Cada uso de color en la UI debe pasar por un token semántico. Si el rol cambia, cambia el primitivo detrás — no la aplicación.
| Token semántico | Valor primitivo | Uso |
|---|---|---|
--bg-base | #FFFFFF | Fondo principal de la mayoría de las páginas. |
--bg-soft | #F6F7FB | Bandas de sección que rompen monotonía visual. |
--bg-muted | #F1F3F8 | Cards secundarias y áreas inactivas. |
--bg-inverse | Profundo · #101931 | Secciones dark, hero institucional, CTAs finales. |
--bg-inverse-deep | Negro · #000000 | Profundidad máxima — solo para acentos y vignettes. |
--bg-accent | Azul · #072968 | Áreas de alto impacto: billboards, primer plano. |
--text-primary | Neutral 900 | Headlines y texto principal. |
--text-secondary | Neutral 500 | Body copy y descripciones. |
--text-muted | Neutral 400 | Metadata, captions y labels. |
--text-accent | Azul · #072968 | Links activos y datos críticos. |
--border-subtle | 5/8/22 · 6 % | Separadores de baja intensidad. |
--border-default | 5/8/22 · 10 % | Bordes estándar de cards y formularios. |
--interactive | Azul · #072968 | Botones primarios, focus rings, links destacados. |
--interactive-hover | #04204F | Hover sobre acciones primarias. |
--ocre-dorado | #C1A778 | Acento warm para Grandes Inversores y momentos premium. |
Sistema construido sobre PolySans en tres variantes: Wide (display + headings), Standard (body) y Wide Bold (wordmark). Los pesos van de Slim (300) a Bulky (700).
Toda la escala deriva de múltiplos de 4. Esto mantiene ritmo vertical consistente en cualquier viewport y simplifica el alineamiento óptico.
| Viewport | Padding-block | Padding-inline |
|---|---|---|
| Desktop ≥ 980 px | 128 px | 24 px (con container) |
| Tablet | 96 px | 24 px |
| Mobile ≤ 768 px | 72 px | 16 px |
Los radios privilegian formas casi rectangulares para preservar el lenguaje bauhaus del moodboard. Las pills mantienen radio infinito como excepción.
Bauhaus se siente más con offsets duros que con blur atmosférico. Reservamos la sombra suave para cards interactivas; usamos offset hard solo en stamps brandbook.
Componentes recurrentes derivados de los tokens. Cada uno expone solo lo necesario; las variantes se controlan con clases.
Card con shadow-card al hover.
Icon + título + descripción.
Para secciones dark mode con acento brand.
Stroke fino, geométrica, monocroma. No usar emoji, filled, ni iconos coloridos.
Estas reglas mandan sobre los componentes. Si una solución viola una de estas, está mal — aunque cumpla los tokens.
El silencio visual es contenido. Las composiciones respiran. Si dudás entre apretar o despejar, despejar siempre.
El tipo carga la jerarquía. Decoración mínima — el peso, el tracking y la escala son suficientes.
Palatinate Blue se reserva para momentos críticos: hero outdoor, CTAs, primer plano de redes. En UI, contraste sobre blanco o navy.
Máximo tres del set primitivo simultáneos. Más, y la jerarquía se rompe.