Spec Kit
Specs and PRDs are standalone HTML documents on the Strata system: one self-contained stylesheet (fonts embedded, tokens compiled, light and dark), a documented structure, and a closed block vocabulary. A spec renders anywhere with zero network, including sandboxes that block external fetches.
The reference spec
Every block, rendered. Open full screen
Authoring
Open a Claude Code session in layers/layersand type /spec. It interviews you for the substance, structures it on the kit, and writes the standalone HTML. When you are happy it offers a hosted share: a gist plus an htmlpreview link your teammates open in one click, refreshed in place on every edit.
Living example: the approvals walker spec, authored end to end with /spec.
Copy the skeleton from the authoring contract, paste all of strata-spec.css into its <style> tag, and compose from the blocks below.
The block vocabulary
| Block | Classes | Use for |
|---|---|---|
| TL;DR | .tldr | The mandatory summary card right after the hero |
| Section header | section > h2 + .num | Numbered sections (01 · Context) |
| Callout | .callout (.note .info .warn .success) | Decisions, constraints, risks, wins |
| Pull quote | .pullquote | One line worth enlarging |
| Pill | .pill (.purple .blue .green .peach) | Inline status chips |
| Table | .tbl-wrap > table | Comparisons and matrices, mono headers built in |
| Anti-list | .antilist | Explicit rejections with the reason |
| Phase card | .phase + .accept | Rollout phases with acceptance criteria |
| Concept | .concept | Definitions of core terms |
| Checklist | .checklist | Open questions and launch gates |
| Metrics | .metrics > .metric | Headline numbers: targets, baselines, results |
| TOC rail | aside + .group headers | Grouped section nav; long specs grow more groups |
| Component veneer | .spec-btn .spec-badge .spec-alert .spec-input .spec-chat | Real product UI as static, pixel-faithful renderings of @layers/ui |
The blocks are the starter vocabulary, not a boundary. A spec may invent whatever presents its content best (charts, wireframes, mockups, testimonials) as long as the invention obeys the style law: kit tokens for every color, the mono label recipe for ALL-CAPS labels, hairlines and the 8px grid. The contract's Beyond the blocks section and the reference spec's section 05 show how.
Files
- /spec/strata-spec.css: the kit, one inlinable file
- /docs/specs: the authoring contract (raw at /docs/specs.md)
- /spec/demo.html: the rendered reference