EazyBoook Design System
Token Showcase
Verifies that the Onest font, color tokens, type scale, spacing, and radius are all wired correctly.
Colors
primary
#090a0b
secondary
#dddddd
background
#ffffff
input
#f5f5f5
gray
#e7e7e7
border
#d8d8d8
success
#e6f4ea
warning
#fff8e1
info
#e8f0fe
error
#fff0f0
splash-bg
#030810
Type Scale
large-titleLarge Title — 34px
title1Title 1 — 28px
title2Title 2 — 22px
title3Title 3 — 20px
headlineHeadline — 17px
bodyBody — 17px
calloutCallout — 16px
subheadlineSubheadline — 15px
footnoteFootnote — 14px
caption1Caption 1 — 12px
caption2Caption 2 — 11px
Font Weights
400 Regular — The quick brown fox jumps over the lazy dog
500 Medium — The quick brown fox jumps over the lazy dog
600 Semibold — The quick brown fox jumps over the lazy dog
700 Bold — The quick brown fox jumps over the lazy dog
800 Extrabold — The quick brown fox jumps over the lazy dog
900 Black — The quick brown fox jumps over the lazy dog
Spacing
xs4px
sm8px
md16px
lg24px
xl32px
xxl48px
Border Radius
none
xs
sm
circle