# Screens — danchilton.com design system Every app screen, with a directly fetchable URL for each. Generated from source at build time, so it cannot drift from the code it describes. Rendered board: https://danchilton.com/styleguide/ ## Screens 30 screens, each rendering the real app component against fixture data. Each has its own URL and returns the app's real DOM — fetch these individually rather than the board page, which is 30 iframes. Two caveats before reading these: - **Hover and focus states do not appear in a screenshot.** Every list row has per-row actions hidden until hover on desktop (`md:opacity-0 md:group-hover:opacity-100`) and always visible on mobile. Read the mobile rendering, or the component source, before concluding a row has no actions. - The board page at `/styleguide/screens` is 30 iframes. Fetch the individual URLs below instead. ### All screen URLs Flat list, in case you want to queue them. https://danchilton.com/styleguide/screens/bookmarks-empty https://danchilton.com/styleguide/screens/bookmarks-grid https://danchilton.com/styleguide/screens/bookmarks-list https://danchilton.com/styleguide/screens/bookmarks-settings https://danchilton.com/styleguide/screens/cars-fuel https://danchilton.com/styleguide/screens/cars-overview https://danchilton.com/styleguide/screens/cars-service https://danchilton.com/styleguide/screens/dexa-list https://danchilton.com/styleguide/screens/exercise-analytics https://danchilton.com/styleguide/screens/exercise-library https://danchilton.com/styleguide/screens/exercise-history https://danchilton.com/styleguide/screens/exercise-session https://danchilton.com/styleguide/screens/exercise-programs https://danchilton.com/styleguide/screens/exercise-summary https://danchilton.com/styleguide/screens/exercise-settings https://danchilton.com/styleguide/screens/exercise-today https://danchilton.com/styleguide/screens/games-list https://danchilton.com/styleguide/screens/hub-dashboard https://danchilton.com/styleguide/screens/hub-login https://danchilton.com/styleguide/screens/hub-settings https://danchilton.com/styleguide/screens/quotes-list https://danchilton.com/styleguide/screens/quotes-settings https://danchilton.com/styleguide/screens/quotes-stats https://danchilton.com/styleguide/screens/reading-library https://danchilton.com/styleguide/screens/reading-settings https://danchilton.com/styleguide/screens/reading-stats https://danchilton.com/styleguide/screens/reading-today https://danchilton.com/styleguide/screens/stats-activity https://danchilton.com/styleguide/screens/stats-settings https://danchilton.com/styleguide/screens/stats-today ### By app #### bookmarks - **Empty state** — https://danchilton.com/styleguide/screens/bookmarks-empty The real empty state, driven by an empty fixture response. Bordered icon in a rounded square, then a heading and one line of guidance — bookmarks and reading share this shape; stats and cars do not. - **Grid** — https://danchilton.com/styleguide/screens/bookmarks-grid Same list, one word changed: ListRow layout=“card”. Bookmarks, quotes and reading each used to ship a row *and* a card component — six doing two jobs. - **List** — https://danchilton.com/styleguide/screens/bookmarks-list The real BookmarkList and BookmarksSidebar, filled from the fixture backend. Rows are flat and full-bleed — no bg-muted pill, unlike the shared ListRow. - **Settings** — https://danchilton.com/styleguide/screens/bookmarks-settings Three SettingsGroups — Reminders, Collections & tags, Import. The reminder email is a deferred field: editing it raises the shared sticky Save/Discard bar rather than a per-screen Save button. #### cars - **Fuel** — https://danchilton.com/styleguide/screens/cars-fuel The stat grid and the fill-up list are both shared components now: StatCard for every number (each with a caption) and ListRow layout=“card” for the entries, whose Edit/Delete used to be a split full-width footer strip. - **Overview** — https://danchilton.com/styleguide/screens/cars-overview Vehicle summary. Cars shows a record as a tab set in the main pane rather than in an inspector panel — the one app where that reads better than a drawer, since a vehicle is the whole screen. - **Service log** — https://danchilton.com/styleguide/screens/cars-service Maintenance entries. Note the row treatment: a bordered card with a split Edit/Delete footer, unlike every other app's row. #### dexa - **Metric list** — https://danchilton.com/styleguide/screens/dexa-list The whole dexa app, rendered as-is — its data is a static local module, no PocketBase. It is also the only adopter of the shared ListRow, and the only app using zero shadcn primitives. #### exercise - **Analytics** — https://danchilton.com/styleguide/screens/exercise-analytics Personal records and trend charts. RpeTrendChart is a canvas, so it has to touch mode.current in its draw effect to survive a theme flip. - **Exercise library** — https://danchilton.com/styleguide/screens/exercise-library A windowed list — 3,242 rows is far too many for the DOM, so it grows a window as you scroll. The filter bar is exercise-only. - **History** — https://danchilton.com/styleguide/screens/exercise-history Completed sessions. Rows here are a third distinct row treatment — neither the shared ListRow pill nor the flat full-bleed rows bookmarks and quotes use. - **Live session** — https://danchilton.com/styleguide/screens/exercise-session The workout in progress — the densest screen in the repo, and the only place the categorical --superset-N palette appears. Two exercises share a superset group; the stripe says they are one group and deliberately nothing about status. - **Programs** — https://danchilton.com/styleguide/screens/exercise-programs ProgramList uses Badge success/warning/secondary for active/draft/archived — a good example of the status tokens carrying real information. - **Session summary** — https://danchilton.com/styleguide/screens/exercise-summary What a finished workout looks like on review. Reached from the live session via Finish, and from any row in History. - **Settings** — https://danchilton.com/styleguide/screens/exercise-settings Two SettingsGroups showing both halves of the save model at once: the Profile textareas defer to the sticky bar, while the App preferences toggles commit on flip and flash Saved. - **Today** — https://danchilton.com/styleguide/screens/exercise-today Unfinished in the app itself — TodayView is still the scaffold placeholder from 2026-08-12, so the board shows a header and "Hello world". The shell around it is real. #### games - **Picker** — https://danchilton.com/styleguide/screens/games-list AppShell with searchable, add and settings all off — the most stripped-back use of the shell. Games themselves ship deliberately hand-rolled stylesheets scoped to a game class, which is the one sanctioned exception to the token rules. #### hub - **Dashboard** — https://danchilton.com/styleguide/screens/hub-dashboard The app grid after sign-in, rendered from the generated app-list.json. The style guide sets hidden: true in its app.config.ts, so it is absent here by design. - **Login** — https://danchilton.com/styleguide/screens/hub-login The front door, and the only screen an anonymous visitor normally reaches. Hub is the one app not on AppShell — it has no sidebar and no app switcher of its own. - **Settings** — https://danchilton.com/styleguide/screens/hub-settings Account-scope settings: theme, passkeys and sign-out apply across all nine apps, so they live here rather than being declared nine times. Theme was previously reachable only as a two-state icon toggle, which could not express the three-state preference. #### quotes - **List** — https://danchilton.com/styleguide/screens/quotes-list The shared ListRow. QuoteRow and BookmarkRow had near-identical signatures — the same component written twice — and both are gone. Tag chips arrive through the meta slot, so the row no longer knows what a tag is. - **Settings** — https://danchilton.com/styleguide/screens/quotes-settings SettingsGroups with both halves of the save model: the delivery fields defer to the sticky Save/Discard bar, while Send time commits on change. Quotes used to carry two separate Save buttons. - **Stats** — https://danchilton.com/styleguide/screens/quotes-stats Quotes has its own stats view distinct from the Stats app. Card shapes differ between the two — a good candidate for a shared StatCard. #### reading - **Library** — https://danchilton.com/styleguide/screens/reading-library BookListRow maps a Book onto the shared ListRow; StarRating, StatusBadge and FormatLabel compose into its meta slot rather than being row props. - **Settings** — https://danchilton.com/styleguide/screens/reading-settings One SettingsGroup. Reading has no settings collection, so nothing here defers — tag edits persist inline and no save bar appears. The annual goal stays on Today: it is view state, not a setting. - **Stats** — https://danchilton.com/styleguide/screens/reading-stats The reading stats view. Compare the card treatment against the Stats app and quotes — three takes on the same idea. - **Today** — https://danchilton.com/styleguide/screens/reading-today The home shelf — what is being read now, what is up next. Card shapes here differ from the library grid two screens over. #### stats - **Activity detail** — https://danchilton.com/styleguide/screens/stats-activity YearHeatmap plus the stat cards. The heatmap is a canvas — it has to touch mode.current inside its draw effect or it keeps painting the old palette after a theme flip. - **Settings** — https://danchilton.com/styleguide/screens/stats-settings One SettingsGroup. The send-hour range slider became a select and commits on change; the recipient email defers to the sticky bar. - **Today** — https://danchilton.com/styleguide/screens/stats-today Tick-off list for the day. The only app with searchable={false} on AppShell, so the top bar collapses to brand + add + apps. ### By pattern Cross-cutting sets — the comparisons worth making across apps rather than within one. A screen can appear in more than one set. #### Row treatments The same job — a tappable list row — solved four ways. The clearest single view of the drift. - bookmarks · **List** — https://danchilton.com/styleguide/screens/bookmarks-list - quotes · **List** — https://danchilton.com/styleguide/screens/quotes-list - reading · **Library** — https://danchilton.com/styleguide/screens/reading-library - dexa · **Metric list** — https://danchilton.com/styleguide/screens/dexa-list - exercise · **History** — https://danchilton.com/styleguide/screens/exercise-history #### Card variants Three apps ship a card alongside their row, doubling the component count for one presentation choice. - bookmarks · **Grid** — https://danchilton.com/styleguide/screens/bookmarks-grid - quotes · **List** — https://danchilton.com/styleguide/screens/quotes-list - reading · **Today** — https://danchilton.com/styleguide/screens/reading-today #### Settings Six independent implementations of the same account + preferences surface. No shared shell. - quotes · **Settings** — https://danchilton.com/styleguide/screens/quotes-settings - reading · **Settings** — https://danchilton.com/styleguide/screens/reading-settings - stats · **Settings** — https://danchilton.com/styleguide/screens/stats-settings #### Empty states Bookmarks and reading share a shape; stats and cars do not. - bookmarks · **Empty state** — https://danchilton.com/styleguide/screens/bookmarks-empty #### Stat and metric displays Four takes on "show a number and its context" — the Stats app, reading, quotes, and the cars fuel grid. - stats · **Activity detail** — https://danchilton.com/styleguide/screens/stats-activity - reading · **Stats** — https://danchilton.com/styleguide/screens/reading-stats - quotes · **Stats** — https://danchilton.com/styleguide/screens/quotes-stats - cars · **Fuel** — https://danchilton.com/styleguide/screens/cars-fuel #### Densest screens Where the system is under the most pressure, and the only place the categorical superset palette appears. - exercise · **Live session** — https://danchilton.com/styleguide/screens/exercise-session - exercise · **Session summary** — https://danchilton.com/styleguide/screens/exercise-summary - cars · **Overview** — https://danchilton.com/styleguide/screens/cars-overview #### Shell extremes AppShell with everything on, versus search/add/settings all off, versus the one app not on AppShell at all. - exercise · **Exercise library** — https://danchilton.com/styleguide/screens/exercise-library - games · **Picker** — https://danchilton.com/styleguide/screens/games-list - hub · **Dashboard** — https://danchilton.com/styleguide/screens/hub-dashboard