7k-design-system 1.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/CONSUMER_GUIDE.md +471 -0
  3. package/DESIGN.md +1207 -0
  4. package/LICENSE +21 -0
  5. package/README.md +192 -0
  6. package/SKILL.md +252 -0
  7. package/build/icon.svg +10 -0
  8. package/build/logo-7k-light.svg +10 -0
  9. package/build/logo-7k.svg +10 -0
  10. package/dist/7k-design-system.css +1 -0
  11. package/dist/animations.css +1 -0
  12. package/dist/build/icon.svg +10 -0
  13. package/dist/build/logo-7k-light.svg +10 -0
  14. package/dist/build/logo-7k.svg +10 -0
  15. package/dist/components.css +1 -0
  16. package/dist/fonts/GeistPixel-Circle.ttf +0 -0
  17. package/dist/fonts/GeistPixel-Grid.ttf +0 -0
  18. package/dist/fonts/GeistPixel-Line.ttf +0 -0
  19. package/dist/fonts/GeistPixel-Square.ttf +0 -0
  20. package/dist/fonts/GeistPixel-Triangle.ttf +0 -0
  21. package/dist/preview/brand-assets.html +83 -0
  22. package/dist/preview/brand-assets.html.artifact.json +19 -0
  23. package/dist/preview/colors-primary.html +101 -0
  24. package/dist/preview/colors-primary.html.artifact.json +19 -0
  25. package/dist/preview/components-buttons.html +84 -0
  26. package/dist/preview/components-buttons.html.artifact.json +19 -0
  27. package/dist/preview/spacing-tokens.html +79 -0
  28. package/dist/preview/spacing-tokens.html.artifact.json +19 -0
  29. package/dist/preview/textures-backgrounds.html +102 -0
  30. package/dist/preview/textures-backgrounds.html.artifact.json +19 -0
  31. package/dist/preview/typography-specimens.html +73 -0
  32. package/dist/preview/typography-specimens.html.artifact.json +19 -0
  33. package/dist/react/index.cjs +1 -0
  34. package/dist/react/index.js +129 -0
  35. package/dist/react/react/components/Badge.d.ts +3 -0
  36. package/dist/react/react/components/Badge.d.ts.map +1 -0
  37. package/dist/react/react/components/Badge.stories.d.ts +12 -0
  38. package/dist/react/react/components/Badge.stories.d.ts.map +1 -0
  39. package/dist/react/react/components/Button.d.ts +3 -0
  40. package/dist/react/react/components/Button.d.ts.map +1 -0
  41. package/dist/react/react/components/Button.stories.d.ts +16 -0
  42. package/dist/react/react/components/Button.stories.d.ts.map +1 -0
  43. package/dist/react/react/components/Input.d.ts +3 -0
  44. package/dist/react/react/components/Input.d.ts.map +1 -0
  45. package/dist/react/react/components/Input.stories.d.ts +11 -0
  46. package/dist/react/react/components/Input.stories.d.ts.map +1 -0
  47. package/dist/react/react/components/ThemeToggle.d.ts +4 -0
  48. package/dist/react/react/components/ThemeToggle.d.ts.map +1 -0
  49. package/dist/react/react/components/ThemeToggle.stories.d.ts +7 -0
  50. package/dist/react/react/components/ThemeToggle.stories.d.ts.map +1 -0
  51. package/dist/react/react/hooks/useTheme.d.ts +11 -0
  52. package/dist/react/react/hooks/useTheme.d.ts.map +1 -0
  53. package/dist/react/react/index.d.ts +8 -0
  54. package/dist/react/react/index.d.ts.map +1 -0
  55. package/dist/react/react/theme/ThemeContext.d.ts +3 -0
  56. package/dist/react/react/theme/ThemeProvider.d.ts +9 -0
  57. package/dist/react/react/theme/useTheme.d.ts +3 -0
  58. package/dist/react/react/types.d.ts +33 -0
  59. package/dist/react/react/types.d.ts.map +1 -0
  60. package/dist/react/stories/Button.d.ts +17 -0
  61. package/dist/react/stories/Button.d.ts.map +1 -0
  62. package/dist/react/stories/Button.stories.d.ts +25 -0
  63. package/dist/react/stories/Button.stories.d.ts.map +1 -0
  64. package/dist/react/stories/Components.stories.d.ts +10 -0
  65. package/dist/react/stories/Components.stories.d.ts.map +1 -0
  66. package/dist/react/stories/Header.d.ts +14 -0
  67. package/dist/react/stories/Header.d.ts.map +1 -0
  68. package/dist/react/stories/Header.stories.d.ts +20 -0
  69. package/dist/react/stories/Header.stories.d.ts.map +1 -0
  70. package/dist/react/stories/Page.d.ts +4 -0
  71. package/dist/react/stories/Page.d.ts.map +1 -0
  72. package/dist/react/stories/Page.stories.d.ts +14 -0
  73. package/dist/react/stories/Page.stories.d.ts.map +1 -0
  74. package/dist/react/stories/Textures.stories.d.ts +11 -0
  75. package/dist/react/stories/Textures.stories.d.ts.map +1 -0
  76. package/dist/textures.css +1 -0
  77. package/dist/tokens.css +1 -0
  78. package/fonts/GeistPixel-Circle.ttf +0 -0
  79. package/fonts/GeistPixel-Grid.ttf +0 -0
  80. package/fonts/GeistPixel-Line.ttf +0 -0
  81. package/fonts/GeistPixel-Square.ttf +0 -0
  82. package/fonts/GeistPixel-Triangle.ttf +0 -0
  83. package/package.json +147 -0
  84. package/preview/brand-assets.html +83 -0
  85. package/preview/colors-primary.html +101 -0
  86. package/preview/components-buttons.html +84 -0
  87. package/preview/spacing-tokens.html +79 -0
  88. package/preview/textures-backgrounds.html +102 -0
  89. package/preview/typography-specimens.html +73 -0
