akefin-design-system/preview/type-display.html
2026-05-23 11:59:45 +09:00

22 lines
No EOL
1.2 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding:32px; }
.stack { display:flex; flex-direction:column; gap:14px; }
.row-spec { display:flex; align-items:baseline; justify-content:space-between; gap:24px; }
.spec { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-muted); white-space:nowrap; }
.d1 { font-family:"Spectral",serif; font-style:italic; font-weight:400; font-size:48px; line-height:1.1; color:#0A0907; letter-spacing:-0.01em; }
.d2 { font-family:"Spectral",serif; font-style:italic; font-weight:400; font-size:32px; line-height:1.1; color:#0A0907; }
</style>
</head>
<body>
<div class="stack">
<div class="row-spec"><span class="d1">Review the ledger.</span><span class="spec">Spectral 48 / italic / 400</span></div>
<div class="row-spec"><span class="d2">Why Akefin?</span><span class="spec">Spectral 32 / italic / 400</span></div>
</div>
<div class="legend" style="margin-top:14px">display serif · Spectral (substitute for Plantin MT Pro)</div>
</body></html>