{
  "id": "codecademy",
  "version": "1.0.0",
  "name": "Codecademy",
  "description": "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.\n",
  "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).\n",
    "importedDate": "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.\n"
  },
  "tags": [
    "codecademy",
    "education",
    "programming",
    "learn-to-code",
    "brand",
    "navy",
    "hyper",
    "lime-green",
    "developer"
  ],
  "palette": {
    "ref": "codecademy@1.0.0",
    "swatches": [
      {
        "id": "navy",
        "name": "Navy",
        "value": "#10162F",
        "description": "Codecademy's signature deep navy. Both the body text ink on light surfaces and the canvas in dark mode.",
        "aliases": [
          "navy-800",
          "ink",
          "primary-dark"
        ]
      },
      {
        "id": "navy-900",
        "name": "Navy 900",
        "value": "#0A0D1C",
        "description": "Deepest navy — pressed Navy / hero anchor.",
        "aliases": []
      },
      {
        "id": "hyper",
        "name": "Hyper",
        "value": "#3A10E5",
        "description": "Codecademy's signature electric purple-blue. The primary brand action color on marketing surfaces.",
        "aliases": [
          "hyper-500",
          "brand"
        ]
      },
      {
        "id": "hyper-light",
        "name": "Hyper Light",
        "value": "#5533FF",
        "description": "Slightly brighter Hyper — hover and accent moment.",
        "aliases": [
          "hyper-400"
        ]
      },
      {
        "id": "blue",
        "name": "Blue",
        "value": "#1557FF",
        "description": "Mid-blue accent (Gamut blue-500) — link and focus state.",
        "aliases": [
          "blue-500"
        ]
      },
      {
        "id": "blue-light",
        "name": "Blue Light",
        "value": "#3388FF",
        "description": "Brighter blue accent (Gamut blue-400).",
        "aliases": []
      },
      {
        "id": "blue-300",
        "name": "Blue 300",
        "value": "#66C4FF",
        "description": "Pale info-blue (Gamut blue-300).",
        "aliases": []
      },
      {
        "id": "blue-pale",
        "name": "Blue Pale",
        "value": "#D3F2FF",
        "description": "Pale blue surface tint (Gamut blue-100).",
        "aliases": []
      },
      {
        "id": "blue-0",
        "name": "Blue 0",
        "value": "#F5FCFF",
        "description": "Faintest blue surface wash (Gamut blue-0).",
        "aliases": []
      },
      {
        "id": "green",
        "name": "Green",
        "value": "#008A27",
        "description": "Codecademy's success green (Gamut green-700).",
        "aliases": [
          "success"
        ]
      },
      {
        "id": "green-light",
        "name": "Green Light",
        "value": "#AEE938",
        "description": "Lime green accent (Gamut green-400) — celebration and completion.",
        "aliases": [
          "lime"
        ]
      },
      {
        "id": "green-pale",
        "name": "Green Pale",
        "value": "#EAFDC6",
        "description": "Pale green surface tint (Gamut green-100).",
        "aliases": []
      },
      {
        "id": "green-0",
        "name": "Green 0",
        "value": "#F5FFE3",
        "description": "Faintest green wash (Gamut green-0).",
        "aliases": []
      },
      {
        "id": "yellow",
        "name": "Yellow",
        "value": "#FFD300",
        "description": "Warning / streak yellow (Gamut yellow-500).",
        "aliases": [
          "warning"
        ]
      },
      {
        "id": "yellow-dark",
        "name": "Yellow Dark",
        "value": "#CCA900",
        "description": "Pressed yellow (Gamut yellow-400).",
        "aliases": []
      },
      {
        "id": "yellow-0",
        "name": "Yellow 0",
        "value": "#FFFAE5",
        "description": "Faintest yellow surface wash (Gamut yellow-0).",
        "aliases": []
      },
      {
        "id": "red",
        "name": "Red",
        "value": "#E91C11",
        "description": "Error / destructive red (Gamut red-500).",
        "aliases": [
          "error"
        ]
      },
      {
        "id": "red-dark",
        "name": "Red Dark",
        "value": "#BE1809",
        "description": "Pressed error red (Gamut red-600).",
        "aliases": []
      },
      {
        "id": "red-soft",
        "name": "Red Soft",
        "value": "#DC5879",
        "description": "Soft rose-red (Gamut red-400).",
        "aliases": []
      },
      {
        "id": "red-0",
        "name": "Red 0",
        "value": "#FBF1F0",
        "description": "Faintest red surface wash (Gamut red-0).",
        "aliases": []
      },
      {
        "id": "pink",
        "name": "Pink",
        "value": "#F966FF",
        "description": "Editorial pink (Gamut pink-400).",
        "aliases": []
      },
      {
        "id": "orange",
        "name": "Orange",
        "value": "#FF8C00",
        "description": "Editorial orange (Gamut orange-500).",
        "aliases": []
      },
      {
        "id": "beige",
        "name": "Beige",
        "value": "#FFF0E5",
        "description": "Warm beige surface tint (Gamut beige-100) — used in marketing hero washes.",
        "aliases": []
      },
      {
        "id": "white",
        "name": "White",
        "value": "#FFFFFF",
        "description": "Pure white — marketing canvas.",
        "aliases": []
      },
      {
        "id": "gray-100",
        "name": "Gray 100",
        "value": "#F5F5F5",
        "description": "Lightest grey surface (Gamut gray-100).",
        "aliases": []
      },
      {
        "id": "gray-200",
        "name": "Gray 200",
        "value": "#EEEEEE",
        "description": "Light grey surface (Gamut gray-200).",
        "aliases": []
      },
      {
        "id": "gray-300",
        "name": "Gray 300",
        "value": "#E0E0E0",
        "description": "Border / divider grey (Gamut gray-300).",
        "aliases": []
      },
      {
        "id": "gray-600",
        "name": "Gray 600",
        "value": "#9E9E9E",
        "description": "Tertiary text grey (Gamut gray-600).",
        "aliases": []
      },
      {
        "id": "gray-800",
        "name": "Gray 800",
        "value": "#616161",
        "description": "Secondary text grey (Gamut gray-800).",
        "aliases": []
      },
      {
        "id": "gray-900",
        "name": "Gray 900",
        "value": "#424242",
        "description": "Deep grey (Gamut gray-900).",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "white",
          "surface": "gray-100",
          "surface-elevated": "white",
          "text-primary": "navy",
          "text-secondary": "gray-800",
          "text-tertiary": "gray-600",
          "primary": "hyper",
          "primary-hover": "hyper-light",
          "accent": "hyper-light",
          "accent-hover": "hyper",
          "warning": "yellow",
          "warning-hover": "yellow-dark",
          "error": "red",
          "success": "green",
          "border": "gray-300"
        }
      },
      "dark": {
        "roles": {
          "background": "navy",
          "surface": "navy-900",
          "surface-elevated": "navy",
          "text-primary": "white",
          "text-secondary": "gray-300",
          "text-tertiary": "gray-600",
          "primary": "hyper-light",
          "primary-hover": "hyper",
          "accent": "green-light",
          "accent-hover": "green",
          "warning": "yellow",
          "warning-hover": "yellow-dark",
          "error": "red-soft",
          "success": "green-light",
          "border": "gray-900"
        }
      }
    }
  },
  "fonts": [
    {
      "role": "heading",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "body",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "mono",
      "ref": "geist-mono@1.0.0",
      "family": "Geist Mono",
      "classification": "monospace",
      "source": {
        "kind": "external",
        "family": "Geist Mono",
        "cssImportUrl": "https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono/index.css",
        "notes": "First-party distribution: `geist` npm package, import path `geist/font/mono`. The cssImportUrl above points at the community @fontsource-variable/geist-mono bundle on jsDelivr for raw CSS consumption.\n"
      },
      "fallbackStack": [
        "SFMono-Regular",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "Courier New",
        "monospace"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "normal"
        }
      ]
    }
  ],
  "roles": {
    "colors": {
      "identity": "navy",
      "on-identity": "white",
      "primary": "hyper",
      "primary-hover": "hyper-light",
      "accent": "green-light",
      "accent-hover": "green",
      "mark": "hyper",
      "success": "green",
      "warning": "yellow",
      "error": "red",
      "text-primary-light": "navy",
      "text-primary-dark": "white",
      "background-light": "white",
      "background-dark": "navy",
      "surface-light": "gray-100",
      "surface-dark": "navy-900",
      "text-secondary-light": "gray-800",
      "text-tertiary-light": "gray-600",
      "border-light": "gray-300",
      "border-dark": "gray-900"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "colorChoice",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "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.\n",
      "allowed": [
        "hyper",
        "hyper-light"
      ],
      "forbidden": [
        "blue",
        "blue-light",
        "green",
        "green-light",
        "yellow",
        "red",
        "pink"
      ]
    },
    {
      "type": "colorChoice",
      "target": "roles.colors.identity",
      "severity": "error",
      "rationale": "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.\n",
      "allowed": [
        "navy",
        "navy-900"
      ],
      "forbidden": [
        "white",
        "hyper",
        "green",
        "blue"
      ]
    },
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "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.\n",
      "treatments": [
        "stretched",
        "skewed",
        "rotated",
        "drop-shadow",
        "recolored-non-brand",
        "on-busy-photo",
        "low-contrast-fill"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "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.\n",
      "against": "background",
      "minRatio": 7,
      "standard": "WCAG-AAA"
    },
    {
      "type": "enumMembership",
      "target": "typography.heading.fontWeight",
      "severity": "warning",
      "rationale": "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.\n",
      "allowed": [
        "400",
        "700"
      ]
    },
    {
      "type": "fontPairing",
      "target": "typography.display",
      "severity": "error",
      "rationale": "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.\n",
      "requires": "prose",
      "minSizeRatio": 1.4
    },
    {
      "type": "contextRestriction",
      "target": "roles.colors.mark",
      "severity": "warning",
      "rationale": "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.\n",
      "allowedContexts": [
        "mark",
        "logo",
        "cta",
        "link",
        "focus-ring"
      ],
      "forbiddenContexts": [
        "large-fill",
        "hero",
        "background"
      ]
    },
    {
      "type": "compositionConstraint",
      "target": "roles.colors.primary",
      "severity": "recommendation",
      "rationale": "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.\n",
      "pairsWith": [
        "navy",
        "navy-900",
        "white",
        "green-light"
      ],
      "doesNotPairWith": [
        "blue",
        "blue-light",
        "pink",
        "red"
      ]
    },
    {
      "type": "accessibilityRequirement",
      "target": "*",
      "severity": "error",
      "rationale": "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.\n",
      "standard": "WCAG-AA",
      "criterion": "1.4.3"
    }
  ]
}