Migrated from Claude Design

2026-07-29 13:49:23 -07:00
parent be12d33fde
commit 96fc643cb7
37 changed files with 3888 additions and 2 deletions
@@ -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>