7k-design-system 1.1.1 → 1.3.0

package/DESIGN.md

@@ -20,7 +20,7 @@ Key constraints derived from the source:
 - **Secondary neon accent** → Cyan by default (`--brand-secondary`), dynamically themable per project via `data-project` or `ProjectProvider`.
 - **Logo** → Star-burst pattern logo in `build/logos/logo-7k.svg`: a geometric radial pattern with #FF0FF brand accent tones. Light variant at `build/logos/logo-7k-light.svg` (black polygons for light backgrounds). App icon at `build/icons/icon.svg`.
 - **Dark theme** → All surfaces start from near-black. Light theme is opt-in only.
-- **Project differentiation** → Child projects get their own secondary accent (solar, cyan, acid, ember) on the same dark base. The parent 7K brand uses the default cyan secondary; other projects theme `--brand-secondary` to their hue. Each Geist Pixel geometric variant pairs with one accent: Square=magenta, Circle=cyan, Grid=acid, Line=ember, Triangle=solar.
+- **Project differentiation** → Each project gets its own secondary accent on the same dark base: **magenta = 7KGroup** (parent, also `--brand-primary`), **cyan = 7KMinato**, **inari (burnt orange) = Inari**. Projects theme `--brand-secondary` to their hue via `data-project` or `ProjectProvider`.
 - **Tokyo neon** → High contrast, nocturnal canvas, electric accents, no warm/beige tones.
 - **1-bit manga influence** → 10-texture background pattern library (scanline, halftone, dot matrix, stripes, crosshatch, checkerboard, noise, vignette). All textures are CSS gradients — no images, no SVG humans.
 - **Abstract 1-bit animations** → 20+ animation keyframes organized as ambient (continuous) and trigger (burst) categories. Step timing for retro feel, reduced-motion collapse.
@@ -150,7 +150,7 @@ import '7k-design-system/css';
 
 Tokyo neon meets manga-influenced 1-bit. The canvas is deep near-black, with sharp white text, electric magenta (`#FF0FF`) as the primary brand accent, and cyan as a secondary project accent. Black-and-white 1-bit textures — scanline overlays, halftone dot noise, glitch keyframes — provide rhythm and atmosphere. The mood is nocturnal, high-contrast, and unapologetically digital.
 
-Company/project differentiation: the parent 7K brand uses vivid magenta (`--brand-primary`). Child projects adopt their own accent (solar, cyan, acid, ember) on the same dark base. Same system, distinct at a glance.
+Company/project differentiation: 7KGroup (parent) uses vivid magenta (`--brand-primary` baseline). Inside a project scope the project accent becomes dominant, overriding the full `--brand-primary` chain: 7KMinato runs cyan, Inari runs burnt orange (Fushimi Inari palette). Same system, distinct at a glance.
 
 **Logo:** Star-burst pattern logo in `build/logos/logo-7k.svg` — a geometric radial pattern with #FF0FF brand accent tones. Light variant at `build/logos/logo-7k-light.svg` (light backgrounds). App icon at `build/icons/icon.svg`.
 
