Typography Inventory¶

Generated: Phase 1 - Read-only inventory Sources: sageox-mono, ox-cli Status: Draft - Do not consume

Font Families¶

Token	Value	Source
`--font-sans`	`var(--font-inter), "Inter", system-ui, -apple-system, sans-serif`	tokens/typography.yaml (families.sans)
`--font-heading` / `--font-serif`	`var(--font-hedvig), "Hedvig Letters Serif", Georgia, serif`	tokens/typography.yaml (families.heading)
`--font-mono`	`var(--font-spline-mono), "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace`	tokens/typography.yaml (families.mono)

Design Philosophy: Inter for UI and body, Hedvig Letters Serif for display and headings, Spline Sans Mono for code; tight line-heights, tabular numerals. (Source: tokens/typography.yaml, reconciled against sageox-monorepo origin/main:packages/ui/styles/fonts.css; see DDR-011)

Font Sizes¶

CSS Custom Properties¶

Token	Value	Pixels	Source
`--text-xs`	0.75rem	12px	sageox-mono/apps/web/src/styles/tokens.css:751
`--text-sm`	0.875rem	14px	sageox-mono/apps/web/src/styles/tokens.css:752
`--text-base`	1rem	16px	sageox-mono/apps/web/src/styles/tokens.css:753
`--text-lg`	1.125rem	18px	sageox-mono/apps/web/src/styles/tokens.css:754
`--text-xl`	1.25rem	20px	sageox-mono/apps/web/src/styles/tokens.css:755
`--text-2xl`	1.5rem	24px	sageox-mono/apps/web/src/styles/tokens.css:756
`--text-3xl`	1.875rem	30px	sageox-mono/apps/web/src/styles/tokens.css:757
`--text-4xl`	2.25rem	36px	sageox-mono/apps/web/src/styles/tokens.css:758
`--text-5xl`	3rem	48px	sageox-mono/apps/web/src/styles/tokens.css:759
`--text-6xl`	3.75rem	60px	sageox-mono/apps/web/src/styles/tokens.css:760

Semantic Typography Tokens (TYPOGRAPHY.md)¶

Token	Size	Pixels	Use Case	Source
`--text-display`	2.25rem	36px	Hero headlines, marketing pages	sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:14
`--text-h1`	1.5rem	24px	Page titles, main headings	sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:15
`--text-h2`	1.25rem	20px	Section headers, card headers	sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:16
`--text-h3`	1rem	16px	Card titles, subsection headers	sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:17
`--text-body`	0.875rem	14px	Default body text, paragraphs	sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:18
`--text-small`	0.75rem	12px	Captions, metadata, timestamps	sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:19
`--text-tiny`	0.625rem	10px	Badges, labels, tags	sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:20

Responsive Overrides¶

Breakpoint	Token	Value	Source
640px+	`--text-4xl`	2.5rem (40px)	sageox-mono/apps/web/src/styles/tokens.css:1289
640px+	`--text-5xl`	3.5rem (56px)	sageox-mono/apps/web/src/styles/tokens.css:1290
640px+	`--text-6xl`	4.5rem (72px)	sageox-mono/apps/web/src/styles/tokens.css:1291
1024px+	`--text-5xl`	4rem (64px)	sageox-mono/apps/web/src/styles/tokens.css:1298
1024px+	`--text-6xl`	5rem (80px)	sageox-mono/apps/web/src/styles/tokens.css:1299

Line Heights¶

Token	Value	Use Case	Source
`--leading-none`	1	Tight	sageox-mono/apps/web/src/styles/tokens.css:763
`--leading-tight`	1.25	Headings	sageox-mono/apps/web/src/styles/tokens.css:764
`--leading-snug`	1.375	Compact body	sageox-mono/apps/web/src/styles/tokens.css:765
`--leading-normal`	1.5	WCAG body text	sageox-mono/apps/web/src/styles/tokens.css:766
`--leading-relaxed`	1.625	Spacious	sageox-mono/apps/web/src/styles/tokens.css:767
`--leading-loose`	2	Very spacious	sageox-mono/apps/web/src/styles/tokens.css:768

Semantic Line Heights (TYPOGRAPHY.md)¶

Token	Value	Use Case	Source
`--line-height-display`	1.1	Display/headline (tight)	sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:53
`--line-height-heading`	1.25	All headings (H1-H3)	sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:54
`--line-height-body`	1.5	Body text (WCAG AA)	sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:55

Font Weights¶

