# Brilliant — Marketing Site Design Spec

> Source: brilliant.org (live DOM, computed styles), 2026-08-01 (desktop 1512px). Panda CSS.
> Coverage: homepage (hero, category chips, cards). No login captured — dashboard is `needs-dashboard`. All stylesheets same-origin (`sheetsBlocked: 0`); the primary CTA is a Panda `button3d` composite so its `:hover` recipe 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text
| 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 |

### Accent & dark surfaces
| 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 |

### Surfaces & borders
| 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.

## 3. Typography Rules

- Display face: **CoFo Robert** (Contrast Foundry, a warm high-contrast serif) — headlines, weight 500. **Preview substitutes Fraunces** (closest open warm serif).
- Text/UI face: **CoFo Brilliant** (bespoke humanist sans) — body, buttons, nav. **Preview substitutes Inter.** Both are licensed; the swap is noted here and both families load from a single Google Fonts link.
- Body: 20px / 30px / 400, colour `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.

## 4. Component Stylings

### Buttons (all full pills, radius 9999px)
- **Primary**: bg `#29cc57`, text `#ffffff`, radius `9999px`, h 56px, padding `12px 22px`, 20px/500, soft shadow `rgba(0,0,0,.05) 0 4px 14px`. It is a Panda `button3d` composite (a coloured face over a darker base) that presses down on click; on hover the face border goes to `#000000`.
- **Secondary**: bg `#ffffff`, text `rgba(0,0,0,.4)`, radius `9999px`, h 56px, same soft shadow — a quiet white pill.
- **Nav "Sign in"**: transparent, text `#000000`, border `2px solid rgba(0,0,0,.1)`, radius `54px` (pill), h 40px.
- **Category chip**: bg `#000000`, text `#ffffff`, radius `9999px`, h 44px, 16px/500 (subject selectors like Math / CS).

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary pill | `#29cc57` / white, soft shadow | 3D face border → `#000000` | 2px ring `rgba(0,0,0,.4)` | presses down (3D base shows) | dimmed |
| Text link | `#000000` | colour → `#456dff` | — | — | — |
| Input | white, 1px `#e4e4e4` | — | inset box-shadow ring | — | — |

### Inputs
- Text/email/search fields: white bg, 1px `#e4e4e4` border, pill or 17px radius. Focus: inset `box-shadow` ring (a `rgba(0,0,0,.4) 0 0 0 2px` ring is used on toast buttons). Inputs are sparse on marketing — most of the surface is cards + video.

### Cards / panels
- Big rounded cards: radius `17-20px`, on warm `#f5f3f1` or a pastel tint, soft ambient shadow `rgba(0,0,0,.1) 0 0 15px` (and a stronger `rgba(0,0,0,.2) 0 0 25px` on lift). Category cards carry the pastel tints. Circular tokens use `50%`.

### Nav
- A single white rounded pill bar holding the "Brilliant" sans wordmark left and the "Sign in" outline pill right — no full-width bar, the nav itself is a floating rounded container.

## 5. Layout Principles

- Centred content, generous margins; the hero is a two-column card (serif headline + CTAs left, interactive lesson video right) inside one big `#f5f3f1` rounded panel.
- Spacing is roomy; sections are stacked rounded cards rather than full-bleed bands.
- Category grid: rows of pastel-tinted cards, each a subject, below the hero.
- Nav is a floating pill; footer is a calm multi-column link list.

## 6. Depth & Elevation

- Radius scale: `9999px` pills (dominant, 28×), `20px` / `17px` cards, `44px` / `24px` larger controls, `50%` circles, plus `1-2px` on tiny elements. Nothing is square by default.
- Shadows are soft and ambient, never hard: `rgba(0,0,0,.1) 0 0 15px` (card glow), `rgba(0,0,0,.05) 0 4px 14px` (button), `rgba(0,0,0,.2) 0 0 25px` (lifted). The 3D button adds a flat `rgba(0,0,0,.1) 0 4px 0` base edge. One neumorphic pair (`rgb(199,197,199) -3px -3px 5px` / `0 0 12px`) appears on a single control.
- Borders are light: `1px #e4e4e4` hairlines; structure is carried by rounded surfaces + soft shadow, not lines.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| all | 0.3s | ease | House transition (dominant, 15×) |
| background-color, color, opacity | 0.2s | ease / ease-out | Buttons, links |
| all | 0.25s | ease-out | Cards, hovers |
| opacity | 0.1s | ease-out | Quick fades |
| opacity, transform | 1.5s | ease-out | Slow reveals |

