Ink, paper, and one red.

00 Principles

1. Swiss owns the words. All text is Archivo, sentence case, strict scale, flush left. Constructivism never enters through typography on reading surfaces. Titles never gray.
2. Red marks the human. Every glyph is ink + one red element, and the red element is always the person, the signal, the insight. Red is never decoration.
3. Pop only where you scan. Compositions and the display register live in heroes and index surfaces. Reading surfaces stay quiet: small glyphs and numerals only.
4. Findings lead, deliverables follow. Headlines carry tension or discovery; eyebrows carry deliverable type and context.
5. The evidence lives in the sentence. Numbers appear in prose; quotes carry provenance as participant codes (P14). The verbal twin of law 2.
6. Hedge once, in one place. Headlines and standfirsts commit. Every caveat is concentrated, honestly and completely, in Limitations.

01 Color

Ratios are measured against the --paper ground. All text meets ≥4.5:1. Body links and text-size red (numerals, labels, hovers) use --accent-deep; --accent at ~4.3:1 is reserved for large type, marks, and non-text geometry (1.2.1).

• --paper #f7f6f2 · 1.00:1 on paper
• --paper-2 #efede6 · 1.08:1 on paper
• --paper-3 #e7e4db · 1.18:1 on paper
• --ink #16150f · 16.91:1 on paper
• --ink-2 #54534c · 7.14:1 on paper
• --ink-3 #6b695f · 5.10:1 on paper
• --line #d4d1c6 · 1.41:1 on paper
• --line-strong #16150f · 16.91:1 on paper
• --accent #e4231a · 4.26:1 on paper
• --accent-deep #b81910 · 6.10:1 on paper
• --accent-tint #f6dad7 · 1.22:1 on paper

02 Type

03 Space & grid

