spirewise 1.7.0 → 1.8.0

package/skills/editorial-luxury-design-system/README.md

@@ -0,0 +1,98 @@
+# editorial-luxury-design-system
+
+A world-class, **editorial luxury design system** for building refined, magazine-grade
+websites — expressive **serif display type**, an **asymmetric editorial grid**, dramatic
+whitespace, fine hairline rules, a restrained warm-neutral palette, and quiet, elegant
+motion. Distilled from luxury/editorial references (**Aesop, Hermès, Vogue/print editorial,
+Kinfolk, Cartier, The New York Times, Stripe Press, Linear**) and modern AI sites (**OpenAI,
+Anthropic, Perplexity, Cursor**) for structure. It gives coding/design/UI/branding/website-
+generation agents a complete, reusable system so they can ship sites that feel art-directed
+and unmistakably premium.
+
+It also ships a **production website-generation framework**: a multipage site (15+ pages,
+10+ sections/page, **no borders/dividers between sections**) in **pure HTML/CSS/vanilla JS**
+(no React/Vue/Tailwind/Bootstrap/jQuery/any library), with **clean Vercel-ready URLs** (no
+`.html`), navigation, and full SEO.
+
+> The full design intelligence is **baked into the companion files** (live research
+> optional, to save tokens). Outputs a generated site/system into a `website/` folder.
+> Sibling skills: `ai-dark-futuristic-design-system`, `apple-premium-minimal-design-system`,
+> `product-demo-first-design-system`, `bento-grid-design-system`, `glassmorphism-design-system`.
+
+## Install
+
+```bash
+npx spirewise install -s editorial-luxury-design-system          # pick agents + scope
+npx spirewise install -s editorial-luxury-design-system -a claude,cursor -sc workspace
+```
+
+## Remove
+
+```bash
+npx spirewise remove -s editorial-luxury-design-system           # pick agents + scope
+npx spirewise remove -s editorial-luxury-design-system -a claude,cursor -sc both
+```
+
+(No Node? `./install.sh -s editorial-luxury-design-system` and `./install.sh remove -s editorial-luxury-design-system`.)
+
+## Use
+
+After installing, ask your agent:
+
+> "Design an editorial, luxury website for our brand"
+> "Make it magazine-grade — serif headlines, asymmetric grid, like Aesop/Kinfolk"
+
+It reads the companion files, locks the tokens, art-directs the editorial grid, composes the
+editorial layouts + components (hero, feature essays, pull quotes, plates, index, refined
+pricing), applies quiet motion + accessibility, and emits **pure HTML + CSS + vanilla JS +
+tokens + `vercel.json` + `sitemap.xml`** into a `website/` folder.
+
+## What's inside
+
+| File | What it gives you |
+|---|---|
+| `SKILL.md` | Orchestrator: editorial-luxury philosophy, mandates, workflow, output, checklist |
+| `design-principles.md` | Art-direction philosophy, editorial devices, do/don'ts |
+| `color-system.md` | Warm-neutral luxury palette + one accent (+ ink-dark) as CSS vars |
+| `typography-system.md` | Serif display + text system, dramatic fluid scale, editorial roles |
+| `spacing-system.md` | 4/8-pt scale, editorial margins, container measures, dramatic rhythm |
+| `layout-system.md` | The **asymmetric editorial grid** + canonical magazine layouts |
+| `component-library.md` | 17 components re-cast as editorial (kicker, pull quote, plates…) |
+| `motion-system.md` | Quiet reveals, line-by-line type, image curtains, micro-interactions |
+| `accessibility-system.md` | Contrast on warm neutrals, cover-text, semantics, focus, reduced motion |
+| `website-generation-rules.md` | Pure-vanilla build: pages, clean URLs + `vercel.json`, nav, SEO |
+| `example-page-structures.md` | Editorial page blueprints per site type |
+
+## The look
+
+A warm, paper-like canvas (ivory/bone) with deep ink text, an expressive high-contrast
+**serif** for display, a clean sans for UI/body, dramatic whitespace, fine hairline rules,
+small-caps kickers, drop caps and pull quotes, and **one** quiet accent (oxblood/forest/
+navy/gold). Elegant, considered, unmistakably premium. Default warm light; ink-dark included.
+
+## Components (17, editorial)
+
+Navbar · Editorial Hero · Feature essays/plates · Editorial index (bento) · Pull quotes
+(testimonials) · Logos/Press · Typographic Pricing · Numbered FAQ · Chapter-opener CTA ·
+Editorial Footer · Dashboard plate · Numbered Agent Workflow · Code Preview · Terminal
+Preview · Editorial figures (trust) · Security · Enterprise.
+
+## Rules it enforces
+
+- **Editorial craft** — serif display headlines; asymmetric editorial grid; dramatic
+  whitespace; kickers/decks/pull quotes/captions; understated CTAs (no loud gradients).
+- **Multipage scale (mandatory)** — **15+ pages (≈20)**, **≥10 sections/page (≈12)**, and
+  **no borders/dividers between sections** (separation by whitespace + paper tone; hairlines
+  only *inside* compositions).
+- **Pure vanilla stack** — HTML5 + CSS3 + vanilla JS only; **no React/Vue/Angular/Svelte/
+  Bootstrap/Tailwind/jQuery/any library**; no build step.
+- **Clean Vercel-ready URLs** — extensionless routes (`/pricing`), with `vercel.json`
+  (`cleanUrls`), `sitemap.xml`, `robots.txt`; refresh + deep links work.
+- **Full navigation + SEO** — refined desktop dropdown, mobile overlay, breadcrumbs; per-page
+  title/description, Open Graph, Twitter card, canonical, JSON-LD (Article for journal).
+- **Centralized tokens**, **accessible by default** (AA on warm neutrals, cover-text scrims,
+  figure/blockquote/ol semantics, focus, reduced motion), **mobile-first responsive**
+  (graceful grid reflow). **Zero anti-patterns** — no all-sans/no-serif, crowded layouts,
+  template look, or frameworks in the shipped site.
+
+See `SKILL.md` for the full workflow and the companion files for every token and spec.

