Five posts hold roughly 140 specimens. They sort into ten homes — not 140 separate decisions — and the homes bundle into a dozen kits, most of which are one small piece of machinery plus authoring habits. This page assigns every specimen a home (some get two), names the kits, and proposes a build order for when the owner ends the exploration freeze.
Standing constraint: exploration only — nothing here is a work queue. This is the plan for when the word is given. The record of truth is spec/in-progress/accelerate-specimen-toolchest.md in the hub.
The ten homes
The axis that matters is who owns it and where it lives. Every specimen lands in at least one:
| Home | What it is |
|---|---|
| Floor | Suite-wide CSS shipped in pattern_render.css, weighted with :where() so any template rule beats it. Like the button floor today. |
| Token | Values derived from the palette and scales, emitted as custom properties: state colors, tint ramps, elevation, spacing, radius relation, tracking. The derivation engine. |
| Fact | Numbers and attributes the renderer/runtime writes for sheets to spend: --accpt-i/--accpt-n, the page’s theme attribute, registered @property types, later seam facts. |
| Behavior | The closed runtime set in pattern_render.js, declared in template.json like accordion/tabs today. Templates still ship zero JavaScript. |
| Vocab | Designer-only template.json declarations: motion verbs, named easings, the shape set, frame treatments, reveal treatments. Validated, never buyer-facing. |
| Module | An extension of an existing module — rating, stat, form, image frames, collections — rather than anything new-shaped. |
| Cookbook | Pure-CSS technique documented in the modules spec, with its trap noted. No machinery; the specimen post is the living demo. Includes doctrine (“don’t justify”, “restraint”). |
| Site | A plugin-global setting with block/template override or fallback — the “set once for the whole site” tier. Very small on purpose. |
| Instrument | A tool for looking at the work, not part of it: contrast audit, grid overlay, frame counter, validator warnings. Hub/designer only, never deployed. |
| Park | Deliberately not now — a dependency or scope question decides it later. Recorded so it never resurfaces as a surprise. |
Buyer options are conspicuously absent as a home: on the standing rules almost nothing here is the buyer’s. The exceptions are argued individually in the forks at the end.
The kits
Bundles that ship together because they share code, a decision, or a doc section.
1 · Suite floor rules Floor
text-wrap: balance on headings, pretty on body; every gradient in oklab; explicit color: inherit defense for text elements; the seam rule (space between sections belongs to the lower one); tabular numerals in generated tables and stat figures; central prefers-reduced-motion handling. All free, all catalog-wide, none can look worse.
2 · Derivation engine Token
Relative color syntax turning one role into hover / active / soft / ring / complement; the oklch tint ramp per role; surfaces mixed from the accent; a five-step elevation scale (level 0 is a border); a spacing scale; the radius relation (inner = outer − padding); tracking as a function of size; tinted shadows as an opt-in token. The through-line of the composition and color pillars: derived, never picked twice.
3 · Index facts Fact
--accpt-i / --accpt-n on every collection item, plus central @property registrations (angle, percentage, integer). Cheapest item in any pillar; unlocks staggers, ramps, alternation, conic borders, rings and counters with zero per-template work.
4 · State kit Behavior
Fixes before features: calc-size(auto) and transition-behavior: allow-discrete complete the shipped accordion and tabs so they animate open and closed honestly. Then the FLIP instrument (one primitive behind filter, sort, add/remove, card→panel), with View Transitions as the enhancement on top.
5 · Reveal kit Behavior Vocab
The reveal behavior (class on entering view) plus the motion verb vocabulary — rise / fade / zoom / wipe / letters / words with duration and distance, declared per node, designer-only. @starting-style covers above-the-fold entrances free; reveal covers below. Named easings (linear() springs) join the vocabulary as longhands only — the shorthand-reset trap is documented.
6 · Scroll kit Behavior
scrollprogress writes --p, with the three measures declared explicitly — runway, band, distance — because picking the wrong one was the source of two bugs. Stateless, so it reverses free. Consumers (parallax, color ramp, edge cues, sideways section) are cookbook entries spending --p.
7 · Pointer kit Behavior
One reporter writing --mx/--my/--px/--py and proximity; the sheet decides meaning. Covers tilt, glare, spotlight, magnetic, cursor parallax, ripple, directional hover, proximity glint — eight effects, one behavior. Stands down where there is no pointer.
8 · Ribbon package Behavior
Duplicate-to-fill marquee (proven at 3/6/15 items, speed derived, ResizeObserver refill) plus cross-fade cycle for short lists, plus the snap-scroll auto-advancing row as the reader-owns-it variant. One package, three presentations of “a strip of logos”.
9 · Data-viz extensions Module
rating and stat already own charts and figures, so animated bars, donut segments, progress ring, rating sweep, count-up and the odometer are chart options and reveal treatments on existing modules, not new features. Sparkline is the one genuinely new chart shape.
10 · Form feelings Module
The form module gains the feedback family: idle→working→done submit lifecycle, inline validation, inline confirm, skeleton handover. The runtime already owns form behavior, so this is the module growing manners, not a new system.
11 · Seam kit Fact Vocab
Pillar five, later. Position facts a renderer knows and a template never can (what color is beneath, what follows), feeding the three expensive looks: card across the join, color handoff, shaped edge. The one piece that ships early is the gap-ownership floor rule — measured 77px vs 38px, one rule, all 91 templates.
12 · Instruments Instrument
The contrast audit (canvas-resolved, theme-aware), grid overlay, frame-count comparison, plus validator warnings: box-shadow on a clipped shape, animation shorthand over a named easing, transitioning layout properties. Hub and designer only.
Every specimen, assigned
Two chips = the specimen is two things (its machinery in one home, its use in another). Notes are the load-bearing detail from the specs.
Motion Specimens — post 10699
| Specimen | Home | Plan |
|---|---|---|
| Scroll-driven vs triggered | Cookbook | Doctrine: triggered is the foundation (works everywhere, settles); driven stays a free Chromium-only enhancement where reversal is wanted. |
Parallax via --p |
Behavior Cookbook | Scroll kit, band measure. Travel derived from the picture’s own overhang; fitness check for short wide pictures. |
| Duplicate-to-fill ribbon | Behavior | Ribbon package core. Speed derived from cycle width; refill on element resize. |
| Drifting picture ground | Cookbook | Free; four current designs qualify. |
| Drifting gradient | Cookbook | The quiet win — fits cta-band, hero-gradient, statement-figure. Move the gradient’s position, not the box. |
| Sticky stack | Cookbook | Free; a future showpiece pattern, not machinery. |
| Hover choreography | Cookbook | Already the house habit; folds into the cookbook’s pointer section. |
| Stagger declarations | Fact | Entirely carried by --accpt-i/--accpt-n; one declaration serves 3 or 30 items. |
Animation Specimens — post 10700 (21)
| Specimen | Home | Plan |
|---|---|---|
| Pointer | ||
| Card lift | Cookbook | Already a house habit; document with the shadow step. |
| Zoom inside the frame | Cookbook | Pairs with image frames (overflow on .accpt-frame). |
| Underline wipe | Cookbook | Free. |
| Arrow nudge | Cookbook | Free. |
| Tilt to pointer | Behavior | Pointer kit consumer. |
| Spotlight follow | Behavior | Pointer kit consumer. |
| Entrance & text | ||
Entry with no trigger (@starting-style) |
Vocab | The above-the-fold half of the reveal kit; support question still open below the fold. |
| Letter stagger | Vocab Behavior | Motion verb letters — runtime splits spans and writes --i; reveal kit. |
Disclosure from display:none |
Behavior | State kit — completes shipped accordion/tabs. |
| Sheen across letterforms | Cookbook | Free. |
| Typewriter | Cookbook | Free (steps()); use sparingly — doctrine note. |
| Scramble to settle | Park | Needs its own timer instrument for one showy effect; demo-only until a design demands it. |
| Shape, ambient, data | ||
| Mask wipe | Vocab | The reveal treatment for anything the buyer chose — works on font glyphs. |
| Iris | Cookbook | Free (clip-path: circle()). |
| Border draw | Vocab | Stroke draw — designer geometry only (shape set, connectors); never a buyer icon. getTotalLength(), never a guessed length. |
| Rotating conic border | Cookbook Fact | Two-background technique; needs the central @property angle registration. |
| Aurora | Cookbook | Free; coprime periods. |
| Progress ring | Module | rating already has chart: "circle" — this is its animated reveal, via reveal kit + registered percentage. |
| Odometer | Module | stat figure treatment, data-viz extension; runtime-backed. |
| Easing & state | ||
Easing gallery (linear()) |
Vocab | Named curves in the vocabulary, emitted as longhands — the shorthand silently resets them. |
| Shimmer placeholder | Cookbook | Free; also feeds the form kit’s skeleton handover. |
Interaction Specimens — post 10707 (47)
| Specimen | Home | Plan |
|---|---|---|
| State change (6) | ||
calc-size(auto) accordion |
Behavior | Strongest candidate on any post — the missing half of shipped accordion/tabs. State kit, first. |
| View Transition | Behavior | Enhancement layer over FLIP where supported. |
| FLIP filter / sort | Behavior | One instrument (measure → change → measure → animate) behind a future filter behavior. |
| Card → panel | Behavior | Same FLIP instrument; a showpiece consumer later. |
| Add / remove | Behavior | Same instrument; pairs with future load-more. |
@starting-style swap |
Cookbook | Free. |
| Picture (6) | ||
| Ken Burns | Vocab | Image-frame treatment declared on the node / imageDefaults. |
| Before / after | Module | Candidate new module — inherently buyer content (two images + handle). Fork 5. |
| Grade shift | Cookbook | Free hover filter; frame treatment if it earns declaration. |
| Focus pull | Cookbook | Free. |
| Type cut out of a photo | Cookbook | Free (background-clip: text). |
| Directional hover | Behavior | Needs entry direction — pointer kit consumer. |
| Line (4) | ||
| Drawn icons | Vocab | Stroke draw on designer geometry; buyer icons get mask wipe instead. Stroke icon set = a fourth library, parked. |
d morph (shape set) |
Vocab | The generated 24-cubic shape set (11 shapes, any-to-any). Wanted by the designer with or without motion — build as a designer asset. |
| Measured connectors | Park | Needs per-layout measuring; revisit with a timeline/process pattern that wants it. |
offset-path travel |
Cookbook | Free. |
| Data (6) | ||
| Bars | Module | rating/stat chart, animated by reveal. Data-viz kit. |
| Sparkline | Module | The one genuinely new chart shape; needs designer geometry. Late in the data-viz kit. |
| Donut segments | Module | Chart option; conic + registered percentage. |
| Spring needle | Cookbook | linear() spring showcase; not a module until a design wants a gauge. |
| Rating sweep | Module | rating reveal treatment. |
| Formatted counter | Module | stat count-up on reveal; formatting stays the module’s. |
| Scroll (7) | ||
| Sideways section | Behavior | Scroll kit, runway measure; runway from content, never authored height. |
| Snap strip | Cookbook | Free with scroll-snap; auto-advance joins the ribbon package. |
| Condensing header | Park | Page chrome, not a block — outside the catalog’s scope today. |
| Reading bar | Park | Page-level; same reason. |
| Color ramp | Behavior | Scroll kit, band measure (the bug that named the three measures). |
| Edge fades | Cookbook | Free mask. |
| Retiring cue | Behavior | Scroll kit, distance measure; clock arms on first intersection. |
| Pointer (5) | ||
| Magnetic | Behavior | Pointer kit. |
| Ripple | Behavior | Pointer kit (needs coordinates). |
| Tilt with glare | Behavior | Pointer kit. |
| Layered cursor parallax | Behavior | Pointer kit. |
| Proximity fade with glint | Behavior | Pointer kit; fade on the sibling, never the wrapper (opacity-cap trap). |
| Text (4) | ||
| Word rise | Vocab | Motion verb words, reveal kit. |
| Per-line clip | Cookbook | Free where line structure is authored; verb candidate later. |
| Highlighter | Cookbook | Free. |
| Variable weight | Park | Means shipping a variable face as a dependency; fallback looks broken. Parked deliberately. |
| Feedback (4) | ||
| Idle → working → done | Module | form submit lifecycle. Form-feelings kit. |
| Skeleton handover | Module Cookbook | Form/posts loading state; shimmer is the free half. |
| Validation | Module | form inline validation styling + timing. |
| Inline confirm | Module | form success state (already has successMessage). |
| Ambient (3) & discipline (2) | ||
| Grain | Cookbook | Free (feTurbulence tile). |
| Breathing glow | Cookbook | Free. |
| Coprime drift field | Cookbook | Free. |
| Both motion settings at once | Floor Site | Reduced motion honoured once, centrally — a version of the design. Feeds fork 1. |
| Cheap vs expensive (frame counter) | Instrument | Becomes a standard + validator warning: transition transform/opacity/filter/box-shadow only. |
Composition Specimens — post 10708 (44)
| Specimen | Home | Plan |
|---|---|---|
| Type (01–12) | ||
| 01 Measure | Token | Measure token in ch — survives font-size changes. |
02 text-wrap: balance |
Floor | One rule, all headings, catalog-wide. |
03 text-wrap: pretty |
Floor | Body text; same rule family. |
| 04 Type set for its size | Token | Tracking as a function of size in the type scale. |
| 05 Numerals | Floor | tabular-nums in generated tables and stat figures; oldstyle stays a cookbook choice. |
| 06 Hanging punctuation | Cookbook | Pull-quote technique with fallback. |
| 07 Drop cap | Cookbook | initial-letter + float fallback. |
| 08 Spacing says what belongs | Token | The spacing scale — gaps proportional to relationship. |
| 09 Hierarchy from one face | Cookbook | Doctrine with worked example. |
| 10 Small-caps labels | Cookbook | Free; pairs with tracking token. |
| 11 Ligatures / alternates | Cookbook | Font-dependent — not a floor rule. |
| 12 Justification | Cookbook | Doctrine: ragged right, with the why. |
| Depth & material (13–20) | ||
| 13 Layered shadow ramp | Token | Feeds the elevation scale. |
| 14 Light hits the top edge | Token | Part of each elevation level; also the dark-ground answer. |
| 15 Frosted glass | Cookbook | Free. |
| 16 Multi-radial gradient | Cookbook | Free. |
| 17 Grain, standing still | Cookbook | Free. |
| 18 Letterpress | Cookbook | Needs a mid-tone ground — trap noted for recolourable templates. |
| 19 Foil | Cookbook | Free. |
| 20 Elevation scale | Token | Five steps, level 0 = border; supersedes the current three-step habit. Fork 4. |
| Color (21–25) | ||
| 21 Ramp derived, not picked | Token | oklch ramp per role, chroma tapered at the ends. |
| 22 Surfaces from one color | Token | color-mix against roles — already the house habit; tokenise it. |
| 23 Contrast, measured | Instrument | The canvas-resolved audit, theme-aware; white-on-accent fails in dark mode — the finding that justifies it. |
| 24 Restraint | Cookbook | Doctrine: one accent. |
| 25 Gradients that don’t gray | Floor Instrument | in oklab as standard + validator nudge on bare gradients. |
| Composition (26–32) | ||
| 26 A grid used | Cookbook | Uneven spans doctrine; asymmetry reads as designed. |
| 27 Overlap | Cookbook | Free inside a block; crossing blocks is the seam kit’s. |
| 28 Bleed against contained | Cookbook | Already built — the block frame. Pointer to it, so nobody re-rolls it. |
| 29 Whitespace is the hierarchy | Token | Same spacing scale as 08. |
| 30 Figure and ground | Cookbook | Crop guidance; the crop tool already exists. |
| 31 A pull quote that is one | Cookbook | Recipe; a pattern, not a module. |
| 32 Optical size | Cookbook | The one thing that resists derivation — human judgment, documented (icon set and typeface chosen together). |
| Detail (33–38) | ||
| 33 Hairline rules | Token | A hairline token (role mixed toward transparent). |
| 34 Nested corners | Token | Radius relation: inner = outer − padding; equal values correctly give square. |
| 35 Markers with a job | Cookbook | Collection marker already exists; counters-in-column is the recipe. |
| 36 A table worth reading | Floor | Default styling for generated tables: no vertical rules, aligned figures. |
| 37 A field that looks designed | Floor | form module floor: inset shadow, real focus ring. |
| 38 The empty state | Cookbook | Empty affordances exist (--empty classes); recipe for styling them. |
| Where sections meet (39–44) — pillar five | ||
| 39 Card across the join | Vocab Fact | Seam kit — needs facts about the neighbor a template can’t know. |
| 40 Color handed to the next | Vocab Fact | Seam kit — color-beneath fact + band declaration. Also answers the gradient-border clip question. |
| 41 A shaped edge | Vocab Fact | Seam kit — band-family edge treatment. |
| 42 The gap nobody chose | Floor | Ships first of the six. One rule: the space between sections belongs to the lower one. 77px → 38px, all 91 templates. |
| 43 Three sections, one color | Instrument | Page-level judgment — a wave-review check, not code. |
| 44 One loud band, not three | Instrument | Same — page rhythm doctrine in the wave review. |
Color Specimens — post 10710 (19 groups)
| Group | Home | Plan |
|---|---|---|
| Backgrounds (01–06) | ||
| 01 Gradients with a light source | Cookbook | Mesh / conic / starburst recipes over roles. |
| 02 Hard-stop “gradients” | Cookbook | Free. |
| 03 Paper, grids and dots | Cookbook | Free layered repeats. |
| 04 Hatching | Cookbook | The one texture that survives text on top — the general-purpose pick. |
| 05 Photographs recoloured | Cookbook | Blend-mode recipes; frame-treatment candidate if it recurs. |
| 06 Edges that are not there | Cookbook | Mask spotlight / vignette / fade. |
| Edges (07–11) | ||
| 07 Gradient border | Cookbook | Two-background recipe; the “mark one card of five” tool pricing tiers lack. Clip-surface question resolves via the seam kit’s color-beneath fact. |
| 08 Corners only | Cookbook | Free. |
| 09 Cut, notched, scalloped | Cookbook | Free; clipped side needs extra padding — trap noted. |
| 10 Radii that are not circles | Cookbook | Percentage radii scale with the box — trap noted. |
| 11 Underlines worth having | Cookbook | Free. |
| Shadows (12–14) | ||
| 12 Tinted shadows | Token | Opt-in token (declared, not auto-derived) — a tinted shadow reads as a smear on a dark palette. Fork 3. |
| 13 Shadow follows the shape | Cookbook Instrument | drop-shadow for anything clipped; validator warns on box-shadow + clip-path. |
| 14 Wells, glows, long shadows | Cookbook | With the dark-ground inversion (light top edge, not dark bottom). |
| Color as a system (15–19) | ||
| 15 Every state from one color | Token | The derivation engine’s flagship: hover / active / soft / ring derived from each role, designer-overridable. Removes work rather than adding it. |
16 light-dark() |
Cookbook | Niche — roles already swap via custom properties, and theme comes from the page’s attribute, never the OS. Noted, not adopted. |
| 17 Tints that belong together | Token | Same ramp as composition 21. |
| 18 Which way a gradient travels | Floor | oklab as the default; longer hue reserved for one showpiece. |
| 19 All of it at once | Cookbook | The demo card — becomes the cookbook’s cover example. |
Build order
Sequenced by the specs’ own arguments: stillness before motion, fixes before features, facts before consumers.
- Suite floor rulesbalance / pretty, oklab gradients,
color: inheritdefense, the seam gap rule, tabular numerals, central reduced-motion. All free, all catalog-wide, zero design risk. - Derivation enginestate colors, ramp, surfaces, elevation, spacing, radius relation, tracking. Tokens the designer spends; nothing buyer-visible.
- The cookbook~60 free techniques written into the modules spec, traps included. Unblocks authoring immediately — no code at all.
- Index facts
--accpt-i/--accpt-n+ central@propertyregistrations. Cheapest machinery, widest reach. - State kit fixes
calc-size(auto)+allow-discreteinto shippedaccordion/tabs. Improves two shipped things before adding one. - Reveal kit
revealbehavior + motion verbs + named easings (longhand) +@starting-stylesplit above/below the fold. - Scroll + pointer kits
scrollprogresswith its three declared measures; the pointer reporter. Consumers are cookbook entries. - Module extensionsdata-viz on
rating/stat; feedback onform. - Ribbon packageduplicate-to-fill + cross-fade + snap scroller.
- Seam kit + FLIPthe position facts and the three expensive seam looks; FLIP-backed filter/sort. The furthest-out machinery.
Open forks
1 · Motion intensity — whose control?
- Site setting — one plugin-level control (full / subtle / off), templates inherit,
prefers-reduced-motionalways wins. - Buyer option per block — against the “they bought the design” rule, and 91 chances to be inconsistent.
- No control — designer + OS preference only.
Recommend: site setting. It is accessibility-adjacent, so one owner-level decision fits; per-block options don’t.
2 · Derived state colors — replace or default?
- Default with override — engine derives hover/active/soft/ring; a designer declaration beats it.
- Replace outright — simpler, but takes a tool away from the designer.
Recommend: default with override — the same precedence shape as imageDefaults.
3 · Tinted shadows — derived or declared?
- Declared opt-in token — designer asks for the tint where it works.
- Auto-derived from the element’s role — consistent, but risks the colored-smear failure on dark palettes.
Recommend: declared. The modules spec already warns about tinted shadows on dark grounds; automation would fight that.
4 · Elevation — extend the 3-step habit or adopt the 5-step scale?
- Adopt five steps (level 0 = border) as tokens; existing sheets migrate as they’re touched.
- Keep three and document five as aspiration.
Recommend: adopt five in the token layer; the current three map onto steps 1–3 so nothing breaks.
5 · Before/after slider — module or skip?
- New module — it is inherently buyer content (two images and a handle) and no existing module can fake it.
- Skip — until a design in a wave actually wants it.
Recommend: skip for now, note it as the one specimen that would justify a new module when a wave calls for it.
Sources: spec/in-progress/accelerate-motion-system.md, accelerate-composition-system.md, accelerate-color-system.md; spec/built/accelerate-pattern-modules.md. Specimen posts 10699, 10700, 10707, 10708, 10710. Record of truth: spec/in-progress/accelerate-specimen-toolchest.md.