---
version: alpha
name: "Brilliant"
description: "Brilliant's site is the rare STEM-education brand that has decided learning math should feel like watching a Vimeo science explainer rather than reading a textbook. The canvas is a near-black `#0c0e16` (very slight cool tilt), headings sit in Brilliant Sans (a custom Inter-adjacent rounded sans) at 56–88px, and the only chromatic accent is \"Brilliant Coral\" `#fc6e51` — a warm orange-coral picked specifically to evoke geometric diagrams in a high-school physics textbook. Where Khan Academy chose green and Duolingo chose green, Brilliant chose this distinctive coral. Hero illustrations are full-bleed animated geometry — circles, triangles, isometric grids in coral and white. The brand reads as \"education that respects your intelligence\" — premium, structured, never cute."
colors:
  bg: "#0c0e16"
  bg-deep: "#06070d"
  bg-section: "#13151f"
  bg-elev: "#1c1f2c"
  surface: "#13151f"
  surface-strong: "#1f2230"
  brand: "#fc6e51"
  brand-hover: "#ff8268"
  brand-pressed: "#e25738"
  brand-deep: "#b8401f"
  brand-tint: "rgba(252, 110, 81, 0.15)"
  on-brand: "#ffffff"
  text: "#ffffff"
  text-strong: "#ffffff"
  text-muted: "#a8acba"
  text-soft: "#7a7e8c"
  text-faint: "#5a5e6c"
  text-on-brand: "#ffffff"
  link: "#fc6e51"
  link-hover: "#ffffff"
  selected-bg: "rgba(252, 110, 81, 0.15)"
  border: "rgba(255, 255, 255, 0.08)"
  border-strong: "rgba(255, 255, 255, 0.16)"
  border-brand: "#fc6e51"
  diagram-coral: "#fc6e51"
  diagram-yellow: "#ffd44d"
  diagram-cyan: "#5ac3e5"
  diagram-purple: "#b582ff"
  success: "#5ac38a"
  warning: "#ffd44d"
  danger: "#ff5a6d"
  info: "#5ac3e5"
typography:
  display:
    fontFamily: "Brilliant Sans"
    fontSize: "88px"
    lineHeight: 1.6
    letterSpacing: "-0.02em"
  body:
    fontFamily: "Brilliant Sans"
    fontSize: "16px"
    lineHeight: 1.6
  mono:
    fontFamily: "JetBrains Mono"
rounded:
  button: "8px"
  card: "12px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "24px"
  xl: "40px"
---

## Overview

## Overview

Brilliant's site is the rare STEM-education brand that has decided learning math should feel like watching a Vimeo science explainer rather than reading a textbook. The canvas is a near-black `#0c0e16` (very slight cool tilt), headings sit in Brilliant Sans at 56–88px, and the only chromatic accent is "Brilliant Coral" `#fc6e51` — a warm orange-coral picked specifically to evoke geometric diagrams.

Where Khan Academy chose forest green and Duolingo chose feather green, Brilliant chose this distinctive coral. Hero illustrations are full-bleed animated geometry — circles morphing to spheres, triangles tiling into hexagons, isometric grids — in coral and white on near-black. Diagram accent colors (yellow `#ffd44d`, cyan `#5ac3e5`, purple `#b582ff`) appear inside illustrations but never as primary CTA palette.

The brand reads as **education that respects your intelligence** — premium, structured, never cute. Body copy is full white at 100% on near-black for maximum legibility (math equations need contrast). Cards have 12px radius and dark surfaces. Buttons are 8px radius (gentle rectangular). Voice is direct: "Learn the math that actually matters", "Solve problems daily".

**Key Characteristics:**
- Near-black canvas `#0c0e16` (slight cool tilt)
- Brilliant Coral `#fc6e51` is the only chromatic CTA color
- Brilliant Sans (custom rounded humanist sans, Inter-adjacent)
- Full white text — equations need max contrast
- 8-12px radius on UI
- Diagram accent palette (yellow/cyan/purple) inside illustrations only
- Animated SVG geometry as hero
- Mono font for equations (JetBrains Mono / Plex Mono)
- Coral-tinted shadows on hover
- Dark-only canvas

## Colors

### Primary
- **Background** (`#0c0e16`): near-black with slight cool tilt. Never pure black.
- **Text** (`#ffffff`): pure white at 100% — legibility for equations.
- **Text Muted** (`#a8acba`): captions, metadata.

### Brand — Brilliant Coral
- **Brand** (`#fc6e51`): primary CTA, brand mark, diagram answer-key markings.
- **Brand Hover** (`#ff8268`), **Pressed** (`#e25738`), **Deep** (`#b8401f`).
- **Brand Tint** (15% coral): selection wash.

