7k-design-system 1.1.0 → 1.2.0

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. One brand color. Ten 1-bit textures. Forty components. Twenty 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.
 
@@ -13,48 +13,51 @@
 
 The design system supports five primary surfaces:
 
-| Surface | Description | Key Files |
-|---------|-------------|-----------|
-| **Company Website** | Dark landing pages with scanline heroes, project showcases, stats grids | `DESIGN.md` §1–5, `preview/brand-assets.html` |
-| **Product Dashboard** | Data-dense admin interfaces with sidebar nav, tables, status cards | `source_examples/App.js`, `source_examples/Sidebar.js`, `preview/components-buttons.html` |
-| **Sub-project Landing** | Child project pages with accent hue overrides (cyan, acid, ember, solar) | `DESIGN.md` §2 (accent tokens), `colors_and_type.css` |
-| **Internal Tools** | CLI-like interfaces, monitoring panels, resource dashboards | `DESIGN.md` §3 (mono labels), `preview/spacing-tokens.html` |
-| **Mobile App** | Responsive adaptations with bottom tab nav, touch-friendly targets | `DESIGN.md` §5 (responsive grid), `preview/colors-primary.html` |
+| Surface                 | Description                                                              | Key Files                                                              |
+| ----------------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
+| **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** | 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` |
 
 ### Core Capabilities
 
 The system provides these core capabilities:
 
 - **Dark-first theming** with opt-in light mode via `data-theme="light"`
-- **Single brand accent** (#FF0FF magenta) with 4 project-specific accent overrides
+- **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)
-- **10 texture categories**: scanline, halftone, dot matrix, stripes, crosshatch, checkerboard, noise, vignette, isometric, separators
-- **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.)
 - **Engineering-blueprint aesthetic**: mono labels as "connective tissue" throughout all surfaces
+- **React UI kit**: 20+ TypeScript components wrapping the CSS system
 
 ## Source & Context References
 
 Every design rule is grounded in the original brand brief (quoted inline in `DESIGN.md`):
 
-| Evidence from Brief | Design Rule |
-|---|---|
-| "We only have 1 font and it's Geist" | Three-font system: Geist Sans + Geist Mono + Geist Pixel (5 variants) |
-| "Our logo is just '7K'" | Star-burst pattern SVG logo with #FF0FF accent tones |
-| "Our main brand color is #FF0FF" | Single magenta accent; no secondary brand color |
-| "Tech company with different projects" | Sub-project accent overrides: `--accent-circle`, `--accent-grid`, `--accent-line`, `--accent-triangle` |
-| "Tokyo's neon atmosphere" | Dark near-black canvas (`#0A0A0D`), electric accents, no warm/beige tones |
-| "Manga-influenced 1-bit" | Pure black/white elements, 10 texture patterns, zero radius, 2px borders |
-| "Abstract 1-bit 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 |
+| Evidence from Brief                    | Design Rule                                                                                  |
+| -------------------------------------- | -------------------------------------------------------------------------------------------- |
+| "We only have 1 font and it's Geist"   | Three-font system: Geist Sans + Geist Mono + Geist Pixel (5 variants)                        |
+| "Our logo is just '7K'"                | Star-burst pattern SVG logo with #FF0FF accent tones                                         |
+| "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                    |
+| "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
 
 ```
 7k-design-system/
-├── DESIGN.md                    # Canonical design system documentation (809 lines)
+├── DESIGN.md                    # Canonical design system documentation
 ├── SKILL.md                     # Agent-facing usage guide with surface mapping
-├── colors_and_type.css          # Complete CSS token system (custom properties + component classes)
+├── CONSUMER_GUIDE.md            # End-user integration guide
 ├── README.md                    # This file
 ├── package.json                 # npm package manifest
 │
@@ -66,70 +69,64 @@ 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
 │
-├── preview/                     # HTML review cards (see Preview Manifest below)
-│   ├── colors-primary.html
-│   ├── typography-specimens.html
-│   ├── spacing-tokens.html
-│   ├── components-buttons.html
-│   ├── textures-backgrounds.html
-│   └── brand-assets.html
+├── src/                         # Source code
+│   ├── css/                     # Modular CSS source files
+│   └── react/                   # TypeScript React UI kit
+│
+├── tests/                       # Vitest test suite
+├── src/stories/                 # Storybook documentation
 │
 ├── examples/legacy/             # Legacy UI kit (deprecated)
 │   └── ui_kits/app/             # Applied React interface kit
-│   ├── index.html               # Runnable entry point (loads React 18 + CSS)
-│   ├── README.md                # UI kit documentation
-│   └── components/              # 11 modular React components (plain JS, no JSX)
-│       ├── Icon7k.js
-│       ├── Navbar.js
-│       ├── HeroSection.js
-│       ├── PhilosophySection.js
-│       ├── ProjectsSection.js
-│       ├── StatsSection.js
-│       ├── InteractiveSection.js
-│       ├── DataSection.js
-│       ├── EffectsSection.js
-│       ├── OverlaySection.js
-│       ├── CtaSection.js
-│       ├── FooterSection.js
-│       └── ThemeToggle.js
 │
 └── dist/                        # Distribution build
-    ├── 7k-design-system.css     # Self-contained CSS with working CDN font URLs
-    ├── test-isolation.html      # Automated test page for external validation
+    ├── 7k-design-system.css     # Self-contained CSS bundle
+    ├── tokens.css               # Standalone tokens
+    ├── components.css           # Standalone components
+    ├── textures.css             # Standalone textures
+    ├── animations.css           # Standalone animations
+    ├── projects.css             # Standalone project overrides
     ├── fonts/                   # Copied Geist Pixel files for distribution
-    ├── build/                   # Copied brand assets for distribution
-    └── preview/                 # Copied preview cards for distribution
+    └── build/                   # Copied brand assets for distribution
 ```
 
-## Preview Manifest
+## Storybook
+
+Run Storybook to preview components, textures, tokens, and themes interactively.
 
-Each preview card is a standalone HTML file that loads `../colors_and_type.css` and demonstrates a specific token group or component set. Open any card in a browser to inspect rendered values.
+```bash
+npm run storybook       # Dev server at http://localhost:6006
+npm run build-storybook # Static build for deployment
+```
 
