# Sundial Design System

> Sundial is the design system of the Ash mobile app (Flutter), by Slingshot AI. This file is ordered by implementation priority for agents; every documented value mirrors the Dart source in lib/design_system/ of slingshot-ai/ash-mobile-app.

## Getting started

- [Quickstart](https://design.slingshotai.com/quickstart): Token access pattern (context.colorTheme / context.textTheme) and the golden rules
- [Architecture](https://design.slingshotai.com/architecture): Three-layer token model delivered through Flutter ThemeExtensions
- [Introduction](https://design.slingshotai.com/): What Sundial is and where things live

## Tokens (implementation reference)

- [Semantic Colors](https://design.slingshotai.com/foundations/colors/semantic): The 25 purpose-named tokens with light/dark mappings — use these, not primitives
- [Accent Colors](https://design.slingshotai.com/foundations/colors/accent): The single lavender accent, its bright-solid grammar, and the legacy accent.* fields
- [Reference Colors](https://design.slingshotai.com/foundations/colors/reference): Primitive ramps (9 families × 11 shades) and brand colors, with hex values
- [Typography](https://design.slingshotai.com/foundations/typography): 15 text styles — Libertinus Serif display + Inter (incl. 425 body weight)
- [Iconography](https://design.slingshotai.com/foundations/iconography): AshIcons custom SVGs and Material Symbols Rounded
- [Wallpapers](https://design.slingshotai.com/foundations/wallpapers): Solid/Image/Vector wallpaper system and legibility rules
- [Shape & Spacing](https://design.slingshotai.com/foundations/shape-and-spacing): Radii, padding, and elevation conventions

## Components (implementation reference)

- [StyledCard](https://design.slingshotai.com/components/styled-card): Card with elevated/outlined/filled variants
- [StyledTextField](https://design.slingshotai.com/components/styled-text-field): TextField wrapper with character counter; filled/outlined/underline
- [StyledScaffold](https://design.slingshotai.com/components/styled-scaffold): Screen shell with StyledAppBar and back handling
- [StyledListTile](https://design.slingshotai.com/components/styled-list-tile): Wallpaper-backed tile; conversation/insights/activities variants
- [StyledTabBar](https://design.slingshotai.com/components/styled-tab-bar): Pill segmented control
- [StyledNavigationBar](https://design.slingshotai.com/components/styled-navigation-bar): Floating pill nav with badges and haptics
- [StyledFloatingActionButton](https://design.slingshotai.com/components/styled-floating-action-button): Accent pill FAB
- [Styled Bottom Sheet](https://design.slingshotai.com/components/styled-bottom-sheet): showStyledBottomSheet floating-card modal
- [SemanticButton](https://design.slingshotai.com/components/semantic-button): Accessibility wrapper for custom tappables
- [AshIcon](https://design.slingshotai.com/components/ash-icon): SVG icon widget (local + network)
- [AshLogo](https://design.slingshotai.com/components/ash-logo): Brand logo widget
- [AshWallpaper](https://design.slingshotai.com/components/ash-wallpaper): Wallpaper renderer with scrim/blur
- [Doodles](https://design.slingshotai.com/components/doodles): ConversationBubble and LetterDoodle marks
- [ThemeOverride](https://design.slingshotai.com/components/theme-override): Subtree brightness/palette override

## Flutter theming (implementation reference)

- [Theme Construction](https://design.slingshotai.com/theming/theme-construction): AppTheme → ThemeData for light/dark × 5 palettes
- [ThemeExtensions](https://design.slingshotai.com/theming/theme-extensions): Token delivery, copyWith/lerp, context accessors
- [Material Bridge](https://design.slingshotai.com/theming/material-bridge): How stock Material widgets stay on-system
- [Persona Theming](https://design.slingshotai.com/theming/persona-theming): Accent resolution and subtree overrides

## Patterns

- [Conventions](https://design.slingshotai.com/patterns/conventions): Naming, variant pattern, token discipline, accessibility
- [Contributing](https://design.slingshotai.com/patterns/contributing): Extending tokens/icons/components; versioning rules
- [Common Widgets Catalogue](https://design.slingshotai.com/appendix/common-widgets): App-level reusable widgets outside the system
- [Changelog](https://design.slingshotai.com/changelog): Version history of the system (navbar version tracks this)

## Design philosophy (human context — rationale, not API reference)

These pages explain why the system is the way it is. Agents: consult when making design decisions (layout choices, whether an element belongs, styling new surfaces) — not for implementation lookups.

- [Design Philosophy](https://design.slingshotai.com/philosophy/overview): Core belief, Self-Determination Theory, essentialism + humanity
- [Process](https://design.slingshotai.com/philosophy/process): Reference-first design and iteration
- [Designing for Ash](https://design.slingshotai.com/philosophy/designing-for-ash): Mental-health context — safety, warmth, unhurried
- [Visual Hierarchy](https://design.slingshotai.com/philosophy/craft/visual-hierarchy): The most important craft rule set
- [Typography](https://design.slingshotai.com/philosophy/craft/typography): Type rules — weight/color contrast, constrained scale
- [Spacing & Layout](https://design.slingshotai.com/philosophy/craft/spacing-and-layout): Whitespace, spacing scale, unambiguous grouping
- [Color & Depth](https://design.slingshotai.com/philosophy/craft/color-and-depth): Palette building, shadows, borders-as-last-resort
- [Robustness & Readability](https://design.slingshotai.com/philosophy/craft/robustness): Line length, contrast minimums, overflow, alignment
- [Anti-Patterns](https://design.slingshotai.com/philosophy/anti-patterns): The never-do-these list
- [Influences](https://design.slingshotai.com/philosophy/influences): The taste profile