Espaciado y radios

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

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

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)