> ## 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

> Design rationale: typography is non-negotiable — bad type kills otherwise good design

Typography is non-negotiable. Bad typography will kill an otherwise good design.

**Reference:** Paco Coursey's work. Minimal and focused. Hierarchy is achieved through the fewest possible changes — font weight and color contrast, nothing more. No decorative type treatments unless they serve a clear purpose.

## Rules

* Establish a clear typographic hierarchy and follow it consistently.
* Achieve contrast through **weight and color**, not by multiplying font sizes or styles.
* Every typographic choice must be intentional and justifiable.
* When in doubt, do less.
* **Define a constrained type scale and use only values from it.** Don't hand-pick arbitrary font sizes. In Sundial that scale is the [15 typography tokens](https://design.slingshotai.com/foundations/typography.md) — 5 categories × 3 sizes, full stop.
* Keep body text line length between **45–75 characters**. Wider degrades readability.
* **Line-height is contextual**: tighter for large headings (1–1.2), looser for body (1.5–2). One line-height for everything will always feel wrong somewhere. Sundial encodes this: display styles are 1.0, body is 1.5, titles/overlines/buttons 1.2.
* When mixing font sizes on the same line, **align by baseline**, not center.
* Not every link needs a color treatment. In navigation or obviously interactive contexts, weight or underline-on-hover is cleaner than link-blue.
* Right-align numbers in tables and use **tabular figures** so columns line up.

## Line length and line height, precisely

| Context | Line height | Notes |
| - | - | - |
| Body text (45–75ch) | 1.5–1.75 | Standard readable prose |
| Short-line text (under 40ch) | 1.4–1.5 | Captions, sidebars |
| Large headings | 1.1–1.3 | Headings read as units — Sundial display styles sit at 1.0 |
| UI labels and buttons | 1–1.25 | Single-line, compact |

Headings have line-length limits too — roughly 20–30 characters for large display sizes. Don't run any text the full width of a large viewport.

## In Sundial

The type system already embodies these rules — your job is to not fight it:

* Use `context.textTheme` tokens only; never construct a `TextStyle` with a hand-picked size.
* The two-typeface split is intentional: **Libertinus Serif** display styles are Ash's warm voice for hero moments; **Inter** does everything functional. Don't use display styles for UI chrome.
* The body weight of **425** exists precisely to tune contrast between body and semibold titles — respect it rather than bolding body text.


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