Un sistema, una voz visual.
Polen es el design system de FDS: tokens, componentes y patrones de motion documentados con previews en vivo y código listo para copiar.
- 43
- componentes
- 105
- roles de color
- 11
- rampas light y dark
Empezar
Elegí tu camino
- Para diseñadoresActivá las librerías de Figma, elegí el rol correcto y usá los componentes sin romperlos.Leer →
- Para developersInstalá los tokens y cada componente con un comando. React 19, Tailwind 4, Base UI.Leer →
- Estado de componentesQué existe hoy en Figma, en código y en la documentación, y qué falta.Leer →
Componentes
43 componentes, los mismos en Figma y en código
Probálos: son los componentes reales del registry, con sus estados, teclado y dark mode.
- Button
- Input
- Select
- Checkbox y Switch
- Tabs
- Badge y ChipNuevoBeca 50%ActivoPendiente
- Alert
Inscripción confirmada
Ya podés ver tus materias en el calendario. - Toggle group
- SliderCuota mensual
- ProgressPasos completados
- Avatar+1
- Pagination
- Stepper
- AccordionEn febrero y julio.
Fundamentos
Color, tipografía, espaciado, elevación
Todo lo que los componentes tienen en común, importado tal cual de 🌻 FDS Design Tokens.
Cómo está hecho
Decisiones que lo mantienen consistente
Una sola fuente de verdad
Los tokens se exportan de Figma y generan el CSS. Las tablas de las docs leen los mismos archivos que los componentes.
Roles antes que valores
105 roles semánticos conectan 11 rampas de color con cada componente: el dark mode no cuesta trabajo.
Accesible por construcción
Comportamiento sobre Base UI; cada ejemplo del registry pasa por axe en los tests, y cada página documenta teclado y ARIA.
Código real
Todo snippet que copiás es el código que renderiza el preview. El playground genera el snippet desde el mismo estado.