Design system
Style Guide
The colours, type and components used across noonedesign.co. Font: Geist (variable, weights 400–600). Updated 23 Oct 2026.
01
Colour
Core
Page background
#FAF9F6
Ink / text primary
#111111
Ink soft / buttons
#242223
Text secondary
#5B5856
Text muted
#6E6A66
Surface white
#FFFFFF
Surface soft
#F7F6F2
Border default
#E8E6E1
Accent
Accent orange
#EE6C3A
Orange hover
#D85A2A
Brand tint / lilac
#EFE4F4
Gradient A
Blue
#5C7CD6
Lilac
#B096E8
Pink
#F0A0BE
Peach
#FFC496
02
Typography
Geist for everything. Headings use weight 500 and tighter letter spacing as they grow. Sizes are desktop; mobile values in brackets.
Your own designer.
One designer. Every design you need.
Start your trial
All of it, one plan.
Packaging that sells on the shelf
Send a request, get designs in 24 hours. Revise until you love it.
“Our posts finally look like one brand.”
Unlimited revisions until it’s right. Pause or cancel your subscription anytime.
No card needed · No contract · Cancel anytime
Branding
03
Buttons & badges
Primary · #111 · pill 48px
Secondary · white + border
Accent · #EE6C3A
Small · nav 40px
Arrow badge · 36px
What we design
Eyebrow pill
Tag
Check · compare
04
Surfaces
Branding
“We came in with a logo we had outgrown and left with a full identity.”
Card · white, 1px #E8E6E1, radius 20
All of it, one plan.
Dark panel · #111, radius 20
Send your first request today.
CTA card · Gradient A mesh, radius 24
Radius: buttons and pills 9999px · cards 20px · large cards 24px · tags 9999px. Spacing follows an 8px grid; sections 96px top and bottom on desktop, 64px on mobile.
