Fatihurisqi

Generated Oct 15, 2026

DESIGN.md for id.khanacademy.org

id.khanacademy.org12 colors4 componentsPlus Jakarta Sans

Remix

2 screenshots captured· id.khanacademy.org

1 / 2 · Khan Academy | Kursus, Pelajaran, dan Latihan Online Gratis · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Id
description: |
  Khan Academy's design system embodies an approachable, modern educational
  platform that balances clarity with approachability. The visual language
  employs a vibrant primary accent (#EBF1FD) paired with rich, energetic
  supporting colors to create a sense of exploration and discovery. Deep,
  confident neutrals (#151521) anchor the interface and ensure readability
  across the learning experience. The system leverages generous whitespace,
  geometric forms (particularly in illustration and decorative elements), and a
  humanistic sans-serif typeface to convey both professionalism and
  accessibility. The color story moves between stark contrasts (white text on
  deep canvas) and subtle, supportive surfaces, reflecting the platform's
  mission to make learning feel welcoming yet serious. Decorative accent hues
  (through ) add playful touchpoints without overwhelming the core interface.
source:
  url: "https://id.khanacademy.org/"
  pagesAnalyzed: 1
  extractedAt: 2026-10-15
  tokensMeasured: true
colors:
  primary: "#EBF1FD"
  link: "#5753FA"
  canvas: "#000000"
  surface: "#FCC539"
  surface-alt: "#F6F6F6"
  on-primary: "#151521"
  ink: "#FFFFFF"
  body: "#151521"
  hairline: "#CBCBCD"
  accent-1: "#4A4C53"
  accent-2: "#BFCAFF"
  accent-3: "#72BB82"
  accent-4: "#F97B4F"
typography:
  display:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 42px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0px
  heading-lg:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  heading-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px
  heading-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0px
  heading-xs:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.29
    letterSpacing: 0px
    textTransform: uppercase
  body-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  body-md-strong:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  body-md-tight:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0px
  body-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-sm-loose:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.71
    letterSpacing: 0px
  body-sm-strong:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.71
    letterSpacing: 0px
  button-lg:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px
  button-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  caption-xs:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  caption-xs-strong:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 8px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 36px
  section: 40px
  band: 48px
borderWidths:
  thin: 1px
shadows:
  sm: "rgba(0, 0, 0, 0.25) 0px 4px 8px 0px"
elevationStrategy: single-tier
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#F7F7FF"
    surface: "#EDEDF5"
    surfaceRaised: "#E6E6ED"
    text: "#15141D"
    textMuted: "#6A6971"
    border: "#D4D4DB"
    accent: "#5753FA"
    accentFg: "#FFFFFF"
    focusRing: "#5753FA"
    elevation: shadow
  dark:
    bg: "#000000"
    surface: "#FCC539"
    surfaceRaised: "#FCCA49"
    text: "#FFFFFF"
    textMuted: "#151521"
    border: "#CBCBCD"
    accent: "#5753FA"
    accentFg: "#FFFFFF"
    focusRing: "#5753FA"
    elevation: "border+surface"
  contrastFailures:
    - "dark: muted on bg = 1.16:1 (needs 4.5:1)"
    - "dark: text on surface = 1.59:1 (needs 4.5:1)"
components:
  button-primary:
    textColor: "{colors.body}"
    border: "1px solid {colors.accent-2}"
    height: 40px
    padding: "0px 16px 0px 16px"
    fontSize: 13.3333px
    fontFamily: Arial
    fontWeight: 400
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.primary}"
  button-primary-2:
    typography: "{typography.body-sm}"
    textColor: "{colors.link}"
    border: "1px solid {colors.accent-2}"
    height: 40px
    padding: "0px 16px 0px 16px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.primary}"
  button-filled:
    typography: "{typography.body-sm}"
    textColor: "{colors.ink}"
    height: 40px
    padding: "0px 16px 0px 16px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.link}"
  button-outline:
    typography: "{typography.body-md-strong}"
    textColor: "{colors.accent-1}"
    border: "1px solid {colors.hairline}"
    height: 66px
    padding: "16px 20px 16px 20px"
    rounded: 100px
  button-text:
    textColor: "{colors.body}"
    height: 60px
    fontSize: 16px
    fontFamily: "Plus Jakarta Sans"
    fontWeight: 700
  button-icon:
    textColor: "{colors.link}"
    height: 26px
    fontSize: 13.3333px
    fontFamily: Arial
    fontWeight: 400
    rounded: "{rounded.xs}"
  navigation:
    typography: "{typography.body-sm}"
    textColor: "{colors.body}"
    height: 96px
  footer:
    typography: "{typography.body-sm}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    backgroundColor: "{colors.canvas}"
  link:
    textColor: "{colors.link}"
    border: "1px solid {colors.hairline}"
    padding: "12px 12px 12px 12px"
    fontSize: 14px
    boxShadow: "rgba(37, 35, 104, 0.2) 0px 2px 2px 0px"
    fontFamily: "Plus Jakarta Sans"
    fontWeight: 700
    lineHeight: 1.4
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.ink}"
  link-lg:
    textColor: "{colors.body}"
    fontSize: 14px
    fontFamily: "Plus Jakarta Sans"
    fontWeight: 400
