Design System

Palette

Text colours

All foreground tokens. Semantic tones must pair with a matching background: body, surface, or the corresponding light surface.

Neutral. Use on any light surface
neutral neutral
secondary secondary
link link
Brand
brand brand
Semantic. Pair with body, surface, or matching light surface
critical Critical
caution Caution
positive Positive
info Info
promote Promote
Inverted. Dark neutral surface only
neutralInverted neutralInverted
white white

Surfaces

Four light surfaces from page foundation to subtle decoration. Neutral, secondary, and link all pass WCAG AA on every light surface. The dark neutral surface requires neutralInverted or white.

body Page foundation
neutral secondary link
surface Cards, modals, form fields
neutral secondary link
neutralSoft Disabled states
neutral secondary link
neutralLight Badges, tags, table headers
neutral secondary link
neutral Tooltips, toasts, buttons
neutralInverted white
Surface A card using the surface background and a neutral border. 
<Box
    background="surface"
    boxShadow="borderNeutral"
    padding="large"
    borderRadius="md">
    <Stack space="x-small">
        <Text weight="semibold">Surface</Text>
        <Text
            tone="secondary"
            size="small">
            A card using the surface background and a neutral border.
        </Text>
    </Stack>
</Box>

Semantic tones

Each tone has a solid and a light surface. Solid takes white text only. Light takes the tone colour or neutral, never white.

critical Errors, destructive actions
white ✓
criticalLight Critical text
critical ✓ neutral ✓
caution Warnings, attention needed
white ✓
cautionLight Caution text
caution ✓ neutral ✓
positive Success, confirmation
white ✓
positiveLight Positive text
positive ✓ neutral ✓
info Informational, help text
white ✓
infoLight Info text
info ✓ neutral ✓
promote Premium features, upgrades
white ✓
promoteLight Promote text
promote ✓ neutral ✓

Brand

The brand red and its accent. Both are solid surfaces that take white text only.

brand Primary brand colour
white ✓
brandAccent Brand accent
white ✓

Borders

Applied as inset box shadows. 1px for decoration and component states, 2px for focus rings.

neutral Default inputs
neutralLight Dividers
brand Brand focus
critical Errors
caution Warnings
positive Success
info Info
promote Promote
Focus rings (2px)
neutralLarge Neutral focus
brandLarge Brand focus
criticalLarge Error focus

Social

Platform colours for social links and buttons, darkened from the official brand colours where needed so white text passes WCAG AA.

Mastodon
Bluesky
Twitter
Discord
LinkedIn

Buttons

Solid for primary and destructive actions. Soft for any tone including secondary versions of neutral and critical. Caution, positive, info, and promote are soft-only due to insufficient contrast with white text as solid.

Solid
Soft