Style guide — the whole system on one page
Design system
Thirteen colour styles, sixteen text styles, ten motion tokens and seven components. Change anything here and the whole template follows.
Colour
Ink
#17151B
Primary dark surface and text
Ink Raised
#221E29
Cards on dark
Ink Sunken
#100E14
Deepest dark
Paper
#F8F4E9
Primary light canvas
Paper Raised
#EFE8D6
Cards on light
Acid Lime
#D7FF3F
Primary accent, CTAs, active states
Electric Violet
#6554F4
Interactive and digital accent
Bubblegum
#FF78B7
Playful graphic highlight
Tangerine
#FF713D
Secondary energetic accent
Ink Muted
#6E6679
Body text on light
Paper Muted
#9C96A8
Body text on dark
Rule on Paper
rgba(23,21,27,0.14)
Dividers on light
Rule on Ink
rgba(248,244,233,0.16)
Dividers on dark
Typography
Display Mega
Bricolage 800 · 124 / 72 / 38px
Unserious
Display XL
Bricolage 800 · 88 / 62 / 38px
Headline
Display L
Bricolage 800 · 58 / 44 / 31px
Section title
Display M
Bricolage 700 · 34 / 29 / 25px
Card title
Heading S
Bricolage 700 · 23 / 21 / 19px
Sub heading
Body L
Space Grotesk 400 · 20 / 18 / 17px
Lead paragraph copy sits here.
Body
Space Grotesk 400 · 17 / 16 / 16px
Standard paragraph copy sits here.
Body S
Space Grotesk 400 · 15 / 15 / 14px
Supporting detail copy.
Mono Label
DM Mono 500 · 12px · 0.14em
Mono label
Mono Micro
DM Mono 400 · 11 / 11 / 10px
Mono micro
Components
Button (4 styles × hover × pressed), Submit Button (5 form states), Navigation (5 breakpoint and drawer states), Sticker, FAQ Item, Filter Tab, Service Selector (6 states), Playground Lab (5 materials) and Gumdrop Object (5 materials).
Acid Lime
Bubblegum
Violet
Tangerine
Motion tokens
duration.fast
150–250ms
Microinteractions: icon shifts, chip fills
duration.medium
250–450ms
Interface transitions, variant swaps
duration.long
600–1100ms
Editorial reveals and section entrances
ease.snappy
spring-physics 600 20 1
Magnetic nudges and arrow shifts
ease.expressive
spring-duration 0.8s 0.3
Headline character reveals
ease.smooth
tween 0.44,0,0.56,1
Colour and link transitions
spring.soft
spring-duration 0.4s 0.2
Default button and card feedback
spring.elastic
spring-physics 420 17 1
Gumdrop hover and squash
stagger.tight
0.03s
Character-level type reveals
stagger.editorial
0.06–0.08s
Card and grid entrances