DESIGN.md · Analysis

Brilliant

brilliant.org · 30 Sept 2026 · 47 colors · CoFo Brilliant

Brilliant

Interactive visual tutoring platform for mathematics and coding, serving students from elementary through college. The design system emphasizes clarity, accessibility, and progressive learning through a clean, modern interface.

Colors

surface#ffffff

surface-dim#f8f8f8

surface-bright#ffffff

surface-container-lowest#f2f2f2

surface-container-low#f8f8f8

surface-container#f2f2f2

surface-container-high#e2e2e2

surface-container-highest#d8d8d8

on-surface#141414

on-surface-variant#6c6c6c

inverse-surface#141414

inverse-on-surface#ffffff

outline#c1c1c1

outline-variant#d7d7d7

surface-tint#3860be

primary#29cc57

on-primary#ffffff

primary-container#6cc04a

on-primary-container#ffffff

inverse-primary#29cc57

secondary#3860be

on-secondary#ffffff

secondary-container#456dff

on-secondary-container#ffffff

tertiary#0000ff

on-tertiary#ffffff

tertiary-container#456dff

on-tertiary-container#ffffff

error#d32f2f

on-error#ffffff

error-container#ffcdd2

on-error-container#b71c1c

primary-fixed#6cc04a

primary-fixed-dim#29cc57

on-primary-fixed#ffffff

on-primary-fixed-variant#ffffff

secondary-fixed#456dff

secondary-fixed-dim#3860be

on-secondary-fixed#ffffff

on-secondary-fixed-variant#ffffff

tertiary-fixed#456dff

tertiary-fixed-dim#0000ff

on-tertiary-fixed#ffffff

on-tertiary-fixed-variant#ffffff

background#ffffff

on-background#141414

surface-variant#e2e2e2

Typography

display: fontFamily: CoFo Brilliant · fontSize: 60px · fontWeight: 700 · lineHeight: 68px · letterSpacing: -0.04em
headline-lg: fontFamily: CoFo Brilliant · fontSize: 40px · fontWeight: 600 · lineHeight: 48px · letterSpacing: -0.02em
headline-md: fontFamily: CoFo Brilliant · fontSize: 28px · fontWeight: 600 · lineHeight: 36px · letterSpacing: -0.01em
title-lg: fontFamily: CoFo Brilliant · fontSize: 20px · fontWeight: 600 · lineHeight: 28px · letterSpacing: 0em
body-lg: fontFamily: CoFo Brilliant · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0em
body-md: fontFamily: CoFo Brilliant · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0em
label-md: fontFamily: CoFo Brilliant · fontSize: 14px · fontWeight: 500 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: CoFo Brilliant · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.05em

Design guidance

Overview

Brilliant is an interactive visual tutoring platform designed to make mathematics and coding accessible and engaging for learners from elementary through college. The design system embodies **Pedagogical Clarity**—a philosophy that prioritizes visual hierarchy, progressive disclosure, and intuitive navigation to support learning at every stage. The interface uses a clean, light-dominant aesthetic with strategic accent colors (vibrant green for primary actions, deep blue for secondary emphasis) that guide users through structured learning paths. The brand personality is encouraging yet precise: conversational without being casual, expert without being intimidating. The voice celebrates small wins, explains concepts patiently, and never assumes prior knowledge. Example sentence: "Master fractions by building them visually—drag the pieces to see how they combine."

Colors