-| Preview Card | Path | What It Demonstrates | Source-Backed Components |
-|---|---|---|---|
-| **Colors — Brand Primary** | `preview/colors-primary.html` | Magenta 11-step ramp, semantic brand tokens (`--brand-primary`, `--brand-primary-hover`, etc.), project accent overrides (`--accent-square` through `--accent-line`), neutral ramp, status colors | `colors_and_type.css` §Layer 1–2 color tokens; `DESIGN.md` §2 |
-| **Typography Specimens** | `preview/typography-specimens.html` | Geist Sans display/body scale (`--text-display` through `--text-caption`), Geist Mono "connective tissue" labels, Geist Pixel 5 geometric variants with project pairings, weight scale (100–900) | `colors_and_type.css` §Typography; `DESIGN.md` §3; `fonts/` |
-| **Spacing Tokens** | `preview/spacing-tokens.html` | 4px baseline grid (`--space-0` through `--space-32`), radius scale (`--radius-none` through `--radius-full`), shadow elevation (`--shadow-sm` through `--shadow-glow`), applied spacing examples | `colors_and_type.css` §Spacing; `DESIGN.md` §4 |
-| **Buttons** | `preview/components-buttons.html` | Modern neon button system: primary, glow (magenta/cyan/grid), secondary, ghost, danger variants; sizes (sm/default/lg); icon buttons; button groups; split buttons; loading state; real product copy examples | `colors_and_type.css` §Button system; `DESIGN.md` §6a |
-| **Textures & Backgrounds** | `preview/textures-backgrounds.html` | All 10 texture categories with density variants: scanline (slow/fast), halftone (sm/md/lg/accent), dot matrix (dense/standard/sparse), stripes (diagonal/horizontal/vertical, dense/negative), crosshatch (standard/dense), checkerboard (standard/one-bit), noise (standard/heavy), vignette (standard/sharp), separators, section composition examples | `colors_and_type.css` §Textures; `DESIGN.md` §1b |
-| **Brand Assets** | `preview/brand-assets.html` | Logo variants (`build/logo-7k.svg`, `build/logo-7k-light.svg`, `build/icon.svg`) rendered at multiple sizes, brand application rules, contextual previews (scanline hero, manga section, brand fill, glow wordmark) | `build/` directory; `DESIGN.md` §8 (logo spec) |
+| Story                | Path                                  | What It Demonstrates                                                                                                                                                                    | Source-Backed Components                                 |
+| -------------------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
+| **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, 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`             |
 
 ## Quick Start
 
 ### Option 1: CDN (when published)
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/7k-design-system@latest/dist/7k-design-system.css">
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/7k-design-system@latest/dist/7k-design-system.css"
+/>
 ```
 
 ### Option 2: Self-hosted
 
 ```html
-<link rel="stylesheet" href="dist/7k-design-system.css">
+<link rel="stylesheet" href="dist/7k-design-system.css" />
 ```
 
 Copy the `dist/` folder to your project. Geist Pixel fonts will load from `dist/fonts/`.
@@ -137,7 +134,7 @@ Copy the `dist/` folder to your project. Geist Pixel fonts will load from `dist/
 ### Option 3: Source CSS
 
 ```html
-<link rel="stylesheet" href="colors_and_type.css">
+<link rel="stylesheet" href="colors_and_type.css" />
 ```
 
 Requires self-hosting the `fonts/` directory for Geist Pixel variants.
@@ -150,12 +147,16 @@ 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-grid { --accent-grid: var(--acid-500); }
+   .project-7kminato {
+     --accent-7kminato: var(--cyan-500);
+   }
+   .project-inari {
+     --accent-inari: var(--inari-500);
+   }
    ```
-4. **Preview tokens** — Open relevant `preview/*.html` cards to verify token values render correctly
-5. **Reference UI kit** — Study `ui_kits/app/components/` for composition patterns; copy components into your project
-6. **Use build assets** — Reference `build/logo-7k.svg` (dark), `build/logo-7k-light.svg` (light), `build/icon.svg` (app)
+4. **Preview tokens** — Run `npm run storybook` and open the Colors, Tokens, Textures, and Components stories to verify values render correctly
+5. **Reference UI kit** — Study `examples/legacy/ui_kits/app/components/` for composition patterns; copy React components from `src/react/components/` into your project
+6. **Use build assets** — Reference `build/logos/logo-7k.svg` (dark), `build/logos/logo-7k-light.svg` (light), `build/icons/icon.svg` (app)
 
 ### For Developers
 
@@ -171,11 +172,11 @@ 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
 
-- **`build/`** — Preserved original brand assets. These are the source-of-truth SVGs referenced by `DESIGN.md` and `preview/brand-assets.html`. Do not modify.
+- **`build/`** — Preserved original brand assets. These are the source-of-truth SVGs referenced by `DESIGN.md` and Storybook. Do not modify.
 - **`fonts/`** — Preserved original Geist Pixel TTF files. These are loaded via `@font-face` in `colors_and_type.css`. The files are also copied to `dist/fonts/` for distribution.
 - **`source_examples/`** — Preserved high-signal component snapshots from the original dashboard UI kit. `App.js` and `Sidebar.js` demonstrate the app-shell layout pattern with state management, project cards, and accent-colored navigation.
 - **`ui_kits/app/`** — Applied interface kit demonstrating a complete company landing page. Components use plain React (`React.createElement`, no JSX) for zero-build-step compatibility. Each component exposes `window.ComponentName` for cross-file composition.

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: 7k-design-system
-description: Dark, neon-accented, manga-inflected design system for multi-project tech company 7K. Three-font system (Geist sans + Geist Mono + Geist Pixel 5 geometric variants), #FF0FF brand pulse, Tokyo neon atmosphere with 1-bit manga punctuation. 10 background texture patterns, 40+ 1-bit components, 20+ animation keyframes, React TypeScript UI kit (Button, Input, Badge, ThemeToggle, ThemeProvider, useTheme). One brand, sub-project accent overrides. Production-ready npm package with Vite + PostCSS build, Vitest test suite, Storybook documentation.
+description: Dark-first, neon-accented design system for multi-project tech company 7K. Three-font system (Geist sans + Geist Mono + Geist Pixel 5 geometric variants), #FF0FF major neon + cyan secondary (thematic per project), Tokyo neon atmosphere with high-contrast texture punctuation. Background textures on components, surface & callout utilities, isometric geometry animations, 40+ components, 20+ animation keyframes. React TypeScript UI kit (Button, Input, Badge, Card, Modal, Drawer, Toast, Tooltip, Alert, Tabs, Nav, Checkbox, Radio, Toggle, Select, Textarea, ThemeToggle, ThemeProvider, ProjectProvider, useTheme, useProject). Production-ready npm package with Vite + PostCSS build, Vitest test suite, Storybook documentation.
 user-invocable: true
 ---
 
