zark-design 1.0.0
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.
- package/README.md +60 -0
- package/bin/cli.js +177 -0
- package/package.json +31 -0
- package/templates/REFERENCE.md +376 -0
- package/templates/SHOWCASE.html +254 -0
- package/templates/assets/zark-icon.png +0 -0
- package/templates/assets/zark-logo.png +0 -0
- package/templates/brand.jsx +89 -0
- package/templates/components.jsx +385 -0
- package/templates/design-canvas.jsx +789 -0
- package/templates/foundations.jsx +363 -0
- package/templates/icons.jsx +65 -0
- package/templates/layouts.jsx +232 -0
- package/templates/patterns.jsx +268 -0
- package/templates/primitives.jsx +306 -0
- package/templates/tokens.css +306 -0
- package/templates/visual-references/icon-zark.png +0 -0
- package/templates/visual-references/logo-zark-principal.png +0 -0
- package/templates/visual-references/pasted-1777605750385-0.png +0 -0
- package/templates/visual-references/pasted-1777605766298-0.png +0 -0
- package/templates/visual-references/pasted-1777605775820-0.png +0 -0
- package/templates/visual-references/pasted-1777605789833-0.png +0 -0
- package/templates/visual-references/pasted-1777605802420-0.png +0 -0
- package/templates/visual-references/pasted-1777605812470-0.png +0 -0
- package/templates/visual-references/pasted-1777605817688-0.png +0 -0
- package/templates/visual-references/pasted-1777605828485-0.png +0 -0
- package/templates/visual-references/pasted-1777605837137-0.png +0 -0
- package/templates/visual-references/pasted-1777605849789-0.png +0 -0
- package/templates/visual-references/pasted-1777605864942-0.png +0 -0
- package/templates/visual-references/pasted-1777605877920-0.png +0 -0
- package/templates/visual-references/pasted-1777605897353-0.png +0 -0
|
@@ -0,0 +1,254 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8"/>
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
6
|
+
<title>Zark — Design System</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Darker+Grotesque:wght@500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
|
|
10
|
+
<link rel="stylesheet" href="tokens.css"/>
|
|
11
|
+
<style>
|
|
12
|
+
@keyframes zark-spin { to { transform: rotate(360deg); } }
|
|
13
|
+
|
|
14
|
+
/* sticky side nav */
|
|
15
|
+
.zark-sidenav {
|
|
16
|
+
position: fixed;
|
|
17
|
+
top: 50%;
|
|
18
|
+
transform: translateY(-50%);
|
|
19
|
+
left: 24px;
|
|
20
|
+
z-index: 50;
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
gap: 4px;
|
|
24
|
+
padding: 10px 8px;
|
|
25
|
+
background: rgba(255,255,255,0.85);
|
|
26
|
+
border: 1px solid var(--line-200);
|
|
27
|
+
border-radius: var(--r-pill);
|
|
28
|
+
backdrop-filter: blur(8px);
|
|
29
|
+
box-shadow: var(--shadow-md);
|
|
30
|
+
}
|
|
31
|
+
.zark-sidenav a {
|
|
32
|
+
width: 32px;
|
|
33
|
+
height: 32px;
|
|
34
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
35
|
+
border-radius: 50%;
|
|
36
|
+
color: var(--ink-400);
|
|
37
|
+
font-size: 11px;
|
|
38
|
+
font-family: var(--font-mono);
|
|
39
|
+
text-decoration: none;
|
|
40
|
+
transition: all var(--t-fast);
|
|
41
|
+
}
|
|
42
|
+
.zark-sidenav a:hover { background: var(--ink-50); color: var(--ink-700); }
|
|
43
|
+
|
|
44
|
+
html { scroll-behavior: smooth; }
|
|
45
|
+
</style>
|
|
46
|
+
</head>
|
|
47
|
+
<body>
|
|
48
|
+
<div id="root"></div>
|
|
49
|
+
|
|
50
|
+
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
51
|
+
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
52
|
+
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
53
|
+
|
|
54
|
+
<script type="text/babel" src="icons.jsx"></script>
|
|
55
|
+
<script type="text/babel" src="brand.jsx"></script>
|
|
56
|
+
<script type="text/babel" src="primitives.jsx"></script>
|
|
57
|
+
<script type="text/babel" src="foundations.jsx"></script>
|
|
58
|
+
<script type="text/babel" src="components.jsx"></script>
|
|
59
|
+
<script type="text/babel" src="patterns.jsx"></script>
|
|
60
|
+
<script type="text/babel" src="layouts.jsx"></script>
|
|
61
|
+
|
|
62
|
+
<script type="text/babel">
|
|
63
|
+
const { useState, useEffect } = React;
|
|
64
|
+
|
|
65
|
+
// ---------- HERO ----------
|
|
66
|
+
const Hero = () => (
|
|
67
|
+
<header style={{
|
|
68
|
+
position: 'relative',
|
|
69
|
+
padding: '96px 64px 80px',
|
|
70
|
+
background: 'var(--paper)',
|
|
71
|
+
borderBottom: '1px solid var(--line-200)',
|
|
72
|
+
overflow: 'hidden',
|
|
73
|
+
}}>
|
|
74
|
+
<div style={{
|
|
75
|
+
position:'absolute', inset:0, opacity: 0.55, pointerEvents:'none',
|
|
76
|
+
display:'flex', justifyContent:'space-between', padding: 32,
|
|
77
|
+
}}>
|
|
78
|
+
<AsciiBackdrop width={48} height={32} density={0.16} seed={5}/>
|
|
79
|
+
<AsciiBackdrop width={48} height={32} density={0.16} seed={42}/>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<div style={{ position:'relative', maxWidth: 1200, margin:'0 auto' }}>
|
|
83
|
+
<div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 80 }}>
|
|
84
|
+
<ZarkLogo size={42}/>
|
|
85
|
+
<div style={{ display:'flex', gap: 6, alignItems:'center', fontSize: 12, fontFamily:'var(--font-mono)', color:'var(--ink-400)' }}>
|
|
86
|
+
<span style={{ color: 'var(--ember-600)' }}>v1.1.0 · saas</span>
|
|
87
|
+
<span>·</span>
|
|
88
|
+
<span>liquid lava palette</span>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<div style={{ maxWidth: 920 }}>
|
|
93
|
+
<div style={{
|
|
94
|
+
fontFamily:'var(--font-mono)', fontSize: 12,
|
|
95
|
+
letterSpacing:'var(--ls-widest)', textTransform:'uppercase',
|
|
96
|
+
color:'var(--ember-600)', marginBottom: 20,
|
|
97
|
+
}}>
|
|
98
|
+
ZARK · SaaS Design System · #F56F10
|
|
99
|
+
</div>
|
|
100
|
+
<h1 style={{
|
|
101
|
+
margin: 0,
|
|
102
|
+
fontFamily:'var(--font-display)',
|
|
103
|
+
fontSize: 88, fontWeight: 700,
|
|
104
|
+
letterSpacing:'-0.028em', lineHeight: 0.98,
|
|
105
|
+
color:'var(--ink-700)',
|
|
106
|
+
}}>
|
|
107
|
+
A warm, technical<br/>
|
|
108
|
+
system for tools that<br/>
|
|
109
|
+
turn the web into <span style={{ color:'var(--ember-500)' }}>data</span>.
|
|
110
|
+
</h1>
|
|
111
|
+
<p style={{
|
|
112
|
+
margin:'32px 0 0', maxWidth: 640,
|
|
113
|
+
fontSize: 18, lineHeight: 1.55, color:'var(--ink-400)',
|
|
114
|
+
}}>
|
|
115
|
+
Tokens, primitives, components, patterns and full layouts — fully mapped from foundations
|
|
116
|
+
to composed surfaces. Inspired by the ember-on-paper aesthetic of modern developer tools,
|
|
117
|
+
but original in execution and made to scale.
|
|
118
|
+
</p>
|
|
119
|
+
|
|
120
|
+
<div style={{ marginTop: 44, display:'flex', gap: 28, flexWrap:'wrap' }}>
|
|
121
|
+
{[
|
|
122
|
+
['10', 'Color steps × 2 ramps'],
|
|
123
|
+
['11', 'Type sizes'],
|
|
124
|
+
['17', 'Spacing tokens'],
|
|
125
|
+
['36', 'Icons'],
|
|
126
|
+
['7', 'Component groups'],
|
|
127
|
+
['3', 'Composed layouts'],
|
|
128
|
+
].map(([n, l]) => (
|
|
129
|
+
<div key={l}>
|
|
130
|
+
<div style={{ fontFamily:'var(--font-display)', fontSize: 36, fontWeight: 600, color:'var(--ink-700)', letterSpacing:'-0.018em', lineHeight: 1 }}>{n}</div>
|
|
131
|
+
<div style={{ fontSize: 11, color:'var(--ink-400)', marginTop: 6, fontFamily:'var(--font-mono)', letterSpacing:'var(--ls-wide)', textTransform:'uppercase' }}>{l}</div>
|
|
132
|
+
</div>
|
|
133
|
+
))}
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
</header>
|
|
138
|
+
);
|
|
139
|
+
|
|
140
|
+
// ---------- COMPONENTS SECTION (composes individual showcases) ----------
|
|
141
|
+
const ComponentsSection = () => (
|
|
142
|
+
<Section
|
|
143
|
+
id="components"
|
|
144
|
+
eyebrow="05 — Components"
|
|
145
|
+
title="Composable parts, opinionated defaults"
|
|
146
|
+
description="Every component is a frozen contract. Sizes, paddings, and corner radii are picked from the token scale; states (hover, active, disabled, loading) are encoded in the component itself rather than left to consumers. Five button variants, three input sizes, segmented controls instead of radios, pill tags for status and square mono tags for data labels."
|
|
147
|
+
>
|
|
148
|
+
<ButtonsShowcase/>
|
|
149
|
+
<InputsShowcase/>
|
|
150
|
+
<TagsShowcase/>
|
|
151
|
+
<CardsShowcase/>
|
|
152
|
+
<NavShowcase/>
|
|
153
|
+
</Section>
|
|
154
|
+
);
|
|
155
|
+
|
|
156
|
+
// ---------- SIDE NAV ----------
|
|
157
|
+
const SideNav = () => (
|
|
158
|
+
<nav className="zark-sidenav">
|
|
159
|
+
{[
|
|
160
|
+
['#colors', '01'],
|
|
161
|
+
['#type', '02'],
|
|
162
|
+
['#space', '03'],
|
|
163
|
+
['#icons', '04'],
|
|
164
|
+
['#components', '05'],
|
|
165
|
+
['#patterns', '06'],
|
|
166
|
+
['#layouts', '07'],
|
|
167
|
+
].map(([href, n]) => <a key={href} href={href}>{n}</a>)}
|
|
168
|
+
</nav>
|
|
169
|
+
);
|
|
170
|
+
|
|
171
|
+
// ---------- TOC overview ----------
|
|
172
|
+
const TableOfContents = () => (
|
|
173
|
+
<section style={{ background:'var(--canvas)', borderTop:'1px solid var(--line-200)', borderBottom:'1px solid var(--line-200)', padding:'32px 64px' }}>
|
|
174
|
+
<div style={{ maxWidth: 1200, margin:'0 auto', display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap: 0 }}>
|
|
175
|
+
{[
|
|
176
|
+
['01','Colors','10 ember + 10 ink + 4 semantic'],
|
|
177
|
+
['02','Type','Inter Tight · Inter · JetBrains'],
|
|
178
|
+
['03','Space','4px atom, 17 stops'],
|
|
179
|
+
['04','Icons','36 outline glyphs'],
|
|
180
|
+
['05','Components','30+ primitives'],
|
|
181
|
+
['06','Patterns','Modal, code, table, picker'],
|
|
182
|
+
['07','Layouts','Dashboard, playground, hero'],
|
|
183
|
+
].map(([n, t, d], i) => (
|
|
184
|
+
<a key={n} href={`#${['colors','type','space','icons','components','patterns','layouts'][i]}`}
|
|
185
|
+
style={{
|
|
186
|
+
padding:'16px 12px',
|
|
187
|
+
borderRight: i < 6 ? '1px solid var(--line-200)' : 'none',
|
|
188
|
+
textDecoration:'none', color:'inherit',
|
|
189
|
+
display:'flex', flexDirection:'column', gap: 4,
|
|
190
|
+
transition:'background var(--t-fast)',
|
|
191
|
+
}}
|
|
192
|
+
onMouseEnter={e=>e.currentTarget.style.background='rgba(255,255,255,0.6)'}
|
|
193
|
+
onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
|
|
194
|
+
<div style={{ fontFamily:'var(--font-mono)', fontSize: 10, color:'var(--ember-600)', letterSpacing:'var(--ls-wide)' }}>{n}</div>
|
|
195
|
+
<div style={{ fontSize: 14, fontWeight: 600, color:'var(--ink-700)' }}>{t}</div>
|
|
196
|
+
<div style={{ fontSize: 11, color:'var(--ink-400)' }}>{d}</div>
|
|
197
|
+
</a>
|
|
198
|
+
))}
|
|
199
|
+
</div>
|
|
200
|
+
</section>
|
|
201
|
+
);
|
|
202
|
+
|
|
203
|
+
// ---------- FOOTER ----------
|
|
204
|
+
const SiteFooter = () => (
|
|
205
|
+
<footer style={{
|
|
206
|
+
background:'var(--ink-800)', color:'#fff',
|
|
207
|
+
padding:'48px 64px 32px',
|
|
208
|
+
marginTop: 0,
|
|
209
|
+
}}>
|
|
210
|
+
<div style={{ maxWidth: 1200, margin:'0 auto' }}>
|
|
211
|
+
<div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 32 }}>
|
|
212
|
+
<div>
|
|
213
|
+
<div style={{ display:'flex', alignItems:'center', gap: 14, marginBottom: 12 }}>
|
|
214
|
+
<img src="assets/zark-icon.png" alt="ZARK" style={{ height: 44, width: 44, objectFit:'contain', filter:'brightness(0) invert(1)' }}/>
|
|
215
|
+
<span style={{ fontFamily:'var(--font-display)', fontSize: 44, fontWeight: 800, letterSpacing:'-0.02em' }}>ZARK</span>
|
|
216
|
+
</div>
|
|
217
|
+
<div style={{ fontSize: 13, color:'rgba(255,255,255,0.55)', maxWidth: 380, lineHeight: 1.5 }}>
|
|
218
|
+
SaaS Design System · v1.1.0 · Liquid lava palette · Built for technical product surfaces.
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
<div style={{ fontSize: 12, fontFamily:'var(--font-mono)', color:'rgba(255,255,255,0.45)', textAlign:'right', letterSpacing:'var(--ls-wide)' }}>
|
|
222
|
+
ZARK / DS / 2026<br/>
|
|
223
|
+
MAINTAINED BY THE PLATFORM TEAM
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
<div style={{ borderTop:'1px solid rgba(255,255,255,0.08)', paddingTop: 20, display:'flex', justifyContent:'space-between', fontSize: 11, color:'rgba(255,255,255,0.4)', fontFamily:'var(--font-mono)' }}>
|
|
227
|
+
<span>tokens.css · 7 component files · 1 main</span>
|
|
228
|
+
<span>last updated may 1, 2026</span>
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
</footer>
|
|
232
|
+
);
|
|
233
|
+
|
|
234
|
+
// ---------- APP ----------
|
|
235
|
+
const App = () => (
|
|
236
|
+
<div data-screen-label="Zark Design System" style={{ background:'var(--paper)' }}>
|
|
237
|
+
<SideNav/>
|
|
238
|
+
<Hero/>
|
|
239
|
+
<TableOfContents/>
|
|
240
|
+
<ColorsSection/>
|
|
241
|
+
<TypographySection/>
|
|
242
|
+
<SpacingSection/>
|
|
243
|
+
<IconsSection/>
|
|
244
|
+
<ComponentsSection/>
|
|
245
|
+
<PatternsSection/>
|
|
246
|
+
<LayoutsSection/>
|
|
247
|
+
<SiteFooter/>
|
|
248
|
+
</div>
|
|
249
|
+
);
|
|
250
|
+
|
|
251
|
+
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
|
|
252
|
+
</script>
|
|
253
|
+
</body>
|
|
254
|
+
</html>
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
// Zark — Brand mark + ASCII bg helpers
|
|
2
|
+
|
|
3
|
+
// Zark — Brand mark using OFFICIAL Zark logos
|
|
4
|
+
|
|
5
|
+
const ZarkLogo = ({ size = 28, withWord = true, variant = 'full' }) => {
|
|
6
|
+
// variant: 'full' = wordmark png, 'icon' = icon png
|
|
7
|
+
if (variant === 'full' && withWord) {
|
|
8
|
+
return (
|
|
9
|
+
<img src="assets/zark-logo.png" alt="ZARK"
|
|
10
|
+
style={{ height: size, width: 'auto', display:'block' }}/>
|
|
11
|
+
);
|
|
12
|
+
}
|
|
13
|
+
return (
|
|
14
|
+
<span style={{ display:'inline-flex', alignItems:'center', gap: 8 }}>
|
|
15
|
+
<img src="assets/zark-icon.png" alt="ZARK" style={{ height: size, width: size, objectFit:'contain' }}/>
|
|
16
|
+
{withWord && (
|
|
17
|
+
<span style={{
|
|
18
|
+
fontFamily:'var(--font-display)',
|
|
19
|
+
fontSize: Math.round(size * 0.95),
|
|
20
|
+
fontWeight: 800,
|
|
21
|
+
letterSpacing: '-0.02em',
|
|
22
|
+
color:'var(--ink-700)',
|
|
23
|
+
lineHeight: 1,
|
|
24
|
+
}}>ZARK</span>
|
|
25
|
+
)}
|
|
26
|
+
</span>
|
|
27
|
+
);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
// Ascii bg — generates a subtle dotted/charlike background reminiscent of the source
|
|
31
|
+
function asciiField(w, h, density = 0.18, seed = 1) {
|
|
32
|
+
const chars = ['·','.','˙',':','*','·','·','.',' ',' '];
|
|
33
|
+
const lines = [];
|
|
34
|
+
let r = seed;
|
|
35
|
+
const rand = () => (r = (r * 9301 + 49297) % 233280) / 233280;
|
|
36
|
+
for (let y = 0; y < h; y++) {
|
|
37
|
+
let line = '';
|
|
38
|
+
for (let x = 0; x < w; x++) {
|
|
39
|
+
line += rand() < density ? chars[Math.floor(rand() * chars.length)] : ' ';
|
|
40
|
+
}
|
|
41
|
+
lines.push(line);
|
|
42
|
+
}
|
|
43
|
+
return lines.join('\n');
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
const AsciiBackdrop = ({ width = 90, height = 24, color = 'var(--ink-200)', opacity = 0.55, density = 0.22, seed = 7, style }) => (
|
|
47
|
+
<pre style={{
|
|
48
|
+
margin: 0,
|
|
49
|
+
fontFamily: 'var(--font-mono)',
|
|
50
|
+
fontSize: 10,
|
|
51
|
+
lineHeight: 1.05,
|
|
52
|
+
color,
|
|
53
|
+
opacity,
|
|
54
|
+
whiteSpace:'pre',
|
|
55
|
+
pointerEvents:'none',
|
|
56
|
+
userSelect:'none',
|
|
57
|
+
...style,
|
|
58
|
+
}}>{asciiField(width, height, density, seed)}</pre>
|
|
59
|
+
);
|
|
60
|
+
|
|
61
|
+
// Bell-curve ASCII chart (matches the dotted gaussian in screenshots)
|
|
62
|
+
const AsciiCurve = ({ width = 70, height = 14, peak = 1, color = 'var(--ember-400)' }) => {
|
|
63
|
+
const lines = [];
|
|
64
|
+
const cx = width / 2;
|
|
65
|
+
const sigma = width / 8;
|
|
66
|
+
for (let y = 0; y < height; y++) {
|
|
67
|
+
let line = '';
|
|
68
|
+
for (let x = 0; x < width; x++) {
|
|
69
|
+
const v = Math.exp(-Math.pow((x - cx) / sigma, 2)) * (height - 1);
|
|
70
|
+
const dist = Math.abs((height - 1 - y) - v);
|
|
71
|
+
if (dist < 0.4) line += '█';
|
|
72
|
+
else if (dist < 0.9) line += '▓';
|
|
73
|
+
else if (dist < 1.6) line += '▒';
|
|
74
|
+
else if (dist < 2.6) line += '░';
|
|
75
|
+
else line += ' ';
|
|
76
|
+
}
|
|
77
|
+
lines.push(line);
|
|
78
|
+
}
|
|
79
|
+
return (
|
|
80
|
+
<pre style={{
|
|
81
|
+
margin:0, fontFamily:'var(--font-mono)', fontSize: 9, lineHeight: 1.0,
|
|
82
|
+
color, whiteSpace:'pre',
|
|
83
|
+
}}>{lines.join('\n')}</pre>
|
|
84
|
+
);
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
window.ZarkLogo = ZarkLogo;
|
|
88
|
+
window.AsciiBackdrop = AsciiBackdrop;
|
|
89
|
+
window.AsciiCurve = AsciiCurve;
|