sheleg-design-skill 1.27.0 → 1.29.0

package/CHANGELOG.md

@@ -4,6 +4,160 @@ 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.29.0] - 2026-08-14
+
+A nineteenth pack, **`tenor`**, and the first one in the library extracted from a
+**hand-authored stylesheet** rather than a compiled bundle: <https://heytenor.com> ships
+33,822 bytes of CSS somebody wrote, so the token names, the ratios between them and the
+reasons they exist were all legible in the source instead of having to be reconstructed.
+
+### Added
+
+- **`styles/tenor.md` + `styles/tokens/tenor.css` — widened contract, all thirteen
+  headings.** Warm paper `#f7f6f2` under near-black ink at 17.61:1, **zero `border-radius`
+  and zero `box-shadow` in the entire reference**, and one border weight for the whole
+  system. The colour argument is the pack: at rest the page carries a single 25px orange
+  square, and every other appearance of the accent is a hover fill or the focus ring — a
+  page in this pack screenshots with no colour in it at all.
+- **Severity as value rather than hue.** The reference's guardrail chips settle it in one
+  row: ALWAYS ASK is the orange, LIMIT is a grey, NEVER is the ink, and the *word* carries
+  the meaning in all three. The pack ships `--sev-ask` / `--sev-limit` / `--sev-never` as
+  the primary system; `--warn` is the accent and `--danger` is the ink, so `--good`
+  `#296b46` is the only value in the pack the reference does not contain, and it is marked
+  DERIVED at its declaration.
+- **Type: two families, two weights, and tracking that runs both ways.** The sans is held
+  at weight 400 and tracks negative, tightening to `-0.065em` on the hero; the mono is 500
+  and tracks positive, opening to `0.12em` on the smallest label. Display line-height goes
+  **below one** — 0.91 at a `12ch` measure — which is what turns every heading into a
+  three- or four-line stack.
+- **`kits/tenor/` — the React reference kit**, the six-name spine plus seven signature
+  components: `Staircase` (the signature element, typed as a **four-tuple** so the value
+  ramp cannot grow a fifth rung), `SplitHeadline`, `Lattice` + `LatticeCell`, `FilmFrame`,
+  `Guardrail` and `Eyebrow`. Every breakpoint in `src/styles.css` is a `@container` query;
+  `FilmFrame` deliberately does not call `play()`, because the page owns the motion policy
+  and a kit is the static half of a pack.
+
+### Changed
+
+- **The library is nineteen packs**, and every counted claim moved with it: `SKILL.md`
+  (the routing table, the core-contract split — six of the nineteen, the other thirteen —
+  and the token-vocabulary note), `README.md`, `bin/cli.js`, `install.sh`, the three
+  manifests, the Cursor rule, the slash command, `MOBILE_SURFACES.md`,
+  `SURFACE_COMPOSITION.md` (`--accent` in seventeen packs, `@role non-text:` in thirteen of
+  the nineteen) and `DESIGN_SYNC_BRIDGE.md` (nineteen kits).
+- **`blueprint` and `roster` fork against it, reciprocally.** `blueprint` also refuses
+  radius outright and also builds from hairlines — the tell is the marks, since it draws
+  registration marks over a visible grid and `tenor` has neither. `roster` also spends one
+  orange on a light field and also forbids it from carrying a word — it argues *who
+  already uses you*, where `tenor` argues *how the work is organised*.
+- **`bin/cli.js` now names `ora` as well.** The enumeration gate had passed it since
+  1.28.0 because `ora` is a substring of `cyclorama` — the under-reporting the machine's
+  own notes warn about, found by the same check failing honestly on `tenor`.
+- **Ratchet floors raised** to 2294 / 1156 / 478, purely additive; all three self-tests
+  still catch every planted defect.
+
+### Six defects in the reference, recorded in the pack rather than copied
+
+- **`--ink-soft` is 4.16:1** on the paper and carries every lead paragraph at 16px, which
+  is not large text — short of AA by a margin no one notices and every audit finds.
+- **`--ink-faint` is 2.36:1** and carries the grey half of the hero headline at 40.8px to
+  74.4px, below even the 3:1 that large text is allowed.
+- **The accent clears its non-text floor by 0.02**, and contrast is symmetric — so a paper
+  label on an orange fill is the same 3.02:1. Both of the reference's orange-filled
+  elements put a label below the large-text threshold on it, including **every CTA at the
+  moment it is hovered**, where the label falls from 17.61:1 to 3.02:1.
+- **A variable font is loaded across two axes and used at one point**: Instrument Sans is
+  requested as `wdth,wght@75..100,400..600` against zero `font-stretch` declarations, zero
+  `font-variation-settings` and exactly one weight in 33,822 bytes.
+- **The mobile panel ships the pre-`dvh` viewport unit as its base** with a `@supports`
+  upgrade, so it jumps on every browser that lacks the upgrade.
+- **Seven display selectors carry hand-written `<br>` tags** whose visibility is then
+  managed at 620px, and one of them appears in both the hide rule and the re-show rule.
+
+## [1.28.0] - 2026-08-14
+
+> Authored and gated on its own, **released inside `v1.29.0`**: the `tenor` pack followed
+> it in the same session before a tag was cut, and splitting the two after the fact would
+> have produced an intermediate commit whose ratchet floors no longer matched its own
+> tree. There is no `v1.28.0` tag; this section is the record of what it added.
+
+An eighteenth pack, **`ora`**, extracted from a live reference rather than composed:
+<https://ora.ai> and <https://journey.ora.ai>, read from the shipped stylesheet
+`/_next/static/chunks/feb8eaf5618096ba.css` and the route bundles beside it. It is the
+first pack in the library whose **default theme is dark** — because that is the
+reference's own arrangement, which paints its dark values on
+`:root:not([data-theme=light])`, so an unattributed root is dark.
+
+### Added
+
+- **`styles/ora.md` + `styles/tokens/ora.css` — widened contract, all thirteen
+  headings.** A warm coal field, cream ink, and **no third hue**: the accent is the
+  inverted field, which the reference names out loud as
+  `--accent-signature` / `--accent-signature-foreground` and spends as
+  `bg-foreground text-background` on its one primary action. Both themes ship: coal
+  `#141210` with cream `#f7f2e5` at 16.72:1, paper `#f9f7f2` with `#1a1a1a` at 16.26:1.
+- **Two families and one of them is a serif doing the sans job.** `--font-sans`,
+  `--font-serif` and `--default-font-family` all resolve to Lora, so there is no sans
+  anywhere in the system; Space Mono carries every machine fact. The rule the pair
+  encodes — a serif means a person said it, mono means a machine reported it — is what
+  the whole page is read through, and the pack bans adding a sans for that reason.
+- **`kits/ora/` — the React reference kit**, the six-name spine plus six signature
+  components: `Verdict` (the signature element), `LayerBar`, `Terminal`, `StepLog`,
+  `SectionRule`, `StatusDot`. `src/styles.css` opens with the token layer byte for byte;
+  every breakpoint in it is a `@container` query, so no component is sized by the screen.
+- **The verdict numeral as the signature element.** One number in the display serif in
+  its grade colour, a hairline `/ 100` at half its size, and the letter plus the word
+  beneath. `grade` and `label` are **required props** on the component, which is the
+  palette rule made into an API: under deuteranopia `--good` and `--danger` separate by
+  6.5 in dark and 7.4 in light, below the 8.0 CVD floor, so the letter and the word are
+  what make the verdict legible.
+
+### Changed
+
+- **The library is eighteen packs**, and every counted claim moved with it: `SKILL.md`
+  (the routing table, the core-contract split — six of the eighteen, the other twelve —
+  and the token-vocabulary note), `README.md`, `bin/cli.js`, `install.sh`, the three
+  manifests, the Cursor rule, the slash command, `MOBILE_SURFACES.md`,
+  `SURFACE_COMPOSITION.md` (`--accent` in sixteen packs, `@role non-text:` in twelve of
+  the eighteen) and `DESIGN_SYNC_BRIDGE.md` (eighteen kits).
+- **`datasheet` and `manpage` fork against it, reciprocally.** Both are verdict-shaped
+  and both refuse a second family, so an agent reaching either first now learns the
+  distinction: `datasheet` when the artefact is a row of cells, `manpage` when the page
+  is documentation, `ora` when the artefact is a number with a grade and the reader must
+  be shown the raw response a machine received.
+- **Ratchet floors raised** to 2179 / 1095 / 464, purely additive; all three self-tests
+  still catch every planted defect.
+
+### Six defects in the reference, recorded in the pack rather than copied
+
+Named in `## Gotchas` because a pack extracted from a live site inherits its accidents
+unless someone reads them:
+
+- `--border-strong` is declared once in the light `:root` and never re-declared for
+  dark, so the reference paints a paper-coloured hairline at **12.02:1** on the coal
+  field. This pack ships a dark value of its own and marks it derived at the declaration.
+- `--shadow-pop` is a complete shadow in the app scope and a bare **colour** in the
+  journey scope. Copying the wrong one produces an invalid declaration, so the shadow
+  disappears silently rather than erroring.
+- The shadcn `--accent` is a raised **surface**, not an accent — an agent reading token
+  names alone concludes the pack has none.
+- Two dark greys in one product: warm coal `#141210` against neutral `#151515`, each
+  with its own ladder and its own accent.
+- Two radius systems: the proportional ladder off `--radius: .5rem`, and
+  `rounded-[7px]` / `rounded-[9px]` literals that sit on no ladder.
+- Four webfont families are loaded on `<html>` and two are referenced in the stylesheet;
+  the progress fill is animated with `transition-all`, which animates `width` and lays
+  out every frame.
+
+## [1.27.1] - 2026-08-13
+
+This project's own pipeline paperwork moved from `docs/superpowers/` to
+`docs/evidence/`, following `task-pipeline` v1.53.0, which renamed the default and made
+the root resolvable. **A patch, deliberately: nothing a consumer of this skill can see
+changed.** The directory, this repository's own validator paths and its CI plants moved
+together; the records inside the directory were NOT rewritten — a brief describes where
+things were when it was written.
+
 ## [1.27.0] - 2026-08-13
 
 A ban that said "no side-stripe accent borders" was measured against a real consumer for

