230 lines
7.9 KiB
HTML
230 lines
7.9 KiB
HTML
<!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>
|