Parch

Design System

The Parch design system is the working implementation of the Parch Human Interface Guidelines. Every component on these pages is live: rendered with the same tokens, styles, and behavior that first-party Parch applications are specified to use. If the HIG and this system disagree, this system wins.

Design tokens

Colors, typography, spacing, radii, elevation, and motion, the shared vocabulary every component is built from.

Buttons & chips

Variants, sizes, states, loading, and destructive confirmation.

Text fields

Labels, descriptions, validation, and search fields.

Selection controls

Checkboxes, radio groups, switches, and dropdown selection.

Navigation

Tabs, segmented navigation, and sidebar navigation patterns.

Dialogs & toasts

Confirmation windows, destructive flows, and transient notifications.

Feedback

Progress, loading, empty states, and error messages.

App shell

Window frames, header bars, settings rows, and lists, the skeleton of a Parch desktop application.

How demos work

Every demo stage can be re-themed in place using the Site / Light / Dark switch in its header, components must be correct in both themes, so we make that easy to check while reading.

Theme switch

Principles

  • One token source. Components never hardcode colors or sizes; they read semantic tokens (--accent, --surface-2, …) that adapt to light and dark.
  • Respect the toolkit. The design system defines Parch's shared language; GTK/libadwaita and Qt apps keep their toolkit's native patterns and map these intents onto them (see Platform integration).
  • Keyboard complete. Every interactive component is reachable and operable by keyboard, with visible focus.
  • RTL aware. Layouts mirror in right-to-left locales; see Localization & Accessibility.

Continue in Design System

Design tokensThe shared vocabulary of color, type, spacing, radii, and motion used by every Parch surface.Buttons & chipsVariants, sizes, states, and when to use the destructive button.Text fieldsLabels, helper text, validation, and search fields.Selection controlsSwitches, checkboxes, radio groups, and dropdown selection.NavigationTabs, segmented navigation, and sidebar navigation inside applications.Dialogs & toastsConfirmation windows, destructive flows, and transient notifications.FeedbackProgress, loading, empty states, and error messages.App shellWindow frames, header bars, settings rows, and lists, the skeleton of a Parch desktop application.