# Codecademy

> `codecademy@1.0.0`

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** · `codecademy@1.0.0` · 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** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **Geist Mono** `(geist-mono@1.0.0)` | 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: `codecademy@1.0.0` from the encyclopedia.*