Design System

Palette

Colour tokens and valid pairings. Switch themes to verify contrast across all modes.

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
neutralneutral
secondarysecondary
linklink
Brand
brandbrand
Semantic. Pair with body, surface, or matching light surface
criticalCritical
cautionCaution
positivePositive
infoInfo
promotePromote
Inverted. Dark neutral surface only
neutralInvertedneutralInverted
whitewhite

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.

bodyPage foundation
neutralsecondarylink
surfaceCards, modals, form fields
neutralsecondarylink
neutralSoftDisabled states
neutralsecondarylink
neutralLightBadges, tags, table headers
neutralsecondarylink
neutralTooltips, toasts, buttons
neutralInvertedwhite
SurfaceA 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.

criticalErrors, destructive actions
white ✓
criticalLightCritical text
critical ✓neutral ✓
cautionWarnings, attention needed
white ✓
cautionLightCaution text
caution ✓neutral ✓
positiveSuccess, confirmation
white ✓
positiveLightPositive text
positive ✓neutral ✓
infoInformational, help text
white ✓
infoLightInfo text
info ✓neutral ✓
promotePremium features, upgrades
white ✓
promoteLightPromote text
promote ✓neutral ✓

Brand

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

brandPrimary brand colour
white ✓
brandAccentBrand accent
white ✓

Borders

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

neutralDefault inputs
neutralLightDividers
brandBrand focus
criticalErrors
cautionWarnings
positiveSuccess
infoInfo
promotePromote
Focus rings (2px)
neutralLargeNeutral focus
brandLargeBrand focus
criticalLargeError 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