24 lines
1.7 KiB
HTML
24 lines
1.7 KiB
HTML
<!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>
|