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

# Doodles

> ConversationBubble and LetterDoodle — hand-drawn illustration marks

Two tiny widgets wrap Ash's hand-drawn illustration marks. They have **no parameters** — each renders a PNG asset with `BoxFit.contain`; size them from the outside with a `SizedBox` or `Positioned`.

## ConversationBubble

Hand-drawn speech bubble marking **conversation surfaces** — conversation-starter cards, history day tiles, and the daily-summary header. Source: [`conversation_bubble.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/conversation_bubble.dart) · asset `assets/images/ConversationStarterBubble.png`.

```dart theme={null}
SizedBox(width: 130, child: const ConversationBubble())
```

[`StyledListTile.conversation`](https://design.slingshotai.com/components/styled-list-tile) renders it automatically as the tile's right-side decoration.

## LetterDoodle

Hand-drawn envelope marking **letter/check-in surfaces** — the letter's history card and the check-in letter detail header. Source: [`letter_doodle.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/letter_doodle.dart) · asset `assets/images/Letter.png`.

```dart theme={null}
SizedBox(height: 64, child: const LetterDoodle())
```

## Why widgets for two images?

The wrappers give each mark a single, findable identity: usage is greppable (`ConversationBubble` vs. a raw asset path string), the asset path lives in one place, and future treatment changes (recoloring, animation) have a home. Follow the same pattern for new illustration marks.


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