text#231b2b · --color-text
Colour and type
Keep most surfaces neutral. Use wine for actions, ocean for information and lavender for selection. Always pair colour with text or shape.
text muted#62576b · --color-text-muted
text inverse#faf7ff · --color-text-inverse
background#f4f3f5 · --color-background
surface#fffdfb · --color-surface
surface muted#ece9ef · --color-surface-muted
surface inverse#2d2237 · --color-surface-inverse
border#8e8595 · --color-border
divider#d9d2df · --color-divider
primary#6c304e · --color-primary
primary hover#4d2037 · --color-primary-hover
accent#68449b · --color-accent
accent light#b599ed · --color-accent-light
accent surface#eee7f8 · --color-accent-surface
ocean#305f64 · --color-ocean
ocean light#9bc4c5 · --color-ocean-light
ocean surface#e3eff0 · --color-ocean-surface
success#315e50 · --color-success
success surface#e4eee8 · --color-success-surface
warning#77571e · --color-warning
warning surface#fff0cc · --color-warning-surface
danger#a02d48 · --color-danger
danger surface#f9e6eb · --color-danger-surface
focus#f1c75b · --color-focus
Typography and space
Aptos, Segoe UI, Helvetica Neue and Arial keep the system local. Body text uses a 1.6 line height and a 65-character measure. Controls have at least a 44px target.
Spacing: 4, 8, 12, 16, 24, 32, 48, 64 and 96px. Radius: 4, 10 and 16px.
Controls and surfaces
These catalogue buttons demonstrate visual states. They perform no action. Tab through the examples to inspect keyboard focus.
Default panel
Give standalone panels a heading. Content determines the height.
Selected surface
Lavender fill and a stronger boundary distinguish emphasis from focus.
An example input; nothing is sent or saved.
Enter an outcome before continuing.
React exports: Button, ButtonLink, Field, Notice and Panel. Links navigate, buttons act. Static notices do not announce themselves as live alerts.
Use the shared package
Install a specific release and commit the lockfile. Styles are bundled locally at build time, so a catalogue outage cannot affect a site.
npm install @bathos/design-system@https://github.com/sighmoan1/bathos-design-system/releases/download/v1.0.1/bathos-design-system-1.0.1.tgzimport '@bathos/design-system/styles/tokens.css';
import '@bathos/design-system/styles/base.css';
import '@bathos/design-system/styles/components.css';
import { Button, Field } from '@bathos/design-system';Existing themes can import foundation.css for namespaced --bathos-* tokens and map only the values their service needs. The dark reader and GOV.UK simulators retain their layout and interaction contracts.
Release and propagation
Patch releases fix defects; minor releases add compatible features; major releases require deliberate migration. Stable releases produce package archives, then each consumer checks for updates and opens a version-pinned pull request. Builds and browser checks run before adoption.
Keep the previous package version and deployment available for rollback. Automatic updates never replace a consumer's production stylesheet at runtime.
Release history and package downloads · Cultivate integration examples