21 lines
1.4 KiB
HTML
21 lines
1.4 KiB
HTML
|
<!doctype html>
|
|||
|
|
<!-- @dsCard group="Type" name="Type · Headings" subtitle="H1–H5 · PlexSans 500 · tight tracking" viewport="700x320" -->
|
|||
|
|
<html><head>
|
|||
|
|
<meta charset="utf-8"><title>Headings</title>
|
|||
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|||
|
|
<style>
|
|||
|
|
body { padding: 28px 32px; background: var(--paper); }
|
|||
|
|
.row { display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline; gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
|
|||
|
|
.row:last-child { border: 0; }
|
|||
|
|
.row .label { color: var(--fg-3); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
|
|||
|
|
.row h1, .row h2, .row h3, .row h4, .row h5 { margin: 0; }
|
|||
|
|
.row .spec { color: var(--fg-3); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em; }
|
|||
|
|
</style></head>
|
|||
|
|
<body>
|
|||
|
|
<div class="row"><span class="label">H1</span><h1>Prototype pipeline</h1><span class="spec">500 · 44 / 1.05</span></div>
|
|||
|
|
<div class="row"><span class="label">H2</span><h2>Stage 2 — Prototype card</h2><span class="spec">500 · 32 / 1.25</span></div>
|
|||
|
|
<div class="row"><span class="label">H3</span><h3>Learning question</h3><span class="spec">500 · 24 / 1.25</span></div>
|
|||
|
|
<div class="row"><span class="label">H4</span><h4>Smallest useful test</h4><span class="spec">500 · 20 / 1.25</span></div>
|
|||
|
|
<div class="row"><span class="label">H5</span><h5>Expected signal</h5><span class="spec">500 · 17 / 1.25</span></div>
|
|||
|
|
</body></html>
|