7k-design-system 1.0.0-alpha.1

package/package.json

@@ -0,0 +1,147 @@
+{
+  "name": "7k-design-system",
+  "version": "1.0.0-alpha.1",
+  "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.",
+  "type": "module",
+  "main": "./dist/7k-design-system.css",
+  "module": "./dist/7k-design-system.esm.css",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/7k-design-system.css",
+      "require": "./dist/7k-design-system.css",
+      "types": "./dist/index.d.ts"
+    },
+    "./css": "./dist/7k-design-system.css",
+    "./css/tokens": "./dist/tokens.css",
+    "./css/components": "./dist/components.css",
+    "./css/textures": "./dist/textures.css",
+    "./css/animations": "./dist/animations.css",
+    "./react": {
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs",
+      "types": "./dist/react/index.d.ts"
+    },
+    "./fonts/*": "./fonts/*",
+    "./build/*": "./build/*"
+  },
+  "files": [
+    "dist/",
+    "fonts/",
+    "build/",
+    "preview/",
+    "DESIGN.md",
+    "SKILL.md",
+    "README.md",
+    "CHANGELOG.md",
+    "CONSUMER_GUIDE.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run build:css && npm run build:react && npm run build:copy-assets",
+    "build:css": "vite build --config vite.css.config.ts",
+    "build:react": "vite build --config vite.react.config.ts",
+    "build:copy-assets": "node scripts/copy-assets.js",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:a11y": "vitest run --config vitest.a11y.config.ts",
+    "lint": "npm run lint:js && npm run lint:css",
+    "lint:js": "eslint src --ext .ts,.tsx,.js,.jsx",
+    "lint:css": "stylelint 'src/**/*.css' 'colors_and_type.css'",
+    "lint:fix": "npm run lint:js -- --fix && npm run lint:css -- --fix",
+    "format": "prettier --write 'src/**/*.{ts,tsx,js,jsx,css,json,md}'",
+    "format:check": "prettier --check 'src/**/*.{ts,tsx,js,jsx,css,json,md}'",
+    "typecheck": "tsc --noEmit",
+    "preview": "vite preview",
+    "semantic-release": "semantic-release",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --exit-zero-on-changes"
+  },
+  "keywords": [
+    "design-system",
+    "css",
+    "dark-theme",
+    "neon",
+    "manga",
+    "1-bit",
+    "geist",
+    "typography",
+    "tokens",
+    "react",
+    "components"
+  ],
+  "author": "7K",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/7K-Group/7k-design-system.git"
+  },
+  "bugs": {
+    "url": "https://github.com/7K-Group/7k-design-system/issues"
+  },
+  "homepage": "https://github.com/7K-Group/7k-design-system#readme",
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=9.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@storybook/addon-a11y": "^10.4.1",
+    "@storybook/addon-docs": "^10.4.1",
+    "@storybook/react-vite": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/jest-axe": "^3.5.9",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "@vitest/browser": "^1.0.0",
+    "@vitest/coverage-v8": "^1.0.0",
+    "autoprefixer": "^10.4.16",
+    "axe-core": "^4.8.0",
+    "chromatic": "^17.2.0",
+    "cssnano": "^6.0.1",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-storybook": "^0.12.0",
+    "jest-axe": "^10.0.0",
+    "jsdom": "^23.0.0",
+    "playwright": "^1.60.0",
+    "postcss": "^8.4.32",
+    "postcss-custom-properties": "^13.3.2",
+    "postcss-import": "^15.1.0",
+    "postcss-nesting": "^12.0.1",
+    "prettier": "^3.1.1",
+    "semantic-release": "^22.0.0",
+    "storybook": "^10.4.1",
+    "stylelint": "^16.0.0",
+    "stylelint-config-standard": "^36.0.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.6.0",
+    "vitest": "^1.0.0"
+  }
+}

package/preview/brand-assets.html

