Design System

Public Process is a reading site first. The interface should feel quiet, legible, and inspectable: dark base, restrained blue accent, compact metadata, and data widgets that support the essay corpus without competing with it.

The implementation source of truth is assets/css/style.css. The broader aesthetic rationale is described in The Aesthetic Nervous System. This page makes the current rules visible for design review.

Source Map

Surface	Purpose	Review there when
`assets/css/style.css`	Implemented tokens, layout, and reusable components	Checking the actual UI contract
`_layouts/default.html`	Page shell, stylesheet loading, Mermaid theme	Checking global page structure
`_includes/header.html`	Primary navigation	Checking wayfinding and link order
`organ-aesthetic.yaml`	Cross-organ aesthetic contract when present in an organ repo	Checking how organ-level taste modifies the global style

Reading `organ-aesthetic.yaml`

organ-aesthetic.yaml is a compact contract, not a component library. Read it as a layer in a cascade:

Start with the inherited global taste file named by inherits.
Apply the organ identity fields: organ and name.
Translate modifiers into local UI and editorial choices.
Use specific_references as optional exemplars, not as required assets.
Check the local stylesheet and pages for the implemented version.

Field	Meaning	Designer use
`schema_version`	Version of the aesthetic contract shape	Confirms parser and documentation expectations
`inherits`	Upstream taste file to resolve first	Prevents organ pages from drifting away from system taste
`organ` / `name`	Identity of the organ whose taste is being specialized	Keeps the review scoped to the correct organ
`modifiers.palette_shift`	Color-temperature and contrast direction	Guides token changes before selecting individual colors
`modifiers.typography_emphasis`	Type hierarchy and font-family emphasis	Guides headings, prose, code, and notation choices
`modifiers.tone_shift`	Editorial voice and density	Guides page copy and metadata language
`modifiers.visual_shift`	Motifs, diagram density, and layout feel	Guides component composition and media choices
`specific_references`	Named references or examples	Grounds subjective calls when populated

For ORGAN-V (Logos), the local read is: reflective prose, system sans type, GitHub-dark surfaces, blue accents, compact metadata, and evidence-oriented visualizations.

Tokens

--bg #0d1117 page background

--surface #161b22 code, cards, and tracks

--fg #c9d1d9 primary prose

--muted #8b949e metadata and captions

--accent #58a6ff links, emphasis, bars

--border #30363d dividers and outlines

Type And Prose

March 20, 202613 min3,180 words

Section Heading

Long-form pages use a narrow measure, high line-height, and explicit section structure so dense process writing remains scannable.

Blockquotes mark synthesis, principles, and externally useful framing without changing the reading rhythm.

Inline code such as organ-aesthetic.yaml is reserved for files, keys, commands, and other exact identifiers.

Components

Published evidence methodology reader-facing

Categories And Tags

meta-system case-study guide methodology retrospective

aesthetic-system design-systems creative-governance

Stats

Essays

128k

Words

Bars And Timelines

meta-system 16

methodology 12

2026-02

2026-03

Tables And Figures

Component	Use	Constraint
Category badge	Canonical essay category	Use only the five category colors
Tag	Flexible topical metadata	Keep labels short enough to wrap cleanly
Stat card	Dashboard summary number	One number, one label

taste.yaml organ-aesthetic.yaml creative brief page components

Aesthetic decisions cascade from global taste to local components.

UX Review Checklist

Can a first-time reviewer identify the source of truth for colors, type, and components?
Does a proposed change preserve the 720px reading measure unless the page is a dashboard or visualization?
Are metadata, badges, and tags semantically meaningful rather than decorative?
Does every new visual pattern reuse existing tokens before adding new ones?
Does the page remain readable at mobile widths and with keyboard focus visible?

Stranger Test 19 Closure

This page addresses the Session 7 UX designer findings by documenting how to read organ-aesthetic.yaml and by providing visual examples of the UI components used across Public Process.