states:
  other-hover:
    target: other
    state: hover
    textDecoration: underline
  other-active:
    target: other
    state: active
    textDecoration: underline
  other-focus:
    target: other
    state: focus
    outline: none
    textDecoration: underline
  other-focus-visible:
    target: other
    state: focus-visible
    outline: none
    boxShadow: "{colors.ink} 0px 0px 0px 2px, rgb(54, 153, 241) 0px 0px 0px 4px"
    borderColor: "rgb(54, 153, 241)"
  button-hover:
    target: button
    state: hover
    opacity: 0.6
  button-focus-visible:
    target: button
    state: focus-visible
    boxShadow: "rgba(0, 0, 0, 0.2) 0px 2px 3px 0px"
  button-disabled:
    target: button
    state: disabled
    boxShadow: none
  link-focus-visible:
    target: link
    state: focus-visible
    outline: "rgb(54, 153, 241) solid 2px"
    boxShadow: "{colors.ink} 0px 0px 0px 2px, rgb(54, 153, 241) 0px 0px 0px 4px"
    rounded: 4px
    outlineColor: "rgb(54, 153, 241)"
    outlineWidth: 2px
  link-hover:
    target: link
    state: hover
    textDecoration: none
  button-active:
    target: button
    state: active
    backgroundColor: "rgb(208, 225, 253)"
breakpoints:
  - width: 375
    containerWidth: 343
    gridColumns: 2
    navLinksVisible: 21
    menuToggleVisible: true
    headingPx: 24
    bodyPx: 14
    sectionPaddingX: 16
  - width: 768
    containerWidth: 640
    gridColumns: 4
    navLinksVisible: 23
    menuToggleVisible: true
    headingPx: 42
    bodyPx: 14
    sectionPaddingX: 64
  - width: 1024
    containerWidth: 896
    gridColumns: 4
    navLinksVisible: 23
    menuToggleVisible: true
    headingPx: 42
    bodyPx: 14
    sectionPaddingX: 64
  - width: 1280
    containerWidth: 1120
    gridColumns: 4
    navLinksVisible: 23
    menuToggleVisible: true
    headingPx: 42
    bodyPx: 14
    sectionPaddingX: 64
  - width: 1440
    containerWidth: 1400
    gridColumns: 4
    navLinksVisible: 23
    menuToggleVisible: true
    headingPx: 42
    bodyPx: 14
    sectionPaddingX: 64
coverage:
  statesFound: 61
  gradientsFound: 0
  rolesUnassigned: 4
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Khan Academy

1. Visual Theme & Atmosphere