@@ -10,54 +10,51 @@ user-invocable: true
 
 This package is organized as a Claude Design-style reusable skill. Each file below serves a specific role:
 
-| File / dir | Role | Evidence basis |
-|---|---|---|---|
-| `DESIGN.md` | Canonical rules — visual foundations, color, type, spacing, components, motion, voice, anti-patterns, React UI kit, modular CSS architecture, build system, testing | Each section opens with `Source context reference:` citing the brand brief |
-| `src/css/index.css` | Modular CSS entry point — imports 10 source files (fonts, tokens, themes, base, textures, isometric, components, modifiers, animations, accessibility) | Compiled to `dist/7k-design-system.css` via Vite + PostCSS |
-| `src/css/tokens.css` | All design tokens: 11-step color ramps, semantic role mapping, typography, spacing, motion, layout | Single source of truth for all token values |
-| `src/css/components.css` | 40+ 1-bit component classes + modern neon button system | Zero radius, 2px borders, invert hover, accent modifiers |
-| `src/react/` | TypeScript React UI kit — Button, Input, Badge, ThemeToggle, ThemeProvider, useTheme | Thin wrappers over CSS classes with ref forwarding |
-| `preview/` | 6 focused HTML review cards (colors-primary, typography-specimens, spacing-tokens, components-buttons, textures-backgrounds, brand-assets) | Each card demonstrates concrete token values with rendered swatches and specimens |
-| `examples/legacy/ui_kits/app/` | Legacy landing page kit (plain JS React.createElement) — hero, philosophy, projects, stats, demos, effects, overlays, CTA, footer | Preserved for reference; new work uses the React UI kit |
-| `build/` | Brand runtime assets — logo-7k.svg, logo-7k-light.svg, icon.svg | Star-burst pattern SVG logo with color and light-background variants |
-| `fonts/` | GeistPixel-{Square,Circle,Grid,Line,Triangle}.ttf | Geist Pixel loaded via `@font-face` — 5 geometric variant TTF files |
-| `tests/` | Vitest test suite — Button, Input, Badge, ThemeProvider, ThemeToggle, a11y | @testing-library/react + jsdom + jest-axe |
-| `src/stories/` | Storybook documentation — Overview, Tokens, Components, Textures | MDX + CSF stories for interactive documentation |
+| File / dir               | Role                                                                                                                                                                                                                | Evidence basis                                                             |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| `DESIGN.md`              | Canonical rules — visual foundations, color, type, spacing, components, motion, voice, anti-patterns, React UI kit, modular CSS architecture, build system, testing                                                 | Each section opens with `Source context reference:` citing the brand brief |
+| `src/css/index.css`      | Modular CSS entry point — imports source files (fonts, tokens, themes, projects, base, textures, isometric, callouts, components, modifiers, animations, accessibility)                                                | Compiled to `dist/7k-design-system.css` via Vite + PostCSS                 |
+| `src/css/tokens.css`     | All design tokens: 11-step color ramps, semantic role mapping, typography, spacing, motion, layout                                                                                                                  | Single source of truth for all token values                                |
+| `src/css/components.css` | 40+ component classes + modern neon button system + textured component variants                                                                                                                               | Zero radius, 2px borders, invert hover, accent modifiers, texture overlays |
+| `src/css/callouts.css`   | Surface & callout system — outlined surfaces, gutters, motion lines, callouts, screentone overlays                                                                                                                  | High-contrast layout primitives                                            |
+| `src/react/`             | TypeScript React UI kit — Button, Input, Badge, Card, Modal, Drawer, Toast, Tooltip, Alert, Tabs, Nav, Checkbox, Radio, Toggle, Select, Textarea, ThemeToggle, ThemeProvider, ProjectProvider, useTheme, useProject | Thin wrappers over CSS classes with ref forwarding and ARIA attributes     |
+| `src/stories/`           | Storybook documentation — Overview, Tokens, Components, Textures                                                                                                                                                    | MDX + CSF stories for interactive documentation                            |
 
 ## Source context
 
 Every design rule in this system is grounded in evidence from the brand brief (quoted inline in `DESIGN.md §1`):
 
-| Evidence from brief | Design rule |
-|---|---|---|---|
-| #FF00FF brand color | `--brand-primary: var(--magenta-500)` — single brand accent for CTAs, focus rings, active borders |
-| "1 font and it's Geist" (Geist superfamily) | Three-font system: Geist (sans) for headings/body, Geist Mono (monospace) for labels/code/tabular data, Geist Pixel (5 geometric variants) for ornamental display. Mono labels as "connective tissue" |
-| "Logo is just '7K'" | Star-burst pattern SVG logo. Color variant (magenta accents) or light variant (black polygons for light backgrounds) |
-| "Tokyo's neon atmosphere" | Dark near-black canvas (`--bg-base: #0A0A0D`), electric accent, nocturnal high contrast |
-| "Manga-influenced 1-bit" | Pure black/white elements with zero radius, 10 texture patterns (scanline, halftone, dot matrix, stripes, crosshatch, checkerboard, noise, vignette), 40+ 1-bit components |
-| "Abstract 1-bit animations" | 20+ keyframes: scanline-scroll, glitch (basic + complex), pixel-dots, flicker, blink, neon-pulse, typewriter, pixel-fade-in, invert-flash, scan-reveal, shimmer, noise-shift, slide-up-reveal, matrix-rain, frame-step |
-| "Dark theme for website" | Dark-first: `--bg-void: #000000`, `--bg-base: #0A0A0D` — near-black, not navy, not grey. Toggle via `html[data-theme="light"]` or `@media (prefers-color-scheme: light)` |
-| "Differentiate main company with projects" | Sub-project accent token override (`--accent-circle`, `--accent-grid`, `--accent-line`) — parent 7K stays magenta (`--accent-square`), child projects choose own hue |
-| "Very complete and detailed" | 4px spacing grid in rem, 14-step scale, fluid type `clamp()`, 7-step radius, 4-level shadow, component specs for 5 button variants, 3 card types, 3 badge styles, inputs with focus/error, tables, tabs |
+| Evidence from brief                         | Design rule                                                                                                                                                                                                            |
+| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| #FF00FF brand color                         | `--brand-primary: var(--magenta-500)` — single brand accent for CTAs, focus rings, active borders                                                                                                                      |
+| "1 font and it's Geist" (Geist superfamily) | Three-font system: Geist (sans) for headings/body, Geist Mono (monospace) for labels/code/tabular data, Geist Pixel (5 geometric variants) for ornamental display. Mono labels as "connective tissue"                  |
+| "Logo is just '7K'"                         | Star-burst pattern SVG logo. Color variant (magenta accents) or light variant (black polygons for light backgrounds)                                                                                                   |
+| "Tokyo's neon atmosphere"                   | Dark near-black canvas (`--bg-base: #0A0A0D`), electric accent, nocturnal high contrast                                                                                                                                |
+| "Manga-influenced 1-bit"                    | Pure black/white elements with zero radius, 10 texture patterns (scanline, halftone, dot matrix, stripes, crosshatch, checkerboard, noise, vignette), 40+ components                                                   |
+| "Abstract 1-bit animations"                 | 20+ keyframes: scanline-scroll, glitch (basic + complex), pixel-dots, flicker, blink, neon-pulse, typewriter, pixel-fade-in, invert-flash, scan-reveal, shimmer, noise-shift, slide-up-reveal, matrix-rain, frame-step |
+| "Dark theme for website"                    | Dark-first: `--bg-void: #000000`, `--bg-base: #0A0A0D` — near-black, not navy, not grey. Toggle via `html[data-theme="light"]` or `@media (prefers-color-scheme: light)`                                               |
+| "Differentiate main company with projects"  | Project accent tokens (`--accent-7kgroup` magenta, `--accent-7kminato` cyan, `--accent-inari` burnt orange) — each project has one canonical hue, and within its scope that hue overrides the whole `--brand-primary` chain, not just secondary                                                   |
+| "Very complete and detailed"                | 4px spacing grid in rem, 14-step scale, fluid type `clamp()`, 7-step radius, 4-level shadow, component specs for 5 button variants, 3 card types, 3 badge styles, inputs with focus/error, tables, tabs                |
 
 ## When to use
 
 Use when generating artifacts for any 7k-design-system branded surface. The following table maps common surfaces to the relevant package files:
 
