sheleg-design-skill 1.34.0 → 1.35.0

package/CHANGELOG.md

@@ -4,6 +4,122 @@ 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.35.0] - 2026-08-15
+
+**The twenty-first pack, and two counts that had been wrong for eight releases.**
+`ledger` was extracted from `basedash.com` — a warm cream console for a product
+that answers questions about data. Adding it walked the library past twenty for
+the first time, which is where two gates turned out to have been counting with a
+table that stopped at twenty and a regex that read one modifier word.
+
+### Added
+
+- **`ledger` — style pack 21 (widened contract, standalone product UI).** Warm
+  cream field `#fcf9f5` under `#14100c` ink, elevation as a **1px hairline at 12%
+  ink and no shadow on any card**, the reference's ×1.25 radius ramp nested
+  concentrically (a 15px track with 4px of padding holds a 10px thumb), an **ink**
+  primary button, and a terracotta `#c2410c` that **never fills a control** — of
+  eleven accent-coloured elements on the reference, five are a 10px monospace
+  uppercase kicker and none is a button. 32px data rows in the system monospace;
+  the large figure on a stat tile is the UI face at 34px, not the mono, which is
+  what the reference actually does. Light `:root` plus a `[data-theme="dark"]`
+  twin whose alpha ramp is a different set of steps rather than the light one
+  inverted.
+  - **Signature element: the seal in a card's title row** — `Verified` /
+    `Inferred` / `Unverified`, linking to the proof. It is
+    `AI_PRODUCT_PATTERNS.md` §4's provenance tag applied to a card instead of a
+    span, and it maps onto three tokens the pack already ships, so implementing
+    it adds no hue.
+  - **`--warn` is derived and says so at the declaration**, per the template's
+    rule 3: the reference declares an amber in its theme layer and never paints a
+    warning. The step differs per theme because at amber-500 the *dark* accent and
+    the warning are 7.1 apart at full colour — one colour with two meanings, below
+    the hard floor. amber-300 is 16.2 apart and clears every dichromacy.
+  - **`--chart-1` … `--chart-5` are named for shadcn/ui**, so a Recharts series
+    reads the pack's chart ramp through `ChartConfig` with no adapter.
+- **`kits/ledger`** — twelve components: the six-name spine plus `Seal`,
+  `Kicker`, `DataTable`, `SegmentedControl`, `StatusDot` and an `EmptyState` that
+  carries the capability and two runnable example questions.
+
+### Fixed
+
+- **The counted-claims gate could not count past twenty.** `NUMBER_WORDS` stopped
+  there, so every correct "twenty-one packs" was read as **"one packs"** and
+  failed, in nine files at once. The table now runs to thirty, the alternation is
+  longest-first, and a lookbehind refuses a match that starts mid-compound. Two
+  planted-defect fixtures had the same hyphen blindness and one of them had
+  stopped mutating anything — a plant that changes nothing reports BROKEN, which
+  is how it was found.
+- **A count with two modifier words was never read as a count at all.** The regex
+  allowed one of `visual `/`style `, and both manifests say "pluggable **visual
+  style** packs". Widening it to `*` immediately surfaced two stale numbers: the
+  plugin description said **twenty** on the day twenty-one shipped, and
+  `marketplace.json`'s own top-level description had said **thirteen** since the
+  thirteenth pack — eight releases, in the two files an agent host reads first.
+- **The core-contract paragraph's two regexes matched `\w+`**, so a hyphenated
+  total failed to parse and the check reported the paragraph missing rather than
+  wrong.
+
+### Known limitation
+
+- `validate_pack_enumerations` tests membership by **substring**, so `ledger`
+  passed in four files that merely described `scoreboard` as carrying "a dark
+  ledger". The four were filled in by hand and are now genuinely exhaustive; the
+  check that would have caught it — a name in a context that routes to it — is
+  not written.
+
+## [1.35.0] - 2026-08-15
+
+**A twenty-second pack, and the reference it was asked for did not survive measurement.**
+The request was "a pack in the style of taskip.net". Taskip turned out to be WordPress and
+Elementor over a bought theme (Xilancer), carrying **three token systems that disagree** —
+the theme's declared primary `#6074f6` appears nowhere on the rendered page, the visible
+emerald lives in a second sheet, and a third set of values is Tailwind slate. Twelve radius
+values, six shadows, seven weights, four font families, and `.3s` / `0.3s` / `300ms` written
+as three different things. That is a page-builder output, not a vocabulary, and this library
+exists on the premise that a pack is the reference's own vocabulary rather than a
+reconstruction of one. It was declined as a source and the register was re-sourced instead.
+
+### Added — `awning`, the twenty-second pack
+
+Origin: <https://www.shopify.com>, read 2026-08-15 from the served HTML plus its six linked
+stylesheets. Chosen after measuring five candidates on the same axes; it was the only one
+that paired the register with a real system.
+
+- **The accent is black, and it is a resolved chain rather than a stylistic absence.**
+  `--color-component-button-primary-bg` → `--color-theme-bg-cta` → `#000`, with hover, active
+  and disabled declared beside it. No hue reaches the chrome at all, which is what leaves
+  every colour on the page belonging to the product screenshot inside it.
+- **A three-tier token layer** — primitives, semantic roles, per-component states — so the
+  pack ships the indirection rather than the resolved values. `--radius-component-button:
+  var(--radius-theme-full)` is the only place the system says *why* a button is a pill.
+- **420 and 550, and no 700 anywhere.** A variable grotesque used as one. Setting a heading
+  in 700 here is not a small deviation; it is the one number the system was built to avoid.
+- **Tracking crosses zero inside one family** — negative on the display ramp, positive on the
+  body ramp, crossover around 1.375rem — where most packs in this library split tracking
+  across two faces.
+- **Leading ships paired with size in `rem`**, not as a ratio, and the ratio *changes* down
+  the ramp: 1.08 at display, 1.12 at t2, 1.30 at t7.
+- **One shadow, three layers** — ambient, contact, and a `0 0 2px` hairline edge that is what
+  stops a card dissolving on pure white. That third layer is the one people drop when they
+  copy a shadow by eye.
+- Six Gotchas, three of them defects in the reference: `--ink-faint` at **4.40:1 on the
+  system's own second field**; three eases named as tokens against **ten unnamed inline
+  durations**; and `ease-in` shipped as a token while the doctrine bans it in UI.
+- Routed through all seven surfaces the validator checks, mirrored to `.cursor`, added to
+  `install.sh`, and shipped with `kits/awning` — the six-name spine on the canonical API plus
+  `ProductFrame`, `PlanCard` and `FeatureRow`.
+
+### Fixed
+
+- `paperclip` and `showroom` now link **back** to `awning`. The validator caught the one-way
+  fork: a neighbour reference that only points one direction is a dead end for anyone who
+  reaches the other pack first.
+- Nine stated counts moved from twenty-one to twenty-two across `SKILL.md`, `README.md`,
+  `package.json`, both manifests, `bin/cli.js`, `MOBILE_SURFACES.md`, `SURFACE_COMPOSITION.md`
+  and `DESIGN_SYNC_BRIDGE.md`, plus core-contract packs from six to seven. Every one was
+  caught by the gate rather than remembered.
+
 ## [1.34.0] - 2026-08-15
 
 **The pack was applied correctly and the result still read as somebody else's typography.**

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 **twenty locked style
+decides whether to animate before it decides how, and **twenty-two locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -65,6 +65,8 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `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 |
 | `paperclip` | neutral coal with **no functional colour at all** — every control monochrome, elevation made of hairlines, and the whole chromatic budget spent on a curtain of 96 gradient capsules and twelve gradient section badges that cannot be clicked — a tight grotesque over a plain one over a monospace, and the capsule as the shape of everything from a button to a 10 × 20 schedule tick | products that ask a person to **run something that runs itself** — agent teams and orchestrators, autonomous back-office, schedulers, job runners, budget-governed compute |
+| `awning` | white forecourt where **the accent is black** and no hue reaches the chrome at all; a pill whose radius is a declared component token, one variable grotesque at **420 / 550 with no 700**, two rule weights and a single three-layer shadow | commerce and platform front doors — the surface that sells a system other businesses will run their storefront, payroll, billing or logistics on |
+| `ledger` | warm cream paper where elevation is a **1px hairline at 12% ink** and no card casts a shadow, radii of 7.5/10/15/20 nested concentrically, an **ink** primary button, and a terracotta accent forbidden from filling any control — it labels, as a 10px monospace uppercase kicker — over 32px data rows, with a seal on every card stating how its number is known | the console of a product that answers questions **about data** — AI analysts, BI surfaces, query workspaces, agents that read a warehouse and write back a figure |
 
 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
@@ -139,7 +141,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 twenty style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The twenty-two 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 |
 
@@ -210,7 +212,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 twenty kits, so switching packs swaps identity rather than API,
+identical in all twenty-two 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.
@@ -256,7 +258,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 twenty
+installers and `diff -r`s the result against the source, then builds all twenty-two
 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/              twenty style packs — instrument-console (dark console),
+  styles/              twenty-two 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
@@ -258,7 +258,14 @@ ${c("bold", "What it installs")}
                        on hover, and proof delivered as silent looping video),
                        paperclip (neutral coal with no functional colour at all
                        and one curtain of gradient capsules that cannot be
-                       clicked, for products that run themselves) —
+                       clicked, for products that run themselves),
+                       ledger (warm cream paper ruled by a hairline at 12% ink,
+                       an ink primary button, a terracotta that only labels, and
+                       a seal on every card saying how its number is known),
+                       awning (a white forecourt where the accent is black and
+                       no hue reaches the chrome, a pill whose radius is a
+                       declared component token, and one variable grotesque at
+                       420/550 with no 700) —
                        plus a ready-made token CSS per pack and
                        STYLE_PACK_TEMPLATE.md for authoring more
 `);