package/dist/preview/colors-primary.html ADDED
@@ -0,0 +1,101 @@
1
+ <!doctype html>
2
+ <html lang="en" data-theme="dark">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Colors — Brand Primary · 7k-design-system</title>
7
+ <link rel="stylesheet" href="../colors_and_type.css">
8
+ <style>
9
+ body { padding: 32px; background: var(--bg-base); color: var(--text-primary); }
10
+ h1 { margin-bottom: 8px; }
11
+ .mono-label { margin-bottom: 32px; display: block; }
12
+ section { margin-bottom: 48px; }
13
+ h2 { margin-bottom: 16px; }
14
+ .swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
15
+ .swatch { display: flex; flex-direction: column; gap: 4px; }
16
+ .swatch-color { height: 60px; border: 2px solid #FFFFFF; }
17
+ .swatch-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
18
+ .swatch-value { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
19
+ .accent-demo { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
20
+ .accent-box { width: 80px; height: 80px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; border: 2px solid #FFFFFF; }
21
+ .glow-box { box-shadow: 0 0 24px var(--brand-primary-glow); }
22
+ .project-row { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px; }
23
+ .project-card { padding: 16px; border: 2px solid #FFFFFF; min-width: 160px; }
24
+ .project-card .name { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px; }
25
+ .project-card .bar { height: 4px; margin-bottom: 8px; }
26
+ </style>
27
+ </head>
28
+ <body>
29
+ <h1>Brand Primary — #FF00FF</h1>
30
+ <span class="mono-label">7k-design-system · Magenta ramp + project accent overrides</span>
31
+
32
+ <section>
33
+ <h2>Magenta Ramp (11-step)</h2>
34
+ <div class="swatch-grid">
35
+ <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>
36
+ <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>
37
+ <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>
38
+ <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>
39
+ <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>
40
+ <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>
41
+ <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>
42
+ <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>
43
+ <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>
44
+ <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>
45
+ <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>
46
+ </div>
47
+ </section>
48
+
49
+ <section>
50
+ <h2>Brand Semantic Tokens</h2>
51
+ <div class="accent-demo">
52
+ <div class="accent-box" style="background:var(--brand-primary)">primary</div>
53
+ <div class="accent-box" style="background:var(--brand-primary-hover)">hover</div>
54
+ <div class="accent-box" style="background:var(--brand-primary-active)">active</div>
55
+ <div class="accent-box" style="background:var(--brand-primary-muted);color:var(--text-secondary)">muted</div>
56
+ <div class="accent-box" style="background:var(--brand-primary-subtle);color:var(--text-secondary)">subtle</div>
57
+ <div class="accent-box glow-box" style="background:var(--brand-primary)">glow</div>
58
+ </div>
59
+ </section>
60
+
61
+ <section>
62
+ <h2>Project Accent Overrides</h2>
63
+ <div class="project-row">
64
+ <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>
65
+ <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>
66
+ <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>
67
+ <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>
68
+ <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>
69
+ </div>
70
+ </section>
71
+
72
+ <section>
73
+ <h2>Neutral Ramp (surface + text tokens)</h2>
74
+ <div class="swatch-grid">
75
+ <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>
76
+ <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>
77
+ <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>
78
+ <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>
79
+ <div class="swatch"><div class="swatch-color" style="background:var(--neutral-400)"></div><span class="swatch-label">--neutral-400</span></div>
80
+ <div class="swatch"><div class="swatch-color" style="background:var(--neutral-500)"></div><span class="swatch-label">--neutral-500</span></div>
81
+ <div class="swatch"><div class="swatch-color" style="background:var(--neutral-600)"></div><span class="swatch-label">--neutral-600</span></div>
82
+ <div class="swatch"><div class="swatch-color" style="background:var(--neutral-700)"></div><span class="swatch-label">--neutral-700</span></div>
83
+ <div class="swatch"><div class="swatch-color" style="background:var(--neutral-800)"></div><span class="swatch-label">--neutral-800</span></div>
84
+ <div class="swatch"><div class="swatch-color" style="background:var(--neutral-900)"></div><span class="swatch-label">--neutral-900</span></div>
85
+ <div class="swatch"><div class="swatch-color" style="background:var(--neutral-950)"></div><span class="swatch-label">--neutral-950</span></div>
86
+ <div class="swatch"><div class="swatch-color" style="background:var(--neutral-1000)"></div><span class="swatch-label">--neutral-1000</span></div>
87
+ </div>
88
+ </section>
89
+
90
+ <section>
91
+ <h2>Status Colors (semantic only)</h2>
92
+ <div class="accent-demo">
93
+ <span class="badge badge-success">Success</span>
94
+ <span class="badge badge-warning">Warning</span>
95
+ <span class="badge badge-danger">Danger</span>
96
+ <span class="badge badge-accent">Info</span>
97
+ <span class="chip chip-accent">Neutral</span>
98
+ </div>
99
+ </section>
100
+ </body>
101
+ </html>
package/dist/preview/colors-primary.html.artifact.json ADDED
@@ -0,0 +1,19 @@
1
+ {
2
+ "version": 1,
3
+ "kind": "html",
4
+ "title": "preview/colors-primary.html",
5
+ "entry": "preview/colors-primary.html",
6
+ "renderer": "html",
7
+ "status": "complete",
8
+ "exports": [
9
+ "html",
10
+ "pdf",
11
+ "zip"
12
+ ],
13
+ "createdAt": "2026-06-01T20:19:28.876Z",
14
+ "updatedAt": "2026-06-01T20:19:28.876Z",
15
+ "metadata": {
16
+ "inferred": true,
17
+ "reconciled": true
18
+ }
19
+ }
package/dist/preview/components-buttons.html ADDED
@@ -0,0 +1,84 @@
1
+ <!doctype html>
2
+ <html lang="en" data-theme="dark">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Buttons · 7k-design-system</title>
7
+ <link rel="stylesheet" href="../colors_and_type.css">
8
+ <style>
9
+ body { padding: 32px; background: var(--bg-base); color: var(--text-primary); }
10
+ h1 { margin-bottom: 8px; }
11
+ .mono-label { margin-bottom: 32px; display: block; }
12
+ section { margin-bottom: 48px; }
13
+ h2 { margin-bottom: 16px; }
14
+ .button-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
15
+ .variant-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); min-width: 120px; }
16
+ .btn-modern { margin: 0; }
17
+ </style>
18
+ </head>
19
+ <body>
20
+ <h1>Button Components</h1>
21
+ <span class="mono-label">7k-design-system · Modern neon button system</span>
22
+
23
+ <section>
24
+ <h2>Primary Variants</h2>
25
+ <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>
26
+ <div class="button-row"><span class="variant-label">Glow</span><button class="btn-modern btn-modern-glow">Deploy System</button></div>
27
+ <div class="button-row"><span class="variant-label">Glow Cyan</span><button class="btn-modern btn-modern-glow-cyan">Circle Launch</button></div>
28
+ <div class="button-row"><span class="variant-label">Glow Grid</span><button class="btn-modern btn-modern-glow-grid">Grid Init</button></div>
29
+ </section>
30
+
31
+ <section>
32
+ <h2>Secondary & Ghost</h2>
33
+ <div class="button-row"><span class="variant-label">Secondary</span><button class="btn-modern btn-modern-secondary">Cancel</button></div>
34
+ <div class="button-row"><span class="variant-label">Ghost</span><button class="btn-modern btn-modern-ghost">Learn more</button></div>
35
+ <div class="button-row"><span class="variant-label">Danger</span><button class="btn-modern btn-modern-danger">Delete project</button></div>
36
+ </section>
37
+
38
+ <section>
39
+ <h2>Sizes</h2>
40
+ <div class="button-row"><span class="variant-label">Small (sm)</span><button class="btn-modern btn-modern-primary btn-modern-sm">Deploy</button></div>
41
+ <div class="button-row"><span class="variant-label">Default</span><button class="btn-modern btn-modern-primary">Deploy</button></div>
42
+ <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>
43
+ </section>
44
+
45
+ <section>
46
+ <h2>Icon Buttons</h2>
47
+ <div class="button-row">
48
+ <button class="btn-modern btn-modern-primary btn-modern-icon">✕</button>
49
+ <button class="btn-modern btn-modern-secondary btn-modern-icon">☰</button>
50
+ <button class="btn-modern btn-modern-primary btn-modern-lg-icon">▶</button>
51
+ </div>
52
+ </section>
53
+
54
+ <section>
55
+ <h2>Button Group & Split</h2>
56
+ <div class="button-row" style="flex-direction:column;align-items:flex-start;gap:12px">
57
+ <div class="btn-group">
58
+ <button class="btn-modern btn-modern-primary">Save</button>
59
+ <button class="btn-modern btn-modern-primary">Publish</button>
60
+ <button class="btn-modern btn-modern-primary">Archive</button>
61
+ </div>
62
+ <div class="btn-split">
63
+ <button class="btn-modern btn-modern-primary">Deploy</button>
64
+ <button class="btn-modern btn-modern-primary">▼</button>
65
+ </div>
66
+ </div>
67
+ </section>
68
+
69
+ <section>
70
+ <h2>Loading State</h2>
71
+ <div class="button-row">
72
+ <button class="btn-modern btn-modern-primary btn-modern-loading"><span class="btn-label">Processing</span></button>
73
+ </div>
74
+ </section>
75
+
76
+ <section>
77
+ <h2>Real Product Copy Examples</h2>
78
+ <div class="button-row"><button class="btn-modern btn-modern-glow">Launch Dashboard</button></div>
79
+ <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>
80
+ <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>
81
+ <div class="button-row"><button class="btn-modern btn-modern-danger">Delete Workspace</button></div>
82
+ </section>
83
+ </body>
84
+ </html>
package/dist/preview/components-buttons.html.artifact.json ADDED
@@ -0,0 +1,19 @@
1
+ {
2
+ "version": 1,
3
+ "kind": "html",
4
+ "title": "preview/components-buttons.html",
5
+ "entry": "preview/components-buttons.html",
6
+ "renderer": "html",
7
+ "status": "complete",
8
+ "exports": [
9
+ "html",
10
+ "pdf",
11
+ "zip"
12
+ ],
13
+ "createdAt": "2026-06-01T20:19:40.069Z",
14
+ "updatedAt": "2026-06-01T20:19:40.069Z",
15
+ "metadata": {
16
+ "inferred": true,
17
+ "reconciled": true
18
+ }
19
+ }
package/dist/preview/spacing-tokens.html ADDED
@@ -0,0 +1,79 @@
1
+ <!doctype html>
2
+ <html lang="en" data-theme="dark">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Spacing · 7k-design-system</title>
7
+ <link rel="stylesheet" href="../colors_and_type.css">
8
+ <style>
9
+ body { padding: 32px; background: var(--bg-base); color: var(--text-primary); }
10
+ h1 { margin-bottom: 8px; }
11
+ .mono-label { margin-bottom: 32px; display: block; }
12
+ section { margin-bottom: 48px; }
13
+ h2 { margin-bottom: 16px; }
14
+ .spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
15
+ .spacing-bar { background: var(--brand-primary); height: 16px; flex-shrink: 0; }
16
+ .spacing-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); min-width: 160px; }
17
+ .spacing-value { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); min-width: 80px; }
18
+ .card { background: var(--bg-elevated); border: 1px solid var(--border-default); padding: var(--space-6); margin-bottom: 16px; }
19
+ .radius-grid { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-end; }
20
+ .radius-sample { display: flex; flex-direction: column; align-items: center; gap: 4px; }
21
+ .radius-box { width: 80px; height: 80px; background: var(--brand-primary); }
22
+ .radius-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
23
+ </style>
24
+ </head>
25
+ <body>
26
+ <h1>Spacing Tokens</h1>
27
+ <span class="mono-label">7k-design-system · 4px baseline grid</span>
28
+
29
+ <section>
30
+ <h2>4px Grid Scale (--space-*)</h2>
31
+ <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>
32
+ <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>
33
+ <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>
34
+ <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>
35
+ <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>
36
+ <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>
37
+ <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>
38
+ <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>
39
+ <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>
40
+ <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>
41
+ <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>
42
+ <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>
43
+ <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>
44
+ <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>
45
+ </section>
46
+
47
+ <section>
48
+ <h2>Applied Spacing — Card Padding</h2>
49
+ <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>
50
+ <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>
51
+ <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>
52
+ </section>
53
+
54
+ <section>
55
+ <h2>Radius Scale</h2>
56
+ <div class="radius-grid">
57
+ <div class="radius-sample"><div class="radius-box" style="border-radius:var(--radius-none)"></div><span class="radius-label">--radius-none (0)</span></div>
58
+ <div class="radius-sample"><div class="radius-box" style="border-radius:var(--radius-xs)"></div><span class="radius-label">--radius-xs (2px)</span></div>
59
+ <div class="radius-sample"><div class="radius-box" style="border-radius:var(--radius-sm)"></div><span class="radius-label">--radius-sm (4px)</span></div>
60
+ <div class="radius-sample"><div class="radius-box" style="border-radius:var(--radius-md)"></div><span class="radius-label">--radius-md (8px)</span></div>
61
+ <div class="radius-sample"><div class="radius-box" style="border-radius:var(--radius-lg)"></div><span class="radius-label">--radius-lg (12px)</span></div>
62
+ <div class="radius-sample"><div class="radius-box" style="border-radius:var(--radius-xl)"></div><span class="radius-label">--radius-xl (16px)</span></div>
63
+ <div class="radius-sample"><div class="radius-box" style="border-radius:var(--radius-2xl)"></div><span class="radius-label">--radius-2xl (24px)</span></div>
64
+ <div class="radius-sample"><div class="radius-box" style="border-radius:var(--radius-full)"></div><span class="radius-label">--radius-full</span></div>
65
+ </div>
66
+ </section>
67
+
68
+ <section>
69
+ <h2>Shadow Elevation</h2>
70
+ <div style="display:flex;gap:24px;flex-wrap:wrap">
71
+ <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>
72
+ <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>
73
+ <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>
74
+ <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>
75
+ <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>
76
+ </div>
77
+ </section>
78
+ </body>
79
+ </html>
package/dist/preview/spacing-tokens.html.artifact.json ADDED
@@ -0,0 +1,19 @@
1
+ {
2
+ "version": 1,
3
+ "kind": "html",
4
+ "title": "preview/spacing-tokens.html",
5
+ "entry": "preview/spacing-tokens.html",
6
+ "renderer": "html",
7
+ "status": "complete",
8
+ "exports": [
9
+ "html",
10
+ "pdf",
11
+ "zip"
12
+ ],
13
+ "createdAt": "2026-06-01T20:20:03.399Z",
14
+ "updatedAt": "2026-06-01T20:20:03.399Z",
15
+ "metadata": {
16
+ "inferred": true,
17
+ "reconciled": true
18
+ }
19
+ }
package/dist/preview/textures-backgrounds.html ADDED
@@ -0,0 +1,102 @@
1
+ <!doctype html>
2
+ <html lang="en" data-theme="dark">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Textures · 7k-design-system</title>
7
+ <link rel="stylesheet" href="../colors_and_type.css">
8
+ <style>
9
+ body { padding: 32px; background: var(--bg-base); color: var(--text-primary); }
10
+ h1 { margin-bottom: 8px; }
11
+ .mono-label { margin-bottom: 32px; display: block; }
12
+ section { margin-bottom: 48px; }
13
+ h2 { margin-bottom: 16px; }
14
+ .texture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
15
+ .texture-card { height: 140px; border: 2px solid #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; }
16
+ .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; }
17
+ </style>
18
+ </head>
19
+ <body>
20
+ <h1>1-bit Texture Backgrounds</h1>
21
+ <span class="mono-label">10 categories · manga screentone library</span>
22
+
23
+ <section>
24
+ <h2>Scanline</h2>
25
+ <div class="texture-grid">
26
+ <div class="texture-card scanline"><span class="texture-label">.scanline (8s)</span></div>
27
+ <div class="texture-card scanline-fast"><span class="texture-label">.scanline-fast (3s)</span></div>
28
+ </div>
29
+ </section>
30
+
31
+ <section>
32
+ <h2>Halftone Dots</h2>
33
+ <div class="texture-grid">
34
+ <div class="texture-card halftone-sm"><span class="texture-label">.halftone-sm (4px)</span></div>
35
+ <div class="texture-card halftone-md"><span class="texture-label">.halftone-md (6px)</span></div>
36
+ <div class="texture-card halftone-lg"><span class="texture-label">.halftone-lg (10px)</span></div>
37
+ <div class="texture-card halftone-accent"><span class="texture-label">.halftone-accent</span></div>
38
+ </div>
39
+ </section>
40
+
41
+ <section>
42
+ <h2>Dot Matrix</h2>
43
+ <div class="texture-grid">
44
+ <div class="texture-card dot-matrix-dense"><span class="texture-label">.dot-matrix-dense</span></div>
45
+ <div class="texture-card dot-matrix"><span class="texture-label">.dot-matrix</span></div>
46
+ <div class="texture-card dot-matrix-sparse"><span class="texture-label">.dot-matrix-sparse</span></div>
47
+ </div>
48
+ </section>
49
+
50
+ <section>
51
+ <h2>Stripes</h2>
52
+ <div class="texture-grid">
53
+ <div class="texture-card diagonal-stripes"><span class="texture-label">.diagonal-stripes</span></div>
54
+ <div class="texture-card diagonal-stripes-dense"><span class="texture-label">.diagonal-stripes-dense</span></div>
55
+ <div class="texture-card diagonal-stripes-negative"><span class="texture-label">.diagonal-stripes-negative</span></div>
56
+ <div class="texture-card stripes-h"><span class="texture-label">.stripes-h</span></div>
57
+ <div class="texture-card stripes-h-dense"><span class="texture-label">.stripes-h-dense</span></div>
58
+ <div class="texture-card stripes-v"><span class="texture-label">.stripes-v</span></div>
59
+ <div class="texture-card stripes-v-dense"><span class="texture-label">.stripes-v-dense</span></div>
60
+ </div>
61
+ </section>
62
+
63
+ <section>
64
+ <h2>Crosshatch & Checkerboard</h2>
65
+ <div class="texture-grid">
66
+ <div class="texture-card crosshatch"><span class="texture-label">.crosshatch</span></div>
67
+ <div class="texture-card crosshatch-dense"><span class="texture-label">.crosshatch-dense</span></div>
68
+ <div class="texture-card checkerboard"><span class="texture-label">.checkerboard</span></div>
69
+ <div class="texture-card checkerboard-onebit"><span class="texture-label">.checkerboard-onebit</span></div>
70
+ </div>
71
+ </section>
72
+
73
+ <section>
74
+ <h2>Noise & Vignette</h2>
75
+ <div class="texture-grid">
76
+ <div class="texture-card noise"><span class="texture-label">.noise</span></div>
77
+ <div class="texture-card noise-heavy"><span class="texture-label">.noise-heavy</span></div>
78
+ <div class="texture-card vignette-onebit"><span class="texture-label">.vignette-onebit</span></div>
79
+ <div class="texture-card vignette-onebit-sharp"><span class="texture-label">.vignette-onebit-sharp</span></div>
80
+ </div>
81
+ </section>
82
+
83
+ <section>
84
+ <h2>Separators</h2>
85
+ <div class="texture-grid" style="grid-template-columns:1fr;gap:8px">
86
+ <div class="separator-onebit" style="margin:8px 0"></div><span class="mono-label">.separator-onebit</span>
87
+ <div class="separator-onebit-thick" style="margin:8px 0"></div><span class="mono-label">.separator-onebit-thick</span>
88
+ <div class="separator-onebit-dashed" style="margin:8px 0"></div><span class="mono-label">.separator-onebit-dashed</span>
89
+ <div class="separator-onebit-dotted" style="margin:8px 0"></div><span class="mono-label">.separator-onebit-dotted</span>
90
+ </div>
91
+ </section>
92
+
93
+ <section>
94
+ <h2>Section Composition</h2>
95
+ <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>
96
+ <div class="separator-onebit" style="margin:8px 0"></div>
97
+ <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>
98
+ <div class="separator-onebit" style="margin:8px 0"></div>
99
+ <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>
100
+ </section>
101
+ </body>
102
+ </html>
package/dist/preview/textures-backgrounds.html.artifact.json ADDED
@@ -0,0 +1,19 @@
1
+ {
2
+ "version": 1,
3
+ "kind": "html",
4
+ "title": "preview/textures-backgrounds.html",
5
+ "entry": "preview/textures-backgrounds.html",
6
+ "renderer": "html",
7
+ "status": "complete",
8
+ "exports": [
9
+ "html",
10
+ "pdf",
11
+ "zip"
12
+ ],
13
+ "createdAt": "2026-06-01T20:20:20.120Z",
14
+ "updatedAt": "2026-06-01T20:20:20.120Z",
15
+ "metadata": {
16
+ "inferred": true,
17
+ "reconciled": true
18
+ }
19
+ }
package/dist/preview/typography-specimens.html ADDED
@@ -0,0 +1,73 @@
1
+ <!doctype html>
2
+ <html lang="en" data-theme="dark">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Typography · 7k-design-system</title>
7
+ <link rel="stylesheet" href="../colors_and_type.css">
8
+ <style>
9
+ body { padding: 32px; background: var(--bg-base); color: var(--text-primary); }
10
+ h1 { margin-bottom: 8px; }
11
+ .mono-label { margin-bottom: 32px; display: block; }
12
+ section { margin-bottom: 48px; }
13
+ h2 { margin-bottom: 16px; font-size: var(--text-h3); }
14
+ .specimen { border-bottom: 1px solid var(--border-subtle); padding: 16px 0; }
15
+ .specimen:last-child { border-bottom: none; }
16
+ .specimen .token { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); margin-bottom: 4px; }
17
+ .specimen .notes { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
18
+ .pixel-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
19
+ .pixel-card { padding: 16px; border: 2px solid #FFFFFF; text-align: center; min-width: 120px; }
20
+ .pixel-card .label { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); margin-top: 8px; }
21
+ </style>
22
+ </head>
23
+ <body>
24
+ <h1>Typography Specimens</h1>
25
+ <span class="mono-label">7k-design-system · Geist + Geist Mono + Geist Pixel</span>
26
+
27
+ <section>
28
+ <h2>Geist Sans — Display & Body</h2>
29
+ <div class="specimen"><div class="token">--text-display · Geist 900 · -0.04em</div><div class="display">Display 7K</div><div class="notes">clamp(48px, 8vw, 160px)</div></div>
30
+ <div class="specimen"><div class="token">--text-h1 · Geist 700 · -0.04em · 4rem</div><div class="h1">Heading One</div></div>
31
+ <div class="specimen"><div class="token">--text-h2 · Geist 700 · -0.03em · 3rem</div><div class="h2">Heading Two</div></div>
32
+ <div class="specimen"><div class="token">--text-h3 · Geist 600 · -0.02em · 2rem</div><div class="h3">Heading Three</div></div>
33
+ <div class="specimen"><div class="token">--text-h4 · Geist 600 · -0.02em · 1.5rem</div><div class="h4">Heading Four</div></div>
34
+ <div class="specimen"><div class="token">--text-body-lg · Geist 400 · -0.01em · 1.125rem</div><div class="body-lg">Large body text for lede paragraphs and introductions. Built for midnight.</div></div>
35
+ <div class="specimen"><div class="token">--text-body · Geist 400 · -0.01em · 1rem</div><div class="body">Body text at default size. The quick brown fox jumps over the lazy dog. Tokyo neon atmosphere meets manga-influenced 1-bit design.</div></div>
36
+ <div class="specimen"><div class="token">--text-body-sm · Geist 400 · 0.875rem</div><div class="body-sm">Small body text for secondary content and supporting copy.</div></div>
37
+ <div class="specimen"><div class="token">--text-caption · Geist 500 · 0.75rem</div><div class="caption">Caption text for metadata and timestamps</div></div>
38
+ </section>
39
+
40
+ <section>
41
+ <h2>Geist Mono — "Connective Tissue"</h2>
42
+ <div class="specimen"><div class="token">--text-mono-label · Geist Mono 500 · 0.12em uppercase · 11px</div><div class="mono-label">SYSTEM INTEGRITY CHECK · ONLINE · 94.2% UPTIME</div></div>
43
+ <div class="specimen"><div class="token">--text-mono-body · Geist Mono 400 · 13px</div><div class="mono-body">const design = new System({ brand: '#FF0FF', theme: 'dark' });<br>console.log(design.accent); // magenta</div></div>
44
+ <div class="specimen"><div class="token">tabular-nums · mono numerics</div><div class="stat-value" style="margin-top:8px">1,024 · 98.7% · $47,291</div></div>
45
+ </section>
46
+
47
+ <section>
48
+ <h2>Geist Pixel — 5 Geometric Variants</h2>
49
+ <div class="pixel-row">
50
+ <div class="pixel-card"><div class="pixel-square" style="font-size:24px">Square 400</div><div class="label">7K parent · magenta</div></div>
51
+ <div class="pixel-card"><div class="pixel-circle" style="font-size:24px">Circle 500</div><div class="label">Circle · cyan</div></div>
52
+ <div class="pixel-card"><div class="pixel-grid" style="font-size:24px">Grid 600</div><div class="label">Grid · acid</div></div>
53
+ <div class="pixel-card"><div class="pixel-line" style="font-size:24px">Line 700</div><div class="label">Line · ember</div></div>
54
+ <div class="pixel-card"><div class="pixel-triangle" style="font-size:24px">Tri 800</div><div class="label">Triangle · solar</div></div>
55
+ </div>
56
+ </section>
57
+
58
+ <section>
59
+ <h2>Weight Scale</h2>
60
+ <div style="display:flex;gap:16px;flex-wrap:wrap">
61
+ <span style="font-weight:100">100 Thin</span>
62
+ <span style="font-weight:200">200 XL</span>
63
+ <span style="font-weight:300">300 Light</span>
64
+ <span style="font-weight:400">400 Reg</span>
65
+ <span style="font-weight:500">500 Med</span>
66
+ <span style="font-weight:600">600 Semi</span>
67
+ <span style="font-weight:700">700 Bold</span>
68
+ <span style="font-weight:800">800 XBold</span>
69
+ <span style="font-weight:900">900 Black</span>
70
+ </div>
71
+ </section>
72
+ </body>
73
+ </html>
package/dist/preview/typography-specimens.html.artifact.json ADDED
@@ -0,0 +1,19 @@
1
+ {
2
+ "version": 1,
3
+ "kind": "html",
4
+ "title": "preview/typography-specimens.html",
5
+ "entry": "preview/typography-specimens.html",
6
+ "renderer": "html",
7
+ "status": "complete",
8
+ "exports": [
9
+ "html",
10
+ "pdf",
11
+ "zip"
12
+ ],
13
+ "createdAt": "2026-06-01T20:20:14.735Z",
14
+ "updatedAt": "2026-06-01T20:20:14.735Z",
15
+ "metadata": {
16
+ "inferred": true,
17
+ "reconciled": true
18
+ }
19
+ }
package/dist/react/index.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),a=require("react"),f=a.forwardRef(({children:t,variant:r="primary",size:o="md",disabled:e=!1,onClick:s,type:i="button",className:d="",style:l,...n},u)=>{const m=o==="sm"?"btn-modern-sm":o==="lg"?"btn-modern-lg":"",p=["btn-modern",`btn-modern-${r}`,m,d].filter(Boolean).join(" ");return c.jsx("button",{ref:u,type:i,className:p,style:l,disabled:e,onClick:s,...n,children:t})});f.displayName="Button";const g=a.forwardRef(({type:t="text",placeholder:r,disabled:o=!1,value:e,onChange:s,className:i="",style:d,...l},n)=>{const u=["input",i].filter(Boolean).join(" ");return c.jsx("input",{ref:n,type:t,className:u,style:d,placeholder:r,disabled:o,value:e,onChange:m=>s==null?void 0:s(m.target.value),...l})});g.displayName="Input";const b=a.forwardRef(({children:t,variant:r="default",className:o="",style:e,...s},i)=>{const l=["badge",r==="default"?"":`badge-${r}`,o].filter(Boolean).join(" ");return c.jsx("span",{ref:i,className:l,style:e,...s,children:t})});b.displayName="Badge";const h=a.createContext(void 0);function T(){const t=a.useContext(h);if(!t)throw new Error("useTheme must be used within a ThemeProvider");return t}function w({className:t=""}){const{theme:r,toggleTheme:o}=T(),e=r==="dark";return c.jsx("button",{onClick:o,className:`btn-modern btn-modern-ghost btn-modern-icon ${t}`,style:{width:32,height:32,fontSize:12,padding:0,border:"1px solid var(--border-default)",borderRadius:0},title:e?"Switch to light theme":"Switch to dark theme","aria-label":e?"Switch to light theme":"Switch to dark theme",children:e?"☀":"☾"})}const x="7k-theme";function k({children:t,defaultTheme:r="dark",storageKey:o=x}){const[e,s]=a.useState(()=>{if(typeof window>"u")return r;const n=localStorage.getItem(o);return n==="light"||n==="dark"?n:r});a.useEffect(()=>{document.documentElement.setAttribute("data-theme",e),localStorage.setItem(o,e)},[e,o]);const i=a.useCallback(()=>{s(n=>n==="dark"?"light":"dark")},[]),d=a.useCallback(n=>{s(n)},[]),l={theme:e,toggleTheme:i,setTheme:d};return c.jsx(h.Provider,{value:l,children:t})}exports.Badge=b;exports.Button=f;exports.Input=g;exports.ThemeContext=h;exports.ThemeProvider=k;exports.ThemeToggle=w;exports.useTheme=T;