-| Surface | Read these files | Key rules to follow |
-|---|---|---|
-| Company website | DESIGN.md §1–5, preview/brand-assets.html | Dark bg, neon accent, scanline hero sections, "7K" logo |
-| Product dashboard | DESIGN.md §5–7, preview/components-buttons.html | Sidebar nav, card grids, tabular data, 1-bit trigger animations on buttons |
-| Sub-project landing | DESIGN.md §2, src/css/tokens.css | Override `--accent-circle` / `--accent-grid` / `--accent-line` per child project, keep all other tokens unchanged |
-| Internal tool | DESIGN.md §3, §5, §9, preview/spacing-tokens.html | Mono numerics, dense tables, minimum decoration |
-| Mobile app | DESIGN.md §5 (responsive), preview/colors-theme-dark.html or preview/colors-theme-light.html | 4-column grid at 480px, bottom tab nav |
-| Pitch deck / slides | DESIGN.md §7–9 | Scanline/glitch used sparingly, no warm tones |
-| React application | DESIGN.md §8 (React UI kit), CONSUMER_GUIDE.md | Import from `7k-design-system/react`, wrap with `ThemeProvider` |
-| CSS-only static site | DESIGN.md §6, §9, CONSUMER_GUIDE.md §2 | Import `7k-design-system/css`, use component classes directly |
+| Surface              | Read these files                                               | Key rules to follow                                                             |
+| -------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------- |
+| Company website      | DESIGN.md §1–5, src/stories/Icons.stories.tsx                  | Dark bg, neon accent, scanline hero sections, "7K" logo                         |
+| Product dashboard    | DESIGN.md §5–7, src/stories/Components.stories.tsx             | Sidebar nav, card grids, tabular data, stepped trigger animations on buttons    |
+| Sub-project landing  | DESIGN.md §2, src/css/tokens.css, src/css/projects.css         | Override `--brand-secondary` per child project, keep all other tokens unchanged |
+| Internal tool        | DESIGN.md §3, §5, §9, src/stories/Tokens.mdx                   | Mono numerics, dense tables, minimum decoration                                 |
+| Mobile app           | DESIGN.md §5 (responsive), src/stories/ThemeToggle.stories.tsx | 4-column grid at 480px, bottom tab nav                                          |
+| Pitch deck / slides  | DESIGN.md §7–9                                                 | Scanline/glitch used sparingly, no warm tones                                   |
+| React application    | DESIGN.md §8 (React UI kit), CONSUMER_GUIDE.md                 | Import from `7k-design-system/react`, wrap with `ThemeProvider`                 |
+| CSS-only static site | DESIGN.md §6, §9, CONSUMER_GUIDE.md §2                         | Import `7k-design-system/css`, use component classes directly                   |
 
 ## How to use
 
 ### Step 1 — Read the source
+
 Open `DESIGN.md §1` for the source context first. Then read `DESIGN.md` sections §1–2 (visual theme + color), §8 (voice), and §9 (anti-patterns) for the posture and constraints.
 
 ### Step 2 — Choose your integration path
@@ -67,19 +64,21 @@ Open `DESIGN.md §1` for the source context first. Then read `DESIGN.md` section
 Import the compiled CSS bundle:
 
 ```html
-<link rel="stylesheet" href="node_modules/7k-design-system/dist/7k-design-system.css">
+<link rel="stylesheet" href="node_modules/7k-design-system/dist/7k-design-system.css" />
 ```
 
 Or via ES module import:
+
 ```typescript
 import '7k-design-system/css';
 ```
 
 Or import modular CSS for tree-shaking:
+
 ```typescript
-import '7k-design-system/css/tokens';     // Tokens only
+import '7k-design-system/css/tokens'; // Tokens only
 import '7k-design-system/css/components'; // Components only
-import '7k-design-system/css/textures';   // Textures only
+import '7k-design-system/css/textures'; // Textures only
 import '7k-design-system/css/animations'; // Animations only
 ```
 