### Diagram Accent Palette (illustrations only, not UI)
- **Diagram Yellow** (`#ffd44d`), **Cyan** (`#5ac3e5`), **Purple** (`#b582ff`)
- Used inside SVG geometry hero illustrations, never as primary CTA or UI accent.

### Surface
- **Surface** (`#13151f`), **Surface Strong** (`#1f2230`), **Bg Elev** (`#1c1f2c`).

### Borders
- **Border** (8% white), **Border Strong** (16% white), **Border Brand** (coral).

### Semantic
- success `#5ac38a`, warning `#ffd44d`, danger `#ff5a6d`, info `#5ac3e5`.

## Typography

### Font Family
- **Display + Body**: Brilliant Sans (custom). Falls back to Inter → Larken → system stacks.
- **Mono**: JetBrains Mono / IBM Plex Mono for equations + code.

### Hierarchy

| Role | Font | Size | Weight | LH | Tracking | Notes |
|------|------|------|--------|-----|----------|-------|
| display-hero | Brilliant Sans | 88 | 700 | 1.0 | -0.02em | hero |
| display-lg | Brilliant Sans | 56 | 700 | 1.1 | -0.012em | section |
| h1 | Brilliant Sans | 40 | 700 | 1.15 | -0.008em | sub |
| h2 | Brilliant Sans | 32 | 600 | 1.2 | -0.005em | card |
| h3 | Brilliant Sans | 24 | 600 | 1.25 | 0 | sub-card |
| eyebrow | Brilliant Sans | 12 | 700 | 1.2 | 0.12em UPPER | section labels |
| body | Brilliant Sans | 16 | 400 | 1.6 | 0 | body |
| label | Brilliant Sans | 13 | 700 | 1.3 | 0.05em | tags |
| button | Brilliant Sans | 16 | 700 | 1.0 | 0.02em | CTA |
| formula | JetBrains Mono | 18 | 400 | 1.5 | 0 | inline equations |

### Principles
- **Brilliant Sans for everything** non-equation. Equations use mono.
- **White text on near-black** at 100% — equations need max contrast.
- **Mixed case display, UPPER eyebrows.**
- **Body 16px / 1.6** — generous line-height for prose problems.

## Layout

- Base 4px, 96-120px between sections
- Page max width 1280px
- Hero: full-bleed animated geometry SVG with overlaid headline
- Lesson grid: 3-up at desktop, 2-up at tablet, 1-up at mobile
- Problem display: single-column 720px with mono equations

mobile <479: hero geometry → static SVG; nav hamburger; 1-up lesson grid. tablet: 2-up. desktop+: 3-up.

## Elevation & Depth

| Level | Treatment |
|-------|-----------|
| 1 | `0 2px 8px rgba(0,0,0,0.40)` resting cards |
| 2 | `0 4px 16px rgba(252,110,81,0.20)` hover (coral tint) |
| 3 | `0 8px 24px rgba(0,0,0,0.55)` featured |
| 4 | `0 24px 64px rgba(0,0,0,0.85)` modal |

## Shapes

| Tier | Value | Use |
|------|-------|-----|
| Micro | 2 | indicators |
| Standard | 4 | tooltips |
| Comfortable | 8 | **buttons, inputs** |
| Relaxed | 12 | **cards** |
| Featured | 16 | hero modules |
| Pill | 9999 | tags, badges |

## Components

### Buttons (3 variants — 8px radius)

**Primary** — Coral:
- bg `#fc6e51`, text white, 16px Brilliant Sans 700 0.02em
- Padding 14×28, radius 8
- Hover: bg `#ff8268`, scale 1.02

**Secondary** — bordered:
- bg transparent, text white, 1px white-16% border, radius 8

**Ghost**: bg transparent, text coral, padding 10×20.

### Cards
- bg `#13151f`, **12px radius**, padding 24
- 1px white-8% border + dark shadow `0 2px 8px rgba(0,0,0,0.40)`
- Hover: shadow shifts to `0 4px 16px rgba(252,110,81,0.20)` — coral-tinted

### Pills (subject tags, lesson types)
- bg surface-strong, text white, pill radius, label font 13px 0.05em
- Featured "PREMIUM" pill: coral bg

### Inputs
- bg bg-elev, 1px white-16% border, 8px radius
- Focus: border coral

### Navigation
- 72px sticky header, near-black bg with hairline bottom
- Brilliant wordmark left (white), top-level nav center, "Get started" coral CTA right

- Standard ease, emphasized has gentle overshoot
- 150ms hover, 240ms standard, 400-600ms cinematic for geometry transitions
- Lesson card hover: shadow shifts to coral tint
- Geometry animations on hero loop subtly, paused with `prefers-reduced-motion`

