Themes

• The app defines colors using semantic variables. The default, light theme semantic variable colors are defined on :root and dark theme overrides are specified when necessary in html[data-theme='dark'].
• The app follows the system theme by default, but the theme can also be manually specified using a URL query parameter, e.g. ?theme=dark.
• All color decisions should be expressed from CSS variables rather than literal hex values to avoid proliferation of ad hoc colors and to ensure color decisions take both light and dark modes into account.

Color

The following color tokens are used throughout the app. Toggle the sun/moon icon at the top right to switch between the light and dark theme color variants.

Icons

The app uses a small number of icons from the Feather library.

• In standard buttons, the icon should use the same color as the text in the control and should be relatively small - sized to fit the control's height (--icon-size-sm). These buttons generally include a label to the right of the icon, with the exception of the small delete option on selected list items.
• Header action buttons are icon-only controls without labels, and therefore use somewhat larger icons (--icon-size-lg).
• Bottom navigation items pair a somewhat larger icon (--icon-size-md) with a small text label below.

Layout and Containers

• Screen structure is intentionally simple: a header sits above a primary content surface, with the nav bar fixed to the bottom of the viewport.
• The primary surface is subtly differentiated from the page background, using the --surface color with a thin 1px solid var(--border-color) border.
• Supporting meta information, such as progress bars or summary counts, can appear above or below the primary content region depending on the screen context.
• Global actions like adding an item to a list or starting/stopping a session appear in the header.
• Surfaces, cards and buttons use a 10px radius, defined in --radius.
• Layout spacing in general follows an 8px rhythm.

Fonts

The app currently uses the system UI font stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif. The following font size tokens are used to maintain a consistent typographic hierarchy across the app:

• --fs-base: 17px - Global app text size applied on html, body.
• --fs-md: 16px - Used for list item names, row labels, and most medium-weight content.
• --fs-sm: 14px - Used for supporting text, menu items, and secondary controls.
• --fs-xs: 12px - Reserved for metadata, badges, counts, and footer summary text.

Screen Header

Bottom Navigation

• fixed to the bottom of the viewport
• uses icon + label layout
• active icon and label color is --accent
• inactive icon and label is --surface-on-muted

Buttons

Dropdown

• Some secondary header actions, like the Sort button, act as a dropdown, which when toggled reveals a vertical options menu.
• The open state keeps the button highlighted and presents options in a flat, square-cornered surface.
• One option is always active to reflect the current selection.

Progress Tracker

• The progress tracker widget is used to show the current progress of a session, with a count of observed and not-observed items from a list.
• It consists of a compact label row for the observed and not-observed counts, with the percentage shown inline.
• The bar fills left to right according to the current observed percentage, and the fill uses the accent color.

Lists and Rows

• Lists completely fill the primary surface and are made up of rows separated by a thin divider line.
• Rows contain a left aligned name and optional right-aligned metadata, such as badges and counts.
• Rows can be selectable or non-selectable. Selectable rows use a subtle highlight color to indicate selection.
• Rows can be expandable. Expanded rows reveal a drawer of actions and may also expose rename or minimal right-aligned delete affordances.
• Rows can be reorderable or fixed. Reorderable rows present a drag handle on the left side to indicate that they can be moved via drag-and-drop.

Item Grid

• Active tracking rows use a compact grid card layout instead of the standard list item row, with label and count arranged inline.
• Cards with a count above zero use the accent background treatment; zero-count cards stay muted with a neutral border.
• The count label sits on the right and is always presented as a pill-like badge, while the card label remains left-aligned.

Badge

• Badges are small status labels used to mark built-in items.
• They use a muted accent tint and sit inline with row metadata.

Rename Affordance

• Editable labels use a dotted underline to signal that a name can be edited inline.
• The same treatment is used for rename affordances in the breadcrumb header and in list rows.