Khan Academy's design system embodies an approachable, modern educational platform that balances clarity with approachability. The visual language employs a vibrant primary accent ({colors.primary} — #EBF1FD) paired with rich, energetic supporting colors to create a sense of exploration and discovery. Deep, confident neutrals ({colors.on-primary} — #151521) anchor the interface and ensure readability across the learning experience. The system leverages generous whitespace, geometric forms (particularly in illustration and decorative elements), and a humanistic sans-serif typeface to convey both professionalism and accessibility. The color story moves between stark contrasts (white text on deep canvas) and subtle, supportive surfaces, reflecting the platform's mission to make learning feel welcoming yet serious. Decorative accent hues ({colors.accent-3} through {colors.accent-4}) add playful touchpoints without overwhelming the core interface.

Key Characteristics

Clean, modern sans-serif typography (Plus Jakarta Sans) across all scales
High contrast between deep canvas ({colors.canvas} — #000000) and white text to ensure legibility and visual hierarchy
Purposeful use of a bright primary accent ({colors.primary}) for CTAs and brand identity
Decorative accent colors used sparingly to reinforce emotional resonance and playfulness
Generous spacing and whitespace to reduce cognitive load
Flat, geometric component styling with minimal shadow depth
Inclusive, approachable color palette that feels educational yet engaging

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #EBF1FD): Primary CTA fills, active states, and brand accent surfaces. Used for buttons, highlights, and brand touchpoints.
Link ({colors.link} — #5753FA): Inline hyperlinks and interactive text elements requiring distinction from body copy.

Neutral Scale

Canvas ({colors.canvas} — #000000): Default page background; the foundational neutral for dark surfaces and footers.
Ink ({colors.ink} — #FFFFFF): Primary text color for headings and high-contrast text; default foreground on dark backgrounds.
On Primary ({colors.on-primary} — #151521): Body copy, labels, and secondary text; default foreground on light and brand surfaces.
Hairline ({colors.hairline} — #CBCBCD): 1px borders, dividers, and subtle structural lines.

Surface & Backgrounds

Surface ({colors.surface} — #FCC539): Card and panel backgrounds; accent surface role for high-impact content areas.
Surface Alt ({colors.surface-alt} — #F6F6F6): Alternating section bands and secondary surfaces to provide visual rhythm.

Accent / Decorative

Accent 1 ({colors.accent-1} — #4A4C53): Decorative accent with no assigned semantic role; used for illustration and non-functional visual elements.
Accent 2 ({colors.accent-2} — #BFCAFF): Decorative accent; supports playful, secondary visual treatments.
Accent 3 ({colors.accent-3} — #72BB82): Decorative accent; contributes to the warm, optimistic palette.
Accent 4 ({colors.accent-4} — #F97B4F): Decorative accent; warm, energetic color for illustration and non-critical UI elements.

3. Typography Rules

Font Family

Primary: Plus Jakarta Sans (https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap)
Fallback Stack: Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display	Plus Jakarta Sans	42px	700	1.1	0px	Hero headings; maximal visual presence
Heading Large	Plus Jakarta Sans	32px	700	1.25	0px	Major section headers
Heading Medium	Plus Jakarta Sans	24px	700	1.33	0px	Subheadings and card titles
Heading Small	Plus Jakarta Sans	20px	700	1.4	0px	Secondary headers within sections
Heading XS	Plus Jakarta Sans	14px	700	1.29	0px	Labels and small headings; can be uppercase
Body Large / Strong	Plus Jakarta Sans	16px	600	1.5	0px	Emphasis within body text and strong copy
Body Medium	Plus Jakarta Sans	16px	500	1.5	0px	Default body copy and standard prose
Body Medium Tight	Plus Jakarta Sans	16px	700	1.4	0px	Inline links and emphasized body text
Body Small	Plus Jakarta Sans	14px	400	1.4	0px	Supporting text, list items, and tertiary copy
Body Small Strong	Plus Jakarta Sans	14px	500	1.71	0px	Emphasized small text with additional weight
Body Small Loose	Plus Jakarta Sans	14px	400	1.71	0px	Small text with generous line height for accessibility
Button Large	Plus Jakarta Sans	18px	700	1.33	0px	Large CTA buttons and prominent call-to-actions
Button Medium	Plus Jakarta Sans	12px	500	1.33	0px	Standard button labels and secondary CTAs
Caption XS	Plus Jakarta Sans	12px	500	1.4	0px	Captions, annotations, and metadata
Caption XS Strong	Plus Jakarta Sans	12px	700	1.33	0px	Emphasized captions and small labels

Principles

Progressive clarity: Heading scale steps decisively downward to establish information hierarchy; body text sizes prioritize readability over novelty.
Generous line spacing: Body copy benefits from 1.4–1.71 line height to reduce cognitive load and improve scanning.
Consistent weight system: Five weights (400, 500, 600, 700, 800 available) allow distinction without adding typefaces; 700-weight dominates headings.
No artificial tracking: Letter spacing remains 0px across all scales, preserving the typeface designer's intent.
Size-to-weight relationship: Smaller text uses higher weight (500–700) to maintain prominence; larger sizes use 700 to anchor hierarchy.

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#EBF1FD)
Text Color: {colors.on-primary} (#151521)
Border: 1px solid {colors.accent-2} (#BFCAFF)
Padding: 0px 16px
Height: 40px
Border Radius: {rounded.xs} (8px)
Font: {typography.body-md} (16px, weight 500)
Line Height: 1.5
Hover State: Background lightens to rgb(245, 249, 255) (tinted variant of primary)
Active State: Background darkens to rgb(208, 225, 253) (deeper tint of primary)
Focus Visible: Box shadow applied: rgb(255, 255, 255) 0px 0px 0px 2px, rgb(54, 153, 241) 0px 0px 0px 4px

Filled Button

Background: {colors.link} (#5753FA)
Text Color: {colors.ink} (#FFFFFF)
Border: None
Padding: 0px 16px
Height: 40px
Border Radius: {rounded.xs} (8px)
Font: {typography.body-md} (16px, weight 400)
Line Height: 1.5
Box Shadow: None
Active State: Background darkens to rgb(0, 5, 121) (deep press state)

Ghost / Outline Button

Background: Transparent
Text Color: {colors.accent-1} (#4A4C53)
Border: 1px solid {colors.hairline} (#CBCBCD)
Padding: 16px 20px
Height: 66px
Border Radius: 9999px (fully rounded pill shape)
Font: {typography.body-md-strong} (16px, weight 600)
Line Height: 1.5
Hover State: Border color shifts to var(--wb-semanticColor-action-secondary-progressive-hover-border) with subtle outline
Active State: Border color darkens and outline applies 2px solid

Text Button

Background: Transparent
Text Color: {colors.on-primary} (#151521)
Border: None
Padding: 0px
Height: 60px
Border Radius: 0px (sharp edges)
Font: {typography.heading-sm} (20px, weight 700)
Line Height: Normal
Hover State: Text color becomes more instructive; text decoration underline applied
Focus Visible: Outline 1px solid applied with inner box shadow

Icon Button

Background: Transparent
Text Color: {colors.link} (#5753FA)
Border: None
Padding: 0px
Width / Height: 26px
Border Radius: {rounded.xs} (8px)
Font: {typography.body-sm} (14px)
Hover State: Opacity reduces to 0.6; color may shift to instructive variant
Active State: Outline 2px solid applied; background becomes instructive
Focus Visible: Box shadow rgba(0, 0, 0, 0.2) 0px 2px 3px 0px

Cards & Containers

Default Card

Background: {colors.surface-alt} (#F6F6F6)
Border: 1px solid {colors.hairline} (#CBCBCD)
Border Radius: {rounded.xs} (8px)
Padding: 16px 20px
Box Shadow: rgba(37, 35, 104, 0.2) 0px 2px 2px 0px (subtle micro-elevation)
Text Color: {colors.on-primary} (#151521)
Font: {typography.body-md} (16px, weight 500)

Accent Surface Card

Background: {colors.surface} (#FCC539)
Border: None
Padding: Standard section padding
Text Color: {colors.on-primary} (#151521)

Inputs & Forms

Text Input

Background: {colors.ink} (#FFFFFF)
Border: 1px solid {colors.hairline} (#CBCBCD)
Border Radius: {rounded.xs} (8px)
Padding: 12px 16px
Font: {typography.body-md} (16px, weight 500)
Text Color: {colors.on-primary} (#151521)
Focus Visible: Outline 2px solid rgb(54, 153, 241); box shadow stack applied
Disabled State: Background white, text color var(--tc-surface-600), border color var(--tc-surface-600)

Navigation

Header Navigation

Background: Transparent / Canvas-based
Height: 96px
Text Color: {colors.on-primary} (#151521)
Font: {typography.body-md} (16px, weight 400)
Hover State (Links): Color shifts to instructive strong variant; underline applied
Active/Current State: Color becomes {colors.link} (#5753FA)
Border: 0px
Padding: No padding on nav container itself; flex layout with spacing between items

Footer Navigation

Background: {colors.canvas} (#000000)
Border Top: 1px solid {colors.hairline} (#CBCBCD)
Text Color: {colors.ink} (#FFFFFF)
Font: {typography.body-md} (16px, weight 400)
Link Hover State: Opacity 0.8 with outline 1px solid applied

5. Layout Principles

Spacing System

Base Unit: {spacing.xs} (8px)

The spacing scale is built in increments of 4px and 8px:

{spacing.xxs} = 4px — Micro adjustments between inline elements
{spacing.xs} = 8px — Tight spacing between related elements
{spacing.sm} = 12px — Small gaps within components
{spacing.md} = 16px — Default internal padding and gaps
{spacing.lg} = 20px — Standard gap between medium-sized sections
{spacing.xl} = 24px — Breathing room between major content blocks
{spacing.xxl} = 32px — Large section separation
{spacing.xxxl} = 36px — Extra-large gaps for visual emphasis
{spacing.section} = 40px — Full section padding top/bottom
{spacing.band} = 48px — Maximum section separation for visual hierarchy

Usage Context:

Button padding: {spacing.md} (16px horizontal)
Card padding: {spacing.md} to {spacing.lg} (16px–20px)
Section gaps: {spacing.section} to {spacing.band} (40px–48px)
Header/footer padding: {spacing.section} (40px) horizontal on desktop; {spacing.lg} (20px) on mobile

Grid & Container

Max Content Width: Responsive based on viewport; measured widths are:
- 375px viewport: 343px content column (16px side margins)
- 768px and above: 640px–1400px content column (scales with viewport up to 1440px max)
Grid Columns: 4 columns across all measured breakpoints (including mobile); grid adapts by collapsing smaller breakpoints into single-column layouts at UI level
Section Padding Horizontal: {spacing.lg} (16px) on mobile (375px); {spacing.section} (40px) on tablet and up (768px+); increases to 64px on larger viewports

Whitespace Philosophy

Generous whitespace is central to Khan Academy's approachability. Rather than cramming content, the system uses:

Breathing room between major sections ({spacing.band} — 48px)
Comfortable margins around key content ({spacing.section} — 40px)
Adequate line heights (1.4–1.71 for body text) to reduce cognitive load
Soft borders and minimal shadows to avoid visual harshness

This creates a calm, focused learning environment where users can process information without distraction.

Border Radius Scale

{rounded.none} = 0px — Used on buttons and images where sharp edges maintain clean geometry
{rounded.xs} = 8px — Standard radius for cards, inputs, and most interactive elements
Pill shape (9999px) — Applied exclusively to outline/ghost buttons for a friendly, rounded appearance

Border Widths

Thin: 1px — Applied to button borders, input borders, dividers, and hairline separators
No thicker borders are used in the measured system; all structural divisions rely on the thin 1px stroke

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow; background color only	Most buttons, text elements, basic containers
Micro	`rgba(37, 35, 104, 0.2) 0px 2px 2px 0px`	Card shadows; subtle lift for linked/interactive card surfaces
Navigation	`rgba(0, 0, 0, 0.25) 0px 4px 8px 0px`	Navigation header when sticky or layered above content

Shadow Philosophy:
Khan Academy employs a flat-first approach to elevation. The system avoids deep, dramatic shadows in favor of subtle color blocking and thin borders. The single applied shadow (rgba(0, 0, 0, 0.25) 0px 4px 8px 0px) is reserved for navigational elements that float above primary content. Cards use an extremely subtle micro-shadow (rgba(37, 35, 104, 0.2) 0px 2px 2px 0px) only when they contain interactive links, reinforcing affordance through combined visual cues (shadow + border + color). This minimalist elevation strategy keeps the interface calm and prevents visual overload.

Opacity Levels

No explicit opacity scale was measured in the extraction. Where opacity shifts occur (e.g., :hover states on buttons), they are applied as ad-hoc adjustments (e.g., opacity: 0.6) rather than a declared scale. Disabled states do not explicitly declare opacity; instead, they shift color values and remove box shadows.

Z-index / Layering

Layer	Z-Index	Purpose
Base	1	Default stacking context for body content and standard components
Modal	1000	Modals, overlays, and high-priority interruptions
Modal (max)	1060	Maximum z-index for nested modals or top-layer elements

7. Do's and Don'ts

Do

Use generous spacing between major sections ({spacing.band} — 48px) to provide visual breathing room and reduce cognitive load.
Apply {colors.primary} (#EBF1FD) exclusively to primary CTAs and brand-critical surfaces; it is the system's highest-priority call-to-action color.
Pair high-contrast text on dark canvas ({colors.canvas} — #000000 background with {colors.ink} — #FFFFFF text) for critical, legible content.
Use decorative accents ({colors.accent-1} through {colors.accent-4}) only in illustration, non-interactive visual elements, and secondary branding; never as primary interactive states.
Maintain {rounded.xs} (8px) as the default corner radius for cards, inputs, and components; reserve 9999px only for outline buttons.
Respect the typography hierarchy by using exact font sizes and weights from the measured scale; do not interpolate between defined sizes.
Keep shadows minimal — use the micro-shadow only on interactive card surfaces; avoid shadow stacking or complex layering.
Build responsive layouts that collapse from multi-column (desktop) to single-column (mobile) at measured breakpoints; maintain touchable button heights of at least 40px on all devices.

Don't

Invent new semantic colors (success, error, warning) — Khan Academy's extraction shows no such palette; use shape, text, and layout to communicate status instead.
Apply shadows to flat buttons — primary, filled, and text buttons should remain shadow-free; shadows are reserved for elevated surfaces (navigation, modal backdrops).
Mix border radius on the same component — buttons are either sharp (0px) or rounded ({rounded.xs} or 9999px), never both.
Use {colors.ink} (#FFFFFF) as body copy on light surfaces — reserve it for headings and high-contrast text on dark backgrounds.
Exceed a 1px border width for hairlines and dividers; the system does not include thicker strokes.
Compress line heights below 1.4 for body text — the hierarchy requires 1.4–1.71 for readability.
Stack multiple shadows or use soft-shadow patterns — the system employs a single, subtle micro-shadow only.
Ignore touch targets on mobile — maintain a minimum interactive element size of 40px × 40px to meet accessibility standards.
Introduce gradients, patterns, or mesh backgrounds — the system relies on solid colors and flat design; no gradient data was extracted.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Content Width	Grid Columns	Nav Links Visible	Heading (Display)	Body	Section Padding-X	Key Changes
Mobile	375px	343px	2	21 link chars	24px	14px	16px	Single-column layout; compact spacing; nav links wrap or collapse
Tablet	768px	640px	4	23 link chars	42px	14px	64px	Multi-column grid activates; display heading scales up to 42px; sections gain wider padding
Desktop (Standard)	1024px	896px	4	23 link chars	42px	14px	64px	Full-width content; consistent column count; stable padding
Desktop (Wide)	1280px	1120px	4	23 link chars	42px	14px	64px	Larger max-width; increased breathing room
Desktop (Max)	1440px	1400px	4	23 link chars	42px	14px	64px	Maximum content width; no further scaling

Collapse Strategy:

At 375px: Single effective column for content; two-column grid applies only to visual components (decorative elements, illustration). Navigation remains visible but link text is truncated.
At 768px and above: Four-column grid becomes the default layout; display heading scales to full 42px; section padding increases from 16px to 64px horizontally.
At 1280px+: Content width scales proportionally; grid column count remains stable at 4; padding is maximized to maintain readable line lengths.

No menu toggle appears in the measured data; the navigation remains visible across all breakpoints.

Touch Targets

Minimum Interactive Element Size: 40px × 40px for all buttons, links, and icon buttons to meet WCAG and mobile accessibility guidelines.
Button Height: 40px (primary, filled, outline) on mobile and desktop; 66px for larger outline buttons with extra padding.
Navigation Link Spacing: Ensure at least {spacing.md} (16px) of padding around each nav link to prevent accidental taps.
Form Inputs: Minimum 40px height with at least 12px vertical padding and 16px horizontal padding.

Collapsing Strategy

Layout: Content reflows from multi-column (desktop 4 columns) to single-column (mobile) based on viewport width.
Typography: Display heading shrinks from 42px (768px+) to 24px (375px); body copy remains 14px across breakpoints.
Spacing: Section padding-left/right decreases from 64px (desktop) to 16px (mobile) to maximize usable content area.
Navigation: Remains visible across all breakpoints; no hamburger menu is employed in the measured design.
Images & Media: Scale responsively within their containers; border radius remains consistent ({rounded.none} or {rounded.xs}).

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary / Brand ({colors.primary} — #EBF1FD) — Use for main call-to-action buttons and primary interactive surfaces.
Secondary CTA: Link ({colors.link} — #5753FA) — Use for filled buttons, inline links, and instructive interactive text.
Background (Dark): Canvas ({colors.canvas} — #000000) — Use for footer, dark surfaces, and high-contrast backgrounds.
Foreground (Light): Ink ({colors.ink} — #FFFFFF) — Use for headings and primary text on dark backgrounds.
Body Text: On Primary ({colors.on-primary} — #151521) — Use for body copy, labels, and secondary text on light surfaces.
Structural: Hairline ({colors.hairline} — #CBCBCD) — Use for 1px borders, dividers, and subtle visual separation.
Accent Surface: Surface ({colors.surface} — #FCC539) — Use for high-impact content areas, highlights, and visual emphasis blocks.
Secondary Surface: Surface Alt ({colors.surface-alt} — #F6F6F6) — Use for alternating section bands and lower-priority backgrounds.
Decorative: Accent 1–4 (#4A4C53, #BFCAFF, #72BB82, #F97B4F) — Use only in illustration, non-interactive visual elements, and secondary branding; do not assign semantic meaning.

Iteration Guide

Start with color blocking: Use surface colors ({colors.surface}, {colors.surface-alt}) to define major content regions before layering interactive elements.
Apply hierarchy through typography first: Use exact font sizes and weights from the measured scale; never interpolate. Display (42px, 700 weight) for hero content; Body Medium (16px, 500 weight) for standard prose.
Make CTAs unmissable: Primary buttons must use {colors.primary} fill with {colors.on-primary} text; filled buttons must use {colors.link} background with {colors.ink} text. Both require 40px minimum height.
Use {rounded.xs} (8px) as default; reserve 9999px for outline buttons only to maintain visual consistency and component recognition.
Spacing is breathing room: Apply {spacing.band} (48px) between major sections; {spacing.md} (16px) for internal padding; never compress below these values.
Shadows are subtle: Use the micro-shadow (rgba(37, 35, 104, 0.2) 0px 2px 2px 0px) only on interactive card surfaces; buttons and flat elements have no shadow.
Responsive breakpoints: Design mobile-first at 375px (single column, 24px display heading); scale up to tablet at 768px (four columns, 42px display); lock max width at 1440px.
Always maintain minimum touch target: Buttons and interactive elements must be at least 40px × 40px on all breakpoints.
Links stay consistent: Inline links always use {colors.link} color; add underline on :hover; apply focus ring 2px solid rgb(54, 153, 241) on :focus-visible.
Respect the flat design philosophy: Avoid gradients, complex layering, and heavy shadows; rely on color, typography, and generous spacing to establish hierarchy and guide attention.

10. Known Gaps

No explicit interaction states for disabled inputs or form elements — the extraction does not contain :disabled styling for text inputs; only button :disabled states were observed. Form validation (error, success, warning) states were not measured.
No semantic color ramp — the site does not declare error, success, warning, or info colors. All visual feedback must rely on typography, layout, and decorative accents rather than a formal status palette.
No gradients or mesh backgrounds — the extraction found no gradient data; all surfaces are solid colors.
No explicit dark-mode variant — only one theme was measured (light canvas with light ink on dark, and vice versa). If dark-mode behavior is critical, it was not present in the analyzed page or is behind authentication.
Four colors marked as decorative only ({colors.accent-1} through {colors.accent-4}) — these have no measured semantic role. They appear in illustration and non-interactive UI; do not invent uses for them beyond decoration.
No measured transition or animation timings — the extraction contains no CSS transition or animation properties. Interaction animations, if any, were not captured.
Limited viewport coverage — only 5 breakpoints were measured (375px, 768px, 1024px, 1280px, 1440px). In-between sizes may exhibit unpredictable behavior; assume linear scaling between measured points.
No data on surfaces behind authentication — the page analyzed was public-facing. Premium content, user dashboards, or logged-in experiences were not measured and may differ.
No modal or overlay styling data — modals are declared in z-index but no modal background, padding, or dismissal UI was measured.
Limited focus and error state coverage — focus styles (:focus-visible) were extracted, but :focus (non-visible) and comprehensive :invalid / :error states for inputs were not consistently measured across all component types.

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from id.khanacademy.org

Primary

#EBF1FD

Primary CTA, brand accent, active state

#5753FA

Inline link colour

#4A4C53

Accent / decorative

#BFCAFF

Accent / decorative

#72BB82

Accent / decorative

#F97B4F

Accent / decorative

Neutral

#000000

Default page background

#FCC539

Card / panel background

#F6F6F6

Alternating section band

#FFFFFF

Headings / primary text

#151521

Body copy; label colour on brand surfaces

#CBCBCD

1px borders and dividers

Typography · Plus Jakarta SansGoogle Fonts

h142px · 700 · 46.2px

h224px · 700 · 32px

body14px · 500 · 24px

link16px · 700 · 22.4px

button18px · 700 · 24px

list-item14px · 400 · 19.6px

body16px · 500 · 24px

body14px · 400 · 24px

heading32px · 700 · 40px

body16px · 600 · 24px

body14px · 500 · 18px

body16px · 700 · 24px

body14px · 700 · 18px

heading20px · 700 · 28px

heading14px · 700 · 18px

body14px · 600 · 18px

caption12px · 500 · 16.8px

button12px · 500 · 16px

caption12px · 700 · 16px

Spacing

4px

8px

12px

16px

20px

24px

32px

36px

Elevation

rgba(0, 0, 0, 0.25) 0px 4px 8px 0px

Components · 4

Remixes of id.khanacademy.org

Latest remixes

No public remixes yet. Be the first to make one.

Remix it