sheleg-design-skill 1.50.2 → 1.51.1

package/CHANGELOG.md

@@ -6,6 +6,71 @@ follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [1.51.1] - 2026-08-27
+
+### `deskmate`, the thirty-sixth pack — a colleague, quoted
+
+**`v1.51.0` is a ghost tag and nothing shipped under it.** It was pushed while `main`
+had moved on, so the tag named a commit no clone could reach; the release workflow's
+own guard refused before cutting a release or publishing, which is what that guard is
+for. The tag ruleset forbids moving or deleting a `v*` tag and the branch ruleset
+forbids the merge commit that would make it reachable, so the release ships one patch
+number up rather than as a tag pointing off the default branch. The content is this
+entry's; there is no 1.51.0 release to look for.
+
+Extracted from a front page for an AI employee that works inside a chat client, read
+off computed styles at 1440×900 (1,191 visible of 1,888 elements on a 10,211px page)
+plus four more pages for the components the front page does not paint: the form field,
+the search shell, the dusk surface, and the reference's own published brand page.
+
+**What the pack contributes.** One light source, and it is above the top edge: every
+gradient origin in the reference's own library sits at or above `y=0`, and every one of
+them runs the same four stops — peach, lilac, violet, deep navy. One ramp does three
+jobs (a field bleed, a panel fill, and one word of a heading through
+`background-clip: text`), everything a hand touches is a 56px pill against 32px slabs,
+and elevation is a field step: 68 white fills on a beige field, 51 hairlines, and two
+shadows on the whole page.
+
+**The signature element is a framed transcript**, and the mechanism worth having is its
+quarantine: the quoted chat client keeps its own face, its own ink and its own two
+status colours under a `--quoted-*` namespace, so a status dot cannot reach a third
+party's palette by accident. The frame's radius is concentric and the reference computes
+it at runtime — 47.319px outside, a 15px inset, 32.254px inside — which the pack ships
+as `--r-frame: 48px` and `calc(48px - 15px)`.
+
+**Four corrections travel with it.** The `aria-invalid` border misses the 3:1 boundary
+floor by 0.03 (`#b5856c` is 2.97:1 on the field `#faf5f1`); the icon grey is 2.77:1 on
+that field and is declared non-text; 47 interactive elements render under 44px at the
+narrow width; and the light status set measures 2.6–4.1:1 on the dusk field, so that
+surface carries its own four. The status set is lifted out of the quoted transcript
+rather than invented — the brand layer paints no state at all — and `--info` is an alias
+of `--accent` on purpose.
+
+### The render caught four things no gate could
+
+The `deskmate` kit was mounted and rendered at 1440, 768 and 390, then read back
+through `getComputedStyle`, per CONTRIBUTING step 8. It found: a navigation slab that kept its link row to 390px and
+pushed its trailing control to **515px against a 390px page**; a secondary control on
+the dusk surface painting **white on white**, because a card there stays white by
+measurement and the control had inherited the card's fill; an accent chip label at
+**3.36:1** on the composited dusk wash, where the brighter step is 6.18:1; and every
+anchor-shaped control carrying the UA's underline. All four are fixed, and the slab's
+collapse is now stated in the pack.
+
+### Ratchets
+
+`validate.py` 4882 → 5047, `validate_palette.py` 2875 → 3013, `sloplint.py` 720 → 734,
+and `computed_at_least` 628 → 686. Both ratio ceilings held for the fourth consecutive
+release; two claims that landed unpairable on the first run were rewritten rather than
+pinned.
+
+## [1.50.3] - 2026-08-26
+
+### The shared seam is explicit
+
+Both shared validators now state `diverges: none`, completing the umbrella
+mechanism contract.
+
 ## [1.50.2] - 2026-08-26
 
 ### Router carriers and shared guard provenance

package/README.md

