W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Codecademy
Codecademy is a learn-to-code platform delivering interactive programming courses across web development, data science, machine learning, mobile, game development, and DevOps. The brand voice is practitioner-focused, IDE-adjacent, and unabashedly developer-native: real code in the browser, immediate feedback, working projects. Visually, Codecademy pairs a deep Navy (#10162F) canvas — the same near-black ink that anchors code editors — with the electric Hyper purple-blue (#3A10E5) as the primary brand action and the Lime Green family (#AEE938 / #008A27) for completion. The brand is dark-canvas-capable in the IDE / lesson runner and light-first on the marketing site. Typography is proprietary Apercu Pro for prose and Suisse Intl Mono for code, with an open-source fallback stack of Inter and a monospace alternative.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/codecademy/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/codecademy/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.
Codecademy
Codecademy is a learn-to-code platform delivering interactive programming courses across web development, data science, machine learning, mobile, game development, and DevOps. The brand voice is practitioner-focused, IDE-adjacent, and unabashedly developer-native: real code in the browser, immediate feedback, working projects. Visually, Codecademy pairs a deep Navy (#10162F) canvas — the same near-black ink that anchors code editors — with the electric Hyper purple-blue (#3A10E5) as the primary brand action and the Lime Green family (#AEE938 / #008A27) for completion. The brand is dark-canvas-capable in the IDE / lesson runner and light-first on the marketing site. Typography is proprietary Apercu Pro for prose and Suisse Intl Mono for code, with an open-source fallback stack of Inter and a monospace alternative.
Tags: codecademy, education, programming, learn-to-code, brand, navy, hyper, lime-green, developer
Atoms
Palette
Codecademy · [email protected] · MIT
Codecademy's brand palette, captured directly from the open-source Gamut design system that powers codecademy.com. Gamut publishes the canonical named swatches in a scale-100→900 vocabulary anchored by the deep Navy (#10162F) ink, the Hyper (#3A10E5 / #5533FF) electric brand purple-blue, and a Lime Green family (#AEE938 / #008A27) for completion / success. The identity is developer-focused, dark-canvas-capable, and code-editor adjacent. Codecademy is dark-first on lesson surfaces and light-first on marketing — the brand canonical canvas for editor / IDE chrome is the Navy ink, while the marketing canvas is White / Beige with Navy ink.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
Geist Mono ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
navy |
Navy | #10162F |
navy-900 |
Navy 900 | #0A0D1C |
hyper |
Hyper | #3A10E5 |
hyper-light |
Hyper Light | #5533FF |
blue |
Blue | #1557FF |
blue-light |
Blue Light | #3388FF |
blue-300 |
Blue 300 | #66C4FF |
blue-pale |
Blue Pale | #D3F2FF |
blue-0 |
Blue 0 | #F5FCFF |
green |
Green | #008A27 |
green-light |
Green Light | #AEE938 |
green-pale |
Green Pale | #EAFDC6 |
green-0 |
Green 0 | #F5FFE3 |
yellow |
Yellow | #FFD300 |
yellow-dark |
Yellow Dark | #CCA900 |
yellow-0 |
Yellow 0 | #FFFAE5 |
red |
Red | #E91C11 |
red-dark |
Red Dark | #BE1809 |
red-soft |
Red Soft | #DC5879 |
red-0 |
Red 0 | #FBF1F0 |
pink |
Pink | #F966FF |
orange |
Orange | #FF8C00 |
beige |
Beige | #FFF0E5 |
white |
White | #FFFFFF |
gray-100 |
Gray 100 | #F5F5F5 |
gray-200 |
Gray 200 | #EEEEEE |
gray-300 |
Gray 300 | #E0E0E0 |
gray-600 |
Gray 600 | #9E9E9E |
gray-800 |
Gray 800 | #616161 |
gray-900 |
Gray 900 | #424242 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#FFFFFF |
surface |
gray-100 |
#F5F5F5 |
surface-elevated |
white |
#FFFFFF |
text-primary |
navy |
#10162F |
text-secondary |
gray-800 |
#616161 |
text-tertiary |
gray-600 |
#9E9E9E |
primary |
hyper |
#3A10E5 |
primary-hover |
hyper-light |
#5533FF |
accent |
hyper-light |
#5533FF |
accent-hover |
hyper |
#3A10E5 |
warning |
yellow |
#FFD300 |
warning-hover |
yellow-dark |
#CCA900 |
error |
red |
#E91C11 |
success |
green |
#008A27 |
border |
gray-300 |
#E0E0E0 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
navy |
#10162F |
surface |
navy-900 |
#0A0D1C |
surface-elevated |
navy |
#10162F |
text-primary |
white |
#FFFFFF |
text-secondary |
gray-300 |
#E0E0E0 |
text-tertiary |
gray-600 |
#9E9E9E |
primary |
hyper-light |
#5533FF |
primary-hover |
hyper |
#3A10E5 |
accent |
green-light |
#AEE938 |
accent-hover |
green |
#008A27 |
warning |
yellow |
#FFD300 |
warning-hover |
yellow-dark |
#CCA900 |
error |
red-soft |
#DC5879 |
success |
green-light |
#AEE938 |
border |
gray-900 |
#424242 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
navy |
#10162F |
on-identity |
white |
#FFFFFF |
primary |
hyper |
#3A10E5 |
primary-hover |
hyper-light |
#5533FF |
accent |
green-light |
#AEE938 |
accent-hover |
green |
#008A27 |
mark |
hyper |
#3A10E5 |
success |
green |
#008A27 |
warning |
yellow |
#FFD300 |
error |
red |
#E91C11 |
text-primary-light |
navy |
#10162F |
text-primary-dark |
white |
#FFFFFF |
background-light |
white |
#FFFFFF |
background-dark |
navy |
#10162F |
surface-light |
gray-100 |
#F5F5F5 |
surface-dark |
navy-900 |
#0A0D1C |
text-secondary-light |
gray-800 |
#616161 |
text-tertiary-light |
gray-600 |
#9E9E9E |
border-light |
gray-300 |
#E0E0E0 |
border-dark |
gray-900 |
#424242 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → roles.colors.primary
- allowed: hyper, hyper-light
- forbidden: blue, blue-light, green, green-light, yellow, red, pink
Hyper (#3A10E5) and its lighter sibling Hyper Light (#5533FF) are the brand's electric primary action colors on marketing surfaces. Blue is a link / focus state, not a brand primary; Green is success; Yellow is warning; Red is error; Pink is editorial. Using any of those as the primary action conflicts with their semantic meaning in the product.
colorChoice → roles.colors.identity
- allowed: navy, navy-900
- forbidden: white, hyper, green, blue
Codecademy's identity surface is the Navy canvas — the meta theme-color on codecademy.com is #10162F (Navy), and the lesson runner / code editor chrome is dark-Navy throughout the product. The marketing White canvas is a secondary mode; the brand badge renders ON Navy, not on White. Hyper is the brand action color, not the canvas.
forbiddenTreatment → logo
- treatments: stretched, skewed, rotated, drop-shadow, recolored-non-brand, on-busy-photo, low-contrast-fill
The Codecademy wordmark and the Hyper / Navy color pair are precise brand assets. The mark may render in Hyper on Navy, in Navy on White, or in White on Navy — arbitrary recoloring, skew, rotation, or drop shadow conflicts with the brand's precise, developer-native posture.
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Navy (#10162F) on White (#FFFFFF) gives roughly 17:1 and White on Navy gives the same — both clear AAA decisively. Codecademy's lesson surfaces include long-form code blocks, terminal output, and reference documentation; the AAA contrast target is appropriate for the long-form reading and code-comprehension load the platform asks of learners.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.4
Apercu Pro serves both display and prose roles on codecademy.com; the typographic hierarchy is established by size and weight within a single family. A 1.4× minimum display-to-prose ratio preserves the title-to-body relationship that makes lesson navigation legible.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Codecademy's learner audience includes adult professionals, career-switchers, and university students reading long-form code in browser-based editors; consumers composing in-brand surfaces must preserve the AA contrast floor on every text-on-color combination.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 400, 700
Codecademy preloads Apercu Pro Regular (400), Italic (400), Bold (700), and Bold Italic (700) on the live site — those are the only weights in the licensed cut. The substitute Inter face here is constrained to the same band so consumers do not specify weights the brand never used.
contextRestriction → roles.colors.mark
- forbiddenContexts: large-fill, hero, background
- allowedContexts: mark, logo, cta, link, focus-ring
Hyper (#3A10E5) is the brand action color, concentrated in CTAs, links, the mark, and focus rings. The brand canvas is the Navy ink (dark) or the White marketing surface (light); flooding a hero or background with Hyper conflicts with the brand's restraint and reduces the electric accent to wallpaper.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: navy, navy-900, white, green-light
- doesNotPairWith: blue, blue-light, pink, red
Hyper reads cleanest on the Navy canvas, on White, or alongside the Lime Green completion accent. Placing Hyper adjacent to Blue or Blue Light creates near-identical blue-on-blue; adjacent Pink and Red introduce warm-cool conflict that fights for the same eye position without resolving into hierarchy.
Provenance
- Source: https://github.com/Codecademy/gamut
- License:
MIT - Attribution: Codecademy, LLC — visual identity captured from the Codecademy/gamut open-source design system repository on 2026-05-19, supplemented by the deployed CSS on codecademy.com. Gamut is published under the MIT license. Codecademy and associated marks remain property of Codecademy, LLC (a Skillsoft brand).
- Imported:
2026-05-19 - Notes: Codecademy publishes Gamut as an open-source design system (MIT) — color token names and hex values are upstream-verified. The codecademy.com font stack preloads Apercu Pro (Regular / Italic / Bold / Bold Italic) and Suisse Intl Mono (Regular / Bold) from /gamut/ — both are proprietary, commercially licensed faces with no publicly-distributable open-source equivalent. This atom references inter@1 as the substitute body / heading face and geist-mono@1 as the substitute monospace face for the code-runner surface. The browser theme-color meta on codecademy.com is #10162F (Navy), confirming Navy as the brand identity surface.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Codecademy
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.
Codecademy
A clear hierarchy in Codecademy'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
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
→ green-light #AEE938 accent-hover
→ green #008A27 background-dark
→ navy #10162F background-light
→ white #FFFFFF border-dark
→ gray-900 #424242 border-light
→ gray-300 #E0E0E0 error
→ red #E91C11 identity
→ navy #10162F mark
→ hyper #3A10E5 on-identity
→ white #FFFFFF primary
→ hyper #3A10E5 primary-hover
→ hyper-light #5533FF success
→ green #008A27 surface-dark
→ navy-900 #0A0D1C surface-light
→ gray-100 #F5F5F5 text-primary-dark
→ white #FFFFFF text-primary-light
→ navy #10162F text-secondary-light
→ gray-800 #616161 text-tertiary-light
→ gray-600 #9E9E9E warning
→ yellow #FFD300 Typography
code
→ mono Geist Mono display
→ heading Inter prose
→ body Inter Palette mode mappings (from codecademy)
Light mode (15 roles)
accent
→ hyper-light accent-hover
→ hyper background
→ white border
→ gray-300 error
→ red primary
→ hyper primary-hover
→ hyper-light success
→ green surface
→ gray-100 surface-elevated
→ white text-primary
→ navy text-secondary
→ gray-800 text-tertiary
→ gray-600 warning
→ yellow warning-hover
→ yellow-dark Dark mode (15 roles)
accent
→ green-light accent-hover
→ green background
→ navy border
→ gray-900 error
→ red-soft primary
→ hyper-light primary-hover
→ hyper success
→ green-light surface
→ navy-900 surface-elevated
→ navy text-primary
→ white text-secondary
→ gray-300 text-tertiary
→ gray-600 warning
→ yellow warning-hover
→ yellow-dark Rules (9 typed constraints)
error · 6 rules
colorChoice roles.colors.primary allowed hyper, hyper-light forbidden blue, blue-light, green, green-light, yellow, red, pink Hyper (#3A10E5) and its lighter sibling Hyper Light (#5533FF) are the brand's electric primary action colors on marketing surfaces. Blue is a link / focus state, not a brand primary; Green is success; Yellow is warning; Red is error; Pink is editorial. Using any of those as the primary action conflicts with their semantic meaning in the product.
colorChoice roles.colors.identity allowed navy, navy-900 forbidden white, hyper, green, blue Codecademy's identity surface is the Navy canvas — the meta theme-color on codecademy.com is #10162F (Navy), and the lesson runner / code editor chrome is dark-Navy throughout the product. The marketing White canvas is a secondary mode; the brand badge renders ON Navy, not on White. Hyper is the brand action color, not the canvas.
forbiddenTreatment logo treatments stretched, skewed, rotated, drop-shadow, recolored-non-brand, on-busy-photo, low-contrast-fill The Codecademy wordmark and the Hyper / Navy color pair are precise brand assets. The mark may render in Hyper on Navy, in Navy on White, or in White on Navy — arbitrary recoloring, skew, rotation, or drop shadow conflicts with the brand's precise, developer-native posture.
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Navy (#10162F) on White (#FFFFFF) gives roughly 17:1 and White on Navy gives the same — both clear AAA decisively. Codecademy's lesson surfaces include long-form code blocks, terminal output, and reference documentation; the AAA contrast target is appropriate for the long-form reading and code-comprehension load the platform asks of learners.
fontPairing typography.display requires prose minSizeRatio 1.4 Apercu Pro serves both display and prose roles on codecademy.com; the typographic hierarchy is established by size and weight within a single family. A 1.4× minimum display-to-prose ratio preserves the title-to-body relationship that makes lesson navigation legible.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Codecademy's learner audience includes adult professionals, career-switchers, and university students reading long-form code in browser-based editors; consumers composing in-brand surfaces must preserve the AA contrast floor on every text-on-color combination.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 400, 700 Codecademy preloads Apercu Pro Regular (400), Italic (400), Bold (700), and Bold Italic (700) on the live site — those are the only weights in the licensed cut. The substitute Inter face here is constrained to the same band so consumers do not specify weights the brand never used.
contextRestriction roles.colors.mark forbiddenContexts large-fill, hero, background allowedContexts mark, logo, cta, link, focus-ring Hyper (#3A10E5) is the brand action color, concentrated in CTAs, links, the mark, and focus rings. The brand canvas is the Navy ink (dark) or the White marketing surface (light); flooding a hero or background with Hyper conflicts with the brand's restraint and reduces the electric accent to wallpaper.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith navy, navy-900, white, green-light doesNotPairWith blue, blue-light, pink, red Hyper reads cleanest on the Navy canvas, on White, or alongside the Lime Green completion accent. Placing Hyper adjacent to Blue or Blue Light creates near-identical blue-on-blue; adjacent Pink and Red introduce warm-cool conflict that fights for the same eye position without resolving into hierarchy.
Provenance
- Source
- https://github.com/Codecademy/gamut
- License
MIT- Attribution
- Codecademy, LLC — visual identity captured from the Codecademy/gamut open-source design system repository on 2026-05-19, supplemented by the deployed CSS on codecademy.com. Gamut is published under the MIT license. Codecademy and associated marks remain property of Codecademy, LLC (a Skillsoft brand).
- Imported
2026-05-19- Notes
- Codecademy publishes Gamut as an open-source design system (MIT) — color token names and hex values are upstream-verified. The codecademy.com font stack preloads Apercu Pro (Regular / Italic / Bold / Bold Italic) and Suisse Intl Mono (Regular / Bold) from /gamut/ — both are proprietary, commercially licensed faces with no publicly-distributable open-source equivalent. This atom references inter@1 as the substitute body / heading face and geist-mono@1 as the substitute monospace face for the code-runner surface. The browser theme-color meta on codecademy.com is #10162F (Navy), confirming Navy as the brand identity surface.