--- 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 | Role | Light | Dark | Where | |------|-------|------|-------| | Action and instructive | `#1865f2` | `#6c82ff` text, `#5753fa` fill | Token file, measured on buttons and links | | Navy chrome | `#0b2149` | not read | Measured on the header | | Text | `#21242c` | `#ededee` | Token file, measured | | Secondary text | `#5f6167` | `#cbcbcd` | Token file | | Faint text | `#717378` | not read | Measured | | Page | `#ffffff` | `#252531` | Token file | | Subtle fill | `#ededee` | `#4a4c53` | Token file | | Border | `#dbdcdd` | `#4a4c53` | Token file | | Blue wash | `#edf3fe` | not read | Measured | | Success | `#00a60e` on `#ebf8ec` | `#72bb82` | Token file | | Critical | `#d92916` on `#fceeec` | `#f97f7f` | Token file | | Warning | `#ffb100` on `#fff9eb` | not read | Token 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.