← Inicio

Sistema de diseño agenthical

Fuente de verdad visual del proyecto. Tokens en src/styles/tokens.css, componentes en src/styles/global.css.

Color

Principal

#4F46E5--color-primary
#8B5CF6--color-accent

Neutros

neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900

Semánticos

#16a34asuccess
#d97706warning
#dc2626error

Tipografía

Titular H1 (clamp 2.25–3.5rem, 900)

Titular H2 (clamp 1.625–2.25rem, 800)

Titular H3 (1.25rem, 700)

Subtítulo (1.125rem, 600)

Body (1rem, 400) — Lorem ipsum dolor sit amet.

Small (0.875rem, 400) — Texto auxiliar

XS (0.75rem, 400) — Meta / labels

Botones

Badges

Primary Accent Neutral Warning Success

Formulario

Este campo no es válido.

Espaciado (base 4px)

--space-1 (4px)
--space-2 (8px)
--space-3 (12px)
--space-4 (16px)
--space-5 (20px)
--space-6 (24px)
--space-8 (32px)
--space-10 (40px)
--space-12 (48px)
--space-16 (64px)
--space-20 (80px)