Migrated from Claude Design
This commit is contained in:
Zachary Levy
@@ -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>
|
||||
Reference in New Issue
Block a user