Wonder Blocks

# Wonder Blocks — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Khan Academy. "Wonder Blocks" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Wonder Blocks
**Owner:** Khan Academy
**Official documentation:** https://khan.github.io/wonder-blocks/
**Visual character:** Learning-optimism in Lato: friendly blue actions, gold celebration moments, and components tuned for students on any device.

---

## Summary

Khan Academy's open-source React component library for building consistent learning experiences.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Blue / Action | `#1865f2` | `--wb-color-blue` | Primary actions and links |
| Off Black Text | `#21242c` | `--wb-color-offBlack` | Primary text |
| Off Black 64 | `#63666f` | `--wb-color-offBlack64` | Secondary text |
| White | `#ffffff` | `--wb-color-white` | Surfaces |
| Off White | `#f7f8fa` | `--wb-color-offWhite` | Subtle background |
| Off Black 16 Border | `#d6d8da` | `--wb-color-offBlack16` | Borders |
| Red / Critical | `#d92916` | `--wb-color-red` | Errors |
| Gold Highlight | `#ffb100` | `--wb-color-gold` | Streaks and celebration |

## Typography

- **Body:** Lato — weights 400, 700, 900 — `Lato, 'Noto Sans', sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| title | `36px` | `40px` |
| heading-large | `28px` | `32px` |
| heading-medium | `24px` | `28px` |
| body | `16px` | `22px` |
| label-small | `12px` | `16px` |

## Spacing

Base unit: `8px`

Scale: `4px` · `8px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `4px` |
| medium | `8px` |
| pill | `9999px` |

## Quick start (CSS)

```css
/* Wonder Blocks — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://khan.github.io/wonder-blocks/ */

:root {
  /* Color */
  --wb-color-blue: #1865f2; /* Primary actions and links */
  --wb-color-offBlack: #21242c; /* Primary text */
  --wb-color-offBlack64: #63666f; /* Secondary text */
  --wb-color-white: #ffffff; /* Surfaces */
  --wb-color-offWhite: #f7f8fa; /* Subtle background */
  --wb-color-offBlack16: #d6d8da; /* Borders */
  --wb-color-red: #d92916; /* Errors */
  --wb-color-gold: #ffb100; /* Streaks and celebration */

  /* Typography */
  --font-body: Lato, 'Noto Sans', sans-serif;

  /* Type scale */
  --text-title: 36px /* line-height 40px */;
  --text-heading-large: 28px /* line-height 32px */;
  --text-heading-medium: 24px /* line-height 28px */;
  --text-body: 16px /* line-height 22px */;
  --text-label-small: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* Radius */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-pill: 9999px;
}
```

## Engineering profile

- **Ships for:** React
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Wonder Blocks by Khan Academy — Khan Academy's open-source React component library for building consistent learning experiences. Character: Learning-optimism in Lato: friendly blue actions, gold celebration moments, and components tuned for students on any device. Use a primary colour near #1865f2, the typeface "Lato" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 8px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Wonder Blocks documentation](https://khan.github.io/wonder-blocks/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/khan-wonder-blocks) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._