CSistema de diseño
Bold Modern
El portal como una marca de estilo de vida y un producto tecnológico: colores planos, formas geométricas, tarjetas muy redondeadas.
Bricolage Grotesque, muy gruesa, para los títulos; Figtree para el texto; píldoras y cuadrículas bento por todas partes.
Interacciones que responden al toque: hacer trámites se vuelve agradable.
Tipografías: Bricolage Grotesque (variable, ejes de tamaño óptico y anchura) y Figtree (variable).
Tema del sitio (nivel 3), aplicado a toda la página
- theme.accent
- rose
- theme.secondary
- orange
- theme.gradient
- rose.500 → orange.500
- theme.heroTone
- sunset
- theme.motion
- expressive
01Paleta
Paleta
Nivel 1. Cada tono comparte la misma gramática de pasos; los sitios eligen escalas, nunca valores hexadecimales.
navy
rose
orange
turquoise
gold
green
sand
red
amber
sky
violet
blush
ink
Roles garantizados por el script de contraste: 300 = texto oscuro · 400 = relleno oscuro · 500 = relleno claro · 700 = texto claro.
02Tokens semánticos
Tokens semánticos
Niveles 2 y 3, resueltos para Estado de Leonida. Los componentes solo usan estos nombres.
| Token | Claro | Oscuro | Nivel |
|---|---|---|---|
| --bg | #FFF6EC | #0A0F1F | semántico (2) |
| --bg-subtle | #F8ECDD | #0E1428 | semántico (2) |
| --surface | #FFFFFF | #121A31 | semántico (2) |
| --surface-2 | #FFFBF6 | #18203A | semántico (2) |
| --surface-inverse | #0E1A3A | #FFF6EC | semántico (2) |
| --fg | #0E1A3A | #FFF6EC | semántico (2) |
| --fg-muted | #4F5B7A | #A7B0C8 | semántico (2) |
| --fg-inverse | #FFF6EC | #0E1A3A | semántico (2) |
| --border-strong | #77819B | #77819B | semántico (2) |
| --accent | #FF5F8Frose.500 | #FF7AA4rose.400 | sitio (3) |
| --accent-hover | #E8457Arose.600 | #FF9DBArose.300 | sitio (3) |
| --on-accent | #0E1A3Anavy.900 | #0A0F1Fink.950 | sitio (3) |
| --accent-ink | #C2245Crose.700 | #FF9DBArose.300 | sitio (3) |
| --accent-soft | #FFE0E9rose.100 | #3D1226rose.900 | sitio (3) |
| --secondary | #FF9A3Corange.500 | #FFAA55orange.400 | sitio (3) |
| --on-secondary | #0E1A3Anavy.900 | #0A0F1Fink.950 | sitio (3) |
| --secondary-ink | #A84F05orange.700 | #FFC183orange.300 | sitio (3) |
| --secondary-soft | #FFE9D1orange.100 | #3A220Eorange.900 | sitio (3) |
| --gradient-from | #FF5F8Frose.500 | #FF7AA4rose.400 | sitio (3) |
| --gradient-to | #FF9A3Corange.500 | #FFAA55orange.400 | sitio (3) |
| --focus | #C2245C | #FF9DBA | semántico (2) |
| --success | #237F48 | #5AC67D | semántico (2) |
| --warning | #F5A70A | #FFC233 | semántico (2) |
| --danger | #D23129 | #FF7570 | semántico (2) |
| --info | #1F6CD1 | #5EA8FF | semántico (2) |
| --blush | #FFB2C6 | #FFB2C6 | semántico (2) |
| --on-blush | #0E1A3A | #0A0F1F | semántico (2) |
| --blush-ink | #A63E66 | #FFB2C6 | semántico (2) |
| --blush-soft | #FFE8EF | #3B1A2B | semántico (2) |
03Contraste
Contraste
Calculado a partir de las mismas fuentes de tokens que el CSS. Cambie el tema del sitio arriba para auditar otro sitio.
124 de 124 pares cumplen WCAG AA para Estado de Leonida. La misma verificación en CI: pnpm check:contrast.
- Claro
- Aafg / bg16.00AA
- Aafg / bg-subtle14.69AA
- Aafg / surface17.11AA
- Aafg / surface-216.60AA
- Aafg-muted / bg6.32AA
- Aafg-muted / bg-subtle5.80AA
- Aafg-muted / surface6.75AA
- Aafg-muted / surface-26.55AA
- Aaaccent-ink / bg5.31AA
- Aaaccent-ink / bg-subtle4.87AA
- Aaaccent-ink / surface5.67AA
- Aaaccent-ink / surface-25.51AA
- Aaaccent-ink / accent-soft4.62AA
- Aasecondary-ink / bg5.19AA
- Aasecondary-ink / bg-subtle4.76AA
- Aasecondary-ink / surface5.55AA
- Aasecondary-ink / surface-25.38AA
- Aasecondary-ink / secondary-soft4.71AA
- Aaon-accent / accent5.94AA
- Aaon-accent / accent-hover4.53AA
- Aaon-secondary / secondary8.10AA
- Aaon-secondary / secondary-hover6.26AA
- Aaon-gradient / gradient-from5.94AA
- Aaon-gradient / gradient-to8.10AA
- Aafg-inverse / surface-inverse16.00AA
- Aafg-on-image / scrim16.00AA
- Aaon-blush / blush10.13AA
- Aablush-ink / bg5.61AA
- Aablush-ink / bg-subtle5.15AA
- Aablush-ink / surface6.00AA
- Aablush-ink / surface-25.82AA
- Aablush-ink / blush-soft5.15AA
- Aafg / blush-soft14.70AA
- Aafg-muted / blush-soft5.80AA
- Aasuccess-ink / success-soft5.51AA
- Aasuccess-ink / bg6.11AA
- Aasuccess-ink / surface6.53AA
- Aaon-success / success5.00AA
- Aawarning-ink / warning-soft5.14AA
- Aawarning-ink / bg5.41AA
- Aawarning-ink / surface5.78AA
- Aaon-warning / warning8.48AA
- Aadanger-ink / danger-soft5.29AA
- Aadanger-ink / bg6.11AA
- Aadanger-ink / surface6.54AA
- Aaon-danger / danger4.99AA
- Aainfo-ink / info-soft5.51AA
- Aainfo-ink / bg6.27AA
- Aainfo-ink / surface6.70AA
- Aaon-info / info5.09AA
- Aamarine-ink / marine-soft6.59AA
- Aamarine-ink / bg7.62AA
- Aamarine-ink / surface8.15AA
- Aaon-marine / marine6.00AA
- border-strong / bg3.64UI
- border-strong / bg-subtle3.34UI
- border-strong / surface3.89UI
- border-strong / surface-23.78UI
- focus / bg5.31UI
- focus / bg-subtle4.87UI
- focus / surface5.67UI
- focus / surface-25.51UI
- Oscuro
- Aafg / bg17.84AA
- Aafg / bg-subtle17.09AA
- Aafg / surface16.13AA
- Aafg / surface-215.04AA
- Aafg-muted / bg8.80AA
- Aafg-muted / bg-subtle8.43AA
- Aafg-muted / surface7.95AA
- Aafg-muted / surface-27.41AA
- Aaaccent-ink / bg9.79AA
- Aaaccent-ink / bg-subtle9.38AA
- Aaaccent-ink / surface8.85AA
- Aaaccent-ink / surface-28.25AA
- Aaaccent-ink / accent-soft8.21AA
- Aasecondary-ink / bg12.00AA
- Aasecondary-ink / bg-subtle11.49AA
- Aasecondary-ink / surface10.85AA
- Aasecondary-ink / surface-210.11AA
- Aasecondary-ink / secondary-soft9.33AA
- Aaon-accent / accent7.79AA
- Aaon-accent / accent-hover9.79AA
- Aaon-secondary / secondary10.11AA
- Aaon-secondary / secondary-hover12.00AA
- Aaon-gradient / gradient-from7.79AA
- Aaon-gradient / gradient-to10.11AA
- Aafg-inverse / surface-inverse16.00AA
- Aafg-on-image / scrim17.84AA
- Aaon-blush / blush11.29AA
- Aablush-ink / bg11.29AA
- Aablush-ink / bg-subtle10.82AA
- Aablush-ink / surface10.21AA
- Aablush-ink / surface-29.52AA
- Aablush-ink / blush-soft9.09AA
- Aafg / blush-soft14.35AA
- Aafg-muted / blush-soft7.08AA
- Aasuccess-ink / success-soft8.85AA
- Aasuccess-ink / bg10.89AA
- Aasuccess-ink / surface9.85AA
- Aaon-success / success8.91AA
- Aawarning-ink / warning-soft10.56AA
- Aawarning-ink / bg13.28AA
- Aawarning-ink / surface12.01AA
- Aaon-warning / warning11.82AA
- Aadanger-ink / danger-soft8.07AA
- Aadanger-ink / bg9.50AA
- Aadanger-ink / surface8.59AA
- Aaon-danger / danger7.29AA
- Aainfo-ink / info-soft8.37AA
- Aainfo-ink / bg10.24AA
- Aainfo-ink / surface9.26AA
- Aaon-info / info7.74AA
- Aamarine-ink / marine-soft8.05AA
- Aamarine-ink / bg9.26AA
- Aamarine-ink / surface8.37AA
- Aaon-marine / marine6.55AA
- border-strong / bg4.90UI
- border-strong / bg-subtle4.70UI
- border-strong / surface4.43UI
- border-strong / surface-24.13UI
- focus / bg9.79UI
- focus / bg-subtle9.38UI
- focus / surface8.85UI
- focus / surface-28.25UI
04Tipografía
Tipografía
Bricolage Grotesque 800 con tamaño óptico 96 para los titulares, interletrado -0.04em, mayúscula inicial. Figtree para el texto (17 px, 1.55) y las etiquetas en píldora.
Leonida, hola
00Etiqueta con índice
Etiqueta con ícono
Etiqueta discreta
Una entradilla presenta una sección en una o dos frases, nunca más.
El texto es Figtree a 17 px con un interlineado de 1.55. Los párrafos no pasan de 70 caracteres por línea, para que un aviso de renovación se lea tan fácil como un relato de viaje.
- --step--113px → 14pxRenueve su licencia en diez minutos, en línea.
- --step-756px → 144pxSol, Mare, Libertas
- --step-648px → 104pxSol, Mare, Libertas
- --step-540px → 72pxSol, Mare, Libertas
- --step-434px → 52pxSol, Mare, Libertas
- --step-328px → 38pxSol, Mare, Libertas
- --step-223px → 28pxRenueve su licencia en diez minutos, en línea.
- --step-119px → 22pxRenueve su licencia en diez minutos, en línea.
- --step-016px → 18pxRenueve su licencia en diez minutos, en línea.
05Forma y ritmo
Forma y ritmo
Tarjetas de 32 px, imágenes de 24 px, controles y etiquetas en píldora. Radio interior = radio exterior menos el relleno. Sombras suaves teñidas por el acento del sitio.
Radio
--radius-control
--radius-card
--radius-media
--radius-badge
Elevación
--shadow-1
--shadow-2
--shadow-3
--shadow-4
--shadow-card
--shadow-raised
- --guttermárgenes laterales
- --grid-gapespacio de 12 columnas
- --section-yespacio entre secciones
- Valores comunes: margen clamp(1.25rem, 0rem + 5.5556vw, 5rem); ancho máximo 100rem.
06Movimiento
Movimiento
Apariciones con un poco de rebote, microinteracciones elásticas, una cinta para las alertas. Sobrio en los sitios de servicios, nada con movimiento reducido. Pase el cursor por las filas.
- --duration-instant 90ms
- --duration-fast 160ms
- --duration-base 260ms
- --duration-slow 480ms
- --duration-slower 800ms
- --duration-cinematic 1400ms
- --ease-standardcubic-bezier(.2,0,0,1)
- --ease-out-expocubic-bezier(.16,1,.3,1)
- --ease-in-outcubic-bezier(.65,0,.35,1)
- --ease-springcubic-bezier(.34,1.56,.64,1)
reveal
type:scale, y:32, duration:0.9, ease:back.out(1.4), stagger:0.07
split
mask:true, yPercent:105, duration:1, stagger:0.08, ease:expo.out
hero
scaleFrom:1.1, duration:2, ease:expo.out, parallax:0.12
counter
duration:1.6, ease:power3.out
08Etiquetas y alertas
Etiquetas y alertas
La alerta de huracanes corre como una cinta: se pausa al pasar el cursor o al enfocarla, se puede detener y es estática con movimiento reducido o en los sitios sobrios.
Claro
Temporada de huracanes
La temporada de huracanes dura hasta el 30 de noviembre. Conozca su zona de evacuación, tenga listo un kit para siete días y suscríbase a LeoAlert para recibir avisos oficiales por mensaje de texto.
Conozca su zona de evacuación.
Este año se redibujaron las zonas de todos los condados costeros.
Ver mi zonaLa calzada estará cerrada el domingo por la mañana.
Su renovación fue enviada.
Nunca pedimos pagos por teléfono.
Oscuro
Temporada de huracanes
La temporada de huracanes dura hasta el 30 de noviembre. Conozca su zona de evacuación, tenga listo un kit para siete días y suscríbase a LeoAlert para recibir avisos oficiales por mensaje de texto.
Conozca su zona de evacuación.
Este año se redibujaron las zonas de todos los condados costeros.
Ver mi zonaLa calzada estará cerrada el domingo por la mañana.
Su renovación fue enviada.
Nunca pedimos pagos por teléfono.
09Tarjetas
Tarjetas
Bloques de color plano, cada uno con su tono: acento suave, secundario suave, superficie, inverso, acento y degradado. Las tarjetas de agencia abren un ámbito de sitio anidado y llevan los colores de esa agencia.
Claro
Oscuro
10Formularios
Formularios
Campos en píldora con etiquetas visibles, errores anunciados con texto e ícono, nunca solo con color. Las opciones de radio son chips.
Claro
Oscuro
11Acordeón y carrusel
Acordeón y carrusel
Teclado: Tab hasta una diapositiva, luego flechas, Inicio y Fin. Ratón: arrastre la pista.
Claro
Oscuro
13Sello y emblemas
Sello y emblemas
Ilustraciones originales. Cada agencia tiene su propia silueta (escudo, mosaico, flor, hexágono) con un contorno blanco tipo calcomanía, para leerse sobre cualquier fondo; los colores son fijos en ambos temas, como insignias reales. La geometría es decorativa y está oculta para las tecnologías de asistencia.
Claro
Condado de KalagaFoto usada en las tarjetas: Lanchas ancladas alrededor de un banco de arena en agua azul clara, gente nadando y descansando en cubierta bajo el sol.
Oscuro
Condado de KalagaFoto usada en las tarjetas: Lanchas ancladas alrededor de un banco de arena en agua azul clara, gente nadando y descansando en cubierta bajo el sol.