Colors
#foundation-colorsVista previaEn producción
Color palette
The working color scales for product UI. Start from these ramps and promote semantic tones only when the state itself needs emphasis.
Indigo
Accent
Gray
Success
Warning
Error
Tokens, escalas y primitivas que dictan cómo se ve cada superficie. Empieza acá antes de tocar componentes — todo lo demás hereda estas decisiones.
Color palette
The working color scales for product UI. Start from these ramps and promote semantic tones only when the state itself needs emphasis.
Indigo
Accent
Gray
Success
Warning
Error
heading-1
utility class
72px Hero heading
heading-2
utility class
48px Section heading
heading-3
utility class
32px Feature heading
heading-4
utility class
28px UI heading
heading-5
utility class
20px Card heading
body-xl
utility class
24px Lead paragraph for higher-emphasis sections.
body-lg
utility class
18px Supporting text with a bit more presence.
body
utility class
16px Default body copy used across forms and content.
body-sm
utility class
14px Helper text, labels, and compact UI copy.
caption
utility class
Meta label
Spacing scale
2
3
4
5
6
8
10
12
Radius scale
rounded-lg
rounded-xl
rounded-2xl
rounded-full
Default card
Border + subtle shadow
Used for most elevated blocks and showcase wrappers.
Filled card
Calm secondary surface
Best for grouped content, softer contrast, and non-interactive supporting blocks.
Background subtle
Page-level neutral wash
Used behind sections, rails, and softer full-width containers.
Common icon sizes
size-4
size-5
size-6
size-8
Touch targets
40px
48px
56px