Color palette
Eight saturated brand hues — one assigned per game — over a lavender-white canvas. Each card, badge and icon pulls its accent from a single --card variable, so theming a game page is a one-line change.
Brand hues
Neutrals & surfaces
Gradients
Typography
Two families do all the work. Fredoka (rounded display) for anything loud — headings, buttons, labels, badges. Manrope for readable body copy. Sizes are fluid clamp() tokens that scale with the viewport.
--fs-display · clamp(3.2 → 8.2rem)
--fs-h2 · clamp(2 → 3.4rem)
--fs-h3 · 1.5rem
--fs-lead · clamp(1 → 1.18rem)
--fs-body · 1.0625rem (17px)
--fs-label · 0.82rem · tracking .14em
Buttons
Pill-shaped sticker buttons with a thick outline and hard offset shadow. On hover they lift toward you; on press they sink into the shadow. Variants share one .btn base.
Classes: .btn · .btn--primary · .btn--ghost · .btn--lg · .btn--block. Minimum tap target is 54px tall (62px for --lg).
Badges & stickers
Game card
The core repeating component. Hover it (on desktop) to see the tilt-and-lift — odd and even cards tilt opposite ways, the shadow turns the card's accent color, and the icon kicks. The whole card is one clickable <a>.
Anatomy
- .game-cardContainer — white surface, 3px outline,
--r-lg(32px) radius, large sticker shadow. - --cardPer-card accent. Set inline (
style="--card: var(--pink)") — drives icon, sub, hover shadow & badge. - __badgeRotated sticker, top-right. Optional.
- __icon70×70 emoji tile in the accent color.
- __titleFredoka 700, 1.5rem.
- __subOne-line tagline in the accent color.
- __descMuted one-liner describing play.
- __cta"Play →" — arrow slides on hover. Pinned to the bottom.
Accent variations
The same component across all eight hues — this is the full game grid styling at a glance.
Spacing, radius & shadow
Spacing follows a 4px base scale. Corners use four radius tokens. Depth is never a soft blur — it's a hard, offset "sticker" shadow in ink (or the card's accent on hover).
Spacing scale --space-*
Border radius --r-*
Shadows
Borders & motion
Outlines: --bw 3px (standard) · --bw-thin 2px (badges) · --bw-thick 4px (hero features), always in --ink. Motion: --ease-bounce for playful lifts, --t-fast .12s / --t-med .18s for state changes.