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

# StyledListTile

> Wallpaper-backed list tile with conversation, insights, and activities variants

The signature Ash card-tile: a [wallpaper](https://design.slingshotai.com/foundations/wallpapers.md) background, a decorative element on the right, and automatic text-legibility handling. Source: [`styled_list_tile.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/styled_list_tile.dart).

There is **no default constructor** — the tile is variant-only:

## Variants

| Constructor | Decoration (right side) | Content layout |
| - | - | - |
| `.conversation(…)` | `ConversationBubble` doodle (130 px wide) | Optional icon, title (`bodyLarge`), subtitle (`bodySmall`) |
| `.insights(…)` | `AshIcons.insights` at 128 px, 26% black — or a custom `backgroundImage` | Subtitle label (`bodyMedium`) **above** title (`buttonLarge`) |
| `.activities(…)` | Your `backgroundIcon` at 128 px, 26% black | Icon + subtitle header row (`overlineSmall`, 20 px icon) above title (`bodyLarge`) |

```dart theme={null}
StyledListTile.conversation(
  wallpaper: SolidWallpaper.forWeekday(DateTime.now().weekday),
  title: 'What made today feel heavy?',
  onTap: () => startConversation(),
)

StyledListTile.activities(
  // Seeded from the activity so the tile and the submission page's
  // hero image always land on the same brand color.
  wallpaper: SolidWallpaper.forSeed(activity.hashCode),
  backgroundIcon: AshIcons.activitiesPies,
  icon: AshIcon(AshIcons.activitiesPies),
  subtitle: 'ACTIVITY',
  title: 'The Pies',
  onTap: openActivity,
)
```

> [!NOTE]
>
> Every tile in the app now passes a [`SolidWallpaper`](https://design.slingshotai.com/foundations/wallpapers#solidwallpaper). Seed it from the entity's id so a tile and its detail page share one color.

## API

| Parameter | Type | Notes |
| - | - | - |
| `wallpaper` | `Wallpaper` | **required** — solid, image, or vector |
| `title` | `String` | **required**; auto-sizes, max 2 lines |
| `subtitle` | `String?` | Placement varies by variant |
| `icon` | `Widget?` | insights/activities (and conversation renders none) |
| `backgroundIcon` | `AshIcons` | **required** for `.activities`; fixed for others |
| `backgroundImage` | `Widget?` | `.insights` only — replaces the background icon |
| `onTap` | `VoidCallback?` | **required** (nullable to allow disabled tiles) |

Structure: 16 px radius, 1 px `surfaceElevated` outside-stroke border, min height 96, content padded `(16, 16, 120, 16)` to clear the decoration, `InkWell` ripple, `AutoSizeText` for overflow.

## The legibility rule (implemented here)

```dart theme={null}
final isSolid = wallpaper is SolidWallpaper;
```

* **Solid wallpaper** → dark sand-12 ink (`SundialRef.sandLight[12]`) directly on the brand color; **no scrim**.
* **Image/vector wallpaper** → a left-to-right black gradient scrim (75% → 0%) is painted, and the content subtree is wrapped in `ThemeOverride(brightness: Brightness.dark)` so all tokens resolve to light-on-dark.

This is the canonical example of the [wallpaper legibility convention](https://design.slingshotai.com/foundations/wallpapers.md#legibility-rule) — follow the same pattern for any new wallpaper-backed surface.

## Real usage

`lib/widgets/history/day_entries_list.dart` renders conversation and insights tiles for the history feed; `lib/widgets/conversation/therapist_artifact.dart` uses `.insights` with a custom `backgroundImage`.


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