package/cursor/rules/sheleg-design.mdc

@@ -56,7 +56,15 @@ existing organisation; paperclip — neutral coal with no functional colour
 anywhere, every control monochrome and elevation made of hairlines, the whole
 chromatic budget spent on a curtain of gradient capsules and a row of gradient
 section badges that cannot be clicked, for products that ask a person to run
-something that runs itself);
+something that runs itself); ledger — warm cream paper where elevation is a
+hairline at 12% ink and no card casts a shadow, an ink primary button and a
+terracotta that never fills a control but labels in 10px monospace uppercase,
+over 32px data rows, with a seal on every card saying how its number is known,
+for the console of a product that answers questions about data);
+awning — a white forecourt where the accent is black and no hue reaches the
+chrome at all, a pill whose radius is a declared component token, one variable
+grotesque at 420/550 with no 700, two rule weights and a single three-layer
+shadow, for commerce and platform front doors);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

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

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

@@ -0,0 +1,34 @@
+# Awning — the rules this design system is built on
+
+A pure white forecourt for a product other businesses will run their own
+business on. **The accent is black.** No hue reaches the chrome at all, which is
+what leaves every colour on the page belonging to the thing being sold.
+Extracted from a production reference (shopify.com, 2026-08-15) whose delivered
+CSS carries a real three-tier token system; the full pack, with every
+measurement and every trap, is `styles/awning.md` in the sheleg-design skill.
+
+**This is the static half of a pack.** Motion does not cross this boundary:
+build screens from these components, never a scroll narrative around them.
+
+## Bans — what this system never does
+
+- **No accent hue.** Not on a button, a link, a tab, a badge or a focus ring.
+  The primary action is black; the moment chrome takes a colour, the screenshot
+  inside it stops being the only colourful thing on the page.
+- **No weight of 700.** Body is **420** and bold is **550**, both off the
+  standard axis and both reachable only because the face is variable. Setting a
+  heading in 700 is the one number this system was built to avoid.
+- **No second shadow.** One three-layer token — ambient, contact, and a hairline
+  edge that keeps a card legible on pure white. Dropping the third layer is why
+  a copied card floats without sitting.
+- **No `clamp()` in the type layer.** Size and leading ship as a paired `rem`
+  value so they cannot drift; a fluid step breaks the pair.
+- **Status is never by colour alone.** The derived red and green collapse toward
+  each other under deuteranopia at a measured 5.2 against a floor of 8.0, so
+  every state carries its word.
+
+## The two shapes
+
+Surfaces take the radius scale — `0.375 / 0.5 / 0.75 / 1rem`. **Buttons take
+`--radius-full`,** and they take it through `--radius-button`, which is the only
+place the system says why a button is a pill. Keep the indirection.

