sheleg-design-skill 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -4,6 +4,59 @@ All notable changes to this project are documented in this file. The format
 follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions
 follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
+## [1.8.0] - 2026-08-08
+
+An eighth style pack, and the first one whose reference already implements this
+skill's own core pattern.
+
+`cyclorama` is extracted from [codos.ai](https://www.codos.ai/): a pale field
+that breathes through **six pastel stops on a 32-second loop** under near-black
+ink that never moves with it, a **monospaced typewriter serif** over a
+monospaced sans, one orange used only as a fill, and no shadows anywhere. Its
+reference ships GSAP ScrollTrigger with real pinning and two WebGL canvases
+whose formation holds and then redeploys — principle 3 in production rather than
+in a doc.
+
+### Added
+
+- **`styles/cyclorama.md`** on the thirteen-heading widened contract plus
+  `## Motion flavor`, with an addressable origin and every ratio computed by
+  importing `test/validate_palette.py` rather than by a second implementation.
+- **`styles/tokens/cyclorama.css`** — the six cycle stops as named tokens, one
+  ease, three durations plus the 32s loop, a five-step radius ramp whose nesting
+  is arithmetic, and an inline accent-dot cursor.
+- **`kits/cyclorama/`** — the six-component spine plus four signature parts:
+  `FieldStop` (the six stops as six static surfaces — the cycle itself does not
+  cross the border), `AppWindow` (a hairline frame with **no fill**, so the
+  field shows through it), `StatusPill` and `ComparePanel`.
+- **`docs/adr/0001-style-pack-naming.md`** — restored to `main`. It was written
+  on a branch that held at its stage-0 gate and never merged, so the decision
+  register began at `0002` for four days while the rule it records was already
+  binding. It is why this pack is `cyclorama` and not `codos`.
+- **T15** in `test/scenarios.md` — a routing pair with its negative branch, so
+  "is `cyclorama` distinguishable from `field-notes`?" can fail in the
+  interesting direction.
+
+### Fixed — in the pack, not in the reference
+
+- The reference paints its section eyebrows in the accent on the field, which
+  measures **1.71–1.97:1** across the six stops. This pack does not propagate
+  it: the accent is a fill, eyebrows take `--ink-soft` at 8.36:1. The three
+  darkened-orange candidates are recorded in `## Gotchas` **with their numbers**,
+  because each one trades a WCAG failure for a colour-blindness collision with
+  `--danger` or `--warning` — there is no text-safe orange in this palette, and
+  the next reader should not have to rediscover that.
+- The pack states that `--accent` and `--signal` sit 6.8 apart under protanopia
+  and that **the palette gate cannot see it**, because `--signal` is not one of
+  the names it treats as semantic. Written down rather than renamed around: a
+  token renamed to satisfy a checker is worse than an unchecked token that says
+  so out loud.
+- The reference's own display fallback is `Fraunces`, which is **proportional**,
+  while the face it replaces is monospaced — so a reader without the licensed
+  font gets a hero that reflows rather than merely restyles. The pack ships
+  measured substitutes instead (Courier Prime 0.600, Cutive Mono 0.605 against
+  the original's 0.590).
+
 ## [1.7.0] - 2026-08-05
 
 The Claude Design border, and the first code this skill has ever shipped.

package/README.md

@@ -49,6 +49,7 @@ voice is the timeline and slides therefore never animate).
 | `atrium` | warm cream daylight field with no dark bands, one terracotta accent, light serif with italic asides, fluted-glass hero over photography | consumer health, longevity & diagnostics, wellness, premium care, high-trust DTC |
 | `orchard` | warm oat field of rounded slabs, sage brand + one candy-orange action, rounded geometric display, soft-3D pills built from inset light | friendly consumer biotech, DTC wellness, testing kits & supplements |
 | `field-notes` | warm green-cast paper ruled by hairlines, one rust accent, a hero that dissolves into the page instead of ending, numbered mono eyebrows, crop marks, colour that encodes how a claim is known | open-source & developer tools sold on auditability — code intelligence, provenance, evals, agent memory |
+| `cyclorama` | a pale field cycling through six pastel stops on a 32s loop under near-black ink that never moves with it, a monospaced typewriter serif over mono, one orange used only as a fill, a particle organ that holds then redeploys, no shadows anywhere | enterprise AI transformation, applied-AI services, technical consultancies — where what is sold is a change of state and there is no screenshot worth showing |
 
 Each pack locks palette, type, texture, motion tokens, signature motifs and
 bans — and ships a `tokens/<pack>.css` to copy verbatim, so the agent never
@@ -121,7 +122,7 @@ skills.
 | `DESIGN_SYNC_BRIDGE.md` | The Claude Design contract: what a pack sends to claude.ai/design and in what shape, the rule for each of the four reference types, and the border motion does not cross |
 | `FIGMA_BRIDGE.md` | The design↔code contract: how a pack's tokens map onto Figma variable collections and modes, how to implement a design without importing raw values, and what cannot cross the border |
 | `AI_PRODUCT_PATTERNS.md` | The surfaces a model drives: the five states of a call, streaming instead of spinners, latency, provenance and uncertainty, agent confirmations, and the bans that keep it honest |
-| `styles/*.md` | The seven style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The eight style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
 | `styles/tokens/*.css` | The ready-made token layer per pack, copied verbatim instead of transcribed (workbench ships a light `:root` plus a `data-theme="dark"` twin) |
 | `styles/STYLE_PACK_TEMPLATE.md` | The pack contract as a skeleton, so a new style is authored against the same headings rather than improvised |
 

package/bin/cli.js

@@ -230,13 +230,14 @@ ${c("bold", "What it installs")}
   SHELEG_DESIGN.md     the full reference (architecture, recipes, why it works)
   FIGMA_BRIDGE.md      the design↔code contract (tokens ⇄ Figma variables)
   AI_PRODUCT_PATTERNS.md  chat / agent / streaming surfaces (honest state)
-  styles/              seven style packs — instrument-console (dark console),
+  styles/              eight style packs — instrument-console (dark console),
                        editorial-luxury (warm editorial), workbench (light/dark
                        product UI), briefing-room (dark 16:9 presentation deck),
                        atrium (warm cream consumer health), orchard (friendly
-                       consumer biotech), field-notes (warm paper dev tools) —
-                       plus a ready-made token CSS per pack and
-                       STYLE_PACK_TEMPLATE.md for authoring more
+                       consumer biotech), field-notes (warm paper dev tools),
+                       cyclorama (a pastel field on a 32s cycle, for enterprise
+                       AI transformation) — plus a ready-made token CSS per pack
+                       and STYLE_PACK_TEMPLATE.md for authoring more
 `);
 }
 
@@ -315,7 +316,7 @@ function main() {
     `\n${c("green", "✓")} ${c("bold", "SHELEG Design")} installed to ${c("blue", rel + "/")}\n` +
       `  ${c("dim", "SKILL.md")}          the agent skill\n` +
       `  ${c("dim", "SHELEG_DESIGN.md")}  the full reference\n` +
-      `  ${c("dim", "styles/")}           style packs + token CSS (instrument-console / editorial-luxury / workbench / briefing-room / atrium / orchard / field-notes)\n\n` +
+      `  ${c("dim", "styles/")}           style packs + token CSS (instrument-console / editorial-luxury / workbench / briefing-room / atrium / orchard / field-notes / cyclorama)\n\n` +
       `Your Cursor / Claude agent can now discover the skill and build\n` +
       `cinematic, scroll-driven pages — or style product UI (dashboards,\n` +
       `admin, internal tools) from the workbench pack — on its principles.\n\n` +

package/cursor/rules/sheleg-design.mdc

@@ -17,7 +17,10 @@ never animate; atrium — warm cream consumer-health field, one terracotta
 accent, fluted-glass hero; orchard — friendly consumer biotech, oat slabs,
 sage brand and one candy-orange action; field-notes — open-source developer
 tools on warm green-cast paper ruled by hairlines, one rust accent, a hero
-that dissolves into the page, and colour that encodes how a claim is known);
+that dissolves into the page, and colour that encodes how a claim is known;
+cyclorama — enterprise AI transformation on a pale field that cycles through
+six pastel stops on a 32s loop under fixed near-black ink, a monospaced
+typewriter serif, one orange used only as a fill, and no shadows at all);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Five principles, in order

package/kits/cyclorama/.design-sync/config.json

@@ -0,0 +1,12 @@
+{
+  "pkg": "@sheleg-design/cyclorama",
+  "globalName": "ShelegCyclorama",
+  "shape": "package",
+  "buildCmd": "npm run build",
+  "srcDir": "src",
+  "tsconfig": "tsconfig.json",
+  "cssEntry": "src/styles.css",
+  "docsDir": "src",
+  "readmeHeader": ".design-sync/conventions.md",
+  "guidelinesGlob": ["guidelines/*.md"]
+}

package/kits/cyclorama/.design-sync/conventions.md

@@ -0,0 +1,69 @@
+# Cyclorama — the contract this design system ships under
+
+**Register.** Choose Cyclorama for **a company selling transformation to an
+executive buyer**: enterprise AI, AI-transformation and applied-AI services,
+technical consultancies whose argument is *we install this and your business
+starts running differently*. It suits a product with no screenshot worth showing,
+where the thing being sold is a change of state. The fork people get wrong is
+against `field-notes`: both are warm, light and monospace-voiced, but that pack
+is a **ruled document** selling *auditability* and nothing in it moves, while this
+one is a **stage** selling *transformation* and the field itself is the motion.
+Route by what the product's argument rests on — *how do you know?* takes
+`field-notes`, *watch this change* takes this pack. Against `workbench`: a field
+that recolours under you is a defect on a screen held for an hour, so dense
+product UI goes there, not here. Build every screen against `var(--…)` and never
+a literal.
+
+**The field is not a colour.** It is a 32-second, six-stop, infinite loop, and
+the ink never moves with it. Every contrast figure in this system is stated
+against the **worst** stop, `--field-2` at 12.79:1 — not against a representative
+one. When you prove a screen, prove it there. `FieldStop` exists to make that
+possible; the animation itself is not part of this design system, because a kit
+is the static half of a pack.
+
+**The accent rule, and it is the one that gets broken.** `--accent` `#FF8C00` is
+a **fill, a dot and a chart series — never text on the field.** As text it
+measures 1.71–1.97:1 across the six stops. The reference itself paints its
+section eyebrows that way and it fails WCAG at every stop; this system does not
+propagate it. Eyebrows take `--ink-soft` at 8.36:1. And there is no darkened
+orange to reach for instead: the warm-dark region is already occupied by
+`--warning` and `--danger`, so every text-capable orange collides with one of
+them — `#903A00` sits 4.6 from `--danger` against a hard floor of 10. There is no
+text-safe orange in this palette. Ink on the accent is fine at 7.46:1, which is
+what `--on-accent` is for.
+
+**Status is never by colour alone.** `--good` and `--danger` separate by 7.2
+under protanopia and 5.9 under deuteranopia; `--signal` and `--accent` by 6.8 and
+6.7. The floor is 8. Every status therefore renders as a mark **plus its word** —
+which is why `StatusPill` takes `label` as a required prop rather than an
+optional one. An API that let you omit it would be an API that lets you ship the
+bug.
+
+**Bans** (verbatim from the pack):
+
+- `--accent` as text on the field. Also banned: a darkened orange invented to get
+  around it — there isn't one.
+- `--signal` as text, and any status rendered as a mark without its word.
+- A shadow. Anywhere. Elevation is a hairline; there is no `--shadow-*` token
+  because there is nothing for it to describe.
+- A fill on the app window; a second opaque surface beside `--surface` and
+  `--panel`; a gradient of any kind.
+- `transition: all`, which the reference itself declares and this pack refuses.
+- A proportional display face — Zilla Slab, Bitter, Fraunces or any serif that is
+  not monospaced. The hero is laid out per character; a proportional substitute
+  does not restyle it, it breaks it. Use Courier Prime.
+- A sticky nav, a scrolled nav shape, or a backdrop blur.
+- `100vh`; a scroll listener where the scroll store belongs.
+- Scrubbing the field cycle to scroll position, or adding a second continuous
+  loop beside it.
+- A third font family. Urbanist is vestigial, not an invitation.
+- Pure black or pure white as ink; white as a label on an ink fill, where the
+  field colour belongs.
+
+**Radius arithmetic.** An inner radius is the outer radius minus the padding
+between them, never the same value twice. The reference gets this right and it is
+worth copying exactly: a 16px window with 12px of padding holds 4px chips.
+
+Motion is not part of this design system and must not be invented: a kit is the
+static half of a pack, and anything that moves stays behind in the pack. The
+cycle is six surfaces here, not an animation.

