Design System

Design Tokens

The visual language of go_2040. Source of truth is the vendored shared/theme-tokens.css (design-templates semantic tokens — one-place dark flip via --sem-*) plus the runtime static/tokens.css, surfaced as Tailwind utilities through input.css.

Brand colours

Per-website runtime vars (--brand-primary, …); the theme exposes them as utilities bg-primary / text-primary.

Primary

bg-primary · --brand-primary

Primary strong

bg-primary-strong · --brand-primary-strong

Surface (warm)

bg-surface-warm · --surface-warm

Semantic surfaces & text

Role-based tokens that flip in ONE place (--sem-* under [data-theme="dark"]) — use these instead of per-element dark: variants for surfaces, text and borders. go_2040's navy text-secondary headings flip via the theme's own --secondary token.

Surface

bg-surface · page background

Surface raised

bg-surface-raised · cards, panels, dropdowns

Surface muted

bg-surface-muted · wells, alt sections, hovers

Heading

text-heading · headings, emphasis

Body ink

text-ink · body text

Muted ink

text-ink-muted · meta, secondary

border-edge · default borders, dividers (also divide-edge, bg-edge)

border-edge-strong · emphasised borders, inputs (also divide-edge-strong)

border-edge-raised · raised-surface outline (dark-only hairline)

Neutral scale

The raw grey scale behind the semantic tokens above. Prefer the semantic utilities for surfaces/text/borders; reach for a raw neutral-* only where both modes intentionally share the value.

bg-neutral-50

100

bg-neutral-100

200

bg-neutral-200

300

bg-neutral-300

400

bg-neutral-400

500

bg-neutral-500

600

bg-neutral-600

700

bg-neutral-700

800

bg-neutral-800

900

bg-neutral-900

950

bg-neutral-950

Status colours

Danger + success roles with soft alert fills — semantic light/dark tokens (v1.14.0). One class per role, no dark: variants: toggle the theme switcher and watch them flip live.

Danger

text-danger / bg-danger · errors, destructive

Success

text-success / bg-success · confirmations

Error pill

Danger soft

bg-danger-soft border-danger/40 text-danger · alerts

Saved pill

Success soft

bg-success-soft border-success/40 text-success · alerts

Typography

Family --font-sans = Roboto, Arial, sans-serif (body); --font-display = Plus Jakarta Sans (headings).

text-xsThe quick brown fox — 0.75rem

text-smThe quick brown fox — 0.875rem

text-baseThe quick brown fox — 1rem

text-lgThe quick brown fox — 1.125rem

text-xlThe quick brown fox — 1.25rem

text-2xlThe quick brown fox — 1.5rem

text-3xlThe quick brown fox — 1.875rem

text-4xlThe quick brown fox — 2.25rem

text-5xlBrown fox — 3rem

Weights

font-light · 300

font-normal · 400

font-medium · 500

font-semibold · 600

font-bold · 700

Border radius

rounded-sm

rounded

rounded-md

rounded-lg

rounded-xl

rounded-2xl

rounded-full

Signature corners

Oversized brand radii for hero / feature cards (page-builder content). Per-corner arbitrary values, e.g. rounded-tl-[96px].

rounded-tl-[64px]

rounded-tl-[96px]

rounded-tl-[128px]

Shadows

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

shadow-2xl

Layout tokens

`--header-height`	80px	sticky header height / hero pull-up & sticky offsets
`--color-primary`	var(--brand-primary)	brand accent (per website)
`data-theme`	light · dark · system	colour mode; flips the `--sem-*` semantic tokens in one place (and any legacy `dark:` utility)

Looking for ready-made content blocks? See the section library →