Design system

Foundations

The basic decisions that everything else is built on. Explore Foundations.

• Color Semantic colors for light and dark mode, and contrast for every pair.
• Typography Text roles, weights and the Geist font families.
• Spacing Padding, gaps and the space between the main parts of a page.
• Layout Breakpoints, container widths, page side padding and page layers.
• Radius Rounded corners for controls and surfaces.
• Borders and focus Border widths, the focus ring and link underlines.
• Elevation The hover shadow.
• Motion Durations, easing and reduced motion.

Components follow in the next phase, each with its own page.

How it is built

• All values live in one source: design tokens in the DTCG JSON format.
• Tokens come in three layers. Primitives are raw values. Semantic tokens give a value a job. Component tokens point only to semantic tokens, never straight to a primitive.
• A build turns the source into one CSS file, and into the color palette and content widths for the WordPress editor. A check stops the work if contrast is too low or a value is hard-coded instead of using a token.
• The CSS sits in cascade layers named hnst.*, and every class starts with hnst-, so the system never clashes with other styles on the page.
• It targets browsers in Baseline 2024.

Using the CSS

• Load design-system.css. Keep the fonts folder next to it, since the fonts are referenced relative to the CSS file.
• Preload Geist Variable only. The other font files load when they are needed.
• Dark mode follows the system. Set data-theme="light" or data-theme="dark" on <html> to force a mode. See Color.
• Reduced motion works on its own: when the reader asks for it, every duration becomes almost zero. See Motion.

Accessibility

• The target is WCAG 2.2 level AA, in both light and dark mode.
• Every pair of text or interface color and background is checked for contrast whenever this site is built.
• Every interactive element shows a clear focus ring when it has keyboard focus.
• Links are underlined, and color is never the only way something is shown.
• Motion follows the reader's reduced motion setting, and the focus ring stays visible in Windows high contrast mode.

Status