/dev/design-system

Design system

Showcase dos tokens e componentes. Fonte de verdade em docs/escala/DESIGN_SYSTEM.md.

tokens v0.1

Tipografia

Display Hero — Clash Display 700
Display L — Clash Display 700
Heading — Clash Display 600
Subheading — Clash Display 500
Body L — Satoshi 400, 16px / 1.6
Body — Satoshi 400, 14px / 1.6
Body S — Satoshi 400, 13px / 1.5
Label — Satoshi 500, 13px
Hint — Satoshi 400, 11px, tertiary
Mono — JetBrains Mono 400, 12px
MONO LABEL · 11PX · 500

Cores

Primary #FF5C1A
Primary Light #FF8C5A
Primary Dark #C43B00
Primary Tint #FFF0EB
Ink #111111
Muted #666666
Tertiary #999999
Surface #F5F5F5
Border #E8E8E8
Success #16A34A
Warning #F59E0B
Danger #DC2626
Info #2563EB

Border radius

2xs · 4px
xs · 6px
sm · 8px
md · 10px
lg · 12px
xl · 14px
2xl · 16px

Buttons

Variants
Tamanhos
Ícones e estados

Inputs

Input
Input com ícone
Textarea com counter
0/280
Custom select

Badges

Rascunho Pro Pronto Instagram Gray Outline v1.0

Cards

Créditos
348
de 350/mês
Conteúdos
12
esta semana
Engajamento
4.7%
↑ 0.4pp vs semana passada