STACK TECH DESIGN TOKENS

Design Tokens

Colección canónica de átomos de diseño. Haz clic en cualquier elemento para copiar su valor.
Total variantes: 50+

01. Paleta de Colores 34 Tokens

Primary (Brand Blue)

50

#f0f9ff

100

#e0f2fe

200

#bae6fd

300

#7dd3fc

400

#38bdf8

500 (Main)

#0ea5e9

600

#0284c7

700

#0369a1

800

#075985

900

#0c4a6e

Secondary (Electric Purple)

Status & Semantic

Success
Warning
Error
Info
Neutrals (Surface & Text)

02. Tipografía 12 Tokens

Display / H1

The quick brown fox

H2

Jumps over the lazy dog

H3

Design systems are alive

H4

Consistency is key

Body Large (Lead)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Domines et sanctus.

Body Base

Standard body text used for the majority of the content. Good readability is essential for user experience.

Body Small

Secondary text, captions, or less important information often uses this size.

Font Weights

Thin (100)
Light (300)
Regular (400)
Medium (500)
Bold (700)
Black (900)

Font Families

Inter (Sans-Serif)
JetBrains Mono

03. Espaciado 8 Tokens

1 (4px)
2 (8px)
4 (16px)
6 (24px)
8 (32px)
12 (48px)
16 (64px)
24 (96px)

Base unit: 4px (0.25rem). Used for margins, paddings, and gaps.

04. Border Radius 6 Tokens

none
sm (2px)
base (4px)
md (6px)
lg (8px)
full

05. Sombras (Elevation) 6 Tokens

shadow-sm
shadow (base)
shadow-md
shadow-lg
shadow-xl
shadow-inner

06. Animaciones 6 Tokens

bounce
pulse-fast
spin
wiggle
float
ping
Copiado al portapapeles!