jramos/cve-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: Dashboard redesign — design system overhaul and component updates

Browse Source 
Frontend redesign in progress: updated styles, layout, and components
across all pages to align with new design system. Includes Jira API
compliance specs, property tests, and load test script.
This commit is contained in:
root
2026-04-29 14:20:23 +00:00
parent 37119b9c8a
commit 27192dd69f
78 changed files with 9902 additions and 1368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/design-system-redesign/preview/_card.css Normal file
View File

@@ -0,0 +1,26 @@
/* Shared preview card scaffold — used by every card in /preview */
@import url('../colors_and_type.css');
html, body {
margin: 0;
padding: 0;
background: var(--bg-page);
color: var(--fg-1);
font-family: var(--font-ui);
overflow: hidden;
}
.card {
padding: 20px 24px;
box-sizing: border-box;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 14px;
}
.card-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.card-grid { display: grid; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 6px; }
.spacer { flex: 1; }

47
docs/design-system-redesign/preview/brand-logo.html Normal file
View File

@@ -0,0 +1,47 @@
<!doctype html><html><head><meta charset="utf-8"><title>Brand</title><link rel="stylesheet" href="_card.css"><style>
.brand {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(51,65,85,0.9) 100%);
border: 1px solid rgba(14,165,233,0.30);
border-radius: 8px;
}
.brand-mark {
width: 36px; height: 36px; border-radius: 8px;
background: rgba(14,165,233,0.10); border: 1px solid rgba(14,165,233,0.4);
display: flex; align-items: center; justify-content: center;
color: var(--intel-accent-bright);
box-shadow: inset 0 1px 0 rgba(14,165,233,0.2), 0 0 12px rgba(14,165,233,0.15);
}
.brand-name {
font: 700 16px/1 var(--font-mono);
color: var(--intel-accent-bright);
text-transform: uppercase; letter-spacing: 0.10em;
text-shadow: var(--glow-heading);
}
.brand-sub {
font: 400 11px/1 var(--font-mono);
color: var(--text-muted); margin-top: 4px;
}
</style></head><body>
<div class="card">
<div class="brand">
<div class="brand-mark">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="2" width="18" height="20" rx="3"/>
<circle cx="12" cy="11" r="5.5"/>
<line x1="6.5" y1="11" x2="17.5" y2="11"/>
<line x1="12" y1="5.5" x2="12" y2="16.5"/>
<path d="M9.5 5.8C8.6 7.3 8 9 8 11s0.6 3.7 1.5 5.2"/>
<path d="M14.5 5.8C15.4 7.3 16 9 16 11s-0.6 3.7-1.5 5.2"/>
</svg>
</div>
<div>
<div class="brand-name">STEAM Security</div>
<div class="brand-sub">vulnerability management dashboard</div>
</div>
</div>
<div class="t-meta">Atlas globe-badge mark + uppercase mono wordmark with sky-blue glow.</div>
</div>
</body></html>

15
docs/design-system-redesign/preview/colors-accent.html Normal file
View File

@@ -0,0 +1,15 @@
<!doctype html><html><head><meta charset="utf-8"><title>Accent</title><link rel="stylesheet" href="_card.css"></head><body>
<div class="card">
<div class="card-row" style="gap:0;border-radius:8px;overflow:hidden;height:80px">
<div style="flex:1;background:var(--accent);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-on-accent)">--accent</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-on-accent);opacity:.75;margin-top:3px">#38BDF8</div></div></div>
<div style="flex:1;background:var(--accent-hover);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-on-accent)">accent-hover</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-on-accent);opacity:.75;margin-top:3px">#7DD3FC</div></div></div>
<div style="flex:1;background:var(--accent-press);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-on-accent)">accent-press</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-on-accent);opacity:.75;margin-top:3px">#0EA5E9</div></div></div>
</div>
<div class="card-row" style="gap:8px">
<button style="background:var(--accent);color:var(--fg-on-accent);border:none;padding:8px 16px;border-radius:6px;font:600 13px var(--font-ui);cursor:pointer">Sync</button>
<button style="background:var(--accent-hover);color:var(--fg-on-accent);border:none;padding:8px 16px;border-radius:6px;font:600 13px var(--font-ui)">:hover</button>
<button style="background:var(--accent-press);color:var(--fg-on-accent);border:none;padding:8px 16px;border-radius:6px;font:600 13px var(--font-ui)">:active</button>
<span class="t-meta">Sky-blue accent — primary action, link, focused state</span>
</div>
</div>
</body></html>

