Learning & Reference / iOS / Android / Web

Khan Academy

Khan Academy keeps chrome out of the way: one blue for everything clickable, a navy header, bold Lato and small corners, so the lessons are the only thing with personality.

Download
  • #1865F2
  • #0B2149
  • #21242C
  • #EDEDEE
  • #00A60E
  • #D92916

Color

Every color token in the file, grouped by role.

Brand

  • primary#1865F2
  • on primary#FFFFFF
  • dark primary#5753FA

Surfaces

  • canvas#FFFFFF
  • canvas subtle#EDEDEE
  • dark canvas#252531

Text

  • ink#21242C
  • ink muted#5F6167
  • ink faint#717378
  • dark link#6C82FF
  • dark ink#EDEDEE
  • dark ink muted#CBCBCD

Lines

  • border#DBDCDD
  • border strong#909296
  • dark border#4A4C53

Status

  • success#00A60E
  • success wash#EBF8EC
  • warning#FFB100
  • warning wash#FFF9EB
  • dark success#72BB82

More

  • navy#0B2149
  • blue wash#EDF3FE
  • critical#D92916
  • critical wash#FCEEEC
  • dark critical#F97F7F

Typography

Each style is set with the file's own family, size, weight and spacing.

  • LatoOpen font, shown as published.
  • Plus Jakarta SansOpen font, shown as published.
  • Noto SerifOpen font, shown as published.
  • heading xlarge36px / 700 / 40px

    Khan Academy

  • heading small16px / 700 / 20px

    The quick brown fox jumps over the lazy dog

  • lead20px / 400 / 24px

    Pack my box with five dozen liquor jugs

  • body medium16px / 400 / 22px

    The quick brown fox jumps over the lazy dog

  • body small14px / 400 / 20px

    The quick brown fox jumps over the lazy dog

  • button16px / 700 / 20px

    Continue to checkout

  • next heading24px / 600 / 32px

    Pack my box with five dozen liquor jugs

  • serif16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs1px
  • sm4px
  • md8px
  • lg12px
  • xl24px
  • round999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg24px
  • xl32px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button secondary
    button-secondary
  • header
    header
  • info wash
    info-wash
  • success wash
    success-wash
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 126 lines
version: alpha
name: Khan-Academy-design-analysis
description: "A free learning site that stays plain and friendly: Lato in 700 and 400, a single action blue (#1865f2) against deep navy (#0b2149) headers, 4 and 8px corners and gentle status washes, with a dark theme and a newer Plus Jakarta Sans theme already in the published token set."
status: Draft
appVersion: "measured in a browser and read from the published Wonder Blocks token file, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#1865f2"
  on-primary: "#ffffff"
  navy: "#0b2149"
  ink: "#21242c"
  ink-muted: "#5f6167"
  ink-faint: "#717378"
  canvas: "#ffffff"
  canvas-subtle: "#ededee"
  border: "#dbdcdd"
  border-strong: "#909296"
  blue-wash: "#edf3fe"
  success: "#00a60e"
  success-wash: "#ebf8ec"
  critical: "#d92916"
  critical-wash: "#fceeec"
  warning: "#ffb100"
  warning-wash: "#fff9eb"
  dark-canvas: "#252531"
  dark-primary: "#5753fa"
  dark-link: "#6c82ff"
  dark-border: "#4a4c53"
  dark-ink: "#ededee"
  dark-ink-muted: "#cbcbcd"
  dark-critical: "#f97f7f"
  dark-success: "#72bb82"

typography:
  heading-xlarge:
    fontFamily: "Lato, 'Noto Sans', Helvetica, Corbel, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 40px
  heading-small:
    fontFamily: "Lato, 'Noto Sans', Helvetica, Corbel, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 20px
  lead:
    fontFamily: "Lato, 'Noto Sans', Helvetica, Corbel, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 24px
  body-medium:
    fontFamily: "Lato, 'Noto Sans', Helvetica, Corbel, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22px
  body-small:
    fontFamily: "Lato, 'Noto Sans', Helvetica, Corbel, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  button:
    fontFamily: "Lato, 'Noto Sans', Helvetica, Corbel, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 20px
  next-heading:
    fontFamily: "'Plus Jakarta Sans', 'Noto Sans', sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 32px
  serif:
    fontFamily: "'Noto Serif', serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px

rounded:
  xs: 1px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  round: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 32px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 40px
    padding: 0 16px
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 56px
    padding: 0 16px
  header:
    backgroundColor: "{colors.navy}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    height: 60px
  info-wash:
    backgroundColor: "{colors.blue-wash}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 16px
  success-wash:
    backgroundColor: "{colors.success-wash}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 16px

