Flow Design system
A living reference of the colors, type, and components used across the Fractal site — extracted from what’s already in production.
Colour Palette
Backgrounds
Dark Blue
Primary background · #0C2340
Surface Dark
Card / panel surface · #022542
Diffused Blue
Elevated surface · #142C47
Blue Tint
Highlight overlay · #007DBA 25%
Brand
Yellow
Primary accent · #FFB81C
Blue
Links & CTAs · #007DBA
Red
Error / alert · #DA301C
Text
White
Primary headings · #FFFFFF
White 80%
Body copy · White at 80%
White 60%
Captions & meta · White at 60%
Yellow Text
Labels & highlights · #FFB81C
UI & Borders
Grey 60%
Borders · Grey at 60%
Grey 40%
Subtle surfaces · Grey at 40%
Grey 20%
Faint tints · Grey at 20%
Line
Dividers & rules · #979797
Typography
Display
DM Sans / 700 / 64px
Heading 1
DM Sans / 700 / 40px
Heading 2
DM Sans / 700 / 24px
Heading 3
DM Sans / 700 / 16px
Body copy sits on Lato at 16px with 24px line height for long-form reading.
Lato / 400 / 16px
Small text
Lato / 400 / 14px
This is a link style
Lato / 700 / 16px · underline · Blue
Button / CTA label
DM Sans / 600 / 16px
