W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Khan Academy
Khan Academy is a nonprofit education platform delivering free K-12 and early-college instruction across math, science, computing, economics, arts, and humanities — with Khanmigo as the integrated AI tutor product. The brand voice is patient, classroom-bright, and student-first: explainer videos, practice problems, mastery progress, and unhurried prose. Visually, Khan Academy is light-first with an Off White canvas, Off Black ink (the brand explicitly avoids pure #000000), and Khan Academy Blue (#1865F2) as the primary brand action color. The semantic system is animal-direct — Green for correct, Red for wrong, Gold for streaks, Purple for editorial — and Eggplant is the dedicated Khanmigo AI brand accent. Typography is Inter across body and headings, the open-source typeface Wonder Blocks recommends.
1 palette 3 fonts 0 assets 10 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/khan-academy/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/khan-academy/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Khan Academy
Khan Academy is a nonprofit education platform delivering free K-12 and early-college instruction across math, science, computing, economics, arts, and humanities — with Khanmigo as the integrated AI tutor product. The brand voice is patient, classroom-bright, and student-first: explainer videos, practice problems, mastery progress, and unhurried prose. Visually, Khan Academy is light-first with an Off White canvas, Off Black ink (the brand explicitly avoids pure #000000), and Khan Academy Blue (#1865F2) as the primary brand action color. The semantic system is animal-direct — Green for correct, Red for wrong, Gold for streaks, Purple for editorial — and Eggplant is the dedicated Khanmigo AI brand accent. Typography is Inter across body and headings, the open-source typeface Wonder Blocks recommends.
Tags: khan-academy, education, k12, nonprofit, brand, light-first, blue, wonder-blocks
Atoms
Palette
Khan Academy · [email protected] · MIT
Khan Academy's brand palette, captured directly from the open-source Wonder Blocks design system that powers khanacademy.org. Wonder Blocks publishes the canonical named base swatches — Blue (#1865F2 primary), Green (#00A60E), Gold (#FFB100), Red (#D92916), Purple (#9059FF) — alongside the brand neutrals Off Black (#21242C), Off White (#F7F8FA), and the Khanmigo Eggplant (#5F1E5C) accent reserved for the AI tutoring product line. The brand identity is friendly, classroom-bright, and reader-first. Khan Academy is light-first; the canvas is Off White / White with Off Black ink, and Khan Academy Blue is the primary action color.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
blue |
Blue | #1865F2 |
green |
Green | #00A60E |
gold |
Gold | #FFB100 |
red |
Red | #D92916 |
purple |
Purple | #9059FF |
off-black |
Off Black | #21242C |
off-white |
Off White | #F7F8FA |
white |
White | #FFFFFF |
dark-blue |
Dark Blue | #0B2149 |
teal |
Teal | #14BF96 |
eggplant |
Eggplant (Khanmigo) | #5F1E5C |
blue-hover |
Blue Hover | #11459E |
blue-pale |
Blue Pale | #E5EEFE |
red-pale |
Red Pale | #FBE7E5 |
green-pale |
Green Pale | #E0F4E1 |
gold-pale |
Gold Pale | #FFF6E0 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#FFFFFF |
surface |
off-white |
#F7F8FA |
surface-elevated |
white |
#FFFFFF |
text-primary |
off-black |
#21242C |
text-secondary |
off-black |
#21242C |
text-tertiary |
off-black |
#21242C |
primary |
blue |
#1865F2 |
primary-hover |
blue-hover |
#11459E |
accent |
blue |
#1865F2 |
accent-hover |
blue-hover |
#11459E |
warning |
gold |
#FFB100 |
warning-hover |
gold |
#FFB100 |
error |
red |
#D92916 |
success |
green |
#00A60E |
border |
off-white |
#F7F8FA |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
off-black |
#21242C |
surface |
dark-blue |
#0B2149 |
surface-elevated |
off-black |
#21242C |
text-primary |
white |
#FFFFFF |
text-secondary |
off-white |
#F7F8FA |
text-tertiary |
off-white |
#F7F8FA |
primary |
blue |
#1865F2 |
primary-hover |
blue-pale |
#E5EEFE |
accent |
teal |
#14BF96 |
accent-hover |
green |
#00A60E |
warning |
gold |
#FFB100 |
warning-hover |
gold-pale |
#FFF6E0 |
error |
red |
#D92916 |
success |
green |
#00A60E |
border |
dark-blue |
#0B2149 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
white |
#FFFFFF |
on-identity |
off-black |
#21242C |
primary |
blue |
#1865F2 |
primary-hover |
blue-hover |
#11459E |
accent |
blue |
#1865F2 |
accent-hover |
blue-hover |
#11459E |
mark |
blue |
#1865F2 |
success |
green |
#00A60E |
warning |
gold |
#FFB100 |
error |
red |
#D92916 |
text-primary-light |
off-black |
#21242C |
text-primary-dark |
white |
#FFFFFF |
background-light |
white |
#FFFFFF |
background-dark |
off-black |
#21242C |
surface-light |
off-white |
#F7F8FA |
surface-dark |
dark-blue |
#0B2149 |
text-secondary-light |
off-black |
#21242C |
border-light |
off-white |
#F7F8FA |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (7)
colorChoice → roles.colors.primary
- allowed: blue, blue-hover
- forbidden: dark-blue, teal, eggplant, purple, green, gold, red
Khan Academy Blue (#1865F2) is the single signature primary across Wonder Blocks. Dark Blue is a brand-tier hero anchor; Teal and Purple are editorial accents; Eggplant is reserved for Khanmigo. Repurposing the semantic colors (Green correct, Gold streak, Red error) as the primary action color conflicts with their established meaning in the learner interface.
colorChoice → roles.colors.text-primary-light
- allowed: off-black
- forbidden: black
Wonder Blocks deliberately avoids pure #000000 for body copy. The canonical text ink is Off Black (#21242C); the slightly-warmed near-black reads more comfortably on the Off White canvas across the long-form explainers and practice prose that fill the learner interface.
forbiddenTreatment → logo
- treatments: stretched, skewed, rotated, drop-shadow, recolored-non-brand, on-busy-photo
Khan Academy's mark and the Wonder Blocks brand colors are precise institutional assets used by schools, teachers, and nonprofit partners worldwide. Skew, rotation, drop shadow, or arbitrary recoloring conflict with the brand's patient, classroom-bright posture.
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Off Black (#21242C) on White (#FFFFFF) gives roughly 14:1 — clears AAA decisively. Khan Academy's K-12 learner audience and long-form explainer prose justify an AAA contrast target rather than the AA floor; many learners read on shared devices, low-cost tablets, and aging school hardware.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.4
Inter serves both display and prose roles on khanacademy.org; the typographic hierarchy is established by size and weight within a single family. A 1.4× minimum display-to-prose ratio preserves the lesson-heading-to-body relationship that makes module navigation legible.
contextRestriction → roles.colors.error
- forbiddenContexts: confirmation, mastery-attained, completion
- allowedContexts: error-state, wrong-answer, destructive-action
Red (#D92916) is reserved for the "wrong answer" / error / destructive signal in the learner interface. Using Red to celebrate completion or mastery would invert the meaning students have learned — Red means stop and reconsider; Green means proceed.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Khan Academy's audience is global, cross-device, and includes children, students with learning differences, and adult learners; consumers composing in-brand surfaces must preserve the AA contrast floor on every text-on-color combination.
⚠️ warning (2)
contextRestriction → roles.colors.mark
- forbiddenContexts: khanmigo-surface, ai-tutor-context
- allowedContexts: mark, logo, cta, link, focus-ring
Khan Academy Blue is the brand mark for the core Khan Academy product. The Khanmigo AI tutor product surface uses Eggplant (#5F1E5C) as its brand accent. Mixing the two on the same surface confuses the product-tier signal — learners read Khanmigo as the AI experience and the rest of the platform as the core learning experience.
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700
The Khan Academy site uses Inter at Regular (400), Medium (500), SemiBold (600), and Bold (700). Wonder Blocks does not use Light (300) or Black (900) weights on learner surfaces — they conflict with the friendly, patient typographic voice.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: white, off-white, off-black, dark-blue
- doesNotPairWith: red, gold, eggplant
Khan Academy Blue reads cleanest on White or Off White, or as a fill on the Off Black / Dark Blue canvas. Placing KA Blue adjacent to Red, Gold, or Eggplant introduces chromatic conflict — the cool primary blue fights the warm semantic accents (or the Khanmigo brand purple) for the same eye position.
Provenance
- Source: https://github.com/Khan/wonder-blocks
- License:
MIT - Attribution: Khan Academy, Inc. — visual identity captured from the Khan/wonder-blocks open-source design system repository on 2026-05-19. Wonder Blocks is published under the MIT license. Khan Academy, Khanmigo, and associated marks remain property of Khan Academy, Inc.
- Imported:
2026-05-19 - Notes: Khan Academy publishes Wonder Blocks as an open-source design system (MIT) — token names and hex values are upstream-verified. The live site preloads inter-var.woff2 and declares Inter as the canonical font on every text surface; this atom references inter@1 as the canonical body and heading face. The Khanmigo brand accent (Eggplant) is reserved for the AI tutor product surface and is encoded as a contextRestriction rule below.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Khan Academy
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Khan Academy
A clear hierarchy in Khan Academy's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Khan Academy
[email protected]font · heading
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ blue #1865F2 accent-hover
→ blue-hover #11459E background-dark
→ off-black #21242C background-light
→ white #FFFFFF border-light
→ off-white #F7F8FA error
→ red #D92916 identity
→ white #FFFFFF mark
→ blue #1865F2 on-identity
→ off-black #21242C primary
→ blue #1865F2 primary-hover
→ blue-hover #11459E success
→ green #00A60E surface-dark
→ dark-blue #0B2149 surface-light
→ off-white #F7F8FA text-primary-dark
→ white #FFFFFF text-primary-light
→ off-black #21242C text-secondary-light
→ off-black #21242C warning
→ gold #FFB100 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from khan-academy)
Light mode (15 roles)
accent
→ blue accent-hover
→ blue-hover background
→ white border
→ off-white error
→ red primary
→ blue primary-hover
→ blue-hover success
→ green surface
→ off-white surface-elevated
→ white text-primary
→ off-black text-secondary
→ off-black text-tertiary
→ off-black warning
→ gold warning-hover
→ gold Dark mode (15 roles)
accent
→ teal accent-hover
→ green background
→ off-black border
→ dark-blue error
→ red primary
→ blue primary-hover
→ blue-pale success
→ green surface
→ dark-blue surface-elevated
→ off-black text-primary
→ white text-secondary
→ off-white text-tertiary
→ off-white warning
→ gold warning-hover
→ gold-pale Rules (10 typed constraints)
error · 7 rules
colorChoice roles.colors.primary allowed blue, blue-hover forbidden dark-blue, teal, eggplant, purple, green, gold, red Khan Academy Blue (#1865F2) is the single signature primary across Wonder Blocks. Dark Blue is a brand-tier hero anchor; Teal and Purple are editorial accents; Eggplant is reserved for Khanmigo. Repurposing the semantic colors (Green correct, Gold streak, Red error) as the primary action color conflicts with their established meaning in the learner interface.
colorChoice roles.colors.text-primary-light allowed off-black forbidden black Wonder Blocks deliberately avoids pure #000000 for body copy. The canonical text ink is Off Black (#21242C); the slightly-warmed near-black reads more comfortably on the Off White canvas across the long-form explainers and practice prose that fill the learner interface.
forbiddenTreatment logo treatments stretched, skewed, rotated, drop-shadow, recolored-non-brand, on-busy-photo Khan Academy's mark and the Wonder Blocks brand colors are precise institutional assets used by schools, teachers, and nonprofit partners worldwide. Skew, rotation, drop shadow, or arbitrary recoloring conflict with the brand's patient, classroom-bright posture.
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Off Black (#21242C) on White (#FFFFFF) gives roughly 14:1 — clears AAA decisively. Khan Academy's K-12 learner audience and long-form explainer prose justify an AAA contrast target rather than the AA floor; many learners read on shared devices, low-cost tablets, and aging school hardware.
fontPairing typography.display requires prose minSizeRatio 1.4 Inter serves both display and prose roles on khanacademy.org; the typographic hierarchy is established by size and weight within a single family. A 1.4× minimum display-to-prose ratio preserves the lesson-heading-to-body relationship that makes module navigation legible.
contextRestriction roles.colors.error forbiddenContexts confirmation, mastery-attained, completion allowedContexts error-state, wrong-answer, destructive-action Red (#D92916) is reserved for the "wrong answer" / error / destructive signal in the learner interface. Using Red to celebrate completion or mastery would invert the meaning students have learned — Red means stop and reconsider; Green means proceed.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Khan Academy's audience is global, cross-device, and includes children, students with learning differences, and adult learners; consumers composing in-brand surfaces must preserve the AA contrast floor on every text-on-color combination.
warning · 2 rules
contextRestriction roles.colors.mark forbiddenContexts khanmigo-surface, ai-tutor-context allowedContexts mark, logo, cta, link, focus-ring Khan Academy Blue is the brand mark for the core Khan Academy product. The Khanmigo AI tutor product surface uses Eggplant (#5F1E5C) as its brand accent. Mixing the two on the same surface confuses the product-tier signal — learners read Khanmigo as the AI experience and the rest of the platform as the core learning experience.
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700 The Khan Academy site uses Inter at Regular (400), Medium (500), SemiBold (600), and Bold (700). Wonder Blocks does not use Light (300) or Black (900) weights on learner surfaces — they conflict with the friendly, patient typographic voice.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith white, off-white, off-black, dark-blue doesNotPairWith red, gold, eggplant Khan Academy Blue reads cleanest on White or Off White, or as a fill on the Off Black / Dark Blue canvas. Placing KA Blue adjacent to Red, Gold, or Eggplant introduces chromatic conflict — the cool primary blue fights the warm semantic accents (or the Khanmigo brand purple) for the same eye position.
Provenance
- Source
- https://github.com/Khan/wonder-blocks
- License
MIT- Attribution
- Khan Academy, Inc. — visual identity captured from the Khan/wonder-blocks open-source design system repository on 2026-05-19. Wonder Blocks is published under the MIT license. Khan Academy, Khanmigo, and associated marks remain property of Khan Academy, Inc.
- Imported
2026-05-19- Notes
- Khan Academy publishes Wonder Blocks as an open-source design system (MIT) — token names and hex values are upstream-verified. The live site preloads inter-var.woff2 and declares Inter as the canonical font on every text surface; this atom references inter@1 as the canonical body and heading face. The Khanmigo brand accent (Eggplant) is reserved for the AI tutor product surface and is encoded as a contextRestriction rule below.