package/kits/cyclorama/README.md

@@ -0,0 +1,23 @@
+# @sheleg-design/cyclorama
+
+The React reference kit for the SHELEG **Cyclorama** style pack — a pale field
+that breathes through six pastel stops on a 32-second loop under near-black ink
+that never moves with it, a monospaced typewriter serif over mono, one orange
+used only as a fill, and no shadows anywhere.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens
+with `styles/tokens/cyclorama.css` byte for byte, and the rules the design agent
+must obey are in
+[`.design-sync/conventions.md`](./.design-sync/conventions.md).
+
+**The cycle is not in this kit, and that is deliberate.** A kit is the static
+half of a pack; motion stays behind in the pack. What crosses is `FieldStop` —
+the six stops as six surfaces — which is the more useful thing to design against
+anyway: a screen proved on stop 2 and stop 5 is proved on every frame between.
+
+```bash
+npm install && npm run build
+```
+
+Then run `/design-sync` in Claude Code from this directory to push it to
+claude.ai/design.

package/kits/cyclorama/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@sheleg-design/cyclorama",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": { ".": { "types": "./dist/index.d.ts", "default": "./dist/index.js" } },
+  "files": ["dist", "src"],
+  "scripts": { "build": "tsc -p tsconfig.json" },
+  "peerDependencies": { "react": ">=18" },
+  "devDependencies": { "typescript": "^5.6.0", "@types/react": "^18.3.0" }
+}

