{"_id":"@alloysforge/kairo-88","_rev":"3-d32617b23b3ad9c8ec12c722b7d548d4","name":"@alloysforge/kairo-88","dist-tags":{"latest":"0.3.0"},"versions":{"0.1.0":{"name":"@alloysforge/kairo-88","version":"0.1.0","keywords":["design-system","css","tokens","storybook","japanese-80s","ui"],"author":{"name":"Ingredi Silva","email":"ingredisilva@dev@gmail.com"},"license":"MIT","_id":"@alloysforge/kairo-88@0.1.0","maintainers":[{"name":"ingredisilva","email":"ingredisilva.dev@gmail.com"}],"homepage":"https://github.com/ingredisilva/forge-design-system#readme","bugs":{"url":"https://github.com/ingredisilva/forge-design-system/issues"},"dist":{"shasum":"fdbd74664a6b197c36c7eab5156d9084505a31f6","tarball":"https://registry.npmjs.org/@alloysforge/kairo-88/-/kairo-88-0.1.0.tgz","fileCount":31,"integrity":"sha512-Ayc38YyIvX/5HN5nDKlgGaOjPtcSSAuRCJSdxMCf2vYHhJfgsrD3f0MxjF6NsSnrzG3JmoLh2vvjMCF/ZiLYcQ==","signatures":[{"sig":"MEUCIEN3vfMheQfwPgWXuXsHh7hTSn3Ck8XKD2RMnSrVktc2AiEA0IIO44pnZXrEnNei3AxUgzLbGPsIb/s18CgDjrUrhKE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":64096},"type":"module","style":"./src/styles/kairo.css","engines":{"node":">=20.19.0"},"exports":{".":"./src/contracts/kairo.js","./icons":"./src/icons/kairo-icons.svg","./styles":"./src/styles/kairo.css","./themes":"./tokens/kairo-88.themes.json","./tokens":"./tokens/kairo-88.tokens.json","./contract":"./src/contracts/kairo.js","./package.json":"./package.json"},"gitHead":"27273ec577b3c56bb9ccfd8f23b4ef515d39db0f","scripts":{"test":"node --test \"tests/*.test.js\"","build":"npm run build:tokens","prepack":"npm run build:tokens","pretest":"npm run build:tokens","test:ci":"npm run test && npm run build-storybook","storybook":"storybook dev -p 6006 --no-open --disable-telemetry --ci","build:tokens":"node scripts/generate-css-tokens.js","check:tokens":"node -e \"JSON.parse(require('node:fs').readFileSync('tokens/kairo-88.tokens.json','utf8')); console.log('tokens-json-ok')\"","pack:dry-run":"npm pack --dry-run","prestorybook":"npm run build:tokens","prepublishOnly":"npm run test:ci","test:storybook":"storybook build --test --disable-telemetry","build-storybook":"storybook build --disable-telemetry","publish:dry-run":"npm publish --dry-run --access public","pretest:storybook":"npm run build:tokens","prebuild-storybook":"npm run build:tokens"},"_npmUser":{"name":"ingredisilva","email":"ingredisilva.dev@gmail.com"},"repository":{"url":"git+https://github.com/ingredisilva/forge-design-system.git","type":"git"},"_npmVersion":"11.8.0","description":"Kairo 88 design system: Japanese 80s product aesthetic for Forge projects.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"25.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.0","storybook":"^10.4.0","@storybook/addon-docs":"^10.4.0","@storybook/web-components-vite":"^10.4.0"},"_npmOperationalInternal":{"tmp":"tmp/kairo-88_0.1.0_1785013746007_0.9898508770425531","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@alloysforge/kairo-88","version":"0.2.0","keywords":["design-system","css","tokens","storybook","japanese-80s","ui"],"author":{"name":"Ingredi Silva","email":"ingredisilva@dev@gmail.com"},"license":"MIT","_id":"@alloysforge/kairo-88@0.2.0","maintainers":[{"name":"ingredisilva","email":"ingredisilva.dev@gmail.com"}],"homepage":"https://github.com/ingredisilva/forge-design-system#readme","bugs":{"url":"https://github.com/ingredisilva/forge-design-system/issues"},"dist":{"shasum":"8d8838a1361607c253d7e7cf1bdc09ec0a611d8b","tarball":"https://registry.npmjs.org/@alloysforge/kairo-88/-/kairo-88-0.2.0.tgz","fileCount":40,"integrity":"sha512-govEt8jmoSUlHfQGSAzD4GkBhkzt8Zc+ZaFUfc/NFdVZTtnCuMAvHjaQHLDyqfDIg9VLzSDXuZUtb/O8aGCfVA==","signatures":[{"sig":"MEUCIGU28Y1hDRG8ro3Xyz5Vrw3LYZ7SjYFD3WwTQwkTmwu6AiEAxXrDmBVnvpsALCTE+9JXgwtHoNjWdMcdB7Ixm/BSAug=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":200425},"type":"module","style":"./src/styles/kairo.css","types":"./dist/contracts/kairo.d.ts","engines":{"node":">=20.19.0"},"exports":{".":{"types":"./dist/contracts/kairo.d.ts","import":"./dist/contracts/kairo.js"},"./icons":"./src/icons/kairo-icons.svg","./styles":"./src/styles/kairo.css","./themes":"./tokens/kairo-88.themes.json","./tokens":"./tokens/kairo-88.tokens.json","./contract":{"types":"./dist/contracts/kairo.d.ts","import":"./dist/contracts/kairo.js"},"./package.json":"./package.json"},"gitHead":"1002de0de6bebe8b4fe7d47f146603a01b3e1901","scripts":{"test":"npm run typecheck && node --test \"tests/*.test.js\"","build":"npm run build:types && npm run build:tokens","prepack":"npm run build","pretest":"npm run build","test:ci":"npm run test && npm run build-storybook","build:ts":"npm run build:types && npm run build:scripts","storybook":"storybook dev -p 6006 --no-open --disable-telemetry --ci","typecheck":"tsc -p tsconfig.json --noEmit","build:types":"tsc -p tsconfig.build.json","build:tokens":"npm run build:scripts && node dist/scripts/generate-css-tokens.js","check:tokens":"node -e \"JSON.parse(require('node:fs').readFileSync('tokens/kairo-88.tokens.json','utf8')); console.log('tokens-json-ok')\"","pack:dry-run":"npm pack --dry-run","prestorybook":"npm run build","build:scripts":"tsc -p tsconfig.scripts.json","prepublishOnly":"npm run test:ci","test:storybook":"storybook build --test --disable-telemetry","build-storybook":"storybook build --disable-telemetry","publish:dry-run":"npm publish --dry-run --access public","pretest:storybook":"npm run build","prebuild-storybook":"npm run build"},"_npmUser":{"name":"ingredisilva","email":"ingredisilva.dev@gmail.com"},"repository":{"url":"git+https://github.com/ingredisilva/forge-design-system.git","type":"git"},"_npmVersion":"11.8.0","description":"Kairo 88 design system: Japanese 80s product aesthetic for Forge projects.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"25.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.0","storybook":"^10.4.0","typescript":"^7.0.2","@types/node":"^22.20.1","@storybook/addon-docs":"^10.4.0","@storybook/web-components-vite":"^10.4.0"},"_npmOperationalInternal":{"tmp":"tmp/kairo-88_0.2.0_1785093994437_0.12839149021147533","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@alloysforge/kairo-88","version":"0.3.0","type":"module","description":"Kairo 88 design system: Japanese 80s product aesthetic for Forge projects.","license":"MIT","author":{"name":"Ingredi Silva","email":"ingredisilva@dev@gmail.com"},"homepage":"https://github.com/ingredisilva/forge-design-system#readme","repository":{"type":"git","url":"git+https://github.com/ingredisilva/forge-design-system.git"},"bugs":{"url":"https://github.com/ingredisilva/forge-design-system/issues"},"keywords":["design-system","css","tokens","storybook","japanese-80s","ui"],"types":"./dist/contracts/kairo.d.ts","style":"./src/styles/kairo.css","exports":{".":{"types":"./dist/contracts/kairo.d.ts","import":"./dist/contracts/kairo.js"},"./contract":{"types":"./dist/contracts/kairo.d.ts","import":"./dist/contracts/kairo.js"},"./styles":"./src/styles/kairo.css","./icons":"./src/icons/kairo-icons.svg","./tokens":"./tokens/kairo-88.tokens.json","./themes":"./tokens/kairo-88.themes.json","./package.json":"./package.json"},"sideEffects":["**/*.css"],"engines":{"node":">=20.19.0"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run build:types && npm run build:tokens","build:ts":"npm run build:types && npm run build:scripts","build:types":"tsc -p tsconfig.build.json","build:scripts":"tsc -p tsconfig.scripts.json","typecheck":"tsc -p tsconfig.json --noEmit","build:tokens":"npm run build:scripts && node dist/scripts/generate-css-tokens.js","prestorybook":"npm run build","storybook":"storybook dev -p 6006 --no-open --disable-telemetry --ci","prebuild-storybook":"npm run build","build-storybook":"storybook build --disable-telemetry","check:tokens":"node -e \"JSON.parse(require('node:fs').readFileSync('tokens/kairo-88.tokens.json','utf8')); console.log('tokens-json-ok')\"","pretest":"npm run build","test":"npm run typecheck && node --test \"tests/*.test.js\"","pretest:storybook":"npm run build","test:storybook":"storybook build --test --disable-telemetry","test:ci":"npm run test && npm run build-storybook","pack:dry-run":"npm pack --dry-run","publish:dry-run":"npm publish --dry-run --access public","prepack":"npm run build","prepublishOnly":"npm run test:ci"},"devDependencies":{"@storybook/addon-docs":"^10.4.0","@storybook/web-components-vite":"^10.4.0","@types/node":"^22.20.1","storybook":"^10.4.0","typescript":"^7.0.2","vite":"^7.0.0"},"gitHead":"934fa95dd71d741f20a7b410a57a33205297e4c6","_id":"@alloysforge/kairo-88@0.3.0","_nodeVersion":"25.5.0","_npmVersion":"11.8.0","dist":{"integrity":"sha512-vYIYiZON/XVzfG31swOon6ObF6yfaaVOgigRdlu8iwhxGXxovJkJWtG4Jvu2XeLh9QFPNrXKdb7d6vITBji1JQ==","shasum":"214b6ebf72e4f3e1401fa3d4eec533252406f059","tarball":"https://registry.npmjs.org/@alloysforge/kairo-88/-/kairo-88-0.3.0.tgz","fileCount":40,"unpackedSize":208204,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAOugJpet0MRwUM2wr+PGRR+ICFF9njgwN+L35w5wA9KAiEA4L9Wuz7zhzouFtQImEIv5iX8CHVVVPim6H4QgFFzcvQ="}]},"_npmUser":{"name":"ingredisilva","email":"ingredisilva.dev@gmail.com"},"directories":{},"maintainers":[{"name":"ingredisilva","email":"ingredisilva.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/kairo-88_0.3.0_1785099574518_0.6147270319731777"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-25T21:09:05.894Z","modified":"2026-07-26T20:59:34.848Z","0.1.0":"2026-07-25T21:09:06.157Z","0.2.0":"2026-07-26T19:26:34.607Z","0.3.0":"2026-07-26T20:59:34.670Z"},"bugs":{"url":"https://github.com/ingredisilva/forge-design-system/issues"},"author":{"name":"Ingredi Silva","email":"ingredisilva@dev@gmail.com"},"license":"MIT","homepage":"https://github.com/ingredisilva/forge-design-system#readme","keywords":["design-system","css","tokens","storybook","japanese-80s","ui"],"repository":{"type":"git","url":"git+https://github.com/ingredisilva/forge-design-system.git"},"description":"Kairo 88 design system: Japanese 80s product aesthetic for Forge projects.","maintainers":[{"name":"ingredisilva","email":"ingredisilva.dev@gmail.com"}],"readme":"# Kairo 88 Design System\r\n\r\nKairo 88 is a design system for digital products with a Japanese 80s aesthetic: precise, nocturnal, editorial, tactile interfaces inspired by city pop, consumer electronics, arcades, urban signage, and CRT displays.\r\n\r\nThe goal is not to turn every app into decorative nostalgia. The system should be useful first and memorable second: high readability, predictable components, consistent tokens, and visual details that create identity without getting in the way of daily use.\r\n\r\n## Core Idea\r\n\r\n**A modern product with the soul of an 80s Japanese electronic panel.**\r\n\r\nUsers should feel that they are using a reliable, fast, beautiful tool with subtle period cues: neon contrast over an urban night base, fine lines, rigid grids, microtextures, technical typography, luminous states, and a palette that mixes paper, ink, glass, metal, and light.\r\n\r\n## Principles\r\n\r\n1. **Signal before ornament**\r\n   Every color, border, shadow, and animation should help readability, hierarchy, or feedback.\r\n\r\n2. **Grid as rhythm**\r\n   Layouts use strong alignment, predictable spacing, and controlled density. The reference is editorial and industrial, not decorative landing-page composition.\r\n\r\n3. **Nostalgia with precision**\r\n   The aesthetic comes from materials, light, typography, and proportion. Avoid decorative kanji, tourist cliches, or cultural elements without purpose.\r\n\r\n4. **Urban night, clear paper**\r\n   The system starts with an expressive dark mode and an editorial light mode. Both share the same tokens instead of becoming separate systems.\r\n\r\n5. **Tactile, not heavy**\r\n   Components may evoke buttons, displays, labels, and panels while staying lightweight, responsive, and accessible.\r\n\r\n6. **One library, many products**\r\n   The visual signature should survive dashboards, internal tools, websites, games, docs, and mobile apps without requiring a redesign per project.\r\n\r\n## Project Structure\r\n\r\n- [.storybook](.storybook): Storybook configuration for documenting and testing the library.\r\n- [docs/atomic-design.md](docs/atomic-design.md): organization by foundations, atoms, molecules, and organisms.\r\n- [docs/backgrounds.md](docs/backgrounds.md): semantic background roles, texture rules, and accessibility requirements.\r\n- [docs/concept.md](docs/concept.md): concept, visual language, usage rules, and component direction.\r\n- [docs/design-options.md](docs/design-options.md): official visual presets, including `systems-84`, `cyberpunk-1984`, and `neko-mirai-84`.\n- [docs/icons.md](docs/icons.md): icon direction, sizes, names, and usage rules.\r\n- [docs/motion.md](docs/motion.md): animation principles, durations, easing, and reusable patterns.\r\n- [docs/publishing.md](docs/publishing.md): production publishing checklist for npm, releases, and Storybook Pages.\r\n- [docs/roadmap.md](docs/roadmap.md): recommended path for turning the concept into a real library.\r\n- [docs/storybook.md](docs/storybook.md): how to use Storybook as the design system workbench.\r\n- [docs/testing.md](docs/testing.md): test strategy for tokens, CSS, icons, stories, and builds.\r\n- [tokens/kairo-88.tokens.json](tokens/kairo-88.tokens.json): initial semantic tokens in JSON.\r\n- [tokens/kairo-88.themes.json](tokens/kairo-88.themes.json): semantic themes used to generate CSS.\r\n- [src/contracts/kairo.ts](src/contracts/kairo.ts): typed source contract for themes, icons, and Storybook ordering.\r\n- [src/styles/kairo.css](src/styles/kairo.css): public CSS entrypoint, organized with Atomic Design.\r\n- [src/icons/kairo-icons.svg](src/icons/kairo-icons.svg): initial SVG sprite with functional icons.\r\n- [src/stories](src/stories): stories for concept, tokens, components, icons, and motion.\r\n- [scripts/generate-css-tokens.ts](scripts/generate-css-tokens.ts): generates `src/styles/foundations/tokens.css`.\r\n- [examples/kairo-board.html](examples/kairo-board.html): static showcase of the concept with switchable themes.\r\n\r\n## Storybook\r\n\r\nInstall dependencies and run:\r\n\r\n```bash\r\nnpm install\r\nnpm run build\r\nnpm run storybook\r\n```\r\n\r\nStorybook runs at `http://localhost:6006` and includes a theme selector for `midnight`, `systems-84`, `cyberpunk-1984`, `neko-mirai-84`, `daylight`, `arcade`, and `paper`.\n\r\n## Component Gallery\r\n\r\nThese previews are rendered from the Storybook stories with the `kairo-midnight` theme.\r\n\r\n| Buttons | Form fields and badges |\r\n| --- | --- |\r\n| ![Kairo 88 button variants](docs/images/components/buttons.png) | ![Kairo 88 form field and status badge components](docs/images/components/forms.png) |\r\n\r\n| Panel | Data table |\r\n| --- | --- |\r\n| ![Kairo 88 signal readout panel](docs/images/components/panel.png) | ![Kairo 88 event queue data table](docs/images/components/data-table.png) |\r\n\r\n## Tests\r\n\r\n```bash\r\nnpm test\r\nnpm run test:ci\r\n```\r\n\r\n`npm test` validates TypeScript, tokens, CSS, icons, and stories with Node's native test runner. `npm run test:ci` runs the suite and also builds Storybook.\r\n\r\n## Intended Usage\r\n\r\nInstall the package:\r\n\r\n```bash\r\nnpm install @alloysforge/kairo-88\r\n```\r\n\r\nConsumer projects should import the CSS tokens and set a theme attribute on the root element:\r\n\r\n```html\r\n<html data-theme=\"kairo-midnight\">\r\n```\r\n\r\n```html\r\n<html data-theme=\"systems-84\">\r\n```\r\n\r\n```html\r\n<html data-theme=\"cyberpunk-1984\">\n```\n\n```html\n<html data-theme=\"neko-mirai-84\">\n```\n\n```css\r\n@import \"@alloysforge/kairo-88/styles\";\r\n```\r\n\r\nThe package exposes a typed contract, tokens, base CSS, and components through adapters without forcing every project to use the same framework.\r\n","readmeFilename":"README.md"}