@@ -162,7 +162,7 @@ Company/project differentiation: the parent 7K brand uses vivid magenta (`--bran
 - **Diagonal stripes**: 45° hatch lines at 7px or 4px pitch. Negative variant overlays pure white-on-black for high-contrast sections.
 - **Horizontal / vertical stripes**: Linear parallel lines at 9px or 5px pitch for directional motion cues.
 - **Crosshatch**: Dual-angle hatch (45° + -45°) for dense shading in manga panel style. Standard and dense variants.
-- **Checkerboard**: 12px alternating squares for pixel-art motifs. One-bit variant uses pure black/white for retro game sections.
+- **Checkerboard**: 12px alternating squares for pixel-art motifs. High-contrast variant uses pure black/white.
 - **Noise**: SVG fractal noise overlay at 128px tile, 4%–12% opacity for analog CRT grain. Animatable with translate keyframes.
 - **Vignette**: Radial gradient from transparent center to black edge. Sharp variant clips tighter for manga panel corner fade.
 
@@ -180,23 +180,23 @@ Company/project differentiation: the parent 7K brand uses vivid magenta (`--bran
 
 | Category           | Classes                                                                      | Density variants                 | Use case                               |
 | ------------------ | ---------------------------------------------------------------------------- | -------------------------------- | -------------------------------------- |
-| Scanline           | `.scanline`, `.scanline-fast`                                                | slow (8s), fast (3s)             | Hero sections, full-bleed walls        |
-| Halftone dots      | `.halftone-sm`, `.halftone-md`, `.halftone-lg`, `.halftone-accent`           | 4px/6px/10px grid, accent-tinted | Manga panel backgrounds, card surfaces |
-| Dot matrix         | `.dot-matrix-dense`, `.dot-matrix`, `.dot-matrix-sparse`                     | 3px/6px/12px grid                | Texture depth behind text, dividers    |
-| Diagonal stripes   | `.diagonal-stripes`, `.diagonal-stripes-dense`, `.diagonal-stripes-negative` | 7px/4px pitch, pure B/W          | Directional cues, loading areas        |
-| Horizontal stripes | `.stripes-h`, `.stripes-h-dense`                                             | 9px/5px pitch                    | Section rhythm, horizontal dividers    |
-| Vertical stripes   | `.stripes-v`, `.stripes-v-dense`                                             | 9px/5px pitch                    | Sidebar textures, column dividers      |
-| Crosshatch         | `.crosshatch`, `.crosshatch-dense`                                           | 7px/4px dual-angle               | Dense manga shading, error states      |
-| Checkerboard       | `.checkerboard`, `.checkerboard-onebit`                                      | 12px/16px grid, pure B/W         | Retro sections, QR motifs              |
-| Noise              | `.noise`, `.noise-heavy`, `.noise-animated`                                  | 4%/12% opacity, SVG fractal      | CRT grain, analog texture              |
-| Vignette           | `.vignette-onebit`, `.vignette-onebit-sharp`                                 | Soft/sharp radial fade           | Panel corner fade, hero-edge vignette  |
+| Scanline           | `.bg-scanline`, `.bg-scanline-fast`                                                | slow (8s), fast (3s)             | Hero sections, full-bleed walls        |
+| Halftone dots      | `.bg-halftone-sm`, `.bg-halftone-md`, `.bg-halftone-lg`, `.bg-halftone-accent`           | 4px/6px/10px grid, accent-tinted | Manga panel backgrounds, card surfaces |
+| Dot matrix         | `.bg-dot-matrix-dense`, `.bg-dot-matrix`, `.bg-dot-matrix-sparse`                     | 3px/6px/12px grid                | Texture depth behind text, dividers    |
+| Diagonal stripes   | `.bg-diagonal-stripes`, `.bg-diagonal-stripes-dense`, `.bg-diagonal-stripes-negative` | 7px/4px pitch, pure B/W          | Directional cues, loading areas        |
+| Horizontal stripes | `.bg-stripes-h`, `.bg-stripes-h-dense`                                             | 9px/5px pitch                    | Section rhythm, horizontal dividers    |
+| Vertical stripes   | `.bg-stripes-v`, `.bg-stripes-v-dense`                                             | 9px/5px pitch                    | Sidebar textures, column dividers      |
+| Crosshatch         | `.bg-crosshatch`, `.bg-crosshatch-dense`                                           | 7px/4px dual-angle               | Dense manga shading, error states      |
+| Checkerboard       | `.bg-checkerboard`, `.bg-checkerboard-contrast`                                      | 12px/16px grid, pure B/W         | Retro sections, QR motifs              |
+| Noise              | `.bg-noise`, `.bg-noise-heavy`, `.bg-noise-animated`                                  | 4%/12% opacity, SVG fractal      | CRT grain, analog texture              |
+| Vignette           | `.bg-vignette-ink`, `.bg-vignette-ink-sharp`                                 | Soft/sharp radial fade           | Panel corner fade, hero-edge vignette  |
 
 ### Texture composition rules
 
 1. **One texture per section layer.** Apply at most one texture on the background layer and one on the overlay layer (`::after`). Scanline + halftone is the default pair for hero sections.
 2. **Opacity scales with section density.** Hero/landing sections use lighter textures (5–10% opacity). Data-dense utility sections use stronger textures (10–15% opacity) or none.
-3. **Texture on components is allowed with restraint.** Cards, panels, modals, drawers, and buttons can carry low-opacity texture overlays (`::before`, `pointer-events: none`) as long as the texture sits behind content and does not reduce contrast. Inputs and form controls should remain solid to preserve legibility. Use `.card-halftone`, `.panel-scanline`, `.btn-modern-halftone`, `.modal-noise`, etc.
-4. **Texture as section separator.** When transitioning between full-bleed sections, add a `.separator-onebit` or `.stripes-h` band (40–80px tall) as a visual break — never use shadow or blur transitions.
+3. **Texture on components is allowed with restraint.** Cards, panels, modals, drawers, and buttons can carry low-opacity texture overlays (`::before`, `pointer-events: none`) as long as the texture sits behind content and does not reduce contrast. Inputs and form controls should remain solid to preserve legibility. Use `.card-halftone`, `.surface-scanline`, `.btn-halftone`, `.modal-noise`, etc.
+4. **Texture as section separator.** When transitioning between full-bleed sections, add a `.bg-separator-solid` or `.bg-stripes-h` band (40–80px tall) as a visual break — never use shadow or blur transitions.
 5. **Layering order:** Base color → texture background → content container → optional scanline overlay. The overlay must have `pointer-events: none` and `z-index: 1` so it does not block interaction.
 6. **Full-bleed hero walls** use scanline + vignette simultaneously: scanline on `::after` for the line pattern, vignette on `::before` for the edge fade. Both get `pointer-events: none`.
 
@@ -204,21 +204,21 @@ Company/project differentiation: the parent 7K brand uses vivid magenta (`--bran
 
 ```
 Section 1 (hero)    — Scanline overlay + noise grain, full-bleed
-  ↓ separator-onebit
+  ↓ separator-solid
 Section 2 (content) — Solid surface, no texture (reading zone)
-  ↓ separator-onebit
+  ↓ separator-solid
 Section 3 (stats)   — Halftone-md background with accent tint
-  ↓ separator-onebit
+  ↓ separator-solid
 Section 4 (cta)     — Scanline-fast overlay, invert section if 1-bit
 ```
 
 ### 1-bit section variants
 
-- **Full invert section**: swap `--bg-base` with `--onebit-white`, `--text-primary` with `--onebit-black`. Used for CTAs, callout panels, or manga-style splash panels. Add `.diagonal-stripes-negative` for max contrast.
+- **Full invert section**: swap `--bg-base` with `--color-paper`, `--text-primary` with `--color-ink`. Used for CTAs, callout panels, or manga-style splash panels. Add `.bg-diagonal-stripes-negative` for max contrast.
 - **Scanline hero**: dark canvas, scanline overlay, accent headline with glow. The scanline `::after` sits above the background but below all content (`z-index: 1`). Content gets `position: relative; z-index: 2`.
-- **Halftone card wall**: grid of cards with `.halftone-sm` or `.halftone-md` on the section container. Each card has solid `.card` background that breaks the texture — texture only lives between cards.
-- **Noise backdrop**: `.noise` on full-page backgrounds for analog feel. Use `.noise-heavy` only on splash/loading screens where content density is low.
-- **Vignette frame**: `.vignette-onebit` on slide/scene containers to draw the eye center. Used in intro animations and splash panels.
+- **Halftone card wall**: grid of cards with `.bg-halftone-sm` or `.bg-halftone-md` on the section container. Each card has solid `.card` background that breaks the texture — texture only lives between cards.
+- **Noise backdrop**: `.bg-noise` on full-page backgrounds for analog feel. Use `.bg-noise-heavy` only on splash/loading screens where content density is low.
+- **Vignette frame**: `.bg-vignette-ink` on slide/scene containers to draw the eye center. Used in intro animations and splash panels.
 
 ## 1c. Isometric Backgrounds — CSS-only 3D Perspective Patterns
 
@@ -228,17 +228,17 @@ Section 4 (cta)     — Scanline-fast overlay, invert section if 1-bit
 
 | Class                     | Description                                                             | Technique                                                       |
 | ------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------- |
-| `.isometric-grid`         | Diamond tiling from dual 30°/-30° hatch lines at 24px pitch             | `repeating-linear-gradient(30deg)` + `(-30deg)`                 |
-| `.isometric-grid-dense`   | Tighter 12px diamond grid                                               | Same technique, denser pitch                                    |
-| `.isometric-grid-accent`  | Magenta-tinted 24px diamond grid                                        | Same, with `--magenta-500 / 0.12` stroke                        |
-| `.isometric-cubes`        | 3-face cube wall: right (150°), top (-30°), left (30°) faces at 40px    | 3 `repeating-linear-gradient` layers with face-specific opacity |
-| `.isometric-cubes-dense`  | 20px cube wall                                                          | Same, finer resolution                                          |
-| `.isometric-cubes-accent` | Magenta-tinted cube wall                                                | Same, with accent hue fills                                     |
-| `.isometric-pyramid`      | Ascending zigzag steps: 150° + -30° gradients                           | Dual gradient with offset phase                                 |
-| `.isometric-hex`          | Honeycomb hex grid from 60°/-60°/0° overlapping                         | 3 `repeating-linear-gradient` layers                            |
-| `.isometric-pipes`        | Converging tunnel perspective: left/right walls (30°/-30°) + floor (0°) | 3-gradient tunnel simulation                                    |
-| `.isometric-pipes-fast`   | Denser tunnel, 8px walls                                                | Same, tighter spacing                                           |
-| `.isometric-terrain`      | Multi-layer depth: horizontal + 30° + -30° zigzag                       | 3-layer parallax-ready composition                              |
+| `.iso-grid`         | Diamond tiling from dual 30°/-30° hatch lines at 24px pitch             | `repeating-linear-gradient(30deg)` + `(-30deg)`                 |
+| `.iso-grid-dense`   | Tighter 12px diamond grid                                               | Same technique, denser pitch                                    |
+| `.iso-grid-accent`  | Magenta-tinted 24px diamond grid                                        | Same, with `--magenta-500 / 0.12` stroke                        |
+| `.iso-cubes`        | 3-face cube wall: right (150°), top (-30°), left (30°) faces at 40px    | 3 `repeating-linear-gradient` layers with face-specific opacity |
+| `.iso-cubes-dense`  | 20px cube wall                                                          | Same, finer resolution                                          |
+| `.iso-cubes-accent` | Magenta-tinted cube wall                                                | Same, with accent hue fills                                     |
+| `.iso-pyramid`      | Ascending zigzag steps: 150° + -30° gradients                           | Dual gradient with offset phase                                 |
+| `.iso-hex`          | Honeycomb hex grid from 60°/-60°/0° overlapping                         | 3 `repeating-linear-gradient` layers                            |
+| `.iso-pipes`        | Converging tunnel perspective: left/right walls (30°/-30°) + floor (0°) | 3-gradient tunnel simulation                                    |
+| `.iso-pipes-fast`   | Denser tunnel, 8px walls                                                | Same, tighter spacing                                           |
+| `.iso-terrain`      | Multi-layer depth: horizontal + 30° + -30° zigzag                       | 3-layer parallax-ready composition                              |
 
 ### Composition rules
 
@@ -253,7 +253,7 @@ Section 4 (cta)     — Scanline-fast overlay, invert section if 1-bit
 
 The color system has three strict layers:
 
-1. **Raw ramps** — 11-step scales (50–950) for Neutral, Magenta, Solar, Cyan, Acid, Ember, plus extended below-ramp values (1000, void) and 4 semantic ramps (Success, Warning, Danger, Info). Never reference these directly in components.
+1. **Raw ramps** — 11-step scales (50–950) for Neutral, Magenta (7KGroup), Cyan (7KMinato), Inari (Inari), plus extended below-ramp values (1000, void) and 4 semantic ramps (Success, Warning, Danger, Info). Never reference these directly in components.
 2. **Theme role mapping** — `--bg-*`, `--text-*`, `--border-*`, `--brand-*`, `--status-*`, `--accent-*` tokens that map ramp values to functional roles. Remap per dark/light theme. This is the only layer components touch.
 3. **Semantic colors** — `--status-success/warning/danger/info` tokens bound by **meaning, not decoration**. Use only for actual machine-state indication (badges, toasts, validation). Never use for decorative borders, accent accents, or non-status backgrounds.
 
@@ -273,8 +273,8 @@ All ramps follow the same 11-step pattern (50 = lightest, 950 = darkest). Two ex
 | `--neutral-100`  | `#EEEEF1` | —                                                | `--bg-elevated`                                          |
 | `--neutral-200`  | `#D7D7DC` | —                                                | `--bg-raised`, `--status-neutral-bg`                     |
 | `--neutral-300`  | `#B0B0B8` | `--text-secondary`                               | `--bg-overlay`, `--text-disabled`, `--status-neutral-fg` |
-| `--neutral-400`  | `#82828A` | `--status-neutral`                               | `--bg-pressed`, `--text-tertiary`, `--text-placeholder`  |
-| `--neutral-500`  | `#6B6B72` | `--text-tertiary`, `--text-placeholder`          | `--text-secondary`                                       |
+| `--neutral-400`  | `#82828A` | `--text-tertiary`, `--status-neutral`            | `--bg-pressed`, `--text-placeholder`                     |
+| `--neutral-500`  | `#6B6B72` | `--text-placeholder`                             | `--text-secondary`                                       |
 | `--neutral-600`  | `#50505A` | `--text-disabled`                                | —                                                        |
 | `--neutral-700`  | `#3A3A42` | `--bg-pressed`                                   | —                                                        |
 | `--neutral-800`  | `#26262B` | `--bg-overlay`, `--status-neutral-bg`            | —                                                        |
@@ -301,29 +301,20 @@ All ramps follow the same 11-step pattern (50 = lightest, 950 = darkest). Two ex
 | `--magenta-900` | `#570057` | —                                                                           | —                                |
 | `--magenta-950` | `#330033` | `--brand-primary-subtle` (dark)                                             | —                                |
 
-#### Project accent ramps — Solar / Cyan / Acid / Ember
+#### Project accent ramps — 7KMinato (Cyan) / Inari
 
-Each child project gets a single accent hue. Same 11-step structure; only the base (--500) and the theme-mapped hover (--600 in light) differ.
+Each project gets a single accent hue. Same 11-step structure; only the base (--500) and the theme-mapped hover (--600 in light) differ. (7KGroup's accent is the magenta primary ramp above.)
 
-**Solar — Triangle (hue ~50)**
-
-`--solar-50: #FFFCE5` → `--solar-500: #FFD60A` → `--solar-950: #332B02`.  
-Accent token: `--accent-triangle`. Dark: `var(--solar-500)`, Light: `var(--solar-600)`.
-
-**Cyan — Circle (hue ~190)**
+**Cyan — 7KMinato (hue ~190)**
 
 `--cyan-50: #E5FBFF` → `--cyan-500: #00E5FF` → `--cyan-950: #002A2E`.  
-Accent token: `--accent-circle`. Dark: `var(--cyan-500)`, Light: `var(--cyan-600)`.
-
-**Acid — Grid (hue ~105)**
+Accent token: `--accent-7kminato`. Dark: `var(--cyan-500)`, Light: `var(--cyan-600)`.
 
-`--acid-50: #F2FFE5` → `--acid-500: #7CFF00` → `--acid-950: #172E00`.  
-Accent token: `--accent-grid`. Dark: `var(--acid-500)`, Light: `var(--acid-600)`.
+**Inari — Inari project (hue ~18, Fushimi Inari palette)**
 
-**Ember — Line (hue ~15)**
-
-`--ember-50: #FFEEE5` → `--ember-500: #FF6B35` → `--ember-950: #331205`.  
-Accent token: `--accent-line`. Dark: `var(--ember-500)`, Light: `var(--ember-600)`.
+`--inari-50: #FDEEE7` → `--inari-500: #EE560D` (Orangealicious) → `--inari-950: #2B1C17` (Tetsu-Guro Black).  
+Named stops: `--inari-400` Knockout Orange `#E56F3F`, `--inari-600` Red Panda `#C44813`, `--inari-800` Rogan Josh `#8B310D`.  
+Accent token: `--accent-inari`. Dark: `var(--inari-500)`, Light: `var(--inari-600)`.
 
 #### Semantic ramps (raw)
 
@@ -338,8 +329,8 @@ Each has a full 11-step scale (50–950). Never use directly — always go throu
 
 #### 1-bit primitives
 
-- `--onebit-black: #000000` (`oklch(0% 0 0)`)
-- `--onebit-white: #FFFFFF` (`oklch(100% 0 0)`)
+- `--color-ink: #000000` (`oklch(0% 0 0)`)
+- `--color-paper: #FFFFFF` (`oklch(100% 0 0)`)
 
 ---
 
@@ -423,15 +414,13 @@ Each has a full 11-step scale (50–950). Never use directly — always go throu
 
 #### Project accent tokens
 
-| Token               | Dark base       | Light base      | Project   | Pixel variant |
-| ------------------- | --------------- | --------------- | --------- | ------------- |
-| `--accent-square`   | `--magenta-500` | `--magenta-500` | 7K parent | Square        |
-| `--accent-triangle` | `--solar-500`   | `--solar-600`   | Triangle  | Triangle      |
-| `--accent-circle`   | `--cyan-500`    | `--cyan-600`    | Circle    | Circle        |
-| `--accent-grid`     | `--acid-500`    | `--acid-600`    | Grid      | Grid          |
-| `--accent-line`     | `--ember-500`   | `--ember-600`   | Line      | Line          |
+| Token              | Dark base       | Light base      | Project          |
+| ------------------ | --------------- | --------------- | ---------------- |
+| `--accent-7kgroup`  | `--magenta-500` | `--magenta-500` | 7KGroup (parent) |
+| `--accent-7kminato` | `--cyan-500`    | `--cyan-600`    | 7KMinato         |
+| `--accent-inari`    | `--inari-500`   | `--inari-600`   | Inari            |
 
-These tokens are the canonical hue pairings for Geist Pixel variants. They also feed `--brand-secondary` when a project scope is applied via `data-project` or `ProjectProvider`. Light theme shifts project accents one step darker (500→600) to maintain contrast against the brighter background.
+These tokens are the canonical hue for each project. They also feed `--brand-secondary` when a project scope is applied via `data-project` or `ProjectProvider`. Light theme shifts project accents one step darker (500→600) to maintain contrast against the brighter background.
 
 ---
 
@@ -462,7 +451,7 @@ Semantic colors exist **only** for status indication. Each maps to exactly one m
 2. **Accent on action, not surface** — Brand appears on primary CTAs, focus rings, active borders, brand typography. Never as a full surface background fill.
 3. **Semantic = meaning only** — Status hues exist for machine-state communication (badge bg, toast icon, validation message, online/offline dot). If it doesn't communicate a machine state, use the raw ramps instead.
 4. **Status bg uses `--*-bg`** — Status badges and pills use the `--status-*-bg` token, never the solid `--*-500` as a fill.
-5. **Project scoping** — The parent 7K brand uses magenta primary + cyan secondary. Child projects theme `--brand-secondary` to their own hue (solar, cyan, acid, ember) via `data-project` or `ProjectProvider`. Geist Pixel variant pairings use the `--accent-*` tokens. The neutral ramp stays unchanged.
+5. **Project scoping** — 7KGroup uses magenta, 7KMinato cyan, Inari burnt orange. Within a project scope (`data-project` or `ProjectProvider`), the project accent takes over the **entire brand chain** — `--brand-primary` and `--brand-secondary` (primary/glow buttons, focus rings, brand borders) — making the project hue more prevalent than the 7KGroup baseline. Magenta only persists in constant identity marks (`--accent-7kgroup`, logo/icon strokes). Semantic status colors and the neutral ramp stay unchanged.
 6. **No raw ramp references in components** — Always reference role tokens (`--bg-elevated`, `--text-primary`, `--border-default`), never raw ramp tokens (`--neutral-950`, `--neutral-50`, etc.). This is how theme switching works.
 7. **Dark is default, light is opt-in** — `:root` holds dark token mappings. `@media (prefers-color-scheme: light)` overrides only the role tokens. Primitive ramps are shared and unchanged.
 
@@ -482,11 +471,11 @@ Semantic colors exist **only** for status indication. Each maps to exactly one m
 
 | Variant      | Weight          | Pairs with               | Best for                             |
 | ------------ | --------------- | ------------------------ | ------------------------------------ |
-| **Square**   | 400 (Regular)   | Magenta (7K parent)      | Body-sized pixel text, data displays |
-| **Circle**   | 500 (Medium)    | Cyan                     | Buttons, badges, navigation          |
-| **Grid**     | 600 (SemiBold)  | Acid (Grid project)      | Section titles, stat values          |
-| **Line**     | 700 (Bold)      | Ember (Line project)     | Display headlines, hero text         |
-| **Triangle** | 800 (ExtraBold) | Solar (Triangle project) | Hero wordmarks, giant headlines      |
+| **Square**   | 400 (Regular)   | Magenta (7KGroup)        | Body-sized pixel text, data displays |
+| **Circle**   | 500 (Medium)    | Cyan (7KMinato)          | Buttons, badges, navigation          |
+| **Grid**     | 600 (SemiBold)  | Neutral                  | Section titles, stat values          |
+| **Line**     | 700 (Bold)      | Neutral                  | Display headlines, hero text         |
+| **Triangle** | 800 (ExtraBold) | Inari (Inari project)    | Hero wordmarks, giant headlines      |
 
 ### Font stacks
 
@@ -647,9 +636,9 @@ Sharp (0px) and subtle (2–4px) are preferred for 1-bit elements. 8–12px for
 
 - Scanline overlay on hero / full-bleed sections
 - Halftone dot separators between content blocks
-- Full-bleed sections use `.separator-onebit` (2px white line at 25% opacity) as rhythm breaks
+- Full-bleed sections use `.bg-separator-solid` (2px white line at 25% opacity) as rhythm breaks
 - Texture shift between sections: scanline → solid → halftone → solid → scanline. Never two textured sections adjacent.
-- Manga panel composition: content is the "panel" (solid black border), background is the "page" (noise or scanline). Each panel gets a `.vignette-onebit` edge fade.
+- Manga panel composition: content is the "panel" (solid black border), background is the "page" (noise or scanline). Each panel gets a `.bg-vignette-ink` edge fade.
 
 ### Product shell layout
 
@@ -677,29 +666,32 @@ Sharp (0px) and subtle (2–4px) are preferred for 1-bit elements. 8–12px for
 
 **Modern neon** — the only button system. All buttons use `mono-label` typography (Geist Mono, 11px, 500 weight, 0.12em uppercase) and 4px border-radius. Accent fills use the brand-primary ramp (500→hover:400→active:600). Button groups, split buttons, and loading state are built on the same base.
 
-| Class                   | Description                                                                              |
-| ----------------------- | ---------------------------------------------------------------------------------------- |
-| `.btn-modern`           | Base: mono-label typography, 12px/20px padding, `rounded.sm` (4px)                       |
-| `.btn-modern-primary`   | `--brand-primary` (`--magenta-500`) fill, `--brand-primary-hover` on hover + glow shadow |
-| `.btn-modern-secondary` | `--bg-raised` fill, `--bg-overlay` on hover                                              |
-| `.btn-modern-ghost`     | Transparent, `--text-secondary` text, subtle bg on hover                                 |
-| `.btn-modern-glow`      | `--magenta-500` fill + neon glow, `--magenta-400` on hover                               |
-| `.btn-modern-glow-cyan` | `--cyan-500` fill + cyan glow, `--cyan-400` on hover                                     |
-| `.btn-modern-glow-grid` | `--acid-500` fill + acid glow, `--acid-400` on hover                                     |
-| `.btn-modern-danger`    | Transparent + danger border, danger fill on hover                                        |
-| `.btn-modern-sm/lg`     | Size variants (8px/16px small, 16px/28px large)                                          |
-| `.btn-modern-icon`      | 40×40 square icon button                                                                 |
-| `.btn-modern-lg-icon`   | 52×52 large icon button                                                                  |
-| `.btn-modern-loading`   | Loading state — `onebit-spin` replaces icon                                              |
-| `.btn-group`            | Inline flex container for grouped buttons (adjacent borders merge)                       |
-| `.btn-split`            | Split button trigger — last child gets narrower padding + left border                    |
+| Class                       | Description                                                                                |
+| --------------------------- | ------------------------------------------------------------------------------------------ |
+| `.btn`               | Base: mono-label typography, 12px/20px padding, `rounded.sm` (4px)                         |
+| `.btn-primary`       | Magenta outline, `--brand-primary-subtle` fill tint on hover, white text when active       |
+| `.btn-secondary`     | `--bg-raised` fill, `--bg-overlay` on hover                                                |
+| `.btn-ghost`         | Transparent, `--text-secondary` text, subtle bg on hover                                   |
+| `.btn-glow`          | Magenta outline + persistent neon glow, intensifies on hover                               |
+| `.btn-accent`        | Dynamic `--brand-secondary` outline + fill tint on hover (per-project accent)              |
+| `.btn-glow-accent`   | `--brand-secondary` fill + glow (the filled "neon" button; magenta for the parent brand)   |
+| `.btn-glow-secondary`| Cyan/`--brand-secondary` outline + glow variant of `.btn-glow`                      |
+| `.btn-danger`        | Transparent + danger border, danger fill on hover                                          |
+| `.btn-sm/lg`         | Size variants (8px/16px small, 16px/28px large)                                            |
+| `.btn-icon`          | 40×40 square icon button                                                                   |
+| `.btn-lg-icon`       | 52×52 large icon button                                                                    |
+| `.btn-loading`       | Loading state — `spin-steps` replaces icon                                                |
+| `.btn:disabled`      | 40% opacity, no pointer events, glow removed — applies to every variant                    |
+| `.btn-group`                | Inline flex container for grouped buttons (adjacent borders merge)                         |
+| `.btn-split`                | Split button trigger — last child gets narrower padding + left border                      |
 
 All variants use standard CSS transitions for interaction states:
 
-- **`:hover`** → fill shifts to `--brand-primary-hover` (`--magenta-400`), optional glow shadow intensifies
+- **`:hover`** → border/fill shifts to the `-hover` step of the variant's ramp, optional glow shadow intensifies
 - **`:focus-visible`** → outline ring
-- **`:active`** → fill shifts to `--brand-primary-active` (`--magenta-600`)
-- **`Loading`** → `onebit-spin` (0.6s steps(4) infinite — square frame rotation)
+- **`:active`** → fill shifts to the `-muted` step with `--color-paper` text (keeps contrast ≥ 7:1)
+- **`:disabled`** → 40% opacity, `not-allowed` cursor, no glow
+- **`Loading`** → `spin-steps` (0.6s steps(4) infinite — square frame rotation)
 
 ### 6b. Form controls
 
@@ -708,9 +700,9 @@ All variants use standard CSS transitions for interaction states:
 | `.input`         | Text input: black bg, 2px white border, accent glow on focus         |
 | `.textarea`      | Multi-line input, same tokens                                        |
 | `.select-native` | Custom dropdown, SVG chevron                                         |
-| `.checkbox`      | 16px square, checked fills white (`.checkbox-accent`: fills magenta) |
-| `.radio`         | 16px square, selected fills white (`.radio-accent`: fills magenta)   |
-| `.toggle`        | 36x18 switch, on state fills white (`.toggle-accent`: fills magenta) |
+| `.checkbox`      | 16px square, checked fills white (`.checkbox-accent`: fills `--brand-secondary`) |
+| `.radio`         | 16px square, selected fills white (`.radio-accent`: fills `--brand-secondary`)   |
+| `.toggle`        | 36x18 switch, on state fills white (`.toggle-accent`: fills `--brand-secondary`) |
 | `.range`         | 6px track, 16px square thumb                                         |
 | `.form-group`    | Flex column with gap                                                 |
 | `.form-label`    | Mono uppercase label, 11px                                           |
@@ -776,7 +768,7 @@ All variants use standard CSS transitions for interaction states:
 | Class                               | Description                                 |
 | ----------------------------------- | ------------------------------------------- |
 | `.progress`                         | 12px bar, 2px border                        |
-| `.progress-accent`                  | Magenta fill                                |
+| `.progress-accent`                  | `--brand-secondary` (project accent) fill   |
 | `.progress-indeterminate`           | Scanning bar animation                      |
 | `.progress-striped`                 | Striped fill overlay                        |
 | `.spinner`                          | 20px square rotating frame, 90° steps       |
@@ -816,16 +808,16 @@ All variants use standard CSS transitions for interaction states:
 
 These classes add thin color to any 1-bit component without breaking the black/white base. Apply alongside the component class.
 
-| Class                                                                  | Effect                          |
-| ---------------------------------------------------------------------- | ------------------------------- |
-| `.accent-border-top` / `.accent-border-left` / `.accent-border-bottom` | 3px magenta border on one edge  |
-| `.cyan-border-top` / `.grid-border-top` / `.line-border-top`           | 3px colored top border          |
-| `.accent-underline` / `.cyan-underline`                                | Colored underline on text       |
-| `.accent-dot` / `.cyan-dot` / `.grid-dot`                              | Small colored dot after element |
-| `.accent-bar` / `.cyan-bar` / `.grid-bar` / `.line-bar`                | Thin colored bar across top     |
-| `.glow-mod` / `.glow-mod-cyan`                                         | Colored glow shadow             |
-| `.border-mod-accent` / `.border-mod-cyan`                              | Border color override           |
-| `.accent-corner` / `.cyan-corner`                                      | Small colored corner badge      |
+| Class                                                                                  | Effect                                            |
+| -------------------------------------------------------------------------------------- | ------------------------------------------------- |
+| `.accent-border-top` / `.accent-border-left` / `.accent-border-bottom`                 | 3px `--brand-primary` (magenta) border on one edge |
+| `.accent-secondary-border-top` / `-left` / `-bottom`                                   | 3px `--brand-secondary` (per-project) border      |
+| `.accent-underline` / `.accent-secondary-underline`                                    | Colored underline on text                         |
+| `.accent-dot` / `.accent-secondary-dot`                                                | Small colored dot after element                   |
+| `.accent-bar` / `.accent-secondary-bar`                                                | Thin colored bar across top                       |
+| `.glow-mod` / `.glow-mod-secondary`                                                    | Colored glow shadow                               |
+| `.border-mod-accent` / `.border-mod-secondary`                                         | Border color override                             |
+| `.accent-corner` / `.accent-secondary-corner`                                          | Small colored corner badge                        |
 
 ### 1-bit composition rules
 
@@ -859,8 +851,8 @@ These classes add thin color to any 1-bit component without breaking the black/w
 
 | Animation       | Class                              | Duration                     | Type    | Description                                                               |
 | --------------- | ---------------------------------- | ---------------------------- | ------- | ------------------------------------------------------------------------- |
-| Scanline scroll | `.scanline` (::after)              | 8s linear infinite           | Ambient | Horizontal lines scroll down — signature 7K texture                       |
-| Scanline fast   | `.scanline-fast` (::after)         | 3s linear infinite           | Ambient | Faster variant for high-energy sections                                   |
+| Scanline scroll | `.bg-scanline` (::after)              | 8s linear infinite           | Ambient | Horizontal lines scroll down — signature 7K texture                       |
+| Scanline fast   | `.bg-scanline-fast` (::after)         | 3s linear infinite           | Ambient | Faster variant for high-energy sections                                   |
 | Basic glitch    | `.glitch`                          | 0.3s, 3 iterations           | Trigger | Translate jitter on 5 random frames                                       |
 | Complex glitch  | `.glitch-complex`                  | 0.8s, 2 iterations           | Trigger | Multi-axis + skew + clip-path splits                                      |
 | Glitch accent   | `.glitch-accent`                   | 0.4s, 2 iterations           | Trigger | Glitch with magenta glow trail                                            |
@@ -868,11 +860,11 @@ These classes add thin color to any 1-bit component without breaking the black/w
 | Binary blink    | `.blink` / `.blink-fast`           | 1s / 0.4s step-end           | Ambient | Sharp on/off toggle                                                       |
 | Typewriter      | `.typewriter`                      | 1.5s (30 steps)              | Trigger | Text reveal from left                                                     |
 | Neon pulse      | `.neon-pulse` / `.neon-pulse-cyan` | 2s ease-in-out               | Ambient | Accent glow oscillation                                                   |
-| Noise shift     | `.noise-animated`                  | 0.5s, steps(5)               | Ambient | SVG noise translates in discrete positions                                |
+| Noise shift     | `.bg-noise-animated`                  | 0.5s, steps(5)               | Ambient | SVG noise translates in discrete positions                                |
 | Scan reveal     | `.scan-reveal`                     | 2s, 1 iteration              | Trigger | White bar sweeps down                                                     |
-| Pixel fade-in   | `.pixel-fade-in`                   | 0.6s, steps(8)               | Trigger | Left-to-right reveal in pixel steps                                       |
+| Pixel fade-in   | `.step-fade-in`                   | 0.6s, steps(8)               | Trigger | Left-to-right reveal in stepped frames                                       |
 | Invert flash    | `.invert-flash`                    | 0.15s, 2 iterations          | Trigger | Full filter inversion burst                                               |
-| Pixel dots      | `.pixel-dots` / `.pixel-dots-fast` | 0.3s, steps(4), 2 iterations | Trigger | Small black squares scatter at random positions — 1-bit corruption effect |
+| Pixel dots      | `.step-dots` / `.step-dots-fast` | 0.3s, steps(4), 2 iterations | Trigger | Small black squares scatter at random positions — stepped corruption effect |
 | Progress scan   | `.progress-indeterminate`          | 1.5s                         | Loading | Bar sweeps left-to-right                                                  |
 | Skeleton pulse  | `.skeleton`                        | 1.2s ease-in-out             | Loading | Opacity pulse                                                             |
 | Slide-up reveal | `.slide-up-reveal`                 | 0.5s ease-out                | Trigger | Content rises with clip-path                                              |
@@ -899,7 +891,7 @@ These classes add thin color to any 1-bit component without breaking the black/w
 
 1. **One ambient + one trigger.** At most one ambient animation (scanline, noise, flicker, shimmer, iso-grid-scroll) runs continuously. Triggered animations (glitch, invert-flash, scan-reveal, iso-assemble, iso-perspective-dolly) fire on interaction.
 2. **Glitch is a burst, not a loop.** Basic glitch runs exactly 3 iterations (0.9s total) on the class utility. Pixel-dots runs 2 iterations (0.6s) for a quick corruption scatter. Never loop glitch infinitely.
-3. **Scanline is the default ambient.** Every hero/full-bleed section should evaluate whether `.scanline` adds atmosphere. UI content sections (dashboard, settings) must not use ambient animation.
+3. **Scanline is the default ambient.** Every hero/full-bleed section should evaluate whether `.bg-scanline` adds atmosphere. UI content sections (dashboard, settings) must not use ambient animation.
 4. **Cascade: reduced-motion wins.** All animations collapse to 0.01ms at `prefers-reduced-motion: reduce`. No exceptions.
 5. **Step timing for pixel-perfect animation.** Keyframes that simulate digital/retro effects use `steps()` timing instead of `ease`. This preserves sharp on/off quality.
 6. **Overlay animations must have `pointer-events: none`.** Scanline, vignette, noise, and scan-reveal use `::before`/`::after` pseudo-elements.
@@ -908,11 +900,11 @@ These classes add thin color to any 1-bit component without breaking the black/w
 
 | Surface                    | Ambient animation         | Trigger animation              |
 | -------------------------- | ------------------------- | ------------------------------ |
-| Landing / marketing hero   | `.scanline` (8s)          | `.scan-reveal` on load         |
+| Landing / marketing hero   | `.bg-scanline` (8s)          | `.scan-reveal` on load         |
 | Dashboard / app shell      | None                      | `.glitch` on filter change     |
 | Loading state              | `.skeleton` or `.shimmer` | None                           |
 | Error state                | None                      | `.glitch-complex` on container |
-| 1-bit splash / manga panel | `.scanline-fast` (3s)     | `.invert-flash` on page enter  |
+| 1-bit splash / manga panel | `.bg-scanline-fast` (3s)     | `.invert-flash` on page enter  |
 | Toast / notification       | None                      | `.slide-up-reveal` on mount    |
 | Button (accent)            | None                      | Color transition on hover      |
 | Accent text                | `.accent-flicker`         | None                           |
@@ -963,10 +955,10 @@ import { Button } from '7k-design-system/react';
 
 **CSS classes applied:**
 
-- Base: `.btn-modern`
-- Variant: `.btn-modern-{variant}` (e.g., `.btn-modern-primary`)
-- Size: `.btn-modern-sm` | `.btn-modern-lg` (md applies no extra class)
-- Loading: `.btn-modern-loading` when `loading={true}`
+- Base: `.btn`
+- Variant: `.btn-{variant}` (e.g., `.btn-primary`)
+- Size: `.btn-sm` | `.btn-lg` (md applies no extra class)
+- Loading: `.btn-loading` when `loading={true}`
 
 **Behavior:** Forwards ref to `<button>`. Combines `className` prop with generated classes. Sets `aria-busy` when loading.
 
@@ -1168,19 +1160,7 @@ import { IsometricBackground } from '7k-design-system/react';
 </IsometricBackground>
 ```
 
-**CSS classes applied:** `.isometric-grid`, `.isometric-grid-animated`
-
-### MangaPanel
-
-```typescript
-import { MangaPanel } from '7k-design-system/react';
-
-<MangaPanel frame texture="halftone" speedLine="horizontal">
-  Splash content
-</MangaPanel>
-```
-
-**CSS classes applied:** `.panel`, `.panel-frame`, `.panel-halftone`, `.speed-line-horizontal`
+**CSS classes applied:** `.iso-grid`, `.iso-grid-animated`
 
 ### ThemeToggle
 
@@ -1289,7 +1269,7 @@ The CSS is split into 10 source files under `src/css/`, compiled into `dist/7k-d
 | `isometric.css`     | ~12.5KB | 11 isometric patterns: grid, cubes, pyramid, hex, pipes, terrain + animation variants                             |
 | `components.css`    | ~36KB   | 40+ component classes: buttons, forms, nav, data display, overlays, feedback, media, misc                         |
 | `modifiers.css`     | ~2.2KB  | Accent layer modifiers: border-top, underline, dot, bar, glow, corner                                             |
-| `animations.css`    | ~15.8KB | 20+ keyframe animations: glitch, flicker, blink, typewriter, neon-pulse, scan-reveal, pixel-fade, iso-float       |
+| `animations.css`    | ~15.8KB | 20+ keyframe animations: glitch, flicker, blink, typewriter, neon-pulse, scan-reveal, step-fade, iso-float       |
 | `accessibility.css` | ~0.6KB  | `prefers-reduced-motion` collapse, `:focus-visible` rings, `prefers-contrast` support, screen-reader utilities    |
 
 ### PostCSS Pipeline
@@ -1361,7 +1341,6 @@ Port: 6006
 | `Components/Badges` (`Components.stories.tsx`)       | Badge variants                                   |
 | `Components/Cards` (`Components.stories.tsx`)        | Card styles and textures                         |
 | `Components/TexturedCards`                           | Textured card variants                           |
-| `Components/MangaPanels`                             | Manga panel frames and textures                  |
 | `Components/Navigation` (`Components.stories.tsx`)   | Nav patterns                                     |
 | `Components/Alerts` (`Components.stories.tsx`)       | Alert variants                                   |
 | `Components/Toasts` (`Components.stories.tsx`)       | Toast variants                                   |
@@ -1417,4 +1396,4 @@ npm run chromatic       # Visual regression testing
 | Multiple textures on the same section layer        | Max one background + one overlay per section                                                                                                                                                                             |
 | Continuous animation on UI surfaces                | Ambient animations are for hero/landing sections only                                                                                                                                                                    |
 | Isometric animation on interactive UI              | Isometric bg + motion is for hero/splash sections only; never on cards, buttons, or form controls                                                                                                                        |
-| Mixing 1-bit button patterns into product surfaces | Use the modern button system (.btn-modern\*) for all product surfaces. 1-bit button classes (.btn, .btn-primary, .btn-accent) are removed — do not reintroduce raw invert-hover buttons in place of modern neon buttons. |
+| Mixing 1-bit button patterns into product surfaces | Use the modern button system (.btn\*) for all product surfaces. 1-bit button classes (.btn, .btn-primary, .btn-accent) are removed — do not reintroduce raw invert-hover buttons in place of modern neon buttons. |

package/README.md

@@ -1,11 +1,11 @@
 # 7k-design-system
 
-> Dark-first, neon-accented, manga-inflected design system for multi-project tech company 7K.
-> Built for midnight. Three-font system. Major neon #FF0FF. Secondary neon cyan (thematic per project). Background textures on components. Manga panels. Isometric animations.
+> Dark-first, neon-accented design system for multi-project tech company 7K.
+> Built for midnight. Three-font system. Major neon #FF0FF. Secondary neon cyan (thematic per project). Background textures on components. Callouts & surfaces. Isometric animations.
 
 ## Product Overview
 
-**7k-design-system** is a dark-first dual-theme design system created for 7K, a technology holding company with multiple sub-projects. The system embodies a Tokyo neon atmosphere — high contrast, nocturnal canvas, electric accents — combined with manga-influenced 1-bit visual language using pure black and white textures.
+**7k-design-system** is a dark-first dual-theme design system created for 7K, a technology holding company with multiple sub-projects. The system embodies a Tokyo neon atmosphere — high contrast, nocturnal canvas, electric accents — combined with high-contrast visual language using pure black and white textures.
 
 **Source product:** 7K is a technology holding company that builds infrastructure, AI pipelines, and digital products across multiple sub-projects. This design system serves as the visual foundation for 7K and all its child projects, providing a unified design language that differentiates sub-projects through accent color overrides while maintaining consistent typography, spacing, component patterns, and animation systems across all surfaces.
 
@@ -17,7 +17,7 @@ The design system supports five primary surfaces:
 | ----------------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
 | **Company Website**     | Dark landing pages with scanline heroes, project showcases, stats grids  | `DESIGN.md` §1–5, `src/stories/Components.stories.tsx`                 |
 | **Product Dashboard**   | Data-dense admin interfaces with sidebar nav, tables, status cards       | `src/react/components/`, `src/stories/Components.stories.tsx`          |
-| **Sub-project Landing** | Child project pages with accent hue overrides (cyan, acid, ember, solar) | `DESIGN.md` §2 (accent tokens), `src/css/projects.css`                 |
+| **Sub-project Landing** | Project pages with accent hue overrides (magenta = 7KGroup, cyan = 7KMinato, inari = Inari) | `DESIGN.md` §2 (accent tokens), `src/css/projects.css`                 |
 | **Internal Tools**      | CLI-like interfaces, monitoring panels, resource dashboards              | `DESIGN.md` §3 (mono labels), `src/stories/Tokens.mdx`                 |
 | **Mobile App**          | Responsive adaptations with bottom tab nav, touch-friendly targets       | `DESIGN.md` §5 (responsive grid), `src/stories/Components.stories.tsx` |
 
@@ -28,11 +28,11 @@ The system provides these core capabilities:
 - **Dark-first theming** with opt-in light mode via `data-theme="light"`
 - **Major neon accent** (#FF0FF magenta) + **secondary neon accent** (cyan by default, thematic per project)
 - **Three-font system**: Geist Sans (display/body), Geist Mono (labels/code), Geist Pixel (5 geometric variants for ornamental use)
-- **Texture categories**: scanline, halftone, dot matrix, stripes, crosshatch, checkerboard, noise, vignette, isometric, manga panels
-- **40+ 1-bit components**: zero-radius, 2px white borders, invert-on-hover, thin accent modifiers
+- **Texture categories**: scanline, halftone, dot matrix, stripes, crosshatch, checkerboard, noise, vignette, isometric, surfaces & callouts
+- **40+ components**: sharp geometry, high-contrast borders, invert-on-hover, thin accent modifiers
 - **Textured component variants**: halftone, scanline, noise, dots, crosshatch on cards, panels, modals, drawers, toasts, buttons
-- **20+ animations**: ambient (scanline scroll, CRT flicker, neon pulse) and trigger (glitch, pixel-dots, invert-flash)
-- **Isometric geometry animations**: combined animated background classes (`.isometric-grid-animated`, etc.)
+- **20+ animations**: ambient (scanline scroll, CRT flicker, neon pulse) and trigger (glitch, step-dots, invert-flash)
+- **Isometric geometry animations**: combined animated background classes (`.iso-grid-animated`, etc.)
 - **Engineering-blueprint aesthetic**: mono labels as "connective tissue" throughout all surfaces
 - **React UI kit**: 20+ TypeScript components wrapping the CSS system
 
@@ -47,8 +47,8 @@ Every design rule is grounded in the original brand brief (quoted inline in `DES
 | "Our main brand color is #FF0FF"       | Major magenta accent; cyan secondary (thematic per project)                                  |
 | "Tech company with different projects" | Sub-project accent overrides via `--brand-secondary` and `--accent-*` tokens                 |
 | "Tokyo's neon atmosphere"              | Dark near-black canvas (`#0A0A0D`), electric accents, no warm/beige tones                    |
-| "Manga-influenced 1-bit"               | Pure black/white elements, texture patterns, manga panel utilities, zero radius, 2px borders |
-| "Abstract 1-bit animations"            | 20+ keyframes with step timing for retro digital feel                                        |
+| "High-contrast textures"               | Pure black/white elements, texture patterns, surface & callout utilities, zero radius, 2px borders |
+| "Stepped animations"            | 20+ keyframes with step timing for retro digital feel                                        |
 | "Dark theme for websites"              | Dark-first: `--bg-void: #000000`, `--bg-base: #0A0A0D`; light is opt-in                      |
 
 ## Package Contents
@@ -69,9 +69,9 @@ Every design rule is grounded in the original brand brief (quoted inline in `DES
 ├── fonts/                       # Geist Pixel font files (preserved originals)
 │   ├── GeistPixel-Square.ttf    # 400 weight · pairs with magenta (7K parent)
 │   ├── GeistPixel-Circle.ttf    # 500 weight · pairs with cyan
-│   ├── GeistPixel-Grid.ttf      # 600 weight · pairs with acid
-│   ├── GeistPixel-Line.ttf      # 700 weight · pairs with ember
-│   └── GeistPixel-Triangle.ttf  # 800 weight · pairs with solar
+│   ├── GeistPixel-Grid.ttf      # 600 weight · neutral
+│   ├── GeistPixel-Line.ttf      # 700 weight · neutral
+│   └── GeistPixel-Triangle.ttf  # 800 weight · pairs with Inari
 │
 ├── src/                         # Source code
 │   ├── css/                     # Modular CSS source files
@@ -107,7 +107,7 @@ npm run build-storybook # Static build for deployment
 | -------------------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
 | **Colors & Tokens**  | `src/stories/Tokens.mdx`              | Magenta/cyan brand ramps, semantic brand tokens, neutral/status colors, typography scale, spacing, radii, shadows                                                                       | `src/css/tokens.css`; `DESIGN.md` §2–4                   |
 | **Components**       | `src/stories/Components.stories.tsx`  | Modern neon button system (primary, glow, secondary, ghost, danger), cards, modals, drawers, toasts, tooltips, alerts, tabs, nav, inputs, toggles, selects, textareas, texture overlays | `src/react/components/`; `src/css/components.css`        |
-| **Textures**         | `src/stories/Textures.stories.tsx`    | All texture categories with density variants: scanline, halftone, dot matrix, stripes, crosshatch, checkerboard, noise, vignette, separators, manga panels                              | `src/css/textures.css`; `src/css/manga.css`; `DESIGN.md` |
+| **Textures**         | `src/stories/Textures.stories.tsx`    | All texture categories with density variants: scanline, halftone, dot matrix, stripes, crosshatch, checkerboard, noise, vignette, separators, surfaces & callouts                              | `src/css/textures.css`; `src/css/callouts.css`; `DESIGN.md` |
 | **Icons & Logos**    | `src/stories/Icons.stories.tsx`       | Curated icon set, logo variants, brand application rules, contextual previews                                                                                                           | `build/` directory; `src/react/components/Icon.tsx`      |
 | **Theme / Projects** | `src/stories/ThemeToggle.stories.tsx` | Light/dark/system theme switching and project accent overrides                                                                                                                          | `src/react/theme/`; `src/css/projects.css`               |
 | **Overview**         | `src/stories/Overview.mdx`            | Design principles, voice/tone, anti-patterns, reuse workflow                                                                                                                            | `DESIGN.md`; `SKILL.md`; `CONSUMER_GUIDE.md`             |
@@ -147,11 +147,11 @@ Requires self-hosting the `fonts/` directory for Geist Pixel variants.
 2. **Bind tokens** — Import `colors_and_type.css` (or `dist/7k-design-system.css` for external use)
 3. **Override accent** — For child projects, set the appropriate `--accent-*` token:
    ```css
-   .project-neon {
-     --accent-circle: var(--cyan-500);
+   .project-7kminato {
+     --accent-7kminato: var(--cyan-500);
    }
-   .project-grid {
-     --accent-grid: var(--acid-500);
+   .project-inari {
+     --accent-inari: var(--inari-500);
    }
    ```
 4. **Preview tokens** — Run `npm run storybook` and open the Colors, Tokens, Textures, and Components stories to verify values render correctly
@@ -171,8 +171,8 @@ Requires self-hosting the `fonts/` directory for Geist Pixel variants.
      font-family: var(--font-sans);
    }
    ```
-4. **Apply textures** — Add classes like `.scanline`, `.halftone-md`, `.noise` to sections
-5. **Use components** — Apply classes like `.btn-modern-primary`, `.badge-success`, `.input`
+4. **Apply textures** — Add classes like `.bg-scanline`, `.bg-halftone-md`, `.bg-noise` to sections
+5. **Use components** — Apply classes like `.btn-primary`, `.badge-success`, `.input`
 
 ## File Structure Notes