@@ -4,6 +4,7 @@
 [![CI](https://github.com/ssheleg/sheleg-design-skill/actions/workflows/validate.yml/badge.svg)](https://github.com/ssheleg/sheleg-design-skill/actions/workflows/validate.yml)
 [![license: MIT](https://img.shields.io/badge/license-MIT-blue)](./LICENSE)
 [![site](https://img.shields.io/badge/docs-skills.sshlg.me-8ab0ff)](https://skills.sshlg.me/skills/sheleg-design/)
+[![skills.sh](https://skills.sh/b/ssheleg/sheleg-design-skill)](https://skills.sh/ssheleg/sheleg-design-skill)
 
 **Give coding agents a deliberate visual system: style packs, tokens, motion doctrine and a clean Figma seam.**
 
@@ -30,7 +31,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 **thirty-five locked style
+decides whether to animate before it decides how, and **thirty-six locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -74,6 +75,7 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `nameplate` | a cool near-white slab under a page that is **square on 87% of its elements** — 1,091 of 1,251 measured — where the one round shape is reserved for a white 1px-bordered pill carrying somebody else's publication name **as type rather than as a logo**, one family with the body at **weight 500**, and two uppercase registers tracked 0.06em and 0.175em | **pages whose argument is that named third parties will vouch for you** — press and media placement, PR distribution, trust marks and badges, certification, review aggregation and "as featured in" surfaces (standalone) |
 | `rimlight` | a white field with a cool grey act separator and one near-black act, a grotesque for every sentence and a **monospace for every piece of chrome**, square on 84% of its elements, tracked negative at every size and with **no bold anywhere** — and an elevation made of **coloured light**: a sixteen-layer rig, six layers lit and ten held at alpha 0, thrown from below-left onto one control per viewport | **a studio's own front door and the pages that sell what it makes** — design and engineering agencies, product studios, service and case-study pages (standalone) |
 | `onionskin` | a white technical sheet at **96.5% zero radius** — the squarest page in the library — where **two bases do all the work and everything quiet is one of them at an alpha**: text dims through the ink, structure through a navy that is never a word, so there is no grey ramp at all. A dot grid, dashed hairlines, three faces with one job each, and an **11px working size** | **developer and AI infrastructure whose front page is a working document** — memory and context engines, retrieval services, agent runtimes, evaluation and observability surfaces (standalone) |
+| `deskmate` | a warm beige working day lit from **one source above the top edge** — every gradient origin in the reference sits at or above `y=0` — where a single four-stop ramp (peach, lilac, violet, deep navy) washes the field, fills a panel and fills one word of a heading, and everything a hand touches is a 56px pill against 32px slabs | **products sold as a colleague rather than a tool** — AI employees and chat-native agents, assistants living in Slack or Teams, delegation and approval surfaces (standalone) |
 | `outrank` | white field with one violet that carries text in both directions, a 5px light ring standing in for a button shadow, and two type families split by how long a thing is read | SEO and growth SaaS, agent-run back-office — the pack for a product that ships a landing and a dashboard at once |
 | `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 |
@@ -174,7 +176,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 thirty-five style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The thirty-six 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 |
 
@@ -245,7 +247,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 thirty-five kits, so switching packs swaps identity rather than API,
+identical in all thirty-six 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.
@@ -295,10 +297,10 @@ 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 thirty-five
+installers and `diff -r`s the result against the source, then builds all thirty-six
 kits.
 
-`test/scenarios.md` (T1–T30) is the behavioral harness: fresh subagents given a
+`test/scenarios.md` (T1–T34) is the behavioral harness: fresh subagents given a
 task, checking that the skill is discovered, applied and quoted correctly.
 Re-run the affected scenarios after any edit to `SKILL.md`, a pack or the
 reference.

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/              thirty-five style packs — instrument-console (dark console),
+  styles/              thirty-six 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), patchbay (dark live
@@ -247,7 +247,10 @@ ${c("bold", "What it installs")}
                        shadow), onionskin (a white technical sheet at 96.5%
                        zero radius where every quiet value is the ink or a
                        navy at an alpha, over a dot grid, at an 11px working
-                       size), babylove (white +
+                       size), deskmate (warm beige lit from above the top
+                       edge, one four-stop ramp, 56px pills against 32px
+                       slabs, and a framed transcript as the set piece),
+                       babylove (white +
                           one orange, seven tokens over Tailwind defaults),
                           outrank (white +
                           one violet, a landing and a dashboard in one brand),

package/cursor/rules/sheleg-design.mdc

@@ -117,7 +117,14 @@ onionskin — a white technical sheet at 96.5% zero radius where two bases do al
 work and everything quiet is one of them at an alpha: text dims through the ink,
 structure through a navy that is never a word, over a dot grid with dashed hairlines,
 three faces with one job each and an 11px working size, for developer and AI
-infrastructure whose front page is a working document);
+infrastructure whose front page is a working document;
+deskmate — a warm beige working day lit from one source above the top edge, where a
+single four-stop ramp of peach, lilac, violet and deep navy washes the field, fills a
+panel and fills one word of a heading, every control is a 56px pill against 32px
+slabs, elevation is a field step with two shadows on the whole page, and the set
+piece is a framed transcript whose quoted chat client keeps its own face and colours
+under a --quoted-* namespace, for products sold as a colleague rather than a tool:
+AI employees and chat-native agents);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

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

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

@@ -0,0 +1,52 @@
+# Deskmate — conventions for a design agent
+
+This kit is the built form of the Deskmate style pack. Read these before generating
+anything with it; they are the pack's bans, stated where a design tool will see them.
+
+## Geometry
+
+- **A control is a pill.** `--r-pill` on anything a hand touches, at `--control-h`
+  (56px) or `--control-h-sm` (40px), never below `--tap-min` (44px).
+- **A container is a slab** at `--r-card` (32px). Sections and the navigation slab take
+  `--r-section` and round their **bottom** corners only — nothing here rounds a top
+  corner against the page edge.
+- **The frame is concentric**: `--r-frame` outside, `--frame-inset` of padding, and
+  `--r-frame-inner` = `calc(--r-frame - --frame-inset)` inside. Never the same radius on
+  both boxes.
+
+## Colour
+
+- One accent, `--accent`, which both writes and fills. `--peach` is a gradient stop and
+  a mark; it is never a word.
+- **One ramp**, `--gradient-dusk`, and its origin is always above the top edge of the
+  box it fills. A gradient lit from below is not this pack.
+- **One gradient word per heading** and one gradient control per page. The word carries
+  `--gradient-word-fallback` as a solid `color` first, or it disappears where
+  `background-clip: text` is unsupported.
+- **Status is never by colour alone.** Every state takes a word or a glyph beside its
+  colour, on the light field and on the dusk surface.
+- `[data-surface="dusk"]` is a **surface variant, not a dark theme**. Put it on a
+  section, never on `:root`, and leave the frame alone — it re-declares its own tokens
+  on purpose.
+
+## Type
+
+- `--font-display` for headings only, at `--weight-regular` for the display and
+  `--weight-strong` for a section heading, always at `--track-display`.
+- `--font-body` at **`--weight-body` (500)** for every sentence. An unset weight gives
+  400 and renders the whole page one step light.
+- `--font-quoted` only inside the frame. It is the chat client's face, not the brand's.
+
+## Motion
+
+- Two clocks: `--dur-fast` for anything a pointer caused, `--dur-enter` on `--ease-out`
+  for anything the scroll revealed. No scroll clock, no parallax, no `animation-timeline`.
+- No shimmer on a skeleton.
+- Reduced motion collapses every duration and `--enter-y`: colour still changes, nothing
+  travels.
+
+## Breakpoints
+
+A component sizes against its own box. `container-type: inline-size` on the root and
+`@container` on the descendant; a viewport query is only for the page's gutter and the
+display's own size, and both are marked in the stylesheet with the reason.

package/kits/deskmate/README.md

@@ -0,0 +1,36 @@
+# @sheleg-design/deskmate
+
+The React reference kit for the **Deskmate** style pack — a warm beige working day lit
+from one source above the top edge, where the product's own messages are the page's
+illustrations.
+
+The pack document is the source of truth for every value here:
+`plugins/sheleg-design/skills/sheleg-design/styles/deskmate.md`. This kit is what those
+values look like when they are built, and `src/styles.css` opens with the pack's token
+layer copied byte for byte — never transcribed.
+
+```bash
+npm install && npm run build   # tsc only; there is no bundler in this kit
+```
+
+## What ships
+
+**The spine**, identical in name, props and types across every SHELEG kit, so switching
+packs swaps identity rather than API: `Button`, `Card`, `Chip`, `Stat`, `Heading`,
+`Rule`.
+
+**The signature**, which is this pack's own: `Transcript` (the framed quote, and the
+element a page here is remembered by), `Message`, `QuotedCard`, `Eyebrow`, `Field`,
+`NavSlab`, `Empty` and `Skeleton`.
+
+## Three rules this kit exists to keep
+
+1. **A control is a pill at 56px; a container is a slab at 32px.** Swap them and the
+   pack inverts. Every control also declares `box-sizing: border-box` and a
+   `min-height` of `--tap-min`, because an anchor and a button disagree about padding
+   otherwise and the taller one silently wins.
+2. **Elevation is a field step.** There are two shadow tokens and both are spent — one
+   under the frame, one bloom. A third shadow is a defect.
+3. **Nothing inside the frame is the brand's.** The quoted client keeps `--quoted-*`:
+   its own face, its own ink, its own two status colours. A status dot that reaches for
+   them has adopted somebody else's design system.

package/kits/deskmate/package.json

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

@@ -0,0 +1,19 @@
+---
+category: Actions
+---
+
+Every control is a pill at `--control-h` (56px) with `--control-px` of horizontal
+padding and a `--rule-w` border, 16px at `--weight-body` and `--track-control`. `sm` is
+`--control-h-sm` (40px) at 24px and 14px — the navigation's size.
+
+`primary` fills with `--ink` and labels in `--on-ink`, 17.36:1. `secondary` is
+`--surface` with the ink at 12% and hover mixes 6% of the ink into the fill.
+`ghost` is transparent until hover, which fills with the ink at 5%.
+
+Press travels 1px down and nothing scales. Focus moves the border to `--focus-color`
+and adds `--focus-ring` — both, always.
+
+```tsx
+<Button>Get started for free</Button>
+<Button variant="secondary">Book a demo</Button>
+```

package/kits/deskmate/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={['dm-btn', `dm-btn--${variant}`, `dm-btn--${size}`, className]
+        .filter(Boolean)
+        .join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

package/kits/deskmate/src/Card.md

@@ -0,0 +1,16 @@
+---
+category: Surfaces
+---
+
+`--surface` on `--bg` at `--r-card`, no border and no shadow: the field step **is** the
+elevation, and the page has two shadows in total, both spent elsewhere.
+
+Padding is 24px above the title and 32px around the body, which is the reference's own
+asymmetry — the title row sits closer to the top edge than the body does to the sides.
+For the two-half card the page is actually made of, see `QuotedCard`.
+
+```tsx
+<Card title="Payroll prep" meta="10:20 AM">
+  <p>Attendance and collections reconciled.</p>
+</Card>
+```

package/kits/deskmate/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={['dm-card', className].filter(Boolean).join(' ')}>
+      {head && (
+        <div className="dm-card__head">
+          {title !== undefined && <h3 className="dm-card__title">{title}</h3>}
+          {meta !== undefined && <span className="dm-card__meta">{meta}</span>}
+        </div>
+      )}
+      <div className="dm-card__body">{children}</div>
+    </section>
+  );
+}

package/kits/deskmate/src/Chip.md

@@ -0,0 +1,16 @@
+---
+category: Data
+---
+
+A small tile rather than a pill label: `--r-chip` (19.6px), `--surface`, a `--rule-w`
+hairline at the ink's 5%, 10px of padding. It carries a filename, a tool mark, a count
+— something the page is quoting.
+
+`accent` swaps the fill for `--accent-wash` and the label for `--accent-deep`, which is
+the eyebrow's pair. `selected` moves the hairline to `--accent` and nothing else moves;
+for a status, use the word and the glyph, because status here is never by colour alone.
+
+```tsx
+<Chip>Weekly-Performance.pdf</Chip>
+<Chip tone="accent" selected>3 discrepancies</Chip>
+```

package/kits/deskmate/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={[
+        'dm-chip',
+        `dm-chip--${tone}`,
+        selected ? 'dm-chip--selected' : undefined,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}

package/kits/deskmate/src/Empty.md

@@ -0,0 +1,18 @@
+---
+category: Signature
+---
+
+What a screen with no data says. It exists because the reference does not have one: a
+search matching nothing collapses its grid to zero height and prints no message, which
+is indistinguishable from a broken query.
+
+A `--surface` card at `--r-card`, a line in `--ink`, one sentence in `--ink-soft`, and
+one control that changes the condition.
+
+```tsx
+<Empty
+  title="No integrations match “zzq”."
+  detail="Check the spelling, or clear the filter to see all of them."
+  action={<Button variant="secondary" size="sm">Clear filter</Button>}
+/>
+```

package/kits/deskmate/src/Empty.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+export interface EmptyProps {
+  title: string;
+  /** One sentence saying what would fill this, or what to change. */
+  detail?: string;
+  action?: ReactNode;
+  className?: string;
+}
+
+export function Empty({ title, detail, action, className }: EmptyProps) {
+  return (
+    <div className={['dm-empty', className].filter(Boolean).join(' ')}>
+      <p className="dm-empty__title">{title}</p>
+      {detail !== undefined && <p className="dm-empty__detail">{detail}</p>}
+      {action !== undefined && <div className="dm-empty__action">{action}</div>}
+    </div>
+  );
+}

package/kits/deskmate/src/Eyebrow.md

@@ -0,0 +1,16 @@
+---
+category: Foundations
+---
+
+The 20px pill above a heading: `--wash` fill, `--accent-deep` label, 12px at
+`--track-caps`. It names the section before the heading argues it, and it is the only
+place in the pack where a tracked-open label appears.
+
+On a dusk section pass `surface="dusk"` — the fill becomes the on-dusk wash and the
+label `--accent`. The shape is identical, which is the point: a surface variant changes
+values, never geometry.
+
+```tsx
+<Eyebrow>Why it feels like a hire</Eyebrow>
+<Eyebrow surface="dusk">One hire, the output of a team</Eyebrow>
+```

package/kits/deskmate/src/Eyebrow.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+export interface EyebrowProps {
+  children: ReactNode;
+  /** `dusk` swaps the wash for the on-dusk pair; the shape never changes. */
+  surface?: 'light' | 'dusk';
+  className?: string;
+}
+
+export function Eyebrow({ children, surface = 'light', className }: EyebrowProps) {
+  return (
+    <span
+      className={['dm-eyebrow', `dm-eyebrow--${surface}`, className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}

package/kits/deskmate/src/Field.md

@@ -0,0 +1,17 @@
+---
+category: Actions
+---
+
+The pill field: `--control-h` tall, `--surface` fill, a `--rule-w` hairline at the
+ink's 12%, and the same geometry as `Button` so a form row reads as one object. Focus
+moves the border to `--focus-color` **and** adds `--focus-ring-field` — both, because
+the ring alone composites too faint to carry the state.
+
+`error` is what makes the invalid state legal: the border takes `--danger` and the
+message appears with it. A red border on its own is a colour carrying meaning alone,
+which this pack bans.
+
+```tsx
+<Field label="Work email" name="email" type="email" placeholder="you@company.com" />
+<Field label="Work email" name="email" type="email" error="Use your work address." />
+```

package/kits/deskmate/src/Field.tsx

@@ -0,0 +1,34 @@
+export interface FieldProps {
+  label: string;
+  name: string;
+  type?: 'text' | 'email' | 'search';
+  placeholder?: string;
+  /** The message shown beside the invalid border — the colour never travels alone. */
+  error?: string;
+  className?: string;
+}
+
+export function Field({ label, name, type = 'text', placeholder, error, className }: FieldProps) {
+  const described = error !== undefined ? `${name}-error` : undefined;
+  return (
+    <div className={['dm-field', className].filter(Boolean).join(' ')}>
+      <label className="dm-field__label" htmlFor={name}>
+        {label}
+      </label>
+      <input
+        className="dm-field__input"
+        id={name}
+        name={name}
+        type={type}
+        placeholder={placeholder}
+        aria-invalid={error !== undefined || undefined}
+        aria-describedby={described}
+      />
+      {error !== undefined && (
+        <p className="dm-field__error" id={described}>
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/kits/deskmate/src/Heading.md

@@ -0,0 +1,16 @@
+---
+category: Foundations
+---
+
+`1` is the display at `--t-display` (80px, stepping to 72 and 64) in `--font-display`
+at `--weight-regular` and `--track-display`. `2` is 48px at `--weight-strong`, same
+tracking. `3` is 24px, and it is the card title.
+
+The display holds **two lines** and the column holds the display — there is no measure
+on it. Put one gradient word per heading and no more: wrap it in
+`<span className="dm-word">`, which ships `--gradient-word` with its solid fallback
+`color` underneath.
+
+```tsx
+<Heading level={1}>Not a tool. <span className="dm-word">A hire.</span></Heading>
+```

package/kits/deskmate/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={['dm-heading', `dm-heading--${level}`, className].filter(Boolean).join(' ')}
+    >
+      {children}
+    </Tag>
+  );
+}

package/kits/deskmate/src/Message.md

@@ -0,0 +1,17 @@
+---
+category: Signature
+---
+
+One turn inside the frame. `person` and `app` are the only kinds, because the whole
+argument of a page in this pack is that two of them alternate — and `app` is the one
+that carries the `APP` badge, drawn in the client's own badge colours rather than in
+the brand's.
+
+A message never takes a brand colour. If it needs to say a state, it says it in words
+and takes the glyph beside it: status here is never by colour alone.
+
+```tsx
+<Message author="Agent" kind="app" time="10:20 AM">
+  Reconciled attendance and collections.
+</Message>
+```