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

# Reference Colors

> Layer 1 — Sundial 2.0 primitives: warm sand scales, alpha inks, lavender accent scales, brand flats, and status stops

Reference colors are Sundial's **primitives** — the raw material every other color token is built from. Sundial 2.0's primitives live in [`tokens/sundial_reference_colors.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/tokens/sundial_reference_colors.dart) as `abstract final class SundialRef`, structured on the [Radix Colors](https://www.radix-ui.com/colors) 12-step model: **same step = same job**, in light and dark alike.

> [!WARNING]
>
> Don't use reference colors directly in feature code. Use the [semantic tokens](https://design.slingshotai.com/foundations/colors/semantic.md) (`context.colorTheme.*`), which pick the right primitive for the current brightness. Legitimate direct uses are rare and deliberate — wallpaper palettes, pinned sign-in chrome, and the token definitions themselves.

## The 12-step model

Each scale is a `ColorSwatch<int>` keyed `1`–`12`. Steps are grouped into bands, and the band tells you the job:

| Steps | Band | Jobs |
| - | - | - |
| 1–2 | Canvas | App background, subtle tints |
| 3–5 | Components | Fills for bars, chips, inputs; resting → selected states |
| 6–8 | Borders | Separators, input borders, strong outlines |
| 9–10 | Solids | Bounded object fills — never text |
| 11–12 | Text | Secondary (lowest AA-safe) and primary content |

Movement **within** a band is a state change; crossing a band is a change of identity. One step off the canvas is a tint, not a boundary.

## Warm sand

The working neutral — sand warmed by an absolute Lab chroma delta (+1.06 at hue 85°) so mid steps stay grey-beige rather than tan. Step 3 is the spacing-true stop (`#F2F0ED`); the brand book's light beige lives separately as a [brand flat](#brand-flats).

**Light** (`SundialRef.sandLight`):

**Dark** (`SundialRef.sandDark`):

## Alpha inks

Each mode also carries a translucent **ink** scale (`sandAlphaLight`, `sandAlphaDark`): dark ink for light mode, light ink for dark mode. An alpha step composited over the mode's canvas reproduces the matching solid step — which means one ink works on *any* surface, picking up the surface's own hue in the composite. This is what powers pressed states (`ink/pressed`), scrims (`overlay/scrim` = light-alpha 11 in both modes), and the [on-brand secondary tier](https://design.slingshotai.com/foundations/colors/semantic.md#content).

## Lavender

The accent — a Radix **bright** scale (sky-templated), tuned periwinkle: step 9 is the *pale* brand solid `#DBE1FD`, anchored identically in both modes, and takes **dark** content. Steps 11–12 are the deep text tiers. The ramp was derived from that single anchor: each step is the previous lavender step moved by the same OKLCH hue shift (−10.6°), with chroma eased near the anchor and kept full on the deep steps, and lightness held so every step keeps its contrast.

> [!WARNING]
>
> This scale is non-monotonic by design: step 9 is lighter than step 8. Never assume step+1 = darker. Line and text stops (light 8, dark 11) are tuned to hold their contrast minimums on the step-5 *selected* surface, not just the canvas.

**Light** (`SundialRef.lavenderLight`):

**Dark** (`SundialRef.lavenderDark`):

## Brand flats

Mode-invariant spotlight colors from the Brand Guidelines, exposed as constants (`SundialRef.brandLavender`, `.brandGreen`, …):

Periwinkle `#DBE1FD` · Green `#9ED99D` · Orange `#F6CF98` · Yellow `#F5EAAC` · Dark Beige `#CEC5B8` · Light Beige `#F4F2EF` · White · Black.

> [!NOTE]
>
> Light beige is deliberately **not** warm sand step 3 (`#F2F0ED`): the scale keeps its spacing-true step while the brand color keeps the brand-book hex. Nearby, never interchangeable.

## Status stops

Cherry (error) and amber (warning) carry five stops each — `100 / 400 / 500 / 600 / 800` — enough for content, solid, border, and surface roles without a full ramp:

## The 1.0 `ReferenceColors` during migration

The 1.0 primitives ([`tokens/reference_colors.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/tokens/reference_colors.dart)) still exist while call sites migrate. The old brand flats (`sunflower`, `grass`, `tomato`, `sky`, `rock`, …) have been remapped **in place** to the nearest 2.0 brand color, so existing consumers already render 2.0 values; the parchment/wood/plum ramps are scheduled for deletion at the end of the migration.


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