Bordes y radios
Los bordes y radios ayudan a delimitar elementos, diferenciar superficies y mantener una expresión visual consistente entre los componentes.
Bordes
El sistema utiliza bordes de 1 o 2 px, según la importancia del elemento en la interfaz.
Ancho de borde
| Vista previa | Ancho | Uso |
|---|---|---|
| 1 px | Separadores y delimitaciones sutiles | |
| 2 px | Elementos relevantes o interactivos, como botones y controles |
Los colores de los bordes están definidos mediante los tokens semánticos disponibles en el fundamento Color. Estos contemplan distintos niveles de énfasis y funciones.
Para mantener la consistencia, utiliza estos tokens en lugar de definir colores de borde directamente.
Radios
La escala de radios ofrece valores predefinidos para diferentes tipos de elementos. Los radios pequeños se aplican en controles y elementos compactos; los intermedios, en campos, tablas y mensajes; y los más amplios, en tarjetas, paneles y contenedores.
El sistema también contempla un radio completamente redondeado para botones, indicadores circulares y elementos con forma de píldora. Usar esta escala evita incorporar curvaturas diferentes en cada componente y mantiene una relación consistente entre elementos de distintos tamaños.
El kit expone dos nombres para la misma escala (misma colección de Figma): --border-radius-*, la que usan los componentes del kit, y --radius-*, un alias más corto usado en este sitio. Los pasos que comparten nombre tienen el mismo valor; usa la que ya esté en uso en el archivo que edites. --border-radius-button es la excepción: no tiene equivalente en --radius-*, aunque su valor repite el de full.
Radio de esquina
| Vista previa | Radio | Variable | Valor |
|---|---|---|---|
| none | --border-radius-none | 0px | |
| s | --border-radius-s | 4px | |
| m | --border-radius-m | 8px | |
| l | --border-radius-l | 16px | |
| xl | --border-radius-xl | 24px | |
| full | --border-radius-full | 999px | |
| button | --border-radius-button | 999px |
Última actualización: Septiembre de 2026