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.
bg-primary · var(--brand-primary)runtime injection; this stack still bridges the legacy --primary aliasbg-primary-strong · var(--brand-primary-strong)hover/active fillstext-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.bg-primary-wash · derived 10% tinthover fills, chips, selected statesSemantic 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.
bg-surface · page backgroundbg-surface-raised · cards, panels, dropdownsbg-surface-muted · wells, alt sections, hoversbg-surface-warm · warm accent wellstext-heading · headings, emphasistext-ink · body texttext-ink-muted · meta, secondaryborder-edge · default borders, dividers (also divide-edge)border-edge-strong · emphasised borders, inputs (also divide-edge-strong)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.
text-danger / bg-danger · errors, destructivetext-success / bg-success · confirmationsbg-danger-soft border-danger/40 text-danger · alertsbg-success-soft border-success/40 text-success · alertsRules (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; rawprimaryis 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 · .25remrounded-md · .375remrounded-lg · .5remrounded-xl · .75remSignature 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] · herorounded-tl-[128px] · hero-lgNeutral 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-50bg-neutral-100bg-neutral-200bg-neutral-300bg-neutral-400bg-neutral-500bg-neutral-600bg-neutral-700bg-neutral-800bg-neutral-900bg-neutral-950Shadows stack-local
shadow-smshadowshadow-mdshadow-lgshadow-xlshadow-2xlLooking for ready-made content blocks? See the section library →