8px scale (--s1 … --s10) on a --wide 73rem field; prose held to --measure 34rem. The opener grid (layout A): two top-hung zones, a prose column and a 13rem rail holding composition above the meta table, hang from the masthead rule (the header's 2px ink bottom rule; openers carry no rule of their own). One rule per page top; two zones, never three; nothing bottom-aligned.

• --s1
• --s2
• --s3
• --s4
• --s5
• --s6
• --s7
• --s8
• --s9
• --s10

04 Geometry

24-unit grid. Primitives: bar, circle, ring, wedge, quarter. Strokes 2.4. Exactly two colors: ink is the structure, red is the human. Marks are derived, not decorative: each must be constructible from the project's central finding and survive its caption.

Compositions (misinfo-x-composition, duo-2fa-composition, dubsbooks-composition, site-composition) render mark geometry at hero scale; recomposition refinements are MINOR version changes.

Diagram figures: a page diagram built strictly from these primitives (ink structure, one red human element, stroke 2.4) is evidence, not decoration. It may sit on a reading surface when it carries a derivation figcaption, like any figure; law 3 still bars decorative compositions from reading surfaces (1.5.0).

05 Components

Stepped flow figure · reader-driven · scenes aria-hidden

Specimens above are the production classes (.cs-prose blockquote, .recommendation, .process-strip, .spec-table), not copies. The spec table states a designed mechanism's user-facing surface and back-end policy: the rail meta table's in-prose twin. The reco-label text defaults to "Recommendation" but may name the payoff contextually (e.g. "What we changed"); the glyph is constant. Header, footer, directory rows, and meta table are visible in the site chrome around this page. The stepped flow figure (1.6.0) walks a designed mechanism one reader-driven step at a time: chrome and wireframe register (.flow-*, .wf-*) live in global.css; scenes are aria-hidden and the captions carry the meaning; the specimen is the production Community Notes figure. It is the site's first client-side JS, a Svelte island mounted only where a figure appears. Desktop surfaces use the landscape browser frame (.wf-browser, 1.7.0), the wf-phone's wide sibling: per-screen chrome, a panel scaffold, and a stacked figure (stage above rail) because the frame owns the full measure.

06 Templates

• Homepage. Pop: hero (overlaid opener: a large halftone portrait shares one plane with the display statement, text on top with a paper knockout, the figure flush on the fact-band rule). Quiet: directory, contact.
• Work index. Pop: display title. Quiet: directory rows with marks.
• Case study. Pop: opener (eyebrow CS·NN, display title, standfirst, composition + meta rail). Quiet: findings, process strip, quotes, recommendations, figures, reflection.
• About. Quiet throughout; display permitted on the page title only.

07 Usage

• Do hold red to glyph elements, numerals, links, and rules. Don't set red fields, bands, or panels.
• Do set titles in full ink. Don't gray a title to soften it; soften with size or weight.
• Do use one composition per surface, in the rail. Don't float geometry between columns.
• Do add tokens/glyphs here first, then use them. Don't improvise values on a page (hex, px, font sizes live in global.css only).
• Do log every system change in the changelog with a justification. Significant shifts get an ADR.

08 Voice

• House sentence (standfirsts): claim + boundary condition. "X happened, but only when Y."
• Punctuation: no em dashes, anywhere. Separators are middots and colons; asides take commas or parentheses; contrasts take semicolons. En dashes only in numeric ranges.
• Registers: pop surfaces ≤12 words, declarative; quiet surfaces full evidentiary prose.
• Quotes: participant codes (P14); add a terse method tag only when context doesn't make it obvious.
• Hedging: commit in headlines and standfirsts; concentrate caveats in Limitations.
• Microcopy: links promise what the reader gets: "Read the findings →".

09 Imagery

Photographs enter the system only through the halftone treatment: a clustered-dot dither maps the image onto the ink ramp (--paper → --ink-2 → --ink), so imagery reads as ink structure on paper, never full color or a second visual language. Red still marks the human. Like compositions, it is a pop surface only (heroes, index), never a reading surface.

Recipe

Clustered-dot dither, three ink tones. Pinned: levels=3, scale=2, contrast=1.0, gamma=0.78.

Tool

Any image → a consistent asset via scripts/halftone.py. The recipe is the system element; rerun it rather than improvising a one-off filter. A recipe revision is a MINOR change, logged in the changelog.

Source photographs are processed at build-prep time and committed as assets; raw originals stay out of the repo.

10 Changelog

# Design System Changelog

Every change to the design system (tokens, glyphs, marks, components,
templates, laws) lands here with a justification. Significant shifts also
get an ADR in `docs/decisions/`. Versioning is semver-lite: MAJOR for law or
token-meaning changes, MINOR for additions, PATCH for corrections.

## 1.8.0 · 2026-07-01

**Case studies can be withheld from the portfolio.**

- `BaseHead.astro` takes an optional `noindex` prop; when set it emits
  `<meta name="robots" content="noindex" />`, the same signal `/blog`
  and `/design-system` carry inline. `CaseStudy.astro` forwards the
  prop so any opener can be withheld without touching the layout.
- The Duo 2FA usability study is retired: de-linked from the homepage
  Selected Work rows and the work index (remaining projects renumbered,
  the homepage count now reads "Two projects"), set `noindex`, and
  excluded from the sitemap filter in `astro.config.mjs`. The page and
  its assets stay in the repo; nothing links to it.

**Justification:** the study is early work and no longer represents the
bar the portfolio sets. Hiding rather than deleting keeps it recoverable,
and codifying the withhold as a template prop means the next retirement
is a one-line change, not an improvisation.

## 1.7.0 · 2026-07-01

**Wireframe browser frame: desktop mechanisms step like phone ones.**

- New frame in the wireframe register: `.wf-browser`, the landscape
  (16:10) sibling of `.wf-phone`. Chrome is per-screen (`.wf-chrome`
  wordmark + nav) so signed-out screens can drop the nav; a small
  scaffold (`.wf-cols`, `.wf-col`, `.wf-panel`) carries portal layouts
  (main column + side panel, bordered cards). Titles inside the frame
  are flush left, matching the surface depicted.
- `.wf-avatar.signal`: the avatar joins the signal variants. Red still
  marks the human; in the first instance it is the student seller.
- Wide frames stack the figure: `.flow-figure.flow-browser` puts the
  stage above the rail because a landscape frame owns the full measure.
  `FlowFigure.svelte` takes `frame="browser"`; the phone default is
  unchanged.
- First instance: the DubsBooks case study's portal walkthrough (NetID
  login, auto-populated course list, the expandable dropdown from
  usability testing, the external-pricing tab, Day One Access alerts,
  the peer marketplace), microcopy verbatim from the capstone
  prototypes.