- text on bg = **17.6:1** AAA
- on-brand on brand = **4.5:1** AA
- 3px coral focus ring

Equations are rendered as MathJax / KaTeX with proper screen-reader announcement. Geometry animations are `aria-hidden`. Lesson cards use `role="link"` with full lesson-name aria-label.

### Tone
**Rigorous-friendly.** Confident enough to teach calculus, friendly enough not to make you feel stupid. Voice is the postdoc TA who genuinely loves the subject.

### Microcopy patterns
- Primary CTA: **"Get started"** / **"Try free"** / **"Continue lesson"**
- Sign-up: **"Create your account"**
- Errors: **"Hmm, that's not quite right — try again"**
- Loading: **"Computing…"**
- Empty: **"No lessons yet — start with Algebra Foundations"**
- Encouragement: **"You solved 5 problems today!"**

### CTA verb conventions
- **Get started / Try / Continue / Solve**
- Avoid: "Buy", "Sign up" alone (too transactional)

**Dark-only on web.** Light mode would lose the geometric-diagram-on-blackboard metaphor. The mobile app has light + dark; web stays dark.

Brilliant's marketing system descends from:
1. **Halliday & Resnick / Feynman Lectures** — physics-textbook diagram tradition
2. **Brilliant Sans (custom)** — in-house Inter-adjacent rounded humanist
3. **3Blue1Brown / Vimeo science explainers** — animated-geometry video pacing
4. **Inter (Rasmus Andersson)** — rounded humanist typographic ancestor
5. **Khan Academy** — STEM contemporary; Brilliant differentiated via dark canvas + coral

The brand commits to "education that respects your intelligence" — premium, structured, never cute.

## Do's and Don'ts

### Do
- **Near-black canvas + Brilliant Coral primary CTA.**
- **Brilliant Sans (or Inter fallback) for all UI.**
- **Mono font for equations** — JetBrains Mono or Plex Mono.
- **8-12px radius on UI.**
- **Diagram accent palette** (yellow/cyan/purple) inside SVG illustrations only.
- **Coral-tinted shadow on card hover.**
- **White text 100%** for equations — legibility paramount.
- **Animated geometry hero** when bandwidth allows.

### Don't
- **Don't use light canvas** — kills the blackboard/diagram metaphor.
- **Don't substitute coral.** `#fc6e51` is the brand, not Tailwind orange.
- **Don't use diagram accent colors as primary CTA.** They're for illustrations only.
- **Don't add gradients on CTA.**
- **Don't use cute illustrations of mascots.** Brilliant is geometric, not anthropomorphic.
- **Don't add light mode** without explicit Brilliant approval.

### Quick Color Reference
- bg: `#0c0e16`
- text: `#ffffff` / muted `#a8acba`
- brand (Brilliant Coral): `#fc6e51` / hover `#ff8268`
- diagram accents (illustration only): yellow `#ffd44d`, cyan `#5ac3e5`, purple `#b582ff`
- border: 8% white / strong 16% white

### Example Component Prompts

> Build a Brilliant-style hero: near-black bg, full-bleed animated SVG geometry (rotating triangles → hexagons in coral+white) right 50%, 88px Brilliant Sans Bold heading "Learn math that matters" left, 18px subhead in white. Primary CTA "Try free" 8px-radius coral `#fc6e51` 16px Brilliant Sans 700 0.02em.

> Design a lesson card: surface `#13151f`, 12px radius, 24px pad, 1px white-8% border. 24px Brilliant Sans h3 "Geometry Foundations", 13px UPPER 0.12em eyebrow "ALGEBRA · 12 LESSONS" in coral. Body in 16px white. Hover: coral-tinted shadow.

> Render an inline equation: JetBrains Mono 18px regular, white on near-black, no background. `f(x) = ax² + bx + c`.

> Build a "Continue lesson" CTA: 8px radius, coral bg, white 16px Brilliant Sans 700 "Continue lesson", padding 14×28. Hover: bg `#ff8268`, scale 1.02.

> Design a problem card: surface, 12px radius, monospace formula display top, "Submit answer" button bottom in coral.

### Iteration Guide

1. **Near-black canvas + Brilliant Coral.** No exceptions.
2. **Brilliant Sans (or Inter) for UI, mono for equations.**
3. **Diagram colors live inside illustrations, not on UI.**
4. **8-12px radius — gentle rounded.**
5. **White text 100% on near-black** for equation legibility.
6. **Coral-tinted hover shadows.**
7. **Animated geometry hero when possible.**
8. **Reject light canvas, mascots, gradient CTAs, diagram colors as UI.**