Overview

Khan Academy is a free nonprofit learning site for school subjects. Its look is deliberately plain: white pages, one blue for anything you can click, a deep navy header and lots of small, evenly spaced lists of lessons. [Observed]

What defines the look:

  1. One action blue. #1865f2 is the fill for primary buttons, the color of links and the instructive border. [Measured]
  2. Deep navy chrome. The top bar and the hero bands use #0b2149. [Measured]
  3. Lato, bold and plain. Lato at 700 for headings and buttons and 400 for text, with Noto Sans behind it. [Measured]
  4. Small corners. Buttons and inputs use a 4px corner and larger cards use 8. [Measured]
  5. Tinted statuses. Blue, green, red and yellow each have a pale wash and a strong text or border color. [Measured]
  6. A second theme on the way. The published token set holds a dark theme and a newer theme that swaps Lato for Plus Jakarta Sans and adds medium and semibold weights, and a few elements on the live site already use it. [Measured]

Source for this file: the home page and a course page measured in a browser at 1440 and 390 wide, plus the published Wonder Blocks token file, read on 2026-10-06. No account screens or app captures were used. See Known Gaps.

Core

Colors

RoleLightDarkWhere
Action and instructive#1865f2#6c82ff text, #5753fa fillToken file, measured on buttons and links
Navy chrome#0b2149not readMeasured on the header
Text#21242c#ededeeToken file, measured
Secondary text#5f6167#cbcbcdToken file
Faint text#717378not readMeasured
Page#ffffff#252531Token file
Subtle fill#ededee#4a4c53Token file
Border#dbdcdd#4a4c53Token file
Blue wash#edf3fenot readMeasured
Success#00a60e on #ebf8ec#72bb82Token file
Critical#d92916 on #fceeec#f97f7fToken file
Warning#ffb100 on #fff9ebnot readToken file

Typography

Lato is the family, loaded at 400 and 700. Page titles measure 36 on 40 at 700, section headings 16 on 20 at 700, intro text 20 on 24 at 400 and body 14 to 16 at 400. Buttons are 16 at 700. [Measured] The token file also defines a serif (Noto Serif) and a monospace (Inconsolata). [Measured] In the newer theme the sans family is Plus Jakarta Sans with weights 300 to 700, and heading sizes run from 16 to 32. [Measured]

Shape and spacing

Corners are 4 on buttons and inputs and 8 on cards, with 12, 24 and fully round also published. Control heights measured at 40 for the search button and 56 for large buttons, with 16 side padding. The size scale is built in tenths of a rem (4, 8, 12, 16, 24, 32 and up). [Measured]

Iconography and motion

Not measured in this pass. [Inferred]

Themes

Light and dark ship in the token file, with a separate newer typography theme. [Measured]

Platform: iOS

The Khan Academy iOS app was not captured. The notes below follow from the web design system.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for the main areas, with lessons as long vertical lists. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A primary blue button for continuing a lesson. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The apps are expected to share the blue, Lato and the status washes with the web. [Inferred]

Platform: Android

The Khan Academy Android app was not captured. The notes below follow from the web design system.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A navigation bar for the main areas, with lessons as long vertical lists. [Inferred]

Main action

Expected on Android: Floating action button.

A primary blue button for continuing a lesson. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The apps are expected to share the blue, Lato and the status washes with the web. [Inferred]

Platform: Web

The khanacademy.org home page and a public course page, measured at 1440 and 390 wide. Signed-in screens were not measured.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back and a course, unit and lesson path. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A navy top bar with Explore, a search field with a visible border and sign-in links. [Observed]

Main action

Expected on Web: Page-level button.

A blue button with white text, 40 to 56 high with a 4px corner. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Bordered white buttons with blue text for choices such as Teacher and Student, and a bordered search button on the navy bar. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are published in rem. [Measured from the token file]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Large buttons measure 56 high and standard ones 40. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

Wonder Blocks is the shared system for the web product. [Measured]

Cross-platform consistency

Consistent across platforms: the blue, Lato, small corners and status washes. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use the one blue for everything clickable.
  • Keep corners at 4 and 8.
  • Pair each status color with its pale wash.
  • Keep headings bold and text regular.

Don't

  • Don't add a second action color.
  • Don't use the yellow for text on white.
  • Don't round buttons into pills.

Known Gaps

  • No signed-in screens were measured, so exercises, progress and the dashboard are not described.
  • The iOS and Android apps were not captured. Their sections are inferred.
  • Icons, illustrations and motion were not measured.
  • The newer Plus Jakarta Sans theme is only partly live, so Lato is used for the main tokens.
  • Account deletion and store policy rules were not verified.