Typography

Sundial’s type system is 15 tokens — 5 categories × 3 sizes — defined in tokens/typography.dart as DesignSystemTypography, a ThemeExtension accessed via context.textTheme.

final typography = context.textTheme;

Text('Big heading', style: typography.displayLarge);
Text('Section title', style: typography.titleMedium);
Text('Body text', style: typography.bodyLarge);
Text('LABEL', style: typography.overlineSmall);

The fonts are Libertinus Serif and Inter. (Some older internal docs mention GoogleSans — that’s stale; the shipped app uses Inter.)

The two typefaces

Typeface	Role	Notes
Libertinus Serif	Display styles — large expressive headings	Regular (400). Asset: `LibertinusSerif-Regular.otf`
Inter	Everything else — titles, body, overlines, buttons	Variable font; weights applied via `FontVariation.weight(…)`, plus an italic asset

Weights are set with fontVariations: [FontVariation.weight(n)] rather than fontWeight. That’s what enables the body styles’ signature weight 425 — an in-between weight only a variable font can render.

Full spec

Token	Family	Weight	Size	Line height	Letter spacing
`displayLarge`	Libertinus Serif	400	40	1.0	−1.0
`displayMedium`	Libertinus Serif	400	36	1.0	−0.75
`displaySmall`	Libertinus Serif	400	32	1.0	−0.5
`titleLarge`	Inter	600	23	1.2	−0.25
`titleMedium`	Inter	600	20	1.2	−0.1
`titleSmall`	Inter	600	18	1.2	−0.1
`bodyLarge`	Inter	425	16	1.5	−0.25
`bodyMedium`	Inter	425	14	1.5	−0.25
`bodySmall`	Inter	425	12	1.5	−0.25
`overlineLarge`	Inter	500	16	1.2	+1.5
`overlineMedium`	Inter	500	14	1.2	+1.25
`overlineSmall`	Inter	500	12	1.2	+1.25
`buttonLarge`	Inter	600	18	1.2	−0.25
`buttonMedium`	Inter	600	14	1.2	−0.25
`buttonSmall`	Inter	600	10	1.2	−0.25

Notable details:

Overlines are the only styles with positive (wide) letter spacing — they’re for small uppercase-feel labels.
Display styles have a tight 1.0 line height; body styles breathe at 1.5.
Sizes are logical pixels; height is a multiplier of fontSize (Flutter semantics).

The samples on this site render in the docs theme’s fonts, not the app’s — refer to the spec table for exact metrics, or run the app to see the real thing.

Category guidance

Category	Use for
Display	Hero moments and emotional headings — Ash’s serif voice (letters, onboarding, insights)
Title	Screen and section titles, app bar titles
Body	Paragraphs, list content, general UI text
Overline	Small labels, eyebrow text, metadata
Button	Buttons, tabs, nav bar labels

Color variants

Three static instances:

DesignSystemTypography.base — colorless; the styles as pure metrics
DesignSystemTypography.light — every style colored parchment 800 (272725) — migrating to contentPrimary when the 1.0 ramps are deleted
DesignSystemTypography.dark — every style colored parchment 200 (DDDAD1)

AppTheme installs .light/.dark as the ThemeExtension, so context.textTheme styles arrive pre-colored for the current mode. Override color per-use with copyWith:

Text(
  'Welcome',
  style: context.textTheme.titleLarge.copyWith(
    color: context.colorTheme.contrastBold,
  ),
)

Font assets

Declared in pubspec.yaml under fonts::

Family	Assets	In the type system?
`Inter`	`Inter.ttf`, `Inter-Italic.ttf` (italic)	✅ titles, body, overlines, buttons
`LibertinusSerif`	`LibertinusSerif-Regular.otf`	✅ display
`LaBelleAurore`	`LaBelleAurore-Regular.ttf`	Decorative only (handwritten accents)
`RockSalt`	`RockSalt-Regular.ttf`	Decorative only
`MaterialSymbolsRounded`	`MaterialSymbolsRounded.ttf`	Icon font — see Iconography
`MaterialSymbolsRoundedFilled`	`MaterialSymbolsRounded_Filled.ttf`	Icon font (filled variant)

Material TextTheme bridge

AppTheme also maps these tokens into Flutter’s stock TextTheme so Material widgets and third-party code pick them up: DS display/title/body map to their Material namesakes, and DS overline styles fill Material’s label* slots — all colored contrastStrong. See Material bridge.

Getting Started

Craft and Foundations

Brand

Design System

For Agents

The two typefaces

Full spec

Category guidance

Color variants

Font assets

Material TextTheme bridge