{"_id":"7k-design-system","_rev":"3-e9f31e5dbbd8c3dc5891f381f035520e","name":"7k-design-system","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0-alpha.1":{"name":"7k-design-system","version":"1.0.0-alpha.1","keywords":["design-system","css","dark-theme","neon","manga","1-bit","geist","typography","tokens","react","components"],"author":{"name":"7K"},"license":"MIT","_id":"7k-design-system@1.0.0-alpha.1","maintainers":[{"name":"joaodss","email":"joaodss@live.com.pt"}],"homepage":"https://github.com/7K-Group/7k-design-system#readme","bugs":{"url":"https://github.com/7K-Group/7k-design-system/issues"},"dist":{"shasum":"02064a5802cd08098023f1e2fb24c7077a40dc79","tarball":"https://registry.npmjs.org/7k-design-system/-/7k-design-system-1.0.0-alpha.1.tgz","fileCount":89,"integrity":"sha512-8xWY2qrGXbzWN6h5/LjCLqP49kDDcZe9iGtPfugZ9xeIxz2XlDYo02fYpG7/QY6JS3oNbguH6uaUXzCgcphHFA==","signatures":[{"sig":"MEUCIGyJXBKwfGxYUOAodIZSbhuMaurzXHvGiMPi1QNCCkJnAiEA/dP7wP6l3FJhy7HsmPJL1Ixg6nnqo6cJM0qYYFkjoxs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2239437},"main":"./dist/7k-design-system.css","type":"module","types":"./dist/index.d.ts","module":"./dist/7k-design-system.esm.css","engines":{"npm":">=9.0.0","node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/7k-design-system.css","require":"./dist/7k-design-system.css"},"./css":"./dist/7k-design-system.css","./react":{"types":"./dist/react/index.d.ts","import":"./dist/react/index.js","require":"./dist/react/index.cjs"},"./build/*":"./build/*","./fonts/*":"./fonts/*","./css/tokens":"./dist/tokens.css","./css/textures":"./dist/textures.css","./css/animations":"./dist/animations.css","./css/components":"./dist/components.css"},"gitHead":"077bdc9b28fa051844af00df65db0633dda84a7d","scripts":{"dev":"vite","lint":"npm run lint:js && npm run lint:css","test":"vitest run","build":"npm run build:css && npm run build:react && npm run build:copy-assets","format":"prettier --write 'src/**/*.{ts,tsx,js,jsx,css,json,md}'","lint:js":"eslint src --ext .ts,.tsx,.js,.jsx","preview":"vite preview","lint:css":"stylelint 'src/**/*.css' 'colors_and_type.css'","lint:fix":"npm run lint:js -- --fix && npm run lint:css -- --fix","build:css":"vite build --config vite.css.config.ts","chromatic":"npx chromatic --exit-zero-on-changes","storybook":"storybook dev -p 6006","test:a11y":"vitest run --config vitest.a11y.config.ts","typecheck":"tsc --noEmit","test:watch":"vitest","build:react":"vite build --config vite.react.config.ts","format:check":"prettier --check 'src/**/*.{ts,tsx,js,jsx,css,json,md}'","build-storybook":"storybook build","semantic-release":"semantic-release","build:copy-assets":"node scripts/copy-assets.js"},"_npmUser":{"name":"joaodss","email":"joaodss@live.com.pt"},"repository":{"url":"git+https://github.com/7K-Group/7k-design-system.git","type":"git"},"_npmVersion":"11.12.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.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.15.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","jsdom":"^23.0.0","eslint":"^8.55.0","vitest":"^1.0.0","cssnano":"^6.0.1","postcss":"^8.4.32","axe-core":"^4.8.0","jest-axe":"^10.0.0","prettier":"^3.1.1","chromatic":"^17.2.0","storybook":"^10.4.1","stylelint":"^16.0.0","playwright":"^1.60.0","typescript":"^5.3.0","@types/react":"^18.2.0","autoprefixer":"^10.4.16","postcss-import":"^15.1.0","@types/jest-axe":"^3.5.9","@vitest/browser":"^1.0.0","postcss-nesting":"^12.0.1","vite-plugin-dts":"^3.6.0","@types/react-dom":"^18.2.0","semantic-release":"^22.0.0","@vitest/coverage-v8":"^1.0.0","eslint-plugin-react":"^7.33.2","@vitejs/plugin-react":"^4.2.0","@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/react":"^16.3.2","eslint-config-prettier":"^9.1.0","eslint-plugin-storybook":"^0.12.0","@testing-library/jest-dom":"^6.9.1","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.6.0","postcss-custom-properties":"^13.3.2","stylelint-config-standard":"^36.0.0","@semantic-release/changelog":"^6.0.3","eslint-plugin-react-refresh":"^0.4.5","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/7k-design-system_1.0.0-alpha.1_1780667846657_0.06640904848643969","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"7k-design-system","version":"1.1.0","keywords":["design-system","css","dark-theme","neon","manga","1-bit","geist","typography","tokens","react","components"],"author":{"name":"7K"},"license":"MIT","_id":"7k-design-system@1.1.0","maintainers":[{"name":"joaodss","email":"joaodss@live.com.pt"}],"homepage":"https://github.com/7K-Group/7k-design-system#readme","bugs":{"url":"https://github.com/7K-Group/7k-design-system/issues"},"dist":{"shasum":"6b207bda2e9a57f58c0cc33e66e203408c9f445e","tarball":"https://registry.npmjs.org/7k-design-system/-/7k-design-system-1.1.0.tgz","fileCount":57,"integrity":"sha512-vouaAuudA5XbID49LJncANczsPc5GH1H8sRIIJMyxc9hmua/Oz/fnVJ8+VCfFBeEmENJ+Kn7qKGrCa+Hg9qJqQ==","signatures":[{"sig":"MEYCIQD2Tj/WVy602mEoACtlXmmD2mQTefG4qLAvEDLeh+BPYAIhALGhHIKWNW4mvnknN2fXPiakJmesQmZwLBS7CT/VQDGJ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2225847},"main":"./dist/7k-design-system.css","type":"module","types":"./dist/index.d.ts","module":"./dist/7k-design-system.esm.css","engines":{"npm":">=9.0.0","node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/7k-design-system.css","require":"./dist/7k-design-system.css"},"./css":"./dist/7k-design-system.css","./react":{"types":"./dist/react/index.d.ts","import":"./dist/react/index.js","require":"./dist/react/index.cjs"},"./build/*":"./build/*","./fonts/*":"./fonts/*","./css/tokens":"./dist/tokens.css","./css/textures":"./dist/textures.css","./css/animations":"./dist/animations.css","./css/components":"./dist/components.css"},"gitHead":"9cc73fd8d5d2c1f6068ce5a1eab0747aae4bbc5c","scripts":{"dev":"vite","lint":"npm run lint:js && npm run lint:css","test":"vitest run","build":"npm run build:css && npm run build:react && npm run build:copy-assets","format":"prettier --write 'src/**/*.{ts,tsx,js,jsx,css,json,md}'","lint:js":"eslint src --ext .ts,.tsx,.js,.jsx","preview":"vite preview","lint:css":"stylelint 'src/**/*.css' 'colors_and_type.css'","lint:fix":"npm run lint:js -- --fix && npm run lint:css -- --fix","build:css":"vite build --config vite.css.config.ts","chromatic":"npx chromatic --exit-zero-on-changes","storybook":"storybook dev -p 6006","test:a11y":"vitest run --config vitest.a11y.config.ts","typecheck":"tsc --noEmit","test:watch":"vitest","build:react":"vite build --config vite.react.config.ts","format:check":"prettier --check 'src/**/*.{ts,tsx,js,jsx,css,json,md}'","build-storybook":"storybook build","semantic-release":"semantic-release","build:copy-assets":"node scripts/copy-assets.js"},"_npmUser":{"name":"joaodss","email":"joaodss@live.com.pt"},"repository":{"url":"git+https://github.com/7K-Group/7k-design-system.git","type":"git"},"_npmVersion":"10.9.8","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.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","jsdom":"^23.0.0","eslint":"^8.55.0","vitest":"^1.0.0","cssnano":"^6.0.1","postcss":"^8.4.32","axe-core":"^4.8.0","jest-axe":"^10.0.0","prettier":"^3.1.1","chromatic":"^17.2.0","storybook":"^10.4.1","stylelint":"^16.0.0","playwright":"^1.60.0","typescript":"^5.3.0","@types/react":"^18.2.0","autoprefixer":"^10.4.16","postcss-import":"^15.1.0","@types/jest-axe":"^3.5.9","@vitest/browser":"^1.0.0","postcss-nesting":"^12.0.1","vite-plugin-dts":"^3.6.0","@types/react-dom":"^18.2.0","semantic-release":"^22.0.0","@vitest/coverage-v8":"^1.0.0","eslint-plugin-react":"^7.33.2","@vitejs/plugin-react":"^4.2.0","@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/react":"^16.3.2","eslint-config-prettier":"^9.1.0","eslint-plugin-storybook":"^0.12.0","@testing-library/jest-dom":"^6.9.1","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.6.0","postcss-custom-properties":"^13.3.2","stylelint-config-standard":"^36.0.0","@semantic-release/changelog":"^6.0.3","eslint-plugin-react-refresh":"^0.4.5","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/7k-design-system_1.1.0_1780668838058_0.7875323504606937","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"7k-design-system","version":"1.1.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/react/index.d.ts","exports":{".":{"import":"./dist/7k-design-system.css","require":"./dist/7k-design-system.css"},"./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","./css/projects":"./dist/projects.css","./react":{"types":"./dist/react/index.d.ts","import":"./dist/react/index.js","require":"./dist/react/index.cjs"},"./fonts/*":"./fonts/*","./icons/*":"./build/icons/*","./logos/*":"./build/logos/*","./build/*":"./build/*"},"sideEffects":["*.css"],"scripts":{"prebuild":"rm -rf dist storybook-static","dev":"npm run storybook","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","pretest":"npm run build:css","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":{"name":"7K"},"license":"MIT","repository":{"type":"git","url":"git+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","@semantic-release/npm":"^13.1.5","@storybook/addon-a11y":"^10.4.6","@storybook/addon-docs":"^10.4.6","@storybook/addon-mcp":"^0.6.0","@storybook/addon-themes":"^10.4.6","@storybook/addon-vitest":"^10.4.6","@storybook/react-vite":"^10.4.6","@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":"^5.2.0","@vitest/browser":"^4.1.9","@vitest/browser-playwright":"^4.1.9","@vitest/coverage-v8":"^4.1.9","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":"^10.4.6","jest-axe":"^10.0.0","jsdom":"^23.0.0","mockdate":"^3.0.5","msw":"^2.14.6","msw-storybook-addon":"^2.0.7","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":"^25.0.9","storybook":"^10.4.6","stylelint":"^16.0.0","stylelint-config-standard":"^36.0.0","typescript":"^5.3.0","vite":"^6.0.0","vite-plugin-dts":"^3.6.0","vitest":"^4.1.9"},"msw":{"workerDirectory":["public"]},"gitHead":"a331ed1ed25ba7054a8e1b7ef031c3c661d201a8","_id":"7k-design-system@1.1.1","_nodeVersion":"24.18.0","_npmVersion":"11.19.0","dist":{"integrity":"sha512-b8feJ11QYwq5MDDxwoM+r8ZGnsF9Vqe+PSzGWvyta82favhjmw2EuXCMdbu5ZASPingnYPjXw2ewVFNj/W3WWQ==","shasum":"1999d8d69dd7828430988c92675feb7927a51831","tarball":"https://registry.npmjs.org/7k-design-system/-/7k-design-system-1.1.1.tgz","fileCount":61,"unpackedSize":2286661,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/7k-design-system@1.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDjOETphJkC2Z3uWQK6pTNVsWgEmh646tBR4A/d3yOjtAiAlIouQLzrNSIKnP51QSD69QvdI4eqZyiJGdJGH7a95xQ=="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:cf9658df-fa44-44c0-ba4d-049b6a9d35d1"}},"directories":{},"maintainers":[{"name":"joaodss","email":"joaodss@live.com.pt"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/7k-design-system_1.1.1_1786637909199_0.6269083992975768"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-05T13:57:26.491Z","modified":"2026-08-13T16:18:29.700Z","1.0.0-alpha.1":"2026-06-05T13:57:26.824Z","1.1.0":"2026-06-05T14:13:58.242Z","1.1.1":"2026-08-13T16:18:29.366Z"},"bugs":{"url":"https://github.com/7K-Group/7k-design-system/issues"},"author":{"name":"7K"},"license":"MIT","homepage":"https://github.com/7K-Group/7k-design-system#readme","keywords":["design-system","css","dark-theme","neon","manga","1-bit","geist","typography","tokens","react","components"],"repository":{"type":"git","url":"git+https://github.com/7K-Group/7k-design-system.git"},"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.","maintainers":[{"name":"joaodss","email":"joaodss@live.com.pt"}],"readme":"# 7k-design-system\n\n> Dark-first, neon-accented, manga-inflected design system for multi-project tech company 7K.\n> Built for midnight. Three-font system. Major neon #FF0FF. Secondary neon cyan (thematic per project). Background textures on components. Manga panels. Isometric animations.\n\n## Product Overview\n\n**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.\n\n**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.\n\n### Primary Surfaces\n\nThe design system supports five primary surfaces:\n\n| Surface | Description | Key Files |\n| ----------------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------- |\n| **Company Website** | Dark landing pages with scanline heroes, project showcases, stats grids | `DESIGN.md` §1–5, `src/stories/Components.stories.tsx` |\n| **Product Dashboard** | Data-dense admin interfaces with sidebar nav, tables, status cards | `src/react/components/`, `src/stories/Components.stories.tsx` |\n| **Sub-project Landing** | Child project pages with accent hue overrides (cyan, acid, ember, solar) | `DESIGN.md` §2 (accent tokens), `src/css/projects.css` |\n| **Internal Tools** | CLI-like interfaces, monitoring panels, resource dashboards | `DESIGN.md` §3 (mono labels), `src/stories/Tokens.mdx` |\n| **Mobile App** | Responsive adaptations with bottom tab nav, touch-friendly targets | `DESIGN.md` §5 (responsive grid), `src/stories/Components.stories.tsx` |\n\n### Core Capabilities\n\nThe system provides these core capabilities:\n\n- **Dark-first theming** with opt-in light mode via `data-theme=\"light\"`\n- **Major neon accent** (#FF0FF magenta) + **secondary neon accent** (cyan by default, thematic per project)\n- **Three-font system**: Geist Sans (display/body), Geist Mono (labels/code), Geist Pixel (5 geometric variants for ornamental use)\n- **Texture categories**: scanline, halftone, dot matrix, stripes, crosshatch, checkerboard, noise, vignette, isometric, manga panels\n- **40+ 1-bit components**: zero-radius, 2px white borders, invert-on-hover, thin accent modifiers\n- **Textured component variants**: halftone, scanline, noise, dots, crosshatch on cards, panels, modals, drawers, toasts, buttons\n- **20+ animations**: ambient (scanline scroll, CRT flicker, neon pulse) and trigger (glitch, pixel-dots, invert-flash)\n- **Isometric geometry animations**: combined animated background classes (`.isometric-grid-animated`, etc.)\n- **Engineering-blueprint aesthetic**: mono labels as \"connective tissue\" throughout all surfaces\n- **React UI kit**: 20+ TypeScript components wrapping the CSS system\n\n## Source & Context References\n\nEvery design rule is grounded in the original brand brief (quoted inline in `DESIGN.md`):\n\n| Evidence from Brief | Design Rule |\n| -------------------------------------- | -------------------------------------------------------------------------------------------- |\n| \"We only have 1 font and it's Geist\" | Three-font system: Geist Sans + Geist Mono + Geist Pixel (5 variants) |\n| \"Our logo is just '7K'\" | Star-burst pattern SVG logo with #FF0FF accent tones |\n| \"Our main brand color is #FF0FF\" | Major magenta accent; cyan secondary (thematic per project) |\n| \"Tech company with different projects\" | Sub-project accent overrides via `--brand-secondary` and `--accent-*` tokens |\n| \"Tokyo's neon atmosphere\" | Dark near-black canvas (`#0A0A0D`), electric accents, no warm/beige tones |\n| \"Manga-influenced 1-bit\" | Pure black/white elements, texture patterns, manga panel utilities, zero radius, 2px borders |\n| \"Abstract 1-bit animations\" | 20+ keyframes with step timing for retro digital feel |\n| \"Dark theme for websites\" | Dark-first: `--bg-void: #000000`, `--bg-base: #0A0A0D`; light is opt-in |\n\n## Package Contents\n\n```\n7k-design-system/\n├── DESIGN.md # Canonical design system documentation\n├── SKILL.md # Agent-facing usage guide with surface mapping\n├── CONSUMER_GUIDE.md # End-user integration guide\n├── README.md # This file\n├── package.json # npm package manifest\n│\n├── build/ # Brand runtime assets (preserved originals)\n│ ├── logo-7k.svg # Star-burst pattern logo with magenta accents\n│ ├── logo-7k-light.svg # Black polygon variant for light backgrounds\n│ └── icon.svg # App icon (208×207)\n│\n├── fonts/ # Geist Pixel font files (preserved originals)\n│ ├── GeistPixel-Square.ttf # 400 weight · pairs with magenta (7K parent)\n│ ├── GeistPixel-Circle.ttf # 500 weight · pairs with cyan\n│ ├── GeistPixel-Grid.ttf # 600 weight · pairs with acid\n│ ├── GeistPixel-Line.ttf # 700 weight · pairs with ember\n│ └── GeistPixel-Triangle.ttf # 800 weight · pairs with solar\n│\n├── src/ # Source code\n│ ├── css/ # Modular CSS source files\n│ └── react/ # TypeScript React UI kit\n│\n├── tests/ # Vitest test suite\n├── src/stories/ # Storybook documentation\n│\n├── examples/legacy/ # Legacy UI kit (deprecated)\n│ └── ui_kits/app/ # Applied React interface kit\n│\n└── dist/ # Distribution build\n ├── 7k-design-system.css # Self-contained CSS bundle\n ├── tokens.css # Standalone tokens\n ├── components.css # Standalone components\n ├── textures.css # Standalone textures\n ├── animations.css # Standalone animations\n ├── projects.css # Standalone project overrides\n ├── fonts/ # Copied Geist Pixel files for distribution\n └── build/ # Copied brand assets for distribution\n```\n\n## Storybook\n\nRun Storybook to preview components, textures, tokens, and themes interactively.\n\n```bash\nnpm run storybook # Dev server at http://localhost:6006\nnpm run build-storybook # Static build for deployment\n```\n\n| Story | Path | What It Demonstrates | Source-Backed Components |\n| -------------------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |\n| **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 |\n| **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` |\n| **Textures** | `src/stories/Textures.stories.tsx` | All texture categories with density variants: scanline, halftone, dot matrix, stripes, crosshatch, checkerboard, noise, vignette, separators, manga panels | `src/css/textures.css`; `src/css/manga.css`; `DESIGN.md` |\n| **Icons & Logos** | `src/stories/Icons.stories.tsx` | Curated icon set, logo variants, brand application rules, contextual previews | `build/` directory; `src/react/components/Icon.tsx` |\n| **Theme / Projects** | `src/stories/ThemeToggle.stories.tsx` | Light/dark/system theme switching and project accent overrides | `src/react/theme/`; `src/css/projects.css` |\n| **Overview** | `src/stories/Overview.mdx` | Design principles, voice/tone, anti-patterns, reuse workflow | `DESIGN.md`; `SKILL.md`; `CONSUMER_GUIDE.md` |\n\n## Quick Start\n\n### Option 1: CDN (when published)\n\n```html\n\n```\n\n### Option 2: Self-hosted\n\n```html\n\n```\n\nCopy the `dist/` folder to your project. Geist Pixel fonts will load from `dist/fonts/`.\n\n### Option 3: Source CSS\n\n```html\n\n```\n\nRequires self-hosting the `fonts/` directory for Geist Pixel variants.\n\n## Reuse Workflow\n\n### For Designers / Agents\n\n1. **Read the source** — Open `DESIGN.md` §1 for visual theme and constraints, §8 for voice/tone, §9 for anti-patterns\n2. **Bind tokens** — Import `colors_and_type.css` (or `dist/7k-design-system.css` for external use)\n3. **Override accent** — For child projects, set the appropriate `--accent-*` token:\n ```css\n .project-neon {\n --accent-circle: var(--cyan-500);\n }\n .project-grid {\n --accent-grid: var(--acid-500);\n }\n ```\n4. **Preview tokens** — Run `npm run storybook` and open the Colors, Tokens, Textures, and Components stories to verify values render correctly\n5. **Reference UI kit** — Study `examples/legacy/ui_kits/app/components/` for composition patterns; copy React components from `src/react/components/` into your project\n6. **Use build assets** — Reference `build/logos/logo-7k.svg` (dark), `build/logos/logo-7k-light.svg` (light), `build/icons/icon.svg` (app)\n\n### For Developers\n\n1. **Install** — `npm install 7k-design-system` (when published)\n2. **Import** — `import '7k-design-system/dist/7k-design-system.css'`\n3. **Use tokens** — All CSS custom properties are available globally:\n ```css\n .my-component {\n background: var(--bg-elevated);\n color: var(--text-primary);\n border: 2px solid var(--border-default);\n font-family: var(--font-sans);\n }\n ```\n4. **Apply textures** — Add classes like `.scanline`, `.halftone-md`, `.noise` to sections\n5. **Use components** — Apply classes like `.btn-modern-primary`, `.badge-success`, `.input`\n\n## File Structure Notes\n\n- **`build/`** — Preserved original brand assets. These are the source-of-truth SVGs referenced by `DESIGN.md` and Storybook. Do not modify.\n- **`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.\n- **`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.\n- **`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.\n\n## Documentation\n\n- **`DESIGN.md`** — Complete design system documentation (809 lines): visual theme, color system, typography, spacing, layout, components, motion, voice, anti-patterns\n- **`SKILL.md`** — Agent-facing usage guide: surface mapping, token binding, accent overrides, preview card index, reuse workflow\n- **`ui_kits/app/README.md`** — UI kit documentation: component index, run instructions, source basis, design notes, reuse workflow\n- **`source_examples/README.md`** — Source examples documentation: component descriptions, dashboard patterns, usage instructions\n\n## License\n\nMIT\n","readmeFilename":"README.md"}