10
docs/design-system-redesign/preview/colors-foreground.html Normal file
View File

@@ -0,0 +1,10 @@
<!doctype html><html><head><meta charset="utf-8"><title>Foreground</title><link rel="stylesheet" href="_card.css"></head><body>
<div class="card">
<div class="col" style="gap:8px">
<div class="card-row" style="gap:14px"><span style="display:inline-block;width:24px;height:24px;background:var(--fg-1);border-radius:4px"></span><span class="t-h3" style="color:var(--fg-1);width:120px">--fg-1</span><span class="t-mono-sm" style="color:var(--fg-muted)">#F1F5F9</span><span class="t-meta">Headings, primary text</span></div>
<div class="card-row" style="gap:14px"><span style="display:inline-block;width:24px;height:24px;background:var(--fg-2);border-radius:4px"></span><span class="t-h3" style="color:var(--fg-2);width:120px">--fg-2</span><span class="t-mono-sm" style="color:var(--fg-muted)">#CBD5E1</span><span class="t-meta">Body, secondary</span></div>
<div class="card-row" style="gap:14px"><span style="display:inline-block;width:24px;height:24px;background:var(--fg-muted);border-radius:4px"></span><span class="t-h3" style="color:var(--fg-muted);width:120px">--fg-muted</span><span class="t-mono-sm" style="color:var(--fg-muted)">#94A3B8</span><span class="t-meta">Meta, captions, helper</span></div>
<div class="card-row" style="gap:14px"><span style="display:inline-block;width:24px;height:24px;background:var(--fg-disabled);border-radius:4px"></span><span class="t-h3" style="color:var(--fg-disabled);width:120px">--fg-disabled</span><span class="t-mono-sm" style="color:var(--fg-muted)">#64748B</span><span class="t-meta">Placeholder, disabled</span></div>
</div>
</div>
</body></html>

54
docs/design-system-redesign/preview/colors-severity.html Normal file
View File

@@ -0,0 +1,54 @@
<!doctype html><html><head><meta charset="utf-8"><title>Severity</title><link rel="stylesheet" href="_card.css"><style>
.sev-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px; border-radius: 6px;
font: 700 12px/1 var(--font-mono);
letter-spacing: 0.5px; text-transform: uppercase;
border: 2px solid;
box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}
.sev-badge::before {
content: ''; width: 8px; height: 8px; border-radius: 50%;
animation: pulse-glow 2s ease-in-out infinite;
}
.sev-critical {
background: linear-gradient(135deg, rgba(239,68,68,0.20) 0%, rgba(239,68,68,0.15) 100%);
border-color: rgba(239,68,68,0.6); color: var(--sev-critical-text);
text-shadow: 0 0 8px rgba(239,68,68,0.4);
}
.sev-critical::before { background: var(--sev-critical); box-shadow: var(--glow-danger); }
.sev-high {
background: linear-gradient(135deg, rgba(245,158,11,0.20) 0%, rgba(245,158,11,0.15) 100%);
border-color: rgba(245,158,11,0.6); color: var(--sev-high-text);
text-shadow: 0 0 8px rgba(245,158,11,0.4);
}
.sev-high::before { background: var(--sev-high); box-shadow: var(--glow-warning); }
.sev-med {
background: linear-gradient(135deg, rgba(14,165,233,0.20) 0%, rgba(14,165,233,0.15) 100%);
border-color: rgba(14,165,233,0.6); color: var(--sev-medium-text);
text-shadow: 0 0 8px rgba(14,165,233,0.4);
}
.sev-med::before { background: var(--sev-medium); box-shadow: var(--glow-info); }
.sev-low {
background: linear-gradient(135deg, rgba(16,185,129,0.20) 0%, rgba(16,185,129,0.15) 100%);
border-color: rgba(16,185,129,0.6); color: var(--sev-low-text);
text-shadow: 0 0 8px rgba(16,185,129,0.4);
}
.sev-low::before { background: var(--sev-low); box-shadow: var(--glow-success); }
</style></head><body>
<div class="card">
<div class="card-row" style="gap:10px">
<span class="sev-badge sev-critical">CRITICAL</span>
<span class="sev-badge sev-high">HIGH</span>
<span class="sev-badge sev-med">MEDIUM</span>
<span class="sev-badge sev-low">LOW</span>
</div>
<div class="card-row" style="gap:14px;font:400 12px var(--font-mono);color:var(--fg-muted)">
<span><span style="color:var(--sev-critical)">●</span> #EF4444</span>
<span><span style="color:var(--sev-high)">●</span> #F59E0B</span>
<span><span style="color:var(--sev-medium)">●</span> #0EA5E9</span>
<span><span style="color:var(--sev-low)">●</span> #10B981</span>
</div>
<div class="t-meta">Pulsing dots + gradient fills + glow text-shadow. Mono uppercase, never remap.</div>
</div>
</body></html>

