Lodestar Agency Consulting — Design System
Dark = Lodestar (canonical) · Light = Agency Value Institute variant
Design System · Ground Truth

Lodestar Agency Consulting

A dark-anchored navy palette with the locked Coral Signal accent, Source Sans 3 type, and coral-to-blue gradients.

Human-readable mirror of docs/design.md (the source of truth). Every token and component below is styled from those values. Toggle the theme to preview the light / Institute variant — note coral steps back on light, cerulean carries emphasis.

01 — Colors
Brand palette

Navy-led core, the locked Coral Signal accent, and a cool slate scale. coral is a dark-background signal — never a flat highlight on white.

Core brand
Blue Zodiac
#153359
Primary / dark surface
Zodiac Dark
#0E2240
Deepest canvas
Deep Cerulean
#0183AA
Links / secondary
Viking
#60BEDC
Accent on dark
Solitude
#E8F4FF
Light tint
Coral Signal — locked accent
Coral Light
#FEE2E2
Badge tint
Coral Muted
#F9ADA3
Soft accents
Coral Signal
#F47B6C
CTA / highlight
Coral Hover
#F06A59
Hover state
Coral Deep
#E05A4C
Active / emphasis
Neutral slate scale
50
#F8FAFC
100
#F1F5F9
200
#E2E8F0
300
#CBD5E1
400
#94A3B8
500
#64748B
600
#475569
700
#334155
800
#1E293B
900
#0F172A
Semantic states
Success
#10B981 / #D1FAE5
Warning
#F59E0B / #FEF3C7
Error
#EF4444 / #FEE2E2
Info
#0183AA / #E8F4FF
02 — Gradients
Signature coral-to-blue gradients

The brand's boldest device. Use as fills for heroes and feature cards, or as ~70% overlays on photography for an ownable look. Coral reads richest here — flowing into the blues.

Brand & coral gradients
Zodiac → Cerulean → Viking
Ocean Current
Coral → Cerulean
Sunset Navigation
Coral → Viking
Warm Current
Coral Deep → Zodiac
Deep Signal
Coral → Cerulean → Viking
Full Spectrum
Zodiac → Coral → Solitude
Dawn Horizon
Overlay preview (~70% over photography)
Sunset Navigation
Hero images & blog covers
Deep Signal
Slide titles & dark features
Full Spectrum
Decks & social
03 — Typography
Source Sans 3

One typeface across every touchpoint. Weight and size create hierarchy — never a second family. Arial is the email fallback.

Stop selling effort.
display
Source Sans 3 · 700
48px / 1.08 / -0.02em
Productize your expertise into scalable offers
h2
700 · 36px / 1.12
From deliverables to transformation
h3
600 · 26px / 1.2
The value conversation shift
h4
600 · 20px / 1.3
Value Definition
eyebrow
600 · 12px / +0.12em / uppercase
The agencies that command premium pricing aren't selling more hours — they're selling a different outcome.
body-lg
400 · 18px / 1.6
When you shift from deliverables to transformation, you change the entire conversation about value. Your pricing becomes a reflection of impact, not effort.
body
400 · 16px / 1.6
Explore the diagnostic to see where your agency sits on the growth spectrum.
small
400 · 14px / 1.6
04 — Components
Live components

Every entry from the components: block, rendered live. Coral drives primary actions; on dark it sings.

Buttons — on dark (canonical)
Buttons — outline / disabled
Link
Hear from agency leaders →
Input — default & focus
Chips & badges
PricingPositioningValue Model
SuccessWarningErrorInfo
Card — surface
Dark

Price your impact, not your hours

Shift the value conversation and command pricing that reflects your expertise.

Card — gradient (feature)
Gradient

Productize your value

Turn your methodology into repeatable, scalable offers that deliver transformation.

Quote card
"The agencies that thrive aren't working more hours — they've learned to package and position their expertise so clients see them as the only choice."
Brian Kessman
Founder, Lodestar Agency Consulting
05 — Spacing, Radius & Elevation
Structure
Spacing — 4px base
Radius — soft & modern
sm · 6px
md · 10px
lg · 16px
xl · 20px
full · 999px
Elevation — navy-tinted shadows
xsHairline lift
smCards at rest
mdRaised / hover
lgModals / popovers
06 — Guardrails
Do's & Don'ts

✓ Do

  • Keep the brand navy-led; let coral act as a signal — CTAs, highlights, gradients.
  • Put coral on dark backgrounds, where it reads richest.
  • Use cerulean as the interactive accent in light mode / the Institute variant.
  • Set everything in Source Sans 3 at the defined scale.
  • Reach for coral-to-blue gradients on heroes, feature cards, and image overlays.

✗ Don't

  • Place flat coral on white — it cheapens to clashing sports colors. Use cerulean or a gradient.
  • Introduce a second typeface, a serif, or a novelty font.
  • Oversaturate or brighten the palette away from its premium navy character.
  • Let coral and viking fight for the same job — coral = action, viking = accent on dark.
  • Use hard black or pure-gray neutrals — stay on the cool slate scale.
You're currently signed in as brian@lodestaragencyconsulting.com Brian Kessman Change account OK