package/README.md

@@ -11,7 +11,7 @@ problem — invented colors, six accent hues, dark mode retrofitted later.
 
 This skill is the taste layer. It gives a coding agent **one motion
 methodology** for cinematic, scroll-driven pages, **a motion doctrine** that
-decides whether to animate before it decides how, and **seventeen locked style
+decides whether to animate before it decides how, and **nineteen locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -62,6 +62,8 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `manpage` | cream paper under the reader's own system monospace — zero webfont bytes for the display face — a 48px display that never grows louder, a 576px argument column, coral label chips that are real `<h2>`s, `└` tree glyphs in their own grid column, and one dark code frame as the focal point | developer products whose buyer reads code — APIs, SDKs, CLIs, MCP servers, developer infrastructure, where the honest hero is the call itself |
 | `pigeonhole` | a white field ruled by hairlines, a display face that never passes weight 400 with exactly one italic word, and **nine categories in which a hue is the category**, drawn from an eleven-ramp pastel system — each rendered as a two-layer chip, 8px outside and 7px inside, whose label word is mandatory because the hue cannot carry the meaning alone | products whose job is to sort the reader's incoming mess into named categories — email triage, ticket routing, notification digests, file organisers, CRM inboxes |
 | `roster` | a white field in a faint grid of squares, hairlines instead of shadows, a display set in the **body** face while the section heads take another, and one orange that may never carry a word | products whose argument is **who already carries them** — AI-search and GEO visibility, SEO and content platforms, agencies, marketplaces, integration-led tooling |
