ake/akefin-design-system
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
Alkim Ake Gozen 2026-05-23 11:59:45 +09:00
commit 8b790b7601
86 changed files with 6348 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

44
preview/_card.css Normal file
View file

@ -0,0 +1,44 @@
/* Shared preview-card scaffolding — keep cards minimal, no titles inside */
html, body { margin: 0; padding: 0; }
body {
font-family: "IBM Plex Sans", system-ui, sans-serif;
color: var(--fg);
background: var(--bg);
background-image:
linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
background-size: var(--grid-step) var(--grid-step);
padding: 24px;
box-sizing: border-box;
min-height: 100vh;
}
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 8px; }
.swatch {
display: flex; flex-direction: column; gap: 4px;
min-width: 88px;
}
.swatch .chip-color {
width: 100%; height: 56px;
border: 1px solid var(--rule);
border-radius: 2px;
}
.swatch .name {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
}
.swatch .val {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--fg);
}
.legend {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-muted);
}

13
preview/brand-entity-marks.html Normal file
View file

@ -0,0 +1,13 @@
<!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 { display:flex; align-items:center; padding:32px; }
</style>
</head>
<body>
<img src="../assets/entity-marks.svg" width="320" height="96" alt="Entity marks">
</body></html>

20
preview/brand-mark.html Normal file
View file

