dashbook
Foundations / Typography

Typography.

Three families. Eight semantic styles. Tabular figures everywhere a number appears. The class names are stable — use them, don't reach for ad-hoc font-size.

Family tokens
'PP Supply Mono', 'JetBrains Mono', ui-monospace, monospace
'Bai Jamjuree', 'Geist', ui-sans-serif, system-ui, sans-serif
'PP Supply Mono', 'Geist Mono', ui-monospace, SFMono-Regular, monospace
Semantic styles

Hand-applied via class. The lede on every page uses .body-lg; section labels use .section-header.

.heading-display
PP Supply Mono · 200 · clamp(2.5rem, 6vw, 4.5rem) · 0.9 · -0.01em · uppercase
BUILT FOR GROWTH
.page-label
PP Supply Mono · 0.75rem · 0.3em · uppercase · fg-muted
BRAND / LOGO
.section-header
PP Supply Mono · 0.6875rem · 500 · 0.15em · uppercase · fg-muted
PRODUCT PALETTE
.data-value
PP Supply Mono · 400 · -0.02em · tabular-nums
$2,408,210
.body-lg
Bai Jamjuree · 1.0625rem · 1.6
The most rewarding card for growing your business.
.body
Bai Jamjuree · 0.9375rem · 1.6
Spending data refreshed successfully.
.body-sm
Bai Jamjuree · 0.8125rem · 1.5 · fg-muted
Resets midnight UTC.
.caption
Bai Jamjuree · 0.75rem · 1.4 · fg-muted
Issuing-bank disclosure footnote.
Usage
svelte 
<h1 class="heading-display">Built for growth</h1>

<div class="page-label">Brand / Logo</div>
<div class="section-header">Product palette</div>

<span class="data-value tabular-nums">$2,408,210</span>

<p class="body-lg">The most rewarding card for growing your business.</p>
<p class="body">Spending data refreshed successfully.</p>
<p class="body-sm">Resets midnight UTC.</p>
<p class="caption">Issuing-bank disclosure footnote.</p>
Numerics
$1,240.00
Tabular figures

font-variant-numeric: tabular-nums is mandatory anywhere a number lives — currency, dates, counts, IDs, percentages. Default in .tabular-nums and on any element with data-numeric or data-mono.

$1,240.00
Proportional (avoid)

What it looks like without tabular-nums. Numerals shift by glyph width — sums don't align. Never ship this in a table.

Font delivery

Where to load each face from. Read this before porting to a non-Dash.fi stack.

  • PP Supply Mono

    Canonical display and label face for Dash.fi. Paywalled — Pangram Pangram commercial license, no public CDN. Self-hosted at https://brand.dash.fi/fonts/PPSupplyMono-Ultralight.otf for licensed Dash.fi properties only. Do not link from third-party origins.

  • JetBrains Mono (fallback)

    For non-Dash.fi stacks that cannot license PP Supply Mono, the closest open substitute is JetBrains Mono (Apache 2.0). Same monospaced rhythm, same tabular-figure behavior — only the personality differs.

    https://fonts.googleapis.com/css2?family=JetBrains+Mono:[email protected]&display=swap

  • Bai Jamjuree

    Body sans. OFL-licensed and safe to auto-link from Google Fonts on any origin.

    https://fonts.googleapis.com/css2?family=Bai+Jamjuree:[email protected]&display=swap

css 
/* Non-Dash.fi stack — JetBrains Mono fallback for PP Supply Mono */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:[email protected]&display=swap');

:root {
	--font-display: 'JetBrains Mono', ui-monospace, monospace;
	--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
	--font-sans: 'Bai Jamjuree', ui-sans-serif, system-ui, sans-serif;
}