@cyberskill/design 1.0.0 → 1.1.0

package/DESIGN.md

@@ -1,6 +1,6 @@
 ---
 name: "CyberSkill Design System"
-version: "1.0.0"
+version: "1.1.0"
 generated: "2026-07-23"
 generator: "scripts/generate-design-md.mjs (npm run build:design-md)"
 sources:
@@ -13,13 +13,13 @@ gate: "_audit/design-md-parity.html (window.__designmd)"
 
 > GENERATED FILE — do not edit by hand. Regenerate with `npm run build:design-md` after any token change; the `design-md-parity` gate fails on drift. This is the single-file open-spec surface for design tools and agents that read a root `DESIGN.md` (e.g. Google Stitch); the deep machine contract stays `tokens/tokens.dtcg.json`.
 
-> **Stitch / non-DC consumers:** do **not** treat `templates/**/*.dc.html` as source of truth — those files need the Design Components compiler (tweaks, `__dcSetProps`). Generate static UI from this file + DTCG + `styles.css` / `.cs-*` / `templates/kitchen-sink.html` / `examples/static-hello/`. Claude Code starts at `SKILL.md` and may use `_esm/cs.mjs` / `_ds_bundle.js` (prefix resolve). Dual path: `docs/consuming.md`.
+> **Stitch / non-DC consumers:** do **not** treat `templates/**/*.dc.html` as source of truth — those files need the Design Components compiler (tweaks, `__dcSetProps`). Generate static UI from this file + DTCG + `styles.css` / `.cs-*` / `templates/kitchen-sink.html` / `examples/static-hello/`. Claude Code starts at `SKILL.md` and may use bundler `_esm/react.mjs` / legacy `_esm/cs.mjs` / `_ds_bundle.js` (prefix resolve). Dual path: `docs/consuming.md`.
 
 ## Brand & doctrine
 
 - **Slogan:** *Turn Your Will Into Real — Hiện Thực Hoá Ý Chí*.
 - **Immutable anchors:** Umber `#45210E` (primary brand) · Ochre `#F4BA17` (accent). Never remap; the 3px ochre focus ring is a studio-wide accessibility signature.
-- **Three axes:** Theme (light · dark) × Element (Ngũ Hành — Kim · Mộc · Thủy · Hỏa · Thổ, 15 element×variant packs) × Language (EN · VI). Surface treatment is liquid-glass (fixed).
+- **Four axes:** Theme (light · dark · system) × Element (Ngũ Hành — Kim · Mộc · Thủy · Hỏa · Thổ, 15 element×variant packs) × Language (EN · VI) × Style (`data-cs-style` — sole pack **liquid-glass**; absent ≡ default).
 - **Bilingual EN·VN rule:** Vietnamese-first — every UI string ships an EN + VN pair, diacritics preserved.
 - **Text never sits on the mid-tone `-accent`:** text goes on `-bright` or `-tint` only; `-accent` is for bars, borders, progress fills, and large non-text fills.
 - **Accessibility floor:** APCA Lc ≥ 75 body text · ≥ 44px touch targets · focus rings never removed · honour `prefers-reduced-motion` / `prefers-contrast`.