**Justification:** the stepped flow figure (1.6.0) argued mechanisms in
a phone frame because its first subjects were phone surfaces. DubsBooks
is a desktop portal; forcing it into a 9:16 frame would misrepresent the
design under discussion. The frame is codified rather than improvised so
depicted desktop UI keeps the same register: paper panel, hairline
chrome, real microcopy at register sizes, red only as the signal.

## 1.6.0 · 2026-07-01

**Stepped flow figures: mechanisms demonstrated, not screenshotted.**

- New component pair in `global.css`: the flow-figure chrome (step rail
  with red current numeral, aria-live caption, back/next controls) and
  the wireframe register (`.wf-*`), a miniature vocabulary for UI under
  discussion. Paper panel, hairline chrome, real microcopy in Archivo at
  two register-only sizes (`--fs-wf`, `--fs-wf-sm`), media greeked as
  crossed boxes. Red remains the signal reaching the reader: the like
  that arms a correction, the notification dot, the note rule, the
  under-review marker, the coverage button, the current step.
- Motion tokens `--dur-2` (240ms) and `--dur-3` (420ms) join `--dur`.
  Screens crossfade on opacity; micro signals animate transform and
  color fills; the existing global reduced-motion rule cuts all of it
  to state changes.
- First client-side JavaScript on the site: the figures are Svelte 5
  islands (`@astrojs/svelte`), mounted `client:visible` on the
  misinformation case study and the design-system specimen only; every
  other page still ships zero JS. ADRs are retired, so this entry
  carries the decision.
- Accessibility follows the diagram-figure precedent: scene graphics are
  aria-hidden; the step captions and the figcaption carry the meaning.
  Steps are real buttons; arrow keys also step; captions announce via
  aria-live.
- First instances: three figures in the misinformation case study
  (Community Notes Notifications, Quarantine, Developing Story Tracker)
  replacing the three static journey screenshots, microcopy verbatim
  from the original prototypes.

**Justification:** the case study argues mechanisms, and a mechanism is
a sequence: arm, trigger, deliver. The four-screen screenshots showed
every state at once and let none of them read. A reader-stepped
wireframe shows the sequence as evidence while the reading surface
stays quiet: nothing moves until asked, and reduced motion cuts to
states. The register is codified so depicted UI stays in system ink
and red keeps meaning the signal, never decoration.

## 1.5.0 · 2026-07-01

**Diagram figures: primitive-built diagrams are evidence, not decoration.**

- Clarification in §04 Geometry: a page diagram built strictly from the
  system's primitives (ink structure, one red human element, stroke 2.4)
  is content, like any figure. It may sit on a reading surface when it
  carries a derivation figcaption; law 3 continues to bar decorative
  compositions from reading surfaces.
- First instance: the misinformation case study's rumor-lifecycle figure
  (`MisinfoLifecycle.astro`): the rumor's path from publication to belief
  with each mechanism at its intervention point; red is the reader the
  mechanisms protect.

**Justification:** the case study's central claim is that the three
mechanisms act at different points in a rumor's life; a derived diagram
states that more precisely than prose alone. The pattern needs codifying
so diagrams stay derived (constructible from the finding, captioned) and
never become illustration.

## 1.4.0 · 2026-07-01

**Spec table: mechanism specs enter the case-study prose.**

- New component `.cs-prose .spec-table` (§05 Components): an in-prose
  definition table stating a designed mechanism's user-facing surface and
  back-end policy, one hairline-ruled row each. The rail meta table's
  in-prose twin: same label register, held to the prose column.
