Design systemWhat the Ludea brand is made of — for the landing page, the docs and anything that speaks for the engine. The games keep their own worlds; this is the look of the engine that makes them. Art: tools/art/brand.cjs · tokens: landing.css.
The mark is a speech bubble (you describe a game) holding a play button (it becomes playable) with a spark (the idea). The wordmark is ludea, lower-case, Bricolage Grotesque 800. Keep a clear space of half the mark around it; never recolour, stretch, outline or add effects.
ludealudea
Warm paper, deep ink, and a tangerine-to-coral brand gradient. Accents are used sparingly, one per element. Dark ink bands give rhythm (code, skills). Text is ink or muted on light, white or #c9c8e6 on ink.
--paper#fffaf3 · Page background
--sand#f6efe5 · Alternate sections
--surface#ffffff · Cards
--ink#1d1b3a · Text, dark bands, outlines
--muted#5d5b7a · Secondary text
--coral#ff5b4f · Brand, primary actions
--tangerine#ff8a3d · Brand gradient start
--sun#ffbe2e · Spark, highlights
--mint#19c39a · Success, nature
--sky#3c8dff · Info, tech
--lilac#8a6cff · Magic, help
--rose#ff7aa8 · Care, warmth
--brandtangerine → coral · logo, primary buttons, emphasis
Bricolage Grotesque (600–800) for display and headings, with tight tracking; DM Sans (400–700) for text; the system monospace for code and skill names. Both fonts are self-hosted (SIL Open Font License).
Lead — DM Sans 19/1.6, muted. Body — DM Sans 17/1.6.
new-game · feedback-session — monospace, coral.
Rounded, tactile, friendly: pill buttons with a pressed edge, white cards with a soft shadow, 22 px radius (12 small, 30 large). Buttons are 44–50 px high, with icons that fill them.
Illustrated, never emoji: thick ink outline, two-tone gradient, glossy highlight — the same family as the games' UI, in the Ludea palette. Drawn in a 128 box, rendered at 256 px (WebP).
Lu is the logo with a face: the bubble that listens to your idea. Lu explains things on the site — at most once per screen, never inside the games. Drawn by the same function family as the mark (guide() in brand.cjs), so they never drift apart.
