Components

Code blocks

Five flavors for five jobs. Code is rarely "just code" in this product — it's an ordinance quote, a station response, a CLI session, a config diff, or a single selectable token in a sentence. Each one earns its own chrome.

1 · Observation card

For verbatim ordinance, statute, and policy quotes. Serif body to signal "this is a printed text we are citing", technical metadata to anchor it.

IRC R905.2.8.5Texas adoption · Travis Co. · 2021-09-01
Code quote
Flashings shall be applied in a shingle fashion to prevent the entry of water into the wall cavity or roof system.
Verbatim. Adopted in full.

Use when: the cited text is meant to be read by a human as evidence (project attachments, code-review reports, audit responses).

2 · API response

Dark, syntax-highlighted, line-numbered. Method + path + status live in the header so reviewers can see what was called before reading the body.

GET/api/account/storm_reports200 · 142ms
123456789101112131415
{
  "event_id": "SE-241126",
  "region": "Travis & Williamson Co., TX",
  "started_at": "2024-04-26T14:32:00-05:00",
  "duration_min": 28,
  "peak_hail_in": 1.75,
  "peak_wind_mph": 62,
  "station": {
    "id": "KAUS",
    "distance_mi": 4.2
  },
  "verified": true,
  "affected_parcels": 12481,
  "confidence": 0.94
}

Use when: showing a fetched payload — storm lookup, project sync, audit pull. Header carries provenance; the body proves the data.

3 · Terminal session

Multi-line CLI output with prompts, commands, and result lines. macOS-style window chrome makes the context immediately legible.

~/skycanvass/canvass-241126
▸canvasssync--region=travis-co--since=2024-04-26→ fetching storm exposures (6 stations) → matching parcels [done] 12,481 affected → photo packets [done] 3,402 verified → vendor handoff [warn] 2 missing crew signatures✓ sync complete in 18.4s ▸canvassflag--missing-signatures

Use when: the workflow IS the message — onboarding docs, runbooks, internal tooling. The blinking cursor invites the next command.

4 · Diff

Before/after with old/new line numbers, additions in green, removals in red, hunk header in violet. Use to show what changed in a parcel record, a code-review entry, or a saved canvass.

parcel/04-21-3349.json
+3−2
@@ -8,4 +8,5 @@ structure
88 "stories": 2,
9− "roof_age_yrs": 12,
10− "material": "shingle"
9+ "roof_age_yrs": 14,
10+ "material": "asphalt_shingle",
11+ "last_replaced": "2010-08"
1112 }

Use when: something was edited and the change matters — parcel revisions, configuration updates, audit trails.

5 · Inline & micro-blocks

Seven inline treatments — each for a distinct prose-code job. Pick by what the value is, not how loud it should look.

Parcel 04-21-3349 matched storm eventSE-241126 with peak hail ofin1.75″. StationKAUS reported confidenceconf=0.94. Vendor secretwas rotated, and the photo bundle hash wasa1b2c3d…f8e7.

All seven variants
5a · default
Parcel 04-21-3349
Generic precision token in prose. Dashed underline, no fill.
5a · strong
Event SE-241126
When the token is the subject of the sentence. Solid underline + bold.
5a · warn / err
Returned PARTIAL_MATCH; file IMG_0042.HEIC failed.
Severity in prose, no chiclet — color carries the signal.
5b · typed
Hail in1.75″ · windmph62 · area sqft2,180
Numeric value with unit prefix. Use when the kind of number matters more than its label.
5c · copyable
04-21-3349(hover to reveal)
Tokens users actually need to grab. Reveals a copy glyph on hover; click copies + flashes green.
5d · linked
Station KAUS · canvass CV-241126
Code value that navigates. Underline + ↗ glyph signals it's a link, not a label.
5e · redacted
Token (hover to reveal)
Sensitive values — API keys, last-four, owner phone. Hover reveals; otherwise scrubbed.
5f · hash
Bundle a1b2c3de9f8a7b6c5d4e3f2
Long checksums and IDs. Prefix is dotted-underlined (clickable for full); rest fades.
5g · key=value
region=travis-co conf=0.94 verified=true
Config flags, query params, log fields. Key in violet, value typed (text / number / bool).
Multi-line token block
--primary: oklch(0.45 0.13 240); --primary-700: oklch(0.40 0.14 240); --accent-storm: oklch(0.62 0.18 25); --bg: oklch(0.99 0.005 240);

Pick by what the value is, not how loud it should look. Default for generic precision tokens; strong when the token IS the subject; warn/err for severity in prose; typed for numbers with units; copyable for IDs users grab; linked when it navigates; redacted for sensitive values; hash for long checksums; key=value for config flags.

Which to use

If you're showing…Use
A code quoteObservation card — serif body, juris metadata.
A response payloadAPI response — dark, line-numbered, with method + status.
A workflowTerminal — prompts, output lines, blinking cursor.
A changeDiff — old/new lines, hunk headers, +/− markers.
A token in proseInline / micro-block — flows with the sentence; no chrome.