22 lines
2.0 KiB
HTML
22 lines
2.0 KiB
HTML
<!-- @dsCard group="Type" viewport="700x210" name="Geist — UI sans scale" subtitle="Page titles, card titles, body, labels" -->
|
|
<!doctype html><html><head><meta charset="utf-8">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<style>
|
|
body{margin:0;background:var(--surface-app);font-family:var(--font-sans);color:var(--text-primary)}
|
|
.wrap{padding:22px 24px;display:flex;flex-direction:column;gap:15px}
|
|
.row{display:flex;align-items:baseline;gap:16px}
|
|
.meta{font:var(--text-2xs)/1 var(--font-mono);color:var(--text-disabled);margin-left:auto;white-space:nowrap}
|
|
</style></head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="row"><span style="font:var(--weight-semibold) var(--text-xl)/1 var(--font-sans);letter-spacing:-0.01em">Channels & Playouts</span><span class="meta">20 · 600 · Page title</span></div>
|
|
<div class="row"><span style="font:var(--weight-semibold) var(--text-lg)/1 var(--font-sans)">Recent activity</span><span class="meta">16 · 600 · Card title</span></div>
|
|
<div class="row"><span style="font:var(--weight-normal) var(--text-md)/1 var(--font-sans)">Emphasized body & input text</span><span class="meta">14 · 400 · Body md</span></div>
|
|
<div class="row"><span style="font:var(--weight-normal) var(--text-sm)/1 var(--font-sans)">Table cells and default body — the workhorse size</span><span class="meta">13 · 400 · Body sm</span></div>
|
|
<div class="row"><span style="font:var(--weight-medium) var(--text-xs)/1 var(--font-sans);color:var(--text-secondary)">Field labels, chips, secondary meta</span><span class="meta">12 · 500 · Label</span></div>
|
|
<div class="row"><span style="font:var(--weight-semibold) var(--text-2xs)/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--text-disabled)">Section eyebrow</span><span class="meta">11 · 600 · Caps</span></div>
|
|
</div>
|
|
</body></html>
|