Design System

Design Tokens

The visual language of the 2050 template generation. Source of truth is the design-templates repo (Org-PropertyBoom/design-templates), vendored at app/webfront/templates/shared and pinned at unknown via vendor-pins/tokens.version. This stack's Tailwind input only imports the artifact (@import "../shared/theme-tokens.css" layer(theme)) — to change a token, PR design-templates, tag a release, then scripts/sync-tokens.sh latest … tailwind and rebuild.

Brand colours

The tenant's colour injects at runtime as --brand-primary / --brand-primary-strong; primary-soft and primary-wash are derived from it — never hand-lighten a tenant colour.

Primary

bg-primary · var(--brand-primary)runtime injection; this stack still bridges the legacy --primary alias

Primary strong

bg-primary-strong · var(--brand-primary-strong)hover/active fills

Link text

Primary soft

text-primary-soft · derivedequals brand in light mode; color-mix lightened in dark (toggle to see the lift on the dark chip). All brand-coloured interactive text uses this — never raw primary.

chip on wash

Primary wash

bg-primary-wash · derived 10% tinthover fills, chips, selected states

Semantic light/dark tokens

ONE flip block in the vendored artifact (.dark, [data-theme="dark"] → --sem-*) rethemes every token below — per-element dark: variants are legacy. This page is built with them: toggle the theme switcher and watch it retheme live.

Surface

bg-surface · page background

Surface raised

bg-surface-raised · cards, panels, dropdowns

Surface muted

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

Surface warm

bg-surface-warm · warm accent wells

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)

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

Raised card over a dark backdrop

border-edge-raised · transparent in light, light hairline in dark — toggle dark and the outline appears

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

Rules (design-parity rulings)

Brand surfaces are mode-invariant — the site header and footer stay bg-primary + white text in both modes; never theme them.
Brand-coloured TEXT uses text-primary-soft; raw primary is for fills.
Raised surfaces carry border-edge-raised — cards, modals and floating panels over imagery or dark pages.
Never hand-lighten a tenant colour — the derived tokens (primary-soft, primary-wash) exist for that.

Layout & type

`--header-height`	80px	sticky header height / hero pull-up (the 60px shrink under 640px is stack behaviour, not a token)
`--font-sans`	Inter, ui-sans-serif, system-ui, …	the shared type stack (utility `font-sans`)
`data-theme`	light · dark · system	colour mode; flips the `--sem-*` tokens in one place (and any legacy `dark:` utility)

Border radius

rounded-sm · .25rem

rounded-md · .375rem

rounded-lg · .5rem

rounded-xl · .75rem

Signature hero corners

Oversized brand radii for hero / feature cards: --radius-hero (96px) and --radius-hero-lg (128px); page-builder content also uses per-corner arbitrary values like rounded-tl-[96px].

rounded-tl-[64px]

rounded-tl-[96px] · hero

rounded-tl-[128px] · hero-lg

Neutral scale stack-local — not part of the shared tokens

The raw grey scale behind the semantic tokens. 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

Shadows stack-local

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

shadow-2xl

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