Colour System
A structured palette built around 5 primary hues, each with dark and light variants for flexible UI application.
Primary Colours
Blue#4075BF
Green#55AA55
Red#D41111
Yellow#F2A40D
Purple#AE39C6
Greyscale & UI
Black Text
#072653
#072653
Dark Grey
#2C476C
#2C476C
Pale Blue
#CDD9E9
#CDD9E9
Light Grey
#EFF2F5
#EFF2F5
Ultra Light
#FAFBFC
#FAFBFC
Page BG
#F9FAFD
#F9FAFD
Select
#ECF2FB
#ECF2FB
White
#FFFFFF
#FFFFFF
Social Networks
Facebook
#1877F2
#1877F2
Instagram
#C32AA3
#C32AA3
YouTube
#FF0000
#FF0000
X / TikTok
#2C2C2C
#2C2C2C
LinkedIn
#007BB5
#007BB5
Pinterest
#BD081C
#BD081C
RSS
#EE802F
#EE802F
Google Biz
#5283EB
#5283EB
Typography
Proxima Nova type system — 6 header levels, 3 body sizes. Line-height 120% for headers, 150% for body.
Proxima Nova
Medium 500 · Semibold 600 · Bold 700
| Style | Preview | Size | Weight | LH |
|---|---|---|---|---|
| H1 | Header one | 36 | 600 | 120% |
| H2 | Header two | 32 | 600 | 120% |
| H3 | Header three | 22 | 500 | 120% |
| H4 | Header four | 18 | 500 | 120% |
| H5 | Header five | 14 | 600 | 100% |
| Body | The quick brown fox jumps | 16 | 500 | 150% |
| Small | The quick brown fox jumps | 14 | 500 | 150% |
| XS | The quick brown fox jumps | 12 | 500 | 150% |
Buttons
Three sizes, two variants, interactive states, and icon combinations.
Sizes
Large · 48px
Medium · 40px
Small · 32px
States
Default
Hover
Disabled
Danger
Icon Variants
With Icon
Icon Only
Icon Only · Small
Input Fields
Text inputs and dropdowns with all interaction and validation states.
Text Inputs
Default
Email
name@domain.com
Focus
Email
name@domain.com
Error
Email
name@domain
Please enter a valid email
Disabled
Email
name@domain.com
Password
Password
••••••••••
Dropdowns
Placeholder
Category
Select category
Selected
Category
Self Promotion
Open
Category
Self Promotion
Self Promotion
Blog Post
Curated Content
Evergreen
Controls
Checkboxes, radio buttons, and toggles with all interaction states.
Checkboxes
Radio Buttons
Toggles
On
Off
Disabled
Toasts
Notification toasts with contextual colour coding and consistent anatomy.
Permanent
Info
Post scheduled for 3:00 PM
It will be published to 4 connected profiles. You can edit it until then.
Success
Queue imported successfully
42 posts added to your Evergreen queue. They'll start recycling tomorrow.
Warning
Instagram token expires in 3 days
Re-authenticate to keep posting. Scheduled content will pause otherwise.
Error
Post failed to publish
Facebook rejected the image — file exceeds 4 MB. Resize and try again.
Complex Components
Modals, cards, navigation patterns, and composed UI elements.
Coming soon
Patterns
Empty states, loading sequences, onboarding flows, and error handling.
Coming soon