17
docs/design-system-redesign/preview/colors-status.html Normal file
View File

@@ -0,0 +1,17 @@
<!doctype html><html><head><meta charset="utf-8"><title>SLA & Status</title><link rel="stylesheet" href="_card.css"></head><body>
<div class="card">
<div class="t-label">SLA states</div>
<div class="card-row" style="gap:8px">
<span style="padding:4px 10px;border-radius:999px;background:var(--sev-critical-bg);color:var(--sev-critical);font:700 11px var(--font-mono);letter-spacing:.05em">OVERDUE</span>
<span style="padding:4px 10px;border-radius:999px;background:var(--sev-high-bg);color:var(--sev-high);font:700 11px var(--font-mono);letter-spacing:.05em">AT_RISK</span>
<span style="padding:4px 10px;border-radius:999px;background:var(--sev-low-bg);color:var(--sev-low);font:700 11px var(--font-mono);letter-spacing:.05em">WITHIN_SLA</span>
</div>
<div class="t-label">Status</div>
<div class="card-row" style="gap:8px">
<span style="padding:4px 10px;border-radius:4px;background:rgba(56,189,248,0.12);color:var(--accent);font:500 12px var(--font-ui)">Open</span>
<span style="padding:4px 10px;border-radius:4px;background:rgba(245,158,11,0.12);color:var(--sev-high);font:500 12px var(--font-ui)">In Progress</span>
<span style="padding:4px 10px;border-radius:4px;background:rgba(148,163,184,0.12);color:var(--fg-muted);font:500 12px var(--font-ui)">Addressed</span>
<span style="padding:4px 10px;border-radius:4px;background:rgba(16,185,129,0.12);color:var(--sev-low);font:500 12px var(--font-ui)">Resolved</span>
</div>
</div>
</body></html>

11
docs/design-system-redesign/preview/colors-surfaces.html Normal file
View File

@@ -0,0 +1,11 @@
<!doctype html><html><head><meta charset="utf-8"><title>Surface palette</title><link rel="stylesheet" href="_card.css"></head><body>
<div class="card">
<div class="card-row" style="gap:0;border:1px solid var(--border-1);border-radius:8px;overflow:hidden;height:100px">
<div style="flex:1;background:var(--bg-page);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-1)">--bg-page</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-muted);margin-top:3px">#0F172A</div></div></div>
<div style="flex:1;background:var(--bg-surface);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-1)">--bg-surface</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-muted);margin-top:3px">#1E293B</div></div></div>
<div style="flex:1;background:var(--bg-elevated);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-1)">--bg-elevated</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-muted);margin-top:3px">#334155</div></div></div>
<div style="flex:1;background:var(--bg-hover);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-1)">--bg-hover</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-muted);margin-top:3px">#475569</div></div></div>
</div>
<div class="t-meta">Page → surface → elevated → hover. Each step lifts ≈ one slate stop.</div>
</div>
</body></html>

40
docs/design-system-redesign/preview/components-buttons.html Normal file
View File

