№ brilliant-org--courses

Brilliant

Warm, digital geometry—bold, playful sans serif on a clean, bright canvas.

Specimenminimalism playful brutalism educationlight

The page uses a bold typographic treatment with a mix of large and small text sizes, creating a sense of hierarchy and visual interest. The color palette is vibrant but controlled, with pops of color against a clean white background. It feels like a modern, educational resource. · online learning, math education, coding platform, interactive learning, educational tools, brilliant learning, STEM education, visual learning, problem solving

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: saturated · muted · warm

SwatchHexOKLCHSuggested roleCopy

Hex#2ac852
OKLCHoklch(73.0% 0.204 147)
RoleDominant
find sites →
Hex#140404
OKLCHoklch(13.9% 0.033 22)
RoleSurface
find sites →
Hex#fbdfd7
OKLCHoklch(92.4% 0.033 36)
RoleInk
find sites →
Hex#8e7d63
OKLCHoklch(59.8% 0.043 78)
RoleAccent
find sites →
Hex#c7b5df
OKLCHoklch(80.2% 0.061 305)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	CoFo Robert	50px	500	1.1	-0.5px	Aa Bb Cc
h2	CoFo Robert	60px	500	1.1	-1.2px	Aa Bb Cc
h3	CoFo Brilliant	30px	400	1.25	-0.3px	Aa Bb Cc
body	CoFo Brilliant	16px	400	1.5	0	Aa Bb Cc
button	CoFo Brilliant	16px	500	1.25	0	Aa Bb Cc

Spacing scale

8px

10px

16px

24px

28px

40px

56px

64px

70px

72px

96px

Radius scale

0px

54px

Export

:root {
  --color-dominant: #2ac852;
  --color-surface: #140404;
  --color-ink: #fbdfd7;
  --color-accent: #8e7d63;
  --color-detail: #c7b5df;
}

