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

# Iconography

> Two icon systems: custom Ash SVG icons and the Material Symbols Rounded font

Sundial has **two icon systems**, used side by side:

> [card] AshIcons — custom SVGs
>
> 21 brand-specific icons (personas, activities, third-party brand marks) rendered by the `AshIcon` widget from `assets/icons/*.svg`.

> [card] Symbols — Material Symbols Rounded
>
> The full Material Symbols Rounded set as icon fonts, in outlined and filled variants, exposed as `IconData` constants.

## AshIcons (custom SVG)

Defined in [`components/ash_icon.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/ash_icon.dart). Each enum value maps to `assets/icons/{value}.svg`:

| Group | Icons |
| - | - |
| Brand mark | `ashFlower` |
| Activities | `activitiesFiveWhys`, `activitiesPies`, `activitiesValuesSort`, `activitiesRelationshipMapper` |
| Personas | `personaAsh`, `personaCircle`, `personaDiamond`, `personaHeart`, `personaTriangle` |
| Third-party brands | `brandApple`, `brandGoogle`, `brandOpenAI`, `brandReddit`, `brandSpotify`, `brandSteam`, `brandXTwitter`, `brandYouTube` |
| Features | `conversation`, `insights`, `weeklyInsights` |

```dart theme={null}
// Local asset icon, tinted with the current icon color
AshIcon(AshIcons.conversation, size: 24)

// Keep the SVG's own colors (brand logos)
AshIcon(AshIcons.brandGoogle, useOriginalColor: true)

// Remote SVG
AshIcon.network('https://…/icon.svg', size: 32)
```

Color and size resolve in this order: explicit parameter → surrounding `IconTheme` → `context.colorTheme.contrastStrong`. Unless `useOriginalColor: true`, the SVG is tinted via `ColorFilter.mode(color, BlendMode.srcIn)`.

> [!NOTE]
>
> **Adding an icon:** drop the SVG into `assets/icons/` and register it in the `AshIcons` enum — unregistered files can't be used. See [Contributing](https://design.slingshotai.com/patterns/contributing.md).

### Accessibility convention

`semanticLabel` defaults to `null`, which **hides the icon from screen readers** (decorative). Icon-only buttons should label at the button layer (e.g. `IconButton.tooltip`) instead of the icon, to avoid double announcements.

## Symbols (Material Symbols Rounded)

[`symbols.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/symbols.dart) is a **generated** glyph map (\~600 KB — don't edit by hand) exposing the complete Material Symbols Rounded set as `IconData`:

```dart theme={null}
// Outlined (default)
Icon(Symbols.settings)

// Filled variant — same name with a _filled suffix
Icon(Symbols.settings_filled)
```

Two icon fonts back it, declared in `pubspec.yaml`: `MaterialSymbolsRounded` (outlined) and `MaterialSymbolsRoundedFilled` (filled).

Use `Symbols.*` for general UI iconography; reserve `AshIcons` for brand-specific artwork that doesn't exist in Material Symbols.

## Related widgets

* [`AshIcon`](https://design.slingshotai.com/components/ash-icon) — the SVG icon widget
* [`AshLogo`](https://design.slingshotai.com/components/ash-logo) — the Ash wordmark/logo (`assets/icons/AshLogo.svg`), separate from the icon enum


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