The color system balances accessibility with visual distinction. **Primary (#29cc57)** is the signature action green—used exclusively for primary CTAs (Sign Up, Start Course), progress indicators, and success states. It conveys growth and achievement. **Secondary (#3860be)** is a deep, professional blue deployed for secondary actions, course badges, and informational highlights; it establishes trust and academic rigor. **Tertiary (#0000ff)** is reserved for advanced interactive states and mathematical notation contexts. The surface stack uses a near-white foundation (#ffffff) with carefully calibrated grays: surface-container-high (#e2e2e2) for subtle card backgrounds, surface-container-highest (#d8d8d8) for hover states, and outline (#c1c1c1) for borders. On-surface text is near-black (#1

Typography

The type system uses **CoFo Brilliant** as the primary typeface, a custom humanist sans-serif that balances friendliness with clarity. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major page titles. Headline-lg (40px, 600 weight) introduces learning paths and course categories. Headline-md (28px, 600 weight) marks section breaks and course names. Title-lg (20px, 600 weight) labels cards and subsections. Body-md (16px, 400 weight, 24px line-height) is the primary reading size for course descriptions and instructional text—set at 16px to ensure legibility on mobile without zoom. Label-md (14px, 500 weight) is used for button text, badges, and form labels; label-sm (12px, 500 weight, 0.05em tracking) for metadata, grade levels, and supplementary info. All headings us

Layout

The layout uses a **12-column fluid grid** with a max-width of 1280px (1280px) and a 24px gutter. Sections are separated by 40px (lg spacing) vertically to create clear rhythm and breathing room between learning paths, course grids, and promotional sections. The container uses symmetric 24px padding on desktop, collapsing to 16px on tablet and 12px on mobile. Course cards are arranged in a responsive 6-column grid on desktop (2 cards per row in a 1200px container), 3-column on tablet, and single-column on mobile. Hero sections and full-width callouts use the full container width with 64px (xl spacing) top/bottom padding. Whitespace is intentional: 12px (sm spacing) between related elements (icon + label), 24px (md spacing) between card groups, and 40px (lg spacing) between major sections.

Elevation & Depth

Depth is achieved through a **flat-with-subtle-shadows** approach that maintains visual clarity while establishing hierarchy. Level 1 (Base): flat white surface (#ffffff) with no shadow—the default for body backgrounds and primary content areas. Level 2 (Standard Card): 0 4px 12px rgba(0,0,0,0.1) with a 1px border at #d7d7d7—used for course cards, learning path containers, and modal backgrounds. Level 3 (Elevated/Hover): 0 16px 40px rgba(0,0,0,0.12) with the same 1px border—applied on card hover, open modals, and dropdown menus. Focus states use a 3px inset box-shadow: 0 0 0 3px rgba(56, 96, 1

Shapes

The shape system follows **Friendly Geometry**—a balance between approachability and precision. Buttons use 9999px (full) border-radius to create pill-shaped CTAs that feel inviting and modern; this applies to both primary (#29cc57) and secondary buttons. Cards use 1rem (16px) border-radius for a softer, more approachable feel than sharp corners, signaling that learning is accessible. Input fields also use 9999px to match button styling and create visual cohesion in forms. Badges use 9999px for a compact, badge-like appearance. Smaller interactive elements (list items, dropdown items) use 0.75

Components

Action Elements Buttons are the primary driver of user progression. **Button-primary** uses #29cc57 background, white text, 16px 20px padding, 48px height, and 9999px radius; font-weight is 500 (CoFo Brilliant medium). On hover, the background shifts to #6cc04a (primary-container) with a 200ms ease transition. **Button-secondary** uses #e2e2e2 background with #141414 text, 12px 24px padding, and a 1px #c1c1c1 border; on hover, it shifts to #d8d8d8. Both buttons use label-md typography (14px, 500 weight). Focus states apply a 3px inset box-shadow: 0 0 0 3px rgba(56, 96, 190, 0.1).

Containers & Surfaces **Card** is the foundational container: white background, 1rem (16px) border-radius, 24px padding, 1px #d7d7d7 border, and 0 4px 12px rgba(0,0,0,0.1) shadow. On hover, the background

Do's and Don'ts

**Do**

Do use primary green (#29cc57) exclusively for primary CTAs and success indicators—it signals progression and achievement, core to the learning experience.
Do maintain 24px (md spacing) between card groups and 40px (lg spacing) between major sections to ensure visual breathing room and reduce cognitive load.
Do apply label-sm (12px, 500 weight, 0.05em tracking) with text-shadow: 0 1px 2px rgba(0,0,0,0.05) for metadata over light backgrounds to ensure legibility.
Do use 9999px border-radius on buttons and inputs to create a cohesive, approachable visual language that signals ease of use.
Do apply 200ms ease transitions on all interactive state changes (hover, focus, active) to create a responsive, polished feel without jarring jumps.

**Don't**

Don't use secondary blue (#3860be) for primary CTAs—it's reserved for secondary actions and informational elements; using it for main actions dilutes the visual hierarchy.
Don't apply shadows darker than 0 16px 40px rgba(0,0,0,0.12)—the design system prioritizes flatness with subtle depth; heavy shadows break the pedagogical clarity.
Don't mix border-radius values arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency across components.
Don't use near-black (#141414) text smaller than 14px without increasing line-height to at least 1.5x—body copy at 16px uses 24px line-height (1.5x) for readability on mobile.
Don't apply focus states without a visible indicator (3px inset box-shadow or outline); keyboard navigation is critical for accessibility in an educational platform.

---
version: alpha
name: Brilliant
description: >-
  Interactive visual tutoring platform for mathematics and coding, serving students from elementary through college. The
  design system emphasizes clarity, accessibility, and progressive learning through a clean, modern interface.
logo:
  src: https://brilliant.org/apple-touch-icon-180x180-precomposed.png
colors:
  surface: '#ffffff'
  surface-dim: '#f8f8f8'
  surface-bright: '#ffffff'
  surface-container-lowest: '#f2f2f2'
  surface-container-low: '#f8f8f8'
  surface-container: '#f2f2f2'
  surface-container-high: '#e2e2e2'
  surface-container-highest: '#d8d8d8'
  on-surface: '#141414'
  on-surface-variant: '#6c6c6c'
  inverse-surface: '#141414'
  inverse-on-surface: '#ffffff'
  outline: '#c1c1c1'
  outline-variant: '#d7d7d7'
  surface-tint: '#3860be'
  primary: '#29cc57'
  on-primary: '#ffffff'
  primary-container: '#6cc04a'
  on-primary-container: '#ffffff'
  inverse-primary: '#29cc57'
  secondary: '#3860be'
  on-secondary: '#ffffff'
  secondary-container: '#456dff'
  on-secondary-container: '#ffffff'
  tertiary: '#0000ff'
  on-tertiary: '#ffffff'
  tertiary-container: '#456dff'
  on-tertiary-container: '#ffffff'
  error: '#d32f2f'
  on-error: '#ffffff'
  error-container: '#ffcdd2'
  on-error-container: '#b71c1c'
  primary-fixed: '#6cc04a'
  primary-fixed-dim: '#29cc57'
  on-primary-fixed: '#ffffff'
  on-primary-fixed-variant: '#ffffff'
  secondary-fixed: '#456dff'
  secondary-fixed-dim: '#3860be'
  on-secondary-fixed: '#ffffff'
  on-secondary-fixed-variant: '#ffffff'
  tertiary-fixed: '#456dff'
  tertiary-fixed-dim: '#0000ff'
  on-tertiary-fixed: '#ffffff'
  on-tertiary-fixed-variant: '#ffffff'
  background: '#ffffff'
  on-background: '#141414'
  surface-variant: '#e2e2e2'
typography:
  display:
    fontFamily: CoFo Brilliant
    fontSize: 60px
    fontWeight: '700'
    lineHeight: 68px
    letterSpacing: '-0.04em'
  headline-lg:
    fontFamily: CoFo Brilliant
    fontSize: 40px
    fontWeight: '600'
    lineHeight: 48px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: CoFo Brilliant
    fontSize: 28px
    fontWeight: '600'
    lineHeight: 36px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: CoFo Brilliant
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
    letterSpacing: 0em
  body-lg:
    fontFamily: CoFo Brilliant
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0em
  body-md:
    fontFamily: CoFo Brilliant
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0em
  label-md:
    fontFamily: CoFo Brilliant
    fontSize: 14px
    fontWeight: '500'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: CoFo Brilliant
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.05em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1280px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 12px rgba(0,0,0,0.1)
  lg: 0 16px 40px rgba(0,0,0,0.12)
layout:
  containerMaxWidth: 1280px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 16px 20px
    height: 48px
    fontWeight: '500'
    transition: background-color 200ms ease
  button-primary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
  button-secondary:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 12px 24px
    height: 48px
    fontWeight: '500'
    border: 1px solid {colors.outline}
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-highest}'
    textColor: '{colors.on-surface}'
  card:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.lg}'
    padding: '{spacing.md}'
    border: 1px solid {colors.outline-variant}
    boxShadow: '{elevation.sm}'
  card-hover:
    backgroundColor: '{colors.surface-dim}'
    boxShadow: '{elevation.md}'
    transition: all 200ms ease
  input-field:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    padding: 6px 15px
    border: 1px solid {colors.outline}
    height: 40px
  input-field-focus:
    borderColor: '{colors.secondary}'
    boxShadow: 0 0 0 3px rgba(56, 96, 190, 0.1)
  badge:
    backgroundColor: '{colors.secondary-container}'
    textColor: '{colors.on-secondary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    fontWeight: '600'
    letterSpacing: 0.05em
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    transition: background-color 150ms ease
  list-item-hover:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.primary}'
  modal-overlay:
    backgroundColor: rgba(20, 20, 20, 0.5)
    backdropFilter: blur(4px)
  modal-content:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.xl}'
    padding: '{spacing.lg}'
    boxShadow: '{elevation.lg}'
    border: 1px solid {colors.outline-variant}
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons are the primary driver of user progression. **Button-primary** uses #29cc57 background, white text, 16px 20px padding, 48px height, and 9999px radius; font-weight is 500 (CoFo Brilliant medium). On hover, the background shifts to #6cc04a (primary-container) with a 200ms ease transition. **Button-secondary** uses #e2e2e2 background with #141414 text, 12px 24px padding, and a 1px #c1c1c1 border; on hover, it shifts to #d8d8d8. Both buttons use label-md typography (14px, 500 weight). Focus states apply a 3px inset box-shadow: 0 0 0 3px rgba(56, 96, 190, 0.1).

