Themes
Base and five themes, each a small data document solved into light, dark and Darker.
A theme is a small data document: a background, an accent and a style. The style covers shape, density, type, borders and surface accents. Every role is solved to the same contrast targets, so every theme reads the same however it looks.
Apps offer light, dark and follow system, with separate light and dark picks. Each app sets its default theme and opts in to the others.
Neutral surfaces with a slight blue-grey tint, black and white primaries, and links as strong text. What every theme builds on.
Cool periwinkle, like glass and Tokyo Night. Large radii, faint borders and a glassy sheen.
Charcoal with surveyor's marker pink. Boxy, thick borders, bold weights and a marker bar.
Welsh slate's purple-grey with a mauve accent. Round, with pill buttons and soft borders.
A clear, bright blue on neutral charcoal. Medium radii, soft borders and pill chips.
Warm amber on near-black. Compact and table-first, with square badges.
Darker
The OLED version of every theme’s dark mode, offered for all of them. Every surface drops by 0.045 OKLCH lightness with hues kept, and text and accents stay as they are, so contrast only goes up. Field outlines use the stronger border so they stay visible. The normal dark stays the default.
Names
One word in Title Case, naming the building itself, its materials or its parts, never people or times of day. They follow Groundwork’s name, so if it’s renamed, the themes are renamed with it.
Using a theme
On the web, load themes.css and set the theme and mode on any element:
<body data-gw-theme="glazing" data-gw-mode="dark">Leave data-gw-mode off to follow the system’s light or dark setting. Darker is opt-in with data-gw-mode="darker".
More
- Optional themes: Catppuccin and Tokyo Night.
- Contrast report: every role against its target.
- Writing a theme: the document format.