Global Components
Typography
Display — KB Pen
H1 — KB Pen
H2 — KB Pen
H3 — KB Pen
H4 — KB Pen
H5 — KB Pen
H6 — KB Pen
H small — KB Pen
Body — Designed to be used. Today. Tomorrow. Next Wednesday. Whenever.
Body small — Designed to be used. Today. Tomorrow. Next Wednesday. Whenever.
Body xs — Luxury pen
Rare, technical xxs — Luxury pen
Colors
Primary
primary/black
primary/white
Secondary
secondary/col-15
secondary/col-16
secondary/col-17
secondary/taupe
Neutral
neutral/100
neutral/200
neutral/300
neutral/400
neutral/500
neutral/600
neutral/700
neutral/800
neutral/900
Utility
utility/success
utility/error
utility/warning
utility/disabled
Content
content/champaign
content/rosewood
content/chocolate
Semantic
text/inverse
text/primary
border/strong
border/brand
Buttons
Primary — on light surface
Default
Hover
Disabled
Primary — on dark surface
Default
Hover
Disabled
Secondary — on light surface
Default
Hover
Disabled
Secondary — on dark surface
Default
Hover
Disabled
Note: hover columns use a static .is-hover modifier so every state stays visible at rest. Real :hover and [disabled] are also wired up. Pressed/active state and full link variants come from a later Components prompt. Mobile and Desktop in Figma are the same button — vertical padding and label type shrink below 750px; resize the window to see both.
Inputs
Colour — Dark
Default
Hover
Active / focus
Disabled
Colour — Light
Default
Hover
Active / focus
Disabled
Note: Figma's Active state renders identically to Default for both colours (no separate active treatment) — reproduced as-is above.
Inline form — input + submit combined
Default
Hover
Active / focus
Disabled
Note: sizing/type scale is mobile-first and switches to the desktop values at 750px, same as the rest of the type system — resize the window to see both.
Icons
bag
play
pause
volume-on
volume-off
delivery
account
plus
minus
close
menu
drop-list
drop-list-alt
arrow
arrow-left
arrow-right
chevron-top
chevron-bottom
chevron-left
chevron-right
zoom
tik-tok