- First use: the misinformation case study rewrite, where each intervention
  section opens with its spec before the evidence that revised it.

**Justification:** the design-engineer positioning (ADR-006) needs case
studies to show mechanisms, not only findings. The report behind the
misinformation study specified each intervention as surface plus policy;
the system gains a component that states that honestly instead of burying
it in prose.

## 1.3.0 · 2026-07-01

**Voice: em dashes retired site-wide.**

- New punctuation rule in §08 Voice: no em dashes anywhere on the site,
  including titles, headings, captions, alt text, and generated content.
  Separators are middots and colons; asides take commas or parentheses;
  contrasts take semicolons. En dashes survive only in numeric ranges
  (2024–2025).
- The house sentence keeps its shape in comma form: "X happened, but only
  when Y."
- Applied everywhere: page-title suffixes become "· Wilson Chen", the
  breadcrumb becomes "Work index", the footer and colophon use middots,
  the generated figure prefix becomes "Fig 01 · ", finding and phase
  headings take colons (or middots after bare numerals), and every prose
  aside across the case studies is recast. Changelog headings switch to
  "version · date"; earlier entries are converted punctuation-only, with
  wording preserved.

**Justification:** the em dash has become the strongest single tell of
machine-written text, and this portfolio's credibility rests on reading as
authored. The dash also let sentences pivot without committing; colons,
commas, and semicolons force the relationship between clauses to be
explicit. Nothing the dash did is lost, and every sentence now says how
its parts relate.

## 1.2.1 · 2026-07-01

**Contrast correction: all text meets WCAG AA, including the quiet register.**

- `--ink-3` darkens from `#8f8d83` (3.07:1 on `--paper`) to `#6b695f`
  (≥4.5:1 on both `--paper` and `--paper-2`). Labels, breadcrumbs, counts,
  and index descriptions are text people read; the quiet register stays
  quiet through size and weight, not through failing contrast.
- Red at text sizes moves from `--accent` (4.26:1) to `--accent-deep`:
  eyebrow and nav numerals, section counters, Fig labels, and small hover
  reds. This extends the existing body-link rule: `--accent` is reserved
  for large type, marks, and non-text geometry (focus rings, quote bars,
  selection). Law 2 unchanged: red still marks the human; it just commits
  to being legible where it speaks in words.
- Prose-link hover feedback becomes a 2px underline (color alone no longer
  distinguishes the state, since hover now stays on `--accent-deep`).
- Interactive targets in the header nav and footer gain ≥24px hit areas
  (padding offset by negative margin, no visual change), meeting
  WCAG 2.2 Target Size (Minimum).

**Justification:** an accessibility audit (axe-core, 2026-07-01) failed
every page on `--ink-3` and text-size `--accent`. The system's own §01
note had codified "numerals at ~4.3:1" as acceptable; this entry
supersedes that. A system that claims Swiss discipline doesn't ship
sub-threshold text and call it a register.

## 1.2.0 · 2026-06-17

**Halftone portrait treatment: photographic imagery enters the system.**

- New image treatment (`/design-system` §09 Imagery): a clustered-dot halftone
  renders a photograph into the ink ramp (`--paper` → `--ink-2` → `--ink`), so
  imagery is built from the system's own ink rather than full color.
  Reproduced for any image by `scripts/halftone.py`; the canonical recipe is
  `levels=3, scale=2, contrast=1.0, gamma=0.78`. The recipe, not any single
  asset, is the system element.
- Homepage hero re-templated: an overlaid opener. A large halftone portrait
  shares one plane with the display statement (text on top, a paper knockout
  keeping it full-ink over the dots); the figure stands flush on the fact-band
  rule. Supersedes the 1.1.0 fact-band layout on the homepage only; layout A
  and the case-study openers are unchanged. §06 Templates updated to match.
- The Changelog section moves to §10 to make room for §09 Imagery.