package/kits/awning/README.md

@@ -0,0 +1,15 @@
+# @sheleg-design/awning
+
+The static half of the SHELEG **Awning** style pack — a white forecourt where the
+accent is black and no hue reaches the chrome.
+
+Extracted from a production reference (shopify.com, read 2026-08-15). The full
+pack, with every measurement and every trap, is
+`styles/awning.md` in the sheleg-design skill.
+
+```bash
+npm install && npm run build
+```
+
+`src/styles.css` opens with `styles/tokens/awning.css` copied byte for byte;
+everything under `/* ── components ── */` consumes `var(--…)` only.

package/kits/awning/package.json

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

@@ -0,0 +1,23 @@
+---
+category: Actions
+---
+
+The primary button is a **black pill**. Its radius comes from `--radius-button`,
+which points at `--radius-full` — the indirection is the only place the system
+says why a button is that shape, so keep it rather than writing `9999px`.
+
+Hover changes **two** properties: the fill lightens to `--accent-hover` and the
+label moves to `--accent-ink-hover`. Moving only the fill reads as a lightening;
+moving both reads as a press. `secondary` is transparent at every state — fill,
+hover, active and disabled alike — so its whole identity is the border and the
+label, which is why this pack ships two rule weights.
+
+Disabled is a **value**, not an opacity: `--accent-disabled` fill with
+`--accent-ink-disabled` content. Nothing in this system fades, so a disabled
+control keeps its edges and stays measurable.
+
+```tsx
+<Button onClick={start}>Start free trial</Button>
+<Button variant="secondary" onClick={demo}>Watch the demo</Button>
+<Button variant="ghost" size="sm" onClick={more}>Compare plans</Button>
+```

