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

# Accent Colors

> Layer 3 — the single lavender accent and its bright-solid grammar (personas retired)

Sundial 2.0 has **one accent: Periwinkle** (`#DBE1FD`), the brand lead — it replaced Lavender Blue `#CDCCF0` in October 2026. The code keeps the `lavender` names. The persona system — five palettes recoloring the app per selected persona — was retired with 2.0; `AccentPalette`, `AppTheme.fromPalette`, and the palette machinery are gone. Defined in [`tokens/accent_colors.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/tokens/accent_colors.dart) as two instances, `AccentColors.lavenderLight` and `.lavenderDark`, installed by the matching theme.

## The bright-accent grammar

Lavender is a Radix **bright** scale: the accent solid is *pale* and takes *dark* content — the inverse of 1.0's dark plum grammar.

| Field | 2.0 token | Value |
| - | - | - |
| `accent.button` | `accentSolid` | Lavender 9 `#DBE1FD`, invariant |
| `accent.onButton` | `contentOnAccent` | Pure black `#000000` (`brandBlack`), invariant — the solid is invariant, so its content is too |
| `accent.secondary` | `contentAccent` | Lavender-light 12 `#252C4A` / lavender-dark 11 `#8F9BD2` — light step 11 reads royal blue as text |
| — | `accentLine` | Lavender-light 8 `#6977B5` / lavender-dark 11 `#8F9BD2` — outlines, checkboxes, progress; 3:1, never text |
| `accent.background` | — | Lavender 3 tint — selection fills, chip tints |
| `accent.base` | — | A `ColorSwatch` for legacy call sites; its **default value is the accent content tier** (light 12, dark 11), so bare `accent.base` reads (spinners, progress) stay legible |

> [!WARNING]
>
> `accent.button` is a **surface**, not a foreground. Using it for text, icons, borders, or rings on light surfaces yields \~1.2:1 contrast — this was the largest class of bugs found in the 2.0 audit. Text and glyphs take `contentAccent`; accent line work (outlines, checkboxes, progress) takes `accentLine`; selection borders take `borderSelected`.

## Migration path

The `accent.*` fields are the legacy API. During the rename phase they migrate to the semantic tokens directly (`accentSolid`, `contentOnAccent`, `contentAccent`), after which `AccentColors` is deleted. New code should use the semantic names now.


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