/* CSS variables exposed by source */
:root {
  --border-spacing-x: 0;
  --border-spacing-y: 0;
  --font-fallback: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --panda-colors-special-endstate-video-ad-shadow: rgba(0,0,0,0.1);
  --panda-colors-text-pear-primary: #9EAD00;
  --panda-colors-autoflip-yellow-400: #F9D25C;
  --panda-colors-default: default;
  --panda-colors-bg-warning-hover: #D7A613;
  --panda-letter-spacings-wide: 0.025em;
  --panda-colors-purple-400: #B689FF;
  --panda-sizes-48: 12rem;
  --panda-colors-autoflip-gray-50: #F8F8F8;
  --panda-colors-pink-800: #994080;
  --panda-spacing-48: 12rem;
  --panda-colors-special-bg-primary-0: rgba(255,255,255,0);
  --panda-colors-yellow-50: #FFFCF4;
  --panda-sizes-breakpoint-md: 481px;
  --panda-colors-bg-disabled: rgba(0,0,0,0.05);
  --panda-z-index-toast: 1700;
  --panda-colors-autoflip-green-600: #15B441;
  --panda-colors-black-alpha-100: rgba(0,0,0,0.05);
  --panda-colors-border-warning-secondary: #B78900;
  --panda-z-index-in-content-mobile-tutor-trigger-beneath-sound-settings: 1350;
  --panda-colors-papaya-400: #FF8871;
  --panda-sizes-2xl: 42rem;
  --panda-gradients-hue-shift-upgrade-iridescent-primary: linear-gradient(86deg,#7491FF 0%,#FF90E0 50%,#F9D25C 100%);
  --panda-spacing-96: 24rem;
  --panda-colors-black-alpha-700: rgba(0,0,0,0.6);
  --panda-colors-bg-danger-primary: #FF5D5D;
  --panda-colors-bg-green-tertiary: #EAFAEE;
  --panda-colors-orange-950: #291502;
  --scale-x: 1;
  --panda-letter-spacings-wider: 0.04em;
  --panda-colors-border-danger-primary: #FF5D5D;
  --panda-colors-papaya-600: #E55F45;
  --panda-colors-autoflip-black-700: rgba(0,0,0,0.6);
  --panda-z-index-in-content-interactive-shield: 25;
  --panda-colors-border-red-primary: #FF8585;
  --panda-gradients-hue-shift-color-papaya-secondary: linear-gradient(0deg,#FFFFFF 66%,rgba(255,255,255,0.9) 100%),linear-gradient(90deg,#F7C325 0%,#FFC3B8 100%);
  --panda-z-index-in-content-glossary-card: 895;
  --panda-colors-special-tutor-bg: #383838;
  --panda-colors-autoflip-green-50: #F4FCF7;
  --panda-gradients-iridescent-secondary: linear-gradient(87deg,#FFBDEC 4.66%,#F9D25C 94.88%);
  --panda-colors-text-success-primary: #009B2B;
  --panda-gradients-hue-shift-action-gray: linear-gradient(90deg,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.025) 100%);
  --panda-breakpoints-xl: 992px;
  --panda-colors-icon-danger-primary: #C43939;
  --panda-colors-green-200: #D4F5DD;
  --panda-colors-autoflip-yellow-800: #926D00;
  --panda-spacing-56: 14rem;
  --panda-colors-border-active: #000000;
  --panda-spacing-8: 2rem;
  --panda-colors-bg-blue-secondary: #DAE2FF;
  --panda-colors-text-green-primary: #009B2B;
  --global-font-body: "CoFo Brilliant",sans-serif;
  --panda-colors-purple-900: #381D66;
  --panda-sizes-96: 24rem;
  --panda-colors-autoflip-black-800: rgba(0,0,0,0.7);
  --panda-colors-purple-500: #9D62FF;
  --panda-colors-cyan-100: #EBFCFB;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Brilliant.
Reference design system (extracted from the live site):
- Palette: #2ac852, #140404, #fbdfd7, #8e7d63, #c7b5df
- Typefaces: CoFo Robert, CoFo Brilliant
- Macrostructure: Specimen
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/brilliant-org--courses

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

CoFo Robert

50px

500

1.1

-0.5px

Aa Bb Cc

CoFo Robert

60px

500

1.1

-1.2px

Aa Bb Cc

CoFo Brilliant

30px

400

1.25

-0.3px

Aa Bb Cc

body

CoFo Brilliant

16px

400

1.5

Aa Bb Cc

button

CoFo Brilliant

16px

500

1.25

Aa Bb Cc

:root { --color-dominant: #2ac852; --color-surface: #140404; --color-ink: #fbdfd7; --color-accent: #8e7d63; --color-detail: #c7b5df; } /* CSS variables exposed by source */ :root { --border-spacing-x: 0; --border-spacing-y: 0; --font-fallback: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --panda-colors-special-endstate-video-ad-shadow: rgba(0,0,0,0.1); --panda-colors-text-pear-primary: #9EAD00; --panda-colors-autoflip-yellow-400: #F9D25C; --panda-colors-default: default; --panda-colors-bg-warning-hover: #D7A613; --panda-letter-spacings-wide: 0.025em; --panda-colors-purple-400: #B689FF; --panda-sizes-48: 12rem; --panda-colors-autoflip-gray-50: #F8F8F8; --panda-colors-pink-800: #994080; --panda-spacing-48: 12rem; --panda-colors-special-bg-primary-0: rgba(255,255,255,0); --panda-colors-yellow-50: #FFFCF4; --panda-sizes-breakpoint-md: 481px; --panda-colors-bg-disabled: rgba(0,0,0,0.05); --panda-z-index-toast: 1700; --panda-colors-autoflip-green-600: #15B441; --panda-colors-black-alpha-100: rgba(0,0,0,0.05); --panda-colors-border-warning-secondary: #B78900; --panda-z-index-in-content-mobile-tutor-trigger-beneath-sound-settings: 1350; --panda-colors-papaya-400: #FF8871; --panda-sizes-2xl: 42rem; --panda-gradients-hue-shift-upgrade-iridescent-primary: linear-gradient(86deg,#7491FF 0%,#FF90E0 50%,#F9D25C 100%); --panda-spacing-96: 24rem; --panda-colors-black-alpha-700: rgba(0,0,0,0.6); --panda-colors-bg-danger-primary: #FF5D5D; --panda-colors-bg-green-tertiary: #EAFAEE; --panda-colors-orange-950: #291502; --scale-x: 1; --panda-letter-spacings-wider: 0.04em; --panda-colors-border-danger-primary: #FF5D5D; --panda-colors-papaya-600: #E55F45; --panda-colors-autoflip-black-700: rgba(0,0,0,0.6); --panda-z-index-in-content-interactive-shield: 25; --panda-colors-border-red-primary: #FF8585; --panda-gradients-hue-shift-color-papaya-secondary: linear-gradient(0deg,#FFFFFF 66%,rgba(255,255,255,0.9) 100%),linear-gradient(90deg,#F7C325 0%,#FFC3B8 100%); --panda-z-index-in-content-glossary-card: 895; --panda-colors-special-tutor-bg: #383838; --panda-colors-autoflip-green-50: #F4FCF7; --panda-gradients-iridescent-secondary: linear-gradient(87deg,#FFBDEC 4.66%,#F9D25C 94.88%); --panda-colors-text-success-primary: #009B2B; --panda-gradients-hue-shift-action-gray: linear-gradient(90deg,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.025) 100%); --panda-breakpoints-xl: 992px; --panda-colors-icon-danger-primary: #C43939; --panda-colors-green-200: #D4F5DD; --panda-colors-autoflip-yellow-800: #926D00; --panda-spacing-56: 14rem; --panda-colors-border-active: #000000; --panda-spacing-8: 2rem; --panda-colors-bg-blue-secondary: #DAE2FF; --panda-colors-text-green-primary: #009B2B; --global-font-body: "CoFo Brilliant",sans-serif; --panda-colors-purple-900: #381D66; --panda-sizes-96: 24rem; --panda-colors-autoflip-black-800: rgba(0,0,0,0.7); --panda-colors-purple-500: #9D62FF; --panda-colors-cyan-100: #EBFCFB; }

Build a landing page in the visual style of Brilliant. Reference design system (extracted from the live site): - Palette: #2ac852, #140404, #fbdfd7, #8e7d63, #c7b5df - Typefaces: CoFo Robert, CoFo Brilliant - Macrostructure: Specimen Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/brilliant-org--courses