Color
Valores de color de producción y el rol de cada uno.
Valores leídos del código de producción en el último sync. Cómo se usan, en su fundamento.
| Token | Rol | Landing | Portal de clientes |
|---|---|---|---|
| --paper | Fondo de la página. | — | #faf9f6 |
| --paper-2 | Fondo de sección alterna (precios) y hover de botones secundarios. | — | #f3f1eb |
| --paper-3 | Rellenos suaves dentro de las ilustraciones de interfaz. | — | #ebe8e0 |
| --card | Fondo de tarjetas (plan). | — | #ffffff |
| --night | Bloques oscuros (llamada, pie, tarjetas oscuras). | — | #1b1b19 |
| --ash | Relleno gris de las ilustraciones de tinta. | — | — |
| --ink | Texto principal y relleno del botón principal. | #f2f0e8 | #171716 |
| --ink-2 | Texto secundario fuerte (navegación). | #b9b6a8 | #3b3b38 |
| --muted | Entradillas y descripciones. | — | #6d6c66 |
| --faint | Numeración, metadatos y placeholders. | — | #a19f97 |
| --line | Bordes de tarjetas y separadores. | #2a2e23 | #e5e2da |
| --line-strong | Bordes de controles (botón outline). | — | #d4d0c5 |
| --accent | Contorno de foco. | #b1905c | #3b5bdb |
| --accent-soft | Fondo de la selección de texto. | — | #e4e9fb |
| --danger | Errores y acciones destructivas (solo portal). | — | #b42318 |
| --danger-soft | Fondo de avisos de error (solo portal). | — | #fdecea |
| --success | Confirmaciones (solo portal). | — | #2f6b4f |
| --success-soft | Fondo de confirmaciones (solo portal). | — | #e3efe8 |
| --warning | Avisos (solo portal). | — | #8a5a00 |
| --warning-soft | Fondo de avisos (solo portal). | — | #fbf0d9 |
| --tile-sand | Fondo de ilustración. | — | #e9dfcb |
| --tile-clay | Fondo de ilustración. | — | #e8c6b2 |
| --tile-sage | Fondo de ilustración. | — | #c6d4cb |
| --tile-sky | Fondo de ilustración. | — | #c7d3ec |
| --tile-lilac | Fondo de ilustración. | — | #d4d1e3 |
Relacionados
tokens/color · Actualizado el 2026-10-11