@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Brand Assets · 7k-design-system</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 32px; background: var(--bg-base); color: var(--text-primary); }
+  h1 { margin-bottom: 8px; }
+  .mono-label { margin-bottom: 32px; display: block; }
+  section { margin-bottom: 48px; }
+  h2 { margin-bottom: 16px; }
+  .logo-grid { display: flex; gap: 32px; flex-wrap: wrap; align-items: center; }
+  .logo-card { display: flex; flex-direction: column; align-items: center; gap: 8px; }
+  .logo-card img, .logo-card object { border: 2px solid #FFFFFF; padding: 24px; background: #000; max-width: 320px; }
+  .logo-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
+  .logo-path { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
+  .preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
+  .preview-card { border: 2px solid #FFFFFF; padding: 24px; position: relative; overflow: hidden; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
+  .preview-card .preview-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-primary); position: relative; z-index: 2; }
+</style>
+</head>
+<body>
+  <h1>Brand Assets</h1>
+  <span class="mono-label">7k-design-system · Logo + brand marks</span>
+
+  <section>
+    <h2>Logos</h2>
+    <div class="logo-grid">
+      <div class="logo-card">
+        <img src="../build/logo-7k.svg" alt="7K Logo" style="width:240px;height:auto">
+        <span class="logo-label">build/logo-7k.svg</span>
+        <span class="logo-path">Color variant — star-burst pattern with #FF0FF accent</span>
+      </div>
+      <div class="logo-card">
+        <img src="../build/logo-7k-light.svg" alt="7K Light Logo" style="width:240px;height:auto">
+        <span class="logo-label">build/logo-7k-light.svg</span>
+        <span class="logo-path">Light variant — black polygons for light backgrounds</span>
+      </div>
+      <div class="logo-card">
+        <img src="../build/icon.svg" alt="7K Icon" style="width:64px;height:auto">
+        <span class="logo-label">build/icon.svg</span>
+        <span class="logo-path">App icon — 208×207, 7K star-burst pattern</span>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Brand in Context</h2>
+    <p class="body" style="margin-bottom:24px">The 7K wordmark uses Geist Pixel Triangle (800 weight) in brand-primary. Below: logo applied to dark canvas, scanline hero, and one-bit section.</p>
+    <div class="preview-grid">
+      <div class="preview-card scanline" style="background:#000">
+        <img src="../build/logo-7k.svg" alt="7K" style="width:160px;height:auto;position:relative;z-index:2">
+        <span class="preview-label">Scanline Hero</span>
+      </div>
+      <div class="preview-card halftone-sm" style="background:#000">
+        <img src="../build/logo-7k-light.svg" alt="7K" style="width:140px;height:auto;position:relative;z-index:2">
+        <span class="preview-label">Light variant / Manga Section</span>
+      </div>
+      <div class="preview-card" style="background:var(--brand-primary)">
+        <span style="font-family:'Geist Pixel',monospace;font-weight:800;font-size:48px;color:#000;position:relative;z-index:2">7K</span>
+        <span class="preview-label" style="color:#000">Invert — brand fill</span>
+      </div>
+      <div class="preview-card noise" style="background:#000">
+        <span style="font-family:'Geist Pixel',monospace;font-weight:800;font-size:36px;color:var(--brand-primary);position:relative;z-index:2">7K</span>
+        <span class="preview-label">Glow Wordmark</span>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Brand Application Rules</h2>
+    <ul class="list" style="max-width:600px">
+      <li class="list-item">Logo always uppercase "7K" — never lowercase</li>
+      <li class="list-item">Color variant on dark canvas, light variant on light backgrounds</li>
+      <li class="list-item">Brand accent (#FF0FF) only — no secondary brand color</li>
+      <li class="list-item">Parent 7K uses magenta; child projects swap accent hue</li>
+      <li class="list-item">Min 24px padding around logo in all contexts</li>
+    </ul>
+  </section>
+</body>
+</html>

package/preview/colors-primary.html

@@ -0,0 +1,101 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Colors — Brand Primary · 7k-design-system</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 32px; background: var(--bg-base); color: var(--text-primary); }
+  h1 { margin-bottom: 8px; }
+  .mono-label { margin-bottom: 32px; display: block; }
+  section { margin-bottom: 48px; }
+  h2 { margin-bottom: 16px; }
+  .swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
+  .swatch { display: flex; flex-direction: column; gap: 4px; }
+  .swatch-color { height: 60px; border: 2px solid #FFFFFF; }
+  .swatch-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
+  .swatch-value { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
+  .accent-demo { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
+  .accent-box { width: 80px; height: 80px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; border: 2px solid #FFFFFF; }
+  .glow-box { box-shadow: 0 0 24px var(--brand-primary-glow); }
+  .project-row { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px; }
+  .project-card { padding: 16px; border: 2px solid #FFFFFF; min-width: 160px; }
+  .project-card .name { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px; }
+  .project-card .bar { height: 4px; margin-bottom: 8px; }
+</style>
+</head>
+<body>
+  <h1>Brand Primary — #FF00FF</h1>
+  <span class="mono-label">7k-design-system · Magenta ramp + project accent overrides</span>
+
+  <section>
+    <h2>Magenta Ramp (11-step)</h2>
+    <div class="swatch-grid">
+      <div class="swatch"><div class="swatch-color" style="background:var(--magenta-50)"></div><span class="swatch-label">--magenta-50</span><span class="swatch-value">#FFE5FF</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--magenta-100)"></div><span class="swatch-label">--magenta-100</span><span class="swatch-value">#FFC2FF</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--magenta-200)"></div><span class="swatch-label">--magenta-200</span><span class="swatch-value">#FF99FF</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--magenta-300)"></div><span class="swatch-label">--magenta-300</span><span class="swatch-value">#FF66FF</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--magenta-400)"></div><span class="swatch-label">--magenta-400</span><span class="swatch-value">#FF33FF</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--magenta-500); box-shadow:0 0 12px #FF00FF66"></div><span class="swatch-label">--magenta-500 ★</span><span class="swatch-value">#FF00FF</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--magenta-600)"></div><span class="swatch-label">--magenta-600</span><span class="swatch-value">#D600D6</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--magenta-700)"></div><span class="swatch-label">--magenta-700</span><span class="swatch-value">#A800A8</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--magenta-800)"></div><span class="swatch-label">--magenta-800</span><span class="swatch-value">#800080</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--magenta-900)"></div><span class="swatch-label">--magenta-900</span><span class="swatch-value">#570057</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--magenta-950)"></div><span class="swatch-label">--magenta-950</span><span class="swatch-value">#330033</span></div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Brand Semantic Tokens</h2>
+    <div class="accent-demo">
+      <div class="accent-box" style="background:var(--brand-primary)">primary</div>
+      <div class="accent-box" style="background:var(--brand-primary-hover)">hover</div>
+      <div class="accent-box" style="background:var(--brand-primary-active)">active</div>
+      <div class="accent-box" style="background:var(--brand-primary-muted);color:var(--text-secondary)">muted</div>
+      <div class="accent-box" style="background:var(--brand-primary-subtle);color:var(--text-secondary)">subtle</div>
+      <div class="accent-box glow-box" style="background:var(--brand-primary)">glow</div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Project Accent Overrides</h2>
+    <div class="project-row">
+      <div class="project-card"><div class="name">7K (Square)</div><div class="bar" style="background:var(--accent-square)"></div><span class="mono-label">--accent-square</span><br><span class="swatch-value">var(--magenta-500)</span></div>
+      <div class="project-card"><div class="name">Triangle</div><div class="bar" style="background:var(--accent-triangle)"></div><span class="mono-label">--accent-triangle</span><br><span class="swatch-value">var(--solar-500)</span></div>
+      <div class="project-card"><div class="name">Circle</div><div class="bar" style="background:var(--accent-circle)"></div><span class="mono-label">--accent-circle</span><br><span class="swatch-value">var(--cyan-500)</span></div>
+      <div class="project-card"><div class="name">Grid</div><div class="bar" style="background:var(--accent-grid)"></div><span class="mono-label">--accent-grid</span><br><span class="swatch-value">var(--acid-500)</span></div>
+      <div class="project-card"><div class="name">Line</div><div class="bar" style="background:var(--accent-line)"></div><span class="mono-label">--accent-line</span><br><span class="swatch-value">var(--ember-500)</span></div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Neutral Ramp (surface + text tokens)</h2>
+    <div class="swatch-grid">
+      <div class="swatch"><div class="swatch-color" style="background:var(--neutral-50);border-color:#000"></div><span class="swatch-label" style="color:#000">--neutral-50</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--neutral-100);border-color:#000"></div><span class="swatch-label" style="color:#000">--neutral-100</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--neutral-200);border-color:#000"></div><span class="swatch-label" style="color:#000">--neutral-200</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--neutral-300);border-color:#000"></div><span class="swatch-label" style="color:#000">--neutral-300</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--neutral-400)"></div><span class="swatch-label">--neutral-400</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--neutral-500)"></div><span class="swatch-label">--neutral-500</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--neutral-600)"></div><span class="swatch-label">--neutral-600</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--neutral-700)"></div><span class="swatch-label">--neutral-700</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--neutral-800)"></div><span class="swatch-label">--neutral-800</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--neutral-900)"></div><span class="swatch-label">--neutral-900</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--neutral-950)"></div><span class="swatch-label">--neutral-950</span></div>
+      <div class="swatch"><div class="swatch-color" style="background:var(--neutral-1000)"></div><span class="swatch-label">--neutral-1000</span></div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Status Colors (semantic only)</h2>
+    <div class="accent-demo">
+      <span class="badge badge-success">Success</span>
+      <span class="badge badge-warning">Warning</span>
+      <span class="badge badge-danger">Danger</span>
+      <span class="badge badge-accent">Info</span>
+      <span class="chip chip-accent">Neutral</span>
+    </div>
+  </section>
+</body>
+</html>

package/preview/components-buttons.html

@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Buttons · 7k-design-system</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 32px; background: var(--bg-base); color: var(--text-primary); }
+  h1 { margin-bottom: 8px; }
+  .mono-label { margin-bottom: 32px; display: block; }
+  section { margin-bottom: 48px; }
+  h2 { margin-bottom: 16px; }
+  .button-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
+  .variant-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); min-width: 120px; }
+  .btn-modern { margin: 0; }
+</style>
+</head>
+<body>
+  <h1>Button Components</h1>
+  <span class="mono-label">7k-design-system · Modern neon button system</span>
+
+  <section>
+    <h2>Primary Variants</h2>
+    <div class="button-row"><span class="variant-label">Primary</span><button class="btn-modern btn-modern-primary">Primary Action</button><button class="btn-modern btn-modern-primary btn-modern-sm">Small</button><button class="btn-modern btn-modern-primary btn-modern-lg">Large</button></div>
+    <div class="button-row"><span class="variant-label">Glow</span><button class="btn-modern btn-modern-glow">Deploy System</button></div>
+    <div class="button-row"><span class="variant-label">Glow Cyan</span><button class="btn-modern btn-modern-glow-cyan">Circle Launch</button></div>
+    <div class="button-row"><span class="variant-label">Glow Grid</span><button class="btn-modern btn-modern-glow-grid">Grid Init</button></div>
+  </section>
+
+  <section>
+    <h2>Secondary & Ghost</h2>
+    <div class="button-row"><span class="variant-label">Secondary</span><button class="btn-modern btn-modern-secondary">Cancel</button></div>
+    <div class="button-row"><span class="variant-label">Ghost</span><button class="btn-modern btn-modern-ghost">Learn more</button></div>
+    <div class="button-row"><span class="variant-label">Danger</span><button class="btn-modern btn-modern-danger">Delete project</button></div>
+  </section>
+
+  <section>
+    <h2>Sizes</h2>
+    <div class="button-row"><span class="variant-label">Small (sm)</span><button class="btn-modern btn-modern-primary btn-modern-sm">Deploy</button></div>
+    <div class="button-row"><span class="variant-label">Default</span><button class="btn-modern btn-modern-primary">Deploy</button></div>
+    <div class="button-row"><span class="variant-label">Large (lg)</span><button class="btn-modern btn-modern-primary btn-modern-lg">Deploy System</button></div>
+  </section>
+
+  <section>
+    <h2>Icon Buttons</h2>
+    <div class="button-row">
+      <button class="btn-modern btn-modern-primary btn-modern-icon">✕</button>
+      <button class="btn-modern btn-modern-secondary btn-modern-icon">☰</button>
+      <button class="btn-modern btn-modern-primary btn-modern-lg-icon">▶</button>
+    </div>
+  </section>
+
+  <section>
+    <h2>Button Group & Split</h2>
+    <div class="button-row" style="flex-direction:column;align-items:flex-start;gap:12px">
+      <div class="btn-group">
+        <button class="btn-modern btn-modern-primary">Save</button>
+        <button class="btn-modern btn-modern-primary">Publish</button>
+        <button class="btn-modern btn-modern-primary">Archive</button>
+      </div>
+      <div class="btn-split">
+        <button class="btn-modern btn-modern-primary">Deploy</button>
+        <button class="btn-modern btn-modern-primary">▼</button>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Loading State</h2>
+    <div class="button-row">
+      <button class="btn-modern btn-modern-primary btn-modern-loading"><span class="btn-label">Processing</span></button>
+    </div>
+  </section>
+
+  <section>
+    <h2>Real Product Copy Examples</h2>
+    <div class="button-row"><button class="btn-modern btn-modern-glow">Launch Dashboard</button></div>
+    <div class="button-row"><button class="btn-modern btn-modern-primary">Create Project</button><button class="btn-modern btn-modern-secondary">View Docs</button></div>
+    <div class="button-row"><button class="btn-modern btn-modern-glow-cyan">Start Pipeline</button><button class="btn-modern btn-modern-ghost">Configure</button></div>
+    <div class="button-row"><button class="btn-modern btn-modern-danger">Delete Workspace</button></div>
+  </section>
+</body>
+</html>

package/preview/spacing-tokens.html

@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Spacing · 7k-design-system</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 32px; background: var(--bg-base); color: var(--text-primary); }
+  h1 { margin-bottom: 8px; }
+  .mono-label { margin-bottom: 32px; display: block; }
+  section { margin-bottom: 48px; }
+  h2 { margin-bottom: 16px; }
+  .spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
+  .spacing-bar { background: var(--brand-primary); height: 16px; flex-shrink: 0; }
+  .spacing-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); min-width: 160px; }
+  .spacing-value { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); min-width: 80px; }
+  .card { background: var(--bg-elevated); border: 1px solid var(--border-default); padding: var(--space-6); margin-bottom: 16px; }
+  .radius-grid { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-end; }
+  .radius-sample { display: flex; flex-direction: column; align-items: center; gap: 4px; }
+  .radius-box { width: 80px; height: 80px; background: var(--brand-primary); }
+  .radius-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
+</style>
+</head>
+<body>
+  <h1>Spacing Tokens</h1>
+  <span class="mono-label">7k-design-system · 4px baseline grid</span>
+
+  <section>
+    <h2>4px Grid Scale (--space-*)</h2>
+    <div class="spacing-row"><span class="spacing-label">--space-0</span><span class="spacing-value">0</span><div class="spacing-bar" style="width:0"></div></div>
+    <div class="spacing-row"><span class="spacing-label">--space-1 (4px)</span><span class="spacing-value">0.25rem</span><div class="spacing-bar" style="width:4px"></div></div>
+    <div class="spacing-row"><span class="spacing-label">--space-2 (8px)</span><span class="spacing-value">0.5rem</span><div class="spacing-bar" style="width:8px"></div></div>
+    <div class="spacing-row"><span class="spacing-label">--space-3 (12px)</span><span class="spacing-value">0.75rem</span><div class="spacing-bar" style="width:12px"></div></div>
+    <div class="spacing-row"><span class="spacing-label">--space-4 (16px)</span><span class="spacing-value">1rem</span><div class="spacing-bar" style="width:16px"></div></div>
+    <div class="spacing-row"><span class="spacing-label">--space-5 (20px)</span><span class="spacing-value">1.25rem</span><div class="spacing-bar" style="width:20px"></div></div>
+    <div class="spacing-row"><span class="spacing-label">--space-6 (24px)</span><span class="spacing-value">1.5rem</span><div class="spacing-bar" style="width:24px"></div></div>
+    <div class="spacing-row"><span class="spacing-label">--space-8 (32px)</span><span class="spacing-value">2rem</span><div class="spacing-bar" style="width:32px"></div></div>
+    <div class="spacing-row"><span class="spacing-label">--space-10 (40px)</span><span class="spacing-value">2.5rem</span><div class="spacing-bar" style="width:40px"></div></div>
+    <div class="spacing-row"><span class="spacing-label">--space-12 (48px)</span><span class="spacing-value">3rem</span><div class="spacing-bar" style="width:48px"></div></div>
+    <div class="spacing-row"><span class="spacing-label">--space-16 (64px)</span><span class="spacing-value">4rem</span><div class="spacing-bar" style="width:64px"></div></div>
+    <div class="spacing-row"><span class="spacing-label">--space-20 (80px)</span><span class="spacing-value">5rem</span><div class="spacing-bar" style="width:80px"></div></div>
+    <div class="spacing-row"><span class="spacing-label">--space-24 (96px)</span><span class="spacing-value">6rem</span><div class="spacing-bar" style="width:96px"></div></div>
+    <div class="spacing-row"><span class="spacing-label">--space-32 (128px)</span><span class="spacing-value">8rem</span><div class="spacing-bar" style="width:128px"></div></div>
+  </section>
+
+  <section>
+    <h2>Applied Spacing — Card Padding</h2>
+    <div class="card" style="padding:var(--space-4)"><span class="mono-label">--space-4 (16px) padding</span><div class="body-sm" style="margin-top:8px">Compact card padding for data-dense surfaces.</div></div>
+    <div class="card" style="padding:var(--space-6)"><span class="mono-label">--space-6 (24px) padding</span><div class="body-sm" style="margin-top:8px">Default card padding for most surfaces.</div></div>
+    <div class="card" style="padding:var(--space-8)"><span class="mono-label">--space-8 (32px) padding</span><div class="body-sm" style="margin-top:8px">Generous card padding for hero sections.</div></div>
+  </section>
+
+  <section>
+    <h2>Radius Scale</h2>
+    <div class="radius-grid">
+      <div class="radius-sample"><div class="radius-box" style="border-radius:var(--radius-none)"></div><span class="radius-label">--radius-none (0)</span></div>
+      <div class="radius-sample"><div class="radius-box" style="border-radius:var(--radius-xs)"></div><span class="radius-label">--radius-xs (2px)</span></div>
+      <div class="radius-sample"><div class="radius-box" style="border-radius:var(--radius-sm)"></div><span class="radius-label">--radius-sm (4px)</span></div>
+      <div class="radius-sample"><div class="radius-box" style="border-radius:var(--radius-md)"></div><span class="radius-label">--radius-md (8px)</span></div>
+      <div class="radius-sample"><div class="radius-box" style="border-radius:var(--radius-lg)"></div><span class="radius-label">--radius-lg (12px)</span></div>
+      <div class="radius-sample"><div class="radius-box" style="border-radius:var(--radius-xl)"></div><span class="radius-label">--radius-xl (16px)</span></div>
+      <div class="radius-sample"><div class="radius-box" style="border-radius:var(--radius-2xl)"></div><span class="radius-label">--radius-2xl (24px)</span></div>
+      <div class="radius-sample"><div class="radius-box" style="border-radius:var(--radius-full)"></div><span class="radius-label">--radius-full</span></div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Shadow Elevation</h2>
+    <div style="display:flex;gap:24px;flex-wrap:wrap">
+      <div style="width:160px;height:80px;background:var(--bg-raised);box-shadow:var(--shadow-sm);display:grid;place-items:center;font-family:var(--font-mono);font-size:10px">--shadow-sm</div>
+      <div style="width:160px;height:80px;background:var(--bg-raised);box-shadow:var(--shadow-md);display:grid;place-items:center;font-family:var(--font-mono);font-size:10px">--shadow-md</div>
+      <div style="width:160px;height:80px;background:var(--bg-raised);box-shadow:var(--shadow-lg);display:grid;place-items:center;font-family:var(--font-mono);font-size:10px">--shadow-lg</div>
+      <div style="width:160px;height:80px;background:var(--bg-raised);box-shadow:var(--shadow-xl);display:grid;place-items:center;font-family:var(--font-mono);font-size:10px">--shadow-xl</div>
+      <div style="width:160px;height:80px;background:var(--brand-primary);box-shadow:var(--shadow-glow);display:grid;place-items:center;font-family:var(--font-mono);font-size:10px;color:#000">--shadow-glow</div>
+    </div>
+  </section>
+</body>
+</html>

