design system · manifold-modernist-infra · v0.1.0

A system is a tuple of tokens that satisfies a set of constraints.

Tokens are the parameter space; constraints carve out the manifold of valid systems. Family-specific constraints layer on top of universal observables.

polarity: light
density: comfortable
contrast tier: AA
constraints: 12 pinned (8 universal + 4 family)

Color tokens

Each text token's contrast vs page bg in this theme. WCAG 2.1 AA target = 4.5 : 1 for normal text, 3.0 : 1 for large text and UI elements.

Active theme · bg hsl(0, 0%, 100%)

--color-bg

hsl(0, 0%, 100%)

—

--color-fg

hsl(0, 0%, 6%)

19.13:1 AA

--color-muted

hsl(0, 0%, 35%)

6.98:1 AA

--color-faint

hsl(0, 0%, 50%)

3.98:1 fail

--color-rule

hsl(0, 0%, 90%)

1.25:1 fail

--color-code-bg

hsl(0, 0%, 97%)

—

--color-accent

hsl(0, 30%, 45%)

5.91:1 AA

Light theme (prefers-color-scheme: light) · bg #ffffff

--color-bg

#ffffff

—

--color-fg

#0a0a0a

19.80:1 AA

--color-muted

#595959

7.00:1 AA

--color-faint

#717171

4.88:1 AA

--color-rule

#e5e5e5

1.26:1 fail

--color-code-bg

#f7f7f7

—

--color-accent

#0a0a0a

19.80:1 AA

Type scale

Modular scale: typeBase × typeRatioⁿ. The typeRatio token comes from the family's type_system.ratio_band clamped against the persona's tone axis — currently 1.25 at base 15px.

size-xxs

The quick brown fox

7.7px · ×0.512

size-xs

The quick brown fox

9.6px · ×0.640

size-sm

The quick brown fox

12.0px · ×0.800

size-base

The quick brown fox

15.0px · ×1.000

size-lg

The quick brown fox

18.8px · ×1.250

size-xl

The quick brown fox

23.4px · ×1.562

size-2xl

The quick brown fox

29.3px · ×1.953

size-3xl

The quick brown fox

36.6px · ×2.441

Line height + layout

Spacing stops are linear multiples of spacingBase; layout dimensions and corner radii live in the same constraint catalog as colors and type. Bringhurst line-length target: 45–75 ch optimum.

kind	name	value	description
line-height	tight	1.2	Display headlines, hero typography
line-height	snug	1.4	Section headings (h2 / h3)
line-height	normal	1.55	UI labels, dense data tables
line-height	prose	1.7	Body paragraphs, long-form reading
layout	containerMax	1200px	Outer page container (.wrap)
layout	contentMax	960px	Data-dense content
layout	proseMax	720px	Bringhurst-band prose measure
layout	sidebarWidth	200px	Spec / API rail when present
layout	topbarHeight	28px	Site-header band
radius	xs	2px	Inline pills (token-ratio badges)
radius	sm	3px	Buttons, code blocks
radius	md	4px	Card containers, theme blocks
radius	lg	6px	Builder panels, large cards
radius	none	0	Edge-to-edge banners

Constraint catalog (live, this family)

Universal observables (Miller, Hick, WCAG, F-pattern, iOS auto-zoom) apply to every family. Family-specific constraints layer on top — this family adds 4 rules.

gate	slug	kind	target
UNIVERSAL	`wcag-aa-text`	contrast	`≥ 4.5 : 1 (text)`
UNIVERSAL	`wcag-aa-large`	contrast	`≥ 3.0 : 1 (ui)`
UNIVERSAL	`miller-chunk`	list-len	`≤ 9 items per group`
UNIVERSAL	`hick-nav`	nav-count	`≤ 7 top-level / ≤ 15 expanded`
UNIVERSAL	`f-pattern-anchor`	anchor-pct	`≥ 60% paragraphs carry an anchor`
UNIVERSAL	`info-scent`	link-blurb	`no bare 'click here' / 'more'`
UNIVERSAL	`ios-zoom`	input-px	`≥ 16px on 360px viewport`
UNIVERSAL	`touch-target`	px	`≥ 40 × 40 px on mobile`
STRICT	`type-ratio-band`	family-specific	`1.125 ≤ typeRatio ≤ 1.25`
STRICT	`single-accent-color`	family-specific	`≤ 1 chromatic accent across the brand`
CSS	`no-illustrative-photography`	family-specific	`—`
STRICT	`muted-saturation-only`	family-specific	`saturation ∈ [0.0, 0.10]`

How the deriver maps the axes

Each persona axis couples to one or more downstream tokens on each layer.

persona axis	→ visual seed	→ content seed
`tone`	type ratio · density	sentence stdev (variety)
`pacing`	motion preset · density	sentence length mean
`warmth`	hue family · saturation · hue shift	person register (impersonal-3rd ↔ 2nd)
`confidence`	contrast tier · type weight	active vs mixed voice
`intent`	layout density · code-to-prose ratio	type-token + lexical density · jargon ceiling

Pre-shipped personas

Curated starting points from the 243-persona space.

infra-reference

serious · clinical · reference

Canonical persona for spec-driven, third-person, measurement-oriented documentation.
friendly-tutorial

direct · approachable · instructional

Second-person, approachable warmth, instructional intent.
dense-developer

serious · clinical · reference

Compact, urgent-paced, clinical reference for deep-reference surfaces.
utility-tool

direct · clinical · reference

Second-person, urgent pacing, instrumental — the persona of single-purpose tools where copy exists only to support the action.
editorial-longform

serious · clinical · reference

