Color

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#

Roles semánticos#

Nunca uses una primitiva directo en un componente: usá el rol. El rol resuelve a la primitiva correcta en cada tema, así que un componente escrito contra --bg y --fg funciona en light y dark sin una sola condicional.

Convención de estados#

Los estados interactivos siguen la progresión de la escala:

• Sólido: fondo 9, hover 10, pressed 11
• Tonal: fondo 3, hover 4, pressed 5, borde 6
• 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) — solo feedback de estado. Su significado es fijo: no uses Danger porque queda lindo en rojo.
• Extendidas (Orange, Green, Pink, Blue, 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.