# danchilton.com — style guide

> The shared design system behind nine Svelte micro-apps. shadcn-svelte v1.5.0,
> base colour zinc, radius 0.5rem, Figtree, Tailwind v4, dark mode live.

The rendered board is a client-side SPA, and its long sections sit below the
fold. If you fetch a URL and read the response, use the markdown below — same
content, flat text, no JS and no scrolling.

## Everything, one file

- [spec.md](https://danchilton.com/styleguide/spec.md): the whole system
- [tokens.json](https://danchilton.com/styleguide/tokens.json): colour values, machine-readable

## One file per page

- [foundations.md](https://danchilton.com/styleguide/foundations.md): colour tokens, type, radius, spacing
- [components.md](https://danchilton.com/styleguide/components.md): primitives vs composites, with props and variants
- [screens.md](https://danchilton.com/styleguide/screens.md): all screens with direct URLs
- [drift.md](https://danchilton.com/styleguide/drift.md): the cohesion audit table

## Rendered pages

- [Foundations](https://danchilton.com/styleguide/)
- [Components](https://danchilton.com/styleguide/components)
- [Screens](https://danchilton.com/styleguide/screens) — 30 iframes; prefer the individual URLs below
- [Drift audit](https://danchilton.com/styleguide/drift)

## Screens

Each returns the real app DOM, full-bleed, with no board chrome.

- [bookmarks: Empty state](https://danchilton.com/styleguide/screens/bookmarks-empty)
- [bookmarks: Grid](https://danchilton.com/styleguide/screens/bookmarks-grid)
- [bookmarks: List](https://danchilton.com/styleguide/screens/bookmarks-list)
- [bookmarks: Settings](https://danchilton.com/styleguide/screens/bookmarks-settings)
- [cars: Fuel](https://danchilton.com/styleguide/screens/cars-fuel)
- [cars: Overview](https://danchilton.com/styleguide/screens/cars-overview)
- [cars: Service log](https://danchilton.com/styleguide/screens/cars-service)
- [dexa: Metric list](https://danchilton.com/styleguide/screens/dexa-list)
- [exercise: Analytics](https://danchilton.com/styleguide/screens/exercise-analytics)
- [exercise: Exercise library](https://danchilton.com/styleguide/screens/exercise-library)
- [exercise: History](https://danchilton.com/styleguide/screens/exercise-history)
- [exercise: Live session](https://danchilton.com/styleguide/screens/exercise-session)
- [exercise: Programs](https://danchilton.com/styleguide/screens/exercise-programs)
- [exercise: Session summary](https://danchilton.com/styleguide/screens/exercise-summary)
- [exercise: Settings](https://danchilton.com/styleguide/screens/exercise-settings)
- [exercise: Today](https://danchilton.com/styleguide/screens/exercise-today)
- [games: Picker](https://danchilton.com/styleguide/screens/games-list)
- [hub: Dashboard](https://danchilton.com/styleguide/screens/hub-dashboard)
- [hub: Login](https://danchilton.com/styleguide/screens/hub-login)
- [hub: Settings](https://danchilton.com/styleguide/screens/hub-settings)
- [quotes: List](https://danchilton.com/styleguide/screens/quotes-list)
- [quotes: Settings](https://danchilton.com/styleguide/screens/quotes-settings)
- [quotes: Stats](https://danchilton.com/styleguide/screens/quotes-stats)
- [reading: Library](https://danchilton.com/styleguide/screens/reading-library)
- [reading: Settings](https://danchilton.com/styleguide/screens/reading-settings)
- [reading: Stats](https://danchilton.com/styleguide/screens/reading-stats)
- [reading: Today](https://danchilton.com/styleguide/screens/reading-today)
- [stats: Activity detail](https://danchilton.com/styleguide/screens/stats-activity)
- [stats: Settings](https://danchilton.com/styleguide/screens/stats-settings)
- [stats: Today](https://danchilton.com/styleguide/screens/stats-today)