The Spec Kit, specified with itself
This document is the rendered reference for every block in strata-spec.css. It is also a working example of the document skeleton: brand row, hero, TL;DR, numbered sections.
One self-contained stylesheet turns a plain HTML file into a Strata-branded spec. Compose from the block vocabulary below, obey the house copy rules, and inline the kit so the document renders anywhere with zero network.
01 · StructureThe document skeleton
Every spec opens the same way: the brand row, a hero with eyebrow and deck, then the TL;DR. Sections are numbered and anchored.
Body copy is Inter-first at the Strata 14px scale. Inline
code gets the mono treatment automatically, and file
paths ride the source note:
apps/strata/public/spec/strata-spec.css
02 · BlocksThe vocabulary
Callouts, pills, tables, anti-lists, concepts, and checklists: the starter vocabulary. Reach for these first; invent beyond them when the content calls for it (section 05).
Callouts
The default callout carries the brand purple and marks a decision.
Info rides the brand blue for background and adjacent systems.
Warn rides the brand peach for risks and sharp edges.
Success rides the brand green for confirmed outcomes.
Note is neutral for asides that carry no signal color.
Pills
Default Purple Blue Green Peach
Tables
| Block | Class | Use for |
|---|---|---|
| TL;DR | .tldr | The mandatory summary card |
| Phase card | .phase | Rollout phases with acceptance |
| Anti-list | .antilist | Explicit rejections with the why |
Anti-list
-
External stylesheet links in a spec
Sandboxes block fetches; the document must carry everything.
-
A serif display face
Strata has no serif; display is Inter with tight tracking.
Concepts
Self-contained
The kit embeds its fonts as data URIs and compiles its tokens, so a spec renders offline, in mail clients, and in sandboxes.
Checklist
- Inline the kit into the document head.
- Open with a TL;DR right after the hero.
- Number the sections and anchor the TOC.
03 · PhasesPhase cards
Adopt the kit
Every new spec is authored on strata-spec.css.
- Author with the
/prdcommand or by hand from the skeleton. - Compose only from the block vocabulary.
A new spec renders correctly with the network disabled, in light and dark.
04 · RulesHouse rules in the copy
No em dashes, restructure instead. Mono only on ALL-CAPS. The verb is "post". No industry jargon. The kit enforces the visual rules; the author enforces the copy rules.
05 · BeyondInvent freely, on-brand
Charts, wireframes, mockups, timelines, testimonials: build whatever presents the content best. Tokens for every color, the mono label recipe for every ALL-CAPS label, hairlines and the 8px grid for every shape. Two worked examples.
An invented chart
Flat pastel fills · hairline surfaces · values in sans
An invented wireframe
Suggest the product, never counterfeit it
06 · CompositionsScaling to complex specs
Real specs mix blocks and inventions: headline metrics, conversation mockups, grouped TOC sections like this document's own sidebar. Two compositions that recur.
Headline metrics
Product UI, exact: the component veneer
Wireframes suggest; the veneer shows. When a spec demos real product UI, use the static veneer classes, transcribed verbatim from the @layers/ui components, instead of approximating.
Static renderings of the real components · no react, no network