{
  "$description": "Brand: Khan Academy (khan-academy@1.0.0)",
  "color": {
    "swatches": {
      "$description": "Source-of-truth color swatches from palette khan-academy@1.0.0",
      "blue": {
        "$value": "#1865F2",
        "$type": "color",
        "$description": "Khan Academy's primary brand blue (Wonder Blocks blue). The signature action color."
      },
      "green": {
        "$value": "#00A60E",
        "$type": "color",
        "$description": "Mastery / completion green — the \"correct answer\" signal."
      },
      "gold": {
        "$value": "#FFB100",
        "$type": "color",
        "$description": "Achievement / streak gold — the motivational accent."
      },
      "red": {
        "$value": "#D92916",
        "$type": "color",
        "$description": "Error / destructive red — the \"wrong answer\" signal."
      },
      "purple": {
        "$value": "#9059FF",
        "$type": "color",
        "$description": "Editorial purple — secondary accent in illustrations and badges."
      },
      "off-black": {
        "$value": "#21242C",
        "$type": "color",
        "$description": "Canonical text ink — Wonder Blocks deliberately avoids pure"
      },
      "off-white": {
        "$value": "#F7F8FA",
        "$type": "color",
        "$description": "Default surface canvas — Wonder Blocks light-mode background."
      },
      "white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Pure white — elevated surface and card background."
      },
      "dark-blue": {
        "$value": "#0B2149",
        "$type": "color",
        "$description": "Wonder Blocks brand-tier deep navy — hero callouts and chart anchor."
      },
      "teal": {
        "$value": "#14BF96",
        "$type": "color",
        "$description": "Wonder Blocks brand-tier teal — secondary accent and editorial highlight."
      },
      "eggplant": {
        "$value": "#5F1E5C",
        "$type": "color",
        "$description": "The Khanmigo AI tutor brand accent. Reserved for the AI product surface."
      },
      "blue-hover": {
        "$value": "#11459E",
        "$type": "color",
        "$description": "Pressed / active variant of Khan Academy Blue — derived for hover/active states."
      },
      "blue-pale": {
        "$value": "#E5EEFE",
        "$type": "color",
        "$description": "Pale blue surface tint — Wonder Blocks faded-blue background."
      },
      "red-pale": {
        "$value": "#FBE7E5",
        "$type": "color",
        "$description": "Pale red surface tint — Wonder Blocks faded-red background."
      },
      "green-pale": {
        "$value": "#E0F4E1",
        "$type": "color",
        "$description": "Pale green surface tint — Wonder Blocks faded-green background."
      },
      "gold-pale": {
        "$value": "#FFF6E0",
        "$type": "color",
        "$description": "Pale gold surface tint — Wonder Blocks faded-gold background."
      }
    }
  },
  "font": {
    "$description": "Typography roles mapped to font atoms",
    "heading": {
      "family": {
        "$value": [
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "heading role → Inter (inter@1.0.0)"
      },
      "weight": {
        "100": {
          "$value": 100,
          "$type": "fontWeight"
        },
        "200": {
          "$value": 200,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "800": {
          "$value": 800,
          "$type": "fontWeight"
        },
        "900": {
          "$value": 900,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    },
    "body": {
      "family": {
        "$value": [
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "body role → Inter (inter@1.0.0)"
      },
      "weight": {
        "100": {
          "$value": 100,
          "$type": "fontWeight"
        },
        "200": {
          "$value": 200,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "800": {
          "$value": 800,
          "$type": "fontWeight"
        },
        "900": {
          "$value": 900,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    },
    "mono": {
      "family": {
        "$value": [
          "JetBrainsMono Nerd Font",
          "JetBrains Mono",
          "Fira Code",
          "Menlo",
          "Monaco",
          "Consolas",
          "Liberation Mono",
          "monospace"
        ],
        "$type": "fontFamily",
        "$description": "mono role → JetBrainsMono Nerd Font (jetbrainsmono-nerdfont@1.0.0)"
      },
      "weight": {
        "100": {
          "$value": 100,
          "$type": "fontWeight"
        },
        "200": {
          "$value": 200,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "800": {
          "$value": 800,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    }
  },
  "$extensions": {
    "com.brand-atoms.rules": [
      {
        "type": "colorChoice",
        "target": "roles.colors.primary",
        "severity": "error",
        "rationale": "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.\n",
        "allowed": [
          "blue",
          "blue-hover"
        ],
        "forbidden": [
          "dark-blue",
          "teal",
          "eggplant",
          "purple",
          "green",
          "gold",
          "red"
        ]
      },
      {
        "type": "colorChoice",
        "target": "roles.colors.text-primary-light",
        "severity": "error",
        "rationale": "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.\n",
        "allowed": [
          "off-black"
        ],
        "forbidden": [
          "black"
        ]
      },
      {
        "type": "contextRestriction",
        "target": "roles.colors.mark",
        "severity": "warning",
        "rationale": "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.\n",
        "allowedContexts": [
          "mark",
          "logo",
          "cta",
          "link",
          "focus-ring"
        ],
        "forbiddenContexts": [
          "khanmigo-surface",
          "ai-tutor-context"
        ]
      },
      {
        "type": "forbiddenTreatment",
        "target": "logo",
        "severity": "error",
        "rationale": "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.\n",
        "treatments": [
          "stretched",
          "skewed",
          "rotated",
          "drop-shadow",
          "recolored-non-brand",
          "on-busy-photo"
        ]
      },
      {
        "type": "contrastRatio",
        "target": "text-primary",
        "severity": "error",
        "rationale": "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.\n",
        "against": "background",
        "minRatio": 7,
        "standard": "WCAG-AAA"
      },
      {
        "type": "enumMembership",
        "target": "typography.heading.fontWeight",
        "severity": "warning",
        "rationale": "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.\n",
        "allowed": [
          "400",
          "500",
          "600",
          "700"
        ]
      },
      {
        "type": "fontPairing",
        "target": "typography.display",
        "severity": "error",
        "rationale": "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.\n",
        "requires": "prose",
        "minSizeRatio": 1.4
      },
      {
        "type": "contextRestriction",
        "target": "roles.colors.error",
        "severity": "error",
        "rationale": "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.\n",
        "allowedContexts": [
          "error-state",
          "wrong-answer",
          "destructive-action"
        ],
        "forbiddenContexts": [
          "confirmation",
          "mastery-attained",
          "completion"
        ]
      },
      {
        "type": "compositionConstraint",
        "target": "roles.colors.primary",
        "severity": "recommendation",
        "rationale": "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.\n",
        "pairsWith": [
          "white",
          "off-white",
          "off-black",
          "dark-blue"
        ],
        "doesNotPairWith": [
          "red",
          "gold",
          "eggplant"
        ]
      },
      {
        "type": "accessibilityRequirement",
        "target": "*",
        "severity": "error",
        "rationale": "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.\n",
        "standard": "WCAG-AA",
        "criterion": "1.4.3"
      }
    ],
    "com.brand-atoms.assets": [],
    "com.brand-atoms.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.\n",
      "importedDate": "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.\n"
    },
    "com.brand-atoms.references": {
      "palette": "khan-academy@1.0.0",
      "fonts": {
        "heading": "inter@1.0.0",
        "body": "inter@1.0.0",
        "mono": "jetbrainsmono-nerdfont@1.0.0"
      }
    }
  }
}