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.
Published palette: deep water red. Choose an option to preview it across this site.
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.
Set a palette for a site
Each site keeps its own bathos-design-system.json beside its app code. Change the palette there; the site's next build applies it. You don't need to change this shared repository to switch another site's design.
This control previews a palette across the whole catalogue in your current browser session. It does not change or deploy a site's setting.
Open this catalogue's own setting. Other apps keep the same file in their own repositories.
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 document-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 site pins the package version and palette in its own repository. Builds use those exact settings and deploy through the site's release path.
Keep the previous package version and deployment available for rollback. No production page loads a floating latest version or remote stylesheet at runtime.
Release history and package downloads · Cultivate integration examples