Visual Style Guide — V1

Concord
Design System

Intentional, minimal, and precise. A design language for builders who want to feel understood, not analyzed.

April 2026 — Prepared for Gabriela & Ruth
01 — Color
Core Palette
Four colors. No gradients, no neons. The palette communicates through restraint — black grounds, white breathes, deep blue anchors, sand warms.
Black
--black: #0A0A0A
White
--white: #FAFAF9
Deep Blue
--deep-blue: #1B2A4A
Sand
--sand: #C8B89A
Extended Palette
Black
Soft
Muted
Deep Blue
DB Light
DB Muted
Sand
Sand Light
Sand Warm
Sand Pale
White
Warm
Semantic Tokens
surface-primary#0A0A0A
surface-secondary#1A1A1A
surface-elevated#2A2A2A
text-primary#FAFAF9
text-secondary#D9CEBC
text-muted#C8B89A
accent-primary#C8B89A
accent-subtle#1B2A4A
border-subtlesand @ 12%
border-visiblesand @ 25%
02 — Typography
Type Pairings
Three proposed pairings. Each balances the intentional, artistic tone with functional readability. Recommended pairing marked below.
Option C Recommended
When you share who you are, you become a constellation.
The experience should feel intentional, minimal, and precise. Users should feel understood, not analyzed. Personalization should be present, but invisible.
HeadingInstrument Sans
BodyIBM Plex Serif
VibeIntentional Calm
Option A
When you share who you are, you become a constellation.
The experience should feel intentional, minimal, and precise. Users should feel understood, not analyzed. Personalization should be present, but invisible.
HeadingInter
BodySource Serif 4
VibeQuiet Authority
Option B
When you share who you are, you become a constellation.
The experience should feel intentional, minimal, and precise. Users should feel understood, not analyzed. Personalization should be present, but invisible.
HeadingDM Sans
BodyLibre Baskerville
VibeElevated Minimal
Type Scale (Instrument Sans + IBM Plex Serif)
Display 48–96px Concord
H1 32px Your Current State
H2 24px Next Moves
H3 18px Profile Refinement
Body 16px You move quickly in vision but benefit from structured execution.
Small 13px Adding this later improves accuracy
Caption 11px Starting · Building · Evolving
03 — Spacing
Spatial System
A 4px base unit creates consistent rhythm. Strong spacing is core to the "breathing room" the design direction demands.
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
24px
space-6
32px
space-7
48px
space-8
64px
space-9
96px
space-10
128px
Radius & Elevation
4px
8px
12px
16px
Full
04 — Components
UI Elements
Every component reflects the core principles: intentional, minimal, precise. Hover to see interaction states.
Buttons
Inputs
Stage Labels
Starting Building Evolving
Subtle typographic variation gives personality while maintaining readability.
Progress Indicator
Step 3 of 5 — Your strengths
Action Card
Define your first product offer
Based on your goal and working style, start with a simple offering you can test this week.
Starting
Compatibility Labels
Strong Aligned values & working style
Moderate Complementary strengths
Potential Conflict Different approaches
Insight
"You move quickly in vision but benefit from structured execution. Your strength in seeing the whole picture is most powerful when paired with someone who excels at details."
System-generated insight · Based on profile
Profile Refinement Nudge
Birth Time — Incomplete
Add birth time
Soft pulsing glow, disappears once completed
05 — Motion
Animation Language
Subtle only. No heavy animation. Motion should feel like a quiet exhale — present but never demanding attention. Hover each to preview.
Fade Out (150ms)
Rise (250ms ease-out)
Scale Down (400ms)
Glow Transition
Hover — Entry screen door animation (~0.8s)
Easing & Duration Tokens
ease-outcubic-bezier(0.16, 1, 0.3, 1)
ease-in-outcubic-bezier(0.65, 0, 0.35, 1)
duration-fast150ms
duration-normal250ms
duration-slow400ms
duration-entrance600ms
06 — Guidelines
Design Principles
The guardrails that keep Concord feeling like Concord. Reference these during every design and development decision.
Do
Keep interactions minimal and intentional
Make personalization felt, not explained
Use strong spacing and breathing room between elements
Keep outputs clear, actionable, and specific to the user
Use card-based layouts with consistent spacing
Let the system feel intelligent without showing the machinery
Write insights in natural, clear language — no labels or types
Don't
Reference underlying frameworks (Human Design, etc.) in the UI
Use heavy animations, parallax, or bouncy transitions
Make it feel corporate, cluttered, or dashboard-heavy
Add complex analytics or data visualizations in V1
Use abstract or generic task suggestions
Over-explain the system — if it needs explaining, simplify it
Use gradients, neons, or trendy UI patterns
"When you fearlessly share who you are, you become a constellation connecting all of us blinking stars, looking for a way to shine."

Concord V1 — Style Guide — April 2026