deep water red
primaryaccentoceanbackground
Selected state
Clear contrast for text, controls and boundaries.
Choose a palette
Preview each option with the same controls and surfaces. Apps set a palette on the document root at build time; styles stay bundled in each app.
stone vermilion
primaryaccentoceanbackground
Selected state
Clear contrast for text, controls and boundaries.
ink teal
primaryaccentoceanbackground
Selected state
Clear contrast for text, controls and boundaries.
Colour tokens
Use colour with text, shape or placement. Keep state colours distinct from brand colours.
text#202329 · --color-text
text muted#545a60 · --color-text-muted
text inverse#fffdf8 · --color-text-inverse
background#f1efe9 · --color-background
surface#fffcf7 · --color-surface
surface muted#e9e6dd · --color-surface-muted
surface inverse#17262d · --color-surface-inverse
border#777970 · --color-border
divider#d2cec3 · --color-divider
primary#762a39 · --color-primary
primary hover#571b29 · --color-primary-hover
accent#a9412e · --color-accent
accent light#d37b4c · --color-accent-light
accent surface#f5e8df · --color-accent-surface
ocean#285b67 · --color-ocean
ocean light#88b8bc · --color-ocean-light
ocean surface#e3eff0 · --color-ocean-surface
success#285a45 · --color-success
success surface#e5efe7 · --color-success-surface
warning#795515 · --color-warning
warning surface#f8edcf · --color-warning-surface
danger#982d36 · --color-danger
danger surface#f6e4e2 · --color-danger-surface
focus#f1b93c · --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
A warm tint 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.
App deployment settings
Set the pinned package release and palette for each registered app in one file. App update workflows read these settings, verify the release archive and build a pinned update for that app.
| App | Repository | Release | Palette |
|---|---|---|---|
| cultivate | sighmoan1/cultivate | 1.1.0 | deep water red |
| delegate | sighmoan1/govuk-delegate-starter | 1.1.0 | stone vermilion |
Open app deployment settings. Changes are reviewed in Git before consumer builds adopt them.
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.1.0/bathos-design-system-1.1.0.tgzimport '@bathos/design-system/styles/tokens.css';
import '@bathos/design-system/styles/base.css';
import '@bathos/design-system/styles/components.css';
import '@bathos/design-system/styles/palettes.css';
import { Button, Field } from '@bathos/design-system';
// Set on the app root at build time:
<html data-bathos-palette="deep-water-red">Existing themes can import foundation.css and palettes.css for namespaced --bathos-* values and set the same root attribute. Keep service-specific layouts and interaction behaviour in each app.
Release and propagation
Patch releases fix defects; minor releases add compatible features; major releases require deliberate migration. Each app has an explicit package version and palette in the central settings file. Consumer builds install a pinned archive locally, run their checks and deploy through their own release path.
Keep the previous package version and deployment available for rollback. No production page loads a floating version or remote stylesheet at runtime.
Release history and package downloads · Cultivate integration examples