@ -0,0 +1,20 @@
<!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 { display:flex; align-items:center; gap:40px; padding:32px; }
.stack { display:flex; flex-direction:column; gap:8px; align-items:center; }
.lbl { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-muted); }
.mark-box { display:flex; align-items:center; justify-content:center; width:88px; height:88px; background:var(--paper); border:1px solid var(--rule); }
.mark-box.inverse { background:#1A1814; }
</style>
</head>
<body>
<div class="stack"><div class="mark-box"><img src="../assets/akefin-mark.svg" width="48" height="48" alt=""></div><div class="lbl">mark · on paper</div></div>
<div class="stack"><div class="mark-box inverse"><svg viewBox="0 0 48 48" width="48" height="48"><g fill="#ECE7DC"><rect x="6" y="14" width="6" height="28"/><rect x="12" y="8" width="6" height="6"/><rect x="18" y="8" width="6" height="6"/><rect x="24" y="14" width="6" height="28"/><rect x="12" y="26" width="12" height="6"/></g><rect x="36" y="36" width="6" height="6" fill="#2F7D55"/></svg></div><div class="lbl">mark · on ink</div></div>
<div class="stack"><div class="mark-box" style="width:32px;height:32px"><img src="../assets/favicon.svg" width="16" height="16" alt=""></div><div class="lbl">favicon · 16</div></div>
<div class="stack"><div class="mark-box" style="background:var(--surface)"><img src="../assets/akefin-mark.svg" width="48" height="48" alt=""></div><div class="lbl">on ink-grey</div></div>
</body></html>

18
preview/brand-wordmark.html Normal file
View file

@ -0,0 +1,18 @@
<!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 { display:flex; align-items:center; padding: 40px; }
.lockup { display:flex; flex-direction:column; gap:24px; }
.big { transform: scale(2); transform-origin: left center; }
</style>
</head>
<body>
<div class="lockup">
<div class="big"><img src="../assets/akefin-wordmark.svg" alt="Akefin"></div>
<div class="legend">primary lockup · monospaced wordmark · pixel monogram</div>
</div>
</body></html>

54
preview/colors-confidence.html Normal file
View file

@ -0,0 +1,54 @@
<!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>
.scale-bar { display:flex; height:10px; border-radius:999px; overflow:hidden; margin-top:8px; border:1px solid var(--rule); }
.scale-bar > div { flex:1; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
</style>
</head>
<body>
<div class="row">
<div class="swatch">
<div class="chip-color" style="background:#2F7D55;"></div>
<div class="name">rules · 1.00</div>
<div class="val">#2F7D55</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#2A6FB0;"></div>
<div class="name">high · ≥0.85</div>
<div class="val">#2A6FB0</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#B5740A;"></div>
<div class="name">mid · 0.70-0.85</div>
<div class="val">#B5740A</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#B8362B;"></div>
<div class="name">low · <0.70</div>
<div class="val">#B8362B</div>
</div>
</div>
<div class="chips">
<span class="chip rules">★ 1.00 RULES</span>
<span class="chip high">★ 0.92 LLM</span>
<span class="chip mid">★ 0.78 LLM</span>
<span class="chip low">★ 0.41 UNMATCHED</span>
</div>
<div class="legend" style="margin-top:14px">confidence spectrum · the only "decorative" colour in chrome</div>
<style>
.chip { display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 8px; font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500; letter-spacing:0.04em; border-radius:999px; font-variant-numeric:tabular-nums; }
.chip.rules { background:#DCE9DF; color:#2F7D55; }
.chip.high { background:#DCE5EE; color:#2A6FB0; }
.chip.mid { background:#EFE2C8; color:#B5740A; }
.chip.low { background:#ECD5D1; color:#B8362B; }
</style>
</body></html>

56
preview/colors-dark.html Normal file
View file

@ -0,0 +1,56 @@
<!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 { background:#13120F; background-image:
linear-gradient(to right, rgba(236,231,220,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(236,231,220,0.04) 1px, transparent 1px);
background-size:24px 24px; padding:24px; }
.swatch .name, .swatch .val, .legend { color:#A29B8C !important; }
.swatch .chip-color { border-color:#2A2620; }
</style>
</head>
<body>
<div class="row">
<div class="swatch">
<div class="chip-color" style="background:#13120F;"></div>
<div class="name">--bg</div>
<div class="val">#13120F</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#1B1E22;"></div>
<div class="name">--surface</div>
<div class="val">#1B1E22</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#1C1A16;"></div>
<div class="name">--paper</div>
<div class="val">#1C1A16</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#ECE7DC;"></div>
<div class="name">--fg</div>
<div class="val">#ECE7DC</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#A29B8C;"></div>
<div class="name">--fg-muted</div>
<div class="val">#A29B8C</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#2A2620;"></div>
<div class="name">--rule</div>
<div class="val">#2A2620</div>
</div>
</div>
<div class="legend" style="margin-top:14px">dark theme · inverted · same hierarchy</div>
</body></html>

42
preview/colors-entities.html Normal file
View file

@ -0,0 +1,42 @@
<!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>
.badge { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px 0 6px; font-family:"IBM Plex Sans",sans-serif; font-size:11px; font-weight:600; border-radius:2px; }
.badge::before { content:""; width:4px; height:13px; border-radius:1px; }
.b1 { background:#DCE5E5; color:#3D6E70; } .b1::before { background:#3D6E70; }
.b2 { background:#EFDDCB; color:#B4541A; } .b2::before { background:#B4541A; }
.b3 { background:#DEDAEE; color:#5A4FA3; } .b3::before { background:#5A4FA3; }
</style>
</head>
<body>
<div class="row">
<div class="swatch">
<div class="chip-color" style="background:#3D6E70;"></div>
<div class="name">personal</div>
<div class="val">#3D6E70</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#B4541A;"></div>
<div class="name">9tfox</div>
<div class="val">#B4541A</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#5A4FA3;"></div>
<div class="name">finacode</div>
<div class="val">#5A4FA3</div>
</div>
</div>
<div class="row" style="margin-top:14px; gap:8px;">
<span class="badge b1">Personal</span>
<span class="badge b2">9TFox</span>
<span class="badge b3">Finacode</span>
</div>
<div class="legend" style="margin-top:12px">accent only · never page tint · 4px stripe + tinted bg</div>
</body></html>

49
preview/colors-fg-ramp.html Normal file
View file

@ -0,0 +1,49 @@
<!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></style>
</head>
<body>
<div class="row">
<div class="swatch">
<div class="chip-color" style="background:#0A0907;"></div>
<div class="name">--fg-strong</div>
<div class="val">#0A0907</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#1A1814;"></div>
<div class="name">--fg</div>
<div class="val">#1A1814</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#5A5347;"></div>
<div class="name">--fg-muted</div>
<div class="val">#5A5347</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#8A8377;"></div>
<div class="name">--fg-subtle</div>
<div class="val">#8A8377</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#B5AE9F;"></div>
<div class="name">--fg-faint</div>
<div class="val">#B5AE9F</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#D5CFC2;"></div>
<div class="name">--rule</div>
<div class="val">#D5CFC2</div>
</div>
</div>
<div class="legend" style="margin-top:14px">foreground ramp on cream · 6-step warm grey</div>
</body></html>

49
preview/colors-neutrals.html Normal file
View file

@ -0,0 +1,49 @@
<!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></style>
</head>
<body>
<div class="row">
<div class="swatch">
<div class="chip-color" style="background:#ECE7DC;"></div>
<div class="name">--bg</div>
<div class="val">#ECE7DC</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#E2DCCC;"></div>
<div class="name">--bg-deep</div>
<div class="val">#E2DCCC</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#F5F1E8;"></div>
<div class="name">--paper</div>
<div class="val">#F5F1E8</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#EBEEF1;"></div>
<div class="name">--surface</div>
<div class="val">#EBEEF1</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#DEE3E8;"></div>
<div class="name">--surface-deep</div>
<div class="val">#DEE3E8</div>
</div>
<div class="swatch">
<div class="chip-color" style="background:#1A1814;"></div>
<div class="name">--black</div>
<div class="val">#1A1814</div>
</div>
</div>
<div class="legend" style="margin-top:14px">two-surface system · cream (paper) + ink-grey (data) · signature</div>
</body></html>

25
preview/colors-signed-amounts.html Normal file
View file

@ -0,0 +1,25 @@
<!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>
.row-data { display:grid; grid-template-columns: auto auto auto; gap:6px 32px; align-items:center; margin-top:6px; }
.lbl { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-muted); }
.amt { font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; font-size:16px; font-weight:500; text-align:right; }
.pos { color:#2F7D55; }
.neg { color:#1A1814; }
.warn { color:#B8362B; }
.ccy { color:#8A8377; font-weight:400; margin-left:6px; }
</style>
</head>
<body>
<div class="row-data">
<div class="lbl">income</div><div class="amt pos">+ 1,240,000<span class="ccy">KRW</span></div><div class="lbl">--amount-pos</div>
<div class="lbl">expense</div><div class="amt neg">− 38,500<span class="ccy">KRW</span></div><div class="lbl">--amount-neg</div>
<div class="lbl">unbalanced</div><div class="amt warn">! 12,300<span class="ccy">TRY</span></div><div class="lbl">--amount-warn</div>
<div class="lbl">multi-ccy</div><div class="amt neg">− 7,820<span class="ccy">JPY</span></div><div class="lbl">tabular nums</div>
</div>
<div class="legend" style="margin-top:14px">amounts · always right-aligned · always mono · signed · code follows</div>
</body></html>

30
preview/comp-buttons.html Normal file
View file

@ -0,0 +1,30 @@
<!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:28px; display:flex; flex-direction:column; gap:18px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; border:1px solid #B5AE9F; border-radius:2px; background:transparent; color:#1A1814; cursor:pointer; }
.btn:hover { background:rgba(26,24,20,0.06); }
.btn.primary { background:#1A1814; color:#ECE7DC; border-color:#1A1814; }
.btn.danger { color:#B8362B; border-color:#B8362B; }
.btn.bracket { border:none; padding:0; background:transparent; color:#1A1814; }
</style>
</head>
<body>
<div class="row">
<button class="btn primary">Approve</button>
<button class="btn">Override</button>
<button class="btn">Skip</button>
<button class="btn danger">Reject</button>
</div>
<div class="row">
<span class="btn bracket">[ APPROVE ]</span>
<span class="btn bracket">[ OVERRIDE ]</span>
<span class="btn bracket">[ SKIP ]</span>
</div>
<div class="legend">solid primary · ghost · bracket (pi.dev style) · danger</div>
</body></html>

29
preview/comp-confidence-chips.html Normal file
View file

@ -0,0 +1,29 @@
<!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:28px; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 10px; font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500; border-radius:999px; font-variant-numeric:tabular-nums; }
.chip.rules { background:#DCE9DF; color:#2F7D55; }
.chip.high { background:#DCE5EE; color:#2A6FB0; }
.chip.mid { background:#EFE2C8; color:#B5740A; }
.chip.low { background:#ECD5D1; color:#B8362B; }
.chip::before { content:"★"; }
</style>
</head>
<body>
<div class="row">
<span class="chip rules">1.00 RULES</span>
<span class="chip high">0.94 LLM</span>
<span class="chip high">0.87 LLM</span>
<span class="chip mid">0.78 LLM</span>
<span class="chip mid">0.71 AGENT</span>
<span class="chip low">0.41 AGENT</span>
<span class="chip low">— UNMATCHED</span>
</div>
<div class="legend" style="margin-top:14px">score + tier in one chip · star precedes value</div>
</body></html>

30
preview/comp-entity-badges.html Normal file
View file

@ -0,0 +1,30 @@
<!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:28px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.badge { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px 0 6px; font-family:"IBM Plex Sans",sans-serif; font-size:12px; font-weight:600; border-radius:2px; }
.badge::before { content:""; width:4px; height:13px; border-radius:1px; }
.b1 { background:#DCE5E5; color:#3D6E70; } .b1::before { background:#3D6E70; }
.b2 { background:#EFDDCB; color:#B4541A; } .b2::before { background:#B4541A; }
.b3 { background:#DEDAEE; color:#5A4FA3; } .b3::before { background:#5A4FA3; }
.strip { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; background:#F5F1E8; border:1px solid #D5CFC2; border-left:4px solid #3D6E70; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; }
</style>
</head>
<body>
<div class="row">
<span class="badge b1">Personal</span>
<span class="badge b2">9TFox</span>
<span class="badge b3">Finacode</span>
</div>
<div class="row" style="margin-top:14px">
<span class="strip">SCOPE · PERSONAL</span>
<span class="strip" style="border-left-color:#B4541A">SCOPE · 9TFOX</span>
<span class="strip" style="border-left-color:#5A4FA3">SCOPE · FINACODE</span>
</div>
<div class="legend" style="margin-top:12px">badge form · scope-strip form (top of page)</div>
</body></html>

29
preview/comp-iconography.html Normal file
View file

@ -0,0 +1,29 @@
<!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:28px; }
.row { display:flex; gap:24px; flex-wrap:wrap; }
.item { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:64px; }
.lbl { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.1em; color:#5A5347; }
svg.icon { color:#1A1814; }
</style>
</head>
<body>
<div class="row">
<div class="item"><svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg><span class="lbl">check</span></div>
<div class="item"><svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg><span class="lbl">x</span></div>
<div class="item"><svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg><span class="lbl">search</span></div>
<div class="item"><svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg><span class="lbl">chevron</span></div>
<div class="item"><svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg><span class="lbl">plus</span></div>
<div class="item"><svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6"></path></svg><span class="lbl">trash</span></div>
<div class="item"><svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"></path><path d="M12 7v5l3 2"></path></svg><span class="lbl">clock</span></div>
<div class="item"><svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"></rect><line x1="3" y1="10" x2="21" y2="10"></line></svg><span class="lbl">card</span></div>
<div class="item"><svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="22"></line><polyline points="19 15 12 22 5 15"></polyline></svg><span class="lbl">import</span></div>
<div class="item"><svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg><span class="lbl">activity</span></div>
</div>
<div class="legend" style="margin-top:14px">Lucide · 1.5px stroke · 20px chrome size · substitute for Akefin-native set</div>
</body></html>

38
preview/comp-import-status.html Normal file
View file

@ -0,0 +1,38 @@
<!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:20px; }
.bar { display:flex; height:14px; border-radius:2px; overflow:hidden; border:1px solid #D5CFC2; max-width:620px; }
.bar div { transition:all .2s; }
.legend { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#5A5347; display:flex; gap:18px; margin-top:10px; flex-wrap:wrap; }
.legend .dot { display:inline-block; width:8px; height:8px; margin-right:6px; vertical-align:1px; }
.row { display:flex; gap:20px; font-family:"JetBrains Mono",monospace; font-size:13px; margin-top:12px; }
.row .n { font-weight:600; color:#1A1814; }
.row .l { color:#5A5347; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; margin-left:6px; }
</style>
</head>
<body>
<div class="bar">
<div style="background:#2F7D55; width:62%"></div>
<div style="background:#2A6FB0; width:18%"></div>
<div style="background:#B5740A; width:14%"></div>
<div style="background:#B8362B; width:6%"></div>
</div>
<div class="legend">
<span><span class="dot" style="background:#2F7D55"></span>auto-accepted</span>
<span><span class="dot" style="background:#2A6FB0"></span>high</span>
<span><span class="dot" style="background:#B5740A"></span>review</span>
<span><span class="dot" style="background:#B8362B"></span>failed</span>
</div>
<div class="row">
<span><span class="n">247</span><span class="l">total</span></span>
<span><span class="n">153</span><span class="l">auto</span></span>
<span><span class="n">44</span><span class="l">high</span></span>
<span><span class="n">35</span><span class="l">review</span></span>
<span><span class="n">15</span><span class="l">failed</span></span>
</div>
</body></html>

24
preview/comp-inputs.html Normal file
View file

@ -0,0 +1,24 @@
<!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:24px; display:flex; flex-direction:column; gap:14px; max-width:560px; }
.field { display:flex; flex-direction:column; gap:4px; }
.lbl { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#5A5347; }
.input { height:32px; padding:0 10px; font-family:"IBM Plex Sans",sans-serif; font-size:13px; background:#ECE7DC; border:1px solid #B5AE9F; border-radius:2px; color:#1A1814; outline:none; }
.input.mono { font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; }
.input:focus { border-color:#3A6FB0; outline:2px solid #3A6FB0; outline-offset:1px; }
.row { display:flex; gap:10px; }
</style>
</head>
<body>
<div class="field"><span class="lbl">Search payee</span><input class="input" placeholder="스타벅스, E-Mart, Toss…"></div>
<div class="row">
<div class="field" style="flex:1"><span class="lbl">Amount</span><input class="input mono" value="38,500" style="text-align:right"></div>
<div class="field" style="width:90px"><span class="lbl">Ccy</span><input class="input mono" value="KRW"></div>
</div>
<div class="field"><span class="lbl">Account · focus state</span><input class="input mono" value="Personal:Expenses:Food:Coffee" style="border-color:#3A6FB0; outline:2px solid #3A6FB0; outline-offset:1px;"></div>
</body></html>

26
preview/comp-ledger-preview.html Normal file
View file

@ -0,0 +1,26 @@
<!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:24px; }
.preview { background:#EBEEF1; border:1px solid #D7DCE2; border-radius:2px; padding:14px 18px; font-family:"JetBrains Mono",monospace; font-size:13px; color:#2A2E33; font-variant-numeric:tabular-nums; }
.head { display:flex; gap:14px; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#6B7178; padding-bottom:6px; border-bottom:1px dashed #D7DCE2; margin-bottom:8px; }
.leg { display:grid; grid-template-columns:84px 1fr 110px 50px; gap:14px; line-height:1.7; }
.pos { color:#2F7D55; text-align:right; }
.neg { color:#1A1814; text-align:right; }
.ccy { color:#8A8377; }
</style>
</head>
<body>
<div class="preview">
<div class="head">2026-03-02 · "스타벅스 강남역점" · ★ 0.94 LLM</div>
<div class="leg">
<span>Personal</span><span>:Expenses:Food:Coffee</span><span class="neg">38,500</span><span class="ccy">KRW</span>
<span>Personal</span><span>:Assets:Bank:Toss</span><span class="pos">-38,500</span><span class="ccy">KRW</span>
</div>
</div>
<div class="legend" style="margin-top:12px">LedgerPreview · two-leg posting · monospace · debit / credit balance</div>
</body></html>

49
preview/comp-rule-suggestion.html Normal file
View file

@ -0,0 +1,49 @@
<!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:20px; }
.card { background:#F5F1E8; border:1px solid #D5CFC2; border-radius:3px; padding:14px 16px; max-width:620px; }
.top { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
.top .pattern { font-family:"JetBrains Mono",monospace; font-size:13px; }
.top .occ { font-family:"JetBrains Mono",monospace; font-size:11px; color:#5A5347; letter-spacing:0.06em; margin-left:auto; }
.map { display:flex; align-items:center; gap:8px; font-family:"JetBrains Mono",monospace; font-size:13px; padding:8px 10px; background:#EBEEF1; border:1px solid #D7DCE2; border-radius:2px; }
.arrow { color:#5A5347; }
.acct { color:#1A1814; }
.examples { display:flex; flex-direction:column; gap:2px; margin-top:8px; font-family:"JetBrains Mono",monospace; font-size:11px; color:#5A5347; }
.examples .pos { color:#1A1814; }
.row-btn { display:flex; gap:8px; margin-top:12px; align-items:center; }
.chip { display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500; border-radius:999px; background:#DCE5EE; color:#2A6FB0; }
.btn { font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; padding:6px 10px; border:1px solid #B5AE9F; border-radius:2px; background:transparent; cursor:pointer; }
.btn.primary { background:#1A1814; color:#ECE7DC; border-color:#1A1814; }
.check { display:flex; align-items:center; gap:6px; margin-left:auto; font-size:12px; color:#5A5347; }
.ko { font-family:"Pretendard",sans-serif; color:#1A1814; }
</style>
</head>
<body>
<div class="card">
<div class="top">
<span class="pattern">payee ~= <span class="ko">"스타벅스 *"</span></span>
<span class="occ">14 OCCURRENCES · LAST 30d</span>
</div>
<div class="map">
<span class="ko">스타벅스 *</span>
<span class="arrow">→</span>
<span class="acct">Personal:Expenses:Food:Coffee</span>
</div>
<div class="examples">
<div class="pos">2026-03-02 스타벅스 강남역점 − 38,500 KRW</div>
<div class="pos">2026-02-28 스타벅스 판교점 − 6,300 KRW</div>
<div>+ 12 more</div>
</div>
<div class="row-btn">
<span class="chip">★ 0.97 suggested</span>
<label class="check"><input type="checkbox" checked> promote</label>
<button class="btn primary">Apply rule</button>
<button class="btn">Dismiss</button>
</div>
</div>
</body></html>

29
preview/comp-terminal-frame.html Normal file
View file

@ -0,0 +1,29 @@
<!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:24px; }
.term { background:#EBEEF1; border:1px solid #D7DCE2; border-radius:2px; font-family:"JetBrains Mono",monospace; font-size:12px; color:#2A2E33; }
.title { display:flex; align-items:center; gap:8px; padding:6px 12px; border-bottom:1px solid #D7DCE2; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#6B7178; }
.title::after { content:""; width:6px; height:6px; border-radius:50%; background:#2F7D55; margin-left:auto; }
.body { padding:12px 14px; line-height:1.5; }
.k { color:#B5740A; }
.s { color:#2F7D55; }
.m { color:#8A8377; }
</style>
</head>
<body>
<div class="term">
<div class="title">AKEFIN — IMPORT 2026-03-02-001 <span style="margin-left:auto"></span></div>
<div class="body">
<div><span class="m">$</span> akefin import toss-export.csv --entity 9TFox</div>
<div class="m">read 247 rows · staged 23 · auto-accepted 220 · failed 4</div>
<div><span class="k">tier</span> rules <span class="s">218</span> · llm <span class="s">21</span> · agent <span class="s">4</span> · unmatched <span style="color:#B8362B">4</span></div>
<div class="m">→ ledger committed to git · 9tfox-2026-03.ldgr · 247 lines</div>
</div>
</div>
<div class="legend" style="margin-top:12px">terminal frame · the pi.dev-style data container</div>
</body></html>

18
preview/comp-tier-badges.html Normal file
View file

@ -0,0 +1,18 @@
<!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:28px; display:flex; gap:10px; align-items:center; }
.tier { display:inline-flex; align-items:center; height:20px; padding:0 8px; font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; border:1px solid currentColor; border-radius:2px; }
.t1 { color:#2F7D55; } .t2 { color:#2A6FB0; } .t3 { color:#B5740A; } .t4 { color:#B8362B; }
</style>
</head>
<body>
<span class="tier t1">Rules</span>
<span class="tier t2">LLM</span>
<span class="tier t3">Agent</span>
<span class="tier t4">Unmatched</span>
</body></html>

36
preview/comp-transaction-row.html Normal file
View file

@ -0,0 +1,36 @@
<!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:24px; }
.list { display:flex; flex-direction:column; gap:1px; background:#D5CFC2; border:1px solid #D5CFC2; border-radius:2px; }
.tx { display:grid; grid-template-columns: 92px 1fr auto auto auto auto; align-items:center; gap:14px; height:40px; padding:0 14px; background:#F5F1E8; font-size:13px; }
.when { font-family:"JetBrains Mono",monospace; font-size:12px; color:#5A5347; }
.payee { font-family:"Pretendard","IBM Plex Sans KR",sans-serif; color:#1A1814; }
.amt { font-family:"JetBrains Mono",monospace; font-size:13px; font-variant-numeric:tabular-nums; }
.ccy { color:#8A8377; margin-left:4px; }
.badge { display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 8px 0 6px; font-family:"IBM Plex Sans",sans-serif; font-size:11px; font-weight:600; border-radius:2px; }
.badge::before { content:""; width:4px; height:12px; border-radius:1px; }
.b1 { background:#DCE5E5; color:#3D6E70; } .b1::before { background:#3D6E70; }
.b2 { background:#EFDDCB; color:#B4541A; } .b2::before { background:#B4541A; }
.chip { display:inline-flex; align-items:center; gap:5px; height:18px; padding:0 8px; font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:500; border-radius:999px; font-variant-numeric:tabular-nums; }
.c-high { background:#DCE5EE; color:#2A6FB0; }
.c-mid { background:#EFE2C8; color:#B5740A; }
.c-low { background:#ECD5D1; color:#B8362B; }
.tier { display:inline-flex; height:18px; padding:0 6px; font-family:"JetBrains Mono",monospace; font-size:9px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; border:1px solid currentColor; border-radius:2px; align-items:center; }
.t-llm { color:#2A6FB0; }
.t-agent { color:#B5740A; }
.t-unm { color:#B8362B; }
</style>
</head>
<body>
<div class="list">
<div class="tx"><span class="when">2026-03-02</span><span class="payee">스타벅스 강남역점</span><span class="amt">− 38,500<span class="ccy">KRW</span></span><span class="badge b1">Personal</span><span class="chip c-high">★ 0.94</span><span class="tier t-llm">LLM</span></div>
<div class="tx"><span class="when">2026-03-02</span><span class="payee">이마트 트레이더스</span><span class="amt">− 124,300<span class="ccy">KRW</span></span><span class="badge b1">Personal</span><span class="chip c-mid">★ 0.78</span><span class="tier t-agent">Agent</span></div>
<div class="tx"><span class="when">2026-03-03</span><span class="payee">Wise · Finacode partner</span><span class="amt">+ 1,240<span class="ccy">EUR</span></span><span class="badge b2">9TFox</span><span class="chip c-low">★ —</span><span class="tier t-unm">Unmatched</span></div>
</div>
<div class="legend" style="margin-top:12px">TransactionRow · date · payee (KO) · amount · entity · chip · tier</div>
</body></html>

20
preview/spacing-radii.html Normal file
View file

@ -0,0 +1,20 @@
<!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; display:flex; gap:32px; align-items:flex-end; }
.stack { display:flex; flex-direction:column; gap:6px; align-items:center; }
.box { width:64px; height:64px; background:#1A1814; }
.lbl { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#5A5347; }
.val { font-family:"JetBrains Mono",monospace; font-size:11px; color:#1A1814; }
</style>
</head>
<body>
<div class="stack"><div class="box" style="border-radius:2px"></div><div class="lbl">r-sm</div><div class="val">2px</div></div>
<div class="stack"><div class="box" style="border-radius:3px"></div><div class="lbl">r-md</div><div class="val">3px</div></div>
<div class="stack"><div class="box" style="border-radius:4px"></div><div class="lbl">r-lg</div><div class="val">4px</div></div>
<div class="stack"><div class="box" style="border-radius:999px;width:96px;height:24px"></div><div class="lbl">r-pill</div><div class="val">chips only</div></div>
</body></html>

26
preview/spacing-rows.html Normal file
View file

@ -0,0 +1,26 @@
<!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:24px; }
.stack { display:flex; flex-direction:column; gap:8px; }
.row { display:flex; align-items:center; gap:16px; border:1px solid #D5CFC2; background:#F5F1E8; padding:0 14px; font-family:"IBM Plex Sans",sans-serif; font-size:13px; }
.row .when { font-family:"JetBrains Mono",monospace; font-size:12px; color:#5A5347; }
.row .amt { margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:13px; }
.row .lbl { color:#5A5347; }
.r-compact { height:32px; }
.r-default { height:40px; }
.r-roomy { height:48px; }
.tag { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#8A8377; min-width:88px; }
</style>
</head>
<body>
<div class="stack">
<div class="row r-compact"><span class="tag">32 · compact</span><span class="when">2026-03-02</span><span>review queue rows</span><span class="amt">− 38,500 KRW</span></div>
<div class="row r-default"><span class="tag">40 · default</span><span class="when">2026-03-02</span><span>primary list rows</span><span class="amt">+ 2,400,000 KRW</span></div>
<div class="row r-roomy"><span class="tag">48 · roomy</span><span class="when">2026-03-02</span><span>table headers / page tabs</span><span class="amt">— —</span></div>
</div>
</body></html>

27
preview/spacing-scale.html Normal file
View file

@ -0,0 +1,27 @@
<!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:24px; }
.scale { display:flex; flex-direction:column; gap:6px; }
.item { display:flex; align-items:center; gap:14px; font-family:"JetBrains Mono",monospace; font-size:11px; }
.bar { background:#1A1814; height:14px; }
.label { color:#5A5347; letter-spacing:0.08em; min-width:90px; }
.px { color:#1A1814; min-width:42px; }
</style>
</head>
<body>
<div class="scale">
<div class="item"><span class="label">--s-1</span><span class="px">4px</span><span class="bar" style="width:4px"></span></div>
<div class="item"><span class="label">--s-2</span><span class="px">8px</span><span class="bar" style="width:8px"></span></div>
<div class="item"><span class="label">--s-3</span><span class="px">12px</span><span class="bar" style="width:12px"></span></div>
<div class="item"><span class="label">--s-4</span><span class="px">16px</span><span class="bar" style="width:16px"></span></div>
<div class="item"><span class="label">--s-5</span><span class="px">24px</span><span class="bar" style="width:24px"></span></div>
<div class="item"><span class="label">--s-6</span><span class="px">32px</span><span class="bar" style="width:32px"></span></div>
<div class="item"><span class="label">--s-7</span><span class="px">40px</span><span class="bar" style="width:40px"></span></div>
<div class="item"><span class="label">--s-8</span><span class="px">56px</span><span class="bar" style="width:56px"></span></div>
</div>
</body></html>

19
preview/spacing-shadow.html Normal file
View file

@ -0,0 +1,19 @@
<!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:48px; display:flex; gap:48px; align-items:center; }
.stack { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.box { width:140px; height:80px; background:#F5F1E8; border:1px solid #D5CFC2; border-radius:3px; }
.pop { box-shadow: 0 1px 0 rgba(20,18,12,.04), 0 8px 24px -8px rgba(20,18,12,.16); }
.lbl { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#5A5347; }
</style>
</head>
<body>
<div class="stack"><div class="box"></div><div class="lbl">flat · default</div></div>
<div class="stack"><div class="box pop"></div><div class="lbl">popover · 8 24 -8</div></div>
<div class="stack"><div class="box" style="box-shadow:inset 0 1px 0 rgba(20,18,12,.18)"></div><div class="lbl">inset · press state</div></div>
</body></html>

22
preview/type-display.html Normal file
View file

@ -0,0 +1,22 @@
<!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>

20
preview/type-eyebrow.html Normal file
View file

@ -0,0 +1,20 @@
<!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; display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.eyebrow { font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:#5A5347; }
.term-title { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid #D7DCE2; background:#EBEEF1; }
.term-title::after { content:""; width:6px; height:6px; border-radius:50%; background:#2F7D55; margin-left:8px; }
</style>
</head>
<body>
<div class="eyebrow">HOME</div>
<div class="eyebrow">DOCS</div>
<div class="eyebrow">REVIEW QUEUE</div>
<div class="term-title eyebrow">PI - MANIPULATE THE WEBSITE</div>
<div class="eyebrow" style="color:#1A1814">[ READ THE DOCS ]</div>
</body></html>

24
preview/type-mono-amounts.html Normal file
View file

@ -0,0 +1,24 @@
<!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:28px; }
.ledger { background:#EBEEF1; border:1px solid #D7DCE2; border-radius:2px; padding:14px 16px; font-family:"JetBrains Mono",monospace; font-size:13px; line-height:1.5; color:#2A2E33; font-variant-numeric:tabular-nums; }
.ledger .pos { color:#2F7D55; }
.ledger .neg { color:#1A1814; }
.ledger .ccy { color:#6B7178; }
.ledger .acc { color:#1A1814; }
</style>
</head>
<body>
<div class="ledger">
<div>2026-03-02 Personal:Expenses:Food:Coffee <span class="neg">38,500</span> <span class="ccy">KRW</span></div>
<div>2026-03-02 Personal:Assets:Bank:Toss <span class="pos">-38,500</span> <span class="ccy">KRW</span></div>
<div>2026-03-03 9TFox:Income:Consulting <span class="pos">+2,400,000</span> <span class="ccy">KRW</span></div>
<div>2026-03-03 9TFox:Assets:Bank:Kakao <span class="neg">-2,400,000</span> <span class="ccy">KRW</span></div>
</div>
<div class="legend" style="margin-top:12px">mono · tabular nums · right-aligned amounts · ccy code, never symbol</div>
</body></html>

26
preview/type-sans-korean.html Normal file
View file

@ -0,0 +1,26 @@
<!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:28px; }
.stack { display:flex; flex-direction:column; gap:10px; }
.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); }
.ko { font-family:"Pretendard","IBM Plex Sans KR",sans-serif; }
.h1 { font-size:22px; font-weight:500; }
.body { font-size:14px; }
.data { font-family:"JetBrains Mono",monospace; font-size:13px; }
</style>
</head>
<body>
<div class="stack">
<div class="row-spec"><span class="ko h1">한국어 거래내역 검토</span><span class="spec">Pretendard 22 / 500</span></div>
<div class="row-spec"><span class="ko body">적요 · 스타벅스 강남역점</span><span class="spec">Pretendard 14 / 400</span></div>
<div class="row-spec"><span class="ko body">신한은행 입출금 통장 · KRW</span><span class="spec">14 / 400</span></div>
<div class="row-spec"><span class="data">이마트 트레이더스 · E-Mart Traders</span><span class="spec">mono inline label</span></div>
</div>
<div class="legend" style="margin-top:12px">Hangul · Pretendard · CJK + Latin coexistence</div>
</body></html>

27
preview/type-sans-latin.html Normal file
View file

@ -0,0 +1,27 @@
<!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:28px; }
.stack { display:flex; flex-direction:column; gap:10px; }
.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); }
.h1 { font-family:"IBM Plex Sans",sans-serif; font-size:22px; font-weight:500; }
.h2 { font-family:"IBM Plex Sans",sans-serif; font-size:18px; font-weight:500; }
.h3 { font-family:"IBM Plex Sans",sans-serif; font-size:15px; font-weight:600; }
.body { font-family:"IBM Plex Sans",sans-serif; font-size:14px; font-weight:400; }
.cap { font-family:"IBM Plex Sans",sans-serif; font-size:12px; color:#5A5347; }
</style>
</head>
<body>
<div class="stack">
<div class="row-spec"><span class="h1">Review queue</span><span class="spec">H1 · 22 / 500</span></div>
<div class="row-spec"><span class="h2">23 staged transactions</span><span class="spec">H2 · 18 / 500</span></div>
<div class="row-spec"><span class="h3">Auto-accepted</span><span class="spec">H3 · 15 / 600</span></div>
<div class="row-spec"><span class="body">A categorization rule was promoted.</span><span class="spec">Body · 14 / 400</span></div>
<div class="row-spec"><span class="cap">Last import 4 minutes ago</span><span class="spec">Caption · 12 / 400</span></div>
</div>
</body></html>