package/kits/cyclorama/src/AppWindow.md

@@ -0,0 +1,27 @@
+---
+category: Surfaces
+---
+
+A `1px var(--line)` frame at `--radius-lg` with 12px of padding and **no fill at
+all**, so the field cycle shows straight through it. Traffic-light dots at the
+left, a mono title and sub-line in the centre, a slot for a `StatusPill` at the
+right, and a row of chips along the foot.
+
+**Giving it a background is the most common way to break this pack.** The window
+is a frame, not a surface. Fill it and the page's signature stops at its border:
+the screenshot inside becomes a foreign object pasted onto a pastel page,
+instead of a product glimpsed through it.
+
+Its 12px of padding is also what sets the chips inside to `--radius-sm`, since
+`16 − 12 = 4`. Change the padding and the inner radius has to move with it.
+
+```tsx
+<AppWindow
+  title="diagnostic interviews"
+  meta="Session ID4611.4 · VP Sales · 01:55"
+  status={<StatusPill status="live" label="Listening" />}
+  footer={<><Chip>Mic on</Chip><Chip>Phase 2 of 5</Chip></>}
+>
+  Most start inbound — a founder demo request.
+</AppWindow>
+```

package/kits/cyclorama/src/AppWindow.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+
+export interface AppWindowProps {
+  title: string;
+  /** The mono sub-line under the title: a session id, a phase, a duration. */
+  meta?: string;
+  /** Rendered at the window's top right — a StatusPill belongs here. */
+  status?: ReactNode;
+  /** The row of chips along the window's foot. */
+  footer?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * How this pack draws product UI without breaking the page's one continuous
+ * surface: a `1px var(--line)` frame at `--radius-lg` with **no fill at all**,
+ * so the field cycle shows straight through it.
+ *
+ * Giving it a background is the single most common way to break this pack. The
+ * window is a frame, not a surface — the moment it fills, the page's signature
+ * stops at its border and the screenshot inside becomes a foreign object
+ * pasted onto a pastel page.
+ *
+ * Its 12px of padding is what makes the chips inside `--radius-sm`: 16 − 12 = 4.
+ */
+export function AppWindow({ title, meta, status, footer, children, className }: AppWindowProps) {
+  return (
+    <section className={['cy-window', className].filter(Boolean).join(' ')}>
+      <header className="cy-window__bar">
+        <span className="cy-window__lights" aria-hidden="true">
+          <i />
+          <i />
+          <i />
+        </span>
+        <span className="cy-window__titles">
+          <span className="cy-window__title">{title}</span>
+          {meta !== undefined && <span className="cy-window__meta">{meta}</span>}
+        </span>
+        {status !== undefined && <span className="cy-window__status">{status}</span>}
+      </header>
+      <div className="cy-window__body">{children}</div>
+      {footer !== undefined && <footer className="cy-window__foot">{footer}</footer>}
+    </section>
+  );
+}

package/kits/cyclorama/src/Button.md

@@ -0,0 +1,26 @@
+---
+category: Actions
+---
+
+`primary` is an `--ink` fill and its label is `--on-ink` — **the field colour,
+not white**, measured at 13.73:1. That is the pack's one counter-intuitive
+button rule: the reference tints its button labels with the page, and a white
+label reads instantly as a component borrowed from another kit.
+
+`secondary` is the hairline outline (`1px var(--line)`), and `ghost` drops the
+border for toolbars and table rows. The accent fill is a fourth state carried by
+`Chip tone="accent"` and by the CTA class directly — it is deliberately not a
+`variant` here, because a `variant` list invites picking one per button and this
+pack allows at most one accent fill per view.
+
+**Press is instant.** Hover scales to `1.02` over `--dur-base`; active drops to
+`0.98` with `transition-duration: 0s`, so the control answers the finger instead
+of easing after it. Filled and accent buttons carry the 22px accent-dot cursor.
+Focus-visible is a 2px `--accent` outline at 2px offset — the one place the
+accent is allowed beside text, because a ring is not text.
+
+```tsx
+<Button onClick={bookDemo}>Book a demo →</Button>
+<Button variant="secondary" onClick={emailFounders}>E-mail founders →</Button>
+<Button variant="ghost" size="sm" onClick={dismiss}>Not now</Button>
+```

package/kits/cyclorama/src/Button.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+
+export interface ButtonProps {
+  /** `primary` is the ink fill; `secondary` the hairline outline. At most one
+   *  accent fill per view — see the `tone` note below. */
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  onClick?: () => void;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * `primary` is an `--ink` fill whose label is `--on-ink` — the *field* colour,
+ * not white. That is the pack's one counter-intuitive button rule and it is
+ * measured: the reference tints its button labels with the page.
+ *
+ * Press is instant on purpose. Hover scales to 1.02 over `--dur-base`; the
+ * active state drops to 0.98 with **zero** duration, so the button answers the
+ * finger rather than easing after it.
+ */
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  onClick,
+  children,
+  className,
+}: ButtonProps) {
+  return (
+    <button
+      type="button"
+      className={['cy-btn', `cy-btn--${variant}`, `cy-btn--${size}`, className]
+        .filter(Boolean)
+        .join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

package/kits/cyclorama/src/Card.md

@@ -0,0 +1,19 @@
+---
+category: Surfaces
+---
+
+`--surface` at `--radius-lg` with 32px of padding, no border and **no shadow** —
+there are no shadows anywhere in this pack, so there is nothing for a card to
+lift off. Hover translates 2px and nothing else.
+
+It is the only opaque surface besides `--panel`, and that scarcity is the point.
+A card switches the pack's signature off locally: an opaque rectangle over a
+cycling field is a hole in the thing the page is remembered for. Reach for one
+when content genuinely must stop competing — a three-up of dense propositions,
+a form — and let the field show everywhere else.
+
+```tsx
+<Card title="Midsize companies or Enterprise business-units" meta="300–3000 people">
+  Big enough to feel friction. Small enough to become AI-native fast.
+</Card>
+```

package/kits/cyclorama/src/Card.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+export interface CardProps {
+  title?: string;
+  /** Right-aligned metadata on the title row: a count, an id, a timestamp. */
+  meta?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * The one opaque surface in this pack — `--surface`, `--radius-lg`, 32px of
+ * padding, no border and no shadow, because there are no shadows anywhere in
+ * this system.
+ *
+ * Use it where content must stop competing with the cycling field. Everywhere
+ * else the field simply shows: a card placed for decoration puts an opaque
+ * rectangle over the pack's signature and switches it off locally.
+ */
+export function Card({ title, meta, children, className }: CardProps) {
+  const head = title !== undefined || meta !== undefined;
+  return (
+    <section className={['cy-card', className].filter(Boolean).join(' ')}>
+      {head && (
+        <div className="cy-card__head">
+          {title !== undefined && <h3 className="cy-card__title">{title}</h3>}
+          {meta !== undefined && <span className="cy-card__meta">{meta}</span>}
+        </div>
+      )}
+      <div className="cy-card__body">{children}</div>
+    </section>
+  );
+}

package/kits/cyclorama/src/Chip.md

@@ -0,0 +1,19 @@
+---
+category: Data
+---
+
+Ink at 6% on `--radius-sm` with `4px 8px` of padding, DM Mono at `--t-sm`.
+
+The 4px radius is arithmetic, not taste: a chip sits inside a 16px window with
+12px of padding, and `16 − 12 = 4`. Concentric curves are what separate a
+machined object from two rectangles that happen to touch, and the reference gets
+this right throughout — copy the arithmetic, not the number.
+
+`tone="accent"` fills with `--accent` and labels it `--on-accent` at 7.46:1.
+Accent-coloured *text* on the field is a different thing and is banned: it
+measures 1.71:1 on the pack's worst stop.
+
+```tsx
+<Chip>Phase 2 of 5</Chip>
+<Chip tone="accent" selected>Go-to-market</Chip>
+```

package/kits/cyclorama/src/Chip.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+
+export interface ChipProps {
+  children: ReactNode;
+  selected?: boolean;
+  tone?: 'neutral' | 'accent';
+  className?: string;
+}
+
+/**
+ * Ink at 6% on `--radius-sm` with `4px 8px` of padding — the small radius is
+ * not a taste call, it is arithmetic: a chip sits inside a 16px container with
+ * 12px of padding, and 16 − 12 = 4.
+ *
+ * `tone="accent"` fills with `--accent` and sets `--on-accent` as the label at
+ * 7.46:1. It is never accent-coloured *text* on the field; that measures 1.7:1
+ * and the pack bans it.
+ */
+export function Chip({ children, selected = false, tone = 'neutral', className }: ChipProps) {
+  return (
+    <span
+      className={[
+        'cy-chip',
+        `cy-chip--${tone}`,
+        selected ? 'cy-chip--selected' : undefined,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}

package/kits/cyclorama/src/ComparePanel.md

@@ -0,0 +1,27 @@
+---
+category: Data
+---
+
+The mist panel — `--panel` at `--radius-lg` with hairline rows. Ink measures
+9.76:1 on it, so it is safe for body copy; it and `--surface` are the only two
+surfaces in the pack that are.
+
+It is the one place below the hero where a real fill appears, and it earns that
+because a comparison is the one thing that genuinely reads worse over a moving
+field: the eye has to hold two columns still to compare them.
+
+Every marked cell carries its **phrase**, not just its mark. A column of bare
+accent dots is a legend a reader with protanopia cannot use — the accent and the
+signal green sit 6.8 apart there, and see `StatusPill` for the rest of the
+numbers. It is also simply worse writing: "Battle-tested, scalable" argues,
+a dot does not.
+
+```tsx
+<ComparePanel
+  headings={['Build it yourself', 'With Codos']}
+  rows={[
+    { dimension: 'System architecture', without: 'Ad-hoc, experimental', with: 'Battle-tested, scalable' },
+    { dimension: 'ROI commitment', without: 'None', with: '10x+' },
+  ]}
+/>
+```

package/kits/cyclorama/src/ComparePanel.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react';
+
+export interface CompareRow {
+  /** The dimension being compared — the row's label. */
+  dimension: string;
+  /** The unmarked side: what happens without the product. */
+  without: string;
+  /** The marked side. Always rendered with its mark AND its words. */
+  with: string;
+}
+
+export interface ComparePanelProps {
+  rows: CompareRow[];
+  /** Column headings. Defaults to no header row at all. */
+  headings?: [string, string];
+  children?: ReactNode;
+  className?: string;
+}
+
+/**
+ * The mist panel — the one place below the hero where a real fill appears.
+ * `--panel` at `--radius-lg`, hairline rows, and one mark per row on the
+ * marked side.
+ *
+ * Ink measures 9.76:1 on `--panel`, so the panel is safe for body copy; it is
+ * the only surface in the pack besides `--surface` that is.
+ *
+ * The marked side always carries its phrase. A column of bare accent dots is a
+ * legend a reader with protanopia cannot use — see `StatusPill` for the
+ * measurements — and it is also just worse writing.
+ */
+export function ComparePanel({ rows, headings, children, className }: ComparePanelProps) {
+  return (
+    <section className={['cy-compare', className].filter(Boolean).join(' ')}>
+      <table className="cy-compare__table">
+        {headings !== undefined && (
+          <thead>
+            <tr>
+              <th />
+              <th>{headings[0]}</th>
+              <th>{headings[1]}</th>
+            </tr>
+          </thead>
+        )}
+        <tbody>
+          {rows.map((row) => (
+            <tr key={row.dimension}>
+              <th scope="row">{row.dimension}</th>
+              <td className="cy-compare__without">{row.without}</td>
+              <td className="cy-compare__with">
+                <i className="cy-compare__mark" aria-hidden="true" />
+                {row.with}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {children}
+    </section>
+  );
+}

package/kits/cyclorama/src/FieldStop.md

@@ -0,0 +1,29 @@
+---
+category: Foundations
+---
+
+The six stops of `ctaCycle`, each as a static surface.
+
+**The cycle itself does not cross into a design system.** A kit is the static
+half of a pack and motion stays behind in the pack — so what arrives here is not
+an animation but the six extremes, which is the more useful thing to design
+against anyway: a screen proved against stop 2 and stop 5 is proved against
+every frame between them.
+
+| Stop | Value | Note |
+|---|---|---|
+| 1 | `--field-1` | `0%`/`100%` — the rest stop; what a screenshot shows |
+| 2 | `--field-2` | the **darkest**: the pack's contrast floor, ink at 12.79:1 |
+| 3 | `--field-3` | blush |
+| 4 | `--field-4` | lilac |
+| 5 | `--field-5` | the lightest, ink at 14.67:1 |
+| 6 | `--field-6` | warm cream |
+
+Prove contrast against stop 2. Every ratio the pack claims is stated there,
+because a claim made against the friendliest stop is not a claim about the page.
+
+```tsx
+<FieldStop stop={2}>
+  <Heading>Most AI programs never reach the P&L.</Heading>
+</FieldStop>
+```

package/kits/cyclorama/src/FieldStop.tsx

@@ -0,0 +1,33 @@
+/**
+ * The six stops of `ctaCycle`, in the order it plays them. Stop 2 is the
+ * darkest and therefore the pack's contrast floor; stop 5 is the lightest.
+ */
+export type Stop = 1 | 2 | 3 | 4 | 5 | 6;
+
+export interface FieldStopProps {
+  stop?: Stop;
+  children?: import('react').ReactNode;
+  className?: string;
+}
+
+/**
+ * One named stop of the field cycle, rendered **static**.
+ *
+ * The cycle itself does not cross into a design system: a kit is the static
+ * half of a pack, and motion stays behind in the pack. What crosses is the six
+ * stops as six surfaces, so a design agent can lay a screen out against the
+ * real extremes instead of against one representative pink.
+ *
+ * Build against stop 2 when you need to prove contrast — every ratio the pack
+ * claims is stated there, because it is the worst of the six.
+ */
+export function FieldStop({ stop = 1, children, className }: FieldStopProps) {
+  return (
+    <div
+      className={['cy-field', `cy-field--${stop}`, className].filter(Boolean).join(' ')}
+      data-stop={stop}
+    >
+      {children}
+    </div>
+  );
+}