- House transition: `all 0.3s ease`. Custom cubic-beziers used: `cubic-bezier(0.5,0,0,1)`, `cubic-bezier(0.16,1,0.7,1)`, `cubic-bezier(0.5,0,0.2,1)` among others.
- `@keyframes` (the personality — from the interactive-lesson engine): `evalPulse`, `evalFlashHighlight`, `evalFadeIn` (answer feedback), `shakeX` / `shakeXInverse` (wrong-answer shake), `fillProgress` (progress bars), `popularCardShine`, `floatyNudge`, `borderGlow`, `scaleIn`, `shimmer`, `slideFromBottom`, plus streak/habit end-state animations (`endstate-streakBgFadeIn`, `endstate-habitMoveUp`) and skeleton loaders. Consent uses `onetrust-fade-in`, a banner uses `banner-slide-in`.
- No animation library detected (Panda CSS + bespoke keyframes). **1 `prefers-reduced-motion: reduce` block** is honoured.

## 8. Backgrounds, Effects & WebGL

- Mostly flat warm surfaces. Subtle gradients only: a `linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05))` darkening overlay and white-to-transparent edge fades (`to right/left, #ffffff → transparent`) that fade carousel edges.
- 5 background `<video>` elements (the interactive-lesson previews inside hero/cards) and 1 small WebGL `<canvas>` (an offscreen effect, 0×0 at capture). No grain, no `backdrop-filter`, no Three.js.

## 9. Do's and Don'ts

### Do
- Pair a warm serif (CoFo Robert / Fraunces) for headlines with the CoFo Brilliant sans (Inter) for everything else; keep weight ≤ 500.
- Set body at 20px/30px in soft `rgba(0,0,0,.4)`, not full black.
- Make every control a full pill (radius 9999px); use `17-20px` on cards.
- Reserve green `#29cc57` for the single primary action and the spark mark; get variety from pale category tints (`#f0f8fa`, `#e7eee2`, `#ffede0`).
- Work on a warm off-white `#f5f3f1` surface, not pure white, with soft ambient shadows.
- Lean into feedback motion — pulse/flash/shake on answers, shine/nudge on cards — over an `all 0.3s ease` base, and honour reduced-motion.

### Don't
- Don't use bold weights (700+) or a square-cornered control.
- Don't add a second saturated accent beside the green, or make category tints loud.
- Don't set body copy in full black — the softness is intentional.
- Don't use hard drop shadows or hairline-heavy structure; keep shadows soft and ambient.
- Don't make it feel gamified-loud — the register is calm and bookish.

## 10. Responsive Behavior

- A dense device-targeted breakpoint ladder. Real layout seams: `48.0625rem` (~769px), `62rem` (~992px), `80rem` (~1280px), plus many narrow-device max-widths (425/476/530/600/768/900/1280px) tuning the hero and card grid.
- Mobile: hero collapses to single column, CTAs stack full-width, category grid reflows to one/two columns.
- A theme toggle exists in markup (`hasDarkToggle`), but `darkSchemeBlocks: 0` on marketing — the dark theme belongs to the logged-in product, not this page. 0 container queries.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Surface `#f5f3f1` · Text `#000000` · Muted `rgba(0,0,0,.4)`/`#656565` · Accent `#29cc57`
- Fonts: CoFo Robert serif (headlines, Fraunces stand-in) + CoFo Brilliant sans (body, Inter) · Body 20/30 400 · Radius: 9999px pills / 17-20px cards · Control height: 56px
- Focus: 2px `rgba(0,0,0,.4)` ring · Primary hover: 3D face border → `#000000` · Link hover: `#456dff`

<brilliant_design_language>
Use the Brilliant design language: warm, encouraging, bookish learning. White canvas over a warm off-white working surface #f5f3f1, with big soft-cornered cards (17-20px). Headlines in a warm high-contrast serif (CoFo Robert; Fraunces stand-in) at weight 500 with tightening negative tracking (-0.5px at 50px, -1.2px at 60px); everything else in the CoFo Brilliant humanist sans (Inter stand-in), body 20px/30px 400 in soft rgba(0,0,0,.4), never full black. Every control is a full pill (radius 9999px): the primary is a 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 #29cc57 is the only saturated colour, reserved for the primary action and the four-point spark mark; variety comes from pale category tints #f0f8fa / #e7eee2 / #ffede0, with a dark slate #27455c for deep sections and link-hover blue #456dff. Depth is soft ambient shadow (card glow rgba(0,0,0,.1) 0 0 15px), 1px #e4e4e4 hairlines, never hard lines. Motion carries the personality: an all-0.3s-ease base plus feedback keyframes from the lesson engine — evalPulse, evalFlashHighlight, shakeX on wrong answers, fillProgress, popularCardShine, floatyNudge — honouring reduced-motion. Feels: warm, encouraging, bookish, playful. Avoid: bold weights, square corners, a second saturated accent, full-black body text, hard drop shadows, and any gamified-loud treatment.
</brilliant_design_language>