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.
Primary
bg-primary · --primaryPrimary strong
bg-primary-strong · --primary-strongSurface (warm)
bg-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.
50
bg-neutral-50100
bg-neutral-100200
bg-neutral-200300
bg-neutral-300400
bg-neutral-400500
bg-neutral-500600
bg-neutral-600700
bg-neutral-700800
bg-neutral-800900
bg-neutral-900950
bg-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
Aa
font-light · 300Aa
font-normal · 400Aa
font-medium · 500Aa
font-semibold · 600Aa
font-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 →