Skip to content
DesignMunkDesignMunk Submit a site

Brilliant

brilliant.org
A world-class tutor for every home
AI Education Next.js Homepage Co Fo Brilliant Co Fo Robert
Share Visit site
brilliant.org DESKTOP · 1440
Brilliant

AI Breakdown

Design export

# Design brief: the Brilliant design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/02094107/brilliant-org-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/02094107/brilliant-org-featured.webp
- On DesignMunk: https://designmunk.com/brilliant/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Brilliant: Big Serif Headlines and 44px Pill Cards

## Overview

Brilliant's UI aims for calm, credible education with approachable warmth. It is black-and-white first, with a single energetic green for actions. Copy is concise, spacing is generous, and components have soft, friendly corners. The tone is instructional, not hype—use restraint, clarity, and consistent rhythm when extending the system.

## Colors

- **primary (#000000):** Deep ink for headlines and core text.
- **secondary (#cbecd5):** Pale mint wash for supportive backgrounds and highlights.
- **tertiary (#29cc57):** Action green for primary CTAs and interactive confirmations.
- **neutral (#ffffff):** Paper white page and card background.
- **border (#e4e4e4):** Hairline separators, input outlines, and card strokes.
- **surface (#ffffff):** Default surface color matching neutral.
- **on-surface (#000000):** Text and icons on white surfaces.

## Typography

- CoFo Robert (headlines lg/md). Proprietary/self-hosted; agents should not rely on it. Use obtainable substitutes with similar warmth and contrast: Playfair Display, DM Serif Display, or Source Serif 4. Sizes: 50px (lg) and 38px (md) at weight 500 with tight letter-spacing.
- CoFo Brilliant (headlines sm/xs and body). Proprietary/self-hosted; substitute with Inter, DM Sans, or Nunito for a friendly geometric sans feel. Body runs 16px/1.5; smaller headlines are 28px and 21px at 400 weight.
- Pairing guidance: serif for hero/section tops; sans for everything else. Keep clear hierarchy and avoid mixing other type families.

## Layout

Spacing follows an 8px base scale: 8/16/24/32/48. Use 48px blocks for section padding, 24–32px for intra-section groupings, and 16px for element gutters. Grids commonly present as centered, wide containers with 3- or 4-up cards at equal heights. Maintain generous whitespace around headlines to keep the tone calm and premium.

## Elevation & Depth

Hierarchy is conveyed with soft shadows and subtle tonal contrast. Cards and mockups use sm (0,0,0,0.05 @ 0 4 7) and md (0,0,0,0.1 @ 0 0 15) shadows. The hero uses the xl ambient vignette (rgb(245,243,241) at a very large spread) to halo the content. Borders (#e4e4e4) are preferred over heavy shadows for separation.

## Shapes

Corners are friendly and consistent. Cards use rounded.sm (44px) for a soft rectangular feel. Buttons are fully pill-shaped (rounded.full 9999px). Avoid introducing sharp corners; shapes communicate approachability and are part of brand recognition.

## Components

Buttons are pill-shaped at 40px height with 8px×14px padding.
- Primary: black text; use tertiary (#29cc57) as the fill; reserve for the main CTA.
- Secondary: black text on white with a #e4e4e4 border; use when offering an alternative path.
- Link: black text, no radius; inline affordance.
- Card: white background, black text, 44px radius, 24px×8px padding; sm/md shadow as needed.

### Role Selector Pills
Two side-by-side buttons ("I'm a learner", "I'm a parent or teacher") in a segmented layout. Primary uses #29cc57; secondary is white with #e4e4e4 border. Height 40px, full radius.

### Lesson Preview Card
A device-style container showing a code/blocks screenshot. Use a white card at 44px radius with md shadow; internal elements can have sm shadows for floating menus.

### Stat Cards (3-up)
Identical 44px-radius cards with an icon, a short headline, and a caption. Use 24px vertical padding, center content, and apply sm shadow or a 1px #e4e4e4 stroke.

### Subject Tabs
A horizontal set of category pills (e.g., Math, CS, Science, Data). Use full-radius chips with black text; active or primary action may use #29cc57.

### Covered Subjects List
Column cards each with a bold subhead and bullet list. Keep 24px internal padding and a "+N additional courses" link at the end.

### Testimonial Carousel
Card-based quotes with name and role. Maintain 44px corners, sm shadow, and a small caption to indicate position (e.g., "Showing testimonial 1 of 5").

### Footer Columns
Multi-column list with section titles and links, social icons, and certification badges. Use 16px link line height and #e4e4e4 dividers sparingly.

## Do's and Don'ts

- Do keep text black (#000000) on white (#ffffff) for all primary copy; use green (#29cc57) only for affirmative actions and states.
- Do preserve 44px corners for cards and 9999px pills for buttons to maintain the brand silhouette.
- Do space sections with 48px padding and use 16–24px gaps inside components.
- Don't introduce drop shadows heavier than md on content cards; use borders for separation.
- Don't place mint (#cbecd5) behind the secondary CTA without ensuring sufficient contrast around the stroke.
- Don't mix additional type families; stick to the serif for top headlines and a single sans everywhere else.

## Agent Prompt Guide

Quick color reference — Text: #000000; Background: #ffffff; Border: #e4e4e4; Accent/Primary CTA: #29cc57; Support tint: #cbecd5.

1) Build a hero with a primary CTA
- Container: center, 48px top/bottom padding, background #ffffff.
- Headline: "Your personal tutor for math and coding" set at 50px, weight 700 in Playfair Display; line-height 1.2; color #000000.
- Body: Inter 16px/1.5, color #000000, max-width 640px.
- Buttons: Primary pill 40px tall, 8px×14px padding, background #29cc57, text #000000; Secondary pill 40px, white background, 1px border #e4e4e4, text #000000.

2) Create a 3-up stat row
- Grid: three equal cards with 24px internal padding, 32px gap.
- Cards: background #ffffff, 44px radius, 1px border #e4e4e4, sm shadow.
- Stat number: Inter 28px/1.07, color #000000; label: Inter 16px/1.5.

3) Subject tabs (chips)
- Row of full-radius pills (9999px), 16px horizontal padding, 8px vertical.
- Default: white with 1px #e4e4e4 border, text #000000.
- Active: fill #29cc57, text #000000.

4) Testimonial card
- 44px radius card, 24px vertical padding, md shadow.
- Quote: Playfair Display 38px/1.45, color #000000.
- Name + role: Inter 16px/1.5, color #000000; use a small position label in Inter 14–16px as needed.

## Similar Brands

- Khan Academy — Education-first with generous spacing and high-contrast text; less emphasis on soft pill shapes and uses a cooler palette.
- Codecademy — Black, white, and accent color for coding education; denser typography and sharper corners compared to Brilliant's 44px rounding.
- Coursera — Academic tone with restrained color; relies more on photography and less on playful pill components.
- Duolingo — Strong single-accent green and gamified tone; much more whimsical type and iconography than Brilliant's studious serif/sans pairing.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #cbecd5;
  --color-tertiary: #29cc57;
  --color-neutral: #ffffff;
  --color-border: #e4e4e4;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 50px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.008em;
  --text-headline-md-size: 38px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.45;
  --text-headline-md-tracking: -0.013em;
  --text-headline-sm-size: 28px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.07;
  --text-headline-sm-tracking: -0.011em;
  --text-headline-xs-size: 21px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-cofo-robert: "CoFo Robert";
  --font-cofo-brilliant: "CoFo Brilliant";

  /* Rounded */
  --radius-sm: 44px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;

  /* Components */
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 8px 14px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 8px 14px;
  --button-secondary-height: 40px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 24px 8px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-secondary: #cbecd5;
  --color-tertiary: #29cc57;
  --color-neutral: #ffffff;
  --color-border: #e4e4e4;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "CoFo Robert";
  --font-headline-md: "CoFo Robert";
  --font-headline-sm: "CoFo Brilliant";
  --font-headline-xs: "CoFo Brilliant";
  --font-body-md: "CoFo Brilliant";
  --text-headline-lg: 50px;
  --text-headline-md: 38px;
  --text-headline-sm: 28px;
  --text-headline-xs: 21px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.008em;
  --tracking-headline-md: -0.013em;
  --tracking-headline-sm: -0.011em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 44px;
  --radius-full: 9999px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.796,
                    0.925,
                    0.835
                ],
                "hex": "#cbecd5"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.161,
                    0.8,
                    0.341
                ],
                "hex": "#29cc57"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.894,
                    0.894,
                    0.894
                ],
                "hex": "#e4e4e4"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 32,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 48,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 44,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "CoFo Robert",
                "fontSize": {
                    "value": 50,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.008,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "CoFo Robert",
                "fontSize": {
                    "value": 38,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.013,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "CoFo Brilliant",
                "fontSize": {
                    "value": 28,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.011,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "CoFo Brilliant",
                "fontSize": {
                    "value": 21,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "CoFo Brilliant",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Brilliant**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
zaro.ai
Zaro AI
Zaro
fellow.ai
Fellow AI
Fellow
thedrive.ai
The Drive AI AI
The Drive AI
workleap.com
Workleap AI
Workleap