@@ -56,22 +56,23 @@ Default accent pack = Thổ (the studio's own element). All 15 element×variant
 | Token | Value |
 |---|---|
 | `--cs-accent` | `#F4BA17` |
-| `--cs-accent-strong` | `#B98200` |
+| `--cs-accent-strong` | `#A47D17` |
 | `--cs-accent-bright` | `#F4BA17` |
 | `--cs-accent-on` | `#45210E` |
 | `--cs-accent-tint` | `#FBF4E9` |
 | `--cs-accent-ink` | `#45210E` |
-| `--cs-accent-glow` | `rgba(244, 186, 23, 0.5)` |
+| `--cs-accent-glow` | `rgba(244, 186, 23, 0.48)` |
 | `--cs-accent-grad-a` | `#F4BA17` |
-| `--cs-accent-grad-b` | `#C77B4A` |
+| `--cs-accent-grad-b` | `#FCAF91` |
 
 ## Typography
 
-Families ship self-hosted (Be Vietnam Pro · JetBrains Mono, full Vietnamese unicode ranges).
+Families ship self-hosted (Be Vietnam Pro · Space Grotesk · JetBrains Mono, full Vietnamese unicode ranges). `--cs-font-family-display` is the opt-in headline face; nothing points at it by default.
 
 | Token | Value |
 |---|---|
 | `--cs-font-family-ui` | `'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif` |
+| `--cs-font-family-display` | `'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif` |
 | `--cs-font-family-mono` | `'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace` |
 | `--cs-font-weight-regular` | `400` |
 | `--cs-font-weight-medium` | `500` |
@@ -247,9 +248,9 @@ Component-level design decisions (button · textfield). Dark values are theme ov
 
 ## Components inventory
 
-99 component files · 115 exports (from `_ds_manifest.json`). Every primary ships `.jsx` + `.d.ts` + `.prompt.md`.
+105 component files · 121 exports (from `_ds_manifest.json`). Every primary ships `.jsx` + `.d.ts` + `.prompt.md`.
 
-`AIDisclosureBadge` · `Accordion` · `Alert` · `Anchor` · `Avatar` · `AvatarGroup` · `BackTop` · `Badge` · `Breadcrumb` · `Button` · `ButtonGroup` · `CS_ICONS` · `CS_LOGO_MARK_INNER` · `CS_LOGO_VIEWBOX` · `Calendar` · `Card` · `CardBody` · `CardFooter` · `CardHeader` · `Carousel` · `Cascader` · `Chart` · `ChatMessage` · `Checkbox` · `CitationList` · `CodeBlock` · `ColorPicker` · `Combobox` · `CommandPalette` · `Comment` · `ConfidenceMeter` · `ContextMenu` · `DataGrid` · `DataTable` · `DatePicker` · `DescriptionList` · `Dialog` · `Divider` · `Dock` · `Drawer` · `Editor` · `EmptyState` · `FileUpload` · `FloatingActionButton` · `Form` · `FormField` · `FormFieldArray` · `FormWizard` · `HotKeys` · `HoverCard` · `HumanReviewGate` · `Icon` · `Image` · `InlineEdit` · `InputGroup` · `InputOTP` · `Kbd` · `Link` · `List` · `ListItem` · `Logo` · `LumiAvatar` · `Masonry` · `Mentions` · `Menu` · `MenuItem` · `Menubar` · `NavItem` · `NavigationMenu` · `NumberField` · `Pagination` · `Popconfirm` · `Popover` · `ProgressBar` · `PromptInput` · `PromptSuggestions` · `QRCode` · `Radio` · `RadioGroup` · `Rating` · `Result` · `SearchField` · `SegmentedControl` · `Select` · `Sidebar` · `Skeleton` · `Slider` · `Sortable` · `Spinner` · `Splitter` · `Stat` · `StatusIndicator` · `Steps` · `Switch` · `Tab` · `Tabs` · `Tag` · `TagInput` · `Terminal` · `TextField` · `Textarea` · `TimePicker` · `Timeline` · `Toast` · `ToastStack` · `Toggle` · `Toolbar` · `Tooltip` · `Tour` · `Transfer` · `Tree` · `TreeSelect` · `TreeTable` · `TypingIndicator` · `Watermark`
+`AIDisclosureBadge` · `ChatMessage` · `CitationList` · `ConfidenceMeter` · `HumanReviewGate` · `PromptInput` · `PromptSuggestions` · `TypingIndicator` · `LumiAvatar` · `Button` · `ButtonGroup` · `FloatingActionButton` · `Accordion` · `AspectRatio` · `Avatar` · `AvatarGroup` · `Card` · `CardHeader` · `CardBody` · `CardFooter` · `Carousel` · `Chart` · `CodeBlock` · `Collapsible` · `Comment` · `DescriptionList` · `Divider` · `Image` · `Item` · `Kbd` · `List` · `ListItem` · `Masonry` · `QRCode` · `ScrollArea` · `Sortable` · `Splitter` · `Stat` · `Terminal` · `Timeline` · `Tooltip` · `Tree` · `Watermark` · `DataGrid` · `DataTable` · `TreeTable` · `Dialog` · `Alert` · `Badge` · `EmptyState` · `ProgressBar` · `Result` · `Skeleton` · `Spinner` · `StatusIndicator` · `Tag` · `ToastStack` · `Toast` · `Calendar` · `Cascader` · `Checkbox` · `ColorPicker` · `Combobox` · `DatePicker` · `Editor` · `FileUpload` · `Form` · `FormField` · `FormFieldArray` · `FormWizard` · `InlineEdit` · `InputGroup` · `InputOTP` · `Mentions` · `NativeSelect` · `NumberField` · `Radio` · `RadioGroup` · `Rating` · `SearchField` · `SegmentedControl` · `Select` · `Slider` · `Switch` · `TagInput` · `Textarea` · `TimePicker` · `Toggle` · `Transfer` · `TreeSelect` · `CS_ICONS` · `Icon` · `Logo` · `CS_LOGO_VIEWBOX` · `CS_LOGO_MARK_INNER` · `Anchor` · `BackTop` · `Breadcrumb` · `CommandPalette` · `Dock` · `HotKeys` · `Link` · `Menu` · `MenuItem` · `Menubar` · `NavigationMenu` · `Pagination` · `Sidebar` · `NavItem` · `Steps` · `Tabs` · `Tab` · `Toolbar` · `AlertDialog` · `ContextMenu` · `Drawer` · `HoverCard` · `Popconfirm` · `Popover` · `Tour` · `TextField`
 
 ## Templates
 

package/README.md

@@ -6,16 +6,16 @@
 
 ## Start here
 
-This is the **entrance document** for the CyberSkill Design System — pinned **v1.0.0** (see `VERSION`). The **product site** is Storybook at **`/`** on `design.cyberskill.world` (host-only; local: `npm run storybook`). Legacy `/dashboard`, `/dashboard.html`, and `/playground/*` redirect to `/`. One sentence: a warm, Vietnamese-first, enterprise-grade system where every surface resolves three independent axes — **Theme** (light · dark) × **Element** (Ngũ Hành product identity: Kim · Mộc · Thủy · Hỏa · Thổ, 15 variants) × **Language** (EN · VI). Surface treatment is liquid-glass (fixed).
+This is the **entrance document** for the CyberSkill Design System — LAUNCHED **v1.1.0** (see `VERSION`). The **product site** is Storybook at **`/`** on `design.cyberskill.world` (host-only; local: `npm run storybook`). Legacy `/dashboard`, `/dashboard.html`, and `/playground/*` redirect to `/`. One sentence: a warm, Vietnamese-first, enterprise-grade system where every surface resolves four independent axes — **Theme** (light · dark · system) × **Element** (Ngũ Hành product identity: Kim · Mộc · Thủy · Hỏa · Thổ, 15 variants) × **Language** (EN · VI) × **Style** (`data-cs-style` — sole pack **liquid-glass**; absent ≡ default).
 
 **Quick start by audience**
-- **Designers** — open the Design System tab and the Templates picker (84 starting points, including the 37-document lawyer-validated Employment Suite); the Identity Lab (`ui_kits/status-hub/identity-lab.html`) lets you flip axes live.
+- **Designers** — open Storybook (Foundations / Components / Maintainer surfaces) and the Templates picker (84 starting points, including the 37-document lawyer-validated Employment Suite). Flip Theme × Element × Language × Style live via the Storybook toolbar, Atomic View, and the Elements Geometry specimen.
 
-- **Claude Code / Claude Design** — read `SKILL.md` (normative Hard rules + orientation), then the guide below; compose with `styles.css` + `_esm/cs.mjs` / `_ds_bundle.js` (prefix resolve). DC `*.dc.html` templates only when the session has the compiler. Component contracts live beside each component (`.d.ts` + `.prompt.md`).
+- **Claude Code / Claude Design** — read `SKILL.md` (normative Hard rules + orientation), then the guide below; compose with `styles.css` + bundler `@cyberskill/design` (`_esm/react.mjs`) / legacy `_esm/cs.mjs` / `_ds_bundle.js` (prefix resolve). DC `*.dc.html` templates only when the session has the compiler. Component contracts live beside each component (`.d.ts` + `.prompt.md`).
 
 - **Google Stitch** — start at **`DESIGN.md`** (generated open-spec) → `llms.txt` → `tokens/tokens.dtcg.json`. Build **static** UI with `styles.css` + `.cs-*` / kitchen-sink / `examples/static-hello/`. **Do not** treat `templates/**/*.dc.html` as source of truth.
 
-- **Consuming projects** — npm package name is **`@cyberskill/design`** (see `docs/consuming.md`; grant + `NPM_TOKEN` required before registry install is an approved path). Or link **`styles.css`** from a clone/subtree (one file = everything), or copy a `templates/<slug>/` folder and edit one line in its `ds-base.js` (one-line rebind, validated end-to-end Jul 2026). Scope identity with `data-theme` · `data-cs-element` (+`data-cs-variant`) · `lang`. Release signal: tip SHA + `docs/release-notes.md` (VERSION stays **1.0.0**; no CHANGELOG).
+- **Consuming projects** — npm package **`@cyberskill/design@1.1.0`** (see `docs/consuming.md`; grant in `docs/consumer-grant.md` — still UNLICENSED). **Next/SSR:** `import { Button } from "@cyberskill/design"` (peer React). **Browser demo:** **`examples/npm-hello/`** (Lumi · Hỏa · plasma, legacy `_esm/cs.mjs`). Or link **`styles.css`** from a clone/subtree (one file = everything), or copy a `templates/<slug>/` folder and edit one line in its `ds-base.js` (one-line rebind, validated end-to-end Jul 2026). Scope identity with `data-theme` · `data-cs-element` (+`data-cs-variant`) · `lang`. Release signal: tip SHA + `docs/release-notes.md` (VERSION is **1.1.0**; no CHANGELOG).
 
 **Document map — consumers**
 
@@ -25,9 +25,10 @@ This is the **entrance document** for the CyberSkill Design System — pinned **
 | `DESIGN.md` | **This repo's** generated open-spec surface (Stitch-style) — doctrine + every token value + inventory, from DTCG; regenerate via `npm run build:design-md`. Do not hand-edit. |
 | `SKILL.md` | Agent entry — hard rules + fast orientation |
 | `docs/consuming.md` | Adopting & upgrading — Claude Code vs Stitch dual path, npm package name, axes, upgrade + extend |
-| `docs/conventions.md` | How to extend the system (naming grammar, checklists, the three axes) |
+| `docs/consumer-grant.md` | Written npm consumer grant (CyberSkill portfolio; UNLICENSED + named products) |
+| `docs/conventions.md` | How to extend the system (naming grammar, checklists, the four axes) |
 | `docs/release-notes.md` | Curated product highlights (not a changelog) |
-| `docs/design-styles.md` | The live styling axes (Theme × Element × Language) and the fixed liquid-glass treatment |
+| `docs/design-styles.md` | The live styling axes (Theme × Element × Language × Style) and the fixed liquid-glass treatment |
 | `docs/products.md` | Product → element registry (**locked** — do not invent assignments) |
 | `docs/contrast-report.md` | Generated APCA elemental sweep — 0 failures at its Lc ≥ 60 UI-label floor. Body text authors to the stricter Lc ≥ 75 floor (see Anchor immutables); the sweep's Lc ≥ 60 rows are accent/label pairings, not body text. |
 | `docs/template-schema-v2.md` | Typed content-slot spec for templates — opt-in, machine-checkable |
@@ -41,7 +42,7 @@ This is the **entrance document** for the CyberSkill Design System — pinned **
 
 | Doc | What it answers |
 |---|---|
-| `docs/decisions.md` | Recorded owner decisions + open maintainer tasks (Code Connect node IDs, npm grant/`NPM_TOKEN`, products registry) |
+| `docs/decisions.md` | Recorded owner decisions + open maintainer tasks (Code Connect deferred) |
 | `docs/ci-cd.md` | CI/CD automation — GitHub Actions workflow, headless gate runner, token-provenance pre-check, badge |
 | `docs/quality-gates.md` | Benchmark reference — every quality gate, what it asserts, pass criterion, where it runs |
 | `docs/sync.md` | Repo ↔ authoring-environment round-trip fidelity & two-way sync |
@@ -100,7 +101,7 @@ Related CyberSkill repos (not in this tree — explore for product/marketing fid
 
 **Palette — warm earth, never cold.** Umber `#45210E` grounds everything (it *is* the primary text colour); Ochre `#F4BA17` is the single accent — CTAs on dark, focus rings, highlights, the genie. Surfaces are warm paper: page `#FFFDF8`, panel `#FFFFFF`, raised `#FBF4E9`. Every neutral is warmed toward umber — borders are `#E7D9C6`, muted text `#6E5A4C`. Semantic colours (success `#166534`, danger `#B42318`, warning `#92400E`, info `#1D4ED8`) are used sparingly and never as the only signal. **Max one accent per surface** — on core surfaces that accent is Ochre; a *product* may swap in its element accent (see Elemental identity below), never add a second hue beside it. No bluish-purple gradients.
 
-**Typography.** UI/display: **Be Vietnam Pro** (300–800; a Vietnamese-first Google family). Code/data: **JetBrains Mono**. Display headings are heavy (800), tight tracking (−0.02em); body is 400/500 at 1.5. Uppercase eyebrows at 0.08–0.12em tracking. The size ramp runs xs 12 → 5xl 60 on a 16px base.
+**Typography.** UI: **Be Vietnam Pro** (300–800; a Vietnamese-first Google family) — the default for every surface, headings included. Display/headline: **Space Grotesk** (variable 300–700), the **opt-in** face behind `--cs-font-family-display`; nothing points at it until a scope opts in with `.cs-display-face`, which retargets `--cs-heading-family` and leaves body copy on the UI face. Code/data: **JetBrains Mono**. Display headings are heavy (800 on the UI face; under `.cs-display-face`, Space Grotesk tops out at 700 so 800 clamps within that family), tight tracking (−0.02em); body is 400/500 at 1.5. Uppercase eyebrows at 0.08–0.12em tracking. The size ramp runs xs 12 → 5xl 60 on a 16px base.
 
 **Spacing & layout.** 4px base grid (`--cs-space-*`); section padding lives between 64 and 96px; content max-width ~1200–1320px. Generous, calm whitespace.
 
@@ -116,7 +117,7 @@ Related CyberSkill repos (not in this tree — explore for product/marketing fid
 
 **Elemental product identity — Ngũ Hành.** The studio itself is **Thổ/Earth** (Umber + Ochre — the traditional earth-yellow); each CyberSkill *product* may take one element — **Kim** (metal) · **Mộc** (wood) · **Thủy** (water) · **Hỏa** (fire) · **Thổ** (earth) — via `data-cs-element` (+ `data-cs-variant`, e.g. Hỏa: ember · lava · plasma). Each pack sets the nine **`--cs-accent-*`** role tokens (accent / strong / bright / on / tint / ink / glow / grad-a / grad-b) defined in `tokens/elements.css`; inside the scope the element fully takes Ochre's accent roles. Never elemental: semantic statuses, and the **3px Ochre focus ring** — the studio's accessibility signature on every product. Mixing follows the cycles: a secondary element may appear only as a gradient endpoint along **Tương sinh** (Mộc→Hỏa→Thổ→Kim→Thủy→Mộc); **Tương khắc** pairs never mix. Product→element mapping lives in `docs/products.md`. **Every template carries the Element tweak** — anything that should follow the product's element must consume `--cs-accent-*`, never raw hex. **Lumi stays golden in every element** — the genie is the studio's constant; only the environment re-tints.
 
-**Surface treatment.** Liquid-glass is fixed. Surfaces resolve **Theme × Element × Language** independently.
+**Surface treatment.** Liquid-glass is fixed. Surfaces resolve **Theme × Element × Language × Style** independently.
 
 
 
@@ -137,35 +138,35 @@ Copied assets live in `assets/`: `logo-mark.svg` / `logo-mark.png` (official mas
 
 ## Components
 
-**A comprehensive library — 115 exports across 8 groups.** 99 of these are primary component files, and every primary ships the full contract trio — a `.jsx`, a `.d.ts` props contract, a `.prompt.md` — plus a Design-System card. The other 16 are co-exports (sub-parts such as `CardHeader`, `Tab`, `MenuItem`, `Radio`, and data consts such as `CS_ICONS`) documented inside their parent's files rather than with files of their own. Mount from the compiled bundle. The bundle's global is `window.CyberSkillDesignSystem_<projectId>` — the 6-hex suffix is assigned by the compiler and **changes when this system is imported into another project**, so resolve it by prefix rather than hardcoding it: `const CS = window[Object.keys(window).find(k => /^CyberSkillDesignSystem_/.test(k))]; const { Button } = CS;`
+**A comprehensive library — 121 exports across 8 groups.** 105 of these are primary component files, and every primary ships the full contract trio — a `.jsx`, a `.d.ts` props contract, a `.prompt.md` — plus a Design-System card. The other 16 are co-exports (sub-parts such as `CardHeader`, `Tab`, `MenuItem`, `Radio`, and data consts such as `CS_ICONS`) documented inside their parent's files rather than with files of their own. Mount from the compiled bundle. The bundle's global is `window.CyberSkillDesignSystem_<projectId>` — the 6-hex suffix is assigned by the compiler and **changes when this system is imported into another project**, so resolve it by prefix rather than hardcoding it: `const CS = window[Object.keys(window).find(k => /^CyberSkillDesignSystem_/.test(k))]; const { Button } = CS;`
 
 - **Core — actions & overlays** — `Button`, `ButtonGroup`, `FloatingActionButton`, `Dialog`
 
-- **Forms** — `TextField`, `Textarea`, `Select`, `Checkbox`, `RadioGroup` (+ `Radio`), `Switch`, `SearchField`, `NumberField`, `Slider`, `FileUpload`, `SegmentedControl`, `Toggle`, `Rating`, `InputOTP`, `InputGroup`, `TagInput`, `TimePicker`, `Combobox`, `Mentions`, `InlineEdit`, `ColorPicker`, `Calendar`, `DatePicker`, `Cascader`, `TreeSelect`, `Transfer`, `Editor`, `Form` (+ `FormField`, `FormFieldArray`, `FormWizard`)
+- **Forms** — `TextField`, `Textarea`, `Select`, `NativeSelect`, `Checkbox`, `RadioGroup` (+ `Radio`), `Switch`, `SearchField`, `NumberField`, `Slider`, `FileUpload`, `SegmentedControl`, `Toggle`, `Rating`, `InputOTP`, `InputGroup`, `TagInput`, `TimePicker`, `Combobox`, `Mentions`, `InlineEdit`, `ColorPicker`, `Calendar`, `DatePicker`, `Cascader`, `TreeSelect`, `Transfer`, `Editor`, `Form` (+ `FormField`, `FormFieldArray`, `FormWizard`)
 
-- **Data & layout** — `DataTable`, `DataGrid`, `TreeTable`, `Card` (+ `CardHeader`, `CardBody`, `CardFooter`), `Stat`, `Avatar` (+ `AvatarGroup`), `Tooltip`, `Divider`, `List` (+ `ListItem`), `DescriptionList`, `Timeline`, `Accordion`, `Kbd`, `CodeBlock`, `Tree`, `Comment`, `Carousel`, `Image`, `Masonry`, `Splitter`, `Sortable`, `Chart`, `Terminal`, `QRCode`, `Watermark`
+- **Data & layout** — `DataTable`, `DataGrid`, `TreeTable`, `Card` (+ `CardHeader`, `CardBody`, `CardFooter`), `Stat`, `Avatar` (+ `AvatarGroup`), `Tooltip`, `Divider`, `ScrollArea`, `AspectRatio`, `Item`, `List` (+ `ListItem`), `DescriptionList`, `Timeline`, `Accordion`, `Collapsible`, `Kbd`, `CodeBlock`, `Tree`, `Comment`, `Carousel`, `Image`, `Masonry`, `Splitter`, `Sortable`, `Chart`, `Terminal`, `QRCode`, `Watermark`
 
 - **Feedback & status** — `Badge`, `Tag`, `Alert`, `Toast` (+ `ToastStack`), `Spinner`, `ProgressBar`, `Skeleton`, `StatusIndicator`, `EmptyState`, `Result`
 
 - **Navigation** — `Tabs` (+ `Tab`), `Breadcrumb`, `Pagination`, `Menu` (+ `MenuItem`), `Sidebar` (+ `NavItem`), `Steps`, `CommandPalette`, `Menubar`, `NavigationMenu`, `Anchor`, `Toolbar`, `Dock`, `BackTop`, `Link`, `HotKeys`
 
-- **Overlays** — `Popover`, `Drawer`, `HoverCard`, `Popconfirm`, `ContextMenu`, `Tour`
+- **Overlays** — `Popover`, `Drawer`, `HoverCard`, `Popconfirm`, `AlertDialog`, `ContextMenu`, `Tour`
 
 - **AI-native** — `AIDisclosureBadge`, `HumanReviewGate`, `PromptInput`, `ChatMessage`, `ConfidenceMeter`, `PromptSuggestions`, `TypingIndicator`, `CitationList`
 
 - **Brand** — `Logo` (+ the `CS_LOGO_MARK_INNER` / `CS_LOGO_VIEWBOX` data consts), `Icon` (+ the `CS_ICONS` data const), `LumiAvatar`
 
-**Atomic tiers** — the same 115 exports seen through the design-composition lens (browsable live in `guidelines/atomic-view.html`, where one toolbar reskins every tier across Theme × Element × Language). The eight groups above are the *functional/import* grouping (how the bundle is organized); these tiers are the *composition* grouping — same components, two lenses.
+**Atomic tiers** — the same 121 exports seen through the design-composition lens (browsable live in `guidelines/atomic-view.html`, where one toolbar reskins every tier across Theme × Element × Language × Style). The eight groups above are the *functional/import* grouping (how the bundle is organized); these tiers are the *composition* grouping — same components, two lenses.
 
-- **Atoms** (indivisible primitives) — `Button`, `Icon`, `Badge`, `Tag`, `StatusIndicator`, `Spinner`, `ProgressBar`, `Skeleton`, `Avatar` (+ `AvatarGroup`), `Divider`, `Kbd`, `Logo`, `LumiAvatar`, `Toggle`, `Link`
+- **Atoms** (indivisible primitives) — `Button`, `Icon`, `Badge`, `Tag`, `StatusIndicator`, `Spinner`, `ProgressBar`, `Skeleton`, `Avatar` (+ `AvatarGroup`), `Divider`, `AspectRatio`, `Item`, `Kbd`, `Logo`, `LumiAvatar`, `Toggle`, `Link`
 
-- **Molecules** (a few atoms bonded into one control) — `TextField`, `Textarea`, `Select`, `Checkbox`, `RadioGroup`, `Switch`, `SearchField`, `NumberField`, `Slider`, `FileUpload`, `SegmentedControl`, `Tabs`, `Breadcrumb`, `Pagination`, `Menu`, `Steps`, `Stat`, `Card`, `Tooltip`, `List`, `DescriptionList`, `CodeBlock`, `Alert`, `Toast`, `ConfidenceMeter`, `AIDisclosureBadge`, `PromptSuggestions`, `TypingIndicator`, `CitationList`, `Rating`, `InputOTP`, `ButtonGroup`, `Combobox`, `InputGroup`, `TagInput`, `TimePicker`, `HoverCard`, `Popconfirm`, `ContextMenu`, `FloatingActionButton`, `InlineEdit`, `Toolbar`, `Anchor`, `Image`, `Watermark`, `BackTop`, `Mentions`, `ColorPicker`, `QRCode`
+- **Molecules** (a few atoms bonded into one control) — `TextField`, `Textarea`, `Select`, `NativeSelect`, `Checkbox`, `RadioGroup`, `Switch`, `SearchField`, `NumberField`, `Slider`, `FileUpload`, `SegmentedControl`, `Tabs`, `Breadcrumb`, `Pagination`, `Menu`, `Steps`, `Stat`, `Card`, `Tooltip`, `ScrollArea`, `Collapsible`, `List`, `DescriptionList`, `CodeBlock`, `Alert`, `Toast`, `ConfidenceMeter`, `AIDisclosureBadge`, `PromptSuggestions`, `TypingIndicator`, `CitationList`, `Rating`, `InputOTP`, `ButtonGroup`, `Combobox`, `InputGroup`, `TagInput`, `TimePicker`, `HoverCard`, `Popconfirm`, `ContextMenu`, `FloatingActionButton`, `InlineEdit`, `Toolbar`, `Anchor`, `Image`, `Watermark`, `BackTop`, `Mentions`, `ColorPicker`, `QRCode`
 
-- **Organisms** (composite, self-contained sections) — `Sidebar` (+ `NavItem`), `CommandPalette`, `DataTable`, `Accordion`, `Timeline`, `EmptyState`, `Dialog`, `Drawer`, `Popover`, the `PromptInput` + `ChatMessage` conversation, `HumanReviewGate`, `Calendar`, `DatePicker`, `Result`, `Menubar`, `NavigationMenu`, `Carousel`, `Comment`, `Form` (+ `FormField`), `Tree`, `TreeSelect`, `Cascader`, `Transfer`, `Tour`, `Masonry`, `Splitter`, `HotKeys`, `Dock`, `DataGrid`, `TreeTable`, `Sortable`, `Chart`, `Editor`, `Terminal`
+- **Organisms** (composite, self-contained sections) — `Sidebar` (+ `NavItem`), `CommandPalette`, `DataTable`, `Accordion`, `Timeline`, `EmptyState`, `Dialog`, `AlertDialog`, `Drawer`, `Popover`, the `PromptInput` + `ChatMessage` conversation, `HumanReviewGate`, `Calendar`, `DatePicker`, `Result`, `Menubar`, `NavigationMenu`, `Carousel`, `Comment`, `Form` (+ `FormField`), `Tree`, `TreeSelect`, `Cascader`, `Transfer`, `Tour`, `Masonry`, `Splitter`, `HotKeys`, `Dock`, `DataGrid`, `TreeTable`, `Sortable`, `Chart`, `Editor`, `Terminal`
 
-Highlights: **Button** — Umber primary; variants primary/secondary/tertiary/ghost/danger/danger-ghost; sizes xs–lg; loading, icon, fullWidth. **TextField / Textarea / Select** share one `.cs-field` frame (label + description + inline error; diacritic/IME-safe). **DataTable** — caption, scoped headers, per-column render, empty state. **Card** — warm panel + header/body/footer. **Logo** renders the exact official mark; **Icon** drives the in-repo line-icon set. The **AI-native** family carries the brand's explainability doctrine — disclosure, human review, wish capture, and confidence, all stated in words (never colour alone).
+Highlights: **Button** — Umber primary; variants primary/secondary/tertiary/ghost/danger/danger-ghost; sizes xs–lg; loading, icon, fullWidth. **TextField / Textarea / Select / NativeSelect** share one `.cs-field` frame (label + description/error; diacritic/IME-safe). **DataTable** — caption, scoped headers, per-column render, empty state. **Card** — warm panel + header/body/footer. **Logo** renders the exact official mark; **Icon** drives the in-repo line-icon set. The **AI-native** family carries the brand's explainability doctrine — disclosure, human review, wish capture, and confidence, all stated in words (never colour alone).
 
-**Install / package name.** This monolith publishes (when granted) as **`@cyberskill/design`**. Do **not** install `@cyberskill/react` for this tree — that name is historical marketing-site inventory, not this package.
+**Install / package name.** This monolith publishes as **`@cyberskill/design`** (live at **1.1.0**; grant in `docs/consumer-grant.md` governs *use* — package remains UNLICENSED). Do **not** install `@cyberskill/react` for this tree — that name is historical marketing-site inventory, not this package.
 
 **Source inventory vs. extensions.** An earlier CyberSkill surface shipped six primitives — `Button`, `TextField`, `Dialog`, `DataTable`, `AIDisclosureBadge`, `HumanReviewGate` — plus a brand `Logo`. Everything else in **this** package is an **intentional extension** built in the brand's own token vocabulary so consumers have a complete working kit: `Icon` (the marketing site's real in-repo line-icon set), the standard Forms / Feedback / Data / Navigation / Overlays primitives (search, stepper, slider, file upload, list, description list, timeline, accordion, kbd, code block, sidebar, steps, command palette, popover, drawer, and more), added AI-native pieces (`PromptInput`, `ChatMessage`, `ConfidenceMeter`, `PromptSuggestions`, `TypingIndicator`, `CitationList`) that formalise the Lumi wish-flow, and the `LumiAvatar` mascot. None invent new visual language — they reuse the anchors, surfaces, type, and motion already defined.
 
@@ -215,7 +216,7 @@ Print-ready letter documents and client decks — the paperwork a studio actuall
 
 - **Sales** — `sales-one-pager` (leave-behind: umber hero, services, proof stats, the wish process, contact CTA), `sales-proposal-deck` (8-slide 16:9 client proposal — the wish, understanding, approach, scope, timeline, team, investment, next steps).
 
-**Bilingual — full coverage.** Every one of the 84 templates is bilingual. The 37 `vn-*` HR-suite instruments and the three `doc-*` references are Vietnamese-first with English stacked beneath (Ink/Slate). Every other template carries a **Language** tweak (*English · Tiếng Việt*) that swaps the entire body between the two; several emails (`email`, `marketing-launch`, `tech-release-notes`, `delivery-status-email`, `finance-dunning-email`) add a *Both* mode that stacks them. Legal and finance docs (MSA, SOW, invoice, quote) print their Vietnamese side as an **unreviewed draft** behind a warning banner stating the English governs — have counsel review before real use. As of v2.6.0 the last English-only holdouts — board & comms (`bod-report`, `bod-deck`, `bod-investor-update`, `bod-resolution`) and the client decks/docs (`sales-proposal-deck`, `tech-rfc`, `delivery-kickoff`, `delivery-qbr-deck`) — carry the tweak too.
+**Bilingual — full coverage.** Every one of the 84 templates is bilingual. The 37 `vn-*` HR-suite instruments and the three `doc-*` references are Vietnamese-first with English stacked beneath (Ink/Slate). Every other template carries a **Language** tweak (*English · Tiếng Việt*) that swaps the entire body between the two; several emails (`email`, `marketing-launch`, `tech-release-notes`, `delivery-status-email`, `finance-dunning-email`) add a *Both* mode that stacks them. Where doctrine says **EN-first** (client/media collateral), that means English is the *default* Language value — still with a full bilingual Language tweak — not an English-only exemption. Legal and finance docs (MSA, SOW, invoice, quote) print their Vietnamese side as an **unreviewed draft** behind a warning banner stating the English governs — have counsel review before real use. As of Jul 2026 the last English-only holdouts — board & comms (`bod-report`, `bod-deck`, `bod-investor-update`, `bod-resolution`) and the client decks/docs (`sales-proposal-deck`, `tech-rfc`, `delivery-kickoff`, `delivery-qbr-deck`) — carry the tweak too.
 
 ### Reference documents (govern EVERY template)
 
@@ -267,7 +268,7 @@ Every template resolves to one of six archetypes, framed by `templates/doc-templ
 | **A4 bilingual instrument** | State-motto header · Articles · Party A/B tables · signing block; Style-Guide 1–10 in full | the 37 `vn-*` HR-suite instruments |
 | **Letter print doc** | Letter, 0.6in margins, desk + sheet, clean Print/PDF | `finance-invoice` · `finance-quote` · `finance-expense-report` · `legal-msa` · `legal-sow` · `sales-one-pager` · `bod-*` docs |
 | **Email (600px)** | Centred body, system header/CTA, no motto/signing; bilingual via Language tweak | `email` · `hr-announcement` · `marketing-newsletter` · `tech-release-notes` · `delivery-status-email` · `finance-dunning-email` |
-| **Product screen** | Components + tokens; Theme × Element × Language; no print geometry | `marketing-page` · `dashboard` · `app-shell` · `auth` · `settings` · `article` |
+| **Product screen** | Components + tokens; Theme × Element × Language × Style; no print geometry | `marketing-page` · `dashboard` · `app-shell` · `auth` · `settings` · `article` |
 | **Deck (16:9)** | Stacked 16:9 slides, umber cover, element accent, bilingual via Language tweak, PDF/PPTX | `slide-deck` · `bod-deck` · `sales-proposal-deck` · `delivery-qbr-deck` |
 | **Social image** | Fixed per-channel size (1080² · 1200×630 · 1080×1920) | `marketing-social-kit` |
 
@@ -276,7 +277,7 @@ Every template resolves to one of six archetypes, framed by `templates/doc-templ
 ## Index / manifest
 
 ```
-styles.css                 ← single entry point (@import manifest only) · VERSION 1.0.0
+styles.css                 ← single entry point (@import manifest only) · VERSION 1.1.0
 tokens/                    fonts · colors · typography · spacing · elevation · motion · component-tokens · elements (Ngũ Hành packs)
 base/                      reset · typography · components · forms · feedback · data · navigation · ai · controls · collections · shell · glass · interaction · a11y · responsive
 components/                button · textfield · dialog · datatable · forms · feedback · data · navigation · overlays · ai · logo · icon · brand
@@ -284,30 +285,32 @@ components/                button · textfield · dialog · datatable · forms
 guidelines/                specimen cards (Colors · Type · Spacing · Surfaces · Brand · Motion · Elements · Responsive & Bilingual) · atomic-view.html
 templates/                 marketing-page · dashboard · slide-deck · auth · settings · app-shell · article · email (copyable .dc.html)
                            + team artifacts — tech (release/incident/rfc) · team (meeting-agenda) · hr (announcement) · board (report/deck/memo) · marketing (brief/newsletter/launch/case-study/press-release)
-                           + business — legal (nda/msa/sow) · finance (invoice/quote) · sales (one-pager/proposal-deck) — letter print docs + client deck
+                           + business — legal (vn-mutual-nda / msa / sow; fictional legal-nda retired) · finance (invoice/quote) · sales (one-pager/proposal-deck) — letter print docs + client deck
                            + Documents (reference, govern all templates) — doc-style-guide · doc-suite-index (index & usage) · doc-templates (archetypes)
                            + HR Suite — 37 lawyer-validated bilingual A4 instruments (vn-*); content verbatim, latest-DS skin
-ui_kits/status-hub/        Status Hub recreation (index · login · settings · project · identity-lab + status.css · data.js · StatusHub.jsx)
+ui_kits/status-hub/        Status Hub recreation (index · login · settings · project + status.css · data.js · StatusHub.jsx)
 ui_kits/website/           cyberskill.world recreation (index · work · careers · chat + site.css · copy.js · Website.jsx)
 ui_kits/deck/              brand deck on deck-stage (index.html; deck-stage runtime lives in templates/_vendor/, outside the compiled bundle; export PPTX/PDF on demand)
 assets/                    logo-mark.svg/png · favicon.svg · aurora-gold.jpg + aurora-{hoa,thuy,moc,kim}.png · lumi-poster.webp
 docs/                      the full doc set (see Document map above) + viewer.html reader (EN|VI)
 docs/vi/                   Vietnamese translations of every operator-facing docs/*.md
-fonts/                     self-hosted Be Vietnam Pro + JetBrains Mono woff2 (latin · latin-ext · vietnamese)
+fonts/                     self-hosted Be Vietnam Pro + Space Grotesk + JetBrains Mono woff2 (latin · latin-ext · vietnamese)
 thumbnail.html             project tile
 SKILL.md                   Agent-Skills-compatible entry
 ```
 
-**UI kits** (product recreations, composing the tokens + `.cs-*` classes): **Status Hub** (portfolio dashboard — KPIs, board/table/releases lenses, drawer — plus **sign-in**, **settings**, **project detail**, and the **Identity Lab** for live Theme × Element × Language switching), **cyberskill.world** (bilingual marketing home with Lumi chat — plus **Work**, **Careers**, and a full-page **Lumi assistant**), and a **Brand deck** (16:9, `deck-stage`, PDF/PPTX-ready). See each kit's `README.md`.
+**UI kits** (product recreations, composing the tokens + `.cs-*` classes): **Status Hub** (portfolio dashboard — KPIs, board/table/releases lenses, drawer — plus **sign-in**, **settings**, **project detail**). Live axis demos: Storybook toolbar · Atomic View · Elements Geometry specimen, **cyberskill.world** (bilingual marketing home with Lumi chat — plus **Work**, **Careers**, and a full-page **Lumi assistant**), and a **Brand deck** (16:9, `deck-stage`, PDF/PPTX-ready). See each kit's `README.md`.
 
-**Design System tab** renders every card: Components (115 exports — Core, Forms, Data, Feedback, Navigation, Overlays, AI-native, Brand), Colors, Type, Spacing, Surfaces, Brand, Motion, Responsive & Bilingual, **Elements**, plus the Status Hub (incl. Identity Lab), Website, and Deck surfaces.
+**Storybook** renders every card: Components (121 exports — Core, Forms, Data, Feedback, Navigation, Overlays, AI-native, Brand), Foundations (Colors, Type, Spacing, Surfaces, Brand, Motion, Responsive & Bilingual, **Elements**), plus Maintainer surfaces for Status Hub, Website, and Deck.
 
 ---
 
 
 ## Substitutions & caveats
 
-- **Fonts:** Be Vietnam Pro (300–800 + italics) and JetBrains Mono are **self-hosted** in `fonts/` as subset-split woff2 (latin · latin-ext · vietnamese) — no CDN dependency. Same families as the source (which ships them via `next/font`); no visual substitution.
+- **Fonts:** Be Vietnam Pro (300–800 + italics), Space Grotesk (variable 300–700), and JetBrains Mono are **self-hosted** in `fonts/` as subset-split woff2 (latin · latin-ext · vietnamese) — no CDN dependency. Same families as the source (which ships them via `next/font`); no visual substitution. `_audit/font-face-integrity.html` is the gate: it proves every face is local, subset-split, Vietnamese-covered, and mirrored in the manifest.
+
+- **Display face is opt-in, not a second default.** `--cs-font-family-display` (Space Grotesk) exists so a product with a headline face — cyberskill.world / Lumi — consumes a DS token instead of hand-rolling its own `@font-face`. Nothing in the DS points at it: opt a subtree in with `.cs-display-face`. Product → element mappings are unaffected (`docs/products.md` stays locked).
 
 - **Type size ramp & motion tokens** are a documented convention layered on the doctrine (the token source ships families + line-heights only); they mirror real in-product usage. The ramp also carries semantic role aliases (`--cs-text-h1`…) and `.cs-h1` / `.cs-body` / … utilities in `base/typography.css`.
 

package/SKILL.md

@@ -8,23 +8,25 @@ If the user invokes this skill without any other guidance, ask them what they wa
 
 ## Fast orientation
 
-**Which front door?** **Claude Code / Claude Design** → this `SKILL.md` → `README.md` → portable runtime (`styles.css`, `_esm/cs.mjs`, `_ds_bundle.js` with prefix resolve) and optionally DC templates when the session has the compiler. **Google Stitch (and other DESIGN.md readers)** → root `DESIGN.md` → `llms.txt` → `tokens/tokens.dtcg.json` + static `.cs-*` HTML — **never** treat `templates/**/*.dc.html` as source of truth (no tweaks / `__dcSetProps` / DC runtime outside Claude Design). Dual-path detail: `docs/consuming.md`. Release signal: tip SHA + `docs/release-notes.md` (VERSION stays **1.0.0**; no CHANGELOG).
+**Which front door?** **Claude Code / Claude Design** → this `SKILL.md` → `README.md` → portable runtime (`styles.css`, bundler `_esm/react.mjs` / legacy `_esm/cs.mjs`, `_ds_bundle.js` with prefix resolve) and optionally DC templates when the session has the compiler. **Google Stitch (and other DESIGN.md readers)** → root `DESIGN.md` → `llms.txt` → `tokens/tokens.dtcg.json` + static `.cs-*` HTML — **never** treat `templates/**/*.dc.html` as source of truth (no tweaks / `__dcSetProps` / DC runtime outside Claude Design). Dual-path detail: `docs/consuming.md`. Release signal: tip SHA + `docs/release-notes.md` (VERSION is **1.1.0**; no CHANGELOG).
 
 - **`README.md`** — the entrance + design guide + manifest: anchor immutables, CONTENT FUNDAMENTALS (voice = warm/direct/honest/respectful, Vietnamese-first, the "wish" metaphor), VISUAL FOUNDATIONS, ICONOGRAPHY, and the component/kit index. Read it first.
 
 - **`styles.css`** — the single stylesheet to link. It `@import`s all tokens (`tokens/`) and base styles (`base/`, incl. the `.cs-*` component classes and the Liquid Glass surfaces). Link this one file and you have the whole system.
 
-- **`_esm/cs.mjs`** — ESM entry for production React (re-exports every component; still link `styles.css`). Bundle path: `_ds_bundle.js` → resolve `window.CyberSkillDesignSystem_*` **by prefix**, never hardcode the compiler suffix.
+- **`_esm/react.mjs`** — bundler-native React entry (default `exports["."]` / `@cyberskill/design/react`): re-exports every component from source JSX; React is a **peerDependency**. Use with Next/Vite (`transpilePackages`). Still link `styles.css`.
 
-- **`tokens/`** — every design decision as a CSS custom property (`--cs-*`): colors, type, spacing, elevation/glass, motion, component tokens, **`elements.css`** — the Ngũ Hành product-identity packs (`data-cs-element="kim|moc|thuy|hoa|tho"` + `data-cs-variant`; role tokens `--cs-accent-*`) — Grammar: **Theme × Element × Language** are independent; state them or accept defaults (`light · tho · en`). Surface treatment is liquid-glass (fixed). Generated machine-readable exports live at **`tokens/tokens.json`**, **`tokens/tokens.js`** (ESM), and **`tokens/tokens.dtcg.json`** (**W3C DTCG**) — root tokens grouped by category, plus theme/element override maps — for native/mobile/tooling consumers. The root **`DESIGN.md`** is the generated single-file open-spec view of the same source (doctrine + every token value + inventory; regenerate via `npm run build:design-md`, never hand-edit — the `design-md-parity` gate pins it).
+- **`_esm/cs.mjs`** — browser / no-build legacy (`exports["./legacy"]`): self-ensures React, side-loads `_ds_bundle.js`, re-exports every component. Bundle path: `_ds_bundle.js` → resolve `window.CyberSkillDesignSystem_*` **by prefix**, never hardcode the compiler suffix. **Not for Next/SSR.**
 
-- **`docs/`** — `conventions.md` (authoring rules — the three axes: Theme × Element × Language — plus the decision log), `products.md` (element registry, **locked**), `contrast-report.md` (generated APCA sweep), `consuming.md` (Claude Code vs Stitch dual path).
+- **`tokens/`** — every design decision as a CSS custom property (`--cs-*`): colors, type, spacing, elevation/glass, motion, component tokens, **`elements.css`** — the Ngũ Hành product-identity packs (`data-cs-element="kim|moc|thuy|hoa|tho"` + `data-cs-variant`; role tokens `--cs-accent-*`) — Grammar: **Theme × Element × Language × Style** are independent; state them or accept defaults (`light · tho · en · liquid-glass`; Theme may be `system` for OS `prefers-color-scheme`). Style pack is liquid-glass (sole pack; absent ≡ default). Generated machine-readable exports live at **`tokens/tokens.json`**, **`tokens/tokens.js`** (ESM), and **`tokens/tokens.dtcg.json`** (**W3C DTCG**) — root tokens grouped by category, plus theme/element override maps — for native/mobile/tooling consumers. The root **`DESIGN.md`** is the generated single-file open-spec view of the same source (doctrine + every token value + inventory; regenerate via `npm run build:design-md`, never hand-edit — the `design-md-parity` gate pins it).
 
-- **`components/`** — 115 exports across 8 groups — Core (Button, Dialog), Forms, Data/Layout, Feedback, Navigation, Overlays, AI-native, and Brand (Logo, Icon, LumiAvatar). Each has a `.d.ts` contract and a `.prompt.md`. In production compose these; in static HTML use the `.cs-*` classes from `styles.css`.
+- **`docs/`** — `conventions.md` (authoring rules — the four axes: Theme × Element × Language × Style — plus the decision log), `products.md` (element registry, **locked**), `contrast-report.md` (generated APCA sweep), `consuming.md` (Claude Code vs Stitch dual path).
 
-- **`templates/`** — ~84 copyable starting points (**Design Components** — Claude Design / full-clone authoring only) spanning the full operations map: **product** — marketing-page, dashboard, slide-deck, auth, settings, app-shell, article, email; **teams** — Tech (release-notes, incident-report, rfc, retro), Team (meeting-agenda), HR (announcement, offboarding, interview-kit, performance-review, PIP⚠), Board (report, deck, memo, minutes, resolution⚠, investor-update), Marketing (brief, newsletter, launch, case-study, press-release, social-kit), Culture (event-invite), Delivery (status-email, kickoff, change-note, runbook, qbr-deck); **business** — Legal (msa, sow), Finance (invoice, quote, expense-report, dunning-email), Sales (one-pager, proposal-deck); **HR Suite** — 37 client-supplied, lawyer-validated bilingual A4 instruments (`templates/vn-*`), converted verbatim from `.docx` and re-skinned to the latest system; `vn-labor-contract` supersedes the former `legal-employment-contract`. Three suite-wide **reference documents** (`templates/doc-style-guide`, `doc-suite-index`, `doc-templates`) define, catalogue, and frame EVERY template — Style Guide (Articles 1–10 + archetype map), Suite Index & Usage Guide, and the blank archetype shells. ⚠ = counsel-gated, banner-marked drafts; the HR Suite is client-validated legal text — keep verbatim and have counsel review edits. Every template carries Element ×15 tweaks and is **bilingual**: the 37 `vn-*` HR-suite docs and 3 `doc-*` references stack Vietnamese-first (no tweak), and every other template carries an EN·VN Language tweak (several emails add *Both*) — as of v2.6.0 there are no English-only templates left. Each loads the system via a sibling `ds-base.js` (one `base` line to rebind — validated end-to-end Jul 2026). **Stitch / static consumers:** use `templates/kitchen-sink.html`, `examples/static-hello/`, and `.cs-*` classes — not `*.dc.html`.
+- **`components/`** — 121 exports across 8 groups — Core (Button, Dialog), Forms, Data/Layout, Feedback, Navigation, Overlays, AI-native, and Brand (Logo, Icon, LumiAvatar). Each has a `.d.ts` contract and a `.prompt.md`. In production compose these; in static HTML use the `.cs-*` classes from `styles.css`.
 
-- **`guidelines/`** — foundation specimen cards (colors, type, spacing, surfaces, brand, motion, elements, and Responsive & Bilingual) — handy visual references. Plus **`atomic-view.html`** — a Storybook-style browser of every component grouped by Atomic tier (Atoms/Molecules/Organisms), reskinnable live across Theme × Element × Language.
+- **`templates/`** — ~84 copyable starting points (**Design Components** — Claude Design / full-clone authoring only) spanning the full operations map: **product** — marketing-page, dashboard, slide-deck, auth, settings, app-shell, article, email; **teams** — Tech (release-notes, incident-report, rfc, retro), Team (meeting-agenda), HR (announcement, offboarding, interview-kit, performance-review, PIP⚠), Board (report, deck, memo, minutes, resolution⚠, investor-update), Marketing (brief, newsletter, launch, case-study, press-release, social-kit), Culture (event-invite), Delivery (status-email, kickoff, change-note, runbook, qbr-deck); **business** — Legal (msa, sow), Finance (invoice, quote, expense-report, dunning-email), Sales (one-pager, proposal-deck); **HR Suite** — 37 client-supplied, lawyer-validated bilingual A4 instruments (`templates/vn-*`), converted verbatim from `.docx` and re-skinned to the latest system; `vn-labor-contract` supersedes the former `legal-employment-contract`. Three suite-wide **reference documents** (`templates/doc-style-guide`, `doc-suite-index`, `doc-templates`) define, catalogue, and frame EVERY template — Style Guide (Articles 1–10 + archetype map), Suite Index & Usage Guide, and the blank archetype shells. ⚠ = counsel-gated, banner-marked drafts; the HR Suite is client-validated legal text — keep verbatim and have counsel review edits. Every template carries Element ×15 tweaks and is **bilingual**: the 37 `vn-*` HR-suite docs and 3 `doc-*` references stack Vietnamese-first (no tweak), and every other template carries an EN·VN Language tweak (several emails add *Both*) — as of Jul 2026 there are no English-only templates left. Each loads the system via a sibling `ds-base.js` (one `base` line to rebind — validated end-to-end Jul 2026). **Stitch / static consumers:** use `templates/kitchen-sink.html`, `examples/static-hello/`, and `.cs-*` classes — not `*.dc.html`.
+
+- **`guidelines/`** — foundation specimen cards (colors, type, spacing, surfaces, brand, motion, elements, and Responsive & Bilingual) — handy visual references. Plus **`atomic-view.html`** — a Storybook-style browser of every component grouped by Atomic tier (Atoms/Molecules/Organisms), reskinnable live across Theme × Element × Language × Style.
 
 - **`ui_kits/`** — full product recreations to copy patterns from: **status-hub** (portfolio dashboard + sign-in + settings + project detail), **website** (bilingual marketing home + Work + Careers + full Lumi chat), and **deck** (16:9 brand deck on deck-stage, PDF/PPTX-ready).
 
@@ -40,17 +42,19 @@ Every artifact exports, all paths preserving Vietnamese Unicode (see `docs/conve
 
 - Elemental identity: one element per product; consume `--cs-accent-*` roles (never raw element hex); semantic statuses and the 3px Ochre focus ring are NEVER elemental; secondary elements only as gradient endpoints along Tương sinh (Mộc→Hỏa→Thổ→Kim→Thủy→Mộc); Lumi stays golden in every element.
 
-- Surface treatment is liquid-glass (fixed). Do not invent styles ad hoc (neon/cyberpunk, memphis, and full skeuomorphism are rejected by doctrine).
+- Style pack is liquid-glass (sole pack; absent ≡ default). Do not invent styles ad hoc (neon/cyberpunk, memphis, and full skeuomorphism are rejected by doctrine).
 
 - Keep it warm — every neutral warmed toward umber; no cold grey, no bluish-purple gradients, no emoji in UI.
 
 - Vietnamese-first: ship EN + VN copy; preserve diacritics; use Vietnamese-safe line-heights.
 
+- Type families come from tokens, never from a hand-rolled `@font-face`: `--cs-font-family-ui` (Be Vietnam Pro) for UI and headings, `--cs-font-family-mono` (JetBrains Mono) for code/data, and the **opt-in** `--cs-font-family-display` (Space Grotesk, variable 300–700, Vietnamese subset included) for a product headline face — opt a subtree in with `.cs-display-face` rather than overriding `font-family` by hand.
+
 - Never remove focus outlines (3px Ochre ring); keep touch targets ≥ 44px (enforced on coarse pointers via `base/a11y.css`); honour `prefers-reduced-motion` and `prefers-contrast`; body text APCA Lc ≥ 75. Dark theme has full semantic overrides (all pairings pass AA).
 
 - Voice stays warm/direct/honest/respectful — never fun/playful/edgy. Products are "wishes" that Lumi helps grant.
 
-- Expansion rule: when any set grows (element/variant, icon, component, language), update every deliverable in the same change — tokens, cards + related guidelines, contract trio, all template enums, Identity Lab, docs incl. every related document/README — and grep the old list to prove it. Version stays pinned at 1.0.0 until LAUNCH (no changelog).
+- Expansion rule: when any set grows (element/variant, icon, component, language), update every deliverable in the same change — tokens, cards + related guidelines, contract trio, all template enums, Storybook toolbar / Atomic View, docs incl. every related document/README — and grep the old list to prove it. Version is LAUNCHED at **1.1.0**; further bumps need an owner instruction (no changelog).
 
 - **Stitch / non-DC tools must not consume `*.dc.html` as source of truth.** Those files need the Design Components compiler (tweaks, `x-import`, `__dcSetProps`). Generate static UI from `DESIGN.md` / DTCG / `styles.css` + `.cs-*` / kitchen-sink / `examples/static-hello/` instead. DC authoring stays Claude Design (or a full clone with the compiler).
 

package/VERSION

@@ -1 +1 @@
-1.0.0
+1.1.0