Clarity Collective
Clear direction. Confident you.
The foundational visual language, color, type, spacing, and motion, that every page is built on. Warm editorial minimalism: calm, premium, emotionally intelligent.
01 · Color Palette
A warm, grounded spectrum
Cream
bg-cream
Cream Deep
bg-cream-deep
Beige
bg-beige
Sand
bg-sand
Sand Deep
bg-sand-deep
Latte
bg-latte
Latte Deep
bg-latte-deep
Espresso
bg-espresso
Blush
bg-blush
Clay
bg-clay
02 · Typography
Editorial serif meets clean sans
Display · Cormorant
Clarity today.
H1 · Playfair Display
Find clarity in your next chapter.
H2 · Playfair Display
Confident decisions start here.
H3 · Playfair Display
Your future deserves direction.
Body · Inter
Clarity Collective helps you navigate change, gain clarity, and take intentional steps toward a fulfilling career. We combine empathy with structure to guide you forward.
Eyebrow · Inter / uppercase
Clear direction. Confident you.
Accent · Cormorant Italic
Bringing you the rarity of clarity.
03 · Buttons
Guided, never pushy
04 · Pills & Tags
Soft signposting
05 · Cards
Calm, contained structure
Reflect
Career Clarity Session
A 90-minute personalized session to map where you are and where you want to go next.
Strategize
Transition Intensive
Multi-session coaching to move from feeling stuck to a confident, structured plan.
Grow
Leadership Coaching
Develop the confidence and positioning to step into your next chapter of leadership.
06 · Motion
Subtle by design
Every section on this page fades and rises gently into view as you scroll, using a soft cubic-bezier ease. Cards lift on hover. Nothing flashy, motion that reassures rather than demands attention.
Brand loader
The C mark drawing itself on, then releasing, our signature “write-on” loading state. It stands in for any moment the site is thinking: booking availability, form submissions, generated documents.
07 · Downloads
Take the brand with you
Logos in transparent SVG (scalable, for print + design tools) and PNG (for quick use). Dark marks for light backgrounds, the cream mark for dark ones.
Animated C
The signature “write-on” loop as a self-contained animated SVG, drop it into a site, email signature, or loading screen.
Download animated SVG ↓
Fonts
Playfair Display
Headlines
Get font ↗Cormorant Garamond
Display / italic accents
Get font ↗Inter
Body / UI
Get font ↗All three are free (Google Fonts) and already built into Canva and Adobe Fonts, so Sue can use them in templates without installing anything.