DESIGN.md inspired by Codecademy

---
name: Codecademy
tagline: Hands-on technical learning in midnight workspaces, crisp white type, and high-signal yellow actions.
updated_at: 2026-08-03T06:31:00.000Z
published_at: 2026-08-03T06:31:00.000Z
author: webdesignhot
source_url: https://www.codecademy.com/
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [education, saas]
tags: [education, developer, courses, interactive, dark, yellow, progress]
preview_swatch: ['#10162f', '#ffffff', '#ffd300']
related: [udacity, khan-academy, duolingo]
description: 'Codecademy frames technical education as an interactive work environment rather than a conventional course catalog. Its audited homepage combines midnight navy and black sections with white Apercu and Suisse type, yellow conversion controls, bright skill accents, and bordered 4-8px modules. Large editorial statements lead into dense topic grids and product demonstrations, while mobile sharply reduces display scale to preserve task clarity.'

aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: info
  muted: text-muted
  border: border
  ring: brand

colors:
  bg: '#10162f'
  bg-deep: '#0a0d1c'
  bg-black: '#000000'
  surface: '#181d3a'
  surface-raised: '#24294a'
  surface-light: '#ffffff'
  text: '#ffffff'
  text-muted: 'rgba(255,255,255,0.65)'
  text-faint: 'rgba(255,255,255,0.50)'
  text-dark: '#10162f'
  brand: '#ffd300'
  brand-deep: '#d6b200'
  on-brand: '#10162f'
  info: '#66c4ff'
  growth: '#aee938'
  violet: '#3a10e5'
  blue: '#1557ff'
  border: 'rgba(255,255,255,0.20)'
  border-strong: 'rgba(255,255,255,0.35)'
  focus: '#ffd300'
  success: '#aee938'
  warning: '#ffd300'
  danger: '#ff6b6b'

typography:
  display:
    family: 'Suisse, Apercu, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
    weights: [400, 700]
  body:
    family: 'Apercu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
    weights: [400, 700]
  mono:
    family: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace'
    weights: [400, 600]
  scale:
    hero: { size: 76, weight: 400, lineHeight: 1.2, tracking: '0', family: body }
    hero-mobile: { size: 24, weight: 400, lineHeight: 1.2, tracking: '0', family: body }
    section: { size: 34, weight: 400, lineHeight: 1.2, tracking: '0', family: display }
    subsection: { size: 26, weight: 400, lineHeight: 1.3, tracking: '0', family: display }
    card-title: { size: 18, weight: 700, lineHeight: 1.35, tracking: '0', family: body }
    body: { size: 16, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
    small: { size: 14, weight: 400, lineHeight: 1.45, tracking: '0', family: body }
    button: { size: 16, weight: 700, lineHeight: 1.5, tracking: '0', family: body }
    code: { size: 14, weight: 400, lineHeight: 1.55, tracking: '0', family: mono }

spacing:
  base: 4
  scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128]

radius:
  none: 0
  xs: 2
  sm: 4
  md: 8
  lg: 16
  pill: 100

layout:
  page-width: 1248
  prose-width: 720
  header-height: 80
  topic-card-width: 264
  topic-card-height: 66
  grid-min: 240
  grid-gap: 32
  code-panel-min-height: 360
  mobile-gutter: 20

components:
  primary-button:
    bg: '#ffd300'
    color: '#10162f'
    height: 48
    radius: 4
    padding: '12px 24px'
    border: '1px solid #ffd300'
    shadow: 'none'
    use: 'Signup, enrollment, and the next required learning action.'
  secondary-button:
    bg: '#ffffff'
    color: '#10162f'
    height: 48
    radius: 4
    padding: '12px 24px'
    border: '1px solid #ffffff'
    use: 'Provider signup, preview, and secondary account flows.'
  topic-card:
    bg: '#000000'
    color: '#ffffff'
    height: 66
    radius: 8
    border: '1px solid rgba(255,255,255,0.20)'
    padding: '20px 24px'
    use: 'Compact subject or skill destination within a dense learning grid.'
  code-panel:
    bg: '#0a0d1c'
    color: '#ffffff'
    radius: 8
    border: '1px solid rgba(255,255,255,0.20)'
    padding: '24px'
    use: 'Interactive exercise, code editor, terminal, or output preview.'
  progress-panel:
    bg: '#181d3a'
    color: '#ffffff'
    radius: 8
    border: '1px solid rgba(255,255,255,0.20)'
    padding: '24px'
    use: 'Current path, lesson progress, streak, and next-step summary.'
  text-input:
    bg: '#ffffff'
    color: '#10162f'
    height: 48
    radius: 4
    border: '1px solid #ffffff'
    padding: '12px 14px'
    use: 'Signup and search fields with persistent labels and clear errors.'

motion:
  duration-fast: 100
  duration-standard: 180
  duration-slow: 300
  ease-standard: 'cubic-bezier(0.2, 0, 0, 1)'
  lesson-transition: 'Crossfade output and move focus to the changed region without moving the editor.'
  reduced-motion: 'Disable decorative transforms and keep progress and validation updates immediate.'

breakpoints:
  mobile: 640
  tablet: 900
  desktop: 1200
  wide: 1440

shadows:
  panel: '0 2px 0 rgba(0,0,0,0.28)'
  panel-hover: '0 4px 0 rgba(0,0,0,0.34)'
  dialog: '0 18px 48px rgba(0,0,0,0.45)'
  focus: '0 0 0 3px rgba(255,211,0,0.38)'

