Design System
Design Tokens
The visual language of go_2048. Source of truth is the runtime
static/tokens.css (the :root vars + dark overrides)
surfaced as Tailwind utilities through the @theme block in
input.css.
Brand colours
Per-website runtime vars (--primary, …); the theme exposes them as utilities bg-primary / text-primary.
bg-primary · --primarybg-primary-strong · --primary-strongbg-surface-warm · --surface-warmNeutral scale
The theme's greys — surfaces, text, borders. Body is neutral-700 (light) / neutral-200 (dark); page surface is neutral-100 / neutral-950.
bg-neutral-50bg-neutral-100bg-neutral-200bg-neutral-300bg-neutral-400bg-neutral-500bg-neutral-600bg-neutral-700bg-neutral-800bg-neutral-900bg-neutral-950Typography
Family --font-sans = Inter, system fallback (utility font-sans).
text-xsThe quick brown fox — 0.75remtext-smThe quick brown fox — 0.875remtext-baseThe quick brown fox — 1remtext-lgThe quick brown fox — 1.125remtext-xlThe quick brown fox — 1.25remtext-2xlThe quick brown fox — 1.5remtext-3xlThe quick brown fox — 1.875remtext-4xlThe quick brown fox — 2.25remtext-5xlBrown fox — 3remWeights
font-light · 300font-normal · 400font-medium · 500font-semibold · 600font-bold · 700Border radius
rounded-smroundedrounded-mdrounded-lgrounded-xlrounded-2xlrounded-fullSignature 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-smshadowshadow-mdshadow-lgshadow-xlshadow-2xlLayout tokens
--header-height | 80px | sticky header height / hero pull-up & sticky offsets |
--color-primary | var(--primary) | brand accent (per website) |
data-theme | light · dark · system | colour mode; drives every dark: utility |
Looking for ready-made content blocks? See the section library →