Docs

Design

Typography

Font system, scales, and usage rules.

Font Stacks

TokenFontFallbackUsage
--sansHelvetica Neue LT (dashboard)-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serifBody text, UI labels
--displayHeyanik (dashboard)Georgia, serifHeadlines, display text
--monoJetBrains Monoui-monospace, Menlo, monospaceCode, IDs, timestamps, badges

Font Files

FontFileWeight
Helvetica Neue LT/fonts/Helvetica.woff2400 (regular)
Helvetica Neue LT Bold/fonts/Helvetica-Bold.woff2700 (bold)
Heyanik/fonts/Heyanik.woff2400 (display only)
JetBrains Monovia next/fontVariable

Type Scale

Dashboard

RoleSizeWeightLine HeightLetter Spacing
Page title (h1)22px600—-0.02em
Card title (h3)14-15px600——
Body13-14px4001.5—
Small / metadata12px400——
Badge / mono11px600——
Eyebrow / section10-12px600—0.06-0.1em
KPI value24px700—-0.02em
Code block12.5px4001.75—

Landing Page

RoleSizeWeightLine HeightLetter Spacing
Hero titleclamp(2.5rem, 5vw, 4rem)7001.05-0.025em
Section h2clamp(2rem, 3.6vw, 2.8rem)7001.1-0.025em
Section p1.15rem4001.65-0.01em
Body16.5px4001.65-0.01em
Small14px4001.5—
Eyebrow12px600—0.16em

Typography Classes

ClassFontUsage
.dfontDisplay font (Heyanik)Hero titles, brand text
.monoJetBrains MonoCode, IDs, timestamps
kbdJetBrains MonoKeyboard shortcuts

Text Colors

ContextTokenUsage
Primary textvar(--ink)Headings, strong labels
Body textvar(--soft)Descriptions, paragraphs
Secondaryvar(--muted)Metadata, secondary labels
Tertiaryvar(--faint)Timestamps, hints, disabled
On accentvar(--acc-ink)Text on accent buttons/badges
On dark bg#fffText on dark surfaces

Text Selection

css
::selection {
  background: var(--acc);
  color: var(--acc-ink);
}

Link Styling

  • Landing: Links inherit color, no underline by default. Hover: accent color.
  • Dashboard: Links inherit color, no underline. Accent color on hover.
  • Touch target: touch-action: manipulation to eliminate 300ms tap delay.