accessibility:
  focus-ring: '3px solid #ffd300 with 2px offset'
  touch-target-min: 44
  reduced-motion-honored: true
  code: 'Pair syntax color with semantic labels, line numbers, diagnostics, and readable text contrast.'
  progress: 'Expose completed, current, and locked states in text rather than color alone.'

lineage:
  summary: 'Recorded from the current Codecademy public homepage at desktop and mobile widths on 2026-08-03.'
  influences:
    - name: Codecademy homepage
      role: 'Primary source for midnight palette, yellow actions, Apercu and Suisse typography, topic grids, and responsive hierarchy.'
      url: https://www.codecademy.com/
---

## 1. Visual Theme and Atmosphere

Codecademy looks like a welcoming development workspace. Midnight navy, deep black, white text, and thin borders provide the structure of an editor or terminal without copying one literally. Yellow actions supply a clear path through otherwise dense learning content.

Bright blue, lime, and violet are supporting signals for subjects and outcomes. They should punctuate the experience, not compete with the yellow conversion path.

## 2. Color System

Use `#10162f` as the primary field and `#0a0d1c` or black for deeper exercise panels. White is the dominant text and occasional inverse surface. The observed action yellow is `#ffd300` with navy text.

Muted content should use 65% white and borders 20-35% white. Reserve `#66c4ff`, `#aee938`, and `#3a10e5` for category, progress, or illustration roles. Never use yellow for passive decoration when it must identify the next action.

## 3. Typography

Apercu carries navigation, body, and the audited 76px desktop hero; Suisse supports editorial section headings. Desktop display type is intentionally large and regular-weight, but the mobile hero contracts sharply to 24px/29px to protect the signup and task content.

Use 16px/24px for interface copy and 14px with a 1.55 line height for code. Keep tracking at zero. Monospace belongs to source, output, shortcuts, and machine values, not the entire learning interface.

## 4. Component Styling

Primary controls are 48px yellow rectangles with 4px corners and bold navy labels. Topic destinations use black 264x66px tiles, 8px corners, and a thin translucent border. Exercise panels share that border and separate source, instructions, and output through spacing rather than heavy elevation.

Progress panels need explicit status labels, a next action, and stable regions for streak or completion data. Do not make an entire lesson card depend on hover to reveal its purpose.

## 5. Layout Principles

Use a desktop container near 1248px. Large editorial statements can occupy one side while signup or product demonstrations occupy the other, but learning tasks themselves should use stable editor-and-output tracks. Topic grids use 240px minimum columns and 32px gaps.

Alternate dense dark bands with occasional white or colored proof sections. These are full-width bands, not floating cards nested inside other cards.

## 6. Shapes and Radius

Controls use 4px corners and content modules generally use 8px. A 16px radius is reserved for large campaign media or isolated demonstrations. Pills belong to brief status labels or filters only.

## 7. Depth and Elevation

Codecademy relies on borders and color blocks more than blur shadows. A short 2px black drop can make an interactive panel feel pressable; hover may deepen it to 4px. Reserve a soft 18px dialog shadow for modal account flows.

## 8. Interaction and Motion

Editor interactions should feel immediate: 100ms presses, 180ms panel feedback, and no more than 300ms for section or lesson transitions. When code runs, retain editor geometry, expose a busy state, and move focus or announce completion in the output region.

Reduced-motion mode removes panel translation and animated progress sweeps. Validation, test results, and lesson completion must still be explicit.

## 9. Responsive Behavior

Reduce the 76px desktop hero to a practical 24-32px mobile scale and stack signup content below it. Topic cards become one or two columns. Editor, console, and instructions stack in task order while preserving source text at a readable width.

Horizontal code scrolling is acceptable inside a bounded editor; whole-page horizontal scrolling is not. Keep all primary actions at least 44px high and visible after validation errors.

## 10. Accessibility

Use a high-contrast yellow focus ring on dark surfaces and a navy ring on yellow or white. Code diagnostics need line references, text explanations, and programmatic associations. Do not rely on red and green syntax or test status alone.

Keyboard users must be able to enter, run, reset, and leave an exercise without focus traps. Announce asynchronous output without repeatedly interrupting typing.

## 11. Imagery and Media

Prefer inspectable product demonstrations, code samples, progress states, and learner outcomes. Abstract illustrations can separate marketing bands, but should not replace the actual exercise experience. Screenshots need legible text at their rendered size.

## 12. Content Voice

Use direct, active learning language: build, practice, run, debug, complete. Explain the concrete skill and expected outcome before asking for signup. Errors should identify what happened and the next correction, not blame the learner.

## 13. Reusable Patterns

The strongest pattern is a dark workspace with one high-signal next action. It suits technical onboarding, developer tools, and workflow training where the user repeatedly alternates between instruction and execution.

A second pattern is the compact subject grid: equal-height bordered destinations let users scan many paths without oversized course cards.

## 14. Agent Implementation Notes

Implement the dark shell and type hierarchy first, then model exercises as explicit instruction, editor, controls, and output regions. Assign yellow only to the primary next action in each local flow. Use semantic status tokens for tests and progress even when the visual treatment uses blue or lime.

Treat the large desktop hero and much smaller mobile hero as an intentional responsive change, not a fluid viewport-scaled font. Use breakpoint-specific values.

## 15. Anti-Patterns

Do not add neon glows, glass panels, decorative terminal noise, or rounded cards around every paragraph. Avoid hiding diagnostics in tooltips, using monospace for marketing copy, or turning all accents yellow. Never let a decorative animation move the editor, obscure output, or delay the next learning action.