Token	Value	Source
`--font-light`	300	sageox-mono/apps/web/src/styles/tokens.css:771
`--font-normal`	400	sageox-mono/apps/web/src/styles/tokens.css:772
`--font-medium`	500	sageox-mono/apps/web/src/styles/tokens.css:773
`--font-semibold`	600	sageox-mono/apps/web/src/styles/tokens.css:774
`--font-bold`	700	sageox-mono/apps/web/src/styles/tokens.css:775

Letter Spacing¶

Token	Value	Use Case	Source
`--tracking-tighter`	-0.05em	Very tight	sageox-mono/apps/web/src/styles/tokens.css:778
`--tracking-tight`	-0.025em	Headings	sageox-mono/apps/web/src/styles/tokens.css:779
`--tracking-normal`	0	Default	sageox-mono/apps/web/src/styles/tokens.css:780
`--tracking-wide`	0.025em	Slight expansion	sageox-mono/apps/web/src/styles/tokens.css:781
`--tracking-wider`	0.05em	Uppercase labels	sageox-mono/apps/web/src/styles/tokens.css:782
`--tracking-widest`	0.1em	Maximum	sageox-mono/apps/web/src/styles/tokens.css:783

Semantic Letter Spacing (TYPOGRAPHY.md)¶

Token	Value	Use Case	Source
`--letter-spacing-tight`	-0.02em	Headings	sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:89
`--letter-spacing-normal`	0	Body text	sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:90
`--letter-spacing-wide`	0.05em	Uppercase labels	sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:91

Typography Presets (TYPOGRAPHY.md)¶

Display Heading¶

.heading-display {
  font-size: var(--text-display);      /* 36px */
  line-height: var(--line-height-display); /* 1.1 */
  font-weight: 600;
  letter-spacing: -0.02em;
}

Source: sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:119-124

H1 - Page Title¶

.heading-1 {
  font-size: var(--text-h1);           /* 24px */
  line-height: var(--line-height-heading); /* 1.25 */
  font-weight: 600;
  letter-spacing: -0.02em;
}

Source: sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:127-132

H2 - Section Header¶

.heading-2 {
  font-size: var(--text-h2);           /* 20px */
  line-height: var(--line-height-heading); /* 1.25 */
  font-weight: 600;
}

Source: sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:135-139

H3 - Card Title¶

.heading-3 {
  font-size: var(--text-h3);           /* 16px */
  line-height: var(--line-height-heading); /* 1.25 */
  font-weight: 600;
}

Source: sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:142-146

Body Default¶

.body-default {
  font-size: var(--text-body);         /* 14px */
  line-height: var(--line-height-body); /* 1.5 */
  font-weight: 400;
}

Source: sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:149-153

Caption¶

.caption {
  font-size: var(--text-small);        /* 12px */
  line-height: var(--line-height-body); /* 1.5 */
  font-weight: 400;
}

Source: sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:156-160

Uppercase Label¶

.label-uppercase {
  font-size: var(--text-tiny);         /* 10px */
  line-height: var(--line-height-body); /* 1.5 */
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

Source: sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:163-169

Tabular Numerals¶

For consistent number alignment in tables and dashboards:

.font-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

Source: sageox-mono/apps/web/src/styles/tokens.css:1348-1351

When to use: - Data tables - Dashboard metrics - Financial data - Progress indicators - Timestamps with seconds - Version numbers in lists

TypeScript Theme Tokens¶

The tokens.ts file defines a "Stormy Morning" palette with different typography approach:

stormyPalette = {
  storm: { 50-900 scale },
  ocean: { 50-900 scale },
  sky: { 50-900 scale }
}

Source: sageox-mono/apps/web/src/theme/tokens.ts:13-53

Note: This appears to be an older/alternate theme system. The primary design system uses CSS custom properties in tokens.css.

CLI Typography¶

ox-cli uses terminal-specific typography via lipgloss:

Style	Properties	Source
StyleBold	Bold(true)	ox-cli/internal/cli/styles.go:84
StyleBrand	Foreground + Bold(true)	ox-cli/internal/cli/styles.go:51
CategoryStyle	Bold(true) + Foreground	ox-cli/internal/ui/styles.go:57

Terminal does not use font-size/line-height tokens - relies on terminal emulator settings.

Notes¶

Two Token Systems: CSS tokens use --text-* scale (xs-6xl), while TYPOGRAPHY.md uses semantic tokens (--text-display, --text-h1, etc.)
WCAG Compliance: Body text uses 1.5 line-height per WCAG AA requirements
Responsive Typography: Larger sizes scale up at 640px and 1024px breakpoints
Tabular Numerals: Critical for data-heavy interfaces (dashboards, tables)