74 lines
3.0 KiB
HTML
74 lines
3.0 KiB
HTML
<!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>
|