{"_id":"@aeryflux/design","_rev":"3-af24dc8e963b66f4c55748e5260133be","name":"@aeryflux/design","dist-tags":{"latest":"0.4.0"},"versions":{"0.2.3":{"name":"@aeryflux/design","version":"0.2.3","keywords":["design-system","design-tokens","tailwind","tailwind-preset","css","aeryflux"],"author":{"name":"AeryFlux"},"license":"MIT","_id":"@aeryflux/design@0.2.3","maintainers":[{"name":"martinbaud","email":"martinbaud.git@gmail.com"}],"homepage":"https://github.com/aeryflux/design#readme","bugs":{"url":"https://github.com/aeryflux/design/issues"},"dist":{"shasum":"71e6e9d503cc1ff8ab1c7c3fbefbedd9829e1d67","tarball":"https://registry.npmjs.org/@aeryflux/design/-/design-0.2.3.tgz","fileCount":6,"integrity":"sha512-0N+eV6Cn7wcVe90hRR36K8ef3JNzHdgb53T+Q34lhWo74M21wmEhump8E2XJd6ZSorB55kHoF36n7aesIlvpWA==","signatures":[{"sig":"MEYCIQCq7FewvFIpYhVsQVX3K2dACaPHnQbeSihzlnYY0uwUxQIhAPC8m0WSrEtk3Q/qG3QJ+QCNd7YP+r6oNyOihZWpYPsx","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25252},"main":"tokens.js","type":"module","types":"tokens.d.ts","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./tokens.d.ts","import":"./tokens.js","require":"./tokens.js"},"./css":"./tokens.css","./tokens":{"types":"./tokens.d.ts","import":"./tokens.js","require":"./tokens.js"},"./tailwind":{"import":"./tailwind.preset.js","require":"./tailwind.preset.js"},"./tokens.css":"./tokens.css"},"gitHead":"13d48b36325dad800520dcc8d0e07c888be05f63","_npmUser":{"name":"martinbaud","email":"martinbaud.git@gmail.com"},"repository":{"url":"git+https://github.com/aeryflux/design.git","type":"git"},"_npmVersion":"10.9.4","description":"AeryFlux Design System - Tokens, Tailwind preset, and CSS utilities","directories":{},"_nodeVersion":"22.22.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"tailwindcss":">=3.0.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/design_0.2.3_1774141013485_0.8281604306083492","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@aeryflux/design","version":"0.3.0","keywords":["design-system","design-tokens","surfaces","themes","tailwind","tailwind-preset","css","aeryflux"],"author":{"name":"AeryFlux"},"license":"MIT","_id":"@aeryflux/design@0.3.0","maintainers":[{"name":"martinbaud","email":"martinbaud.git@gmail.com"}],"homepage":"https://github.com/aeryflux/design#readme","bugs":{"url":"https://github.com/aeryflux/design/issues"},"dist":{"shasum":"57f4bc509dd6ed0a4f2816a07631eb662462b32e","tarball":"https://registry.npmjs.org/@aeryflux/design/-/design-0.3.0.tgz","fileCount":9,"integrity":"sha512-ui+tJMR2970WGowazDfApuk81HSCO+xlIB379J0WI4D7h05CQEkZP17+nplQz6PjNx4B2qEuJ4FW+pnYaQhNmQ==","signatures":[{"sig":"MEYCIQCntLp0lLsteMx7uK8pwMUkwL6AcxBJ3MAGjTjBz336EgIhAO0tWPM9mxlivHoH4O+2EPMv845RDvda68IRxoQuZEwh","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31094},"main":"tokens.js","type":"module","types":"tokens.d.ts","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./tokens.d.ts","import":"./tokens.js","require":"./tokens.js"},"./css":"./tokens.css","./tokens":{"types":"./tokens.d.ts","import":"./tokens.js","require":"./tokens.js"},"./surfaces":{"types":"./surfaces.d.ts","import":"./surfaces.js","require":"./surfaces.js"},"./tailwind":{"import":"./tailwind.preset.js","require":"./tailwind.preset.js"},"./tokens.css":"./tokens.css","./surfaces.css":"./surfaces.css"},"gitHead":"37034e2aeeca03c27c23aa9d40a1bc24c5f379de","_npmUser":{"name":"martinbaud","email":"martinbaud.git@gmail.com"},"repository":{"url":"git+https://github.com/aeryflux/design.git","type":"git"},"_npmVersion":"10.9.4","description":"AeryFlux Design System - Tokens, Surfaces, Tailwind preset","directories":{},"_nodeVersion":"22.22.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"tailwindcss":">=3.0.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/design_0.3.0_1774146689946_0.09128628219205415","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@aeryflux/design","version":"0.4.0","description":"AeryFlux Design System - Tokens, Surfaces, Tailwind preset","type":"module","main":"tokens.js","types":"tokens.d.ts","exports":{".":{"types":"./tokens.d.ts","import":"./tokens.js","require":"./tokens.js"},"./tokens":{"types":"./tokens.d.ts","import":"./tokens.js","require":"./tokens.js"},"./tokens.css":"./tokens.css","./css":"./tokens.css","./surfaces":{"types":"./surfaces.d.ts","import":"./surfaces.js","require":"./surfaces.js"},"./surfaces.css":"./surfaces.css","./tailwind":{"import":"./tailwind.preset.js","require":"./tailwind.preset.js"}},"keywords":["design-system","design-tokens","surfaces","themes","tailwind","tailwind-preset","css","aeryflux"],"author":{"name":"AeryFlux"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aeryflux/design.git"},"homepage":"https://github.com/aeryflux/design#readme","bugs":{"url":"https://github.com/aeryflux/design/issues"},"peerDependencies":{"tailwindcss":">=3.0.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"engines":{"node":">=18.0.0"},"_id":"@aeryflux/design@0.4.0","gitHead":"a499d74e63efa170e6a41723e01d6337351ebbed","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-M6+l+969pECerQFeiWN3P+N+rYS0qIs6MB4SdlVepDiTvZGJ/QvM9n/0+2bMZBP29krwK7pYUEfa3EEEBU1YTw==","shasum":"e40b50781e6b0344c92b0416755bf17673150363","tarball":"https://registry.npmjs.org/@aeryflux/design/-/design-0.4.0.tgz","fileCount":10,"unpackedSize":35022,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDXbkXFwl3u8uFP56TzktaqYFwnra/siyLR780DMoK/FwIhAKH0BBuPmQzAY1PHKUGDUBpwifez+lCLZOUXd1s1Q7/L"}]},"_npmUser":{"name":"martinbaud","email":"martinbaud.git@gmail.com"},"directories":{},"maintainers":[{"name":"martinbaud","email":"martinbaud.git@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design_0.4.0_1775223963905_0.6803769733098877"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-22T00:56:53.329Z","modified":"2026-04-03T13:46:04.208Z","0.2.3":"2026-03-22T00:56:53.629Z","0.3.0":"2026-03-22T02:31:30.103Z","0.4.0":"2026-04-03T13:46:04.073Z"},"bugs":{"url":"https://github.com/aeryflux/design/issues"},"author":{"name":"AeryFlux"},"license":"MIT","homepage":"https://github.com/aeryflux/design#readme","keywords":["design-system","design-tokens","surfaces","themes","tailwind","tailwind-preset","css","aeryflux"],"repository":{"type":"git","url":"git+https://github.com/aeryflux/design.git"},"description":"AeryFlux Design System - Tokens, Surfaces, Tailwind preset","maintainers":[{"name":"martinbaud","email":"martinbaud.git@gmail.com"}],"readme":"# @aeryflux/design\r\n\r\n> Minimalist design tokens and Tailwind preset for the AeryFlux ecosystem\r\n\r\n## Philosophy\r\n\r\n- **Minimal**: Only essential elements, no decoration\r\n- **Dark-first**: Optimized for dark interfaces\r\n- **Consistent**: Same tokens across all apps\r\n- **Accessible**: High contrast, readable typography\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aeryflux/design\r\n```\r\n\r\n## Quick Start\r\n\r\n### Option 1: Tailwind CSS Preset (Recommended)\r\n\r\n```js\r\n// tailwind.config.js\r\nexport default {\r\n  presets: [require('@aeryflux/design/tailwind')],\r\n  content: ['./src/**/*.{js,jsx,ts,tsx}'],\r\n}\r\n```\r\n\r\n### Option 2: CSS Custom Properties\r\n\r\n```css\r\n@import '@aeryflux/design/css';\r\n```\r\n\r\n### Option 3: JavaScript Tokens\r\n\r\n```js\r\nimport { colors, typography, spacing } from '@aeryflux/design';\r\nimport tokens from '@aeryflux/design'; // or import all\r\n```\r\n\r\n### TypeScript Support\r\n\r\nFull TypeScript definitions included:\r\n\r\n```ts\r\nimport type { Colors, Typography, DesignTokens } from '@aeryflux/design';\r\n```\r\n\r\n## Design Tokens\r\n\r\n### Colors\r\n\r\n#### Brand\r\n\r\n| Token | Value | Usage |\r\n|-------|-------|-------|\r\n| `--color-primary` | `#00ff88` | CTAs, accents, success states |\r\n| `--color-secondary` | `#00d4ff` | Links, highlights, interactive |\r\n\r\n#### Surfaces\r\n\r\n| Token | Value | Usage |\r\n|-------|-------|-------|\r\n| `--color-bg-base` | `#050508` | Page background |\r\n| `--color-bg-elevated` | `#0a0a0f` | Cards, modals, panels |\r\n| `--color-bg-subtle` | `#111118` | Hover states, borders |\r\n\r\n#### Text\r\n\r\n| Token | Value | Usage |\r\n|-------|-------|-------|\r\n| `--color-text-primary` | `#ffffff` | Headings, important text |\r\n| `--color-text-secondary` | `#a0a0a0` | Body text, descriptions |\r\n| `--color-text-muted` | `#666666` | Captions, metadata |\r\n\r\n#### Semantic\r\n\r\n| Token | Value | Usage |\r\n|-------|-------|-------|\r\n| `--color-success` | `#00ff88` | Success, valid |\r\n| `--color-error` | `#ff4444` | Errors, destructive |\r\n| `--color-warning` | `#ffaa00` | Warnings, caution |\r\n| `--color-info` | `#00d4ff` | Information |\r\n\r\n### Typography\r\n\r\n#### Font Families\r\n\r\n| Token | Value | Usage |\r\n|-------|-------|-------|\r\n| `--font-display` | `'HemiHead', system-ui` | Headings, brand |\r\n| `--font-body` | `'Inter', system-ui` | Body text |\r\n| `--font-mono` | `'JetBrains Mono', monospace` | Code, data |\r\n\r\n#### Font Sizes\r\n\r\n| Token | Value | Usage |\r\n|-------|-------|-------|\r\n| `--text-xs` | `0.75rem` | Captions |\r\n| `--text-sm` | `0.875rem` | Small text |\r\n| `--text-base` | `1rem` | Body |\r\n| `--text-lg` | `1.125rem` | Large body |\r\n| `--text-xl` | `1.25rem` | Small headings |\r\n| `--text-2xl` | `1.5rem` | Headings |\r\n| `--text-3xl` | `2rem` | Large headings |\r\n| `--text-4xl` | `2.5rem` | Display |\r\n\r\n#### Font Weights\r\n\r\n| Token | Value |\r\n|-------|-------|\r\n| `--font-normal` | `400` |\r\n| `--font-medium` | `500` |\r\n| `--font-semibold` | `600` |\r\n| `--font-bold` | `700` |\r\n\r\n### Spacing\r\n\r\nBase unit: `4px`\r\n\r\n| Token | Value |\r\n|-------|-------|\r\n| `--space-1` | `0.25rem` (4px) |\r\n| `--space-2` | `0.5rem` (8px) |\r\n| `--space-3` | `0.75rem` (12px) |\r\n| `--space-4` | `1rem` (16px) |\r\n| `--space-6` | `1.5rem` (24px) |\r\n| `--space-8` | `2rem` (32px) |\r\n| `--space-12` | `3rem` (48px) |\r\n| `--space-16` | `4rem` (64px) |\r\n\r\n### Borders\r\n\r\n| Token | Value |\r\n|-------|-------|\r\n| `--radius-sm` | `4px` |\r\n| `--radius-md` | `8px` |\r\n| `--radius-lg` | `12px` |\r\n| `--radius-full` | `9999px` |\r\n| `--border-width` | `1px` |\r\n| `--border-color` | `#1a1a1f` |\r\n\r\n### Effects\r\n\r\n| Token | Value |\r\n|-------|-------|\r\n| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.5)` |\r\n| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.5)` |\r\n| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.5)` |\r\n| `--glow-primary` | `0 0 20px rgba(0,255,136,0.3)` |\r\n| `--glow-secondary` | `0 0 20px rgba(0,212,255,0.3)` |\r\n\r\n### Animation\r\n\r\n| Token | Value |\r\n|-------|-------|\r\n| `--duration-fast` | `100ms` |\r\n| `--duration-normal` | `200ms` |\r\n| `--duration-slow` | `300ms` |\r\n| `--easing-default` | `cubic-bezier(0.4, 0, 0.2, 1)` |\r\n| `--easing-bounce` | `cubic-bezier(0.68, -0.55, 0.265, 1.55)` |\r\n\r\n## Guidelines\r\n\r\n### Layout\r\n\r\n- Max content width: `1200px`\r\n- Grid: 12 columns, `24px` gutter\r\n- Mobile breakpoint: `640px`\r\n- Tablet breakpoint: `1024px`\r\n\r\n### Components\r\n\r\n#### Buttons\r\n\r\n```\r\nPrimary:   bg-primary, text-bg-base, hover:glow-primary\r\nSecondary: bg-transparent, border-primary, text-primary\r\nGhost:     bg-transparent, text-secondary, hover:bg-subtle\r\n```\r\n\r\n#### Inputs\r\n\r\n```\r\nDefault:   bg-bg-elevated, border-color, text-primary\r\nFocus:     border-primary, glow-primary\r\nError:     border-error\r\n```\r\n\r\n#### Cards\r\n\r\n```\r\nDefault:   bg-bg-elevated, radius-lg, border-color\r\nHover:     border-primary (subtle)\r\n```\r\n\r\n### Inspiration\r\n\r\n- [OpenClaw](https://openclaw.ai) - Minimalist dark UI\r\n- Focus on content, not decoration\r\n- Subtle gradients and glows for depth\r\n- High contrast for readability\r\n\r\n## Apps Using This System\r\n\r\n| App | Description |\r\n|-----|-------------|\r\n| Lumos | Landing page |\r\n| Haki | Learn-to-code |\r\n| Atlas | Mobile globe app |\r\n| Holocron | Admin panel |\r\n\r\n## Contributing\r\n\r\nSee [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on adding tokens and submitting pull requests.\r\n\r\n## Changelog\r\n\r\nSee [CHANGELOG.md](./CHANGELOG.md) for version history.\r\n\r\n## License\r\n\r\n[MIT](./LICENSE)\r\n","readmeFilename":"README.md"}