Design System
Congruently Enterprise 7 · Visual Language · Tokens
01 Surfaces
Surface 0
#09090b
Surface 1
#111113
Surface 2
#18181b
Surface 3
#1e1e22
Surface 4
#27272a
Glass
white 4%
Glass Hover
white 8%
Glass Active
white 12%
Prep Working Surface (neutral grey, not black)
Prep BG
#151518
Prep Surface
#1c1c20
Prep Raised
#222226
Prep Input
#1a1a1e
02 Text Hierarchy
Primary
#fafafa
Secondary
#a1a1aa
Tertiary
#71717a
Quaternary
#52525b
03 Accent & Status Colors
Green
#22c55e
Green Bright
#4ade80
Red
#ef4444
Red Muted
#b55238
Amber
#f59e0b
Indigo
#6366f1
Blue
#3b82f6
04 Mind Colors
Confident
Creative
Diplomatic
Global
Navigator
ND ADHD
ND Autistic
ND AuDHD
Technical
Visionary
05 Coaching Trigger Colors
Proactive
Anticipation
Subtext
Idea
Restraint
Connection
Urgent
06 Person Colors (20 unique)
07 Typography
Display / Helvetica Neue / 34px / 600 / -0.02em
Welcome to Congruently
Hero Quote / New York/Charter / 26px / 500 / Serif
Hold. Let them finish the thought.
Heading L / Helvetica Neue / 24px / 600 / -0.015em
Choose Your Coaching Style
Heading M / Helvetica Neue / 20px / 700
Quarterly Strategy Alignment
Heading S / Helvetica Neue / 15px / 600
Q3 Planning Review with Sarah & Marcus
Body / Helvetica Neue / 13px / 400 / Line 1.5
You and Sarah reviewed the Q2 timeline. She pushed back hard on the April deadline — her team is understaffed. Marcus offered to shift resources but wanted data first.
Body Small / Helvetica Neue / 12px / 400
April deadline still contested — no resolution from last meeting
Section Label / JetBrains Mono / 9px / 700 / 0.18em / Uppercase
01·The Brief·Haiku
Card Title / JetBrains Mono / 9px / 700 / 0.14em / Uppercase
◓ Last Time · 2026-03-28
Mono Label / JetBrains Mono / 10px / 700 / 0.14em / Uppercase
My Ask Haiku
Micro Label / JetBrains Mono / 8px / 700 / 0.12em / Uppercase
Your coach · live in meeting
Person Name (Intelligence) / JetBrains Mono / 10px / 700 / Person Color
Sarah C. Marcus R. Priya S. Nadia O. David K.
Countdown / JetBrains Mono / 11px / 700 / 0.08em / Green
IN 12 MIN
Overdue Badge / JetBrains Mono / 9px / 700 / Red
Overdue
08 Spacing (8pt grid)
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-8
32px
space-10
40px
space-12
48px
09 Border Radius
SM
6px
MD
10px
LG
14px
XL
20px
FULL
pill
CARD
flush left
10 Borders
Subtle
Default
Strong
11 Shadows
Card
Popover
Modal
A/V Popover
12 Motion
Easing
cubic-bezier(0.16, 1, 0.3, 1)
Spring-like, responsive
Durations
Fast: 150ms · Normal: 250ms · Slow: 400ms
Entrance
fadeInUp: opacity 0→1, translateY 8px→0
Staggered 100ms per element
13 Design Rules
Swiss Wayfinding. Mono uppercase labels act as signs. Numbers + separators create hierarchy. "01 · IDENTITY · REQUIRED"
Color as Purpose. Green = go/active. Red = stop/danger. Amber = warning. Indigo = decision. Blue = connection. Each mind gets a unique color.
Flush Left Border. Cards use 3px colored left bar, rounded right only. No strokes on curves. Ever.
Typography is Precise. Sans for warmth. Mono for system labels. Serif only for the hero quote.
Person Names. First name + last initial everywhere (Sarah C.). Full names in data only. Colored names on intelligence surfaces. White names on meeting cards.
Positive Profiles. User-facing person data shows only positive/neutral signals. Negatives stay internal to the coaching engine.