@stylecrib/cli 0.3.1 → 0.3.2

package/themes/bookstore-indie/tokens.ts

@@ -0,0 +1,147 @@
+import type { Direction } from "../schema";
+
+export const bookstoreIndie: Direction = {
+  name: "bookstore-indie" as Direction["name"],
+  ethos:
+    "Strand 18 miles of books · Powell's stacked-card warmth · City Lights beat-poet pedigree · Three Lives neighborhood serif · Greenlight handwritten staff blurbs",
+  references: [
+    { brand: "Strand Bookstore", trait: "warm cream, dense shelves, no marketing varnish" },
+    { brand: "Powell's City of Books", trait: "color-coded room signage, handwritten staff blurbs" },
+    { brand: "City Lights", trait: "literary-magazine serif, beat-poet austerity" },
+    { brand: "Three Lives & Co", trait: "neighborhood-bookstore serif, single-window display" },
+    { brand: "Greenlight Bookstore", trait: "Lora-feel body serif, staff-pick shelf as homepage" },
+  ],
+  feel:
+    "Walking into a small bookstore on a side street. Warm cream paper, generous body serif, " +
+    "handwritten-feel staff blurbs in italic. The page should feel like the staff actually read these. " +
+    "Color is sparing — a single brick-red accent for new arrivals and the staff stamp.",
+
+  fonts: {
+    display: {
+      family: "Lora",
+      fallback: ["Georgia", "Iowan Old Style", "Times New Roman", "serif"],
+      from: "Greenlight / Three Lives book-cover serif feel — readable at every size",
+      googleFont: "Lora",
+      weights: [400, 500, 600, 700],
+    },
+    body: {
+      family: "Lora",
+      fallback: ["Georgia", "Iowan Old Style", "Times New Roman", "serif"],
+      from: "single-family discipline — body in the same serif as display, smaller and lighter",
+      googleFont: "Lora",
+      weights: [400, 500],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "ISBN, event times, shelf tags — receipt-tape mono",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "calt"',
+    h1ScaleClamp: "clamp(2.25rem, 5vw, 4rem)",
+    bodyBaseSize: "1.0625rem",
+    bodyLineHeight: "1.7",
+  },
+
+  colors: {
+    background: { hsl: "38 35% 93%", from: "warm cream paperback stock — Strand / Greenlight" },
+    foreground: { hsl: "24 18% 16%", from: "warm deep ink, espresso brown — not black" },
+    card: { hsl: "38 38% 96%", from: "shelf-tag cream, one stop up from background" },
+    popover: { hsl: "38 38% 96%", from: "matches card" },
+    primary: { hsl: "8 55% 38%", from: "brick red — staff-pick stamp, new-arrivals shelf marker" },
+    primaryForeground: { hsl: "38 35% 93%", from: "cream on brick" },
+    secondary: { hsl: "38 28% 88%", from: "deeper cream — section dividers, shelf labels" },
+    secondaryForeground: { hsl: "24 18% 16%", from: "ink on shelf cream" },
+    muted: { hsl: "38 28% 88%", from: "same as secondary — single muted family" },
+    mutedForeground: { hsl: "28 10% 42%", from: "receipt-tape gray — ISBNs, event times" },
+    accent: { hsl: "38 25% 85%", from: "hover surface — cream deeper still" },
+    accentForeground: { hsl: "24 18% 16%", from: "ink on hover" },
+    border: { hsl: "30 15% 78%", from: "shelf-edge wood-tone hairline" },
+    input: { hsl: "30 15% 78%", from: "same as border" },
+    ring: { hsl: "8 55% 38%", from: "brick red — focus" },
+    destructive: { hsl: "0 60% 42%", from: "out-of-stock indicator" },
+    destructiveForeground: { hsl: "38 35% 93%", from: "cream on destructive" },
+    brand: {
+      ink: { hsl: "24 18% 16%", from: "espresso ink — semantic foreground" },
+      cream: { hsl: "38 35% 93%", from: "paperback cream — semantic background" },
+      brick: { hsl: "8 55% 38%", from: "staff-pick brick — also semantic primary" },
+      sage: { hsl: "100 18% 42%", from: "event-listing sage green — readings, signings" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96],
+    containerMax: "max-w-5xl",
+    containerPadding: "px-6 lg:px-10",
+    sectionPadding: {
+      hero: "pt-24 pb-14 lg:pt-36 lg:pb-20",
+      default: "py-16 lg:py-24",
+      tight: "py-10 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0.125rem",
+    pillsAllowed: false,
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "hairline-bottom":
+        "0 1px 0 0 hsl(var(--border))",
+      "shelf-tag":
+        "0 1px 0 0 hsl(var(--border)), inset 0 0 0 1px hsl(var(--border))",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1000,
+      loop: 4000,
+      ambient: 30000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(16px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1000,
+        iteration: "once",
+        purpose: "shelf entrance — quiet, page-turn feel",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Text-link CTAs with brick-red on hover; 'Buy from us' is the single solid-fill — brick bg + cream text. " +
+      "Pills disallowed — shelf tags are rectangular.",
+    card:
+      "Hairline border, slight cream-tier shift from background. Padding p-6 lg:p-8. " +
+      "Title in display serif italic; author in display serif roman; staff blurb in body serif italic.",
+    input:
+      "Border-bottom only (1px ink). Label above in mono uppercase, small.",
+    cta:
+      "Text-link with ink, hover transitions to brick. Never a chip, never a gradient. " +
+      "'Buy local' is the single exception — solid brick rectangle with cream text.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.2)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/brutalist/THEME.md

@@ -0,0 +1,96 @@
+# Design Direction — Brutalist
+
+## Ethos
+System defaults · monospace prominence · Hacker News pedigree · IA Writer restraint · Bear blog purity · Berkeley Mono dignity
+
+## Feel
+Raw HTML feel taken seriously. System default fonts, no off-whites, no soft shadows, no rounded corners, no animations. Dense information with monospace prominence for technical content. The opposite of "polished" — but composed and intentional, not just bare.
+
+## Reference brands
+- **Hacker News** → raw-web orange, system fonts, no chrome. The page is the data.
+- **IA Writer** → monospace dignity, prose discipline. The cursor matters more than the canvas.
+- **Berkeley Mono showcase** → monospace as a first-class display face, not a code-block ghetto.
+- **Bear blog** → default-stylesheet purity. The browser already shipped a stylesheet; respect it.
+- **Wikipedia** → browser-default link colors, unstyled hierarchy. Blue means link. Purple means visited.
+- **Unix man pages** → tabular density, no decoration. Information is the design.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` traces to a brand·trait — Hacker News, IA Writer, Wikipedia, Bear blog, or Unix heritage. Brand tokens: `--link-blue` (browser-default unstyled `<a>` color), `--visited-purple` (browser-default visited color), `--hn-orange` (= primary), `--meta-gray` (Hacker News meta-text gray).
+
+Surface stack is **almost nonexistent**: `bg` and `card` and `popover` are all the same pure white. `secondary`, `muted`, and `accent` collapse into a single near-white (`0 0% 96%`). Depth never comes from fill differentiation; it comes from **1px black borders**. Brutalist refuses to invent intermediate grays.
+
+## Typography
+- **Display:** the system UI stack (`-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui`). There is no custom display face — size is the only hierarchy tool, and it's used sparingly. H1 clamps at `clamp(1.25rem, 2.5vw, 1.75rem)` — barely larger than body.
+- **Body:** Georgia (the IA Writer / Bear blog move). The browser already shipped a body serif on every OS; brutalist uses it instead of pulling 80kb of webfont over the wire. **16px**, line-height **1.5**.
+- **Mono:** Berkeley Mono (with JetBrains Mono, SF Mono, ui-monospace as fallback). **Prominent throughout** — IDs, timestamps, file paths, code, metrics, tables. Mono is not a special case in this language; it's a co-equal voice.
+
+Font features: `"tnum", "zero"` — tabular figures + slashed zero, Unix man-page heritage. Heading tracking is `0` — system fonts ship with correct tracking and we don't override it.
+
+## Spacing
+- **Container:** `max-w-4xl px-3 lg:px-4` — Hacker News column width is roughly 85ch; brutalist sits there. Not full-bleed (utility), not narrow (editorial).
+- **Section padding tiers:**
+  - Hero: `pt-6 pb-4 lg:pt-8 lg:pb-6` — **there is no hero**. The first paragraph is the hero.
+  - Default: `py-6 lg:py-8`
+  - Tight: `py-3 lg:py-4`
+- **Allowed scale values:** 2 4 6 8 12 16 20 24. **Tight and finite.** No 32, no 48, no 64 — brutalist refuses to luxuriate. The `2` step is for inline icon-to-text gaps; nothing else uses it.
+
+## Color
+No hex anywhere. **Pure white (`0 0% 100%`) and pure black (`0 0% 0%`) are the foundation** — the opposite stance from editorial and dense-utility, which both forbid them. Off-whites, slates, and warm papers are out of language. Primary is **Hacker News orange** (`24 100% 50%`) — the canonical "raw web" accent, used only for the topbar mark, the focus ring, and the selection highlight.
+
+`--link-blue` and `--visited-purple` are intentional. Browser-default link colors are the most honest UI affordance the web has, and brutalist will not paint over them.
+
+## Radius
+`--radius: 0`. **Sharp corners only.** Pills are disallowed (`pillsAllowed: false`) — status badges, rounded inputs, and capsule buttons all read web-app, not brutalist. If you need to differentiate, use a border or change the text.
+
+## Shadows
+**None.** Single utility: `.border-1px` (`inset 0 0 0 1px var(--border)`) — the literal 1px default table rule, expressed as a shadow because some shadcn primitives expect a shadow class. Drop shadows, glows, and soft elevations do not exist in this language.
+
+## Motion
+**None.** The `keyframes` map is intentionally empty. Reveal, loop, and ambient durations are all `0 ms`. Brutalist rejects ambient motion entirely — no entrance fades, no hover transitions, no spinners (use the text "loading..." instead), no parallax, no scroll-triggered anything.
+
+`respectsReducedMotion: true` — honored as a matter of principle, though in practice there is nothing to reduce. Easing stays in the schema for parity but has no callers.
+
+## Component patterns
+- **Buttons:** underlined text links only. Primary, secondary, and CTA all render as `<a>` with underline. Solid filled buttons are antithetical. The one permitted exception: form submits MAY render as the default browser `<input type=submit>` — the `[submit]` look — because honoring the browser default is on-direction.
+- **Cards:** 1px solid black border, no fill differentiation from background, no shadow, no radius. Padding `p-3 lg:p-4`. Titles are bold body weight; no display face, no size jump beyond ~1.125x.
+- **Inputs:** full 1px black box (border, not bottom-only), no radius, system font, 16px. Label is a plain `<label>` above the field — no placeholder-as-label. Focus uses the browser default ring.
+- **CTAs:** underlined text link in `--link-blue` (or `--primary` for the loud one). **Never a chip, never a rect, never a gradient.** Visited links use `--visited-purple` — intentional, not a bug.
+
+## Component families
+None at install time. If component families emerge (e.g. comment threads, news listings), they will mirror Hacker News conventions: indented `<ul>` for threads, rank-number prefix for listings, mono `--meta-gray` for bylines and timestamps.
+
+## Recommended rich media
+Brutalist rejects most rich media. The on-direction options are narrow and intentional:
+
+- **ASCII art** — diagrams, dividers, banner text. The most on-direction visual element this language has.
+- **System emoji as captioned figures** — a single emoji glyph with a `<figcaption>` underneath, framed like a tiny museum label. Used sparingly.
+- **Low-res screenshots presented frankly** — no shadow, no border-radius, no padding. The pixels are the content. PNG or GIF, not WebP fanciness.
+- **Text-as-image only if necessary** — e.g. poster art, scanned document, a screenshot of a terminal session.
+
+**AI tool recommendations: rarely needed.** When AI generation is used, pick tools that don't add gloss: ASCII-art generators, dithered-image converters (e.g. `dither-me-this`), 1-bit pixel art tools. Avoid anything that markets "photorealism," "cinematic," or "4K."
+
+**Aspect ratios:** respect the natural aspect of the source image. No cropping to a system, no 16:9 conformity, no square-format Instagram grids. If a screenshot is 1438×612, ship it at 1438×612.
+
+**What to AVOID:**
+- Stock photography of any kind.
+- AI-glossy hero images (Midjourney "epic cinematic" output).
+- Video backgrounds and looping reels.
+- Decorative SVG (blobs, swooshes, abstract gradients).
+- Glassmorphic anything.
+- Lens flare, bokeh, depth-of-field tricks.
+- Gradients of any kind — linear, radial, mesh.
+
+**Honest constraint:** a brutalist site that uses **zero AI-generated rich media** is more on-direction than one that uses any. If you can ship the page without an image, ship it without an image.
+
+**Accessibility:** alt-text is the design constraint. If you can't describe an image in one plain sentence, you don't need the image. Brutalist's commitment to "the text is the page" means every figure must survive alt-text-only consumption.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.3)` background, foreground text. HN-orange highlight — the only place orange touches body text.
+- **Focus ring:** `2px solid hsl(var(--ring))` — close to the browser default. Brutalist does not minimize the focus ring; accessibility is on-direction.
+- **Scrollbar:** **auto** (browser default). Brutalist does not restyle the scrollbar — that's a soft-modern affordance.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/brutalist/tokens.ts

@@ -0,0 +1,151 @@
+import type { Direction } from "../schema";
+
+export const brutalist: Direction = {
+  name: "brutalist",
+  ethos:
+    "System defaults · monospace prominence · Hacker News pedigree · IA Writer restraint · Bear blog purity · Berkeley Mono dignity",
+  references: [
+    { brand: "Hacker News", trait: "raw-web orange, system fonts, no chrome" },
+    { brand: "IA Writer", trait: "monospace dignity, prose discipline" },
+    { brand: "Berkeley Mono showcase", trait: "monospace as a first-class display face" },
+    { brand: "Bear blog", trait: "default-stylesheet purity" },
+    { brand: "Wikipedia", trait: "browser-default link colors, unstyled hierarchy" },
+    { brand: "Unix man pages", trait: "tabular density, no decoration" },
+  ],
+  feel:
+    "Raw HTML feel taken seriously. System default fonts, no off-whites, no soft " +
+    "shadows, no rounded corners, no animations. Dense information with monospace " +
+    "prominence for technical content. The opposite of polished — but composed and " +
+    "intentional, not just bare.",
+
+  fonts: {
+    display: {
+      family: "-apple-system",
+      fallback: ["BlinkMacSystemFont", "Segoe UI", "system-ui", "sans-serif"],
+      from: "no custom display face — Hacker News stance: system UI stack, size is the only hierarchy",
+      weights: [400, 700],
+    },
+    body: {
+      family: "Georgia",
+      fallback: ["Iowan Old Style", "Times New Roman", "serif"],
+      from: "IA Writer / Bear blog default-serif body — the browser already shipped a body face",
+      weights: [400, 700],
+    },
+    mono: {
+      family: "Berkeley Mono",
+      fallback: ["JetBrains Mono", "SF Mono", "ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
+      from: "Berkeley Mono showcase — monospace as a first-class face, not a code-block ghetto",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "0",                 // system fonts ship with correct tracking; do not adjust
+    bodyTracking: "0",
+    fontFeatureSettings: '"tnum", "zero"', // tabular figures + slashed zero — terminal/man-page heritage
+    h1ScaleClamp: "clamp(1.25rem, 2.5vw, 1.75rem)",  // small — Hacker News H1 is barely larger than body
+    bodyBaseSize: "1rem",                  // 16px — the browser default, not a designer's 17px or 14px
+    bodyLineHeight: "1.5",
+  },
+
+  colors: {
+    background: { hsl: "0 0% 100%", from: "pure white — no warm bias, no cream paper trick (Hacker News, Bear blog)" },
+    foreground: { hsl: "0 0% 0%", from: "pure black — no slate, no ink, no softening (Wikipedia body color)" },
+    card: { hsl: "0 0% 100%", from: "same as background — surfaces don't differentiate by fill in brutalist" },
+    popover: { hsl: "0 0% 100%", from: "same as background — depth via 1px border, never fill" },
+    primary: { hsl: "24 100% 50%", from: "Hacker News orange — the canonical raw-web accent" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on HN orange — the original bar at the top of news.ycombinator.com" },
+    secondary: { hsl: "0 0% 96%", from: "Hacker News pale background bar (#f6f6ef-equivalent), used only for the thinnest secondary surface" },
+    secondaryForeground: { hsl: "0 0% 0%", from: "pure black on the HN bar" },
+    muted: { hsl: "0 0% 96%", from: "same as secondary — brutalist refuses to invent extra grays" },
+    mutedForeground: { hsl: "0 0% 33%", from: "Hacker News meta-text gray (#828282-equivalent) — author lines, timestamps" },
+    accent: { hsl: "0 0% 96%", from: "same as secondary — hover state, no new color" },
+    accentForeground: { hsl: "0 0% 0%", from: "pure black on hover" },
+    border: { hsl: "0 0% 0%", from: "pure black 1px border — the literal default browser table rule" },
+    input: { hsl: "0 0% 0%", from: "same as border — inputs are 1px black boxes, like a 1995 form" },
+    ring: { hsl: "24 100% 50%", from: "HN orange — focus only, matches primary" },
+    destructive: { hsl: "0 100% 40%", from: "browser-default error red — the unstyled <strong> warning color" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on red" },
+    brand: {
+      "link-blue": {
+        hsl: "240 100% 40%",
+        from: "browser-default unstyled <a> blue — Wikipedia, Bear blog, every honest hyperlink since 1993",
+      },
+      "visited-purple": {
+        hsl: "280 60% 40%",
+        from: "browser-default visited-link purple — intentional, not a bug",
+      },
+      "hn-orange": {
+        hsl: "24 100% 50%",
+        from: "Hacker News orange — also semantic primary; named here for component-level clarity",
+      },
+      "meta-gray": {
+        hsl: "0 0% 33%",
+        from: "Hacker News meta text — bylines, scores, comment counts",
+      },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [2, 4, 6, 8, 12, 16, 20, 24],   // tight, finite — brutalist refuses to luxuriate
+    containerMax: "max-w-4xl",              // ~896px — Hacker News column width is ~85ch; not full-bleed, not narrow
+    containerPadding: "px-3 lg:px-4",
+    sectionPadding: {
+      hero: "pt-6 pb-4 lg:pt-8 lg:pb-6",   // there is no hero — first paragraph is the hero
+      default: "py-6 lg:py-8",
+      tight: "py-3 lg:py-4",
+    },
+  },
+
+  radius: {
+    base: "0",                              // sharp corners only — pills disallowed
+    pillsAllowed: false,
+  },
+
+  shadows: {
+    style: "none",
+    utilities: {
+      "border-1px":
+        "inset 0 0 0 1px hsl(var(--border))",  // the only utility — literally a 1px border, the default table rule
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",  // unused in practice; kept for schema parity
+    durations: {
+      reveal: 0,                            // no entrance animations
+      loop: 0,                              // no loops
+      ambient: 0,                           // no ambient motion
+    },
+    keyframes: {},                          // intentionally empty — brutalist rejects ambient motion entirely
+    respectsReducedMotion: true,            // honored, but there is nothing to reduce
+  },
+
+  density: "high",
+
+  patterns: {
+    button:
+      "Underlined text links only — primary, secondary, and CTA all render as <a> with underline. " +
+      "Solid filled buttons are antithetical to brutalist. The one exception: form submits MAY render as the " +
+      "default browser button (<input type=submit>) — that is, [submit] — because honoring the browser default " +
+      "is on-direction.",
+    card:
+      "1px solid black border, no fill differentiation from background, no shadow, no radius. " +
+      "Internal padding is tight (p-3 lg:p-4). Title is bold body weight — no display face, no size jump beyond ~1.125x.",
+    input:
+      "Full 1px black box (border, not bottom-only), no radius, system font, 16px. " +
+      "Label is a plain <label> above the field. No placeholder-as-label. Focus is the browser default ring.",
+    cta:
+      "Underlined text link in `--link-blue` (or `--primary` for the loud one). Never a chip, never a rect, never a gradient. " +
+      "Visited links use `--visited-purple` — intentional.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.3)",   // HN-orange highlight on selection — the only place orange touches body text
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring))",     // 2px solid — close to the browser default, not minimized away
+    scrollbarStyle: "auto",                       // browser default — brutalist does not restyle the scrollbar
+  },
+};

package/themes/business-tiles/THEME.md

@@ -0,0 +1,141 @@
+# Design Direction — Business-Tiles
+
+## Ethos
+SAP Fiori 3 principles · Fiori tile dashboards · S/4HANA enterprise utility · 72-typeface humanism · process-friendly enterprise
+
+## Feel
+Enterprise productivity that doesn't feel hostile. SAP's iconic Fiori tile dashboard pattern. Soft cool-gray backgrounds, SAP-blue signal color, friendly rounded utility. Reads as "ERP that's actually been used by humans recently." The opposite of stuffy enterprise — process-aware but approachable.
+
+## Reference brands
+- **SAP Fiori 3** → the tile-dashboard design language. Cool-gray canvas, SAP blue accent, white tiles, hairline borders.
+- **S/4HANA** → SAP's flagship ERP — the marketing register for enterprise utility made approachable.
+- **SAP Ariba** → procurement screens. Tables, line items, approval workflows.
+- **SAP Concur** → expense surfaces. Forms over rigid workflow, made friendlier than spreadsheet-era enterprise.
+- **SAP Build Apps** → low-code tooling. Tile-first information architecture, process-aware composition.
+
+## Brand-book customization
+Fiori is one of the most opinionated enterprise systems in the world; this direction ships as a faithful open-source approximation, with explicit hooks for licensed SAP customers to swap in their own brand assets.
+
+### SAP72 typeface licensing
+SAP's proprietary type family is **72** (sometimes referenced as **SAP72**). It is **not free**: it ships with SAP products under SAP's own license terms and is not available on Google Fonts or in commercial font-licensing marketplaces under that name. This direction ships with **Inter** as the open-source fallback — Inter is the closest widely-available humanist sans and matches 72's rhythm closely enough that screens read on-brand to non-SAP users.
+
+**For SAP customers:** if your organization has a 72 license (typically bundled with SAP UI5 / Fiori Launchpad entitlements), swap 72 into the font stack ahead of Inter in `tokens.ts` and `src/index.css`. The fallback chain (`"72", "SAP72", ...`) is already wired so installing the licensed face locally activates it without code changes. Do **not** redistribute 72 in a public web build for non-SAP customers — host it on an authenticated origin or behind a customer-only CDN.
+
+### Override hooks
+- **Corporate brand color** → override `--primary` as an HSL triple. SAP blue (`218 100% 35%`) is the default; SAP partners (Magenta Telekom, Allianz, Mercedes) typically substitute their own corporate signal here. The focus ring, selection background, and emphasized CTA gradient all derive from `--primary`, so a single token swap re-themes the whole surface.
+- **Tile chrome** → `--tile-bg` (default `0 0% 100%`) and `--tile-border` (default `213 14% 86%`) control every dashboard tile. To dial in a darker dashboard register (Fiori Quartz Dark equivalent), drop tile-bg lightness and lift tile-border accordingly.
+- **SAP product modules** — each SAP suite product carries a Fiori variant accent color, documented in SAP's design specs. Map them to brand tokens or scope-local overrides as needed:
+  - **Ariba** → procurement orange. Map to `--accent-orange` or override `--accent` on Ariba-scoped screens.
+  - **Concur** → travel/expense teal. Override `--accent` on Concur-scoped screens; `--info-blue` is the next-closest default.
+  - **SuccessFactors** → HR violet. Add a `--sf-violet` brand token and route it through the accent surface on HR-scoped screens.
+  - **Fieldglass** → contingent-workforce magenta. Add as `--fg-magenta` brand token, treat like SuccessFactors.
+  - **Customer Experience (CX)** → SAP blue, unchanged.
+The default direction stays in SAP-blue-canonical territory; product-specific accents are opt-in via scoped CSS variables, not by re-theming the whole token set.
+
+## Tokens
+HSL triples in `src/index.css`. Surface stack: `--background` (`213 14% 95%`, Fiori cool-gray canvas) sits *below* `--card` / `--tile-bg` (`0 0% 100%`, white tile) — the inversion-from-dark-themes is intentional and is the visual signature of Fiori. Depth comes from the canvas-to-tile lightness gap plus a 1px `--tile-border` and the `.shadow-tile` utility.
+
+Brand tokens:
+- `--tile-bg` — Fiori tile surface (white).
+- `--tile-border` — Fiori tile hairline border, structural at dashboard density.
+- `--info-blue` (`200 100% 42%`) — Fiori info blue, links, informational chips.
+- `--accent-orange` (`28 100% 50%`) — Fiori warning orange, in-progress workflow states.
+- `--success-green` (`140 50% 40%`) — Fiori success green, positive semantic state.
+- `--sap-blue` — alias for `--primary`, used in marketing surfaces where the brand name is invoked literally.
+
+Semantic discipline:
+- **SAP blue** — primary, links, active state, focus.
+- **Success green** — successful posting, approved, completed.
+- **Accent orange** — warning, in-progress, awaiting approval.
+- **Destructive red** — error, rejected, destructive actions.
+- **Info blue** — informational, neutral notification.
+
+## Typography
+- **Display:** Inter, weights 400/500/600/700. Stand-in for SAP 72. H1 uses `clamp(1.5rem, 3vw, 2.25rem)` — restrained, because ERP body is the work.
+- **Body:** Inter, 14px (`0.875rem`), line-height 1.5, tracking `0`. Fiori is high-density and body-first.
+- **Mono:** JetBrains Mono, weights 400/500. Used for document numbers, GL accounts, posting keys, purchase order IDs.
+
+Font features: `"tnum", "ss01"` — tabular figures for financial tables, Inter stylistic set 01 for the closer-to-72 letterforms.
+
+## Spacing
+- **Container:** `max-w-screen-2xl px-4 lg:px-6` — wide; Fiori dashboards claim the screen.
+- **Section padding tiers:**
+  - Hero (rare on ERP surfaces): `pt-10 pb-8 lg:pt-14 lg:pb-10`
+  - Default: `py-8 lg:py-12`
+  - Tight: `py-4 lg:py-6`
+- **Allowed scale:** **2** 4 6 8 10 12 16 20 24 32 40 48 64. The `2` step exists for icon-to-label gaps inside tiles and table cells.
+
+High density. The reference is the Fiori Launchpad tile grid and S/4HANA work-list screens, not a marketing page.
+
+## Color
+No hex anywhere. Pure black is forbidden (`--foreground` is `220 35% 22%`, a deep slate). Pure white *is* used for `--tile-bg` — this is Fiori canon: white tiles on a cool-gray canvas, not card-on-card-on-card. The blue bias in the gray (`213 14% 95%`) reads as enterprise / data / process, not as warm-luxury or cold-medical.
+
+## Radius
+`--radius: 0.25rem` (4px). **Fiori tile radius — modest, productivity-grade.** Pills are allowed (`pillsAllowed: true`) for status chips, severity badges, and document-type tags — SAP convention. Avoid larger radii: anything above 6px reads as consumer/marketing, not ERP.
+
+## Shadows
+Style is **"soft"**. Three utilities:
+- `.shadow-tile` — `0 1px 2px hsl(220 35% 22% / 0.06), 0 1px 1px hsl(220 35% 22% / 0.04)`. The default tile drop on the cool-gray canvas.
+- `.shadow-tile-hover` — lifts on hover; the canonical Fiori tile interaction. `0 4px 8px ..., 0 2px 4px ...`.
+- `.shadow-tile-focus` — `0 0 0 2px hsl(var(--primary) / 0.4)`. Focus ring as shadow for the keyboard-driven tile grid.
+
+Soft, restrained, productivity-grade. No marketing elevation stacks; no glow.
+
+## Motion
+- **Easing:** `cubic-bezier(0.22, 1, 0.36, 1)`
+- **Duration tiers:** reveal **200ms** (entry), exit **150ms**, ambient 0 (no ambient motion). Business-paced — not theatrical, not snappy.
+- **Keyframes:**
+  - `fade-in` (200ms) — entry fade for tiles, popovers, menus, dialog content.
+  - `tile-lift` (200ms) — small Y-translate + opacity on tile hover/load. The signature Fiori gesture.
+  - `fade-out` (150ms) — exit fade for popovers, menus, dismissed dialogs.
+
+**Deliberate, business-paced.** No bounce, no spring, no parallax, no ambient drift. `prefers-reduced-motion` honored throughout.
+
+## Component patterns
+- **Buttons:** primary = solid SAP blue, white text, 4px radius, weight 600. Secondary = ghost with input border. **Emphasized** = filled SAP blue with subtle top-to-bottom gradient — reserved for the single most important action on a process screen (Submit, Post, Approve, Release). Sizes: small (`h-7 px-2.5 text-xs`) and default (`h-8 px-3 text-sm`).
+- **Cards (Fiori tiles):** `rounded-sm` (4px), `bg-tile-bg` (white), 1px `tile-border`, `.shadow-tile` drop. Tight padding (`p-4 lg:p-5`). Tile header uses a bottom hairline. Hover lifts to `.shadow-tile-hover`; focus uses `.shadow-tile-focus`.
+- **Inputs:** compact (`h-8 text-sm`), 1px input border, `bg-tile-bg`, `rounded-sm`. Focus uses a 2px SAP-blue ring (Fiori expects a visible keyboard ring; this is the only direction in the library that doesn't go 1px). Inline validation in destructive red; warning orange for in-progress process state.
+- **CTAs:** primary = SAP-blue button. Secondary = ghost. Emphasized = gradient SAP-blue, one per process screen. Marketing-style double-CTAs do not exist in this language — ERP screens have one verb.
+
+## Component families
+**Fiori tiles** (`*Tile`, `*KPITile`, `*LaunchpadTile`): the signature pattern. White rectangle, 4px radius, hairline border, soft drop, hover lift. KPI tiles render a label, a large numeric value (tabular figures), and a small trend indicator or icon. Launchpad tiles render an icon + label + count badge.
+
+**Process pills** (`*StatusPill`, `*WorkflowBadge`): rounded-full, text-xs, semantic bg + fg. Green for completed, accent-orange for in-progress, destructive for rejected, info-blue for informational, muted for draft.
+
+**Data tables** (`*Table`, `*WorkList`): tabular figures, mono numeric columns, `border-collapse`, 1px row borders matching `--tile-border`. Header row uses muted-foreground; selected row uses a faint primary tint (`hsl(var(--primary) / 0.08)`).
+
+## Recommended rich media
+SAP-Fiori is **dashboard-heavy and process-diagram-heavy**, with **conservative business photography** when humans appear at all. The aesthetic is "the screen at 11am on Tuesday at a Fortune 500 finance department" — not lifestyle, not marketing.
+
+**Hero media:**
+- **Dashboard tile screenshots** — real Fiori Launchpad captures or close approximations. White tiles on cool-gray canvas, clear KPI hierarchy. Present frankly: no decorative crop, no shadow stack.
+- **KPI cards** rendered inline — large tabular numeric, trend indicator, label, period. Use the brand semantic palette (success green up, destructive red down, accent orange flat-but-attention).
+- **Process-flow diagrams** — SAP's "happy path" workflow visualization: numbered steps, swimlanes for roles (Requester → Approver → Buyer → Finance), arrow connectors. Two-to-three color: SAP blue for steps, accent orange for in-progress, success green for completion.
+- **Conservative business photography** — people in offices, at meetings, at desks. **Not** lifestyle, not airy startup photography, not laptops-in-coffee-shops. The register is "annual report photo," not "Series-B landing page." Neutral office interiors, business-formal or smart-casual attire, real conference-room lighting.
+
+**AI tool recommendations:**
+- **Recraft** — primary recommendation for **tile illustrations** ("flat illustration of a procurement workflow, two-color SAP blue and accent orange, white background, simple line icons, no shadows"). Recraft's flat-illustration capability matches Fiori's icon-illustration register exactly.
+- **Excalidraw** — process-flow diagrams when a hand-drawn-but-precise feel works.
+- **Mermaid** — declarative process flow and BPMN-lite diagrams that update with the code.
+- **Carbon (carbon.now.sh)** — only if rendering code snippets (rare in Fiori surfaces; ERP screens don't usually show code).
+
+**Avoid heavy photography.** Fiori surfaces are dashboards first; photography appears only on marketing landing pages and customer-story sections. When photography does appear, it should be conservative business documentary, not lifestyle. **No** stock-photo handshakes, **no** abstract glass-tower architecture shots, **no** smiling-headset call-center photos.
+
+**Aspect ratios:** 16:9 for dashboard captures and process diagrams; 4:3 for documentation screenshots; 3:2 for business photography (matches editorial-photo conventions); natural aspect for KPI inline media.
+
+**Performance:** SVG diagrams inline (≤8 KB each); screenshots ≤120 KB AVIF at 1.5x device pixel ratio; photography ≤200 KB AVIF. LCP target <1.5s — Fiori users run these surfaces on locked-down corporate networks and Citrix sessions.
+
+**Avoid:** lifestyle photography, gradient meshes, glassmorphic anything, autoplay video, 3D product renders, purple/pink gradients, decorative SVG ornament, lens flare, dark-mode marketing aesthetic, AI-generated photorealistic humans, anything that signals consumer/startup/AI-fad rather than ERP/process/Fortune-500.
+
+**Accessibility:** WCAG AA on `213 14% 95%` background requires foreground at `220 35% 22%` (well above AA). SAP blue on tile white passes AA at all sizes. Color-coding (green/orange/red/blue) needs a non-color signal (icon, text label) — colorblind users matter especially in process screens where status conveys workflow position.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.2)` background, foreground text — SAP blue tint, subtle.
+- **Focus ring:** `2px solid hsl(var(--ring))` — Fiori is keyboard-friendly and the ring should be visible; this is the only direction in the library that goes 2px instead of 1px.
+- **Scrollbar:** auto — Fiori respects the OS scrollbar convention (Windows enterprise machines expect the system scrollbar).
+
+## Exceptions
+None yet. Add intentional violations here (e.g., a darker Fiori Quartz Dark variant for night-shift operations centers, or a customer-branded theme that swaps `--primary` to a corporate signal color).
+
+## Revisions
+- Initial direction, generated at install time. Authored as the ERP-suite counterpart to the dense-utility (developer-tools) and enterprise-tech (semiconductor/infrastructure) directions — Fiori covers the process-aware, dashboard-tile, ERP register that those don't.