### Containers & Surfaces
**Card** is the foundational container: white background, 1rem (16px) border-radius, 24px padding, 1px #d7d7d7 border, and 0 4px 12px rgba(0,0,0,0.1) shadow. On hover, the background

## Do's and Don'ts

**Do**
- Do use primary green (#29cc57) exclusively for primary CTAs and success indicators—it signals progression and achievement, core to the learning experience.
- Do maintain 24px (md spacing) between card groups and 40px (lg spacing) between major sections to ensure visual breathing room and reduce cognitive load.
- Do apply label-sm (12px, 500 weight, 0.05em tracking) with text-shadow: 0 1px 2px rgba(0,0,0,0.05) for metadata over light backgrounds to ensure legibility.
- Do use 9999px border-radius on buttons and inputs to create a cohesive, approachable visual language that signals ease of use.
- Do apply 200ms ease transitions on all interactive state changes (hover, focus, active) to create a responsive, polished feel without jarring jumps.

**Don't**
- Don't use secondary blue (#3860be) for primary CTAs—it's reserved for secondary actions and informational elements; using it for main actions dilutes the visual hierarchy.
- Don't apply shadows darker than 0 16px 40px rgba(0,0,0,0.12)—the design system prioritizes flatness with subtle depth; heavy shadows break the pedagogical clarity.
- Don't mix border-radius values arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency across components.
- Don't use near-black (#141414) text smaller than 14px without increasing line-height to at least 1.5x—body copy at 16px uses 24px line-height (1.5x) for readability on mobile.
- Don't apply focus states without a visible indicator (3px inset box-shadow or outline); keyboard navigation is critical for accessibility in an educational platform.

Edit, then copy or download.