Strata specs — the Spec Kit

You are an agent authoring a spec, PRD, or design doc for Layers. Build it as a standalone HTML document on the Strata Spec Kit — never in “anthropic design style”, never with an ad-hoc stylesheet. The kit is ONE self-contained CSS file; the guided way to author is the /prd command.

The kit

Stylesheet: apps/strata/public/spec/strata-spec.css in the repo, or https://strata.layers.com/spec/strata-spec.css hosted. Inline the whole file into a <style> tag — specs are standalone HTML viewed anywhere, and artifact sandboxes block external fetches, so never <link> it from a spec.
Everything is embedded: Berkeley Mono (Light/Regular/Medium) ships as data URIs; the body face is the Inter-first system stack. The document needs zero network. The Strata mark is inline SVG (the skeleton below carries it) — never an external image.
Tokens are compiled from packages/ui/src/css/theme.css: light-first, dark follows the OS scheme automatically. Never add colors beyond the kit’s variants; never override tokens in a spec.
A rendered reference using every block: https://strata.layers.com/spec/demo.html (source: apps/strata/public/spec/demo.html).

Document skeleton

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Short spec title</title>
  <style>/* paste ALL of strata-spec.css here */</style>
</head>
<body>
  <div class="layout">
    <aside>
      <div class="meta">Spec · v1.0</div>
      <div class="companion">Optional note: companion artifacts, scope caveats.</div>
      <nav>
        <div class="group">Frame</div>
        <a href="#tldr">TL;DR</a>
        <a href="#context">01 Context</a>
        <div class="group">The work</div>
        <a href="#design">02 Design</a>
        <a href="#phases">03 Phases</a>
      </nav>
    </aside>
    <main>
      <div class="spec-brand">
        <svg viewBox="0 0 120 120" width="32" height="32" fill="currentColor" aria-hidden="true">
          <path d="M20 80C20 91.0457 28.9543 100 40 100C40 111.046 31.0457 120 20 120C8.9543 120 0 111.046 0 100C0 88.9543 8.9543 80 20 80ZM60 80C60 91.0457 68.9543 100 80 100C80 111.046 71.0457 120 60 120C48.9543 120 40 111.046 40 100C51.0457 100 60 91.0457 60 80ZM100 80C111.046 80 120 88.9543 120 100C120 111.046 111.046 120 100 120C88.9543 120 80 111.046 80 100C91.0457 100 100 91.0457 100 80ZM20 40C20 51.0457 28.9543 60 40 60C28.9543 60 20 68.9543 20 80C8.9543 80 0 71.0457 0 60C0 48.9543 8.9543 40 20 40ZM100 40C111.046 40 120 48.9543 120 60C120 71.0457 111.046 80 100 80C100 68.9543 91.0457 60 80 60C91.0457 60 100 51.0457 100 40ZM20 0C31.0457 0 40 8.9543 40 20C28.9543 20 20 28.9543 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0ZM60 0C71.0457 0 80 8.9543 80 20C68.9543 20 60 28.9543 60 40C60 28.9543 51.0457 20 40 20C40 8.9543 48.9543 0 60 0ZM100 0C111.046 0 120 8.9543 120 20C120 31.0457 111.046 40 100 40C100 28.9543 91.0457 20 80 20C80 8.9543 88.9543 0 100 0Z" />
        </svg>
        <span class="wordmark">STRATA</span>
      </div>
      <header class="hero">
        <div class="eyebrow">Product spec · Owner · 2026-07-07</div>
        <h1>The one-line thesis of the spec</h1>
        <p class="deck">Two or three sentences of framing.</p>
        <div class="byline"><span>Status: Draft</span><span>Repo: layers/layers</span></div>
      </header>
      <div class="tldr">
        <div class="label">TL;DR</div>
        <p>The whole spec in three sentences.</p>
      </div>
      <section id="context">
        <h2><span class="num">01 · Context</span>Why now</h2>
        <p class="lede">One-paragraph section framing.</p>
        ...
      </section>
    </main>
  </div>
</body>
</html>

Block vocabulary

The starter vocabulary — reach for these first so recurring structures read identically across specs. When a pattern you invent (see below) recurs across documents, promote it into the kit (edit strata-spec.css + this doc in the same PR).

