/design-system
Dynamic Peace · Preview
Preview surface · not production
Every token, ruler, and component below is drawn against lime chrome so the real brand tokens stand on their own feet. Toggle the five decisions below to reshape the live mock, then scroll to §07 Moodboard, §08 Typographic arrangements and §09 Font pairings to explore light-theme suggestions drawn straight from docs/moodboard.
Design Decisions
Every choice below drives the live mock further down. No writes to the codebase yet.
G1
Dark background
Which dark surface do all posts share?
G2
Title gradient · to-
Standardize the terminal color of the H1 gradient.
G3
Primary brand accent
Audit says lavender. WARP.md says lime-200. Pick one for editorial surfaces.
G4
Homepage pink #ff2fb3
Keep as a homepage-only accent or drop entirely?
G5
Mock theme
Preview the standardized post on the current dark surface or on moodboard cream.
Category labels · headings · links
Tech-track borders · BlogCode
WARP.md primary · wireframe chrome
Light page background
Dark page background (warm)
Dark alt · 12 posts today
Headings
Body
Muted · subtitle
Footer label
Headings
Body
Muted · subtitle
Footer label
Content column locked to max-w-3xl (768 px). Narrow copy uses max-w-2xl (672 px).
Before · silent default
For Everyone
The visible column of a BlogSegment.
For Engineers
Denser body sits below when tech mode is on.
After · audit target
For Everyone
The visible column of a BlogSegment.
For Engineers
Denser body sits below when tech mode is on.
Left: current defaults inside blog-segment.tsx (still rendered by circle-onboarding & the-synesthetic-mirror). Right: the audit's target using your current accent choice.
Dynamic Peace — Track Name
Footer description sits calm and small at the end of every post.
Field Notes
Standardized intro paragraph. Same size, same width, same rhythm on every post — no exceptions.
For Everyone
Editorial paragraph. Anything you write here inherits the same token stack — no per-post overrides.
For Engineers
Slightly denser body copy, denser leading, but same column width and same border geometry.
High-contrast alternative to stone-50. Cream ivory background comes straight from docs/moodboard/gradient_bg_*.jpg. Body copy runs deep indigo, not gray — keeps the palette warm and saturated even in a light context.
Page background
Headings · 12.3:1 on cream
Body · 10.6:1 on cream
Muted · 4.9:1 on cream
Gradient mid
Gradient edge (moodboard)
Field Notes
Body copy sits in deep indigo — warmer than stone-600, still 10.6:1 against the ivory background. Subtitles pull back to #6B5F8B.
Four hero surfaces sampled from docs/moodboard. Each card shows the actual jpg (copied into public/moodboard/) plus a CSS radial-gradient recipe you can lift into a component when you want the same feel without shipping the raster.
01 · cream + violet
background: radial-gradient(120% 90% at 25% 60%, #4A2FE0 0%, transparent 55%), radial-gradient(80% 60% at 80% 20%, #4AD8E6 0%, transparent 50%), #F5F1DC;
02 · twilight column
background: radial-gradient(60% 100% at 20% 50%, #1a1240 0%, transparent 65%), radial-gradient(90% 70% at 70% 30%, #7DE9E7 0%, transparent 55%), #F5F1DC;
03 · aurora sweep
background: radial-gradient(60% 90% at 10% 20%, #3B21B5 0%, transparent 55%), radial-gradient(70% 80% at 70% 55%, #4AD8E6 0%, transparent 50%), #EAF3FB;
04 · lantern glow
background: radial-gradient(45% 90% at 8% 50%, #1E14B0 0%, transparent 60%), radial-gradient(35% 55% at 82% 35%, #4AD8E6 0%, transparent 55%), #F5F1DC;
Four ways to compose the masthead. All use the same two fonts — the difference is rhythm, alignment, and where the gradient sits. Rendered on cream so you can judge the light theme directly.
Field Notes
Standardized intro, roomy line-height, sitting under the title.
Editorial (current)
Label above · gradient H1 left-aligned · intro below at max-w-2xl. Familiar, safest.
Field Notes
2026 · 07
Split masthead
Metadata left column (mono) · H1 right column (gradient). Magazine cadence.
Field Notes
Poster (line-broken)
Big display H1 with hard line breaks · huge leading. Use for pillar posts.
Field Notes
Hero card
H1 sits inside a moodboard-gradient card. Full-bleed. Use for entry pages.
Only two custom faces are loaded (Good Monolith · Noto Serif Toto) + system mono. Three ways to combine them without introducing a third file.
Field Notes
Noto Serif Toto carries the reading load. Warm, close to a book page.
Editorial (current)
Good Monolith H1 · Mono metadata · Noto Serif Toto body
Field Notes
An intro paragraph, still in Good Monolith — muted opacity keeps hierarchy clear.
Body text drops into Noto Serif for the long read.
Mono editorial (unified)
Good Monolith H1 · Good Monolith intro (60% opacity) · Noto Serif Toto body
Field Notes
Serif-set title feels editorial, closer to a print title page. Reserve for essays.
Serif-forward (magazine)
Noto Serif Toto H1 · Good Monolith metadata caps · Noto Serif Toto body
extend: {
colors: {
// Blog / editorial
dpLavender: '#807EEF',
dpMint: '#E1F7D0',
// Surface
dpBgDark: '#0f0f14',
// Wireframe chrome (kept out of production)
// limeChrome: '#d9f99d',
},
}Once you approve G1–G3, this snippet drops into tailwind.config.ts and a codemod replaces every [#807EEF] usage across the 18 posts with dpLavender.