+| `ora` | a warm coal field with cream ink and **no third hue** — the accent is the inverted field, so the one solid object on a page is the one meant to be pressed — a serif doing the sans job over a monospace that carries every machine fact, a terminal surface cut *below* the page plane, a six-step verdict ramp, and dark as the default theme rather than the option | products whose output is **a machine's verdict about the reader** — agent-readiness and crawlability scores, SEO and answer-engine audits, agent-run traces, MCP and protocol surfaces, bot observability |
+| `tenor` | warm paper with **zero radius and zero shadow anywhere**, a single hairline weight assembling every lattice, and one orange that exists only on hover and on focus — so the page screenshots with no colour in it at all — a sans held at weight 400 and tracked negative against a mono tracked positive, display at a line-height below one in an eight-to-twelve-character measure, and proof delivered as silent looping video in a 1px rectangle | products arguing a **management thesis** — that a new kind of thing has to be run like an existing organisation: AI-workforce and agent-operations platforms, autonomous back-office, revenue and sales operations, sold to the director who will have to manage it |
 
 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
@@ -136,7 +138,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 seventeen style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The nineteen 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` and `field-notes` each ship 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 |
 
@@ -207,7 +209,7 @@ cd ./ds-workbench && npm install && npm run build
 then `/design-sync` in that directory, from Claude Code. Three layers cross: the
 pack's **bans** as the design system's own README, `styles.css` built from
 `tokens/<pack>.css` verbatim, and the components — a six-name spine that is
-identical in all seventeen kits, so switching packs swaps identity rather than API,
+identical in all nineteen kits, so switching packs swaps identity rather than API,
 plus each pack's signature parts. **Motion does not cross**, exactly as it does
 not cross into Figma: a kit is the static half of a pack, and saying so is what
 stops an agent inventing motion to fill the silence.
@@ -253,7 +255,7 @@ a pack's four widened sections used to make two gates *quieter* and still green.
 One honest limit: the npx installer is checked by asserting its runtime bundle
 walker exists, not by reading a file list — it has none by design. What proves
 it ships the right files is CI, which installs the bundle through **both**
-installers and `diff -r`s the result against the source, then builds all seventeen
+installers and `diff -r`s the result against the source, then builds all nineteen
 kits.
 
 `test/scenarios.md` (T1–T19) is the behavioral harness: fresh subagents given a

package/bin/cli.js

@@ -234,7 +234,7 @@ ${c("bold", "What it installs")}
   DESIGN_SYNC_BRIDGE.md   the Claude Design contract (what a pack sends, and
                        what does not cross)
   AI_PRODUCT_PATTERNS.md  chat / agent / streaming surfaces (honest state)
-  styles/              seventeen style packs — instrument-console (dark console),
+  styles/              nineteen 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
@@ -251,7 +251,11 @@ ${c("bold", "What it installs")}
                        pigeonhole (a white sorting wall whose nine pastel
                        categories are a filing scheme, one hue each),
                        roster (a white wall of other people's marks: the proof
-                       is a name rather than a number) —
+                       is a name rather than a number), ora (a warm coal field
+                       whose accent is the inverted field, a serif over mono,
+                       and a terminal cut below the page), tenor (warm paper at
+                       zero radius and zero shadow, one orange that exists only
+                       on hover, and proof delivered as silent looping video) —
                        plus a ready-made token CSS per pack and
                        STYLE_PACK_TEMPLATE.md for authoring more
 `);

