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

# AshWallpaper

> Renders any Wallpaper with an optional scrim, blur, and child content

The rendering widget for the [wallpaper system](https://design.slingshotai.com/foundations/wallpapers.md): give it any `Wallpaper` (solid, image, or vector) and it paints the background, a legibility scrim, and your content in a `Stack`. Source: [`ash_wallpaper.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/ash_wallpaper.dart).

```dart theme={null}
AshWallpaper(
  SolidWallpaper.forSeed(entityId.hashCode),
  child: Padding(
    padding: EdgeInsets.all(16),
    child: content,
  ),
)
```

## API

| Parameter | Type | Default | Notes |
| - | - | - | - |
| `wallpaper` | `Wallpaper` | **required** (positional) | `SolidWallpaper`, `ImageWallpaper`, or `VectorWallpaper` |
| `scrim` | `Widget?` | `surfaceBg` @ 50% alpha | Layer between wallpaper and child; pass `SizedBox.shrink()` for none |
| `fit` | `BoxFit?` | `BoxFit.none` (image) / `BoxFit.cover` (vector) | How the artwork fills the area |
| `blur` | `double` | `0` | When > 0, the scrim is wrapped in a `BackdropFilter` gaussian blur (mirror tiling) |
| `child` | `Widget?` | — | Foreground content |

## Layer order

```text theme={null}
┌─ child (optional) ───────────┐   top
├─ scrim (+ optional blur) ───┤
└─ wallpaper ─────────────────┘   bottom
```

Dispatch by type: `SolidWallpaper` → `ColoredBox`; `ImageWallpaper` → cached network image (with `surfaceBg` placeholder/error states); `VectorWallpaper` → blurred gradient-blob painter. The stack clips with `Clip.hardEdge` — give the parent the border radius (as [`StyledListTile`](https://design.slingshotai.com/components/styled-list-tile) does).

## Legibility

The default 50% `surfaceBg` scrim is a reasonable general-purpose wash. For content-bearing surfaces follow the [legibility rule](https://design.slingshotai.com/foundations/wallpapers.md#legibility-rule): dark text with no scrim over solids; `ThemeOverride(brightness: dark)` + gradient scrim over textures.

## Tokens consumed

`surfaceBg` (default scrim, image placeholder).


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