Brilliant

Overview

Brilliant is an interactive learning platform that teaches STEM through guided problem-solving and visual discovery. The design system embodies a philosophy of "Accessible Vibrancy"—a clean, light-dominant interface punctuated by purposeful accent colors that signal interactivity, progress, and achievement. The brand serves students, parents, and educators seeking rigorous, engaging instruction in mathematics, programming, data science, and AI. The aesthetic is contemporary minimalist with playful energy: a white canvas (rgb(255, 255, 255)) provides clarity and focus, while a vibrant green primary (rgb(41, 204, 87)) and supporting blues and pinks create visual rhythm and guide user attention to learning moments. The emotional response is one of confidence and possibility—the interface feels approachable, never intimidating, and celebrates progress through color and motion.

Brilliant's voice is precise, encouraging, and intellectually honest. The tone avoids hype; instead, it speaks with the authority of MIT and Harvard-trained educators. Vocabulary is direct and jargon-aware—explanations are clear without being condescending. The brand personality is curious, patient, and optimistic about human potential. Example sentence in Brilliant's voice: "You've solved 47 problems this week—here's where you're ready to level up."

Colors

The color system is built on a foundation of light neutrals and three strategic accent roles. The surface stack (surface: #FFFFFF, surface-dim: #F2F2F2, surface-container: #EBEBEB) creates visual hierarchy through subtle shifts in lightness, enabling layered card designs and modal overlays without heavy shadows. On-surface text is set to #141414 (near-black) for maximum legibility on white backgrounds, with on-surface-variant (#656565) reserved for secondary text, hints, and disabled states.

Primary (#29CC57) is the signature green used exclusively for affirmative actions: the "I'm a learner" CTA button, success badges, progress indicators, and completion checkmarks. This green is warm, energetic, and distinctly Brilliant—it appears at rgba(41, 204, 87, 0.1) in focus states (0 0 0 3px box

Typography

The type system uses two custom font families—CoFo Robert for large display headings (50px, fontWeight 500, lineHeight 56px) and CoFo Brilliant for body, labels, and UI text (16px base, fontWeight 400, lineHeight 24px). This pairing communicates sophistication and approachability: Robert's geometric, slightly geometric letterforms convey clarity and precision, while Brilliant's friendly proportions feel welcoming. Display text (60px, fontWeight 700, lineHeight 68px, letterSpacing -0.04em) is reserved for hero headlines and major section breaks; headline-lg (50px, fontWeight 500) anchors page sections; headline-md (32px, fontWeight 600) introduces subsections. Body text defaults to 16px with 24px line height (1.5 ratio) for comfortable reading; body-lg (18px, lineHeight 28px) is used for in

Layout

The layout system uses a 12-column grid with a maximum container width of 1216px, providing ample breathing room on desktop while remaining responsive on tablets and mobile. The page rhythm is built on a semantic spacing scale: gutter (24px) defines horizontal margins and column gaps; lg (40px) separates major sections (hero, feature blocks, testimonials); md (24px) is used for card padding and component internal spacing; sm (12px) for list items and compact UI elements. The white background (rgb(255, 255, 255)) is the dominant surface, with surface-dim (#F2F2F2) reserved for subtle section backgrounds or card hover states. Whitespace is generous—sections breathe with 40px to 64px vertical separation—creating a sense of clarity and preventing cognitive overload. The header uses a pill-shap

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic contrast. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.05)) for hover states on list items and light interactive elements; md (0 4px 12px rgba(0, 0, 0, 0.1)) for standard cards, input fields, and default button states; lg (0 16px 40px rgba(0, 0, 0, 0.15)) for modals, dropdowns, and elevated overlays. Cards in the default state carry md shadow; on hover, they elevate to lg shadow with a subtle background shift (surface → surface-dim). The header uses sm shadow to separate it from the page content

Shapes

The shape philosophy is "Friendly Precision"—curves are used purposefully to signal interactivity and approachability, while maintaining geometric clarity. Buttons and primary CTAs use full border-radius (9999px, creating pill shapes) to emphasize their role as primary actions and to soften the interface. Cards and containers use lg radius (0.75rem / 12px) for a modern, slightly rounded appearance that feels contemporary without being overly organic. Input fields also use full radius (9999px) to match button styling and create a cohesive input ecosystem. Secondary UI elements (badges, small co

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses background: {colors.primary} (#29CC57), textColor: {colors.on-primary} (white), rounded: full (9999px), padding: 12px 22px, height: 44px, and fontWeight: 500. On hover, the background shifts to #15B441 (a darker green, -20% lightness) with no shadow change—this provides clear feedback without animation lag. On active/pressed state, the background becomes #009B2B (even darker, -40% lightness). The button-secondary variant uses a light gray background ({colors.surface-container-low}, #F2F2F2) with a 1px border in {colors.outline-variant} (#D8D8D8), maintaining the same padding and height. Secondary buttons hover to {colors.surface-container} (#EBEBEB) with darker text. Button-ghost is transpa

Do's and Don'ts

**Do**

• Do use {colors.primary} (#29CC57) exclusively for affirmative actions, success states, and completion indicators—it is the brand's signature and should never be diluted or overused.
• Do maintain the white background ({colors.surface}, #FFFFFF) as the dominant canvas; it ensures clarity and prevents visual fatigue during long learning sessions.
• Do apply the full-radius (9999px) border-radius to all primary CTAs and input fields to create a cohesive, friendly interaction model.
• Do use the md elevation shadow (0 4px 12px rgba(0, 0, 0, 0.1)) as the default for cards and containers; reserve lg shadow for modals and elevated overlays only.
• Do pair CoFo Robert (display/headline) with CoFo Brilliant (body/labels) to maintain the brand's sophisticated-yet-approachable voice.
• Do use the secondary blue (#7491FF) and tertiary pink (#FF90E0) as supporting accents; never let them compete with primary green for attention.

**Don't**

• Don't use dark backgrounds or high-contrast overlays; Brilliant's aesthetic is light and open, not moody or dramatic.
• Don't apply rounded corners smaller than md (0.5rem / 8px) to interactive elements—they lose their affordance and feel cramped.
• Don't hardcode color values in component styles; always use token references like {colors.primary} so the system remains maintainable and themeable.
• Don't mix typefaces beyond CoFo Robert and CoFo Brilliant; introducing system fonts or serif faces breaks the brand's visual coherence.
• Don't use the primary green (#29CC57) for negative or warning states; reserve it for positive affirmations only. Use {colors.error} (#FF5D5D) for failures.
• Don't apply shadows heavier than lg (0 16px 40px rgba(0, 0, 0, 0.15)) to any component; excessive depth contradicts the clean, accessible aesthetic.