package/kits/awning/src/Button.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+export interface ButtonProps {
+  /** `primary` is the BLACK pill — the accent, and there is no hue in the control set. */
+  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={['aw-btn', `aw-btn--${variant}`, `aw-btn--${size}`, className]
+        .filter(Boolean)
+        .join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

package/kits/awning/src/Card.md

@@ -0,0 +1,18 @@
+---
+category: Surfaces
+---
+
+`raised` carries the system's **one** shadow — three layers: a wide ambient, a
+close contact, and a `0 0 2px` hairline edge. That third layer is what people
+drop when they copy a shadow by eye, and dropping it is why a copied card floats
+on white without sitting on it. There is no second shadow and no elevation
+scale, so a card that needs to feel heavier needs a different layout, not a
+bigger blur.
+
+`flat` sits on `--bg-deep` with no shadow — use it when cards are tiled and the
+shadows would otherwise stack into noise.
+
+```tsx
+<Card><Heading level={3}>Point of sale</Heading><p>Sell anywhere.</p></Card>
+<Card elevation="flat" radius="2xl">…</Card>
+```

package/kits/awning/src/Card.tsx

@@ -0,0 +1,23 @@
+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) {
+  return (
+    <div className={['aw-card', className].filter(Boolean).join(' ')}>
+      {title ? (
+        <div className="aw-card__head">
+          <span className="aw-card__title">{title}</span>
+          {meta ? <span className="aw-card__meta">{meta}</span> : null}
+        </div>
+      ) : null}
+      {children}
+    </div>
+  );
+}

package/kits/awning/src/Chip.md

@@ -0,0 +1,22 @@
+---
+category: Data
+---
+
+A chip is a **pill**, like the button — this system has two shapes and a chip
+takes the round one.
+
+`accent` is the **ink** fill, not a hue: this pack has no colour to tint a chip
+with, so a selected or emphasised chip inverts exactly as the primary button
+does. That constraint is the register rather than a limitation — it is what
+keeps every colour on the page belonging to the product screenshot.
+
+Where a chip must carry a *state*, put the word in it and take the colour from
+`--good` / `--warn` / `--danger` in your own rule. Those three are derived, and
+the red and the green collapse toward each other under deuteranopia at a
+measured 5.2 against a floor of 8.0 — so the word is the primary encoding and
+the colour is the second. A status chip with no word is a bug here.
+
+```tsx
+<Chip>Draft</Chip>
+<Chip tone="accent" selected>Monthly</Chip>
+```

package/kits/awning/src/Chip.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+export interface ChipProps {
+  children: ReactNode;
+  selected?: boolean;
+  /** `accent` is the INK fill — this pack has no hue to tint a chip with. */
+  tone?: 'neutral' | 'accent';
+  className?: string;
+}
+
+export function Chip({ children, selected = false, tone = 'neutral', className }: ChipProps) {
+  return (
+    <span
+      className={['aw-chip', `aw-chip--${tone}`, selected ? 'aw-chip--selected' : undefined, className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}

package/kits/awning/src/FeatureRow.md

@@ -0,0 +1,15 @@
+---
+category: Signature
+---
+
+The catalogue unit. This register's page is long and sectioned, and a buyer
+scrolls it to **compare** — so a capability is a row with a title and one
+paragraph, not a card with an illustration. Rows are separated by `Rule`, never
+by a gap alone, and the paragraph sits in `--ink-soft` because `--ink-faint`
+does not clear AA on the second field.
+
+```tsx
+<FeatureRow index="01" title="Checkout">
+  The fastest checkout on the internet, and it converts.
+</FeatureRow>
+```

package/kits/awning/src/FeatureRow.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+export interface FeatureRowProps {
+  title: string;
+  children: ReactNode;
+  /** A short mono index — `01`, `02` — when the row belongs to an ordered set. */
+  index?: string;
+  className?: string;
+}
+
+export function FeatureRow({ title, children, index, className }: FeatureRowProps) {
+  return (
+    <div className={['aw-feature', className].filter(Boolean).join(' ')}>
+      {index ? <span className="aw-feature__index">{index}</span> : null}
+      <div className="aw-feature__body">
+        <span className="aw-feature__title">{title}</span>
+        <p className="aw-feature__text">{children}</p>
+      </div>
+    </div>
+  );
+}

package/kits/awning/src/Heading.md

@@ -0,0 +1,15 @@
+---
+category: Foundations
+---
+
+Three steps off the reference's nine-step title ramp. Each carries its **paired**
+size and leading — `3.5rem / 3.78rem`, `2.75rem / 2.97rem` — because the system
+ships them as one token so they cannot drift apart. Do not substitute a ratio.
+
+Weight is **550**, never 700. Tracking runs negative here and **positive** on
+body text, both within the same family; the crossover sits around `1.375rem`.
+
+```tsx
+<Heading level={1}>Everything you need to sell</Heading>
+<Heading level={3}>Payments</Heading>
+```

package/kits/awning/src/Heading.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+
+export interface HeadingProps {
+  /** 1 = page title (`dsp`), 2 = section (`t1`), 3 = card title (`t3`). */
+  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={['aw-h', `aw-h--${level}`, className].filter(Boolean).join(' ')}>
+      {children}
+    </Tag>
+  );
+}

package/kits/awning/src/PlanCard.md

@@ -0,0 +1,19 @@
+---
+category: Signature
+---
+
+The commerce front door's load-bearing section. **A featured plan is featured by
+fill, not by hue** — it inverts to `--ink` with `--bg` content, exactly as the
+primary button does, because there is no accent colour to tint it with. At most
+one per row; two featured plans is a row with no recommendation in it.
+
+The price takes the `t1` step and the cadence the `b4`, so the number carries
+and the interval does not compete with it.
+
+```tsx
+<PlanCard
+  name="Basic" price="$29" cadence="per month"
+  features={['2 staff accounts', '10 locations']}
+  action={<Button size="sm">Start free trial</Button>}
+/>
+```

package/kits/awning/src/PlanCard.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+
+export interface PlanCardProps {
+  name: string;
+  price: ReactNode;
+  cadence?: string;
+  features: string[];
+  /** At most ONE plan per row is featured, and it is featured by fill, not by hue. */
+  featured?: boolean;
+  action: ReactNode;
+  className?: string;
+}
+
+export function PlanCard({
+  name,
+  price,
+  cadence,
+  features,
+  featured = false,
+  action,
+  className,
+}: PlanCardProps) {
+  return (
+    <div
+      className={['aw-plan', featured ? 'aw-plan--featured' : '', className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <span className="aw-plan__name">{name}</span>
+      <span className="aw-plan__price">{price}</span>
+      {cadence ? <span className="aw-plan__cadence">{cadence}</span> : null}
+      <ul className="aw-plan__features">
+        {features.map((f) => (
+          <li key={f}>{f}</li>
+        ))}
+      </ul>
+      <div className="aw-plan__action">{action}</div>
+    </div>
+  );
+}

package/kits/awning/src/ProductFrame.md

@@ -0,0 +1,18 @@
+---
+category: Signature
+---
+
+**The colourless chrome.** A full-colour screenshot of the product sits in a
+frame that contains no hue at all — the card's radius, the one shadow, and
+nothing else. This is the pack's second motif and the reason the accent is
+black: every colour a reader sees on the page belongs to the thing being sold.
+
+The frame carries a real `aria-label` describing what the shot shows. A frame
+whose label repeats the section heading is a frame that told a screen-reader
+user nothing.
+
+```tsx
+<ProductFrame label="The orders list, filtered to unfulfilled">
+  <img src={shot} alt="" />
+</ProductFrame>
+```

package/kits/awning/src/ProductFrame.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+export interface ProductFrameProps {
+  /** Describe what the shot shows — this is the accessible name, not decoration. */
+  label: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function ProductFrame({ label, children, className }: ProductFrameProps) {
+  return (
+    <figure
+      className={['aw-frame', className].filter(Boolean).join(' ')}
+      role="img"
+      aria-label={label}
+    >
+      {children}
+    </figure>
+  );
+}

package/kits/awning/src/Rule.md

@@ -0,0 +1,13 @@
+---
+category: Surfaces
+---
+
+This pack ships **two** border weights, which is unusual in this library.
+`--line` goes between rows; `--line-strong` goes around a control. The
+difference is load-bearing: it is what makes an outlined secondary button read
+as a control at all, given its fill is transparent in every state.
+
+```tsx
+<Rule />
+<Rule tone="strong" />
+```