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

# Wallpapers

> The Wallpaper system: solid brand colors, server-supplied imagery, and vector gradient blobs

Wallpapers are Sundial's decorative background system — used behind cards, list tiles, and hero surfaces. The model is a sealed class hierarchy in [`components/ash_wallpaper.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/ash_wallpaper.dart) rendered by the [`AshWallpaper`](https://design.slingshotai.com/components/ash-wallpaper) widget:

```dart theme={null}
sealed class Wallpaper {}

class SolidWallpaper implements Wallpaper { … }   // flat brand color
class ImageWallpaper implements Wallpaper { … }   // remote image by URL
class VectorWallpaper implements Wallpaper { … }  // gradient "blobs"
```

## SolidWallpaper

A flat, single-color wallpaper built on the [brand colors](https://design.slingshotai.com/foundations/colors/reference.md#brand-colors). Introduced to replace gradients with solid brand colors as part of removing gradients from the app.

**Palettes:**

| Palette | Colors | Used by |
| - | - | - |
| `cardPalette` | orange, lavender, sky, grass, sunflower | Conversation-starter cards, weekly insights |
| `brandPalette` | cardPalette + tomato, rock | Full cycling/seeding set |

**Factories:**

```dart theme={null}
// Fixed color
SolidWallpaper(ReferenceColors.sky)

// One brand color per weekday (Mon=sky, Tue=lavender, Wed=grass,
// Thu=sunflower, Fri=orange, Sat=tomato, Sun=rock)
SolidWallpaper.forWeekday(DateTime.now().weekday)

// Cycle through brandPalette by index — lists of cards
SolidWallpaper.brand(index)

// Deterministic pick from a seed — same entity, same color every time
SolidWallpaper.forSeed(weekNumber, palette: SolidWallpaper.cardPalette)
```

## ImageWallpaper

A single remote image by URL, cached via `cached_network_image`. Reach for it only when the artwork is **supplied by the backend** — it's the one wallpaper type whose content isn't decided in code.

```dart theme={null}
ImageWallpaper(imageSrc: 'https://…/header.png')
```

Props: `imageSrc` (required), `scale` (default 1.0), `alignment` (default center), `fadeInDuration` (default 500 ms). While loading (or on error) the wallpaper shows a `surfaceBg` placeholder.

It has exactly one use in the app today: the [feature intro modal](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/widgets/common/feature_intro_modal.dart) header, whose image URL arrives from the server.

> [!NOTE]
>
> **The pattern bank is gone (July 29, 2026).** `ImageWallpaper` used to also serve a bank of 26 hand-drawn pattern PNGs through `.pattern(image:)` and `.random(random:)` factories. The five surfaces still on those patterns moved to `SolidWallpaper(ReferenceColors.lavender)` ([#1412](https://github.com/slingshot-ai/ash-mobile-app/pull/1412)), then both factories and the pattern-bank plumbing were deleted ([#1413](https://github.com/slingshot-ai/ash-mobile-app/pull/1413)).
>
> For a decorative brand background, use [`SolidWallpaper`](#solidwallpaper) — don't reintroduce a remote image for decoration.

## VectorWallpaper

Blurred gradient "blobs" over a background color — the most atmospheric option. Each named constructor is a fruit/persona theme with a `bgColor` and three blob colors whose positions/sizes are deterministically randomized from a string seed:

| Constructor | Background | Blobs |
| - | - | - |
| `.home()` | `CA57F4` | 3 × `8B0CAE` |
| `.apple()` | `5DB996` | 3 × `118B50` |
| `.blackberry()` | `4227B9` | 3 × `A546F3` |
| `.blueberry()` | `0A0E86` | `2C6FD9187BCC0B71D1` |
| `.cherry()` | `860A19` | `C22CD9D40F6BD10BB3` |
| `.dragonfruit()` | `FDD7EF` | 3 × `FC2BAC` |
| `.grape()` | `8D68FD` | `DC96E8D44DE0F85BF0` |
| `.orange()` | `FF5F00` | 3 × `FF9F66` |
| `.peach()` | `FDDF68` | `FC7D58FF7C24FCC358` |
| `.pear()` | `C0C000` | `97B61B8ADA00FBEA51` |
| `.plum()` | `49243E` | 3 × `704264` |

homeappleblackberryblueberrycherrydragonfruitgrapeorangepeachpearplum

*(Approximate CSS previews — the app renders soft blurred blobs at deterministic seeded positions.)*

`VectorWallpaper.lerp(a, b, t)` interpolates two vector wallpapers — background color and each blob — enabling animated wallpaper transitions.

> [!NOTE]
>
> Vector wallpaper colors are **intentionally off-token** — vivid one-off values for atmosphere, not part of the reference ramps.

## Legibility rule

Content over a wallpaper must stay readable. The convention (implemented in [StyledListTile](https://design.slingshotai.com/components/styled-list-tile.md)):

* **Solid wallpapers** — dark sand-12 ink (`contentOnBrand`), no scrim; the brand colors are light enough. Secondary lines take `contentOnBrandSecondary`, the alpha ink.
* **Image/vector wallpapers** — force a **dark-brightness subtree** via [ThemeOverride](https://design.slingshotai.com/components/theme-override.md) and add a bottom gradient scrim, so light text sits on a darkened backdrop.

The `AshWallpaper` widget's default scrim is `surfaceBg` at 50% alpha; pass a custom `scrim` (or `blur`) as needed. See [AshWallpaper](https://design.slingshotai.com/components/ash-wallpaper.md) for the rendering API.


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