Saltar al contenido

Introducción

Beta

Qué es Polen, cómo está organizado y por dónde empezar según tu rol.

Polen es el design system de FDS: un mismo conjunto de decisiones —color, tipografía, espaciado, componentes, motion— expresado dos veces, en Figma y en código, con los mismos nombres. Lo que un diseñador elige en el panel de propiedades es lo que un developer escribe como prop.

Por dónde empezar

Si sos…Empezá por
Diseñador/aPara diseñadores — activar las librerías, elegir tokens, usar componentes.
DeveloperPara developers — tokens en CSS/Tailwind, dark mode, componentes.
CualquieraEstado de componentes — qué existe hoy y qué falta.

Cómo está organizado

  • Fundamentos — las decisiones base: color y sus roles semánticos, tipografía, espaciado, radius, elevación, tamaños, iconos.
  • Componentes — cada uno con cuatro pestañas: Uso (cuándo sí, cuándo no, do/don't), Specs (medidas, tokens, propiedades de Figma), Código (playground, props) y Accesibilidad.
  • Templates — páginas completas (login, dashboard, listado, configuración, checkout) armadas solo con componentes, para copiar y adaptar.
  • Motion — easing, duraciones y patrones de animación.

Buscá cualquier cosa con ⌘K — páginas y también secciones dentro de las páginas.

Principios

  • Una sola fuente de verdad. Los tokens de estas páginas se generan desde los mismos archivos que consumen los componentes. No hay tablas a mano que se desactualicen.
  • Roles antes que valores. Nadie elige #00922e; se elige primary/solid. Eso hace posible el dark mode y los cambios baratos.
  • Código real. Todo snippet que copies es el código que renderiza el preview que estás viendo.
  • Accesible por defecto. Foco visible, teclado, targets mínimos y prefers-reduced-motion vienen resueltos en el componente.
  • Si falta, se pide. Un valor suelto o una instancia desvinculada es deuda; una conversación para extender el sistema, no.

El estado de cada página se indica con su badge: draft, beta o estable.