@@ -76,7 +76,7 @@ Key traits:
7676- ** Large, confident toggles.** Easy to scan "on" vs "off" from across
7777 the screen.
7878
79- Mood: * one important choice at a time * .
79+ Mood: _ one important choice at a time _ .
8080
8181### Reference B — "Scan" screen
8282
@@ -118,7 +118,7 @@ Key traits:
118118 green means "done". Used consistently, a chip's color tells you what
119119 the row is about before you read the word.
120120
121- Mood: * see everything at once * .
121+ Mood: _ see everything at once _ .
122122
123123## One system, two tiers
124124
@@ -136,11 +136,11 @@ system applied at two densities.
136136 layout, short rules big toggles, long connectors
137137```
138138
139- If you are about to build a surface, ask: ** "is the user * choosing *
140- here, or * reading * here?"** If choosing → Tier 1. If reading → Tier 2.
139+ If you are about to build a surface, ask: ** "is the user _ choosing _
140+ here, or _ reading _ here?"** If choosing → Tier 1. If reading → Tier 2.
141141
142142> ** Why this works:** decisions need room because the user is about to
143- > * act * . Reading doesn't — dense layouts help comparison. Matching the
143+ > _ act _ . Reading doesn't — dense layouts help comparison. Matching the
144144> density to the intent makes the page feel like it was made for what
145145> you're about to do.
146146
@@ -176,9 +176,7 @@ Here's a before/after showing how a Tier 1 card is built.
176176
177177``` html
178178<div >
179- <label >
180- <input type =" checkbox" > Create Issue
181- </label >
179+ <label > <input type =" checkbox" /> Create Issue </label >
182180 <p >Create an issue in the ticketing system when conditions are met.</p >
183181</div >
184182```
@@ -191,8 +189,8 @@ Here's a before/after showing how a Tier 1 card is built.
191189 <div >
192190 <h3 class =" decision-title" >Create Issue</h3 >
193191 <p class =" decision-help" >
194- Create an issue in the ticketing system when the event
195- occurs and conditions are met.
192+ Create an issue in the ticketing system when the event occurs and
193+ conditions are met.
196194 </p >
197195 </div >
198196 <button class =" toggle" data-state =" on" aria-pressed =" true" >
@@ -261,8 +259,12 @@ Today the TOC renders like this:
261259
262260``` html
263261<ul >
264- <li ><a href =" /part/1" >Part 1: Anatomy of a PURL</a > <span >(41 sections)</span ></li >
265- <li ><a href =" /part/2" >Part 2: Building PURLs</a > <span >(18 sections)</span ></li >
262+ <li >
263+ <a href =" /part/1" >Part 1: Anatomy of a PURL</a > <span >(41 sections)</span >
264+ </li >
265+ <li >
266+ <a href =" /part/2" >Part 2: Building PURLs</a > <span >(18 sections)</span >
267+ </li >
266268</ul >
267269```
268270
@@ -364,22 +366,22 @@ quietest. Each role has a CSS variable defined in
364366` walkthrough-overrides.css ` . Use variables — never hex codes — so dark
365367and light themes both work automatically.
366368
367- | Role | CSS variable | What it's for |
368- | ---| ---| ---|
369- | ** Primary text** | ` --prose-text ` | Titles, values, the thing you came to read. Brightest on page. |
370- | ** Muted label** | ` --eyebrow ` | Definition-list labels (` Part 1 ` , ` Events ` ), section kickers. Half-bright. |
371- | ** Chip surface** | ` --code-bg ` | The background of a chip or tag. A subtle step darker than the page. |
372- | ** Accent** | ` --accent ` | Primary buttons, active state, current step. Our brand violet. |
373- | ** Accent soft** | ` --accent-soft ` | Hover fills, active outlines. Lighter tint of accent. |
374- | ** Success** | ` --success ` | Confirm actions, "done" / "active" badges. Green. |
375- | ** Danger** | ` --danger ` | Destructive actions only. Red. Never for "attention." |
376- | ** Rule** | ` --rule ` | Horizontal/vertical lines at semantic boundaries. |
369+ | Role | CSS variable | What it's for |
370+ | ---------------- | --------------- | -------------------------------------------------------------------------- |
371+ | ** Primary text** | ` --prose-text ` | Titles, values, the thing you came to read. Brightest on page. |
372+ | ** Muted label** | ` --eyebrow ` | Definition-list labels (` Part 1 ` , ` Events ` ), section kickers. Half-bright. |
373+ | ** Chip surface** | ` --code-bg ` | The background of a chip or tag. A subtle step darker than the page. |
374+ | ** Accent** | ` --accent ` | Primary buttons, active state, current step. Our brand violet. |
375+ | ** Accent soft** | ` --accent-soft ` | Hover fills, active outlines. Lighter tint of accent. |
376+ | ** Success** | ` --success ` | Confirm actions, "done" / "active" badges. Green. |
377+ | ** Danger** | ` --danger ` | Destructive actions only. Red. Never for "attention." |
378+ | ** Rule** | ` --rule ` | Horizontal/vertical lines at semantic boundaries. |
377379
378380> ** Junior-dev tip:** if you think you need a new color, you usually
379381> don't — you need one of these roles at a different opacity. Add an
380382> opacity step before adding a color. If the token you want doesn't
381383> exist, add it to ` walkthrough-overrides.css ` and this doc in the
382- > * same commit * so the system stays in sync.
384+ > _ same commit _ so the system stays in sync.
383385
384386## Component patterns
385387
@@ -517,7 +519,7 @@ walkthrough.json`). The secondary is `Dismiss`.
517519
518520## Anti-patterns
519521
520- These are mistakes that * look * reasonable until you see the
522+ These are mistakes that _ look _ reasonable until you see the
521523consequences. Learn to spot them.
522524
523525### Mixing tiers on one surface
@@ -623,5 +625,5 @@ keeping it honest:
623625 tokens this doc references, with inline comments explaining why each
624626 value was picked.
625627- [ scripts/walkthrough.mts] ( ../scripts/walkthrough.mts ) — the generator
626- + post-processor; read this if you need to change the generated HTML
627- shape (e.g. to add a new class a component needs).
628+ - post-processor; read this if you need to change the generated HTML
629+ shape (e.g. to add a new class a component needs).
0 commit comments