package/cursor/rules/sheleg-design.mdc

@@ -43,7 +43,16 @@ that file the reader's incoming mess into named categories; roster — a white
 field in a faint grid of squares whose whole argument is other people's
 marks, with client logotypes in pill-labelled industry columns and an
 engine's wordmark inside the headline, for products sold on who already
-carries them);
+carries them; ora — a warm coal field with cream ink and no third hue, where
+the accent is the inverted field, a serif carries every human sentence and a
+monospace every machine fact, and a terminal surface is cut below the page,
+for products whose output is a machine's verdict about the reader; tenor — warm
+paper with zero radius and zero shadow, one hairline weight, an orange that
+exists only on hover and on focus, a sans at weight 400 tracked negative
+against a mono tracked positive, display at a line-height below one in an
+eight-to-twelve-character measure, and proof delivered as silent looping
+video, for products arguing that a new kind of thing must be managed like an
+existing organisation);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

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

@@ -0,0 +1,14 @@
+{
+  "pkg": "@sheleg-design/ora",
+  "globalName": "ShelegOra",
+  "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/ora/.design-sync/conventions.md

@@ -0,0 +1,61 @@
+# Ora — the design contract
+
+The reference is <https://ora.ai> and <https://journey.ora.ai> (era labs), read
+2026-08-14 from the shipped stylesheet `/_next/static/chunks/feb8eaf5618096ba.css` and
+the route bundles beside it. The full pack is `styles/ora.md`; this file is what a
+design agent must not get wrong.
+
+## The one thing this pack is
+
+**A page that tells a person what a machine concluded about them.** A warm coal field,
+cream ink, and no third hue — the accent is the inverted field. A serif carries every
+human sentence and a monospace every machine fact. The only surface that leaves the
+page plane goes *down*, into a terminal block cut below the field.
+
+## Non-negotiable
+
+- **There is no brand colour.** `--accent` is the ink: cream on coal, near-black on
+  paper, 16.72:1 and 16.90:1 on their own fields. One filled element per view. A second
+  filled button is a design error, not a variant.
+- **No sans-serif.** `--font-sans`, `--font-serif` and the default family all resolve to
+  Lora in the reference. Adding a real sans dismantles the rule the whole page is read
+  through: a serif means a person said it, mono means a machine reported it.
+- **Status is never by colour alone.** Every dot, bar and number in a status colour
+  carries its word; the six-step grade ramp carries its letter. Under deuteranopia
+  `--good` and `--danger` separate by 6.5 in dark and 7.4 in light, and under protanopia
+  `--good` and `--warn` by 6.4 in light. In the light theme `--good` (2.13:1) and
+  `--warn` (2.01:1) are below the non-text floor on paper and may not set text at all.
+- **Elevation is a hairline.** `--border` at 1.15:1 is a seam. Shadows exist for things
+  that float over the page — overlays, popovers, tooltips — and a card does not float.
+- **The terminal is darker than the page**, in both themes, and never carries a shadow.
+- **One radius root.** `--radius: 0.5rem`, and every other radius is a ratio of it:
+  chip ×0.5, control ×1, card ×1.5, plus the pill. Do not add a step.
+- **A layer that does not apply is hatched and reads `N/A`.** Never an empty bar — an
+  empty bar reads as zero, which is a different verdict about the same product.
+- **Motion is entrance, hover and two ambient loops.** No scroll-jacking, no parallax,
+  no `animation-timeline`, no scroll library — zero occurrences of any of them in the
+  reference's shipped bundles. Scroll drives two things only: the sticky nav's 1px
+  hairline shadow and one pinned two-panel comparison. Hover changes colour, border and
+  opacity and never geometry. Under reduced motion every duration token collapses to
+  zero and the page keeps every value it was showing.
+- **Numbers are `tabular-nums`, always.** A count that changes while the reader watches
+  must not reflow.
+
+## What this kit is not
+
+It is the **static half** of the pack. The hero's breathing glows, the drifting agent
+marks and the scroll-pinned comparison section are page-level motion and do not cross
+into a component library. Nothing here invents motion to fill that silence.
+
+## The traps the reference itself carries
+
+Four of them, so a design agent does not reproduce them from a screenshot:
+
+1. `--border-strong` is never re-declared for dark, so the reference paints a
+   paper-coloured hairline at 12.02:1 on coal. This kit ships a dark value of its own.
+2. `--shadow-pop` is a complete shadow in one scope and a bare colour in the other.
+   Here it is always complete.
+3. The reference's shadcn `--accent` is a raised *surface*, not an accent. The real one
+   is `--accent-signature`, which points at the foreground.
+4. The progress fill is animated with `transition-all`, which animates `width` and lays
+   out every frame. Here it is `transform: scaleX()` from a left origin.

package/kits/ora/README.md

@@ -0,0 +1,43 @@
+# @sheleg-design/ora
+
+The React reference kit for the SHELEG **Ora** style pack — a warm coal field with cream
+ink and no third hue, where the accent is the inverted field, a serif carries every human
+sentence and a monospace every machine fact, and the only surface that leaves the page
+plane goes down, into a terminal block cut below the field.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens with
+`styles/tokens/ora.css` byte for byte, and the rules the design agent must obey are in
+[`.design-sync/conventions.md`](./.design-sync/conventions.md).
+
+```bash
+npm install && npm run build
+```
+
+Then run `/design-sync` in Claude Code from this directory to push it to
+claude.ai/design.
+
+## The spine, and this pack's six
+
+`Button`, `Card`, `Chip`, `Stat`, `Heading` and `Rule` are identical in name, props and
+types across every SHELEG kit — switching packs swaps identity, not API.
+
+| Component | What it is |
+|---|---|
+| `Verdict` | one number in the display serif, in its grade colour, with the letter and the word beneath — the **signature element** |
+| `LayerBar` | the weighted score bar, where a layer that does not apply is hatched and reads `N/A` rather than empty |
+| `Terminal` | the surface below the page plane: raw machine output, `white-space: pre`, and never a shadow |
+| `StepLog` | the loading idiom — one mono line per step, appended as it happens, the caret on the running line |
+| `SectionRule` | the band between sections: a squiggle through a hairline strip with a numbered label knocked out over it |
+| `StatusDot` | a 6px dot and its word, where the word is a required prop |
+
+## Theme
+
+Dark is the default, because it is the default in the reference. Set
+`data-theme="light"` on `:root` for the twin; both are declared in the token block at the
+top of `src/styles.css`.
+
+## What is not here
+
+The hero's breathing glows, the drifting agent marks and the scroll-pinned comparison
+section are page-level motion. A kit is the static half of a pack, and inventing motion
+to fill that silence is the failure this note exists to prevent.

package/kits/ora/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@sheleg-design/ora",
+  "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/ora/src/Button.md

@@ -0,0 +1,21 @@
+---
+category: Actions
+---
+
+`primary` is the **inverted field**: `--accent` is the ink, so the button is a solid
+cream slab on coal and a solid near-black slab on paper, and the label takes
+`--accent-ink`. At 16.72:1 in dark and 16.90:1 in light it is the highest-contrast
+object on the page, which is why the pack allows **one per view**.
+
+Hover is the reference's own: the fill drops to 90% opacity. Nothing translates,
+scales or lifts — this pack does not press.
+
+`secondary` is a hairline over `--surface-raised`; its hover moves the **border** to
+`--border-strong` and leaves the fill where it is. `ghost` is mono, `--muted`, and
+gains `--ink` on hover.
+
+```tsx
+<Button>Run</Button>
+<Button variant="secondary">Rescan</Button>
+<Button variant="ghost">View logs</Button>
+```

package/kits/ora/src/Button.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+export interface ButtonProps {
+  /** `primary` is the accent fill — at most one per view. */
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  onClick?: () => void;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  onClick,
+  children,
+  className,
+}: ButtonProps) {
+  return (
+    <button
+      type="button"
+      className={['ora-btn', `ora-btn--${variant}`, `ora-btn--${size}`, className]
+        .filter(Boolean)
+        .join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

package/kits/ora/src/Card.md

@@ -0,0 +1,19 @@
+---
+category: Surfaces
+---
+
+`--surface` inside a 1px `--border`, at `--radius-card`. The border is 1.15:1 against
+the field: a seam, not a line. There is no shadow, because a card does not float —
+`--shadow-pop` exists for overlays and nothing else.
+
+A row of facts inside a card is separated by a top border and padding, never by a
+nested card. Three equal blocks share **one** card with internal dividers.
+
+The head sizes against its **container** (`container-type: inline-size`), so a card in a
+narrow column wraps its title and meta instead of overflowing.
+
+```tsx
+<Card title="Can an agent discover and trust you?" meta="5/100">
+  …
+</Card>
+```

package/kits/ora/src/Card.tsx

@@ -0,0 +1,24 @@
+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;
+}
+
+export function Card({ title, meta, children, className }: CardProps) {
+  const head = title !== undefined || meta !== undefined;
+  return (
+    <section className={['ora-card', className].filter(Boolean).join(' ')}>
+      {head && (
+        <div className="ora-card__head">
+          {title !== undefined && <h3 className="ora-card__title">{title}</h3>}
+          {meta !== undefined && <span className="ora-card__meta">{meta}</span>}
+        </div>
+      )}
+      <div className="ora-card__body">{children}</div>
+    </section>
+  );
+}

package/kits/ora/src/Chip.md

@@ -0,0 +1,16 @@
+---
+category: Data
+---
+
+`--radius-chip` (4px, the root radius halved), a 1px border and mono at 11px in
+`--muted`. Hover moves the border and the text toward `--accent`; `selected` completes
+the move.
+
+A chip that reports a status carries a `StatusDot` **and** the word. A chip is never a
+button: if it triggers something, it is a `Button` with `variant="ghost"`.
+
+```tsx
+<Chip>find pricing</Chip>
+<Chip selected>create an account</Chip>
+<Chip tone="accent">MCP</Chip>
+```

package/kits/ora/src/Chip.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+export interface ChipProps {
+  children: ReactNode;
+  selected?: boolean;
+  tone?: 'neutral' | 'accent';
+  className?: string;
+}
+
+export function Chip({ children, selected = false, tone = 'neutral', className }: ChipProps) {
+  return (
+    <span
+      className={[
+        'ora-chip',
+        `ora-chip--${tone}`,
+        selected ? 'ora-chip--selected' : undefined,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}

package/kits/ora/src/Heading.md

@@ -0,0 +1,15 @@
+---
+category: Foundations
+---
+
+The display face is **Lora, a serif doing the sans job** — `--font-sans` and
+`--font-serif` resolve to the same family in the reference, so there is no sans in this
+pack. Every heading is weight 400; the prose ramp never leaves regular.
+
+Level 1 is the display step and takes the fluid clamp; 2 and 3 are fixed. A heading is
+never set in mono: mono means a machine reported it.
+
+```tsx
+<Heading level={1}>Watch top agents use your site</Heading>
+<Heading level={2}>Quick answers</Heading>
+```

package/kits/ora/src/Heading.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+export interface HeadingProps {
+  /** 1 = page title (28px), 2 = section (20px), 3 = card title (15px). */
+  level?: 1 | 2 | 3;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Heading({ level = 2, children, className }: HeadingProps) {
+  const Tag = `h${level}` as 'h1' | 'h2' | 'h3';
+  return (
+    <Tag
+      className={['ora-heading', `ora-heading--${level}`, className].filter(Boolean).join(' ')}
+    >
+      {children}
+    </Tag>
+  );
+}

package/kits/ora/src/LayerBar.md

@@ -0,0 +1,26 @@
+---
+category: Signature
+---
+
+The weighted score bar: one segment per scoring layer, each sized by the points it can
+contribute, each carrying its own tone, its name and its raw fraction.
+
+**A layer that does not apply is hatched and reads `N/A`.** It is never drawn as an
+empty track, because an empty track reads as zero — a different verdict about the same
+product, and the one failure this component exists to prevent.
+
+The fill animates with `transform: scaleX()` from a left origin. Do not animate its
+width; the reference does, with `transition-all`, and lays out every frame.
+
+The legend sizes against its **container** and stacks below 380px.
+
+```tsx
+<LayerBar
+  segments={[
+    { label: 'Discovery', score: 2, outOf: 20, tone: 'bad' },
+    { label: 'Access', score: 23, outOf: 30, tone: 'good' },
+    { label: 'Usability', score: 29, outOf: 40, tone: 'warn' },
+    { label: 'Payments', score: null, outOf: 10, tone: 'na' },
+  ]}
+/>
+```