Fundamentos
Color
Una paleta cálida inspirada en atardeceres de carretera. Los primitivos definen la materia prima; los roles semánticos deciden su uso y cambian con el tema.
Paleta primitiva#
Haz clic para copiar. La etiqueta indica el mejor nivel WCAG alcanzable sobre blanco o casi negro.
Coral · Brasa
Marca y acción principal. Un único botón coral por vista.
Verde · Pinar
Naturaleza, sitios gratuitos, confirmaciones de servicio.
Arena · Duna
Destacados, premium, avisos suaves.
Azul · Cielo
Información, agua y servicios.
Neutros cálidos
Texto, bordes, superficies. El 90 % de la interfaz.
Roles semánticos#
Úsalos con clases de Tailwind:
bg-surface, text-fg-muted, border-border, bg-primary… En nativo: semantic[scheme].primary.| Token | Claro | Oscuro |
|---|---|---|
| bg | #FFFFFF | #161615 |
| bg-subtle | #F7F7F6 | #1C1C1B |
| bg-muted | #EFEFED | #2E2E2C |
| surface | #FFFFFF | #1C1C1B |
| surface-raised | #FFFFFF | #252524 |
| surface-sunken | #F7F7F6 | #111110 |
| bg-inverse | #222221 | #F7F7F6 |
| overlay | rgba(22,22,21,0.5) | rgba(0,0,0,0.65) |
| Token | Claro | Oscuro |
|---|---|---|
| fg | #222221 | #F7F7F6 |
| fg-muted | #6A6A66 | #ABABA6 |
| fg-subtle | #8C8C87 | #8C8C87 |
| fg-disabled | #ABABA6 | #6A6A66 |
| fg-inverse | #FFFFFF | #222221 |
| fg-on-primary | #FFFFFF | #161615 |
| Token | Claro | Oscuro |
|---|---|---|
| border | #E2E2DF | #343432 |
| border-strong | #C9C9C5 | #4A4A47 |
| border-subtle | #EFEFED | #262625 |
| border-focus | #222221 | #F7F7F6 |
| focus | #222221 | #F7F7F6 |
| Token | Claro | Oscuro |
|---|---|---|
| primary | #D63F27 | #FB7459 |
| primary-hover | #B2301C | #FFA48E |
| primary-pressed | #8A2617 | #FFC9BB |
| primary-subtle | #FFF4F1 | #3A1E18 |
| primary-muted | #FFE4DD | #4D241B |
| primary-fg | #B2301C | #FFA48E |
| brand | #F0563B | #FB7459 |
| secondary | #237559 | #47A27D |
| secondary-hover | #1B5C46 | #77C2A1 |
| secondary-subtle | #EEF7F2 | #14281F |
| secondary-fg | #1B5C46 | #77C2A1 |
| accent | #F0A02A | #F6BB52 |
| accent-subtle | #FFF8EB | #2E2410 |
| accent-fg | #8A500C | #FAD58E |
| Token | Claro | Oscuro |
|---|---|---|
| info | #1D6FD8 | #4F93EC |
| info-subtle | #EFF6FF | #152238 |
| info-fg | #1A55A8 | #86B8F5 |
| success | #008A05 | #3FBF62 |
| success-subtle | #EDFAEE | #12261A |
| success-fg | #006B04 | #7FDB97 |
| warning | #B25E00 | #E08A00 |
| warning-subtle | #FFF7E6 | #2D2210 |
| warning-fg | #8A4900 | #F5C26B |
| danger | #C13515 | #F0705A |
| danger-subtle | #FEF2F0 | #331713 |
| danger-fg | #9C2A10 | #F8A595 |
| Token | Claro | Oscuro |
|---|---|---|
| rating | #222221 | #F7F7F6 |
| favorite | #F0563B | #FB7459 |
| skeleton | #EFEFED | #262625 |
| skeleton-shine | #F7F7F6 | #2E2E2C |
Combinaciones verificadas#
Pares texto/fondo usados en el producto con su contraste real.
fg / bgClaro15.92 · AAA
fg / bgOscuro16.89 · AAA
fg-muted / bgClaro5.43 · AA
fg-muted / bgOscuro7.85 · AAA
fg-on-primary / primaryClaro4.57 · AA
fg-on-primary / primaryOscuro6.68 · AA
primary-fg / primary-subtleClaro5.84 · AA
primary-fg / primary-subtleOscuro7.94 · AAA
secondary-fg / secondary-subtleClaro7.21 · AAA
secondary-fg / secondary-subtleOscuro7.40 · AAA
danger-fg / danger-subtleClaro6.97 · AA
danger-fg / danger-subtleOscuro8.49 · AAA
warning-fg / warning-subtleClaro6.49 · AA
warning-fg / warning-subtleOscuro9.51 · AAA
info-fg / info-subtleClaro6.63 · AA
info-fg / info-subtleOscuro7.73 · AAA
bg / fgClaro15.92 · AAA
bg / fgOscuro16.89 · AAA
Uso#
Gratis
12 € / noche