package/skills/editorial-luxury-design-system/SKILL.md

@@ -0,0 +1,187 @@
+---
+name: editorial-luxury-design-system
+description: >-
+  A world-class, EDITORIAL LUXURY design system for building refined, magazine-grade
+  websites — expressive serif display type, asymmetric editorial grids, dramatic
+  whitespace, hairline rules, restrained palettes, and quiet, elegant motion. Distilled
+  from luxury/editorial references (Aesop, Hermès, Vogue/print editorial, Kinfolk,
+  Cartier, The New York Times, Stripe Press, Linear) and modern AI sites (OpenAI,
+  Anthropic, Perplexity, Cursor) for structure. It gives coding/design/UI/branding/
+  website-generation agents a complete, reusable system: design philosophy, color/
+  typography/spacing/grid/layout tokens (with a serif-led type system + editorial grid),
+  a 17-component library re-cast as editorial, a motion system, accessibility +
+  responsive rules, and a production website-generation framework. The framework builds
+  a multipage site (15+ pages, 10+ sections/page, NO borders/dividers between sections)
+  in PURE HTML/CSS/vanilla JS (no React/Vue/Tailwind/Bootstrap/jQuery/any library), with
+  clean Vercel-ready URLs (no `.html`), navigation, and full SEO. Use when the user asks
+  for an "editorial / luxury / magazine website", "high-end elegant design", "serif
+  editorial layout", "make it like Aesop/Hermès/Kinfolk", or "a luxury design system /
+  tokens". The full system is baked into the companion files (live research optional).
+  Outputs a generated site/system into a `website/` folder.
+---
+
+# Editorial Luxury Design System
+
+A complete, agent-ready design system for **editorial, luxury, magazine-grade websites** —
+expressive serif headlines, asymmetric editorial grids, dramatic whitespace, fine hairline
+rules, a restrained refined palette, and quiet, elegant motion. The feel of a beautifully
+art-directed print magazine or a luxury maison, translated to the web. Distilled from
+Aesop, Hermès, Vogue/print editorial, Kinfolk, Cartier, The New York Times, Stripe Press,
+and Linear (plus modern AI sites — OpenAI, Anthropic, Perplexity, Cursor — for structure).
+
+This skill is the **single source of truth**. The detailed system lives in the companion
+files in this folder — read the ones relevant to the task, then generate.
+
+## The core idea — art-directed, editorial, luxurious
+
+- **Type is the hero.** A high-contrast **serif display** family carries the page; the
+  type scale is dramatic and the headlines are large, elegant, and considered.
+- **Asymmetric editorial grid.** Content is composed on a magazine grid — generous
+  margins, off-center compositions, pull quotes, captions, drop caps, and measured columns
+  — not centered SaaS rows.
+- **Whitespace is luxury.** Air, restraint, and pace signal quality. Sections breathe.
+- **Refined, restrained palette.** Mostly warm neutrals (ivory/bone/ink) with one quiet
+  accent; color is used sparingly and deliberately.
+- **Fine details.** Hairline rules, small-caps labels, eyebrow kickers, numbered sections,
+  and impeccable alignment make it feel crafted.
+
+## Hard structural requirements (MANDATORY — never skip)
+
+These are non-negotiable and override any conflicting guidance elsewhere:
+
+1. **Multipage — 15+ pages (≈20).** Always generate a **full multipage website with
+   more than 15 distinct pages** (not a single landing page) — a real site map.
+2. **10+ sections per page (≈12).** Every page contains **at least 10 full sections**,
+   composed from the layout + component library.
+3. **No borders/dividers between sections.** **Zero border widths, lines, rules, or
+   `<hr>` between sections.** Separate sections with **whitespace, the editorial rhythm,
+   type scale, and gentle background shifts** — never a section border. (Editorial
+   **hairline rules** belong *inside* a composition — under a kicker, between columns, in
+   a footer — not as a divider between page sections.)
+4. **Pure HTML + CSS + vanilla JS — no frameworks/libraries.** The generated site uses
+   **only HTML5, CSS3, and vanilla JavaScript**. No React/Vue/Angular/Svelte/Next, no
+   Bootstrap/Tailwind/any CSS framework, no jQuery/any UI or JS library, no build step.
+   (Exporting `tokens.json` for other agents is fine — that's data, not a framework.)
+5. **Clean, Vercel-ready URLs.** All routes are **extensionless** (`/pricing`, not
+   `/pricing.html`); ship a `vercel.json` (`cleanUrls: true`) plus `sitemap.xml` /
+   `robots.txt` so production refresh and deep links work.
+6. **Full navigation + SEO.** Desktop nav (a refined dropdown/menu) + mobile menu +
+   breadcrumbs; per-page SEO (unique title/description, Open Graph, Twitter card,
+   canonical, JSON-LD). Every component: responsive, accessible, reusable,
+   production-ready, animation-ready.
+
+See `website-generation-rules.md` for the required page list, required sections, the
+`vercel.json`, navigation, and SEO specifics. Enforce in code: `.section { border: 0 }`
+and never place `<hr>`/divider elements between sections.
+
+## When to use
+
+Building or designing any landing page, marketing site, brand site, or product site that
+should feel **editorial, luxurious, and refined** (Aesop/Hermès/Kinfolk/Stripe Press
+energy) — for a premium brand, AI startup, studio, publication, or enterprise — or
+producing **design tokens / a design system** for other agents.
+
+## The companion files (read what you need)
+
+| File | What it gives you |
+|---|---|
+| `design-principles.md` | The editorial-luxury philosophy, hierarchy laws, do/don'ts |
+| `color-system.md` | Warm-neutral luxury palette + one accent as CSS variables (+ dark) |
+| `typography-system.md` | Serif display + text system, dramatic fluid scale, editorial roles |
+| `spacing-system.md` | 4/8-pt scale, editorial margins, container widths, measured rhythm |
+| `layout-system.md` | The asymmetric **editorial grid** + canonical editorial layouts |
+| `component-library.md` | 17 components re-cast as editorial (kicker, pull quote, captions…) |
+| `motion-system.md` | Quiet reveals, line-by-line type, image curtains, micro-interactions |
+| `accessibility-system.md` | Contrast, focus, motion, semantics, keyboard |
+| `website-generation-rules.md` | Pure-vanilla build: pages, clean URLs + `vercel.json`, nav, SEO |
+| `example-page-structures.md` | Ready editorial page blueprints |
+
+All tokens use the same names across files, so they compose into one stylesheet.
+
+## Phase 1 — Research is baked in (live analysis OPTIONAL)
+
+The design intelligence extracted from the reference sites is **already encoded in the
+companion files** — patterns, palettes, type scales, spacing, the editorial grid,
+components, motion. **Do NOT re-scrape the references for the basics; use the baked-in
+system** (saves tokens). Only browse live when the user wants a *current* look from a
+specific site, a brand-new pattern not covered here, or to verify a font/feature.
+
+What the baked-in system already captures (the Phase-1 extraction): design patterns,
+visual hierarchy, typography/spacing/grid/layout systems, color + gradient systems,
+animation/motion, navigation, CTA + hero patterns, trust/enterprise/social-proof
+components, footer/pricing/feature structures, interactive + micro-interactions,
+glassmorphism usage, accessibility, mobile responsiveness, developer-experience patterns,
+and AI-startup conversion patterns — expressed in an editorial, luxurious idiom.
+
+## Phase 2 — Generate (the workflow)
+
+1. **Clarify intent:** site type (brand / product / SaaS / publication / studio), theme
+   (warm-ivory light by default, or ink-dark), one accent, and page set.
+2. **Lock the tokens:** start from `color-system.md` + `typography-system.md` +
+   `spacing-system.md`. Emit them once as `:root` CSS variables (and `tokens.json`).
+3. **Art-direct the grid:** compose sections on the editorial grid — asymmetry, generous
+   margins, pull quotes, captions, kickers, numbered sections.
+4. **Compose layouts + components:** use the editorial layouts and components (editorial
+   hero, feature essays, pull quotes, image+caption, index lists, refined pricing).
+5. **Apply motion + a11y:** quiet reveals + line-by-line headings per `motion-system.md`,
+   gated by `prefers-reduced-motion`; meet every rule in `accessibility-system.md`.
+6. **Emit code:** follow `website-generation-rules.md` to produce clean, semantic,
+   responsive **pure HTML + CSS + vanilla JS** plus tokens, `vercel.json`, `sitemap.xml`,
+   `robots.txt`.
+7. **Self-check** against the anti-patterns and the verification checklist below.
+
+## Output
+
+Unless the user specifies otherwise, write the generated **multipage site (15+ pages,
+~20)** into a `website/` folder in the project root:
+- `website/index.html` **plus 15+ additional pages** (≥10 sections each, editorial, no
+  inter-section borders), linked with **extensionless URLs** (`/pricing`)
+- `website/css/tokens.css` + `website/css/styles.css`
+- `website/js/main.js` (vanilla nav, reveals, type motion — progressively enhanced)
+- `website/vercel.json`, `website/sitemap.xml`, `website/robots.txt`
+- `website/assets/` (editorial imagery, icons, og images)
+- `website/tokens.json` (machine-readable tokens for other agents)
+
+When the user only wants the **system** (not a site), emit the tokens + component specs.
+
+## Default look (baked-in identity)
+
+A warm, paper-like canvas (ivory/bone) with deep ink text, an **expressive high-contrast
+serif** for display, a clean sans for UI/body, dramatic whitespace, fine hairline rules,
+small-caps kickers, the occasional drop cap and pull quote, and one quiet accent (a deep
+oxblood/forest/navy or gold). Elegant, considered, unmistakably premium. (Default warm
+light; an ink-dark theme is included. Siblings: `ai-dark-futuristic-design-system`,
+`apple-premium-minimal-design-system`, `product-demo-first-design-system`,
+`bento-grid-design-system`, `glassmorphism-design-system`.)
+
+## Anti-patterns (never ship these)
+
+Outdated startup designs · Bootstrap/template look · generic centered SaaS layouts · poor
+typography (the cardinal sin here) · weak visual hierarchy · overloaded gradients ·
+excessive glassmorphism · poor accessibility · inconsistent spacing · **all-sans/no serif
+display · cramped/crowded layouts · borders or dividers between sections · single-page
+sites or thin pages with fewer than 10 sections · any framework/library in the shipped
+site · `.html` in URLs**. The result must feel like Aesop/Hermès/Kinfolk/Stripe Press —
+crafted and editorial, never a template.
+
+## Verification checklist (run before finishing)
+
+0. **Multipage scale met:** the site has **> 15 pages** (≈20), each page has **≥ 10
+   sections** (≈12), and there are **no borders/dividers between sections**.
+0b. **Editorial craft met:** a serif display family carries the page; layouts use the
+   asymmetric editorial grid with generous margins; whitespace is dramatic; kickers/pull
+   quotes/captions used tastefully.
+0c. **Pure vanilla + clean URLs:** zero frameworks/libraries; routes extensionless with a
+   working `vercel.json` (`cleanUrls`), `sitemap.xml`, `robots.txt`.
+0d. **Nav + SEO:** refined desktop nav/menu + mobile menu + breadcrumbs; per-page title/
+   description, Open Graph + Twitter card, canonical, JSON-LD.
+1. Tokens emitted once (`:root`/`tokens.css`) and reused — no scattered one-off hex.
+2. Type uses the fluid scale; spacing uses the 4/8-pt scale; layout uses the editorial grid
+   + container widths — all from the companion files.
+3. Every section is a recognized layout; every component matches `component-library.md`.
+4. Body text ≥ 4.5:1 contrast, large text ≥ 3:1; visible focus; motion respects
+   `prefers-reduced-motion`; semantic landmarks + alt text present.
+5. Fully responsive (360 → 1440+): the editorial grid reflows gracefully; no horizontal
+   scroll; tap targets ≥ 44px.
+6. Trips **zero** anti-patterns; typography is exquisite; whitespace generous; restraint clear.
+7. Output looks like it belongs next to Aesop/Hermès/Kinfolk — editorial, luxurious, refined.

package/skills/editorial-luxury-design-system/accessibility-system.md

@@ -0,0 +1,63 @@
+# Accessibility System — Editorial Luxury
+
+Editorial/luxury design risks a11y when **elegance overrides legibility**: thin light type,
+low-contrast warm neutrals, decorative italics, and image-over-text covers. This system
+bakes WCAG 2.1 AA into the craft so it stays beautiful **and** usable.
+
+## Color & contrast
+- **Body text ≥ 4.5:1**, large/UI text **≥ 3:1**, on its real paper tone (ivory/bone/ink
+  plate). Verify **muted captions/kickers** (`--text-muted`) still clear AA — warm grays on
+  warm paper are a common failure. Use `--text-secondary` for anything substantive.
+- **Cover/hero text over imagery (EH-B):** ensure ≥ 4.5:1 via a scrim/overlay or by placing
+  text on a calm region of the image — never rely on the photo alone.
+- **Non-text contrast ≥ 3:1** for hairline rules that carry meaning, controls, focus rings.
+  (Decorative hairlines can be lighter, but functional ones must be perceivable.)
+- **Don't encode meaning in color alone**; the recommended pricing tier says "Recommended"
+  in text. Links carry an **underline** (the hairline), not color alone.
+- **Don't set long body in thin/italic serif.** Reserve italics for pull quotes/credits;
+  keep body at a readable weight and the prose measure 62–75ch.
+
+## Focus & keyboard
+- **Always-visible focus:** `:focus-visible { outline:2px solid var(--ring);
+  outline-offset:3px }` on every interactive element. Never bare `outline:none`.
+- **Full keyboard operability**; logical tab order matching the (sometimes asymmetric)
+  visual order — verify DOM order reads sensibly. No traps (except modal focus-trap, ESC).
+- **Skip link** to `#main` first in DOM. Menus/accordions: ESC + arrow keys where apt.
+
+## Semantics & structure
+- One `<h1>` per page; ordered headings (size with CSS; don't skip levels for drama).
+  Landmarks: `<header><nav><main id="main"><section><footer>`.
+- Use real structures: `<figure>/<figcaption>` for images+captions, `<blockquote>/<cite>`
+  for pull quotes, `<ol>` for numbered indices/sequences, `<dl>` for spec lists where apt.
+- Buttons vs links: `<button>` actions, `<a href>` navigation. Native over ARIA; minimal ARIA.
+
+## Media & motion
+- Editorial imagery has meaningful **`alt`**; purely decorative plates/rules are
+  `aria-hidden`/`alt=""`. Credits live in `<figcaption>`.
+- Honor `prefers-reduced-motion`: no line-by-line/curtain/page-fade; final state immediately.
+- No flashing > 3×/sec; no autoplaying audio.
+
+## Typographic accessibility
+- **Drop caps:** keep the initial part of the readable word (CSS `::first-letter` keeps it
+  in the text flow, so screen readers read it correctly) — don't split the letter into
+  separate markup.
+- **Small-caps kickers:** use real text + `text-transform`/`font-variant`, not images, so
+  they're readable and selectable; keep tracking from harming legibility at small sizes.
+- Avoid all-caps for long strings; kickers only.
+
+## Forms
+- Programmatic `<label>` per input (placeholders aren't labels); `<fieldset><legend>` for
+  groups; errors in text + `aria-describedby`, focus to first error.
+
+## Touch & responsive
+- **Tap targets ≥ 44×44px**; the editorial grid reflows to a single well-spaced column;
+  no horizontal scroll at 320px; 200% zoom OK; pinch-zoom not disabled.
+
+## Checklist (run before finishing)
+1. Body + captions/kickers meet AA on every paper tone and on dark plates.
+2. Cover/hero-over-image text passes contrast (scrim or calm region).
+3. Visible focus everywhere; keyboard-complete; DOM/reading order sane despite asymmetry; skip link.
+4. Real semantics (figure/blockquote/ol); one H1; ordered headings.
+5. Alt text + credits on imagery; decorative hidden; reduced motion honored.
+6. Body not set in thin/italic serif; prose measure 62–75ch; labelled forms.
+7. 44px targets; reflow to 320px; 200% zoom; zoom not disabled.

package/skills/editorial-luxury-design-system/color-system.md

@@ -0,0 +1,95 @@
+# Color System — Editorial Luxury
+
+A warm, restrained, paper-like palette: ivory/bone canvases, deep ink text, fine neutral
+hairlines, and **one** quiet luxury accent used sparingly. Color is an event, not a
+default. Ships **warm-light by default**; an **ink-dark** theme is included. Sections
+separate via whitespace + subtle paper shifts — **never borders**. Override `--accent-*` to
+rebrand. Contrast: body ≥ 4.5:1, large/secondary ≥ 3:1.
+
+## Tokens (`:root`) — warm light (default)
+
+```css
+:root {
+  /* ---- Paper / canvas (warm neutrals) ---- */
+  --paper:       #faf8f3;  /* default page (warm ivory) */
+  --paper-bone:  #f4f1ea;  /* alternate section panel (bone) */
+  --paper-warm:  #efeae0;  /* deeper warm panel (rare) */
+  --paper-ink:   #1a1814;  /* a "dark plate" section (inverted) */
+
+  /* ---- Surfaces (cards / inset) ---- */
+  --surface:       #ffffff; /* crisp white card/inset */
+  --surface-bone:  #f4f1ea;
+
+  /* ---- Ink text ramp (warm near-black) ---- */
+  --ink:           #17150f;  /* headlines (deep warm ink) */
+  --text-primary:  #221f18;  /* primary text */
+  --text-secondary:#4a463c;  /* body */
+  --text-muted:    #726c5e;  /* captions, kickers, meta */
+  --text-faint:    #9b9484;  /* decorative/disabled — non-essential only */
+  --text-on-ink:   #f3efe6;  /* text on a dark plate */
+  --text-on-accent:#ffffff;
+
+  /* ---- Hairlines / rules (fine, warm — inside compositions, NOT between sections) ---- */
+  --rule-subtle:  rgba(23,21,15,0.10);
+  --rule-default: rgba(23,21,15,0.18);  /* the editorial hairline */
+  --rule-strong:  rgba(23,21,15,0.32);
+  --ring:         #7a5230;  /* focus ring (warm, AA) */
+
+  /* ---- Accent (ONE quiet luxury accent — pick per brand) ---- */
+  --accent:        #7a2e2e;  /* oxblood (default). Alts: forest #234334, navy #1f3a5f, gold #9a7b2e */
+  --accent-hover:  #8c3838;
+  --accent-press:  #6a2727;
+  --accent-soft:   rgba(122,46,46,0.10);
+  --gold:          #9a7b2e;  /* optional metallic accent for rules/marks */
+
+  /* ---- Semantic (muted, editorial) ---- */
+  --success: #3f6b43; --success-soft: rgba(63,107,67,0.12);
+  --warning: #9a6a1e; --warning-soft: rgba(154,106,30,0.12);
+  --error:   #9b2c2c; --error-soft:   rgba(155,44,44,0.12);
+  --info:    #335a73; --info-soft:    rgba(51,90,115,0.12);
+
+  /* ---- Gradients (rare, very subtle — paper sheen only) ---- */
+  --grad-paper: linear-gradient(180deg, #faf8f3 0%, #f4f1ea 100%);
+
+  /* ---- Elevation (soft, restrained — luxury uses shadow sparingly) ---- */
+  --shadow-sm: 0 1px 2px rgba(23,21,15,0.05);
+  --shadow-md: 0 10px 30px rgba(23,21,15,0.08);
+  --shadow-lg: 0 28px 64px rgba(23,21,15,0.12);
+}
+```
+
+> Note: the default accent is **oxblood**; choose one luxury accent per brand
+> (oxblood / forest / navy / gold) and keep it singular. Avoid multiple bright colors.
+
+## Palette roles
+
+- **Paper / canvas** (`--paper*`): full-bleed section fills. Alternate `--paper`/
+  `--paper-bone` (and rarely a `--paper-ink` dark plate) to separate sections by tone —
+  **never a border**. Subtle, warm, paper-like.
+- **Surfaces** (`--surface*`): crisp white insets/cards used sparingly (a quote card, a
+  pricing inset). Luxury leans on the paper itself more than on cards.
+- **Ink text** (`--ink`, `--text-*`): ink headlines, dark body, muted captions/kickers.
+  Use `--text-on-ink` on dark plates. Never `--text-faint` for real content.
+- **Hairlines** (`--rule-*`): the editorial 1px rule — under kickers, between columns, in
+  the footer, around a pull quote. **Not** for dividing page sections.
+- **Accent** (`--accent*`, `--gold`): one quiet accent for a link, a rule, a highlighted
+  word, or an understated CTA — used sparingly. `--gold` for refined metallic rules/marks.
+- **Semantic**: muted, editorial status colors — badges/validation only.
+
+## Usage rules
+
+1. **Neutral-dominant.** ~95% warm neutrals + ink; the accent is a rare, deliberate event.
+2. **Separate sections by paper tone + whitespace, not lines.** Mandatory. Hairlines live
+   *inside* compositions only.
+3. **Almost no gradients.** At most a subtle paper sheen; never colorful gradients.
+4. **Shadows are restrained.** Luxury uses light shadow sparingly; prefer flat paper +
+   hairlines + space over heavy elevation.
+5. **Check contrast.** Ink on paper is high-contrast; verify muted captions/kickers still
+   clear AA; verify text on dark plates uses `--text-on-ink`.
+
+## Optional ink-dark theme
+
+`[data-theme="dark"]`: `--paper:#16140f; --paper-bone:#1d1a14; --paper-warm:#221e17;
+--surface:#1b1812; --ink:#f4efe4; --text-primary:#ece7da; --text-secondary:#c3bdac;
+--text-muted:#928b78; --rule-default: rgba(243,239,230,0.18); --accent:#c08552 (warm
+gold-bronze);` and re-verify contrast. **Warm light is the default identity.**

package/skills/editorial-luxury-design-system/component-library.md

@@ -0,0 +1,131 @@
+# Component Library — Editorial Luxury
+
+Specs for the 17 required components re-cast in an **editorial, luxury** idiom — kickers,
+serif headlines, pull quotes, captions, hairline rules, understated CTAs. Each: purpose,
+anatomy, tokens, states, responsive + a11y. Semantic HTML; shared tokens; **no borders
+between sections** (hairline rules belong *inside* compositions only).
+
+Shared primitives:
+
+```css
+/* Understated luxury buttons — quiet, not loud SaaS gradients */
+.btn { display:inline-flex; align-items:center; gap: var(--space-2);
+  font-family: var(--font-sans); font-weight:600; font-size:.9375rem; letter-spacing:.01em;
+  padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm);
+  border:1px solid transparent; cursor:pointer; transition: background .2s ease, color .2s ease; }
+.btn-primary { background: var(--ink); color: var(--text-on-ink); }          /* ink fill */
+.btn-primary:hover { background: var(--accent); }
+.btn-outline { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
+.btn-outline:hover { border-color: var(--ink); }
+.link-underline { color: var(--ink); text-decoration: none; padding-bottom: 2px;
+  border-bottom: 1px solid var(--rule-default); }                            /* the signature editorial link */
+.link-underline:hover { border-color: var(--ink); }
+:where(a,button,input,[tabindex]):focus-visible { outline:2px solid var(--ring);
+  outline-offset:3px; }
+```
+**Rule: CTAs are understated** — an ink/outline button or a hairline-underlined link, never
+a loud gradient.
+
+## Editorial primitives (used across components)
+- **Kicker** — small-caps, tracked label + hairline under it (see typography `.kicker`).
+- **Deck** — standfirst paragraph under a headline.
+- **Pull quote** — large italic serif breaking the measure, hairline above.
+- **Figure + caption + credit** — `<figure><img><figcaption>` with italic credit.
+- **Hairline rule** — `border-top: 1px solid var(--rule-default)` *inside* a list/footer/quote.
+- **Section number** — "01" set in serif/mono beside a section kicker.
+
+---
+
+## 1. Navbar
+Slim, quiet top bar (transparent over paper, hairline at the bottom edge only). Anatomy:
+serif/wordmark logo (left) · sans nav links (center/right, tracked) · understated CTA
+("Enquire"/"Get started") · mobile hamburger. **Extensionless hrefs** (`/about`). Optional
+refined dropdown (a clean paper panel, hairline-separated columns). Mobile: full-screen
+paper overlay, generous spacing, serif links, ESC/focus-trap. a11y: `<nav>`,
+`aria-current`, `aria-expanded`. On scroll: paper background fades in under the bar.
+
+## 2. Hero
+Layout EH-A/EH-B/EH-C. Kicker · large serif **display** H1 (offset on the grid) · deck ·
+understated CTA (`.btn-outline`/`.link-underline`) · large art-directed image (side or
+full-bleed `.bleed`). Dramatic whitespace. One H1, one quiet CTA. Decorative imagery has
+proper `alt`/credit; purely decorative → `aria-hidden`.
+
+## 3. Feature Grid → **Feature essays / plates**
+Layout F-A (essay) or F-B (alternating image↔text plates). Each feature: kicker · serif H3
+· body (offset column) · optional figure+caption. Use pull quotes to break long features.
+Prefer space + type over boxed cards.
+
+## 4. Bento Grid → **Editorial index / mosaic**
+A restrained asymmetric arrangement of plates (image + caption) and typographic tiles, or
+an **index list** (F-C) of numbered entries with hairline rules between rows. Tasteful, not
+a dense tech bento.
+
+## 5. Testimonials → **Pull quotes**
+Large italic serif **pull quotes** with attribution (name, role, small caps) + hairline
+above; or a quiet quote column. `<blockquote>` + `<cite>`. Optional slow fade carousel.
+
+## 6. Logos Section
+"As featured in / Trusted by" small-caps kicker + a refined row of logos (monochrome ink,
+`opacity:.7`), generous spacing. `<img alt="Publication/Company">`.
+
+## 7. Pricing
+Layout P-A: tiers as **quiet typographic columns** — tier name (small caps), serif amount
+(`tabular`/oldstyle figures), feature list with hairline rules, understated CTA. Highlight
+the recommended tier with a small kicker ("Recommended"), not a loud card. Monthly/annual
+toggle. a11y: real `role="switch"`/radio; `<ul>` lists.
+
+## 8. FAQ
+Layout Q-A: a numbered editorial list; serif questions; hairline rule between items;
+accordion answers (height/opacity). a11y: `aria-expanded`/`aria-controls`.
+
+## 9. CTA → **Chapter-opener CTA**
+Layout C-A: a `--paper-bone` or `--paper-ink` plate with a large serif line + deck +
+understated CTA, framed by whitespace. `--section-y-lg`, no border.
+
+## 10. Footer
+Layout FT-A: serif wordmark + small-caps column labels + links + fine print + locale.
+Hairline at the very top edge only; generous space; oldstyle figures for the year. `<footer>`,
+`<nav>` link lists.
+
+## 11. Dashboard Preview → **Editorial plate**
+Product imagery presented as an art-directed **plate** (full-bleed or inset) with a caption
++ credit, soft shadow, generous frame. Keep product UI text legible (don't tint). Decorative
+→ `aria-hidden`; informative → alt.
+
+## 12. Agent Workflow Section
+A numbered editorial sequence ("01 Plan — 02 Retrieve — 03 Act — 04 Verify") set
+typographically with hairline rules + small figures/plates; reveal in sequence. a11y: `<ol>`.
+
+## 13. Code Preview
+A restrained mono code block inset on `--surface`/`--paper-ink` with a small caption
+(filename) and copy button; hairline frame. Subtle syntax tint. `<pre><code>`; copy `aria-label`.
+
+## 14. Terminal Preview
+A quiet terminal inset (mono, prompt lines) with a caption; optional typewriter (reduced
+motion → final state). Real text, not an image.
+
+## 15. Trust Section → **Editorial figures**
+Large serif **numbers** (oldstyle/tabular) with small-caps labels, set as a typographic
+row with hairline rules — like a magazine "by the numbers". Count-up on reveal (final value
+in DOM). Accent on one figure at most.
+
+## 16. Security Section
+Compliance marks (SOC 2/ISO/GDPR/HIPAA) set quietly + short assurances as a hairline-ruled
+list + "Read our security note" `.link-underline`. Calm, factual, editorial. Badges have alt.
+
+## 17. Enterprise Section
+"For institutions / enterprise" passage: a serif headline + deck + an editorial value list
+(hairline rules) + "Speak with our team" understated CTA. No border.
+
+---
+
+## Component rules
+- **Editorial first:** kicker → serif headline → deck → body; prefer type + whitespace +
+  hairlines over boxed cards; CTAs understated.
+- Compose from shared `.btn`/`.link-underline`/tokens + the editorial primitives — no loud
+  bespoke effects.
+- Every interactive element has hover **and** `:focus-visible`; components reflow to a
+  single, well-spaced column by `md`/`sm`.
+- Images are `<figure>` with `<figcaption>` + credit; decorative visuals `aria-hidden`.
+- Hairline rules belong **inside** compositions (lists, quotes, footer) — **never between
+  page sections**. Restraint: one accent moment per section at most.

package/skills/editorial-luxury-design-system/design-principles.md

@@ -0,0 +1,77 @@
+# Design Principles — Editorial Luxury
+
+The philosophy distilled from luxury/editorial references (Aesop, Hermès, Vogue/print
+editorial, Kinfolk, Cartier, The New York Times, Stripe Press, Linear). The goal: a website
+that reads like a beautifully art-directed magazine or a luxury maison — typographic,
+spacious, restrained, and unmistakably crafted.
+
+## The one-sentence philosophy
+
+**Art direction over decoration.** Let expressive type, an asymmetric grid, and dramatic
+whitespace do the work — every page is composed like a magazine spread, with restraint as
+the ultimate luxury.
+
+## Core principles
+
+1. **Typography is the design.** A high-contrast **serif display** carries the page;
+   headlines are large, elegant, and considered. Most "visual interest" is type, scale,
+   and rhythm — not graphics or effects.
+2. **Compose on an editorial grid.** Asymmetry, generous outer margins, measured text
+   columns, off-center images, pull quotes, captions, and kickers — not centered SaaS rows.
+3. **Whitespace is luxury.** Air and pace signal quality. Give headlines and images room;
+   never crowd. Restraint reads as expensive.
+4. **Restrained, refined palette.** Mostly warm neutrals (ivory/bone/ink) + **one** quiet
+   accent used sparingly and deliberately. Color is an event, not a default.
+5. **Fine details everywhere.** Hairline rules, small-caps labels, eyebrow kickers,
+   numbered sections, drop caps, precise alignment, and tasteful figure captions.
+6. **Pace the reader.** Vary section density and image scale to create a rhythm —
+   spacious hero → dense index → full-bleed image → quiet quote — like flipping a magazine.
+7. **Quiet, elegant motion.** Gentle reveals, line-by-line heading entrances, slow image
+   "curtain" reveals. Nothing flashy. Honor `prefers-reduced-motion`.
+8. **Editorial imagery.** Large, art-directed photography/illustration with captions and
+   credits; treat images as plates in a magazine, not stock filler.
+9. **Voice matters.** Copy is considered and literary — kickers, decks, and captions are
+   part of the design. Write like an editor, not a growth team.
+10. **Consistency over novelty.** Reuse the type roles, grid, and components; a coherent
+    editorial system beats decorative one-offs.
+
+## Visual-hierarchy laws
+
+- **One H1 per page**, the largest, most beautiful serif moment on screen.
+- **Kicker → headline → deck → body.** Each section opens with a small-caps **kicker**
+  (eyebrow), then a serif headline, an optional deck (standfirst), then body.
+- **Contrast ladder:** ink headline, dark-gray body, muted captions — all AA. Serif for
+  display/headlines + pull quotes; sans for UI/body (or a refined serif body for long reads).
+- **Scale + position = hierarchy.** Big serif headline anchors; supporting text is small
+  and quiet. Use the asymmetric grid to lead the eye.
+- **One primary CTA per viewport** — understated (a hairline-underlined link or a quiet
+  filled button), never a loud SaaS gradient button.
+- **Group with whitespace + the grid + hairlines**, not boxes/borders between sections.
+- **Accent sparingly** — a single link, a rule, or one highlighted word per section.
+
+## Editorial devices (use tastefully)
+
+- **Kicker / eyebrow:** small-caps, letter-spaced label above a headline.
+- **Deck / standfirst:** a larger intro paragraph under the headline.
+- **Drop cap:** an oversized initial on a key opening paragraph (one per page max).
+- **Pull quote:** a large serif quotation breaking the column, with a hairline.
+- **Caption + credit:** small text under images (figure/figcaption), italic credit.
+- **Numbered sections / index:** "01 — Philosophy", a table-of-contents index list.
+- **Hairline rule:** a 1px ink/neutral line under kickers, between columns, in the footer.
+
+## Reference cues (what each does well)
+
+- **Aesop:** restraint, warm neutrals, serif elegance, generous space, fine detail.
+- **Hermès / Cartier:** luxury pacing, art-directed imagery, quiet motion.
+- **Kinfolk / Vogue / NYT:** magazine grid, kickers, decks, pull quotes, captions.
+- **Stripe Press / Linear:** refined typographic craft applied to tech content.
+
+## Do / Don't
+
+**Do:** lead with serif display · compose asymmetrically on a real grid · dramatic
+whitespace · kickers/decks/pull quotes/captions · hairline rules inside compositions · one
+quiet accent · art-directed imagery with credits · gentle type/image motion.
+
+**Don't:** all-sans no-serif display · centered SaaS rows · crowded layouts · loud gradient
+buttons · borders between sections · many accents · heavy effects/glass · stock filler
+images · motion that distracts · weak/default typography (the cardinal sin).