@@ -0,0 +1,40 @@
<!doctype html><html><head><meta charset="utf-8"><title>Buttons</title><link rel="stylesheet" href="_card.css"><style>
.intel-btn {
position: relative; overflow: hidden;
font: 600 13px/1 var(--font-mono);
letter-spacing: 0.5px; text-transform: uppercase;
padding: 10px 20px; border-radius: 6px;
border: 1px solid; cursor: pointer;
transition: all 0.3s;
box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-primary {
background: linear-gradient(135deg, rgba(14,165,233,0.15) 0%, rgba(14,165,233,0.10) 100%);
border-color: var(--intel-accent); color: var(--intel-accent-bright);
text-shadow: 0 0 6px rgba(14,165,233,0.2);
}
.btn-danger {
background: linear-gradient(135deg, rgba(239,68,68,0.15) 0%, rgba(239,68,68,0.10) 100%);
border-color: var(--intel-danger); color: #F87171;
text-shadow: 0 0 6px rgba(239,68,68,0.2);
}
.btn-success {
background: linear-gradient(135deg, rgba(16,185,129,0.15) 0%, rgba(16,185,129,0.10) 100%);
border-color: var(--intel-success); color: #34D399;
text-shadow: 0 0 6px rgba(16,185,129,0.2);
}
.btn-ghost {
background: transparent; border-color: var(--border-default);
color: var(--text-muted); text-shadow: none;
}
</style></head><body>
<div class="card">
<div class="card-row" style="gap:10px">
<button class="intel-btn btn-primary">Sync</button>
<button class="intel-btn btn-success">Approve FP</button>
<button class="intel-btn btn-danger">Delete</button>
<button class="intel-btn btn-ghost">Cancel</button>
</div>
<div class="t-meta">Mono · uppercase · gradient fills · 1px brand-color border · soft text-glow.</div>
</div>
</body></html>

43
docs/design-system-redesign/preview/components-groups.html Normal file
View File

@@ -0,0 +1,43 @@
<!doctype html><html><head><meta charset="utf-8"><title>Stat cards</title><link rel="stylesheet" href="_card.css"><style>
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-card {
background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(51,65,85,0.9) 100%);
border: 1.5px solid rgba(14,165,233,0.35);
border-radius: 8px; padding: 14px 16px;
position: relative; overflow: hidden;
box-shadow: var(--shadow-card);
}
.stat-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--intel-accent), transparent);
opacity: 0.8; box-shadow: 0 0 8px rgba(14,165,233,0.5);
}
.stat-label {
font: 500 11px/1 var(--font-mono); letter-spacing: 0.05em;
text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.stat-val { font: 700 24px/1 var(--font-mono); color: var(--text-primary); }
.stat-delta-up { color: var(--intel-success); font: 500 11px var(--font-mono); }
.stat-delta-down { color: var(--intel-danger); font: 500 11px var(--font-mono); }
</style></head><body>
<div class="card">
<div class="stat-grid">
<div class="stat-card">
<div class="stat-label">Open Findings</div>
<div class="stat-val">1,247</div>
<div class="stat-delta-up">↑ 12 vs last sync</div>
</div>
<div class="stat-card">
<div class="stat-label">FP Pending</div>
<div class="stat-val">38</div>
<div class="stat-delta-down">↓ 4 today</div>
</div>
<div class="stat-card">
<div class="stat-label">Compliance %</div>
<div class="stat-val">94.2</div>
<div class="stat-delta-up">↑ 0.8% wk</div>
</div>
</div>
<div class="t-meta">Top accent rail · gradient surface · sky inner highlight · 4-px lift on hover.</div>
</div>
</body></html>

19
docs/design-system-redesign/preview/components-inputs.html Normal file
View File

@@ -0,0 +1,19 @@
<!doctype html><html><head><meta charset="utf-8"><title>Inputs</title><link rel="stylesheet" href="_card.css"><style>
.field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:160px}
.field label{font:500 11px var(--font-ui);color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em}
.field input,.field select{background:var(--bg-input);color:var(--fg-1);border:1px solid var(--border-1);border-radius:6px;padding:8px 10px;font:400 13px var(--font-ui);outline:none}
.field input:focus,.field select:focus{border-color:var(--border-focus);box-shadow:var(--shadow-focus)}
.field input::placeholder{color:var(--fg-disabled)}
</style></head><body>
<div class="card">
<div class="card-row" style="gap:14px;align-items:flex-start">
<div class="field"><label>Search</label><input placeholder="CVE-2024-…" /></div>
<div class="field"><label>Vendor</label><select><option>All vendors</option><option>Cisco</option><option>Juniper</option></select></div>
<div class="field"><label>Severity</label><select><option>All</option><option>Critical</option><option>High</option></select></div>
</div>
<div class="card-row" style="gap:14px">
<div class="field" style="max-width:240px"><label>Focused</label><input value="EXC-30482" style="border-color:var(--border-focus);box-shadow:var(--shadow-focus)" /></div>
<div class="field" style="max-width:240px"><label>Disabled</label><input value="read only" disabled style="opacity:.5" /></div>
</div>
</div>
</body></html>

