-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
371 lines (344 loc) · 20.4 KB
/
Copy pathindex.html
File metadata and controls
371 lines (344 loc) · 20.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DX Tools Design System</title>
<meta name="description" content="UC San Diego campus brand applied for DX team internal tools. Dark-first, WCAG AAA, tactile controls.">
<!-- FOUC prevention: apply stored theme before first paint -->
<script>const t=localStorage.getItem('dx-theme');document.documentElement.setAttribute('data-theme',t||'light');</script>
<!-- Fonts -->
<link rel="stylesheet" href="css/fonts.css">
<!-- Design System -->
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/frame.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/preview.css">
<link rel="stylesheet" href="css/code.css">
<style>
/* Landing page extras */
.hero {
padding: var(--space-16) var(--space-10) var(--space-12);
border-bottom: 1px solid var(--color-border);
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
height: 26px;
padding: 0 var(--space-3);
background-color: var(--color-accent-muted);
border: 1px solid var(--color-accent-strong);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-5);
}
.hero-title {
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
color: var(--color-text);
margin-bottom: var(--space-4);
letter-spacing: -0.02em;
}
.hero-title span { color: var(--color-accent); }
.hero-desc {
font-size: var(--text-lg);
color: var(--color-text-muted);
max-width: 55ch;
line-height: var(--leading-normal);
margin-bottom: var(--space-8);
}
.hero-actions {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
}
/* Nav card grid */
.nav-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--space-4);
}
.nav-card {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-5) var(--space-6);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
text-decoration: none;
color: inherit;
transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.nav-card:hover {
border-color: var(--color-accent);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.nav-card__icon {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background-color: var(--color-accent-muted);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
flex-shrink: 0;
}
.nav-card__title {
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.nav-card__desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: var(--leading-snug);
}
</style>
</head>
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<div class="dx-doc-layout">
<!-- Header -->
<header class="dx-header" role="banner">
<a href="index.html" class="dx-header__brand" aria-label="DX Tools Design System home">
<span class="dx-header__mark" aria-hidden="true">DX</span>
<span class="dx-header__wordmark">DX Tools</span>
<span class="dx-header__divider" aria-hidden="true"></span>
<span class="dx-header__subtitle">Design System</span>
</a>
<nav class="dx-header__nav" aria-label="Design system sections">
<a href="docs/colors.html" class="dx-header__nav-link">Colors</a>
<a href="docs/typography.html" class="dx-header__nav-link">Typography</a>
<a href="docs/components.html" class="dx-header__nav-link">Components</a>
<a href="docs/forms.html" class="dx-header__nav-link">Forms</a>
<a href="docs/dashboard.html" class="dx-header__nav-link">Dashboard</a>
<a href="docs/frame-preview.html" class="dx-header__nav-link">Frame & Preview</a>
<a href="docs/layouts.html" class="dx-header__nav-link">Layouts</a>
<a href="docs/accessibility.html" class="dx-header__nav-link">Accessibility</a>
</nav>
<div class="dx-header__actions">
<button class="btn btn--ghost btn--icon" data-theme-toggle aria-label="Switch to light mode" aria-pressed="false">
<svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
<svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" hidden><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
</button>
<button class="btn btn--ghost btn--icon dx-nav-toggle" id="dx-nav-toggle" aria-expanded="false" aria-controls="dx-mobile-nav" aria-label="Open navigation menu">
<svg class="icon-menu" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
<svg class="icon-close" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" hidden><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<nav class="dx-mobile-nav" id="dx-mobile-nav" aria-label="Design system sections" hidden>
<a href="docs/colors.html" class="dx-mobile-nav__link">Colors</a>
<a href="docs/typography.html" class="dx-mobile-nav__link">Typography</a>
<a href="docs/components.html" class="dx-mobile-nav__link">Components</a>
<a href="docs/forms.html" class="dx-mobile-nav__link">Forms</a>
<a href="docs/dashboard.html" class="dx-mobile-nav__link">Dashboard</a>
<a href="docs/frame-preview.html" class="dx-mobile-nav__link">Frame & Preview</a>
<a href="docs/layouts.html" class="dx-mobile-nav__link">Layouts</a>
<a href="docs/accessibility.html" class="dx-mobile-nav__link">Accessibility</a>
</nav>
</header>
<!-- Body -->
<div class="dx-doc-body">
<!-- Sidebar -->
<nav class="dx-sidebar" aria-label="Page navigation">
<div class="dx-sidebar-section">
<span class="dx-sidebar-label">On this page</span>
<ul class="dx-sidebar-nav">
<li><a href="#intro">Introduction</a></li>
<li><a href="#quickstart">Quick start</a></li>
<li><a href="#docs">Documentation</a></li>
</ul>
</div>
</nav>
<!-- Main content -->
<main id="main" class="dx-main">
<!-- Hero -->
<section class="hero" id="intro" aria-labelledby="hero-title">
<div class="hero-badge" aria-label="Version">
<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="5" fill="currentColor"/></svg>
UC San Diego · DX Team
</div>
<h1 class="hero-title" id="hero-title">
Built for the tools <span>we build.</span>
</h1>
<p class="hero-desc">
A design system for the internal tools we build for each other on the UC San Diego Library DX Team. Inspired by the <a href="https://brand.ucsd.edu/">campus brand</a>, and built for behind the scenes work.
</p>
<div class="hero-actions">
<a href="#quickstart" class="btn btn--primary btn--lg">Quick start</a>
<a href="docs/components.html" class="btn btn--ghost btn--lg">View components</a>
</div>
</section>
<!-- Quick start -->
<section class="dx-section" id="quickstart" aria-labelledby="qs-title">
<div class="dx-section-header">
<h2 id="qs-title">Quick start</h2>
<p>Three paths, depending on where you're starting from. All produce the same result: a working tool with this design system in place.</p>
</div>
<!-- Scenario cards -->
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-8);">
<div class="panel" style="border-color: var(--color-accent);">
<div class="panel__header">
<div class="panel__icon"><i data-lucide="sparkles" width="18" height="18" aria-hidden="true"></i></div>
<h3 class="panel__title" style="font-size: var(--text-base);">New tool</h3>
</div>
<div class="panel__body" style="font-size: var(--text-sm); color: var(--color-text-muted);">Starting from scratch. Use <code>starter/template.html</code> and this repo's CSS/JS directly.</div>
</div>
<div class="panel">
<div class="panel__header">
<div class="panel__icon" style="background-color: var(--color-surface-raised); color: var(--color-text-muted);"><i data-lucide="wrench" width="18" height="18" aria-hidden="true"></i></div>
<h3 class="panel__title" style="font-size: var(--text-base);">Existing tool</h3>
</div>
<div class="panel__body" style="font-size: var(--text-sm); color: var(--color-text-muted);">Retrofitting an existing project. Copy the <code>design-system/</code> files in and add the imports.</div>
</div>
<div class="panel">
<div class="panel__header">
<div class="panel__icon" style="background-color: var(--color-surface-raised); color: var(--color-text-muted);"><i data-lucide="bot" width="18" height="18" aria-hidden="true"></i></div>
<h3 class="panel__title" style="font-size: var(--text-base);">With Claude</h3>
</div>
<div class="panel__body" style="font-size: var(--text-sm); color: var(--color-text-muted);">Using Claude Code to build or update a tool. Drop <code>CLAUDE.md</code> in your project root first.</div>
</div>
</div>
<!-- New tool -->
<h3>New tool from scratch</h3>
<p>The fastest path is to build directly inside this repo. Clone it, copy <code>starter/template.html</code> as your starting point, and remove the <code>docs/</code> pages you don't need. Your tool's HTML files sit at the root alongside <code>css/</code>, <code>js/</code>, and <code>fonts/</code> — no path adjustments needed.</p>
<div class="code-block">
<div class="code-block__toolbar"><span class="code-block__lang">bash</span><button class="code-block__copy" aria-label="Copy code">Copy</button></div>
<pre><code># Clone dx-tools and start fresh
git clone https://github.com/your-org/dx-tools your-tool-name
cd your-tool-name
# Start from the minimal template
cp starter/template.html index.html
# Wire up git for your new project
rm -rf .git
git init
git add .
git commit -m "init: new tool from dx-tools starter"</code></pre>
</div>
<p style="margin-top: var(--space-4);">Alternatively, if you want to keep your tool in its own repo while sharing assets with other tools, use the <strong>sibling pattern</strong>: place your tool directory next to <code>dx-tools/</code> and reference CSS with <code>../dx-tools/css/tokens.css</code>. One copy of the fonts, shared by everything.</p>
<!-- Existing tool -->
<h3 style="margin-top: var(--space-8);">Retrofitting an existing tool</h3>
<p>Copy the design system files into a <code>design-system/</code> subdirectory in your existing project, then add the imports. This approach keeps the design system self-contained and easy to update by replacing those files.</p>
<div class="code-block">
<div class="code-block__toolbar"><span class="code-block__lang">bash</span><button class="code-block__copy" aria-label="Copy code">Copy</button></div>
<pre><code># From your existing project root
# Copy the core files from dx-tools
cp -r /path/to/dx-tools/css design-system/css
cp -r /path/to/dx-tools/js design-system/js
cp -r /path/to/dx-tools/fonts design-system/fonts</code></pre>
</div>
<p style="margin-top: var(--space-4);">Then add this to your page <code><head></code> — adjust the path prefix to match where you placed the files:</p>
<div class="code-block" style="margin-top: var(--space-2);">
<div class="code-block__toolbar"><span class="code-block__lang">html</span><button class="code-block__copy" aria-label="Copy code">Copy</button></div>
<pre><code><!-- FOUC prevention: must come first, before any stylesheet -->
<script>const t=localStorage.getItem('dx-theme');document.documentElement.setAttribute('data-theme',t||'light');</script>
<!-- Fonts and design system (adjust path prefix as needed) -->
<link rel="stylesheet" href="design-system/css/fonts.css">
<link rel="stylesheet" href="design-system/css/tokens.css">
<link rel="stylesheet" href="design-system/css/frame.css">
<link rel="stylesheet" href="design-system/css/components.css">
<link rel="stylesheet" href="design-system/css/preview.css">
<link rel="stylesheet" href="design-system/css/code.css">
<!-- Icons + theme toggle -->
<script src="design-system/js/lucide.min.js"></script>
<script src="design-system/js/theme.js" defer></script>
<script src="design-system/js/code-copy.js" defer></script></code></pre>
</div>
<p style="margin-top: var(--space-4);">Wrap your existing content in the frame layout shell to get the header, sidebar, and main area:</p>
<div class="code-block" style="margin-top: var(--space-2);">
<div class="code-block__toolbar"><span class="code-block__lang">html</span><button class="code-block__copy" aria-label="Copy code">Copy</button></div>
<pre><code><body>
<a href="#main" class="skip-link">Skip to main content</a>
<div class="dx-doc-layout">
<header class="dx-header" role="banner">
<!-- your tool name + nav links here -->
</header>
<div class="dx-doc-body">
<nav class="dx-sidebar" aria-label="...">
<!-- optional sidebar nav -->
</nav>
<main id="main" class="dx-main">
<!-- your tool content -->
</main>
</div>
</div>
</body></code></pre>
</div>
<!-- With Claude -->
<h3 style="margin-top: var(--space-8);">With Claude</h3>
<p>When using Claude Code to build or update a tool, copy <code>CLAUDE.md</code> from this repo into your project root. Claude Code automatically reads it at the start of every session — it provides the token names, component class patterns, and accessibility rules without you having to re-explain the system each time.</p>
<div class="code-block">
<div class="code-block__toolbar"><span class="code-block__lang">bash</span><button class="code-block__copy" aria-label="Copy code">Copy</button></div>
<pre><code># Copy CLAUDE.md into your project
cp /path/to/dx-tools/CLAUDE.md your-project/CLAUDE.md
# Claude Code will now read it automatically.
# You can also edit it to add project-specific notes.</code></pre>
</div>
<p style="margin-top: var(--space-4);">After copying, open Claude Code in your project directory and ask it to start building. Claude will already know the token names, component classes, HTML patterns, and ARIA requirements for this design system.</p>
</section>
<!-- Documentation nav -->
<section class="dx-section" id="docs" aria-labelledby="docs-title">
<div class="dx-section-header">
<h2 id="docs-title">Documentation</h2>
<p>Each section is a standalone reference page. Start with Colors and Typography to understand the token system, then work through Components for implementation patterns.</p>
</div>
<div class="nav-grid" role="list">
<a href="docs/colors.html" class="nav-card" role="listitem">
<div class="nav-card__icon" aria-hidden="true"><i data-lucide="palette" width="20" height="20"></i></div>
<div class="nav-card__title">Colors</div>
<div class="nav-card__desc">Brand palette, semantic tokens, contrast tables. Inverted-brand strategy for tool vs. preview.</div>
</a>
<a href="docs/typography.html" class="nav-card" role="listitem">
<div class="nav-card__icon" aria-hidden="true"><i data-lucide="type" width="20" height="20"></i></div>
<div class="nav-card__title">Typography</div>
<div class="nav-card__desc">Type scale specimens for Atkinson Hyperlegible, Roboto, and JetBrains Mono.</div>
</a>
<a href="docs/components.html" class="nav-card" role="listitem">
<div class="nav-card__icon" aria-hidden="true"><i data-lucide="layout-panel-left" width="20" height="20"></i></div>
<div class="nav-card__title">Components</div>
<div class="nav-card__desc">Buttons, badges, panels, tables, icons, drag-and-drop, and the preview container pattern.</div>
</a>
<a href="docs/forms.html" class="nav-card" role="listitem">
<div class="nav-card__icon" aria-hidden="true"><i data-lucide="text-cursor-input" width="20" height="20"></i></div>
<div class="nav-card__title">Forms</div>
<div class="nav-card__desc">Inputs, selects, checkboxes, inline validation, and accessible error handling.</div>
</a>
<a href="docs/dashboard.html" class="nav-card" role="listitem">
<div class="nav-card__icon" aria-hidden="true"><i data-lucide="bar-chart-2" width="20" height="20"></i></div>
<div class="nav-card__title">Dashboard</div>
<div class="nav-card__desc">Stat cards, data tables, progress bars, and chart container patterns.</div>
</a>
<a href="docs/frame-preview.html" class="nav-card" role="listitem">
<div class="nav-card__icon" aria-hidden="true"><i data-lucide="layers" width="20" height="20"></i></div>
<div class="nav-card__title">Frame & Preview</div>
<div class="nav-card__desc">The two-layer architecture — tool frame vs. brand-faithful preview. Live control panel demo.</div>
</a>
<a href="docs/layouts.html" class="nav-card" role="listitem">
<div class="nav-card__icon" aria-hidden="true"><i data-lucide="layout-template" width="20" height="20"></i></div>
<div class="nav-card__title">Layouts</div>
<div class="nav-card__desc">Three page layout variants — sidebar, no sidebar, and full-width wide — with live demos.</div>
</a>
<a href="docs/accessibility.html" class="nav-card" role="listitem">
<div class="nav-card__icon" aria-hidden="true"><i data-lucide="accessibility" width="20" height="20"></i></div>
<div class="nav-card__title">Accessibility</div>
<div class="nav-card__desc">WCAG AAA checklist, ARIA patterns, focus management, and contrast verification.</div>
</a>
</div>
</section>
</main>
</div>
</div>
<script src="js/lucide.min.js"></script>
<script src="js/theme.js" defer></script>
<script src="js/code-copy.js" defer></script>
</body>
</html>