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/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>