The ShiftHosts design system.
One brand hex generates every colour on every screen. Ramps are built in OKLCH so equal steps read as equal steps, and both themes are audited against WCAG AA before they ship. Toggle the theme in the header — everything below re-tones live.
Identity
Colour ramps
Eleven steps per ramp, generated from one seed. Lightness targets are fixed in OKLCH and chroma tapers at both ends, which is why the light steps do not turn chalky and the dark steps do not turn muddy.
Semantic roles
Screens name roles, never ramp steps. That indirection is what lets the dark theme be a design rather than an inversion.
Type scale
Controls
Callouts
Your contracted price is held until renewal.
Invoices are raised 14 days before the due date.
Payment received. Receipt SH-RCT-2026-000312 issued.
Backup is not included at any tier.
Invoice 14 days overdue. The service is suspended.
Iconography
Accessibility audit
Every text and non-text pair the interface actually uses, measured against WCAG 2.1 AA in both themes. This runs as a unit test too — the build fails before a palette regression reaches a customer.
Light theme
All 20 pairs pass| Pair | Usage | Ratio | Required | Grade |
|---|---|---|---|---|
| text on canvas | Body text on the page ground | 13.59 | 4.5 | AAA |
| text on surface | Body text on a card | 14.27 | 4.5 | AAA |
| text on surface-raised | Body text on a raised surface | 14.27 | 4.5 | AAA |
| text-secondary on surface | Secondary text on a card | 7.27 | 4.5 | AAA |
| text-muted on surface | Muted text — labels, captions, table meta | 5.16 | 4.5 | AA |
| text-muted on canvas | Muted text on the page ground | 4.92 | 4.5 | AA |
| on-brand on brand | Label on a primary button | 4.95 | 4.5 | AA |
| on-accent on accent | Label on an accent chip | 6.62 | 4.5 | AA |
| brand-text on brand-subtle | Brand text on a tinted panel | 6.61 | 4.5 | AA |
| brand-text on surface | Brand link on a card | 7.01 | 4.5 | AAA |
| success-text on success-subtle | Active status pill | 6.51 | 4.5 | AA |
| warning-text on warning-subtle | Suspended status pill | 6.99 | 4.5 | AA |
| danger-text on danger-subtle | Overdue status pill | 7.35 | 4.5 | AAA |
| info-text on info-subtle | Informational callout | 6.92 | 4.5 | AA |
| on-success on success | Label on a solid success control | 4.85 | 4.5 | AA |
| on-danger on danger | Label on a solid destructive control | 5.65 | 4.5 | AA |
| border-strong on surface | Input outline against a card | 3.77 | 3.0 | AA Large |
| focus on canvas | Focus ring on the page ground | 4.71 | 3.0 | AA |
| focus on surface | Focus ring on a card | 4.95 | 3.0 | AA |
| brand on surface | Chart series and iconography on a card | 4.95 | 3.0 | AA |
Dark theme
All 20 pairs pass| Pair | Usage | Ratio | Required | Grade |
|---|---|---|---|---|
| text on canvas | Body text on the page ground | 17.49 | 4.5 | AAA |
| text on surface | Body text on a card | 15.87 | 4.5 | AAA |
| text on surface-raised | Body text on a raised surface | 14.21 | 4.5 | AAA |
| text-secondary on surface | Secondary text on a card | 10.40 | 4.5 | AAA |
| text-muted on surface | Muted text — labels, captions, table meta | 8.09 | 4.5 | AAA |
| text-muted on canvas | Muted text on the page ground | 8.92 | 4.5 | AAA |
| on-brand on brand | Label on a primary button | 6.13 | 4.5 | AA |
| on-accent on accent | Label on an accent chip | 8.59 | 4.5 | AAA |
| brand-text on brand-subtle | Brand text on a tinted panel | 8.82 | 4.5 | AAA |
| brand-text on surface | Brand link on a card | 10.72 | 4.5 | AAA |
| success-text on success-subtle | Active status pill | 8.48 | 4.5 | AAA |
| warning-text on warning-subtle | Suspended status pill | 8.18 | 4.5 | AAA |
| danger-text on danger-subtle | Overdue status pill | 8.12 | 4.5 | AAA |
| info-text on info-subtle | Informational callout | 8.27 | 4.5 | AAA |
| on-success on success | Label on a solid success control | 9.21 | 4.5 | AAA |
| on-danger on danger | Label on a solid destructive control | 8.20 | 4.5 | AAA |
| border-strong on surface | Input outline against a card | 3.72 | 3.0 | AA Large |
| focus on canvas | Focus ring on the page ground | 9.27 | 3.0 | AAA |
| focus on surface | Focus ring on a card | 8.41 | 3.0 | AAA |
| brand on surface | Chart series and iconography on a card | 5.82 | 3.0 | AA |