> ## Documentation Index
> Fetch the complete documentation index at: https://design.slingshotai.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> This site documents Sundial 2.0, the design system of the Ash mobile app (Flutter). For implementing UI: use the Design System pages — color/typography tokens (foundations/*), Flutter theming (theming/*), and component APIs (components/*) — as your reference; every value there mirrors the Dart source in lib/design_system/. The Philosophy pages (philosophy/*) are design rationale written for humans: consult them when making design decisions, not for API lookups. Golden rules: never hardcode colors or text styles — read tokens via context.colorTheme and context.textTheme; prefer the 2.0 semantic names (contentPrimary, surfaceComponent, accentSolid…) over legacy contrast*/surface* getters and over SundialRef primitives; the accent is a single pale lavender solid that takes dark content — never use accent fills as text, icons, or borders (use contentAccent / borderSelected); brand surfaces are mode-invariant and pair with the contentOnBrand* inks; check lib/design_system/components/ before building custom widgets.

# Typography

> 15 text styles in 5 categories, set in Libertinus Serif and Inter (variable weight)

Sundial's type system is **15 tokens** — 5 categories × 3 sizes — defined in [`tokens/typography.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/tokens/typography.dart) as `DesignSystemTypography`, a `ThemeExtension` accessed via `context.textTheme`.

```dart theme={null}
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);
```

> [!WARNING]
>
> 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).

> [!NOTE]
>
> 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`:

```dart theme={null}
Text(
  'Welcome',
  style: context.textTheme.titleLarge.copyWith(
    color: context.colorTheme.contrastBold,
  ),
)
```

## Font assets

Declared in [`pubspec.yaml`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/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](https://design.slingshotai.com/foundations/iconography.md) |
| `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](https://design.slingshotai.com/theming/material-bridge.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.