Espaciado y radios
Spacing
Sección titulada «Spacing»Escala basada en múltiplos de 2px y 4px. Úsalos para gap, padding, margin y posicionamiento.
| Token | Valor | Preview |
|---|---|---|
--co-spacing-xxs | 2px | |
--co-spacing-xs | 4px | |
--co-spacing-sm | 6px | |
--co-spacing-sm2 | 8px | |
--co-spacing-md | 12px | |
--co-spacing-lg | 16px | |
--co-spacing-xl | 20px | |
--co-spacing-2xl | 24px | |
--co-spacing-3xl | 32px | |
--co-spacing-4xl | 40px | |
--co-spacing-5xl | 48px | |
--co-spacing-6xl | 56px | |
--co-spacing-7xl | 64px | |
--co-spacing-8xl | 72px | |
--co-spacing-9xl | 80px | |
--co-spacing-10xl | 88px | |
--co-spacing-11xl | 96px | |
--co-spacing-12xl | 104px | |
--co-spacing-13xl | 112px | |
--co-spacing-14xl | 120px | |
--co-spacing-full | 9999px |
Border radius
Sección titulada «Border radius»Sistema de esquinas redondeadas escalable. Usa --co-border-radius-full para chips/avatares circulares.
| Token | Valor | Preview |
|---|---|---|
--co-border-radius-xxs | 4px | |
--co-border-radius-xs | 8px | |
--co-border-radius-sm | 12px | |
--co-border-radius-lg | 16px | |
--co-border-radius-xl | 24px | |
--co-border-radius-2xl | 32px | |
--co-border-radius-3xl | 40px | |
--co-border-radius-4xl | 48px | |
--co-border-radius-5xl | 56px | |
--co-border-radius-6xl | 64px | |
--co-border-radius-full | 9999px |
Sombras
Sección titulada «Sombras»Una sola sombra elevada estándar. Filosofía Cobalt: minimal-shadow, más peso visual en bordes y contraste que en sombras flotantes.
| Token | Valor | Preview |
|---|---|---|
--co-shadow-lg | 0 10px 15px -3px rgba(26, 26, 26, 0.05), 0 4px 6px -4px rgba(26, 26, 26, 0.05) |