**Justification:** the system was geometry-only: derived primitive marks, no
photographs. A real portrait gives the homepage a human front door, but a raw
photo would import a second visual language and break the ink-on-paper
discipline. Halftoning into the ink ramp keeps imagery inside the system: it
reads as ink structure, and red still marks the human. Full argument in
ADR-005.

## 1.1.0 · 2026-06-10

**Homepage hero re-templated: the fact-band opener.**

- The homepage hero leaves layout A: the display statement now takes the full
  field measure (rewrapping from six lines to three), bio below it, then a
  horizontal fact band: site composition left, facts in a two-column meta
  grid right. The meta table's own 1px ink top rule is the band's only line
  (no added hairline, same one-line discipline as 1.0.2). At narrow widths
  the band stacks: mark above a single-column table. Layout A is unchanged
  and remains canonical for case-study openers (`CaseStudy.astro`).
- `/design-system` §06 Homepage template entry updated to describe the
  fact-band opener.

**Justification:** a design-pass annotation flagged the site mark floating at
the rail's top-left, unbalanced against the meta table and the directory
below. Alternatives were prototyped live (corner-lock, marginalia, fact band,
mark-leads); the fact band resolves the imbalance at the root: the rail's
awkward vertical pairing disappears, the statement gains the full measure
("pop only where you scan": the homepage hero is the scan surface), and the
mark anchors the facts as one locked band.

## 1.0.2 · 2026-06-10

**One masthead rule: openers hang from the header rule.**

- Layout A redefined: the opener's two top-hung zones hang from the masthead
  rule (the header's 2px ink bottom rule); openers no longer carry a 2px ink
  top rule of their own. Applied to the homepage hero, the case-study opener,
  and the design-system opener; the `/design-system` §03 prose updated to
  match. Mid-page section rules and foot rules (2px ink) are a separate
  pattern and are unchanged.

**Justification:** two codified specs collided (the header's bottom rule and
layout A's opener top rule), stacking two parallel 2px lines at the top of
the homepage and case studies, while About and the work index (which have no
layout-A opener) showed a single line. The doubling was an artifact, not a
decision; redundant on some pages and inconsistent across the site. The
masthead rule now anchors every page top identically, and the top-hung
concept survives: the zones hang from the page's one rule.

## 1.0.1 · 2026-06-10

**Site mark revised: the caret replaces the ring-and-core.**

- `site-mark` geometry replaced in the registry: two ink text lines and a red
  caret, mid-sentence. New derivation: the ink lines are written evidence; the
  red caret is the person, still writing; the handle (wilsonistyping) made
  literal. Favicon (SVG + ICO) regenerated; homepage hero composition
  re-derives via the registry alias; reference artifact added at
  `docs/design/marks/site-mark.svg`.

**Justification:** in the field, the ring-and-core failed at favicon scale:
a red dot inside a dark ring is the universal "recording" indicator, a
surveillance connotation directly at odds with the site's trust-research
thesis. The defect only appears in a real browser tab, which no A/B build
exposed. Laws unchanged: red still marks the human, now as the author of
the evidence rather than the center of the system.

## 1.0.0 · 2026-06-10

**Founding release.** The Swiss × Constructivist design language as specified
in `docs/superpowers/specs/2026-06-09-swiss-constructivist-design-language-design.md`.

- The six laws (Swiss owns the words · red marks the human · pop only where
  you scan · findings lead · evidence lives in the sentence · hedge once).
- Tokens: Swiss warm-white field, one signal red (#e4231a), Archivo variable
  in two registers (text wdth 100; display wdth 118 / wght 850, heroes only).
- Geometry registry: 5 method glyphs, 3 wayfinding glyphs, 3 derived project
  marks (see `docs/design/marks/`), site mark, compositions aliasing marks.
- Layout A opener grid (prose column + top-hung rail), meta table, process
  strip, P-code quote provenance, Fig-numbered captions.

**Justification:** fuses the two strongest A/B directions (Swiss structure,
constructivist conviction) under laws that keep them from clashing; argued
in full in the spec (including the red rationale).