Slow-paced, clinical, explanatory reading-as-experience persona.
maker-personal

playful · friendly · persuasive

First-person, playful, friendly persona.

Pre-shipped adjacent systems

Single-axis shifts from the canonical persona for this family.

manifold-light

Δ on theme polarity

prefers-color-scheme: light auto-switch
manifold-compact

Δ on density tier

Dense data review surfaces — gate-result tables
manifold-warm

Δ on hue family (analogous)

Demo / marketing surfaces; warmer entry
manifold-aaa

Δ on contrast tier (AAA)

Accessibility preference / OS high-contrast mode

Quality gates

Every page in this site is measured. Failing a gate means the design system failed — not just the content.

rule	threshold	harness	what it enforces
`heading-hierarchy`	`no skips, exactly 1 h1`	`static`	h1 → h2 → h3 in order. Skipping a level breaks screen-reader navigation.
`nav-top-count`	`≤ 7 links`	`static`	Primary-nav cognitive load (Miller). Above 7 the visitor cannot hold the menu in working memory.
`nav-group-count`	`≤ 9 / group`	`static`	Miller chunk limit applied to sidebar groups; each group must fit in one glance.
`nav-sidebar-total`	`≤ 15 expanded`	`static`	Hick's-Law cross-group ceiling. Beyond 15 the sidebar forces an O(N) scan.
`nav-active-visible`	`active link visible`	`static`	Visibility-of-system-status: a sidebar leaf's link must not be hidden behind a collapsed group.
`flat-list`	`≤ 9 items`	`static`	Same Miller limit applied to ul/ol. Longer lists require grouping.
`anchor-density`	`≥ 60% of paragraphs`	`static`	F-pattern scannability. ≥ 60% of paragraphs need an inline code/bold/link anchor.
`dry-streak`	`≤ 4 bare paragraphs`	`static`	Information-scent decay. Past 4 unanchored paragraphs the reader stops scanning.
`aria-button`	`every button`	`static`	Accessible name required: visible text or aria-label.
`aria-input`	`every input`	`static`	<label for> association or aria-label on every input.
`aria-img`	`every img`	`static`	alt attribute on every image (empty string is valid for decorative).
`landmark`	`main + nav`	`static`	Every page needs <main> and at least one <nav>.
`link-scent`	`no bare words`	`static`	'here', 'click', 'more' carry no information; link text must describe the destination.
`token-drift`	`no inline hex`	`static`	Hardcoded color or font-size in style= bypasses the token system.
`contrast`	`WCAG AA`	`static`	Every design-token color pair: 4.5:1 normal text, 3:1 large text and UI elements.
`viewport-meta`	`device-width`	`static`	Without <meta name=viewport>, mobile Safari renders into a 980-px viewport.
`flesch`	`≥ 35`	`content`	Flesch Reading Ease over prose. Below 35 the document reads like a legal brief.
`fk-grade`	`≤ 15`	`content`	Flesch-Kincaid Grade Level. US grade 15 = first-year university; technical docs stay there or below.
`avg-sentence`	`≤ 25 words`	`content`	Mean sentence length. Past 25, comprehension drops sharply.
`info-scent-pct`	`≥ 90%`	`content`	% of links that carry an explanatory blurb. Bare 'click here' links are high-cost.
`scan-anchor-pct`	`≥ 60%`	`content`	Anchor-density rule applied to source markdown paragraphs.
`max-dry-streak`	`≤ 4`	`content`	Markdown twin of dry-streak; consecutive paragraphs without an anchor.
`longest-flat-list`	`≤ 9`	`content`	Markdown twin of flat-list; longest contiguous bullet/number list.
`show-total`	`≥ 1 / page`	`content`	Every spec page needs at least one code block, table, or diagram.
`words-per-show`	`≤ 200`	`content`	Show-vs-tell ratio. Specs that score 400+ are print-shaped prose rendered to HTML.
`voice-register`	`infra-docs`	`content`	Impersonal-3rd, active voice. First or second person above threshold = register drift.
`mobile-overflow`	`scrollWidth ≤ 360px`	`responsive`	At 360-px viewport, document.scrollWidth must not exceed window.innerWidth.
`input-zoom-trigger`	`≥ 16px on mobile`	`responsive`	At 360-px viewport, every text input's font-size must be ≥ 16px or iOS Safari auto-zooms on focus.
`touch-target`	`≥ 40 × 40 px`	`responsive`	WCAG 2.5.5 derivative. Every button's bounding box at 360-px viewport must be ≥ 40×40 px.
`sidebar-heading-fit`	`no overflow`	`responsive`	Sidebar group headings must fit container without wrap or truncation.
`header-row-alignment`	`centers within ±2 px`	`responsive`	Brand + nav must vertically align when on the same row.
`empty-labeled-region`	`non-empty body`	`responsive`	Every h2/h3 followed by a container must have visible content.
`headline-width-utilization`	`uses 70%+ of parent`	`responsive`	<h1> wrapping unnecessarily because of max-width cap.
`header-content-breathing-room`	`≥ 32px gap`	`responsive`	Gap between site-header bottom and first <main> child top must be ≥ 32px.
`catalog-artifact-existence`	`real artifact`	`catalog`	Every status:ships entry must cite a file that exists in the repo.
`catalog-{verb,plugin,resource}-coverage`	`introspector ↔ catalog`	`catalog`	Every introspectable surface needs a catalog entry.
`catalog-scene-coverage`	`scenes referenced`	`catalog`	Every examples/scenes/*.scene.json must be cited from a stdlib doc.
`inventory-fresh`	`regenerate on change`	`inventory`	On-disk inventory must match a fresh introspection of source.