Radius
BetaLos 11 radios de FDS y la regla Full / Semi que decide la personalidad de cada superficie.
El radio es una de las decisiones que más carácter le da a una interfaz. Polen
tiene 11 pasos oficiales (colección Radius de Figma, radius-none …
radius-full), expuestos en código como --ds-radius-{nombre} y como
utilidades rounded-{nombre}.
Escala
none0pxOficial
xxs2pxOficial
xs4pxOficial
sm6pxOficial
md8pxOficial
lg10pxOficial
xl12pxOficial
2xl16pxOficial
3xl20pxOficial
4xl24pxOficial
fullpillOficial
Full vs. Semi
Los componentes interactivos (Button, Badge, Input, Chip) tienen una propiedad Radius con dos valores:
- Full — pill (
radius-full). Superficies de marketing, vida estudiantil, comunicación cercana. - Semi — el radio escala con el tamaño del componente, para que la curvatura se perciba igual en un control chico y en uno grande.
| Tamaño del control | Alto | Radio Semi |
|---|---|---|
sm | 32 | radius-sm · 6 |
md | 40 | radius-md · 8 |
lg | 48 | radius-lg · 10 |
xl | 64 | radius-xl · 12 |
Cómo elegir un paso
| Tokens | Para qué |
|---|---|
none | Elementos a sangre: banners de ancho completo, tablas, divisores. |
xxs xs | Detalles chicos: checkbox, tags compactos, marcadores, focus de celdas. |
sm – xl | Controles (regla Semi) y superficies pequeñas: tooltips, menús, toasts. |
2xl 3xl 4xl | Contenedores: cards, modales, paneles, media. |
full | Pills, avatares, dots de estado. |
Reglas de uso
- Radios anidados: el radio interior = radio exterior − padding. Una card
2xl(16) con paddingmd(8) lleva media con radiomd(8). Si da 0 o negativo, usánone. - No mezcles Full y Semi dentro de una misma sección.
- Cuanto más grande la superficie, más grande el radio — un modal con
radius-smse ve filoso; un checkbox conradius-xlse ve como un radio.
En código
<div className="rounded-2xl p-(--space-4xl)">…</div>.panel {
border-radius: var(--ds-radius-2xl);
}