Migrated from Claude Design
This commit is contained in:
Zachary Levy
@@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Borders & Radius" subtitle="6px default (medium) — shape comparison across button/card/input" viewport="800x360" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 20px 24px; background: var(--bg-page); font-family: var(--font-body); }
|
||||
|
||||
.section-label {
|
||||
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
|
||||
text-transform: uppercase; color: var(--fg-muted);
|
||||
margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.section { margin-bottom: 28px; }
|
||||
|
||||
/* ── RADIUS COMPARISON GRID ── */
|
||||
.radius-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 80px repeat(5, 1fr);
|
||||
gap: 0; border: 1px solid var(--border); border-radius: 2px; overflow: hidden;
|
||||
}
|
||||
.rg-header {
|
||||
background: var(--bg-shell); border-bottom: 1px solid var(--border);
|
||||
padding: 7px 12px; font-family: var(--font-mono); font-size: 9px;
|
||||
letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim);
|
||||
display: flex; align-items: center;
|
||||
}
|
||||
.rg-cell {
|
||||
padding: 14px 12px; border-right: 1px solid var(--border);
|
||||
display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
.rg-cell:last-child { border-right: none; }
|
||||
.rg-label { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); letter-spacing: 0.06em; }
|
||||
.rg-row-label { background: var(--bg-shell); padding: 0 12px; display: flex; align-items: center;
|
||||
font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); letter-spacing: 0.06em;
|
||||
border-right: 1px solid var(--border); }
|
||||
|
||||
/* Base component styles */
|
||||
.btn {
|
||||
font-family: var(--font-body); font-size: 12px; font-weight: 700;
|
||||
letter-spacing: 0.06em; text-transform: uppercase;
|
||||
padding: 8px 18px; border: 1px solid var(--gold-dim);
|
||||
background: var(--gold-dim); color: var(--bg-shell);
|
||||
cursor: default; display: inline-block;
|
||||
}
|
||||
.btn-ghost {
|
||||
background: transparent; color: var(--fg-secondary); border-color: var(--border);
|
||||
}
|
||||
.card-sample {
|
||||
background: var(--bg-active); border: 1px solid var(--border);
|
||||
padding: 10px 12px; width: 100%;
|
||||
}
|
||||
.card-sample-title { font-size: 12px; font-weight: 700; color: var(--fg-body); margin-bottom: 2px; }
|
||||
.card-sample-sub { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); }
|
||||
.input-sample {
|
||||
background: var(--bg-shell); border: 1px solid var(--border);
|
||||
padding: 7px 10px; font-family: var(--font-mono); font-size: 11px;
|
||||
color: var(--fg-caption); width: 100%;
|
||||
}
|
||||
|
||||
/* ── STATES GRID ── */
|
||||
.states-grid {
|
||||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
|
||||
}
|
||||
.state-cell {
|
||||
background: var(--bg-surface); border: 1px solid var(--border);
|
||||
border-radius: 2px; padding: 14px;
|
||||
}
|
||||
.state-cell-label {
|
||||
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
|
||||
text-transform: uppercase; color: var(--gold-dim); margin-bottom: 10px;
|
||||
}
|
||||
.state-btn {
|
||||
font-family: var(--font-body); font-size: 12px; font-weight: 700;
|
||||
letter-spacing: 0.06em; text-transform: uppercase;
|
||||
padding: 8px 18px; border-radius: 2px; cursor: default; display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.note { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); line-height: 1.5; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- SECTION 1: RADIUS COMPARISON -->
|
||||
<div class="section">
|
||||
<div class="section-label">Section 1 — Shape exploration · buttons · cards · inputs</div>
|
||||
|
||||
<div class="radius-grid">
|
||||
<!-- Headers -->
|
||||
<div class="rg-header"></div>
|
||||
<div class="rg-header">Sharp<br><span style="color:var(--fg-muted)">0px</span></div>
|
||||
<div class="rg-header">Slight<br><span style="color:var(--fg-muted)">2px</span></div>
|
||||
<div class="rg-header">Medium<br><span style="color:var(--fg-muted)">6px</span></div>
|
||||
<div class="rg-header">Round<br><span style="color:var(--fg-muted)">12px</span></div>
|
||||
<div class="rg-header">Pill<br><span style="color:var(--fg-muted)">999px</span></div>
|
||||
|
||||
<!-- Buttons row -->
|
||||
<div class="rg-row-label" style="border-bottom:1px solid var(--border)">Button</div>
|
||||
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
||||
<div class="btn" style="border-radius:0">Execute</div>
|
||||
<div class="btn btn-ghost" style="border-radius:0;margin-top:4px">Cancel</div>
|
||||
</div>
|
||||
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
||||
<div class="btn" style="border-radius:2px">Execute</div>
|
||||
<div class="btn btn-ghost" style="border-radius:2px;margin-top:4px">Cancel</div>
|
||||
</div>
|
||||
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
||||
<div class="btn" style="border-radius:6px">Execute</div>
|
||||
<div class="btn btn-ghost" style="border-radius:6px;margin-top:4px">Cancel</div>
|
||||
</div>
|
||||
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
||||
<div class="btn" style="border-radius:12px">Execute</div>
|
||||
<div class="btn btn-ghost" style="border-radius:12px;margin-top:4px">Cancel</div>
|
||||
</div>
|
||||
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
||||
<div class="btn" style="border-radius:999px">Execute</div>
|
||||
<div class="btn btn-ghost" style="border-radius:999px;margin-top:4px">Cancel</div>
|
||||
</div>
|
||||
|
||||
<!-- Cards row -->
|
||||
<div class="rg-row-label" style="border-bottom:1px solid var(--border)">Card</div>
|
||||
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
||||
<div class="card-sample" style="border-radius:0"><div class="card-sample-title">Node Alpha</div><div class="card-sample-sub">99.97% uptime</div></div>
|
||||
</div>
|
||||
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
||||
<div class="card-sample" style="border-radius:2px"><div class="card-sample-title">Node Alpha</div><div class="card-sample-sub">99.97% uptime</div></div>
|
||||
</div>
|
||||
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
||||
<div class="card-sample" style="border-radius:6px"><div class="card-sample-title">Node Alpha</div><div class="card-sample-sub">99.97% uptime</div></div>
|
||||
</div>
|
||||
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
||||
<div class="card-sample" style="border-radius:12px"><div class="card-sample-title">Node Alpha</div><div class="card-sample-sub">99.97% uptime</div></div>
|
||||
</div>
|
||||
<div class="rg-cell" style="border-bottom:1px solid var(--border)">
|
||||
<div class="card-sample" style="border-radius:16px"><div class="card-sample-title">Node Alpha</div><div class="card-sample-sub">99.97% uptime</div></div>
|
||||
</div>
|
||||
|
||||
<!-- Input row -->
|
||||
<div class="rg-row-label">Input</div>
|
||||
<div class="rg-cell"><div class="input-sample" style="border-radius:0">192.168.1.1</div></div>
|
||||
<div class="rg-cell"><div class="input-sample" style="border-radius:2px">192.168.1.1</div></div>
|
||||
<div class="rg-cell"><div class="input-sample" style="border-radius:6px">192.168.1.1</div></div>
|
||||
<div class="rg-cell"><div class="input-sample" style="border-radius:12px">192.168.1.1</div></div>
|
||||
<div class="rg-cell"><div class="input-sample" style="border-radius:999px">192.168.1.1</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
</style>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Accent Colors" subtitle="Gold, red, green, blue, orange, aqua, purple" viewport="700x140" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 16px; background: var(--bg-page); font-family: var(--font-mono); }
|
||||
.row { display: flex; gap: 6px; margin-bottom: 10px; }
|
||||
.swatch { width: 80px; flex-shrink: 0; }
|
||||
.swatch-block { height: 44px; border-radius:6px; margin-bottom: 3px; }
|
||||
.swatch span { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); display: block; }
|
||||
.group-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="row">
|
||||
<div class="swatch">
|
||||
<div class="swatch-block" style="background:#fabd2f"></div>
|
||||
<span>gold-bright</span><span style="color:var(--fg-muted)">#fabd2f</span>
|
||||
</div>
|
||||
<div class="swatch">
|
||||
<div class="swatch-block" style="background:#d79921"></div>
|
||||
<span>gold-dim</span><span style="color:var(--fg-muted)">#d79921</span>
|
||||
</div>
|
||||
<div class="swatch">
|
||||
<div class="swatch-block" style="background:#b57614"></div>
|
||||
<span>gold-muted</span><span style="color:var(--fg-muted)">#b57614</span>
|
||||
</div>
|
||||
<div class="swatch">
|
||||
<div class="swatch-block" style="background:#ffb000; border: 1px solid #d79921"></div>
|
||||
<span>amber</span><span style="color:var(--fg-muted)">#ffb000</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="swatch"><div class="swatch-block" style="background:#fb4934"></div><span>red-bright</span></div>
|
||||
<div class="swatch"><div class="swatch-block" style="background:#cc241d"></div><span>red-dim</span></div>
|
||||
<div class="swatch"><div class="swatch-block" style="background:#b8bb26"></div><span>green-bright</span></div>
|
||||
<div class="swatch"><div class="swatch-block" style="background:#98971a"></div><span>green-dim</span></div>
|
||||
<div class="swatch"><div class="swatch-block" style="background:#83a598"></div><span>blue-bright</span></div>
|
||||
<div class="swatch"><div class="swatch-block" style="background:#458588"></div><span>blue-dim</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="swatch"><div class="swatch-block" style="background:#fe8019"></div><span>orange-bright</span></div>
|
||||
<div class="swatch"><div class="swatch-block" style="background:#d65d0e"></div><span>orange-dim</span></div>
|
||||
<div class="swatch"><div class="swatch-block" style="background:#8ec07c"></div><span>aqua-bright</span></div>
|
||||
<div class="swatch"><div class="swatch-block" style="background:#689d6a"></div><span>aqua-dim</span></div>
|
||||
<div class="swatch"><div class="swatch-block" style="background:#d3869b"></div><span>purple-bright</span></div>
|
||||
<div class="swatch"><div class="swatch-block" style="background:#b16286"></div><span>purple-dim</span></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,167 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Base Palette" subtitle="Default pairing (bg0+fg1) + palette swatches + contextual text + surface pairings" viewport="800x440" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css?v=2">
|
||||
<style>
|
||||
body { margin: 0; padding: 16px 20px; background: var(--bg-page); font-family: var(--font-body); }
|
||||
.section-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 8px; }
|
||||
.section { margin-bottom: 14px; }
|
||||
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
|
||||
/* Palette swatches */
|
||||
.swatch-row { display: flex; gap: 4px; }
|
||||
.swatch {
|
||||
flex: 1; height: 36px; border-radius: var(--radius-sm);
|
||||
display: flex; align-items: flex-end; padding: 3px 6px;
|
||||
}
|
||||
.swatch span { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.02em; color: rgba(255,255,255,0.45); white-space: nowrap; }
|
||||
|
||||
/* Contextual text samples */
|
||||
.text-row { display: flex; flex-direction: column; gap: 3px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; }
|
||||
.text-sample { display: flex; align-items: baseline; gap: 10px; }
|
||||
.text-label { font-family: var(--font-mono); font-size: 8px; color: var(--fg-muted); width: 72px; flex-shrink: 0; }
|
||||
|
||||
/* Default pairing */
|
||||
.default-pair {
|
||||
display: flex; align-items: stretch; border: 1.5px solid var(--gold-dim);
|
||||
border-radius: var(--radius-md); overflow: hidden;
|
||||
}
|
||||
.default-bg { background: #313131; padding: 10px 14px; flex: 1; }
|
||||
.default-fg { background: #313131; padding: 10px 14px; border-left: 1px solid var(--border); flex: 1; }
|
||||
.default-label { font-family: var(--font-mono); font-size: 8px; color: var(--gold-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
|
||||
.default-swatch { display: flex; align-items: center; gap: 8px; }
|
||||
.dot { width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0; }
|
||||
.dot-label { font-family: var(--font-mono); font-size: 10px; color: var(--fg-secondary); }
|
||||
|
||||
/* Pairings grid */
|
||||
.pairings { display: flex; gap: 6px; }
|
||||
.pair { flex: 1; border-radius: var(--radius-md); padding: 8px 10px; border: 1px solid var(--border); }
|
||||
.pair-text { font-size: 12px; font-weight: 500; margin-bottom: 1px; }
|
||||
.pair-sub { font-family: var(--font-mono); font-size: 8px; }
|
||||
.pair-token { font-family: var(--font-mono); font-size: 7px; color: #b8a98e; margin-top: 4px; letter-spacing: 0.04em; }
|
||||
.badge { display: inline-block; font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.1em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: var(--gold-dim); color: var(--bg-shell); margin-bottom: 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- DEFAULT PAIRING -->
|
||||
<div class="section">
|
||||
<div class="section-label">Default pairing</div>
|
||||
<div class="default-pair">
|
||||
<div class="default-bg">
|
||||
<div class="default-label">Background</div>
|
||||
<div class="default-swatch">
|
||||
<div class="dot" style="background:#313131;border:1px solid #504945"></div>
|
||||
<div class="dot-label">bg-page · #313131</div>
|
||||
</div>
|
||||
<div style="font-family:var(--font-mono);font-size:8px;color:var(--fg-muted);margin-top:3px">Page, content area</div>
|
||||
</div>
|
||||
<div class="default-fg">
|
||||
<div class="default-label">Foreground</div>
|
||||
<div class="default-swatch">
|
||||
<div class="dot" style="background:#f2e2ba"></div>
|
||||
<div class="dot-label">fg-body · #f2e2ba</div>
|
||||
</div>
|
||||
<div style="font-family:var(--font-mono);font-size:8px;color:var(--fg-muted);margin-top:3px">Primary body text</div>
|
||||
</div>
|
||||
<div style="background:#313131;padding:10px 14px;border-left:1px solid var(--border);flex:1.5;display:flex;flex-direction:column;justify-content:center">
|
||||
<div style="font-size:14px;font-weight:500;color:#f2e2ba;margin-bottom:2px">Deploy pipeline ready</div>
|
||||
<div style="font-family:var(--font-mono);font-size:10px;color:#b8a98e">Node 07 offline — failover active</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PALETTE + CONTEXT SIDE BY SIDE -->
|
||||
<div class="two-col">
|
||||
<!-- Palette -->
|
||||
<div>
|
||||
<div class="section-label">Backgrounds</div>
|
||||
<div class="swatch-row" style="margin-bottom:6px">
|
||||
<div class="swatch" style="background:#1d2021"><span>bg-shell</span></div>
|
||||
<div class="swatch" style="background:#313131"><span>bg-page</span></div>
|
||||
<div class="swatch" style="background:#3c3836"><span>bg-surface</span></div>
|
||||
<div class="swatch" style="background:#504945"><span>bg-active</span></div>
|
||||
<div class="swatch" style="background:#665c54"><span>bg-disabled</span></div>
|
||||
<div class="swatch" style="background:#7c6f64"><span>bg-border</span></div>
|
||||
</div>
|
||||
<div class="section-label" style="margin-top:10px">Foregrounds</div>
|
||||
<div class="swatch-row">
|
||||
<div class="swatch" style="background:#fbf1c7"><span style="color:rgba(0,0,0,0.4)">fg-heading</span></div>
|
||||
<div class="swatch" style="background:#f2e2ba"><span style="color:rgba(0,0,0,0.4)">fg-body</span></div>
|
||||
<div class="swatch" style="background:#e0d0a8"><span style="color:rgba(0,0,0,0.4)">fg-secondary</span></div>
|
||||
<div class="swatch" style="background:#cebd9e"><span style="color:rgba(0,0,0,0.35)">fg-caption</span></div>
|
||||
<div class="swatch" style="background:#b8a98e"><span style="color:rgba(0,0,0,0.35)">fg-muted</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contextual -->
|
||||
<div>
|
||||
<div class="section-label">Text in context</div>
|
||||
<div class="text-row">
|
||||
<div class="text-sample"><div class="text-label">fg-heading</div><div style="font-size:15px;font-weight:700;color:#fbf1c7">Heading text</div></div>
|
||||
<div class="text-sample"><div class="text-label">fg-body</div><div style="font-size:13px;color:#f2e2ba">Primary body — the system is operational</div></div>
|
||||
<div class="text-sample"><div class="text-label">fg-secondary</div><div style="font-size:13px;color:#e0d0a8">Secondary body — node 07 offline</div></div>
|
||||
<div class="text-sample"><div class="text-label">fg-caption</div><div style="font-size:12px;color:#cebd9e">Caption — cluster-01 · us-east-1</div></div>
|
||||
<div class="text-sample"><div class="text-label">fg-muted</div><div style="font-family:var(--font-mono);font-size:10px;color:#b8a98e">LABEL · STATUS · TIMESTAMP</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAIRINGS -->
|
||||
<div class="section" style="margin-top:12px;">
|
||||
<div class="section-label">Surface pairings</div>
|
||||
<div class="pairings">
|
||||
<div class="pair" style="background:#1d2021">
|
||||
<div style="display:flex;align-items:baseline;gap:6px"><div class="pair-text" style="color:#fbf1c7">Overview</div><div class="pair-token">fg-heading</div></div>
|
||||
<div style="display:flex;align-items:baseline;gap:6px"><div class="pair-sub" style="color:#b8a98e">Topbar / sidebar</div><div class="pair-token">fg-muted</div></div>
|
||||
<div class="pair-token" style="margin-top:4px">bg-shell</div>
|
||||
</div>
|
||||
<div class="pair" style="background:#313131">
|
||||
<div class="badge">default</div>
|
||||
<div style="display:flex;align-items:baseline;gap:6px"><div class="pair-text" style="color:#f2e2ba">Dashboard</div><div class="pair-token">fg-body</div></div>
|
||||
<div style="display:flex;align-items:baseline;gap:6px"><div class="pair-sub" style="color:#e0d0a8">Page content</div><div class="pair-token">fg-secondary</div></div>
|
||||
<div class="pair-token" style="margin-top:4px">bg-page</div>
|
||||
</div>
|
||||
<div class="pair" style="background:#3c3836">
|
||||
<div style="display:flex;align-items:baseline;gap:6px"><div class="pair-text" style="color:#e0d0a8">Node Alpha</div><div class="pair-token">fg-secondary</div></div>
|
||||
<div style="display:flex;align-items:baseline;gap:6px"><div class="pair-sub" style="color:#cebd9e">Cards, panels</div><div class="pair-token">fg-caption</div></div>
|
||||
<div class="pair-token" style="margin-top:4px">bg-surface</div>
|
||||
</div>
|
||||
<div class="pair" style="background:#504945">
|
||||
<div style="display:flex;align-items:baseline;gap:6px"><div class="pair-text" style="color:#f2e2ba">Selected row</div><div class="pair-token">fg-body</div></div>
|
||||
<div style="display:flex;align-items:baseline;gap:6px"><div class="pair-sub" style="color:#e0d0a8">Hover / active</div><div class="pair-token">fg-secondary</div></div>
|
||||
<div class="pair-token" style="margin-top:4px">bg-active</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BG3 / BG4 SPECIAL USE -->
|
||||
<div class="section" style="margin-bottom:0">
|
||||
<div class="section-label">Edge cases — bg3 & bg4</div>
|
||||
<div class="pairings">
|
||||
|
||||
<div class="pair" style="background:#665c54; flex:2; border-color:#665c54">
|
||||
<div style="font-family:var(--font-mono);font-size:7px;letter-spacing:0.1em;text-transform:uppercase;color:#b8a98e;margin-bottom:6px">bg-disabled · Disabled surface</div>
|
||||
<div style="font-size:12px;font-weight:500;color:#b8a98e;opacity:0.6;margin-bottom:2px;text-decoration:line-through">Deploy pipeline</div>
|
||||
<div style="font-family:var(--font-mono);font-size:8px;color:#b8a98e;opacity:0.5">Node offline — action unavailable</div>
|
||||
<div style="font-family:var(--font-mono);font-size:7px;color:#b8a98e;opacity:0.4;margin-top:6px">fg4 only · intentionally muted</div>
|
||||
</div>
|
||||
|
||||
<div class="pair" style="background:#313131; flex:2; border-color:#504945; display:flex; flex-direction:column; gap:6px;">
|
||||
<div style="font-family:var(--font-mono);font-size:7px;letter-spacing:0.1em;text-transform:uppercase;color:#b8a98e;margin-bottom:2px">bg-border · Borders & dividers only</div>
|
||||
<div style="height:1px;background:#7c6f64;width:100%"></div>
|
||||
<div style="display:flex;gap:8px;align-items:center">
|
||||
<div style="width:28px;height:28px;border:1px solid #7c6f64;border-radius:3px;background:transparent"></div>
|
||||
<div style="font-size:11px;color:#f2e2ba">Input field border</div>
|
||||
</div>
|
||||
<div style="height:1px;background:#7c6f64;width:100%"></div>
|
||||
<div style="font-family:var(--font-mono);font-size:7px;color:#b8a98e;opacity:0.55;margin-top:2px">Never use as a text container background</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,188 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Semantic Colors" subtitle="Button matrix + semantic text colors: success, danger, warning, info, primary, disabled" viewport="800x560" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 14px 16px; background: var(--bg-page); font-family: var(--font-mono); font-size: 10px; }
|
||||
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th, td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border-subtle); }
|
||||
th { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); background: var(--bg-shell); border-bottom: 1px solid var(--border); font-weight: 600; }
|
||||
tr:last-child td { border-bottom: none; }
|
||||
tr:nth-child(even) td { background: rgba(60,56,54,0.2); }
|
||||
|
||||
.variant-header td {
|
||||
font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
|
||||
color: var(--fg-muted); background: var(--bg-shell);
|
||||
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.dot {
|
||||
width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
.token { color: var(--fg-secondary); }
|
||||
.hex { color: var(--fg-muted); font-size: 9px; margin-left: 2px; }
|
||||
|
||||
.state-col { color: var(--fg-caption); width: 70px; }
|
||||
.prop-col { color: var(--fg-muted); width: 60px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:70px">State</th>
|
||||
<th style="width:60px">Property</th>
|
||||
<th>Primary</th>
|
||||
<th>Secondary</th>
|
||||
<th>Danger</th>
|
||||
<th>Success</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- DEFAULT -->
|
||||
<tr class="variant-header"><td colspan="6">Default</td></tr>
|
||||
<tr>
|
||||
<td class="state-col" rowspan="3">Default</td>
|
||||
<td class="prop-col">BG</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#d79921"></div><span class="token">--gold-dim</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:transparent;border:1px solid #7c6f64"></div><span class="token">transparent</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:transparent;border:1px solid #7c6f64"></div><span class="token">transparent</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:transparent;border:1px solid #7c6f64"></div><span class="token">transparent</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="prop-col">Border</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#d79921"></div><span class="token">--gold-dim</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#7c6f64"></div><span class="token">--border</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#cc241d"></div><span class="token">--red-dim</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#98971a"></div><span class="token">--green-dim</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="prop-col">Text</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#1d2021;border:1px solid #504945"></div><span class="token">--bg-shell</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#d5c4a1"></div><span class="token">--fg-secondary</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fb4934"></div><span class="token">--red-bright</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#b8bb26"></div><span class="token">--green-bright</span></div></td>
|
||||
</tr>
|
||||
|
||||
<!-- HOVER -->
|
||||
<tr class="variant-header"><td colspan="6">Hover</td></tr>
|
||||
<tr>
|
||||
<td class="state-col" rowspan="3">Hover</td>
|
||||
<td class="prop-col">BG</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fabd2f"></div><span class="token">--gold-bright</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:rgba(215,153,33,0.2)"></div><span class="token">gold 20% tint</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:rgba(204,36,29,0.2)"></div><span class="token">red 20% tint</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:rgba(152,151,26,0.2)"></div><span class="token">green 20% tint</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="prop-col">Border</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fabd2f"></div><span class="token">--gold-bright</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#d79921"></div><span class="token">--gold-dim</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fb4934"></div><span class="token">--red-bright</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#b8bb26"></div><span class="token">--green-bright</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="prop-col">Text</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#1d2021;border:1px solid #504945"></div><span class="token">--bg-shell</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#ebdbb2"></div><span class="token">--fg-body</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#ebdbb2"></div><span class="token">--fg-body</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#ebdbb2"></div><span class="token">--fg-body</span></div></td>
|
||||
</tr>
|
||||
|
||||
<!-- PRESS -->
|
||||
<tr class="variant-header"><td colspan="6">Press</td></tr>
|
||||
<tr>
|
||||
<td class="state-col" rowspan="3">Press</td>
|
||||
<td class="prop-col">BG</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fbf1c7"></div><span class="token">--fg-heading</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fabd2f"></div><span class="token">--gold-bright</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fb4934"></div><span class="token">--red-bright</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#b8bb26"></div><span class="token">--green-bright</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="prop-col">Border</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fbf1c7"></div><span class="token">--fg-heading</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fabd2f"></div><span class="token">--gold-bright</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fb4934"></div><span class="token">--red-bright</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#b8bb26"></div><span class="token">--green-bright</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="prop-col">Text</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#1d2021;border:1px solid #504945"></div><span class="token">--bg-shell</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#ffffff;border:1px solid #504945"></div><span class="token">#ffffff</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#ffffff;border:1px solid #504945"></div><span class="token">#ffffff</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#ffffff;border:1px solid #504945"></div><span class="token">#ffffff</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div style="margin-top:14px;padding-top:10px;border-top:1px solid var(--border)">
|
||||
<div style="font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:10px">Semantic text colors</div>
|
||||
<div style="display:flex;flex-direction:column;gap:5px">
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Success</div>
|
||||
<div style="display:flex;gap:16px">
|
||||
<span style="color:var(--green-bright)">● Online</span>
|
||||
<span style="color:var(--green-bright)">✓ Verified</span>
|
||||
<span style="color:var(--green-bright)">Build complete</span>
|
||||
<span style="color:var(--green-dim)">--green-bright</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Danger</div>
|
||||
<div style="display:flex;gap:16px">
|
||||
<span style="color:var(--red-bright)">● Error</span>
|
||||
<span style="color:var(--red-bright)">✕ Failed</span>
|
||||
<span style="color:var(--red-bright)">Connection timeout</span>
|
||||
<span style="color:var(--fg-muted)">--red-bright</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Warning</div>
|
||||
<div style="display:flex;gap:16px">
|
||||
<span style="color:var(--orange-bright)">● Degraded</span>
|
||||
<span style="color:var(--orange-bright)">Disk usage 84%</span>
|
||||
<span style="color:var(--orange-bright)">Threshold exceeded</span>
|
||||
<span style="color:var(--fg-muted)">--orange-bright</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Info</div>
|
||||
<div style="display:flex;gap:16px">
|
||||
<span style="color:var(--blue-bright)">● Running</span>
|
||||
<span style="color:var(--blue-bright)">Heartbeat OK</span>
|
||||
<span style="color:var(--blue-bright)">node-01</span>
|
||||
<span style="color:var(--fg-muted)">--blue-bright</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Primary</div>
|
||||
<div style="display:flex;gap:16px">
|
||||
<span style="color:var(--gold-bright)">● Active</span>
|
||||
<span style="color:var(--gold-bright)">Build #441</span>
|
||||
<span style="color:var(--gold-bright)">v2.4.1-stable</span>
|
||||
<span style="color:var(--fg-muted)">--gold-bright</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Disabled</div>
|
||||
<div style="display:flex;gap:16px">
|
||||
<span style="color:var(--fg-muted)">● Offline</span>
|
||||
<span style="color:var(--fg-muted)">Unavailable</span>
|
||||
<span style="color:var(--fg-muted)">No data</span>
|
||||
<span style="color:var(--fg-muted)">--fg-muted</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Badges & Status" subtitle="System (online/offline/degraded/error) · Process (running/complete/failed) · Labels" viewport="700x200" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 16px 20px; background: var(--bg-page); font-family: var(--font-body); display: flex; flex-direction: column; gap: 12px; }
|
||||
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 4px; }
|
||||
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: 5px;
|
||||
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
|
||||
letter-spacing: 0.1em; text-transform: uppercase;
|
||||
padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
|
||||
|
||||
/* System / connectivity status */
|
||||
.b-online { color: var(--green-bright); border-color: var(--green-dim); background: rgba(152,151,26,0.1); }
|
||||
.b-offline { color: var(--fg-muted); border-color: var(--border); background: var(--bg-surface); }
|
||||
.b-degraded { color: var(--orange-bright); border-color: var(--orange-dim); background: rgba(214,93,14,0.1); }
|
||||
.b-error { color: var(--red-bright); border-color: var(--red-dim); background: rgba(204,36,29,0.1); }
|
||||
|
||||
/* Process / job status */
|
||||
.b-running { color: var(--gold-bright); border-color: var(--gold-dim); background: rgba(215,153,33,0.1); }
|
||||
.b-complete { color: var(--green-bright); border-color: var(--green-dim); background: rgba(152,151,26,0.1); }
|
||||
.b-failed { color: var(--red-bright); border-color: var(--red-dim); background: rgba(204,36,29,0.1); }
|
||||
.b-pending { color: var(--fg-caption); border-color: var(--border); background: var(--bg-surface); }
|
||||
.b-warning { color: var(--orange-bright); border-color: var(--orange-dim); background: rgba(214,93,14,0.1); }
|
||||
|
||||
/* Labels / tags */
|
||||
.b-info { color: var(--blue-bright); border-color: var(--blue-dim); background: rgba(69,133,136,0.1); }
|
||||
.b-version { color: var(--gold-bright); border-color: var(--gold-dim); background: rgba(215,153,33,0.1); }
|
||||
.b-neutral { color: var(--fg-caption); border-color: var(--border); background: var(--bg-surface); }
|
||||
|
||||
.def { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<div class="section-label">System / connectivity</div>
|
||||
<div class="row">
|
||||
<div class="badge b-online"><div class="dot" style="background:var(--green-bright)"></div>Online</div>
|
||||
<div class="badge b-offline"><div class="dot" style="background:var(--fg-muted)"></div>Offline</div>
|
||||
<div class="badge b-degraded"><div class="dot" style="background:var(--orange-bright)"></div>Degraded</div>
|
||||
<div class="badge b-error"><div class="dot" style="background:var(--red-bright)"></div>Error</div>
|
||||
</div>
|
||||
<div class="def" style="margin-top:5px">Online = reachable and responding · Offline = unreachable · Degraded = reachable but unhealthy · Error = fault condition</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="section-label">Process / job</div>
|
||||
<div class="row">
|
||||
<div class="badge b-running">Running</div>
|
||||
<div class="badge b-complete">✓ Complete</div>
|
||||
<div class="badge b-failed">✕ Failed</div>
|
||||
<div class="badge b-pending">Pending</div>
|
||||
<div class="badge b-warning">Warning</div>
|
||||
</div>
|
||||
<div class="def" style="margin-top:5px">Running = in progress · Complete = finished successfully · Failed = finished with error · Pending = queued · Warning = finished with caveats</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="section-label">Labels / tags</div>
|
||||
<div class="row">
|
||||
<div class="badge b-info">Info</div>
|
||||
<div class="badge b-version">v2.4.1</div>
|
||||
<div class="badge b-neutral">Staging</div>
|
||||
<div class="badge b-neutral">Beta</div>
|
||||
<div class="badge b-neutral">Read-only</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Buttons" subtitle="3-step interaction: transparent → 20% tint → full flood + white" viewport="700x110" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 16px 20px; background: var(--bg-page); font-family: var(--font-body); display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; flex-direction: column; }
|
||||
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
font-family: var(--font-body); font-size: 12px; font-weight: 700;
|
||||
letter-spacing: 0.07em; text-transform: uppercase;
|
||||
padding: 8px 18px; border-radius: var(--radius-md); border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-hover), color var(--transition-hover), border-color var(--transition-hover);
|
||||
}
|
||||
.btn:active {
|
||||
transition: background var(--transition-press), color var(--transition-press), border-color var(--transition-press);
|
||||
}
|
||||
|
||||
/* Primary */
|
||||
.btn-primary { background: var(--gold-dim); color: var(--bg-shell); border-color: var(--gold-dim); }
|
||||
.btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
|
||||
.btn-primary:active { background: var(--fg-heading); color: var(--bg-shell); border-color: var(--fg-heading); }
|
||||
|
||||
/* Secondary */
|
||||
.btn-secondary { background: transparent; color: var(--fg-secondary); border-color: var(--border); }
|
||||
.btn-secondary:hover { background: rgba(215,153,33,0.2); border-color: var(--gold-dim); color: var(--fg-body); }
|
||||
.btn-secondary:active { background: var(--gold-bright); color: #fff; border-color: var(--gold-bright); }
|
||||
|
||||
/* Ghost */
|
||||
.btn-ghost { background: transparent; color: var(--fg-caption); border-color: transparent; }
|
||||
.btn-ghost:hover { background: var(--bg-active); color: var(--fg-body); }
|
||||
.btn-ghost:active { background: var(--gold-dim); color: #fff; }
|
||||
|
||||
/* Danger */
|
||||
.btn-danger { background: transparent; color: var(--red-bright); border-color: var(--red-dim); }
|
||||
.btn-danger:hover { background: rgba(204,36,29,0.2); border-color: var(--red-bright); color: var(--fg-body); }
|
||||
.btn-danger:active { background: var(--red-bright); color: #fff; border-color: var(--red-bright); }
|
||||
|
||||
/* Success */
|
||||
.btn-success { background: transparent; color: var(--green-bright); border-color: var(--green-dim); }
|
||||
.btn-success:hover { background: rgba(152,151,26,0.2); border-color: var(--green-bright); color: var(--fg-body); }
|
||||
.btn-success:active { background: var(--green-bright); color: #fff; border-color: var(--green-bright); }
|
||||
|
||||
/* Disabled */
|
||||
.btn-disabled { background: var(--bg-active); color: var(--fg-muted); border-color: var(--border); opacity: 0.5; cursor: not-allowed; pointer-events: none; }
|
||||
|
||||
/* Sizes */
|
||||
.btn-sm { font-size: 10px; padding: 5px 12px; }
|
||||
.btn-lg { font-size: 14px; padding: 11px 24px; }
|
||||
|
||||
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
||||
.row-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div><div class="row-label">variants</div>
|
||||
<div class="row">
|
||||
<button class="btn btn-primary">Execute</button>
|
||||
<button class="btn btn-secondary">Configure</button>
|
||||
<button class="btn btn-secondary">Dismiss</button>
|
||||
<button class="btn btn-danger">Terminate</button>
|
||||
<button class="btn btn-success">Deploy</button>
|
||||
<button class="btn btn-disabled" disabled>Locked</button>
|
||||
</div></div>
|
||||
<div><div class="row-label">sizes</div>
|
||||
<div class="row">
|
||||
<button class="btn btn-primary btn-sm">Run</button>
|
||||
<button class="btn btn-primary">Execute</button>
|
||||
<button class="btn btn-primary btn-lg">Initialize System</button>
|
||||
</div></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Cards" subtitle="Stat, deploy, alert cards — flat, 6px radius" viewport="700x150" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css?v=2">
|
||||
<style>
|
||||
body { margin: 0; padding: 24px; background: var(--bg-page); font-family: var(--font-body); display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
|
||||
|
||||
/* Base card — a SURFACE. Static by default: no hover, no cursor, no halo. */
|
||||
.card {
|
||||
background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
|
||||
padding: 14px 16px; width: 200px;
|
||||
background-image: var(--gradient-card);
|
||||
}
|
||||
|
||||
/* Clickable card — opts into the interactive treatment. Use .card.clickable, role="button", or wrap in <a>/<button>. */
|
||||
.card.clickable,
|
||||
a.card,
|
||||
button.card {
|
||||
cursor: pointer;
|
||||
text-decoration: none; text-align: left;
|
||||
transition: background var(--transition-hover), color var(--transition-hover), border-color var(--transition-hover), box-shadow var(--transition-hover);
|
||||
}
|
||||
.card.clickable:active,
|
||||
a.card:active,
|
||||
button.card:active {
|
||||
transition: background var(--transition-press), color var(--transition-press), border-color var(--transition-press), box-shadow var(--transition-press);
|
||||
}
|
||||
|
||||
/* Hover — outward gold halo, only on clickable cards. */
|
||||
.card.clickable:hover,
|
||||
a.card:hover,
|
||||
button.card:hover {
|
||||
border-color: var(--gold-dim);
|
||||
box-shadow: 0 0 0 3px rgba(215, 153, 33, 0.35);
|
||||
}
|
||||
|
||||
/* Active/Press — full gold-bright fill, white text. Mirrors .btn-secondary:active. */
|
||||
.card.clickable:active,
|
||||
a.card:active,
|
||||
button.card:active {
|
||||
background: var(--gold-bright);
|
||||
border-color: var(--gold-bright);
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
.card.clickable:active *,
|
||||
a.card:active *,
|
||||
button.card:active * {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.card-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-heading); margin-bottom: 4px; }
|
||||
.card-meta { font-family: var(--font-mono); font-size: 10px; color: var(--fg-caption); letter-spacing: 0.06em; margin-bottom: 8px; }
|
||||
.card-body { font-size: 13px; color: var(--fg-body); line-height: 1.5; }
|
||||
.card-stat { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--gold-bright); }
|
||||
.card-stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-caption); }
|
||||
.card-status { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
|
||||
.dot { width: 6px; height: 6px; border-radius: 50%; }
|
||||
|
||||
.group-label { flex-basis: 100%; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-caption); margin: 4px 0 -4px; }
|
||||
|
||||
/* Spec block */
|
||||
.spec {
|
||||
flex-basis: 100%; margin-top: 8px;
|
||||
border-top: 1px solid var(--gold-dim);
|
||||
padding-top: 14px;
|
||||
font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--fg-secondary);
|
||||
}
|
||||
.spec-title { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 8px; }
|
||||
.spec-row { display: flex; gap: 12px; margin-bottom: 4px; }
|
||||
.spec-key { color: var(--fg-caption); width: 110px; flex-shrink: 0; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; }
|
||||
.spec-val { color: var(--fg-heading); }
|
||||
.spec-note { color: var(--fg-muted); margin-top: 8px; font-style: italic; max-width: 640px; }
|
||||
.spec-section { margin-top: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="group-label">Static cards (display only)</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Node Alpha</div>
|
||||
<div class="card-meta">cluster-01 · us-east-1</div>
|
||||
<div class="card-stat">99.97%</div>
|
||||
<div class="card-stat-label">Uptime — 30d</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Alert</div>
|
||||
<div class="card-meta">node-07 · 09:41:02Z</div>
|
||||
<div class="card-body">Connection timeout. Failover initiated.</div>
|
||||
<div style="margin-top:8px" class="card-status"><div class="dot" style="background:var(--red-bright)"></div><span style="color:var(--red-bright)">Critical</span></div>
|
||||
</div>
|
||||
|
||||
<div class="group-label">Clickable cards (hover + press)</div>
|
||||
<a href="#" class="card">
|
||||
<div class="card-title">Deploy #441</div>
|
||||
<div class="card-meta">main · a3f9c12e · 14s ago</div>
|
||||
<div class="card-body">Production build deployed. 0 errors.</div>
|
||||
<div style="margin-top:8px" class="card-status"><div class="dot" style="background:var(--green-bright)"></div><span style="color:var(--green-bright)">Complete</span></div>
|
||||
</a>
|
||||
<div class="card clickable" role="button" tabindex="0">
|
||||
<div class="card-title">Open Console</div>
|
||||
<div class="card-meta">cluster-01 · 12 active sessions</div>
|
||||
<div class="card-body">Launch terminal session in this cluster.</div>
|
||||
</div>
|
||||
|
||||
<div class="spec">
|
||||
<div class="spec-title">Card states</div>
|
||||
|
||||
<div class="spec-section">
|
||||
<div class="spec-row"><div class="spec-key">Default</div><div class="spec-val">Static surface — no hover effect, no cursor change.</div></div>
|
||||
<div class="spec-row"><div class="spec-key">Background</div><div class="spec-val"><code>--bg-surface</code> + <code>--gradient-card</code></div></div>
|
||||
<div class="spec-row"><div class="spec-key">Border</div><div class="spec-val">1px solid <code>--border</code></div></div>
|
||||
</div>
|
||||
|
||||
<div class="spec-section">
|
||||
<div class="spec-row"><div class="spec-key">Clickable</div><div class="spec-val">Apply <code>.clickable</code>, <code>role="button"</code>, or use <code><a></code>/<code><button></code> — opts the card into hover + press.</div></div>
|
||||
</div>
|
||||
|
||||
<div class="spec-section">
|
||||
<div class="spec-row"><div class="spec-key">Hover</div><div class="spec-val">border <code>--gold-dim</code> · halo <code>0 0 0 3px rgba(215, 153, 33, 0.35)</code></div></div>
|
||||
<div class="spec-row"><div class="spec-key">— width</div><div class="spec-val">3px, grows OUTWARD from card edge</div></div>
|
||||
<div class="spec-row"><div class="spec-key">— opacity</div><div class="spec-val">35% — translucent so the halo reads as a soft accent, not a hard second ring</div></div>
|
||||
<div class="spec-row"><div class="spec-key">— transition</div><div class="spec-val"><code>--transition-hover</code> (150ms ease-out)</div></div>
|
||||
</div>
|
||||
|
||||
<div class="spec-section">
|
||||
<div class="spec-row"><div class="spec-key">Press</div><div class="spec-val">background + border <code>--gold-bright</code> · text <code>#fff</code> · halo cleared</div></div>
|
||||
<div class="spec-row"><div class="spec-key">— transition</div><div class="spec-val"><code>--transition-press</code> (55ms ease-out) on enter, <code>--transition-hover</code> on release</div></div>
|
||||
<div class="spec-row"><div class="spec-key">— mirrors</div><div class="spec-val"><code>.btn-secondary:active</code> — same press treatment as ghost-style buttons</div></div>
|
||||
</div>
|
||||
|
||||
<div class="spec-note">The hover halo only appears when a card is actually interactive. Surface cards (data display) get no hover effect at all — clickable cards opt in via class or semantic element. Press fills with gold-bright to match the secondary-button click pattern, so a clicked card reads consistently with the rest of the interactive system.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Form Inputs" subtitle="Text input, select, error, success — 6px radius" viewport="700x120" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css?v=2">
|
||||
<style>
|
||||
body { margin: 0; padding: 24px; background: var(--bg-page); font-family: var(--font-body); display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
|
||||
.field-group { width: 220px; }
|
||||
label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-caption); margin-bottom: 4px; }
|
||||
input, select, textarea {
|
||||
width: 100%; background: var(--bg-shell); color: var(--fg-body);
|
||||
border: 1px solid var(--border); border-radius: var(--radius-md);
|
||||
padding: 7px 10px; font-family: var(--font-mono); font-size: 13px;
|
||||
outline: none;
|
||||
transition: border-color var(--transition-hover), box-shadow var(--transition-hover);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* Focus halo — grows OUTWARD, 3px wide. Per-state colors so meaning doesn't flip on focus.
|
||||
Gold @ 35% (matches card hover). Red & Green @ 50% — stronger because the dim variants are
|
||||
visually quieter than gold-dim, so they need more opacity to read at the same intensity. */
|
||||
input:focus, select:focus, textarea:focus {
|
||||
border-color: var(--gold-bright);
|
||||
box-shadow: 0 0 0 3px rgba(215, 153, 33, 0.35); /* --gold-dim @ 35% */
|
||||
outline: none;
|
||||
}
|
||||
input.error { border-color: var(--red-dim); }
|
||||
input.error:focus {
|
||||
border-color: var(--red-bright);
|
||||
box-shadow: 0 0 0 3px rgba(204, 36, 29, 0.5); /* --red-dim @ 50% */
|
||||
}
|
||||
input.success { border-color: var(--green-dim); }
|
||||
input.success:focus {
|
||||
border-color: var(--green-bright);
|
||||
box-shadow: 0 0 0 3px rgba(152, 151, 26, 0.5); /* --green-dim @ 50% */
|
||||
}
|
||||
.hint { font-size: 11px; color: var(--fg-caption); margin-top: 3px; font-family: var(--font-mono); }
|
||||
.hint.err { color: var(--red-bright); }
|
||||
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a89984'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; cursor: pointer; }
|
||||
|
||||
/* Spec block — documents the focus halo so the demo is self-describing. */
|
||||
.spec {
|
||||
flex-basis: 100%; margin-top: 8px;
|
||||
border-top: 1px solid var(--gold-dim);
|
||||
padding-top: 14px;
|
||||
font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--fg-secondary);
|
||||
}
|
||||
.spec-title {
|
||||
font-family: var(--font-display); font-size: 10px; font-weight: 700;
|
||||
letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-bright);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.spec-row { display: flex; gap: 12px; margin-bottom: 4px; }
|
||||
.spec-key { color: var(--fg-caption); width: 110px; flex-shrink: 0; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; }
|
||||
.spec-val { color: var(--fg-heading); }
|
||||
.spec-sub { color: var(--fg-muted); margin-left: 122px; font-size: 10px; margin-bottom: 6px; }
|
||||
.spec-note { color: var(--fg-muted); margin-top: 8px; font-style: italic; max-width: 640px; }
|
||||
.spec-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="field-group">
|
||||
<label>Target Host</label>
|
||||
<input type="text" placeholder="192.168.1.1">
|
||||
<div class="hint">IPv4 or hostname</div>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label>Protocol</label>
|
||||
<select><option>SSH</option><option>HTTPS</option><option>TCP/IP</option></select>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label>API Key</label>
|
||||
<input type="text" class="error" value="invalid-key-xx">
|
||||
<div class="hint err">Key format invalid.</div>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label>Build Hash</label>
|
||||
<input type="text" class="success" value="a3f9c12e">
|
||||
<div class="hint" style="color:var(--green-bright)">Verified.</div>
|
||||
</div>
|
||||
|
||||
<div class="spec">
|
||||
<div class="spec-title">Focus state — outward halo, semantic color</div>
|
||||
<div class="spec-row"><div class="spec-key">Width</div><div class="spec-val">3px, expands outward from field edge</div></div>
|
||||
<div class="spec-row"><div class="spec-key">Outline</div><div class="spec-val">suppressed (<code>outline: none</code>) to prevent stacking with global <code>:focus-visible</code> ring</div></div>
|
||||
<div class="spec-row"><div class="spec-key">Transition</div><div class="spec-val"><code>--transition-hover</code> (150ms ease-out) on border-color + box-shadow</div></div>
|
||||
|
||||
<div style="margin-top:14px">
|
||||
<div class="spec-row"><div class="spec-key"><span class="spec-swatch" style="background:#fabd2f"></span>Default</div><div class="spec-val">border <code>--gold-bright</code> · halo <code>rgba(215, 153, 33, 0.35)</code></div></div>
|
||||
<div class="spec-sub">35% opacity — matches card hover. Used for neutral fields with no semantic state.</div>
|
||||
|
||||
<div class="spec-row"><div class="spec-key"><span class="spec-swatch" style="background:#fb4934"></span>Invalid</div><div class="spec-val">border <code>--red-bright</code> · halo <code>rgba(204, 36, 29, 0.5)</code></div></div>
|
||||
<div class="spec-sub">50% opacity — keeps the red signal on focus rather than overriding to gold.</div>
|
||||
|
||||
<div class="spec-row"><div class="spec-key"><span class="spec-swatch" style="background:#b8bb26"></span>Verified</div><div class="spec-val">border <code>--green-bright</code> · halo <code>rgba(152, 151, 26, 0.5)</code></div></div>
|
||||
<div class="spec-sub">50% opacity — keeps the green signal on focus rather than overriding to gold.</div>
|
||||
</div>
|
||||
|
||||
<div class="spec-note">Semantic states (invalid/verified) preserve their color through focus so meaning doesn't flip on interaction. Their dim variants read quieter than gold-dim at the same opacity, so they're bumped to 50% to match perceived intensity.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,259 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Navigation" subtitle="T10 Lit Divider locked for top tabs; side nav pending" viewport="960x160" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Navigation — Cybersteel</title>
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
/* ────────────────────────────────────────────────────────────
|
||||
Token usage rule for this file:
|
||||
Use var(--token, #hexfallback) AT EVERY USE SITE — never
|
||||
redeclare design-system tokens here. Redeclaring them on
|
||||
:root creates circular references (e.g.
|
||||
--bg-shell: var(--bg-shell, #1d2021);
|
||||
) which CSS treats as invalid and which wipes the token,
|
||||
leaving every consumer with the initial value (transparent
|
||||
for backgrounds). The fallback in var() is the resilience
|
||||
layer; it kicks in only when the stylesheet fails to load
|
||||
and never collides with the loaded values.
|
||||
──────────────────────────────────────────────────────────── */
|
||||
|
||||
html, body {
|
||||
margin: 0; padding: 0;
|
||||
background: var(--bg-page, #313131);
|
||||
}
|
||||
body {
|
||||
font-family: var(--font-body, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
||||
color: var(--fg-body, #f2e2ba);
|
||||
padding: 24px 24px 64px;
|
||||
display: flex; flex-direction: column; gap: 32px;
|
||||
}
|
||||
|
||||
/* ── Page header ─────────────────────────────────────────── */
|
||||
.page-head {
|
||||
display: flex; flex-direction: column; gap: 6px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--border-subtle, #665c54);
|
||||
}
|
||||
.page-head .eyebrow {
|
||||
font-size: 11px; color: var(--fg-muted, #b8a98e);
|
||||
letter-spacing: 0.2em; text-transform: uppercase;
|
||||
}
|
||||
.page-head h1 {
|
||||
margin: 0; font-size: 28px; color: var(--fg-heading, #fbf1c7);
|
||||
font-family: var(--font-display, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em; text-transform: uppercase;
|
||||
}
|
||||
.page-head p {
|
||||
margin: 0; font-size: 13px; color: var(--fg-caption, #cebd9e);
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
/* ── Pattern header ──────────────────────────────────────── */
|
||||
.pattern { display: flex; flex-direction: column; gap: 12px; }
|
||||
.pattern-head {
|
||||
display: flex; align-items: baseline; gap: 16px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid var(--border-subtle, #665c54);
|
||||
}
|
||||
.pattern-num {
|
||||
font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
|
||||
font-size: 11px;
|
||||
color: var(--gold-dim, #d79921); letter-spacing: 0.2em;
|
||||
}
|
||||
.pattern-title {
|
||||
font-family: var(--font-display, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
||||
font-size: 18px;
|
||||
font-weight: 700; letter-spacing: 0.1em;
|
||||
text-transform: uppercase; color: var(--fg-heading, #fbf1c7);
|
||||
}
|
||||
.pattern-desc {
|
||||
font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
|
||||
font-size: 11px;
|
||||
color: var(--fg-caption, #cebd9e); letter-spacing: 0.05em;
|
||||
}
|
||||
.pattern-status {
|
||||
font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.18em; text-transform: uppercase;
|
||||
margin-left: auto;
|
||||
}
|
||||
.status-locked { color: var(--gold-bright, #fabd2f); }
|
||||
.status-pending { color: var(--fg-muted, #b8a98e); }
|
||||
|
||||
.frame {
|
||||
border: 1px solid var(--border, #7c6f64);
|
||||
background: var(--bg-page, #313131);
|
||||
overflow: hidden;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-family: var(--font-display, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
||||
font-size: 13px;
|
||||
font-weight: 700; letter-spacing: 0.18em;
|
||||
text-transform: uppercase; color: var(--gold-dim, #d79921);
|
||||
}
|
||||
|
||||
.stub-content {
|
||||
padding: 24px;
|
||||
font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
|
||||
font-size: 11px;
|
||||
color: var(--fg-muted, #b8a98e); letter-spacing: 0.2em;
|
||||
background-image:
|
||||
linear-gradient(var(--bg-surface, #3c3836) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--bg-surface, #3c3836) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
background-position: -1px -1px;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────────────────────
|
||||
T10 · LIT DIVIDER — locked top tab pattern.
|
||||
The topbar's bottom divider already exists. Under the active
|
||||
tab, that segment of divider lights up in gold-bright. Cream
|
||||
text. No extra rules, no gradients.
|
||||
──────────────────────────────────────────────────────────── */
|
||||
.topframe {
|
||||
display: grid; grid-template-rows: 44px 1fr;
|
||||
min-height: 280px;
|
||||
}
|
||||
.topnav {
|
||||
display: flex; align-items: stretch;
|
||||
background: var(--bg-shell, #1d2021);
|
||||
border-bottom: 1px solid var(--border, #7c6f64);
|
||||
padding: 0 12px;
|
||||
}
|
||||
.topnav .product-name {
|
||||
display: flex; align-items: center;
|
||||
padding: 0 16px 0 8px;
|
||||
margin-right: 8px;
|
||||
border-right: 1px solid var(--border, #7c6f64);
|
||||
}
|
||||
.tab {
|
||||
position: relative;
|
||||
display: flex; align-items: center;
|
||||
padding: 0 18px;
|
||||
font-family: var(--font-body, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
||||
font-size: 12px;
|
||||
font-weight: 600; letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-caption, #cebd9e);
|
||||
cursor: pointer;
|
||||
transition: color var(--transition-hover, 150ms ease-out);
|
||||
height: 100%;
|
||||
}
|
||||
.tab:hover { color: var(--fg-body, #f2e2ba); }
|
||||
.tab.active { color: var(--fg-heading, #fbf1c7); }
|
||||
.tab.active::after {
|
||||
content: ""; position: absolute;
|
||||
left: 0; right: 0; bottom: -1px;
|
||||
height: 1px; background: var(--gold-bright, #fabd2f);
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────────────────────
|
||||
S1 · BARE BRIGHTNESS — locked side-nav pattern.
|
||||
No fills, no markers, no rules. Active = cream + 600 weight.
|
||||
Resting = muted. Selection is purely typographic.
|
||||
──────────────────────────────────────────────────────────── */
|
||||
.sideframe {
|
||||
display: grid; grid-template-columns: 200px 1fr;
|
||||
min-height: 360px;
|
||||
}
|
||||
.sidebar {
|
||||
background: var(--bg-shell, #1d2021);
|
||||
border-right: 1px solid var(--border, #7c6f64);
|
||||
padding: 12px 0;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.sb-product-name {
|
||||
padding: 4px 20px 16px;
|
||||
border-bottom: 1px solid var(--border-subtle, #665c54);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sb-section {
|
||||
padding: 14px 20px 6px;
|
||||
font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
|
||||
color: var(--fg-muted, #b8a98e); font-size: 9px;
|
||||
letter-spacing: 0.22em; text-transform: uppercase;
|
||||
}
|
||||
.sb-item {
|
||||
display: flex; align-items: center;
|
||||
height: 30px; padding: 0 20px;
|
||||
color: var(--fg-muted, #b8a98e);
|
||||
cursor: pointer;
|
||||
font-family: var(--font-body, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
||||
font-size: 13px;
|
||||
font-weight: 500; letter-spacing: 0.04em;
|
||||
transition: color var(--transition-hover, 150ms ease-out);
|
||||
}
|
||||
.sb-item:hover { color: var(--fg-body, #f2e2ba); }
|
||||
.sb-item.active { color: var(--fg-heading, #fbf1c7); font-weight: 600; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="page-head">
|
||||
<div class="eyebrow">Component · Navigation</div>
|
||||
<h1>Navigation</h1>
|
||||
<p>Selection lights up the existing structural rule rather than introducing new chrome. The topbar's bottom divider becomes gold under the active tab; the sidebar leans entirely on typographic contrast — cream & bold for active, muted for the rest.</p>
|
||||
</header>
|
||||
|
||||
<!-- ─────────────────────────── TOP TABS — LOCKED ─────────────────────────── -->
|
||||
<section class="pattern">
|
||||
<div class="pattern-head">
|
||||
<div class="pattern-num">01</div>
|
||||
<div class="pattern-title">Top Tabs</div>
|
||||
<div class="pattern-desc">Lit divider — the bottom rule glows gold under the active tab.</div>
|
||||
<div class="pattern-status status-locked">✓ Locked</div>
|
||||
</div>
|
||||
<div class="frame">
|
||||
<div class="topframe">
|
||||
<div class="topnav">
|
||||
<div class="product-name">Cybersteel</div>
|
||||
<div class="tab active">Dashboard</div>
|
||||
<div class="tab">Nodes</div>
|
||||
<div class="tab">Builds</div>
|
||||
<div class="tab">Alerts</div>
|
||||
<div class="tab">Logs</div>
|
||||
<div class="tab">Settings</div>
|
||||
</div>
|
||||
<div class="stub-content">CONTENT</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─────────────────────────── SIDE NAV — LOCKED ─────────────────────────── -->
|
||||
<section class="pattern">
|
||||
<div class="pattern-head">
|
||||
<div class="pattern-num">02</div>
|
||||
<div class="pattern-title">Side Nav</div>
|
||||
<div class="pattern-desc">Bare brightness — active item is cream & bold; rest are muted.</div>
|
||||
<div class="pattern-status status-locked">✓ Locked</div>
|
||||
</div>
|
||||
<div class="frame">
|
||||
<div class="sideframe">
|
||||
<nav class="sidebar">
|
||||
<div class="sb-product-name product-name">Cybersteel</div>
|
||||
<div class="sb-section">Operate</div>
|
||||
<div class="sb-item active">Dashboard</div>
|
||||
<div class="sb-item">Nodes</div>
|
||||
<div class="sb-item">Builds</div>
|
||||
<div class="sb-item">Alerts</div>
|
||||
<div class="sb-section">Inspect</div>
|
||||
<div class="sb-item">Logs</div>
|
||||
<div class="sb-item">Metrics</div>
|
||||
<div class="sb-item">Traces</div>
|
||||
<div class="sb-section">Configure</div>
|
||||
<div class="sb-item">Settings</div>
|
||||
<div class="sb-item">Members</div>
|
||||
</nav>
|
||||
<div class="stub-content">CONTENT</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,238 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Component States" subtitle="Flat 3-step states — locked in" viewport="800x380" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 24px 28px; background: var(--bg-page); font-family: var(--font-body); }
|
||||
|
||||
.section-label {
|
||||
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
|
||||
text-transform: uppercase; color: var(--fg-muted);
|
||||
margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.section { margin-bottom: 28px; }
|
||||
|
||||
/* ── BASE BUTTON ── */
|
||||
.btn {
|
||||
font-family: var(--font-body); font-size: 13px; font-weight: 700;
|
||||
letter-spacing: 0.07em; text-transform: uppercase;
|
||||
padding: 10px 22px; border-radius: var(--radius-md);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
|
||||
/* RELEASE transition — slightly slower, ease-out */
|
||||
transition:
|
||||
background 180ms ease-out,
|
||||
color 180ms ease-out,
|
||||
border-color 180ms ease-out,
|
||||
outline-color 180ms ease-out;
|
||||
-webkit-user-select: none; user-select: none;
|
||||
}
|
||||
|
||||
/* ── PRIMARY ── */
|
||||
.btn-primary {
|
||||
background: var(--gold-dim);
|
||||
color: var(--bg-shell);
|
||||
border-color: var(--gold-dim);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--gold-bright);
|
||||
border-color: var(--gold-bright);
|
||||
}
|
||||
.btn-primary:focus-visible {
|
||||
outline: 2px solid var(--gold-bright);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.btn-primary:active {
|
||||
/* PRESS transition — fast */
|
||||
transition:
|
||||
background 55ms ease-out,
|
||||
color 55ms ease-out,
|
||||
border-color 55ms ease-out;
|
||||
background: var(--fg-heading); /* nearly white-warm cream */
|
||||
color: var(--bg-shell); /* very dark — stays readable */
|
||||
border-color: var(--fg-heading);
|
||||
}
|
||||
|
||||
/* ── SECONDARY (ghost) ── */
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--fg-secondary);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: rgba(215,153,33,0.2); /* subtle gold tint */
|
||||
border-color: var(--gold-dim);
|
||||
color: var(--fg-body); /* text lightens — step 1 */
|
||||
}
|
||||
.btn-secondary:focus-visible {
|
||||
outline: 2px solid var(--gold-bright);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.btn-secondary:active {
|
||||
transition: background 55ms ease-out, color 55ms ease-out, border-color 55ms ease-out;
|
||||
background: var(--gold-bright); /* full bright fill */
|
||||
color: #ffffff; /* pure white */
|
||||
border-color: var(--gold-bright);
|
||||
}
|
||||
|
||||
/* ── DANGER ── */
|
||||
.btn-danger {
|
||||
background: transparent;
|
||||
color: var(--red-bright);
|
||||
border-color: var(--red-dim);
|
||||
}
|
||||
.btn-danger:hover {
|
||||
background: rgba(204,36,29,0.2); /* subtle red tint */
|
||||
border-color: var(--red-bright);
|
||||
color: var(--fg-body); /* text lightens — step 1 */
|
||||
}
|
||||
.btn-danger:focus-visible {
|
||||
outline: 2px solid var(--red-bright);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.btn-danger:active {
|
||||
transition: background 55ms ease-out, color 55ms ease-out, border-color 55ms ease-out;
|
||||
background: var(--red-bright); /* full bright fill */
|
||||
color: #ffffff; /* pure white */
|
||||
border-color: var(--red-bright);
|
||||
}
|
||||
|
||||
/* ── SUCCESS ── */
|
||||
.btn-success {
|
||||
background: transparent;
|
||||
color: var(--green-bright);
|
||||
border-color: var(--green-dim);
|
||||
}
|
||||
.btn-success:hover {
|
||||
background: rgba(152,151,26,0.2); /* subtle green tint */
|
||||
border-color: var(--green-bright);
|
||||
color: var(--fg-body); /* text lightens — step 1 */
|
||||
}
|
||||
.btn-success:focus-visible {
|
||||
outline: 2px solid var(--green-bright);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.btn-success:active {
|
||||
transition: background 55ms ease-out, color 55ms ease-out, border-color 55ms ease-out;
|
||||
background: var(--green-bright); /* full bright fill */
|
||||
color: #ffffff; /* pure white */
|
||||
border-color: var(--green-bright);
|
||||
}
|
||||
|
||||
/* ── DISABLED ── */
|
||||
.btn-disabled {
|
||||
background: var(--bg-active);
|
||||
color: var(--fg-muted);
|
||||
border-color: var(--border);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── LOADING ── */
|
||||
.btn-loading {
|
||||
background: var(--bg-active);
|
||||
color: var(--fg-muted);
|
||||
border-color: var(--border);
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.spinner {
|
||||
width: 9px; height: 9px;
|
||||
border: 1.5px solid var(--gold-dim);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.65s linear infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── DEMO LAYOUT ── */
|
||||
.demo-row {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 14px 16px; background: var(--bg-surface);
|
||||
border: 1px solid var(--border); border-radius: var(--radius-md);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.demo-label {
|
||||
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
|
||||
text-transform: uppercase; color: var(--fg-muted); width: 90px; flex-shrink: 0;
|
||||
}
|
||||
.demo-note {
|
||||
font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
|
||||
margin-left: auto; text-align: right; line-height: 1.4;
|
||||
}
|
||||
|
||||
/* SIZE VARIANTS */
|
||||
.btn-sm { font-size: 11px; padding: 6px 14px; }
|
||||
.btn-lg { font-size: 14px; padding: 12px 28px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-label">Interactive states — press and hold any button to see lit state</div>
|
||||
|
||||
<div class="demo-row">
|
||||
<div class="demo-label">Primary</div>
|
||||
<button class="btn btn-primary">Execute</button>
|
||||
<button class="btn btn-primary btn-sm">Run</button>
|
||||
<button class="btn btn-primary btn-lg">Initialize</button>
|
||||
<div class="demo-note">Press: --fg-heading fill (warm cream)<br>Text stays dark — readable</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-row">
|
||||
<div class="demo-label">Secondary</div>
|
||||
<button class="btn btn-secondary">Configure</button>
|
||||
<button class="btn btn-secondary btn-sm">Edit</button>
|
||||
<button class="btn btn-secondary btn-lg">Open Settings</button>
|
||||
<div class="demo-note">Hover: gold tint + text brightens<br>Press: gold-bright fill + white text</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-row">
|
||||
<div class="demo-label">Danger</div>
|
||||
<button class="btn btn-danger">Terminate</button>
|
||||
<button class="btn btn-danger btn-sm">Delete</button>
|
||||
<div class="demo-note">Hover: red tint + text brightens<br>Press: red-bright fill + white text</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-row">
|
||||
<div class="demo-label">Success</div>
|
||||
<button class="btn btn-success">Deploy</button>
|
||||
<button class="btn btn-success btn-sm">Confirm</button>
|
||||
<div class="demo-note">Hover: green tint + text brightens<br>Press: green-bright fill + white text</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-row">
|
||||
<div class="demo-label">Disabled</div>
|
||||
<button class="btn btn-disabled" disabled>Execute</button>
|
||||
<div class="demo-note">Opacity 0.5<br>pointer-events: none</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-row" style="margin:0">
|
||||
<div class="demo-label">Loading</div>
|
||||
<button class="btn btn-loading"><span class="spinner"></span>Working</button>
|
||||
<div class="demo-note">Spinner + neutral<br>cursor: not-allowed</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section" style="margin:0">
|
||||
<div class="section-label">Timing — press: 55ms ease-out · release: 180ms ease-out</div>
|
||||
<div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap">
|
||||
<div style="font-family:var(--font-mono);font-size:10px;color:var(--fg-caption);padding:10px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md)">
|
||||
<span style="color:var(--gold-dim)">:active</span> → transition: 55ms ease-out<br>
|
||||
<span style="color:var(--fg-muted)">release</span> → transition: 180ms ease-out<br>
|
||||
<span style="color:var(--fg-muted)">:hover </span> → transition: 150ms ease-out
|
||||
</div>
|
||||
<div style="font-family:var(--font-mono);font-size:10px;color:var(--fg-caption);padding:10px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md)">
|
||||
<span style="color:var(--gold-dim)">Lit color</span> = --fg-heading (#fbf1c7)<br>
|
||||
<span style="color:var(--fg-muted)">Text </span> = --bg-shell (#1d2021)<br>
|
||||
<span style="color:var(--fg-muted)">Ratio </span> ≈ 12:1 — passes AAA
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,965 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Browse the Cybersteel design-system reference gallery.">
|
||||
<title>Preview Index — Cybersteel</title>
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
:root {
|
||||
--gallery-width: 1240px;
|
||||
--gallery-gutter: clamp(20px, 5vw, 72px);
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
background:
|
||||
var(--gradient-scanline),
|
||||
radial-gradient(circle at 82% 0%, rgba(250, 189, 47, 0.08), transparent 31rem),
|
||||
var(--bg-page);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
z-index: 100;
|
||||
padding: 8px 12px;
|
||||
background: var(--gold-bright);
|
||||
color: var(--bg-shell);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--weight-semibold);
|
||||
transform: translateY(-160%);
|
||||
transition: transform var(--transition-ui);
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(100%, calc(var(--gallery-width) + (var(--gallery-gutter) * 2)));
|
||||
margin: 0 auto;
|
||||
padding-inline: var(--gallery-gutter);
|
||||
}
|
||||
|
||||
.masthead {
|
||||
background: rgba(29, 32, 33, 0.94);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.masthead-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 68px;
|
||||
gap: var(--space-panel);
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-component);
|
||||
color: var(--fg-heading);
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: var(--weight-bold);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.brand-context {
|
||||
padding-left: var(--space-component);
|
||||
border-left: 1px solid var(--gold-dim);
|
||||
color: var(--fg-muted);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
letter-spacing: var(--tracking-widest);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.system-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-element);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-caption);
|
||||
}
|
||||
|
||||
.state-light {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--green-bright);
|
||||
box-shadow: 0 0 0 3px rgba(184, 187, 38, 0.12);
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.65fr);
|
||||
gap: clamp(40px, 8vw, 108px);
|
||||
align-items: end;
|
||||
padding-block: clamp(64px, 9vw, 112px) clamp(52px, 7vw, 88px);
|
||||
}
|
||||
|
||||
.eyebrow,
|
||||
.section-index,
|
||||
.card-index,
|
||||
.search-label,
|
||||
.meta-label {
|
||||
font-family: var(--font-mono);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-component);
|
||||
margin-bottom: var(--space-cluster);
|
||||
color: var(--gold-bright);
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: var(--tracking-widest);
|
||||
}
|
||||
|
||||
.eyebrow::before {
|
||||
content: "";
|
||||
width: 34px;
|
||||
height: 1px;
|
||||
background: var(--gold-dim);
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
max-width: 760px;
|
||||
margin-bottom: var(--space-panel);
|
||||
font-size: clamp(44px, 7vw, 84px);
|
||||
line-height: 0.94;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: 680px;
|
||||
margin: 0;
|
||||
color: var(--fg-secondary);
|
||||
font-size: clamp(16px, 2vw, 19px);
|
||||
line-height: var(--leading-loose);
|
||||
}
|
||||
|
||||
.hero-copy strong {
|
||||
color: var(--fg-heading);
|
||||
font-weight: var(--weight-medium);
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
border: 1px solid var(--border);
|
||||
border-top-color: var(--gold-dim);
|
||||
background: rgba(60, 56, 54, 0.58);
|
||||
}
|
||||
|
||||
.stat {
|
||||
min-height: 112px;
|
||||
padding: var(--space-cluster);
|
||||
border-right: 1px solid var(--border-subtle);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.stat:nth-child(2n) {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.stat:nth-last-child(-n + 2) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
margin-bottom: var(--space-element);
|
||||
color: var(--fg-heading);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: var(--weight-semibold);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: var(--fg-muted);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
letter-spacing: var(--tracking-wider);
|
||||
line-height: var(--leading-normal);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.explorer-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
background: rgba(29, 32, 33, 0.97);
|
||||
border-block: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.explorer-controls {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
|
||||
gap: var(--space-panel);
|
||||
align-items: center;
|
||||
min-height: 86px;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-label {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: var(--space-group);
|
||||
color: var(--gold-dim);
|
||||
font-size: 10px;
|
||||
font-weight: var(--weight-semibold);
|
||||
letter-spacing: var(--tracking-widest);
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
min-height: 46px;
|
||||
padding: 11px 48px 11px 104px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-page);
|
||||
color: var(--fg-body);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
outline: none;
|
||||
transition: border-color var(--transition-hover), box-shadow var(--transition-hover);
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: var(--gold-bright);
|
||||
box-shadow: var(--shadow-gold);
|
||||
}
|
||||
|
||||
.search-key {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: var(--space-component);
|
||||
padding: 2px 6px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--fg-muted);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.category-nav {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-element);
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.category-nav a {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: var(--space-element);
|
||||
min-height: 38px;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--fg-caption);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase;
|
||||
transition: color var(--transition-hover), border-color var(--transition-hover), background var(--transition-hover);
|
||||
}
|
||||
|
||||
.category-nav a:hover {
|
||||
border-color: var(--gold-dim);
|
||||
background: rgba(215, 153, 33, 0.12);
|
||||
color: var(--fg-heading);
|
||||
}
|
||||
|
||||
.category-count {
|
||||
color: var(--gold-bright);
|
||||
}
|
||||
|
||||
main {
|
||||
padding-block: var(--space-region) var(--space-canvas);
|
||||
}
|
||||
|
||||
.gallery-section {
|
||||
scroll-margin-top: 116px;
|
||||
padding-block: 0 var(--space-zone);
|
||||
}
|
||||
|
||||
.gallery-section + .gallery-section {
|
||||
padding-top: var(--space-region);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: grid;
|
||||
grid-template-columns: 70px minmax(220px, 0.75fr) minmax(280px, 1fr);
|
||||
gap: var(--space-panel);
|
||||
align-items: start;
|
||||
margin-bottom: var(--space-block);
|
||||
}
|
||||
|
||||
.section-index {
|
||||
padding-top: 6px;
|
||||
color: var(--gold-dim);
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: var(--tracking-widest);
|
||||
}
|
||||
|
||||
.section-heading h2 {
|
||||
margin: 0;
|
||||
font-size: clamp(24px, 3vw, 36px);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
}
|
||||
|
||||
.section-heading p {
|
||||
max-width: 610px;
|
||||
margin: 3px 0 0;
|
||||
color: var(--fg-caption);
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--leading-loose);
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-group);
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 226px;
|
||||
flex-direction: column;
|
||||
padding: var(--space-panel);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(250, 189, 47, 0.045), transparent 48%),
|
||||
var(--bg-surface);
|
||||
transition:
|
||||
background var(--transition-hover),
|
||||
border-color var(--transition-hover),
|
||||
box-shadow var(--transition-hover),
|
||||
color var(--transition-hover);
|
||||
}
|
||||
|
||||
.preview-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -64px;
|
||||
bottom: -86px;
|
||||
width: 190px;
|
||||
height: 190px;
|
||||
border: 1px solid rgba(215, 153, 33, 0.13);
|
||||
transform: rotate(45deg);
|
||||
transition: border-color var(--transition-hover), transform var(--transition-hover);
|
||||
}
|
||||
|
||||
.preview-card:hover {
|
||||
border-color: var(--gold-dim);
|
||||
box-shadow: 0 0 0 3px rgba(215, 153, 33, 0.2);
|
||||
}
|
||||
|
||||
.preview-card:hover::after {
|
||||
border-color: rgba(250, 189, 47, 0.42);
|
||||
transform: rotate(45deg) translate(-4px, -4px);
|
||||
}
|
||||
|
||||
.preview-card:active {
|
||||
border-color: var(--gold-bright);
|
||||
background: rgba(215, 153, 33, 0.19);
|
||||
box-shadow: none;
|
||||
transition-duration: 55ms;
|
||||
}
|
||||
|
||||
.card-topline {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-component);
|
||||
margin-bottom: var(--space-block);
|
||||
}
|
||||
|
||||
.card-index {
|
||||
color: var(--fg-muted);
|
||||
font-size: 10px;
|
||||
letter-spacing: var(--tracking-widest);
|
||||
}
|
||||
|
||||
.card-badge {
|
||||
padding: 3px 7px;
|
||||
border: 1px solid var(--gold-dim);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--gold-bright);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 8px;
|
||||
letter-spacing: var(--tracking-wider);
|
||||
line-height: 1.4;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.preview-card h3 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: var(--space-component);
|
||||
color: var(--fg-heading);
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
||||
.preview-card p {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 520px;
|
||||
margin-bottom: var(--space-panel);
|
||||
color: var(--fg-secondary);
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--leading-normal);
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-group);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-element);
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
color: var(--fg-muted);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.meta-item + .meta-item::before {
|
||||
content: "◆";
|
||||
margin-right: var(--space-element);
|
||||
color: var(--gold-muted);
|
||||
font-size: 6px;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
|
||||
.card-arrow {
|
||||
display: grid;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--gold-bright);
|
||||
font-family: var(--font-mono);
|
||||
transition: background var(--transition-hover), border-color var(--transition-hover), color var(--transition-hover);
|
||||
}
|
||||
|
||||
.preview-card:hover .card-arrow {
|
||||
border-color: var(--gold-bright);
|
||||
background: var(--gold-bright);
|
||||
color: var(--bg-shell);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: none;
|
||||
padding: var(--space-region) var(--space-panel);
|
||||
border: 1px solid var(--border);
|
||||
border-left: 2px solid var(--gold-dim);
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
|
||||
.empty-state strong {
|
||||
display: block;
|
||||
margin-bottom: var(--space-element);
|
||||
color: var(--fg-heading);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.empty-state span {
|
||||
color: var(--fg-caption);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg-shell);
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 116px;
|
||||
gap: var(--space-panel);
|
||||
}
|
||||
|
||||
.footer-note {
|
||||
margin: 0;
|
||||
color: var(--fg-caption);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.footer-note strong {
|
||||
color: var(--fg-heading);
|
||||
font-weight: var(--weight-medium);
|
||||
}
|
||||
|
||||
.to-top {
|
||||
color: var(--gold-bright);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.explorer-controls {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-component);
|
||||
padding-block: var(--space-group);
|
||||
}
|
||||
|
||||
.category-nav {
|
||||
justify-content: flex-start;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
grid-template-columns: 50px 1fr;
|
||||
}
|
||||
|
||||
.section-heading p {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.shell {
|
||||
padding-inline: 18px;
|
||||
}
|
||||
|
||||
.system-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(42px, 15vw, 64px);
|
||||
}
|
||||
|
||||
.stats {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.section-index {
|
||||
display: block;
|
||||
margin-bottom: var(--space-element);
|
||||
}
|
||||
|
||||
.section-heading p {
|
||||
margin-top: var(--space-component);
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
min-height: 214px;
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
transition-duration: 0.01ms !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body id="top">
|
||||
<a class="skip-link" href="#gallery">Skip to gallery</a>
|
||||
|
||||
<header class="masthead">
|
||||
<div class="shell masthead-bar">
|
||||
<a class="brand" href="index.html" aria-label="Cybersteel preview index">
|
||||
<span class="brand-name">Cybersteel</span>
|
||||
<span class="brand-context">Preview Index</span>
|
||||
</a>
|
||||
<div class="system-state" aria-label="Reference gallery status">
|
||||
<span class="state-light" aria-hidden="true"></span>
|
||||
Reference set online
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shell hero">
|
||||
<div>
|
||||
<div class="eyebrow">Design system reference</div>
|
||||
<h1>Preview<br>Index</h1>
|
||||
<p class="hero-copy">
|
||||
Explore the complete visual language through <strong>16 focused references</strong>.
|
||||
Start with the foundations, inspect the type system, then move through structure,
|
||||
effects, components, and live interaction states.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="stats" aria-label="Gallery summary">
|
||||
<div class="stat"><span class="stat-value">16</span><span class="stat-label">Reference pages</span></div>
|
||||
<div class="stat"><span class="stat-value">04</span><span class="stat-label">System groups</span></div>
|
||||
<div class="stat"><span class="stat-value">07</span><span class="stat-label">Live demos</span></div>
|
||||
<div class="stat"><span class="stat-value">00</span><span class="stat-label">Remote assets</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="explorer-bar">
|
||||
<div class="shell explorer-controls">
|
||||
<div class="search-wrap">
|
||||
<label class="search-label" for="preview-search">Search</label>
|
||||
<input class="search-input" id="preview-search" type="search" placeholder="Color, type, states…" autocomplete="off" spellcheck="false">
|
||||
<span class="search-key" aria-hidden="true">/</span>
|
||||
</div>
|
||||
|
||||
<nav class="category-nav" aria-label="Preview categories">
|
||||
<a href="#foundations">Foundations <span class="category-count">03</span></a>
|
||||
<a href="#typography">Typography <span class="category-count">04</span></a>
|
||||
<a href="#structure">Structure <span class="category-count">03</span></a>
|
||||
<a href="#components">Components <span class="category-count">06</span></a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="shell" id="gallery">
|
||||
<section class="gallery-section" id="foundations" data-section>
|
||||
<div class="section-heading">
|
||||
<span class="section-index">01 / 04</span>
|
||||
<h2>Foundations</h2>
|
||||
<p>Core color primitives. Review the base surfaces, accent ramps, and semantic roles before applying the system.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-grid">
|
||||
<a class="preview-card" href="colors-base.html" data-card data-search="foundations color base palette background foreground surfaces text pairings gruvbox">
|
||||
<div class="card-topline"><span class="card-index">REF—01</span></div>
|
||||
<h3>Base Palette</h3>
|
||||
<p>Background and foreground ramps, default pairings, contextual text, and surface combinations.</p>
|
||||
<div class="card-footer">
|
||||
<div class="card-meta"><span class="meta-item">Color</span><span class="meta-item">Surfaces</span></div>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="preview-card" href="colors-accents.html" data-card data-search="foundations color accent gold red green blue teal orange aqua purple swatches ramps">
|
||||
<div class="card-topline"><span class="card-index">REF—02</span></div>
|
||||
<h3>Accent Colors</h3>
|
||||
<p>Bright, dim, and muted ramps for gold, red, green, blue, orange, aqua, and purple.</p>
|
||||
<div class="card-footer">
|
||||
<div class="card-meta"><span class="meta-item">Color</span><span class="meta-item">Ramps</span></div>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="preview-card" href="colors-semantic.html" data-card data-search="foundations semantic color primary success danger warning info disabled buttons text roles">
|
||||
<div class="card-topline"><span class="card-index">REF—03</span></div>
|
||||
<h3>Semantic Colors</h3>
|
||||
<p>Primary, success, danger, warning, info, and disabled roles shown across text and controls.</p>
|
||||
<div class="card-footer">
|
||||
<div class="card-meta"><span class="meta-item">Color</span><span class="meta-item">Roles</span></div>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="gallery-section" id="typography" data-section>
|
||||
<div class="section-heading">
|
||||
<span class="section-index">02 / 04</span>
|
||||
<h2>Typography</h2>
|
||||
<p>IBM Plex Sans carries the primary hierarchy. IBM Plex Mono handles code, logs, aligned data, and opt-in terminal surfaces.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-grid">
|
||||
<a class="preview-card" href="type-display.html" data-card data-search="typography display ibm plex sans hero heading subheading hierarchy scale">
|
||||
<div class="card-topline"><span class="card-index">REF—04</span></div>
|
||||
<h3>Display Type</h3>
|
||||
<p>Plex Sans display hierarchy across hero, heading, subheading, body, and light text treatments.</p>
|
||||
<div class="card-footer">
|
||||
<div class="card-meta"><span class="meta-item">Plex Sans</span><span class="meta-item">Display</span></div>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="preview-card" href="type-body.html" data-card data-search="typography body ibm plex sans scale prose paragraph labels captions">
|
||||
<div class="card-topline"><span class="card-index">REF—05</span></div>
|
||||
<h3>Body Type</h3>
|
||||
<p>Readable body sizing, weights, labels, captions, and supporting text within the core type scale.</p>
|
||||
<div class="card-footer">
|
||||
<div class="card-meta"><span class="meta-item">Plex Sans</span><span class="meta-item">Body</span></div>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="preview-card" href="type-mono.html" data-card data-search="typography mono terminal ibm plex mono code logs data timestamps console">
|
||||
<div class="card-topline"><span class="card-index">REF—06</span></div>
|
||||
<h3>Mono / Terminal</h3>
|
||||
<p>Plex Mono specimens for terminal output, code, logs, timestamps, and aligned operational data.</p>
|
||||
<div class="card-footer">
|
||||
<div class="card-meta"><span class="meta-item">Plex Mono</span><span class="meta-item">Data</span></div>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="preview-card" href="type-sans.html" data-card data-search="typography sans mono mode comparison opt-in terminal default hierarchy">
|
||||
<div class="card-topline"><span class="card-index">REF—07</span></div>
|
||||
<h3>Sans vs. Mono Mode</h3>
|
||||
<p>Side-by-side comparison of the default Sans system and the opt-in, fully terminal-styled Mono mode.</p>
|
||||
<div class="card-footer">
|
||||
<div class="card-meta"><span class="meta-item">Modes</span><span class="meta-item">Comparison</span></div>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="gallery-section" id="structure" data-section>
|
||||
<div class="section-heading">
|
||||
<span class="section-index">03 / 04</span>
|
||||
<h2>Structure & Effects</h2>
|
||||
<p>Layout rhythm and surface construction: the spacing scale, crisp border geometry, radius choices, and flat elevation model.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-grid">
|
||||
<a class="preview-card" href="spacing-tokens.html" data-card data-search="structure spacing tokens grid rhythm 4px 8px chip element component group panel section">
|
||||
<div class="card-topline"><span class="card-index">REF—08</span></div>
|
||||
<h3>Spacing Tokens</h3>
|
||||
<p>The complete 4–96px spacing scale, labeled by token and demonstrated in practical layout contexts.</p>
|
||||
<div class="card-footer">
|
||||
<div class="card-meta"><span class="meta-item">Spacing</span><span class="meta-item">8px Grid</span></div>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="preview-card" href="borders-radius.html" data-card data-search="structure effects border borders radius radii corners 6px spinner animation shape">
|
||||
<div class="card-topline"><span class="card-index">REF—09</span><span class="card-badge">Animated</span></div>
|
||||
<h3>Borders & Radius</h3>
|
||||
<p>Structural and semantic borders plus the radius scale across buttons, cards, inputs, and a loading spinner.</p>
|
||||
<div class="card-footer">
|
||||
<div class="card-meta"><span class="meta-item">Borders</span><span class="meta-item">Shape</span></div>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="preview-card" href="shadows-elevation.html" data-card data-search="structure effects shadows elevation flat surfaces hover press interactive cards border background">
|
||||
<div class="card-topline"><span class="card-index">REF—10</span><span class="card-badge">Interactive</span></div>
|
||||
<h3>Shadows & Elevation</h3>
|
||||
<p>Flat elevation through background and border changes, with interactive card hover and press behavior.</p>
|
||||
<div class="card-footer">
|
||||
<div class="card-meta"><span class="meta-item">Elevation</span><span class="meta-item">Effects</span></div>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="gallery-section" id="components" data-section>
|
||||
<div class="section-heading">
|
||||
<span class="section-index">04 / 04</span>
|
||||
<h2>Components & States</h2>
|
||||
<p>Reusable interface patterns and their behavior. Hover, focus, press, validation, loading, and disabled states are live where marked.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-grid">
|
||||
<a class="preview-card" href="components-buttons.html" data-card data-search="components buttons primary secondary danger ghost hover press interactive states controls">
|
||||
<div class="card-topline"><span class="card-index">REF—11</span><span class="card-badge">Interactive</span></div>
|
||||
<h3>Buttons</h3>
|
||||
<p>Primary, secondary, and danger controls with the three-step default, hover, and press treatment.</p>
|
||||
<div class="card-footer">
|
||||
<div class="card-meta"><span class="meta-item">Controls</span><span class="meta-item">Motion</span></div>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="preview-card" href="components-inputs.html" data-card data-search="components forms inputs select focus error success validation interactive halo fields">
|
||||
<div class="card-topline"><span class="card-index">REF—12</span><span class="card-badge">Interactive</span></div>
|
||||
<h3>Form Inputs</h3>
|
||||
<p>Text and select controls with focus, error, success, validation, and transition behavior.</p>
|
||||
<div class="card-footer">
|
||||
<div class="card-meta"><span class="meta-item">Forms</span><span class="meta-item">Validation</span></div>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="preview-card" href="components-cards.html" data-card data-search="components cards stat deploy alert surface clickable hover halo press interactive">
|
||||
<div class="card-topline"><span class="card-index">REF—13</span><span class="card-badge">Interactive</span></div>
|
||||
<h3>Cards</h3>
|
||||
<p>Static data surfaces and clickable cards, including stat, alert, deploy, hover, and press treatments.</p>
|
||||
<div class="card-footer">
|
||||
<div class="card-meta"><span class="meta-item">Surfaces</span><span class="meta-item">States</span></div>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="preview-card" href="components-badges.html" data-card data-search="components badges status online offline degraded error running complete failed labels indicators">
|
||||
<div class="card-topline"><span class="card-index">REF—14</span></div>
|
||||
<h3>Badges & Status</h3>
|
||||
<p>System, process, and neutral indicators for online, degraded, running, complete, failed, and labeled states.</p>
|
||||
<div class="card-footer">
|
||||
<div class="card-meta"><span class="meta-item">Status</span><span class="meta-item">Labels</span></div>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="preview-card" href="components-nav.html" data-card data-search="components navigation nav tabs top side hover active divider interactive states">
|
||||
<div class="card-topline"><span class="card-index">REF—15</span><span class="card-badge">Interactive</span></div>
|
||||
<h3>Navigation</h3>
|
||||
<p>Top-tab and side-navigation explorations with active selection, divider, and hover behavior.</p>
|
||||
<div class="card-footer">
|
||||
<div class="card-meta"><span class="meta-item">Navigation</span><span class="meta-item">Patterns</span></div>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="preview-card" href="components-states.html" data-card data-search="components states hover focus press release transition spinner loading disabled interactive motion buttons">
|
||||
<div class="card-topline"><span class="card-index">REF—16</span><span class="card-badge">Interactive</span></div>
|
||||
<h3>Component States</h3>
|
||||
<p>Live hover, focus, press, release, disabled, loading, spinner, and timing references in one matrix.</p>
|
||||
<div class="card-footer">
|
||||
<div class="card-meta"><span class="meta-item">States</span><span class="meta-item">Motion</span></div>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="empty-state" id="empty-state" role="status" aria-live="polite">
|
||||
<strong>No matching references.</strong>
|
||||
<span>Clear the search or use another system term.</span>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="shell footer-inner">
|
||||
<p class="footer-note"><strong>Cybersteel</strong> / Local reference gallery / No remote dependencies</p>
|
||||
<a class="to-top" href="#top">Return to top ↑</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var input = document.getElementById('preview-search');
|
||||
var cards = Array.prototype.slice.call(document.querySelectorAll('[data-card]'));
|
||||
var sections = Array.prototype.slice.call(document.querySelectorAll('[data-section]'));
|
||||
var emptyState = document.getElementById('empty-state');
|
||||
|
||||
function filterGallery() {
|
||||
var query = input.value.trim().toLowerCase();
|
||||
var visibleCount = 0;
|
||||
|
||||
cards.forEach(function (card) {
|
||||
var matches = !query || card.getAttribute('data-search').indexOf(query) !== -1 || card.textContent.toLowerCase().indexOf(query) !== -1;
|
||||
card.hidden = !matches;
|
||||
if (matches) visibleCount += 1;
|
||||
});
|
||||
|
||||
sections.forEach(function (section) {
|
||||
var hasVisibleCards = section.querySelector('[data-card]:not([hidden])');
|
||||
section.hidden = !hasVisibleCards;
|
||||
});
|
||||
|
||||
emptyState.style.display = visibleCount ? 'none' : 'block';
|
||||
}
|
||||
|
||||
input.addEventListener('input', filterGallery);
|
||||
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key === '/' && document.activeElement !== input) {
|
||||
event.preventDefault();
|
||||
input.focus();
|
||||
}
|
||||
if (event.key === 'Escape' && document.activeElement === input) {
|
||||
input.value = '';
|
||||
filterGallery();
|
||||
input.blur();
|
||||
}
|
||||
});
|
||||
}());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Shadows & Elevation" subtitle="Flat — bg+border elevation, interactive card demo" viewport="700x220" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 16px 20px; background: var(--bg-page); font-family: var(--font-body); }
|
||||
.section-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle); }
|
||||
.section { margin-bottom: 20px; }
|
||||
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
|
||||
|
||||
/* Elevation via bg + border only */
|
||||
.surface {
|
||||
border-radius: var(--radius-md); padding: 12px 14px;
|
||||
font-family: var(--font-mono); font-size: 10px; width: 120px;
|
||||
transition: background var(--transition-hover), border-color var(--transition-hover);
|
||||
}
|
||||
.surface-label { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 4px; }
|
||||
.surface-token { color: var(--fg-caption); }
|
||||
|
||||
.elev-page { background: var(--bg-page); border: none; }
|
||||
.elev-card { background: var(--bg-surface); border: 1px solid var(--border); }
|
||||
.elev-hover { background: var(--bg-surface); border: 1px solid var(--gold-dim); cursor: pointer; }
|
||||
.elev-active { background: var(--bg-active); border: 1px solid var(--gold-dim); cursor: pointer; }
|
||||
.elev-overlay { background: var(--bg-shell);border: 1px solid var(--gold-dim); }
|
||||
|
||||
/* Interactive card demo */
|
||||
.demo-card {
|
||||
background: var(--bg-surface); border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md); padding: 14px 16px; width: 160px;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-hover), border-color var(--transition-hover);
|
||||
}
|
||||
.demo-card:hover { border-color: var(--gold-dim); background: var(--bg-surface); }
|
||||
.demo-card:active {
|
||||
background: var(--bg-active); border-color: var(--gold-dim);
|
||||
transition: background var(--transition-press), border-color var(--transition-press);
|
||||
}
|
||||
.demo-card-title { font-weight: 700; font-size: 13px; color: var(--fg-heading); margin-bottom: 3px; }
|
||||
.demo-card-sub { font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-label">Elevation — bg + border only · no drop shadows</div>
|
||||
<div class="row">
|
||||
<div>
|
||||
<div class="surface elev-page"><div class="surface-label">Page</div><div class="surface-token">bg0 · no border</div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="surface elev-card"><div class="surface-label">Card / raised</div><div class="surface-token">bg1 · --border</div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="surface elev-hover"><div class="surface-label">Hover</div><div class="surface-token">bg1 · gold-dim</div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="surface elev-active"><div class="surface-label">Active / press</div><div class="surface-token">bg2 · gold-dim</div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="surface elev-overlay"><div class="surface-label">Overlay / modal</div><div class="surface-token">bg-hard · gold-dim</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section" style="margin:0">
|
||||
<div class="section-label">Interactive card — hover and press to see state changes</div>
|
||||
<div class="row">
|
||||
<div class="demo-card">
|
||||
<div class="demo-card-title">Node Alpha</div>
|
||||
<div class="demo-card-sub">99.97% · us-east-1</div>
|
||||
</div>
|
||||
<div style="font-family:var(--font-mono);font-size:10px;color:var(--fg-muted);line-height:1.8;padding-top:4px">
|
||||
Default: bg1 + --border<br>
|
||||
Hover: bg1 + gold-dim border<br>
|
||||
Press: bg2 + gold-dim border<br>
|
||||
<br>
|
||||
No shadow at any state.<br>
|
||||
Focus: 2px gold outline.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,280 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Spacing Tokens" subtitle="8px base grid — space-1 through space-24" viewport="700x200" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css?v=2">
|
||||
<style>
|
||||
body { margin: 0; padding: 16px 20px; background: var(--bg-page); font-family: var(--font-mono); color: var(--fg-body); }
|
||||
|
||||
.section-label { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 10px; }
|
||||
|
||||
/* Token rows */
|
||||
.token-row {
|
||||
display: grid;
|
||||
grid-template-columns: 160px 40px 1fr 220px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 7px 0;
|
||||
border-bottom: 1px solid var(--bg-surface);
|
||||
}
|
||||
.token-row:last-child { border-bottom: none; }
|
||||
.token-name { font-size: 10px; color: var(--fg-body); letter-spacing: 0.04em; }
|
||||
.token-val { font-size: 10px; color: var(--fg-muted); text-align: right; }
|
||||
.bar-track { height: 6px; background: var(--bg-surface); border-radius: 1px; position: relative; }
|
||||
.bar-fill { height: 100%; background: var(--gold-dim); border-radius: 1px; }
|
||||
.use-cases { font-size: 8px; color: var(--fg-muted); line-height: 1.5; letter-spacing: 0.02em; }
|
||||
|
||||
/* Demo area */
|
||||
.demo-section { margin-top: 16px; border-top: 1px solid var(--bg-surface); padding-top: 14px; }
|
||||
.demo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
|
||||
.demo-card {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--bg-active);
|
||||
border-radius: 4px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.demo-label { font-size: 8px; color: var(--gold-dim); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
|
||||
|
||||
/* Chip demo */
|
||||
.chip { display: inline-flex; align-items: center; gap: var(--space-chip); background: var(--bg-active); border-radius: 3px; padding: 2px var(--space-element); font-size: 9px; color: var(--fg-body); }
|
||||
.chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-bright); flex-shrink: 0; }
|
||||
|
||||
/* Button demo */
|
||||
.btn { display: inline-flex; align-items: center; gap: var(--space-element); border: 1px solid var(--gold-dim); border-radius: 3px; padding: var(--space-component) var(--space-group); font-size: 10px; font-family: var(--font-mono); color: var(--fg-body); background: transparent; cursor: pointer; }
|
||||
|
||||
/* Form field demo */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-component); }
|
||||
.field-label { font-size: 8px; color: var(--fg-muted); letter-spacing: 0.1em; text-transform: uppercase; }
|
||||
.field-input { background: var(--bg-shell); border: 1px solid var(--bg-border); border-radius: 3px; padding: var(--space-component) var(--space-group); font-size: 10px; font-family: var(--font-mono); color: var(--fg-body); }
|
||||
|
||||
/* Card demo */
|
||||
.demo-card-inner { background: var(--bg-shell); border: 1px solid var(--bg-active); border-radius: 4px; padding: var(--space-group); display: flex; flex-direction: column; gap: var(--space-component); }
|
||||
.card-title { font-size: 11px; font-weight: 600; color: var(--fg-heading); }
|
||||
.card-sub { font-size: 9px; color: var(--fg-muted); }
|
||||
|
||||
/* Panel demo */
|
||||
.demo-panel { background: var(--bg-shell); border-left: 2px solid var(--gold-dim); padding: var(--space-panel); display: flex; flex-direction: column; gap: var(--space-element); border-radius: 0 3px 3px 0; }
|
||||
.panel-header { font-size: 10px; font-weight: 600; color: var(--fg-heading); letter-spacing: 0.08em; text-transform: uppercase; }
|
||||
.panel-row { display: flex; justify-content: space-between; font-size: 9px; color: var(--fg-secondary); }
|
||||
|
||||
/* Section demo */
|
||||
.demo-sections { display: flex; flex-direction: column; gap: var(--space-section); }
|
||||
.section-block { background: var(--bg-shell); border-radius: 3px; padding: var(--space-group); border: 1px solid var(--bg-active); }
|
||||
.section-title { font-size: 10px; font-weight: 600; color: var(--fg-secondary); letter-spacing: 0.08em; }
|
||||
|
||||
/* Spacing indicator overlay */
|
||||
.space-indicator {
|
||||
display: inline-block;
|
||||
background: rgba(250,189,47,0.15);
|
||||
border: 1px dashed rgba(250,189,47,0.4);
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="section-label">Spacing tokens</div>
|
||||
|
||||
<!-- TOKEN TABLE -->
|
||||
<div style="margin-bottom: 16px;">
|
||||
<!-- MICRO -->
|
||||
<div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:4px;margin-top:2px;">Micro — component internals</div>
|
||||
|
||||
<div class="token-row">
|
||||
<div class="token-name">--space-chip</div>
|
||||
<div class="token-val">4px</div>
|
||||
<div class="bar-track"><div class="bar-fill" style="width:4%"></div></div>
|
||||
<div class="use-cases">badge padding · icon–label gap · border offsets · micro nudges</div>
|
||||
</div>
|
||||
<div class="token-row">
|
||||
<div class="token-name">--space-element</div>
|
||||
<div class="token-val">8px</div>
|
||||
<div class="bar-track"><div class="bar-fill" style="width:8%"></div></div>
|
||||
<div class="use-cases">chip/pill padding · inline gaps · icon inset · tight row spacing</div>
|
||||
</div>
|
||||
<div class="token-row">
|
||||
<div class="token-name">--space-component</div>
|
||||
<div class="token-val">12px</div>
|
||||
<div class="bar-track"><div class="bar-fill" style="width:12%"></div></div>
|
||||
<div class="use-cases">button vertical padding · input inset · list row gap · label-to-field</div>
|
||||
</div>
|
||||
|
||||
<!-- COMPONENT -->
|
||||
<div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:4px;margin-top:10px;">Component — internal layout</div>
|
||||
|
||||
<div class="token-row">
|
||||
<div class="token-name">--space-group</div>
|
||||
<div class="token-val">16px</div>
|
||||
<div class="bar-track"><div class="bar-fill" style="width:16%"></div></div>
|
||||
<div class="use-cases">card inset · input horizontal padding · form field gap · default gap</div>
|
||||
</div>
|
||||
<div class="token-row">
|
||||
<div class="token-name">--space-cluster</div>
|
||||
<div class="token-val">20px</div>
|
||||
<div class="bar-track"><div class="bar-fill" style="width:20%"></div></div>
|
||||
<div class="use-cases">grouped nav items · related form sections · compact panel inset</div>
|
||||
</div>
|
||||
<div class="token-row">
|
||||
<div class="token-name">--space-panel</div>
|
||||
<div class="token-val">24px</div>
|
||||
<div class="bar-track"><div class="bar-fill" style="width:24%"></div></div>
|
||||
<div class="use-cases">sidebar/panel inset · modal body · drawer padding · section subheader gap</div>
|
||||
</div>
|
||||
|
||||
<!-- LAYOUT -->
|
||||
<div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:4px;margin-top:10px;">Layout — between components & sections</div>
|
||||
|
||||
<div class="token-row">
|
||||
<div class="token-name">--space-block</div>
|
||||
<div class="token-val">32px</div>
|
||||
<div class="bar-track"><div class="bar-fill" style="width:32%"></div></div>
|
||||
<div class="use-cases">content block gaps · card grid gutter · toolbar height</div>
|
||||
</div>
|
||||
<div class="token-row">
|
||||
<div class="token-name">--space-content</div>
|
||||
<div class="token-val">40px</div>
|
||||
<div class="bar-track"><div class="bar-fill" style="width:40%"></div></div>
|
||||
<div class="use-cases">major content group spacing · dialog padding · sub-section gap</div>
|
||||
</div>
|
||||
<div class="token-row">
|
||||
<div class="token-name">--space-section</div>
|
||||
<div class="token-val">48px</div>
|
||||
<div class="bar-track"><div class="bar-fill" style="width:48%"></div></div>
|
||||
<div class="use-cases">page section breaks · feature group dividers · hero subheading gap</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE -->
|
||||
<div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:4px;margin-top:10px;">Page — large layout & full-bleed</div>
|
||||
|
||||
<div class="token-row">
|
||||
<div class="token-name">--space-region</div>
|
||||
<div class="token-val">64px</div>
|
||||
<div class="bar-track"><div class="bar-fill" style="width:64%; background:var(--bg-active)"></div></div>
|
||||
<div class="use-cases">hero vertical padding · layout area spacing · large feature gaps</div>
|
||||
</div>
|
||||
<div class="token-row">
|
||||
<div class="token-name">--space-zone</div>
|
||||
<div class="token-val">80px</div>
|
||||
<div class="bar-track"><div class="bar-fill" style="width:80%; background:var(--bg-active)"></div></div>
|
||||
<div class="use-cases">page-scale layout spacing · full-width section vertical rhythm</div>
|
||||
</div>
|
||||
<div class="token-row">
|
||||
<div class="token-name">--space-canvas</div>
|
||||
<div class="token-val">96px</div>
|
||||
<div class="bar-track"><div class="bar-fill" style="width:96%; background:var(--bg-active)"></div></div>
|
||||
<div class="use-cases">page margins · full-bleed hero top padding · maximum layout gutter</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LIVE DEMOS -->
|
||||
<div class="demo-section">
|
||||
<div class="section-label">In use</div>
|
||||
<div class="demo-grid">
|
||||
|
||||
<!-- Chip + button using micro spacing -->
|
||||
<div class="demo-card">
|
||||
<div class="demo-label">chip · space-chip + space-element</div>
|
||||
<div style="display:flex;flex-direction:column;gap:var(--space-element);">
|
||||
|
||||
<!-- space-chip annotated -->
|
||||
<div style="display:flex;align-items:center;font-size:8px;color:var(--fg-muted);gap:0;">
|
||||
<span style="white-space:nowrap">space-chip</span>
|
||||
<span style="margin:0 3px;color:var(--fg-muted)">→</span>
|
||||
<div class="chip-dot" style="width:5px;height:5px;border-radius:50%;background:var(--gold-bright);flex-shrink:0"></div>
|
||||
<div class="space-indicator" style="width:var(--space-chip);height:10px;"></div>
|
||||
<span style="font-size:9px;color:var(--fg-body)">ONLINE</span>
|
||||
</div>
|
||||
|
||||
<!-- space-element annotated -->
|
||||
<div style="display:flex;align-items:center;font-size:8px;color:var(--fg-muted);gap:0;">
|
||||
<span style="white-space:nowrap">space-element</span>
|
||||
<span style="margin:0 3px;color:var(--fg-muted)">→</span>
|
||||
<div class="chip" style="gap:0;padding:0 var(--space-element);">▶</div>
|
||||
<div class="space-indicator" style="width:var(--space-element);height:10px;"></div>
|
||||
<span style="font-size:9px;color:var(--fg-body)">Deploy</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form field using component spacing -->
|
||||
<div class="demo-card">
|
||||
<div class="demo-label">input · space-component label→field</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-start;gap:0;">
|
||||
<div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.1em;text-transform:uppercase;background:var(--bg-active);padding:2px 6px;border-radius:2px;">Target node</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;padding:0 4px;">
|
||||
<div class="space-indicator" style="width:8px;height:var(--space-component);"></div>
|
||||
<span style="font-size:8px;color:var(--fg-muted);">← space-component (12px)</span>
|
||||
</div>
|
||||
<div class="field-input" style="width:100%;box-sizing:border-box;">cluster-01 · us-east-1</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card vs Panel inset comparison -->
|
||||
<div class="demo-card" style="grid-column: span 2">
|
||||
<div class="demo-label">inset comparison · space-group (16px) vs space-panel (24px)</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
|
||||
|
||||
<!-- space-group -->
|
||||
<div>
|
||||
<div style="font-size:8px;color:var(--fg-muted);margin-bottom:4px;">space-group · compact card</div>
|
||||
<div style="position:relative;background:var(--bg-shell);border:1px solid var(--bg-active);border-radius:4px;display:flex;">
|
||||
<div class="space-indicator" style="width:var(--space-group);align-self:stretch;"></div>
|
||||
<div style="padding:var(--space-group) var(--space-group) var(--space-group) 0;flex:1;display:flex;flex-direction:column;gap:0;">
|
||||
<div class="space-indicator" style="height:var(--space-group);width:100%;margin-bottom:0;"></div>
|
||||
<div style="padding-bottom:var(--space-group);">
|
||||
<div class="card-title">Node Alpha — 07</div>
|
||||
<div class="card-sub" style="margin-top:var(--space-component);">CPU 34% · MEM 61%</div>
|
||||
</div>
|
||||
<div class="space-indicator" style="height:var(--space-group);width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:8px;color:var(--fg-muted);margin-top:4px;">← 16px on all sides</div>
|
||||
</div>
|
||||
|
||||
<!-- space-panel -->
|
||||
<div>
|
||||
<div style="font-size:8px;color:var(--fg-muted);margin-bottom:4px;">space-panel · open panel</div>
|
||||
<div style="position:relative;background:var(--bg-shell);border-left:2px solid var(--gold-dim);border-radius:0 4px 4px 0;display:flex;">
|
||||
<div class="space-indicator" style="width:var(--space-panel);align-self:stretch;"></div>
|
||||
<div style="padding:0 var(--space-panel) 0 0;flex:1;display:flex;flex-direction:column;gap:0;">
|
||||
<div class="space-indicator" style="height:var(--space-panel);width:100%;"></div>
|
||||
<div style="padding-bottom:var(--space-panel);">
|
||||
<div class="panel-header">System status</div>
|
||||
<div class="panel-row" style="margin-top:var(--space-element);"><span>Pipeline</span><span style="color:var(--gold-bright)">READY</span></div>
|
||||
<div class="panel-row"><span>Node 07</span><span style="color:var(--red-bright)">OFFLINE</span></div>
|
||||
</div>
|
||||
<div class="space-indicator" style="height:var(--space-panel);width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:8px;color:var(--fg-muted);margin-top:4px;">← 24px on all sides</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Two sections separated by space-section -->
|
||||
<div class="demo-card" style="grid-column: span 2">
|
||||
<div class="demo-label">page sections · space-section (48px between blocks)</div>
|
||||
<div style="display:flex;flex-direction:column;gap:0;">
|
||||
<div class="section-block">
|
||||
<div class="section-title">Overview</div>
|
||||
<div style="font-size:9px;color:var(--fg-muted);margin-top:4px">Cluster health · 12 nodes active</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:0 8px;">
|
||||
<div class="space-indicator" style="width:8px;height:var(--space-section);"></div>
|
||||
<div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.08em;">space-section · 48px</div>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<div class="section-title">Deploy log</div>
|
||||
<div style="font-size:9px;color:var(--fg-muted);margin-top:4px">Last deploy 14 min ago · pipeline v2.4.1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Body Type" subtitle="IBM Plex Mono body scale" viewport="700x160" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 16px 20px; background: var(--bg-page); }
|
||||
.row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px;
|
||||
border-bottom: 1px solid var(--border-subtle); padding-bottom: 8px; }
|
||||
.row:last-child { border: none; }
|
||||
.meta { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted);
|
||||
letter-spacing: 0.1em; width: 110px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="row"><div class="meta">15px / 400 sans</div><div style="font-family:var(--font-body);font-size:15px;color:var(--fg-body)">The system is operational. All services nominal.</div></div>
|
||||
<div class="row"><div class="meta">13px / 400 sans</div><div style="font-family:var(--font-body);font-size:13px;color:var(--fg-caption)">Secondary labels, captions, helper text.</div></div>
|
||||
<div class="row"><div class="meta">18px / 600 sans</div><div style="font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--fg-body)">Section Title</div></div>
|
||||
<div class="row"><div class="meta">11px / 600 / caps mono</div><div style="font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-muted)">Status · Active · Module · Online</div></div>
|
||||
<div class="row"><div class="meta">13px / 300 sans</div><div style="font-family:var(--font-body);font-size:13px;font-weight:300;color:var(--fg-muted)">Fine print, timestamps, version strings — v2.4.1-stable</div></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Display Type" subtitle="IBM Plex Mono — 48px, 28px, 18px, 14px, 13px" viewport="700x200" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 18px 20px; background: var(--bg-page); }
|
||||
.specimen { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
|
||||
.specimen:last-child { border: none; margin: 0; padding: 0; }
|
||||
.meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
|
||||
text-transform: uppercase; color: var(--fg-muted); margin-bottom: 5px; }
|
||||
.note {
|
||||
margin-top: 18px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-left: 2px solid var(--gold-dim);
|
||||
background: rgba(var(--bg-surface-rgb), 0.4);
|
||||
}
|
||||
.note .label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold-bright);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.note p {
|
||||
margin: 0;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: var(--fg-secondary);
|
||||
}
|
||||
.note code {
|
||||
color: var(--fg-heading);
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="specimen">
|
||||
<div class="meta">Display · 48px · 700 · IBM Plex Sans</div>
|
||||
<div style="font-family:var(--font-display);font-size:48px;font-weight:700;color:var(--fg-heading);line-height:1.05;letter-spacing:-0.02em">Cybersteel</div>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="meta">Display · 28px · 700 · uppercase</div>
|
||||
<div style="font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--fg-heading);letter-spacing:0.06em;text-transform:uppercase">Build Complete</div>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="meta">Subheading · 18px · 600</div>
|
||||
<div style="font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--fg-body)">Deploy pipeline ready</div>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="meta">Body · 14px · 400 · Plex Sans</div>
|
||||
<div style="font-family:var(--font-body);font-size:14px;font-weight:400;color:var(--fg-secondary);line-height:1.6">Node 07 offline — failover to node 08 complete. All traffic rerouted.</div>
|
||||
</div>
|
||||
<div class="specimen" style="border:none;margin:0;padding:0">
|
||||
<div class="meta">Light · 13px · 300</div>
|
||||
<div style="font-family:var(--font-body);font-size:13px;font-weight:300;color:var(--fg-caption)">Secondary labels, helper text, timestamps</div>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<div class="label">◆ Display · IBM Plex Sans</div>
|
||||
<p>
|
||||
Display, body, and condensed roles all resolve to <code>IBM Plex Sans</code> by default.
|
||||
For console / status / hardware-grade surfaces, flip to Mono mode with
|
||||
<code>class="mono-mode"</code> on the surface root — see <code>type-sans.html</code>.
|
||||
<code>--font-mono</code> is always Plex Mono for code, data, and timestamps.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Mono / Terminal Type" subtitle="IBM Plex Mono — terminal, logs, data" viewport="700x150" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 16px 20px; background: var(--bg-shell); }
|
||||
.block { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
|
||||
.block:last-child { border: none; margin: 0; padding: 0; }
|
||||
.label { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted);
|
||||
letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 5px; }
|
||||
.line { font-family: var(--font-mono); line-height: 1.7; font-size: 12px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="block">
|
||||
<div class="label">IBM Plex Mono — terminal / build output</div>
|
||||
<div class="line" style="color:var(--green-bright)">$ cybersteel build --release</div>
|
||||
<div class="line" style="color:var(--fg-caption)"> compiling core [████████████] 100%</div>
|
||||
<div class="line" style="color:var(--fg-secondary)"> linking 1.4s</div>
|
||||
<div class="line" style="color:var(--gold-bright)"> BUILD COMPLETE — 0 errors · 0 warnings</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="label">Log levels · timestamps · data values</div>
|
||||
<div class="line" style="color:var(--fg-secondary)">09:41:00 <span style="color:var(--blue-bright)">INFO </span> node-01 heartbeat OK · 2ms</div>
|
||||
<div class="line" style="color:var(--fg-secondary)">09:41:01 <span style="color:var(--orange-bright)">WARN </span> node-03 disk usage 84%</div>
|
||||
<div class="line" style="color:var(--fg-secondary)">09:41:02 <span style="color:var(--red-bright)">ERR </span> node-07 connection timeout</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,229 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="type-sans" subtitle="Sans (default) vs. Mono mode (opt-in)" viewport="720x1100" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 22px 24px;
|
||||
background: var(--bg-page);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--gold-dim);
|
||||
box-shadow: 0 1px 0 var(--border);
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.header h1 {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold-bright);
|
||||
margin: 0;
|
||||
}
|
||||
.header .meta {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.col {
|
||||
padding: 18px 20px;
|
||||
}
|
||||
.col + .col { border-left: 1px solid var(--border); }
|
||||
.col-head {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-muted);
|
||||
margin-bottom: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
.col-head .tag {
|
||||
font-size: 9px;
|
||||
color: var(--gold-bright);
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
.specimen {
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px dashed var(--border-subtle);
|
||||
}
|
||||
.specimen:last-child { border: none; margin: 0; padding: 0; }
|
||||
.label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.note {
|
||||
margin-top: 22px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-left: 2px solid var(--gold-dim);
|
||||
background: rgba(var(--bg-surface-rgb), 0.4);
|
||||
}
|
||||
.note .label {
|
||||
color: var(--gold-bright);
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: 0.2em;
|
||||
font-size: 10px;
|
||||
}
|
||||
.note p {
|
||||
margin: 0 0 8px;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
color: var(--fg-secondary);
|
||||
}
|
||||
.note p:last-child { margin: 0; }
|
||||
.note code {
|
||||
color: var(--fg-heading);
|
||||
font-weight: 500;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
}
|
||||
.note ul {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--fg-secondary);
|
||||
}
|
||||
.note li::marker { color: var(--gold-dim); }
|
||||
.note strong { color: var(--fg-heading); font-weight: 600; }
|
||||
|
||||
.swap {
|
||||
margin-top: 14px;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-shell);
|
||||
border: 1px solid var(--border);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--fg-body);
|
||||
overflow-x: auto;
|
||||
}
|
||||
.swap .c { color: var(--fg-muted); }
|
||||
.swap .k { color: var(--blue-bright); }
|
||||
.swap .v { color: var(--gold-bright); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<h1>◆ Type Modes · Sans vs Mono</h1>
|
||||
<div class="meta">Sans · Default · Mono · Opt-in</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<div class="col">
|
||||
<div class="col-head">
|
||||
<span style="font-family:var(--font-sans);text-transform:none;letter-spacing:0.04em;font-weight:600">Plex Sans · default</span>
|
||||
<span class="tag">DEFAULT</span>
|
||||
</div>
|
||||
|
||||
<div class="specimen">
|
||||
<div class="label">Display · 32 / 700</div>
|
||||
<div style="font-family:var(--font-sans);font-size:32px;font-weight:700;color:var(--fg-heading);letter-spacing:-0.01em;line-height:1.05">Build Complete</div>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="label">H2 · 22 / 600 · caps</div>
|
||||
<div style="font-family:var(--font-sans);font-size:22px;font-weight:600;color:var(--fg-heading);letter-spacing:0.06em;text-transform:uppercase">Deploy Pipeline</div>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="label">Body · 15 / 400</div>
|
||||
<div style="font-family:var(--font-sans);font-size:15px;font-weight:400;color:var(--fg-body);line-height:1.55">Node 07 offline. Failover to node 08 complete. All inbound traffic rerouted within 1.4 seconds. No data loss recorded.</div>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="label">Caption · 11 / 600 · caps · mono</div>
|
||||
<div style="font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-bright)">Status · Active · 1.4s</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col mono-mode">
|
||||
<div class="col-head">
|
||||
<span>Plex Mono · alt</span>
|
||||
<span class="tag">OPT-IN</span>
|
||||
</div>
|
||||
|
||||
<div class="specimen">
|
||||
<div class="label">Display · 32 / 700</div>
|
||||
<div style="font-family:var(--font-mono);font-size:32px;font-weight:700;color:var(--fg-heading);letter-spacing:-0.01em;line-height:1.05">Build Complete</div>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="label">H2 · 22 / 600 · caps</div>
|
||||
<div style="font-family:var(--font-mono);font-size:22px;font-weight:600;color:var(--fg-heading);letter-spacing:0.06em;text-transform:uppercase">Deploy Pipeline</div>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="label">Body · 14 / 400</div>
|
||||
<div style="font-family:var(--font-mono);font-size:14px;font-weight:400;color:var(--fg-body);line-height:1.55">Node 07 offline. Failover to node 08 complete. All inbound traffic rerouted within 1.4 seconds. No data loss recorded.</div>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="label">Caption · 11 / 600 · caps</div>
|
||||
<div style="font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-bright)">Status · Active · 1.4s</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<div class="label">◇ Default (Sans)</div>
|
||||
<p><strong>IBM Plex Sans</strong> is the primary face. Display, body, and condensed roles all resolve to it by default. Use it for documentation, dashboards, settings, forms, marketing pages, and any prose-heavy or proportional-label-heavy surface.</p>
|
||||
<p><code>--font-mono</code> is always <strong>IBM Plex Mono</strong> — code blocks, terminal output, data values, and timestamps stay monospaced regardless of mode.</p>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<div class="label">◇ When to switch to Mono mode</div>
|
||||
<ul>
|
||||
<li><strong>Console / terminal / IDE-like</strong> internal tools where the terminal aesthetic IS the point.</li>
|
||||
<li><strong>Status dashboards</strong> dominated by tabular, log-like, or numeric data.</li>
|
||||
<li><strong>Hero / masthead</strong> moments meant to feel hardware-grade and mechanical.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<div class="label">◇ How to switch</div>
|
||||
<p>Apply <code>.mono-mode</code> at the surface root. Children inherit. Display, body, and condensed all flip to Plex Mono.</p>
|
||||
<div class="swap"><span class="c">// whole app</span>
|
||||
<<span class="k">body</span> <span class="k">class</span>=<span class="v">"mono-mode"</span>> … </<span class="k">body</span>>
|
||||
|
||||
<span class="c">// or scope manually</span>
|
||||
:root {
|
||||
<span class="k">--font-display</span>: <span class="v">var(--font-mono)</span>;
|
||||
<span class="k">--font-body</span>: <span class="v">var(--font-mono)</span>;
|
||||
<span class="k">--font-condensed</span>: <span class="v">var(--font-mono)</span>;
|
||||
}</div>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<div class="label">◇ Rule</div>
|
||||
<p>One mode per application (or per major surface). <strong>Do not mix Sans and Mono body text on the same screen</strong> — the rhythm clash breaks the system. Mono for code, data, status badges, and timestamps is always allowed and expected, even in Sans surfaces.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user