7k-design-system 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.2.0](https://github.com/7K-Group/7k-design-system/compare/v1.1.1...v1.2.0) (2026-10-08)
+
+
+### Features
+
+* modernize design system — naming standardization, Inari project, accent-driven UI ([#65](https://github.com/7K-Group/7k-design-system/issues/65)) ([b160a60](https://github.com/7K-Group/7k-design-system/commit/b160a60b4373c6a8fb1d91446397f8cd6b84ef80))
+
 ## [1.1.1](https://github.com/7K-Group/7k-design-system/compare/v1.1.0...v1.1.1) (2026-08-13)
 
 
@@ -31,6 +38,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+- `.btn-modern-glow-secondary` variant (cyan/per-project outline + glow) — completes the `glow-secondary` Button variant that React and the consumer guide already referenced
+- `.btn-modern:disabled` / `[aria-disabled='true']` styling (40% opacity, no pointer events, glow removed) for all button variants
+- `.select-native:disabled`, `.checkbox`/`.radio`/`.toggle` disabled styling (`:has(input:disabled)`, 40% opacity)
+- Visible keyboard focus rings for custom `Checkbox`, `Radio`, and `Toggle` controls (`:has(input:focus-visible)`)
+- Missing status variant classes: `.toast-info`, `.alert-info`, `.alert-danger` (the React `Alert` `danger` variant emitted an unstyled class), `.alert-content`, `.alert-close`, `.toast-content`, plus focus-visible styles for dismiss buttons
+- `.card-static:hover` reset so `Card hover={false}` actually disables the hover lift
+- `.spinner-cyan` and `.icon-box-cyan` classes (previously documented but unimplemented)
+- Modal: Escape key closes, Tab focus is trapped inside the dialog while open
+- Drawer: Escape key closes, focus returns to the triggering element
+- Tabs: ARIA APG keyboard support (Arrow/Home/End moves selection, roving tabindex), `TabPanel` is focusable
+- `tests/States.test.tsx` covering the new interaction states
 - Production-ready build pipeline with Vite, PostCSS, and autoprefixer
 - TypeScript configuration and type definitions for React UI kit
 - ESLint, Prettier, and Stylelint configurations for code quality
@@ -44,6 +62,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Self-hosted Geist font strategy with CDN fallback
 
 ### Changed
+- **Contrast (WCAG AA, dark theme):** `--text-tertiary` now maps to `--neutral-400` (was `--neutral-500`, 3.5–3.7:1) and `--text-disabled` to `--neutral-600` (was `--neutral-700`, 1.75:1); `.badge-neutral` uses `--status-neutral`; primary/glow button `:active` text is now white (was magenta on muted fill, 3.0:1). Visual change is subtle but visible — captions and disabled elements read slightly brighter
+- `Input` with an `error` now applies the `.error` class (danger border) in addition to `aria-invalid`
+- Component CSS now consumes semantic tokens instead of raw ramps (`.input:focus` → `--border-focus`; badge/toast/alert status colors → `--status-*`; `.table td`/`.modal-body` → `--text-secondary`)
+- Hard-coded z-index values replaced with `--z-*` tokens in `.tooltip-content`, `.combobox-menu`, and Modal/Drawer/Tooltip inline styles
+- Shimmer animation now uses theme-aware `--texture-*` tokens (works in light theme)
+- Light theme: `--shadow-inset` corrected to a black inner shadow; the `prefers-color-scheme: light` media block now yields to an explicit `data-theme` attribute
+- DESIGN.md, SKILL.md, and CONSUMER_GUIDE.md synced with implemented class names, button variants, modifier names, and token values
 - Converted React UI kit from plain JS to TypeScript with proper component patterns
 - Refactored CSS to eliminate hard-coded colors in favor of design tokens
 - Updated `package.json` with proper `exports`, `engines`, and `types` fields

package/CONSUMER_GUIDE.md

@@ -72,9 +72,9 @@ import '7k-design-system/css/animations';
 
 ```html
 <!-- Buttons -->
-<button class="btn-modern btn-modern-primary">Primary</button>
-<button class="btn-modern btn-modern-secondary">Secondary</button>
-<button class="btn-modern btn-modern-ghost">Ghost</button>
+<button class="btn btn-primary">Primary</button>
+<button class="btn btn-secondary">Secondary</button>
+<button class="btn btn-ghost">Ghost</button>
 
 <!-- Forms -->
 <input class="input" placeholder="Enter text" />
@@ -271,12 +271,32 @@ function ThemeAwareComponent() {
 </Modal>
 ```
 
+Accessibility notes: `Modal` closes on **Escape**, traps **Tab** focus inside the dialog while open, and restores focus to the triggering element on close. Always pass `aria-labelledby` (or `aria-label`). `Drawer` supports Escape and focus restoration as well.
+
+#### Toast
+
+```tsx
+<Toast
+  variant="success" // 'default' | 'success' | 'error' | 'warning' | 'info'
+  onDismiss={() => setShow(false)}
+>
+  Deployed
+</Toast>
+```
+
+Mount toasts in a fixed container at the top of your app (they use `role="status"`/`role="alert"` and the `slide-up-reveal` animation). Example container:
+
+```tsx
+<div style={{ position: 'fixed', bottom: 24, right: 24, zIndex: 'var(--z-toast)', display: 'grid', gap: 8 }}>
+  {toasts.map((t) => <Toast key={t.id} {...t} />)}
+</div>
+```
+
 #### Layout helpers
 
 ```tsx
 <TextureOverlay texture="halftone" animate>...</TextureOverlay>
 <IsometricBackground pattern="grid" animated>...</IsometricBackground>
-<MangaPanel frame texture="halftone" speedLine="horizontal">...</MangaPanel>
 ```
 
 #### Forms
@@ -286,9 +306,12 @@ function ThemeAwareComponent() {
 <Radio label="Option" name="group" />
 <Toggle label="Enable" checked={on} onChange={setOn} />
 <Select><option>A</option></Select>
+<Listbox options={[{ value: 'a', label: 'A' }]} value={v} onChange={setV} />
 <Textarea rows={4} />
 ```
 
+Form notes: passing `error` to `Input` adds the `.error` class (danger border) and wires `aria-invalid` + an alert-role message automatically (for `Textarea`/`Select`, add the `error` class and `aria-invalid` manually). Custom `Checkbox`/`Radio`/`Toggle` render a visually-hidden native input — keyboard focus shows a magenta focus ring on the custom control via `:focus-visible`. `Tabs` supports full arrow-key / Home / End navigation with roving tabindex per the ARIA tabs pattern.
+
 ---
 
 ## Project Customization
@@ -300,20 +323,14 @@ The parent 7K brand uses magenta primary + cyan secondary. Each sub-project can
 ```css
 /* project-neon.css */
 .project-neon {
-  /* Circle project — cyan secondary accent */
+  /* 7KMinato — cyan takes over the full brand chain */
   --brand-secondary: var(--cyan-500);
 }
 
-/* project-grid.css */
-.project-grid {
-  /* Grid project — acid green secondary accent */
-  --brand-secondary: var(--acid-500);
-}
-
-/* project-ember.css */
-.project-ember {
-  /* Line project — orange secondary accent */
-  --brand-secondary: var(--ember-500);
+/* project-inari.css */
+.project-inari {
+  /* Inari — burnt orange takes over the full brand chain */
+  --brand-secondary: var(--inari-500);
 }
 ```
 

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`.
 
@@ -187,16 +187,16 @@ Company/project differentiation: the parent 7K brand uses vivid magenta (`--bran
 | 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              |
+| Checkerboard       | `.checkerboard`, `.checkerboard-contrast`                                      | 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  |
+| Vignette           | `.vignette-ink`, `.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 `.separator-solid` or `.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 `.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.
+- **Vignette frame**: `.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
 
@@ -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 `.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 `.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
 
@@ -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.
 
@@ -1170,18 +1162,6 @@ import { IsometricBackground } from '7k-design-system/react';
 
 **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`
-
 ### ThemeToggle
 
 ```typescript
@@ -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,8 +28,8 @@ 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.)
@@ -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
@@ -172,7 +172,7 @@ Requires self-hosting the `fonts/` directory for Geist Pixel variants.
    }
    ```
 4. **Apply textures** — Add classes like `.scanline`, `.halftone-md`, `.noise` to sections
-5. **Use components** — Apply classes like `.btn-modern-primary`, `.badge-success`, `.input`
+5. **Use components** — Apply classes like `.btn-primary`, `.badge-success`, `.input`
 
 ## File Structure Notes