A warm, bookish counterpart to gamified ed-tech: interactive STEM learning rendered calm rather than loud. The canvas is white but the working surface is a warm off-white #f5f3f1, and big soft-cornered cards (17-20px) hold full-motion interactive lesson previews. The signature is a two-face type pairing — a warm high-contrast serif (CoFo Robert) for headlines at weight 500 with tightening negative tracking (-0.5px at 50px, -1.2px at 60px), over the CoFo Brilliant humanist sans for everything functional, with body copy deliberately soft at 40% black rather than full ink. Every control is a full pill (radius 9999px): the primary is a single bright green #29cc57 3D-pressable button with a soft rgba(0,0,0,.05) 0 4px 14px shadow, secondary a quiet white pill, “Sign in” a 2px rgba(0,0,0,.1) outline pill; green is the only saturated colour and is reserved for the primary action and the four-point “spark” mark, with variety coming from pale category tints #f0f8fa / #e7eee2 / #ffede0 and a dark slate #27455c for deep sections. Depth is soft ambient shadow (card glow rgba(0,0,0,.1) 0 0 15px) over 1px #e4e4e4 hairlines, never hard lines. Motion is where the personality lives: an all-0.3s-ease base plus a whole vocabulary of feedback keyframes from the interactive-lesson engine — evalPulse, evalFlashHighlight, shakeX on wrong answers, fillProgress, popularCardShine, floatyNudge — honouring one prefers-reduced-motion block. Only Duolingo neighbours it in the library and the register is completely different: calm and bookish, not gamified.
⚠ needs-dashboard
Browse Brilliant in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: brilliant.org (live DOM, computed styles), 2026-08-01 (desktop 1512px). Panda CSS. Coverage: homepage (hero, category chips, cards). No login captured — dashboard isneeds-dashboard. All stylesheets same-origin (sheetsBlocked: 0); the primary CTA is a Pandabutton3dcomposite so its:hoverrecipe surfaced via the loose matcher, recorded below. Reality check: hint accurate and enriched — "playful illustrated, bright accent" holds, but the signature is a two-face type pairing (a warm bookish serif CoFo Robert for headlines over the CoFo Brilliant sans), a friendly all-pill control set (radius 9999px) with a green #29cc57 primary, a warm off-white #f5f3f1 surface (not pure white), and unusually rich, feedback-driven motion (eval-pulse/flash/shake keyframes from the interactive-lesson engine). Only Duolingo neighbours it and the register is completely different — bookish and calm, not gamified-loud.
Warm, encouraging, hand-held learning — a calm, bookish counterpart to gamified ed-tech. The canvas is white but the working surface is a warm off-white #f5f3f1, and big soft-cornered cards (17-20px) hold full-motion interactive lesson previews. Headlines are set in a warm serif (CoFo Robert) that reads like a maths textbook, while everything functional uses the friendly CoFo Brilliant sans; body copy is deliberately soft, at 40% black. Every control is a full pill, colour is rationed to a single bright green #29cc57 for the primary action plus a set of pastel category tints (blue, green, peach), and the brand mark is a rounded green four-point "spark". Motion is where the personality lives: correct/incorrect answers pulse, flash and shake, cards shine and floaty-nudge. Feels: warm, encouraging, bookish, playful.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #000000 | Primary text, headings (pure black) |
| muted | #656565 | Secondary text (also used as rgba(0,0,0,.4) soft body) |
| faint | #999999 | Tertiary text, captions |
| slate-text | #364153 | Dark-slate labels on tinted cards |
| Token | Hex | Role / usage |
|---|---|---|
| green | #29cc57 | Primary CTA fill ("I'm a learner"), brand spark |
| blue | #3860be | Secondary accent / illustration blue |
| link-hover | #456dff | Link + text-button hover colour |
| slate | #27455c | Dark section background, deep panels |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | Page background, cards, pills |
| warm-surface | #f5f3f1 | Primary card/section tint (warm off-white) |
| grey-surface | #f8f8f8 | Neutral inset surface |
| tint-blue | #f0f8fa | Category card tint (e.g. maths/science) |
| tint-green | #e7eee2 | Category card tint |
| tint-peach | #ffede0 | Category card tint |
| border | #e4e4e4 | 1px hairline dividers |
Rule: green #29cc57 is the only saturated brand colour and is reserved for the primary action + the spark mark. Category variety comes from pale tints, never loud fills.
rgba(0,0,0,.4) (soft, not full black). Fallback stack sans-serif.| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | CoFo Robert | 50 / 55 | 500 | -0.5px |
| Section (h2) | CoFo Robert | 60 / 66 | 500 | -1.2px |
| Sub (h3) | CoFo Brilliant | 30 / 37.5 | 400 | -0.3px |
| Body (p) | CoFo Brilliant | 20 / 30 | 400 | normal |
| Button | CoFo Brilliant | 16-20 | 500 | normal |
| Nav / wordmark | CoFo Brilliant | 16 | 500 | normal |
Pattern: serif for headlines only, sans for everything else; tight negative tracking grows with size (-0.5px at 50px, -1.2px at 60px). Weight tops out at 500 — never bold.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.