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

# Shape & Spacing

> Radii, padding, and elevation conventions — and what is (deliberately) not tokenized

> [!NOTE]
>
> Unlike colors and typography, Sundial has **no central spacing/radius/shadow token file**. Shape and spacing are conventions enforced by the component themes in [`app_theme.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/app_theme.dart) and by the `Styled*` components themselves. This page documents those conventions as they exist in code.

## Corner radii

| Radius | Where |
| - | - |
| **16** | Elevated / outlined / text buttons, `StyledCard` (`kDefaultCardBorderRadius = 16.0`), `StyledTextField` |
| **8** | Filled buttons, dialogs |
| **12** | Menus |
| **24** | Styled bottom sheet card |
| **32** | Chips (fully pill at typical heights) |
| **Pill / stadium** | `StyledNavigationBar`, `StyledFloatingActionButton`, `StyledTabBar` |

The only *exported* radius constant is `kDefaultCardBorderRadius = 16.0` in [`styled_card.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/styled_card.dart). Everything else is inline in the component themes.

**Rule of thumb:** primary tappable surfaces and cards are 16; dense system surfaces (dialogs, filled buttons) are 8; anything navigational is a pill.

## Padding

Recurring values from the component themes:

| Padding | Where |
| - | - |
| `EdgeInsets.symmetric(vertical: 17, horizontal: 20)` | All button styles (elevated, outlined, text, filled) |
| `EdgeInsets.all(16)` | Input fields (`contentPadding`) |
| `EdgeInsets.all(20)` | `StyledCard` default content padding (`kDefaultCardPadding`) |
| `EdgeInsets.symmetric(vertical: 10, horizontal: 16)` | Chips |
| `EdgeInsets.all(8)` | Icon buttons (within a fixed 40×40 hit target) |

## Elevation & shadows

Sundial is intentionally **flat**: buttons set `elevation: 0`, the navigation bar sets `elevation: 0`, and surfaces communicate hierarchy through the `surfaceBg → surfaceElevated → surfaceHigh` color ladder instead of shadows.

The exception is `StyledCard`'s default (elevated) variant, which draws a subtle shadow derived from its `elevation` parameter (default `1.0`). The `.outlined()` and `.filled()` variants are shadowless.

## Sizing

| Value | Where |
| - | - |
| 40 × 40 | Icon button fixed size (24 px icon) |
| 24 | Standard icon size in buttons |
| 330 | Drawer width |
| 32 × 4 | Bottom-sheet drag handle |
| 4 | Slider track height (12 px thumb radius) |
| 40 | `ashToolbarHeight` — the `StyledAppBar` toolbar height |

## Layout spacing

Gaps between siblings use Flutter's modern `spacing` parameter rather than `SizedBox` separators:

```dart theme={null}
Column(
  spacing: 8,
  children: [/* … */],
)

Row(
  spacing: 12,
  children: [/* … */],
)
```

There is no enforced spacing scale; common values in the codebase are 4, 8, 12, 16, 20.

## Animation durations

Also not centrally tokenized — durations are declared where they're used (e.g. wallpaper image fade-in is 500 ms). When adding motion, match the durations of neighboring components rather than inventing new ones.

> [!NOTE]
>
> If a central spacing/radius/duration token file is ever introduced, it should live in `lib/design_system/tokens/` alongside the color and typography tokens — and this page should become a spec table like the others.


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