@@ -102,6 +101,7 @@ function App() {
 ```
 
 Use components:
+
 ```tsx
 import { Button, Input, Badge, ThemeToggle, useTheme } from '7k-design-system/react';
 
@@ -111,7 +111,9 @@ function Header() {
     <header>
       <ThemeToggle />
       <Badge variant="success">Online</Badge>
-      <Button variant="primary" onClick={handleClick}>Submit</Button>
+      <Button variant="primary" onClick={handleClick}>
+        Submit
+      </Button>
       <Input placeholder="Search..." value={query} onChange={setQuery} />
     </header>
   );
@@ -120,62 +122,87 @@ function Header() {
 
 ### Step 3 — Override accent for sub-projects
 
-Set the project's assigned accent token at the scope:
+Set the project's assigned secondary brand color at the scope:
 
 ```css
-.project-flow {
-  --accent-circle: var(--cyan-500);    /* cyan accent */
-  --accent-grid: var(--acid-500);      /* acid/green accent */
-  --accent-line: var(--ember-500);     /* ember/orange accent */
+[data-project='7kminato'] {
+  --brand-secondary: var(--cyan-500); /* cyan accent */
+}
+
+[data-project='inari'] {
+  --brand-secondary: var(--inari-500); /* burnt orange accent */
 }
 ```
 
-Parent 7K uses `--accent-square` (magenta). Child projects pick one of the other four accent tokens.
+Parent 7K keeps the default `--brand-secondary: var(--cyan-500)`. Use `--accent-square`, `--accent-circle`, `--accent-grid`, `--accent-line`, `--accent-triangle` only when pairing a specific Geist Pixel variant with a hue.
+
+Alternatively, use the React provider:
+
+```tsx
+import { ProjectProvider } from '7k-design-system/react';
+
+<ProjectProvider project="flow">
+  <App />
+</ProjectProvider>;
+```
 
 ### Step 4 — Preview token groups
-Open any card in `preview/`:
-- `preview/colors-primary.html` — accent swatches, ramps, project overrides
-- `preview/typography-specimens.html` — type scale + weights + pixel variants
-- `preview/spacing-tokens.html` — 4px grid, radii, shadows
-- `preview/components-buttons.html` — product component states
-- `preview/textures-backgrounds.html` — 10 background texture categories with composition demos
-- `preview/brand-assets.html` — logo variants + brand in context
+
+Run Storybook to inspect tokens, components, textures, and themes interactively:
+
+```bash
+npm run storybook
+```
+
+Key stories:
+
+- `src/stories/Tokens.mdx` — accent swatches, ramps, typography, spacing
+- `src/stories/Components.stories.tsx` — product component states
+- `src/stories/Textures.stories.tsx` — texture categories with composition demos
+- `src/stories/Icons.stories.tsx` — logo variants + brand in context
+- `src/stories/ThemeToggle.stories.tsx` — light/dark/system themes and project overrides
 
 ### Step 5 — Reference the legacy UI kit
+
 Open `examples/legacy/ui_kits/app/index.html` in a browser. Components under `examples/legacy/ui_kits/app/components/` demonstrate landing page patterns with React (plain JS, `React.createElement`). Each component exposes `window.ComponentName` per Claude Design conventions. **Note:** This is legacy code preserved for reference. New work should use the React UI kit in `src/react/`.
 
 ### Step 6 — Use build assets
-Reference `build/logo-7k.svg` (color, default), `build/logo-7k-light.svg` (light backgrounds), or `build/icon.svg` (app icon).
+
+Reference `build/logos/logo-7k.svg` (color, default), `build/logos/logo-7k-light.svg` (light backgrounds), or `build/icons/icon.svg` (app icon).
 
 ## Design system highlights
 
-| Feature | Detail | Source |
-|---|---|---|---|
-| Theme | Dark-first — `--bg-void: #000000`, `--bg-base: #0A0A0D` near-black canvas, toggle to light via `data-theme="light"` | "dark theme for website" |
-| Brand accent | Magenta `--magenta-500: #FF00FF` with neon glow | #FF0FF brand hex |
-| Secondary accents | Solar (`--solar-500: #FFD60A`), Cyan (`--cyan-500: #00E5FF`), Acid (`--acid-500: #7CFF00`), Ember (`--ember-500: #FF6B35`) | Tokyo neon atmosphere |
-| Type | Geist Pixel (5 variants: Square/Circle/Grid/Line/Triangle) for all surfaces including code/tabular | "only 1 font and it's Geist" (Geist Pixel) |
-| 1-bit textures | 10 pattern categories: scanline, halftone (3 densities), dot matrix (3 densities), diagonal stripes (3 variants), horizontal/vertical stripes, crosshatch (2 densities), checkerboard, noise (2 opacities), vignette (2 sharpnesses) | "Manga-influenced 1-bit" |
-| 1-bit animations | 20+ keyframes organized as ambient (flicker, blink, neon-pulse, shimmer, accent-flicker, frame-step) and trigger (glitch, glitch-complex, pixel-dots, invert-flash, typewriter, pixel-fade, scan-reveal, slide-up-reveal) | "abstract 1-bit animations" |
-| 1-bit components | 40+ unified components with zero radius, 2px borders, invert hover, thin accent layer modifiers (accent-border-top, accent-bar, accent-dot, glow-mod, accent-corner) | "Manga-influenced 1-bit" |
-| React UI kit | Button, Input, Badge, ThemeToggle, ThemeProvider, useTheme — TypeScript components with ref forwarding | Production-ready component library |
-| Modular CSS | 10 source files compiled via Vite + PostCSS; standalone exports for tokens, components, textures, animations | Tree-shakeable, performant |
-| Sub-projects | Accent token override via `--accent-square|triangle|circle|grid|line` — parent 7K stays magenta | "differentiate main company with projects" |
-| Spacing | 4px grid in rem, 14-step scale (0–128px) | "very complete and detailed" |
-| Reduced motion | All animations disabled at `prefers-reduced-motion: reduce` | System accessibility policy |
-| Testing | Vitest + @testing-library/react + jest-axe — 6 test files covering components and a11y | Production quality assurance |
-| Documentation | Storybook with Overview, Tokens, Components, and Textures stories | Interactive component documentation |
+| Feature           | Detail                                                                                                                                                                                                                               | Source                                     |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ | ------ | ---- | ------------------------------- | ------------------------------------------ |
+| Theme             | Dark-first — `--bg-void: #000000`, `--bg-base: #0A0A0D` near-black canvas, toggle to light via `data-theme="light"`                                                                                                                  | "dark theme for website"                   |
+| Brand accent      | Magenta `--magenta-500: #FF00FF` with neon glow                                                                                                                                                                                      | #FF0FF brand hex                           |
+| Secondary accents | Cyan 7KMinato (`--cyan-500: #00E5FF`), Inari (`--inari-500: #EE560D`)                                                                                                           | Tokyo neon atmosphere                      |
+| Type              | Three-font Geist system: Geist (sans) for headings/body, Geist Mono for labels/code/tabular data, Geist Pixel (5 variants: Square/Circle/Grid/Line/Triangle) for ornamental display                                                  | "only 1 font and it's Geist" (Geist Pixel) |
+| Textures          | 10 pattern categories: scanline, halftone (3 densities), dot matrix (3 densities), diagonal stripes (3 variants), horizontal/vertical stripes, crosshatch (2 densities), checkerboard, noise (2 opacities), vignette (2 sharpnesses) | "Manga-influenced 1-bit"                   |
+| Animations        | 20+ keyframes organized as ambient (flicker, blink, neon-pulse, shimmer, accent-flicker, frame-step) and trigger (glitch, glitch-complex, pixel-dots, invert-flash, typewriter, pixel-fade, scan-reveal, slide-up-reveal)            | "abstract 1-bit animations"                |
+| Components        | 40+ unified components with zero radius, 2px borders, invert hover, thin accent layer modifiers (accent-border-top, accent-bar, accent-dot, glow-mod, accent-corner)                                                                 | "Manga-influenced 1-bit"                   |
+| React UI kit      | Button, Input, Badge, ThemeToggle, ThemeProvider, useTheme — TypeScript components with ref forwarding                                                                                                                               | Production-ready component library         |
+| Modular CSS       | 10 source files compiled via Vite + PostCSS; standalone exports for tokens, components, textures, animations                                                                                                                         | Tree-shakeable, performant                 |
+| Sub-projects      | Accent token override via `--accent-square                                                                                                                                                                                           | triangle                                   | circle | grid | line` — parent 7K stays magenta | "differentiate main company with projects" |
+| Spacing           | 4px grid in rem, 14-step scale (0–128px)                                                                                                                                                                                             | "very complete and detailed"               |
+| Reduced motion    | All animations disabled at `prefers-reduced-motion: reduce`                                                                                                                                                                          | System accessibility policy                |
+| Testing           | Vitest + @testing-library/react + jest-axe — 9 test files (incl. a11y and component-state suites)                                                                                                                                    | Production quality assurance               |
+| Documentation     | Storybook with Overview, Tokens, Components, and Textures stories                                                                                                                                                                    | Interactive component documentation        |
 
 ## Quick reference — exact class names and tokens
 
-### Modern button classes (use these, not legacy .btn-*)
+### Modern button classes (use these, not legacy .btn-\*)
+
 ```
-.btn-modern .btn-modern-primary .btn-modern-secondary .btn-modern-ghost
-.btn-modern-glow .btn-modern-glow-cyan .btn-modern-glow-grid .btn-modern-danger
-.btn-modern-sm .btn-modern-lg .btn-modern-icon .btn-modern-lg-icon .btn-modern-loading
+.btn .btn-primary .btn-secondary .btn-ghost
+.btn-glow .btn-accent .btn-glow-accent .btn-glow-secondary
+.btn-danger
+.btn-sm .btn-lg .btn-icon .btn-lg-icon
+.btn-loading .btn:disabled
 ```
 
 ### Texture classes
+
 ```
 .scanline .scanline-fast
 .halftone-sm .halftone-md .halftone-lg .halftone-accent
@@ -183,12 +210,13 @@ Reference `build/logo-7k.svg` (color, default), `build/logo-7k-light.svg` (light
 .diagonal-stripes .diagonal-stripes-dense .diagonal-stripes-negative
 .stripes-h .stripes-h-dense .stripes-v .stripes-v-dense
 .crosshatch .crosshatch-dense
-.checkerboard .checkerboard-onebit
+.checkerboard .checkerboard-contrast
 .noise .noise-heavy .noise-animated
-.vignette-onebit .vignette-onebit-sharp
+.vignette-ink .vignette-ink-sharp
 ```
 
 ### Animation classes
+
 ```
 .glitch .glitch-complex .glitch-accent
 .flicker .flicker-fast .blink .blink-fast
@@ -201,6 +229,7 @@ Reference `build/logo-7k.svg` (color, default), `build/logo-7k-light.svg` (light
 ```
 
 ### Key role tokens (always use these, never raw ramps)
+
 ```
 --bg-void --bg-base --bg-elevated --bg-raised --bg-overlay --bg-pressed
 --text-primary --text-secondary --text-tertiary --text-disabled --text-inverse
@@ -246,7 +275,7 @@ import '7k-design-system/css/animations';
 import { Button, Input, Badge, ThemeToggle, ThemeProvider, useTheme } from '7k-design-system/react';
 
 // Static assets
-import logo from '7k-design-system/build/logo-7k.svg';
-import logoLight from '7k-design-system/build/logo-7k-light.svg';
-import icon from '7k-design-system/build/icon.svg';
+import logo from '7k-design-system/build/logos/logo-7k.svg';
+import logoLight from '7k-design-system/build/logos/logo-7k-light.svg';
+import icon from '7k-design-system/build/icons/icon.svg';
 ```

package/build/icons/icon-7kgroup-light.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="208" height="207">
+<path id="stroke-1" d="M0 0 C5.31124964 0.603148 10.48703511 1.43913427 15.70556641 2.60717773 C16.43345084 2.76700921 17.16133528 2.92684069 17.91127682 3.09151554 C20.30879661 3.61883334 22.7051582 4.15123171 25.1015625 4.68359375 C26.80517693 5.05913826 28.50886821 5.43433426 30.21263123 5.8092041 C34.7498531 6.80842764 39.28611201 7.81195236 43.82210159 8.81675339 C51.28033334 10.46849791 58.73958849 12.11562021 66.19889259 13.76251411 C68.04881424 14.17100274 69.89869699 14.57966759 71.74854088 14.98850822 C83.02899365 17.48103879 94.31557491 19.93611433 105.62109375 22.3125 C107.79802212 22.77283097 109.97494311 23.23319683 112.15185547 23.69360352 C116.00363238 24.50743675 119.85834657 25.30477983 123.71533203 26.09350586 C125.3845784 26.44579716 127.05369683 26.79869553 128.72265625 27.15234375 C129.83367958 27.37150452 129.83367958 27.37150452 130.96714783 27.59509277 C132.96508789 28.02709961 132.96508789 28.02709961 136 29 C136.33 29.99 136.66 30.98 137 32 C129.29851279 34.38264441 121.53802394 36.48456869 113.73828125 38.51953125 C112.44506913 38.85815768 111.15188757 39.19690088 109.85873413 39.53575134 C106.39552234 40.44257301 102.93164295 41.3468178 99.467556 42.25028992 C97.30259146 42.81508493 95.13780023 43.38053979 92.97305298 43.94616699 C65.30194833 51.17500901 37.60064857 58.2829979 9.86859131 65.2746582 C6.95503557 66.01136955 4.04311103 66.75428619 1.13134766 67.49804688 C-0.69756438 67.96234502 -2.52650191 68.42654277 -4.35546875 68.890625 C-5.18959793 69.1051532 -6.02372711 69.3196814 -6.88313293 69.54071045 C-9.99400234 70.32656685 -12.77765467 71 -16 71 C-12.92929924 54.77377074 -9.40553704 38.66561099 -5.75 22.5625 C-5.52395081 21.56295288 -5.29790161 20.56340576 -5.06500244 19.53356934 C-4.41628654 16.66878444 -3.7636237 13.80493209 -3.109375 10.94140625 C-2.91163483 10.06849442 -2.71389465 9.19558258 -2.51016235 8.29621887 C-1.115605 2.23121 -1.115605 2.23121 0 0 Z " fill="#FF35EB" transform="translate(26,51)"/>
+<path id="stroke-2" d="M0 0 C-1.67248293 10.01430524 -4.81990605 19.54309491 -7.84765625 29.2109375 C-8.4257994 31.07021702 -9.00346387 32.92964545 -9.58067322 34.78921509 C-11.09330629 39.65840935 -12.61175033 44.52577089 -14.13165283 49.3927002 C-16.27778373 56.26859344 -18.41607032 63.14693086 -20.55503845 70.02505493 C-21.69252479 73.68276675 -22.8322997 77.33975309 -23.97389221 80.9961853 C-24.49310597 82.66200356 -25.01230729 84.3278257 -25.53149414 85.99365234 C-25.76787598 86.74902283 -26.00425781 87.50439331 -26.24780273 88.28265381 C-27.25246686 91.50973417 -28.17985248 94.71940994 -29 98 C-49.13 98 -69.26 98 -90 98 C-89.08735353 94.34941413 -88.08326569 92.14101086 -86.21875 88.94140625 C-85.33932739 87.4243811 -85.33932739 87.4243811 -84.44213867 85.87670898 C-83.48078003 84.23617554 -83.48078003 84.23617554 -82.5 82.5625 C-81.83653564 81.42176025 -81.17307129 80.28102051 -80.48950195 79.10571289 C-78.70177289 76.03315466 -76.90744295 72.96450671 -75.11090088 69.89709473 C-74.00188698 68.00322241 -72.89407958 66.10864941 -71.78662109 64.21386719 C-64.64885447 52.00358705 -57.4869888 39.80737281 -50.30541992 27.62280273 C-49.79458862 26.75570679 -49.79458862 26.75570679 -49.2734375 25.87109375 C-48.90790771 25.28473145 -48.54237793 24.69836914 -48.16577148 24.09423828 C-46.89109403 21.91410493 -46.89109403 21.91410493 -45.85180664 19.07373047 C-43.51839101 13.84292684 -41.33140906 10.25401282 -35.90917969 8.10131836 C-30.9167507 6.46669422 -25.81795263 5.35419438 -20.6875 4.25 C-18.90454999 3.82731719 -17.122629 3.40026875 -15.34179688 2.96875 C-2.90837515 0 -2.90837515 0 0 0 Z " fill="#FF11F8" transform="translate(158,96)"/>
+<path id="blob-1" d="M0 0 C-1.43234259 3.83404835 -3.20394594 7.29062018 -5.23828125 10.83984375 C-6.211604 12.5417688 -6.211604 12.5417688 -7.20458984 14.27807617 C-7.90704252 15.49799011 -8.60968357 16.7177956 -9.3125 17.9375 C-10.03607495 19.19826337 -10.75954386 20.45908761 -11.48291016 21.7199707 C-17.41002821 32.0360915 -23.44411364 42.28753807 -29.52587891 52.51318359 C-30.98773375 54.97930706 -32.43927165 57.45117766 -33.88671875 59.92578125 C-34.33998535 60.70026611 -34.79325195 61.47475098 -35.26025391 62.27270508 C-36.09331585 63.69753149 -36.92514175 65.12308176 -37.75537109 66.54956055 C-40.04520076 70.46097972 -42.44977773 74.25273462 -45 78 C-50.07599137 74.46218783 -53.33453539 69.89206823 -57 65 C-58.53804041 62.97640538 -60.07999024 60.95577855 -61.625 58.9375 C-62.04023926 58.39496582 -62.45547852 57.85243164 -62.88330078 57.29345703 C-66.36160697 52.7738662 -69.95070177 48.35075295 -73.5625 43.9375 C-77.55147174 39.0540138 -81.50205965 34.14957782 -85.3125 29.125 C-86.03050781 28.17882812 -86.74851562 27.23265625 -87.48828125 26.2578125 C-89 24 -89 24 -89 22 C-85.42579333 21.07287008 -81.8515694 20.14580673 -78.27734375 19.21875 C-77.16125229 18.92924469 -76.04516083 18.63973938 -74.89524841 18.34146118 C-68.75872985 16.74984654 -62.62199379 15.1590777 -56.48486328 13.56982422 C-41.73019206 9.75106531 -41.73019206 9.75106531 -26.98371887 5.90081787 C-24.09145469 5.1418846 -21.19838391 4.38605777 -18.3052063 3.63061523 C-16.41473273 3.13540794 -14.52558699 2.63514046 -12.63647461 2.13476562 C-10.97177124 1.70067383 -10.97177124 1.70067383 -9.2734375 1.2578125 C-8.33935059 1.0117627 -7.40526367 0.76571289 -6.44287109 0.51220703 C-4 0 -4 0 0 0 Z " fill="#000000" transform="translate(102,111)"/>
+<path id="blob-2" d="M0 0 C6.0218352 1.73771685 11.46488166 4.56608463 17.05859375 7.33984375 C18.12110855 7.86260391 19.18362335 8.38536407 20.27833557 8.92396545 C23.66650824 10.59155047 27.05214804 12.26419708 30.4375 13.9375 C33.81962136 15.60652692 37.20228435 17.2744345 40.58595276 18.94032288 C42.68828272 19.9756357 44.7896776 21.01285013 46.88999939 22.05223083 C51.87620309 24.51034073 56.86222845 26.87564724 62 29 C61.43189471 34.79859195 60.26320265 39.97686594 58.4375 45.5 C58.08655273 46.59054688 58.08655273 46.59054688 57.72851562 47.703125 C57.15867219 49.47080261 56.58024596 51.23570969 56 53 C46.3204691 51.52601868 36.80148214 49.49993648 27.25 47.375 C25.76308304 47.0465932 24.27610421 46.71846643 22.7890625 46.390625 C19.19199117 45.59696823 15.59576525 44.79955605 12 44 C10.44527314 38.86073216 8.89724042 33.71951208 7.35522461 28.57641602 C6.83034259 26.82912627 6.30367432 25.08237204 5.77514648 23.33618164 C5.01329429 20.81797651 4.2580068 18.2978795 3.50390625 15.77734375 C3.26845596 15.00414291 3.03300568 14.23094208 2.79042053 13.43431091 C1.45836043 8.95540698 0.54040163 4.64315228 0 0 Z " fill="#000000" transform="translate(111,17)"/>
+<path id="blob-3" d="M0 0 C1.71425579 5.6400991 3.42311068 11.28179516 5.12695312 16.92504883 C5.70749658 18.84509566 6.28952054 20.76469549 6.87304688 22.68383789 C7.71091932 25.44040974 8.54347661 28.19853855 9.375 30.95703125 C9.63748535 31.81649857 9.8999707 32.67596588 10.17041016 33.56147766 C10.53078369 34.76238289 10.53078369 34.76238289 10.8984375 35.98754883 C11.21820557 37.04344963 11.21820557 37.04344963 11.54443359 38.12068176 C12 40 12 40 12 43 C4.19873204 42.31050991 -3.31933205 40.78209336 -10.96875 39.12890625 C-12.29867465 38.84351716 -13.62863128 38.55827702 -14.95861816 38.2731781 C-17.72603652 37.67869802 -20.49264423 37.08060107 -23.25878906 36.48022461 C-26.80899611 35.71025821 -30.36166632 34.9523694 -33.91509247 34.19741917 C-36.65289273 33.6138849 -39.38898738 33.02265354 -42.12464905 32.42918205 C-44.07186153 32.0086336 -46.02072887 31.59577132 -47.96960449 31.18299866 C-49.14172485 30.92610764 -50.31384521 30.66921661 -51.52148438 30.40454102 C-52.55801147 30.18105484 -53.59453857 29.95756866 -54.66247559 29.72731018 C-55.43385864 29.48729782 -56.2052417 29.24728546 -57 29 C-57.33 28.34 -57.66 27.68 -58 27 C-57.08057617 26.56300781 -57.08057617 26.56300781 -56.14257812 26.1171875 C-41.32711212 19.0810423 -41.32711212 19.0810423 -26.625 11.8125 C-20.99064284 8.97258449 -15.32501509 6.20591616 -9.625 3.5 C-8.8923291 3.1491333 -8.1596582 2.7982666 -7.40478516 2.43676758 C-2.2362567 0 -2.2362567 0 0 0 Z " fill="#000000" transform="translate(98,14)"/>
+<path id="blob-4" d="M0 0 C2.24002181 2.24002181 2.45082686 3.1646128 3.11328125 6.18334961 C3.30688232 7.04862778 3.5004834 7.91390594 3.69995117 8.80540466 C3.90209229 9.74489456 4.1042334 10.68438446 4.3125 11.65234375 C4.52688721 12.62224747 4.74127441 13.59215118 4.9621582 14.59144592 C5.41604476 16.65110903 5.86638389 18.71155655 6.31347656 20.77270508 C6.99078773 23.89503247 7.67792925 27.01505623 8.3671875 30.13476562 C8.80787659 32.14049657 9.24799807 34.14635233 9.6875 36.15234375 C9.88964111 37.07361557 10.09178223 37.99488739 10.30004883 38.94407654 C11.67118136 45.27311846 12.87807116 51.6222017 14 58 C2.81113703 61.65634825 -8.53429664 64.3657014 -20 67 C-19.3294196 59.88425139 -17.09664011 53.25199721 -15 46.4453125 C-14.59989789 45.13502886 -14.20016419 43.82463267 -13.80078125 42.51412964 C-12.96679201 39.78152421 -12.12928768 37.05003021 -11.2890625 34.31933594 C-10.2105854 30.81377395 -9.13961319 27.30597387 -8.07104492 23.79738045 C-7.24825293 21.09783944 -6.42226487 18.39928521 -5.59521484 15.70104599 C-5.19886693 14.40706524 -4.80335699 13.11282752 -4.40869141 11.81833267 C-3.8589483 10.01740832 -3.30459218 8.21789404 -2.75 6.41845703 C-2.43546875 5.39366241 -2.1209375 4.3688678 -1.796875 3.3130188 C-1 1 -1 1 0 0 Z " fill="#000000" transform="translate(179,68)"/>
+<path id="blob-5" d="M0 0 C0 4.13451443 -2.1839165 6.12255584 -4.6875 9.1875 C-5.17790771 9.79972412 -5.66831543 10.41194824 -6.17358398 11.04272461 C-7.77390181 13.03551151 -9.38541085 15.01876258 -11 17 C-11.53979492 17.66354492 -12.07958984 18.32708984 -12.63574219 19.01074219 C-14.82765052 21.7045544 -17.02015927 24.39786833 -19.21582031 27.08862305 C-26.00991117 35.43318627 -32.61724571 43.92838421 -38.84375 52.70703125 C-39.41609375 53.34705078 -39.41609375 53.34705078 -40 54 C-40.66 54 -41.32 54 -42 54 C-41.36203146 48.57570043 -40.13437376 43.55378766 -38.56640625 38.328125 C-38.32840805 37.52389099 -38.09040985 36.71965698 -37.84519958 35.89105225 C-37.34414963 34.20284521 -36.84061571 32.51537359 -36.3347168 30.82861328 C-35.56130014 28.2459934 -34.79872799 25.66033926 -34.03710938 23.07421875 C-33.54752064 21.42949517 -33.05730802 19.78495715 -32.56640625 18.140625 C-32.3392543 17.3687384 -32.11210236 16.59685181 -31.87806702 15.80157471 C-30.87795999 12.49041113 -29.9327526 9.8991289 -28 7 C-25.20263672 6.0168457 -25.20263672 6.0168457 -21.6796875 5.17578125 C-19.79443359 4.71655273 -19.79443359 4.71655273 -17.87109375 4.24804688 C-16.53912224 3.93594285 -15.20709016 3.6240972 -13.875 3.3125 C-12.53489546 2.99001409 -11.19504774 2.66645895 -9.85546875 2.34179688 C-6.57269188 1.55062403 -3.28767054 0.7705379 0 0 Z " fill="#000000" transform="translate(183,140)"/>
+</svg>