Block	Classes	Use for
TOC rail	`aside` + `.meta`, optional `.companion`, `nav` with `.group` headers	The sidebar: GROUP the section links (Frame / The work / …) the way the skeleton does; long specs carry several groups
TL;DR	`.tldr` + `.label`	The mandatory summary card right after the hero
Section header	`section > h2` + `span.num`	Numbered sections (`01 · Context`)
Callout	`.callout` (+ `.note` `.info` `.warn` `.success`) + `.label`	Decisions, constraints, risks, wins
Pull quote	`.pullquote`	One line worth enlarging
Pill	`.pill` (+ `.purple` `.blue` `.green` `.peach`)	Inline status/category chips
Table	`.tbl-wrap > table`	Comparisons, matrices (mono uppercase headers come free)
Anti-list	`.antilist` + `.antilist-head`, `li > .ban` + `.why`	Explicit rejections with the reason
Phase card	`.phase` + `.idx`, `.goal`, optional `.accept` + `.deferred`	Rollout phases with acceptance criteria
Concept	`.concept` + `.ctag`	Definitions of core terms
Checklist	`.checklist`	Open questions, launch gates
Metrics	`.metrics` > `.metric` (`.value` + `.label`)	Headline numbers: targets, baselines, results
Component veneer	`.spec-btn` (`.secondary` `.outline` `.sm`), `.spec-badge` (`.secondary` `.outline` `.success`), `.spec-alert` (`.title` + `.desc`), `.spec-input`, `.spec-chat` > `.spec-message` (`.end`) > `.spec-bubble` (`.secondary`)	Demoing REAL product UI: static, pixel-faithful renderings of the @layers/ui components
Rule	`hr.rule`	Hard breaks between arcs
Source note	`.src-note`	File paths, URLs, commit refs

Beyond the blocks — invent freely, on-brand

You have complete freedom to build whatever presents the content best: charts, product wireframes, UI mockups, timelines, diagrams, testimonials, images, comparison visuals, anything HTML/CSS can do. The blocks are a starter set, not a boundary. What makes an invention on-brand is obeying the style law, not picking from a list:

Color: only the kit tokens. Pastels (--brand-purple/blue/green/peach) are flat signal fills and accents; surfaces are --background/--card; lines are --border. Never a new hex, never a gradient, never a shadow, never 3D. Inventions theme automatically ONLY if they use the tokens — check dark by flipping the OS scheme.
Type: body and data values are the sans at the 14px scale. Every ALL-CAPS label on an invented element uses .mono-label verbatim. Mono never appears on mixed-case text or numbers.
Geometry: 8px spacing grid (4px fallback), radii 4/6/8/10px matching the kit, 1px hairlines.
Charts: pure HTML/CSS (divs) or inline SVG. Flat pastel fills, hairline axes in --border, .mono-label axis labels, values in sans. No chart libraries (self-containment), no decoration that data doesn’t earn.
Product UI: when the spec shows REAL product surfaces (a chat stream, a form, buttons, an alert), use the component veneer classes (.spec-* in the vocabulary table): static, pixel-faithful renderings transcribed verbatim from @layers/ui. Never approximate a real component by hand. The veneer is a manual mirror of the components; if a component restyles, update the veneer in the same PR.
Wireframes / loose concepts: when the UI does NOT exist yet or the idea is deliberately loose, compose from the .wire, .wire-bar, .wire-dot, .wire-fill primitives (hairline frames + muted skeleton shapes). Suggest the product, never counterfeit it: no real chrome colors, no fake screenshots.
Containers: invented panels sit on .surface (the house card).
Images: embed as data URIs (self-containment), radius 8px+, and the caption goes BELOW the frame, never padded inside it.
Quotes / testimonials: the .pullquote treatment, attribution in .mono-label beneath.

The reference for the spirit: /spec/demo.html sections 05 and 06 render an invented chart, a wireframe, a metrics row, and a conversation mockup with nothing but tokens + helpers. Scale complex specs the way that document does: group the TOC into labeled sections, mix blocks with inventions, and let long documents grow more groups rather than flatter lists.

House rules (baked into the kit, obey in the copy)

No em dashes anywhere in the document copy; restructure the sentence.
Mono is only ever ALL-CAPS — the kit’s labels/eyebrows handle this; never put mono on mixed-case values, IDs, or URLs in body copy (.src-note and code are the exceptions, as code).
8px spacing grid — the kit’s blocks are on it; don’t add inline styles.
The verb is “post”, never “publish”; no industry jargon (“Comments”, not “Engagement”); no @ prefix on usernames.
Sections are numbered (01 · Name); every spec opens with the brand row, hero, and a TL;DR.
Specs do NOT live on the strata site — the site hosts the system, specs live wherever the work lives.