package/preview/textures-backgrounds.html

@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Textures · 7k-design-system</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 32px; background: var(--bg-base); color: var(--text-primary); }
+  h1 { margin-bottom: 8px; }
+  .mono-label { margin-bottom: 32px; display: block; }
+  section { margin-bottom: 48px; }
+  h2 { margin-bottom: 16px; }
+  .texture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
+  .texture-card { height: 140px; border: 2px solid #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; }
+  .texture-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-primary); position: relative; z-index: 2; background: rgba(0,0,0,0.7); padding: 2px 6px; }
+</style>
+</head>
+<body>
+  <h1>1-bit Texture Backgrounds</h1>
+  <span class="mono-label">10 categories · manga screentone library</span>
+
+  <section>
+    <h2>Scanline</h2>
+    <div class="texture-grid">
+      <div class="texture-card scanline"><span class="texture-label">.scanline (8s)</span></div>
+      <div class="texture-card scanline-fast"><span class="texture-label">.scanline-fast (3s)</span></div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Halftone Dots</h2>
+    <div class="texture-grid">
+      <div class="texture-card halftone-sm"><span class="texture-label">.halftone-sm (4px)</span></div>
+      <div class="texture-card halftone-md"><span class="texture-label">.halftone-md (6px)</span></div>
+      <div class="texture-card halftone-lg"><span class="texture-label">.halftone-lg (10px)</span></div>
+      <div class="texture-card halftone-accent"><span class="texture-label">.halftone-accent</span></div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Dot Matrix</h2>
+    <div class="texture-grid">
+      <div class="texture-card dot-matrix-dense"><span class="texture-label">.dot-matrix-dense</span></div>
+      <div class="texture-card dot-matrix"><span class="texture-label">.dot-matrix</span></div>
+      <div class="texture-card dot-matrix-sparse"><span class="texture-label">.dot-matrix-sparse</span></div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Stripes</h2>
+    <div class="texture-grid">
+      <div class="texture-card diagonal-stripes"><span class="texture-label">.diagonal-stripes</span></div>
+      <div class="texture-card diagonal-stripes-dense"><span class="texture-label">.diagonal-stripes-dense</span></div>
+      <div class="texture-card diagonal-stripes-negative"><span class="texture-label">.diagonal-stripes-negative</span></div>
+      <div class="texture-card stripes-h"><span class="texture-label">.stripes-h</span></div>
+      <div class="texture-card stripes-h-dense"><span class="texture-label">.stripes-h-dense</span></div>
+      <div class="texture-card stripes-v"><span class="texture-label">.stripes-v</span></div>
+      <div class="texture-card stripes-v-dense"><span class="texture-label">.stripes-v-dense</span></div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Crosshatch & Checkerboard</h2>
+    <div class="texture-grid">
+      <div class="texture-card crosshatch"><span class="texture-label">.crosshatch</span></div>
+      <div class="texture-card crosshatch-dense"><span class="texture-label">.crosshatch-dense</span></div>
+      <div class="texture-card checkerboard"><span class="texture-label">.checkerboard</span></div>
+      <div class="texture-card checkerboard-onebit"><span class="texture-label">.checkerboard-onebit</span></div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Noise & Vignette</h2>
+    <div class="texture-grid">
+      <div class="texture-card noise"><span class="texture-label">.noise</span></div>
+      <div class="texture-card noise-heavy"><span class="texture-label">.noise-heavy</span></div>
+      <div class="texture-card vignette-onebit"><span class="texture-label">.vignette-onebit</span></div>
+      <div class="texture-card vignette-onebit-sharp"><span class="texture-label">.vignette-onebit-sharp</span></div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Separators</h2>
+    <div class="texture-grid" style="grid-template-columns:1fr;gap:8px">
+      <div class="separator-onebit" style="margin:8px 0"></div><span class="mono-label">.separator-onebit</span>
+      <div class="separator-onebit-thick" style="margin:8px 0"></div><span class="mono-label">.separator-onebit-thick</span>
+      <div class="separator-onebit-dashed" style="margin:8px 0"></div><span class="mono-label">.separator-onebit-dashed</span>
+      <div class="separator-onebit-dotted" style="margin:8px 0"></div><span class="mono-label">.separator-onebit-dotted</span>
+    </div>
+  </section>
+
+  <section>
+    <h2>Section Composition</h2>
+    <div class="scanline" style="height:120px;border:2px solid #FFFFFF;display:grid;place-items:center;margin-bottom:16px"><span class="mono-label" style="position:relative;z-index:2">Hero — scanline + noise</span></div>
+    <div class="separator-onebit" style="margin:8px 0"></div>
+    <div class="halftone-md" style="height:100px;border:2px solid #FFFFFF;display:grid;place-items:center;margin:16px 0"><span class="mono-label">Stats — halftone-md</span></div>
+    <div class="separator-onebit" style="margin:8px 0"></div>
+    <div class="noise" style="height:100px;border:2px solid #FFFFFF;display:grid;place-items:center;margin:16px 0"><span class="mono-label">CTA — noise overlay</span></div>
+  </section>
+</body>
+</html>