Design Tokens
Hooked brand — Helvetica Neue · P&B · Apple-style
Neutral Scale
50
#fafafa
100
#f5f5f5
200
#e8e8e8
300
#d9d9d9
400
#b8b8b8
500
#959595
600
#595959
700
#3d3d3d
800
#1a1a1a
900
#0a0a0a
950
#000000
Semantic Colors
Background
--background
Foreground
--foreground
Primary
--primary
Secondary
--secondary
Muted
--muted
Accent
--accent
Border
--border
Card
--card
Status Colors
Success
--success
Warning
--warning
Destructive
--destructive
Info
--info
Chart Colors
Chart 1
--chart-1
Chart 2
--chart-2
Chart 3
--chart-3
Chart 4
--chart-4
Chart 5
--chart-5
Typography — Helvetica Neue
Display / 64px / LightHooked
H1 / 48px / BoldHooked
H2 / 32px / BoldHooked
H3 / 24px / MediumHooked
H4 / 20px / MediumHooked
Body / 16px / RegularHooked
Small / 14px / RegularHooked
Caption / 12px / UpperHooked
Letter Spacing
Tight −0.02emOffer-led Growth
Normal 0emOffer-led Growth
Wide 0.08emOffer-led Growth
Wider 0.15emOffer-led Growth
Border Radius
Sharp (0px)
SM (1.5px)
Default (4px)
MD (3px)
LG (4px)
XL (5.5px)
Full
Shadows
None
none
SM
0 1px 2px
Default
0 1px 3px, 0 1px 2px
MD
0 4px 6px
LG
0 10px 15px
Button — Variants
Badge — Variants
DefaultSecondaryOutlineDestructive
Card
Alert — Variants
Default
Informação padrão do sistema.
Destructive
Ação não pode ser desfeita.