22
docs/design-system-redesign/preview/components-table.html Normal file
View File

@@ -0,0 +1,22 @@
<!doctype html><html><head><meta charset="utf-8"><title>Table</title><link rel="stylesheet" href="_card.css"><style>
table{width:100%;border-collapse:separate;border-spacing:0;font:400 12px var(--font-ui)}
th{font:500 10px var(--font-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted);text-align:left;padding:8px 10px;background:var(--bg-surface);border-bottom:1px solid var(--border-1)}
td{padding:9px 10px;border-bottom:1px solid var(--border-1);color:var(--fg-2)}
tr:last-child td{border-bottom:none}
tr.hover td{background:var(--accent-wash)}
.mono{font-family:var(--font-mono)}
.sev{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
</style></head><body>
<div class="card" style="padding:0">
<div style="border:1px solid var(--border-1);border-radius:8px;overflow:hidden;height:100%">
<table>
<thead><tr><th>Severity</th><th>CVE</th><th>Host</th><th>Due</th><th>SLA</th></tr></thead>
<tbody>
<tr><td><span class="sev" style="background:var(--sev-critical)"></span><span class="mono" style="color:var(--fg-1)">9.8</span></td><td class="mono" style="color:var(--fg-1)">CVE-2024-21412</td><td class="mono">bdc-edge-fw01</td><td class="mono" style="color:var(--sev-critical)">Apr 21</td><td><span style="font:700 10px var(--font-mono);color:var(--sev-critical);background:var(--sev-critical-bg);padding:2px 8px;border-radius:999px">OVERDUE</span></td></tr>
<tr class="hover"><td><span class="sev" style="background:var(--sev-high)"></span><span class="mono" style="color:var(--fg-1)">8.9</span></td><td class="mono" style="color:var(--fg-1)">CVE-2024-3661</td><td class="mono">bdc-core-rtr03</td><td class="mono" style="color:var(--sev-high)">May 06</td><td><span style="font:700 10px var(--font-mono);color:var(--sev-high);background:var(--sev-high-bg);padding:2px 8px;border-radius:999px">AT_RISK</span></td></tr>
<tr><td><span class="sev" style="background:var(--sev-medium)"></span><span class="mono" style="color:var(--fg-1)">8.6</span></td><td class="mono" style="color:var(--fg-1)">CVE-2023-46604</td><td class="mono">bdc-mq-broker</td><td class="mono">Jun 14</td><td><span style="font:700 10px var(--font-mono);color:var(--sev-low);background:var(--sev-low-bg);padding:2px 8px;border-radius:999px">WITHIN_SLA</span></td></tr>
</tbody>
</table>
</div>
</div>
</body></html>

21
docs/design-system-redesign/preview/components-workflow.html Normal file
View File

@@ -0,0 +1,21 @@
<!doctype html><html><head><meta charset="utf-8"><title>Workflow badges</title><link rel="stylesheet" href="_card.css"><style>
.wf{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:4px;font:600 11px var(--font-mono);letter-spacing:.04em}
</style></head><body>
<div class="card">
<div class="t-label">FP workflow states</div>
<div class="card-row" style="gap:8px">
<span class="wf" style="background:var(--sev-medium-bg);color:var(--sev-medium)">Actionable</span>
<span class="wf" style="background:var(--sev-high-bg);color:var(--sev-high)">Requested</span>
<span class="wf" style="background:rgba(148,163,184,0.16);color:var(--fg-muted)">Reworked</span>
<span class="wf" style="background:var(--sev-low-bg);color:var(--sev-low)">Approved</span>
<span class="wf" style="background:var(--sev-critical-bg);color:var(--sev-critical)">Rejected</span>
<span class="wf" style="background:var(--sev-critical-bg);color:var(--sev-critical)">Expired</span>
</div>
<div class="t-label">Queue type tags</div>
<div class="card-row" style="gap:8px">
<span class="wf" style="background:var(--sev-high-bg);color:var(--sev-high)">FP</span>
<span class="wf" style="background:var(--sev-medium-bg);color:var(--sev-medium)">ARCHER</span>
<span class="wf" style="background:var(--sev-low-bg);color:var(--sev-low)">CARD</span>
</div>
</div>
</body></html>

11
docs/design-system-redesign/preview/elevation.html Normal file
View File

@@ -0,0 +1,11 @@
<!doctype html><html><head><meta charset="utf-8"><title>Elevation</title><link rel="stylesheet" href="_card.css"></head><body>
<div class="card">
<div class="card-row" style="gap:18px">
<div style="text-align:center"><div style="width:90px;height:60px;background:var(--bg-surface);border:1px solid var(--border-1);border-radius:8px;box-shadow:var(--shadow-rest)"></div><div class="t-mono-sm" style="margin-top:8px">rest</div></div>
<div style="text-align:center"><div style="width:90px;height:60px;background:var(--bg-surface);border:1px solid var(--border-1);border-radius:8px;box-shadow:var(--shadow-popover)"></div><div class="t-mono-sm" style="margin-top:8px">popover</div></div>
<div style="text-align:center"><div style="width:90px;height:60px;background:var(--bg-surface);border:1px solid var(--border-1);border-radius:12px;box-shadow:var(--shadow-modal)"></div><div class="t-mono-sm" style="margin-top:8px">modal</div></div>
<div style="text-align:center"><div style="width:90px;height:60px;background:var(--bg-surface);border:1px solid var(--border-focus);border-radius:8px;box-shadow:var(--shadow-focus)"></div><div class="t-mono-sm" style="margin-top:8px">focus</div></div>
</div>
<div class="t-meta">Outer shadows only. No insets. Shadows visible but never dramatic on dark.</div>
</div>
</body></html>

21
docs/design-system-redesign/preview/iconography.html Normal file
View File

@@ -0,0 +1,21 @@
<!doctype html><html><head><meta charset="utf-8"><title>Iconography</title><link rel="stylesheet" href="_card.css"><style>
.ic{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--fg-2);width:64px}
.ic svg{stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic .lbl{font:400 10px var(--font-mono);color:var(--fg-muted)}
</style></head><body>
<div class="card">
<div class="t-label">Lucide line icons · 1.5–2px stroke · currentColor</div>
<div class="card-row" style="gap:8px;justify-content:flex-start">
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg><div class="lbl">shield</div></div>
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><div class="lbl">search</div></div>
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg><div class="lbl">filter</div></div>
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg><div class="lbl">sync</div></div>
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg><div class="lbl">download</div></div>
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg><div class="lbl">upload</div></div>
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg><div class="lbl">eye</div></div>
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg><div class="lbl">calendar</div></div>
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg><div class="lbl">file</div></div>
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg><div class="lbl">alert</div></div>
</div>
</div>
</body></html>

13
docs/design-system-redesign/preview/radii.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html><html><head><meta charset="utf-8"><title>Radii</title><link rel="stylesheet" href="_card.css"></head><body>
<div class="card">
<div class="card-row" style="gap:14px">
<div style="text-align:center"><div style="width:56px;height:56px;background:var(--bg-elevated);border:1px solid var(--border-2);border-radius:3px"></div><div class="t-mono-sm" style="margin-top:6px">3 · xs</div></div>
<div style="text-align:center"><div style="width:56px;height:56px;background:var(--bg-elevated);border:1px solid var(--border-2);border-radius:4px"></div><div class="t-mono-sm" style="margin-top:6px">4 · sm</div></div>
<div style="text-align:center"><div style="width:56px;height:56px;background:var(--bg-elevated);border:1px solid var(--border-2);border-radius:6px"></div><div class="t-mono-sm" style="margin-top:6px">6 · md</div></div>
<div style="text-align:center"><div style="width:56px;height:56px;background:var(--bg-elevated);border:1px solid var(--border-2);border-radius:8px"></div><div class="t-mono-sm" style="margin-top:6px">8 · lg</div></div>
<div style="text-align:center"><div style="width:56px;height:56px;background:var(--bg-elevated);border:1px solid var(--border-2);border-radius:12px"></div><div class="t-mono-sm" style="margin-top:6px">12 · xl</div></div>
<div style="text-align:center"><div style="width:84px;height:32px;background:var(--bg-elevated);border:1px solid var(--border-2);border-radius:999px;margin-top:12px"></div><div class="t-mono-sm" style="margin-top:6px">pill</div></div>
</div>
<div class="t-meta">Chips 4 · button/input 6 · cards 8 · modals 12 · pills for badges and toggles.</div>
</div>
</body></html>

17
docs/design-system-redesign/preview/spacing.html Normal file
View File

@@ -0,0 +1,17 @@
<!doctype html><html><head><meta charset="utf-8"><title>Spacing</title><link rel="stylesheet" href="_card.css"></head><body>
<div class="card">
<div class="t-label">4px grid · sp-1 → sp-12</div>
<div class="card-row" style="align-items:flex-end;gap:10px">
<div style="text-align:center"><div style="width:4px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">4</div></div>
<div style="text-align:center"><div style="width:8px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">8</div></div>
<div style="text-align:center"><div style="width:12px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">12</div></div>
<div style="text-align:center"><div style="width:16px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">16</div></div>
<div style="text-align:center"><div style="width:20px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">20</div></div>
<div style="text-align:center"><div style="width:24px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">24</div></div>
<div style="text-align:center"><div style="width:32px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">32</div></div>
<div style="text-align:center"><div style="width:40px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">40</div></div>
<div style="text-align:center"><div style="width:48px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">48</div></div>
</div>
<div class="t-meta">Card padding 16–20 · row vertical 8–10 · section gap 24–32 · modal padding 24.</div>
</div>
</body></html>

12
docs/design-system-redesign/preview/type-mono.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html><html><head><meta charset="utf-8"><title>Type · mono</title><link rel="stylesheet" href="_card.css"></head><body>
<div class="card">
<div class="col" style="gap:8px">
<div class="t-label">JetBrains Mono · used for data</div>
<div style="font:500 16px var(--font-mono);color:var(--fg-1)">CVE-2024-21412</div>
<div style="font:400 14px var(--font-mono);color:var(--fg-2)">10.42.18.137 &nbsp; · &nbsp; bdc-edge-fw01.steam.local</div>
<div style="font:400 13px var(--font-mono);color:var(--fg-2)">EXC-30482 &nbsp; FP#9821 &nbsp; finding-id 5048124</div>
<div style="font:400 12px var(--font-mono);color:var(--fg-muted)">VRR 9.4 · 2026-04-29 · WITHIN_SLA</div>
<div style="font:600 13px var(--font-mono);color:var(--fg-1);background:var(--bg-elevated);padding:6px 10px;border-radius:4px;display:inline-block;align-self:flex-start">openssl rand -base64 32</div>
</div>
</div>
</body></html>

12
docs/design-system-redesign/preview/type-ui.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html><html><head><meta charset="utf-8"><title>Type · UI font</title><link rel="stylesheet" href="_card.css"></head><body>
<div class="card">
<div class="col" style="gap:6px">
<div style="display:flex;align-items:baseline;gap:14px"><span class="t-display">Outfit Display 28</span><span class="t-mono-sm">700 / 1.2 / -0.01em</span></div>
<div style="display:flex;align-items:baseline;gap:14px"><span class="t-h1">Page title 24</span><span class="t-mono-sm">600 / 1.2</span></div>
<div style="display:flex;align-items:baseline;gap:14px"><span class="t-h2">Section header 18</span><span class="t-mono-sm">600 / 1.2</span></div>
<div style="display:flex;align-items:baseline;gap:14px"><span class="t-h3">Card title 16</span><span class="t-mono-sm">600 / 1.4</span></div>
<div style="display:flex;align-items:baseline;gap:14px"><span class="t-body">Body 14 — searchable filterable list</span><span class="t-mono-sm">400 / 1.4</span></div>
<div style="display:flex;align-items:baseline;gap:14px"><span class="t-meta">Meta 12 — last sync 4h ago</span><span class="t-mono-sm">400 / 1.4</span></div>
</div>
</div>
</body></html>