Spec Kit · Strata · 2026-07-07

The Spec Kit, specified with itself

Every section in strata-spec.css, rendered at full size. The skeleton comes with it: the nav rail with its brand row, hero, TL;DR, numbered sections.

Status: Living reference Source: docs/strata/specs.md
TL;DR

One self-contained stylesheet turns a plain HTML file into a Strata-branded spec.

  • Compose: the block vocabulary below, house copy rules on top.
  • Ship: inline the kit; the document renders anywhere with zero network.
  • Format: a TL;DR is always this shape. One framing line, then bullets. Never a wall.

01 · StructureThe document skeleton

Every spec opens the same way: the rail carries the brand, the content opens with a hero (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

A spec that reads like the product it specs: light-first, hairline discipline, mono only where the caps are.

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

Decision

The default callout carries the brand purple and marks a decision.

Context

Info rides the brand blue for background and adjacent systems.

Risk

Warn rides the brand peach for risks and sharp edges.

Win

Success rides the brand green for confirmed outcomes.

Note

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

Rejected on purpose
  • 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

Core concept

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

Phase 1 Now

Adopt the kit

Every new spec is authored on strata-spec.css.

  • Author with the /prd command or by hand from the skeleton.
  • Compose only from the block vocabulary.
Acceptance

A new spec renders correctly with the network disabled, in light and dark.

Deferred: a print pass beyond the built-in collapse.

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.

  • TL;DR is always bullets. One framing sentence, then lines that scan on their own. Never a wall paragraph.
  • No meta discourse. The document never talks about itself. "The following table shows the three modes" becomes "Three modes, one row each".
  • No tour-guide writing. No walking the reader around. "Now let's look at retries, and note that the backoff is capped" becomes "Retries back off exponentially, capped at 60s".

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

Views by platform · last 7 days
TikTok
4.3M
Instagram
2.9M
YouTube
1.7M
X
0.9M

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 kit sections and inventions: headline metrics, conversation mockups, a grouped TOC. Two compositions that recur.

Headline metrics

4.3M
Views · 7 days
312
Posts shipped
3.1x
Comments vs June
$0.004
Cost per view

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.

Elle · goal check-in
Your July goal is at 68 percent. Two posts this week beat the June average.
What should we double down on?
Duets with mid-tier creators. I drafted three; approve and I will post them.
Approve drafts Review first Skip this week Posted Draft
Account reconnected
Scheduled posts resume at the next slot.
Ask Elle to draft a post

Static renderings of the real components · no react, no network