Design System
The board is the system. Every colour on this site is one of the six tile gradients the game itself renders, over the board's own deep blue field.
Tile Palette
The six board colours, copied from PALETTE in the mobile repo's tools/render_tiles.py. Index order matches the game's c0..c5.
Pink
#FF4F9A → #D12470
Orange
#FF8A33 → #D45F12
Yellow
#FFCB2E → #D99C0C
Blue
#2E6BE8 → #183CA8
Green
#3ED18A → #15A062
Purple
#A96BFF → #7736D6
Roles
Semantic tokens are aliases onto the palette above — no colour exists outside it.
--primary → c0 pink
Primary actions. Its foreground is deep navy, not white — white fails contrast on this pink.
--accent → c2 yellow
Stars, highlights, the second voice in a section.
--success → c4 green
The seal colour: exactly what the game uses when a column locks.
--warning → c1 orange
Reserved for genuine warnings, not decoration.
Surfaces
--background · hsl(221 54% 6%)
Deep navy, never pure black — the board's own night.
--card · hsl(221 44% 10%)
Cards and panels, one step lifted.
--board-top → --board-bottom
The playfield gradient, used only inside device mocks.
Typography
Clear hierarchy with Inter font family
Heading 1
text-6xl font-bold
Heading 2
text-5xl font-bold
Heading 3
text-4xl font-semibold
Heading 4
text-2xl font-semibold
Body text with comfortable reading experience. The quick brown fox jumps over the lazy dog.
text-lg leading-relaxed
Small text for captions and metadata. Perfect for secondary information.
text-sm text-muted-foreground
Buttons
Variants and sizes for every use case
Variants
Sizes
With Rounded Corners
Cards
Flexible container component
Basic Card
Simple card with title and description
Content goes here with comfortable padding and spacing.
Interactive Card
Hover to see effects
This card has hover states with smooth transitions.
Highlighted Card
Primary border emphasis
Use for important or featured content.
Badges
Small labels and tags
Form Inputs
Interactive form elements
We'll never share your email.
Avatars
User profile images with fallbacks
Accordion
Collapsible content sections
Board Utilities
Structure instead of atmosphere: a lattice, one band of light, and the bevel that makes a rectangle read as a physical tile.
board-grid
A 76px lattice under a radial mask.
board-light
One crisp band of light off the board.
shadow-lift
The single elevation on the site.
tile-face
Sets the vertical gradient plus the two inset highlights and the coloured drop shadow. Takes --tile-a and --tile-b; never hard-codes a colour.
Animations
Smooth CSS animations using View Transitions API
animate-fade-in
0.5s ease-out
animate-scale-in
0.4s ease-out