Color
Estable11 rampas de 12 pasos importadas de Figma, capa semántica y verificación de contraste en vivo.
El color de Polen son 11 rampas de 12 pasos más un trío Base, importadas
tal cual de la colección Primitives del archivo 🌻 FDS Design Tokens. Cada
variable trae su valor de light y dark desde diseño: acá no hay ningún paso
interpolado ni inventado.
Las rampas siguen la convención de Radix Colors,
que le da un significado fijo a cada paso: 1–2 fondos de app, 3–5 fondos
de componentes, 6–8 bordes, 9–10 fondos sólidos y 11–12 texto. Por eso
Primary/9 y Danger/9 se pueden intercambiar sin rehacer el diseño — ocupan el
mismo lugar en su escala.
Primary es el verde de la marca, anclado en Primary/9 = #00922e, el único
paso que vale igual en light y en dark. Grey es la rampa neutra del sistema
—un gris frío— y de ella sale todo el chrome del sitio vía la capa semántica.
Verificador de contraste
Antes de elegir un par de colores, comprobá que se puedan leer. Elegí texto y fondo de cualquier rampa y validá WCAG en vivo. Regla práctica: texto normal necesita AA (4.5:1); texto grande o UI, AA Large (3:1).
Escalas
Mostrando el tema light — cambialo con el toggle del header y las 11 rampas se recalculan.
Marca
El verde de Polen. Acciones, enlaces y acentos.
Primary
Verde de marca. Acciones, enlaces y acentos.
Pasá el cursor por un paso para ver su valor — click para copiarlo.
Neutral
El chrome del producto: fondos, bordes y texto.
Grey
Fondos, bordes y texto. El chrome del producto.
Pasá el cursor por un paso para ver su valor — click para copiarlo.
Semánticas
Feedback de estado. Su significado es fijo.
Success
Confirmación, estados válidos.
Pasá el cursor por un paso para ver su valor — click para copiarlo.
Yellow
Advertencia, atención requerida.
Pasá el cursor por un paso para ver su valor — click para copiarlo.
Danger
Error, destrucción, bloqueo.
Pasá el cursor por un paso para ver su valor — click para copiarlo.
Blue
Información, estados neutrales con énfasis.
Pasá el cursor por un paso para ver su valor — click para copiarlo.
Extendidas
Paleta de apoyo para categorías, datos y material de marca.
Orange
Categorías y visualización de datos.
Pasá el cursor por un paso para ver su valor — click para copiarlo.
Green
Categorías y visualización de datos.
Pasá el cursor por un paso para ver su valor — click para copiarlo.
Pink
Categorías y visualización de datos.
Pasá el cursor por un paso para ver su valor — click para copiarlo.
Violet
Categorías y visualización de datos.
Pasá el cursor por un paso para ver su valor — click para copiarlo.
Neon
Acentos de alta energía. Usar con moderación.
Pasá el cursor por un paso para ver su valor — click para copiarlo.
Roles semánticos
Nunca uses una primitiva directo en un componente: usá el rol. La lista completa (105 roles, con su variable de Figma y su uso) vive en Color semántico. Estos son los neutros, los que más vas a tocar:
Fondos
| Figma | CSS | Primitiva | Uso |
|---|---|---|---|
bg/default | --bg | grey-1 | Fondo de página. El lienzo sobre el que vive todo. |
bg/subtle | --bg-subtle | grey-2 | Fondo alterno: sidebars, zebra de tablas, bloques de código. |
bg/surface | --surface | grey-3 | Superficie de componentes neutros en reposo. |
bg/surface-hover | --surface-hover | grey-4 | Hover de superficies neutras. |
bg/surface-active | --surface-active | grey-5 | Pressed / seleccionado de superficies neutras. |
bg/elevated | --bg-elevated | base-background | Superficies que flotan: cards, modales, menús, popovers. |
bg/inverse | --bg-inverse | grey-12 | Superficie invertida: tooltips, toasts oscuros. |
Bordes
| Figma | CSS | Primitiva | Uso |
|---|---|---|---|
border/subtle | --border-subtle | grey-4 | Divisores suaves dentro de una superficie. |
border/default | --border | grey-6 | Borde estándar de cards, inputs y contenedores. |
border/hover | --border-hover | grey-7 | Borde de controles en hover. |
border/strong | --border-strong | grey-8 | Borde de alto contraste (3:1 contra el fondo). |
Texto
| Figma | CSS | Primitiva | Uso |
|---|---|---|---|
text/default | --fg | grey-12 | Texto principal: títulos y cuerpo. |
text/muted | --fg-muted | grey-11 | Texto secundario: descripciones, hints, metadata. |
text/subtle | --fg-subtle | grey-10 | Texto terciario y placeholders. No usar para contenido esencial. |
text/disabled | --fg-disabled | grey-8 | Texto deshabilitado. Exento de contraste WCAG. |
text/inverse | --fg-inverse | grey-1 | Texto sobre bg/inverse. |
Convención de estados
Los estados interactivos siguen la progresión de la escala:
- Sólido: fondo
9, hover10, pressed11 - Tonal: fondo
3, hover4, pressed5, borde6 - Focus ring:
Primary/8
Cuándo usar cada familia
- Marca (Primary) — acciones primarias, enlaces, selección, acentos.
- Neutral (Grey, Base) — todo lo estructural: superficies, bordes, tipografía.
- Semánticas (Success, Yellow, Danger, Blue) — solo feedback de estado. Su significado es fijo: no uses Danger porque queda lindo en rojo.
- Extendidas (Orange, Green, Pink, Violet, Neon) — categorías, visualización de datos, ilustración y material de marca. No las metas en controles de UI: para eso están las semánticas.