Blithe design system

Colour

• Lemon Yellow#f8ed43
• Light Green Yellow#c7d14f
• Violet Blue#40456a
• Dull Violet Black#1e0e3f

• backgroundvar(--color-background)
• surfacevar(--color-surface)
• mutedvar(--color-muted)
• foregroundvar(--color-foreground)
• muted foregroundvar(--color-muted-foreground)
• bordervar(--color-border)
• primaryvar(--color-primary)
• accentvar(--color-accent)
• inversevar(--color-inverse)

Type

• Synedisplay · 700, 800 · Check the font vendor
• Manropebody · 450, 550, 600, 650, 700 · SIL Open Font License 1.1

• Display125 / 41px · 800We make the moment someone decides to stay.
• H1111 / 56px · 800We make the moment someone decides to stay.
• H271 / 36px · 700Four ways in.
• H328 / 28px · 700A showreel that reads the room.
• Lead20 / 20px · 450Every project runs the same way, so you always know what you will see on Friday.
• Body17 / 17px · 450Every project runs the same way, so you always know what you will see on Friday.
• Small14 / 14px · 450Every project runs the same way, so you always know what you will see on Friday.
• Eyebrow15 / 15px · 600Arden Type · Type foundry

Components

Shape and motion

• sm · 10px
• md · 28px
• lg · 40px
• pill · 9999px
• shadow sm
• shadow md

• out · cubic-bezier(.22, .8, .24, 1)
• in-out · cubic-bezier(.65, 0, .35, 1)
• spring · cubic-bezier(.3, 1.3, .5, 1)
• fast · 180ms
• base · 360ms
• slow · 700ms
• slower · 1100ms