Skip to main content
Odyssey Design System

Design Tokens

Design Tokens abstract Base elements into names that are commonly understood. They are then used together to build components.


Semantic Colors
Token Name Example Value
$color-primary-light
Blue 300
$color-primary-base Blue 500
$color-primary-dark Blue 900
$color-danger-light Red 300
$color-danger-base Red 500
$color-danger-dark Red 900
Focus Ring
Token Name Example Value
$focus-ring-primary Blue 300
$focus-ring-danger Red 300
Type
Token Name Example Value
$text-body Aa Gray 900
$text-danger Aa Red 500
$text-heading Aa Gray 900
$text-sub Aa Gray 600
Spacing
Token Name Example Value Pixels
$spacing-xl
$spacing-l
$spacing-m
$spacing-s
$spacing-xs

Have questions? Ask us on slack! #odyssey