---
version: alpha
name: Duolingo
description: "A white page interrupted by flat green plates, and type that laughs before it teaches."
colors:
  on-surface: "#3C3C3C"
  surface: "#FFFFFF"
  primary: "rgba(0, 205, 156, 0.1)"
  feather-green: "#58CC02"
  mint: "#A5ED6E"
  pale-lime: "#D7FFB8"
  heading-ink: "#4B4B4B"
  body-grey: "#777777"
  muted-grey: "#AFAFAF"
  hairline: "#E5E5E5"
  rule-grey: "#808080"
  duo-blue: "#1CB0F6"
  chess-teal: "#00CD9C"
  midnight: "#100F3E"
  super-ink: "#000437"
  navy: "#042C60"
typography:
  caption:
    fontFamily: duolingo-sans
    fontSize: 13px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  subtext:
    fontFamily: duolingo-sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 17px
    letterSpacing: 0em
  label:
    fontFamily: duolingo-sans
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.8px
  link:
    fontFamily: duolingo-sans
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: 0em
  eyebrow:
    fontFamily: duolingo-sans
    fontSize: 15px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0.8px
  utility:
    fontFamily: duolingo-sans
    fontSize: 15px
    fontWeight: 400
    lineHeight: 15px
    letterSpacing: 0.8px
  button:
    fontFamily: duolingo-sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 42px
    letterSpacing: 0.64px
  eyebrow-sm:
    fontFamily: duolingo-sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0.64px
  body:
    fontFamily: duolingo-sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  column-head:
    fontFamily: duolingo-sans
    fontSize: 19px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  body-lg:
    fontFamily: duolingo-sans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0em
  accordion-head:
    fontFamily: duolingo-sans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  card-label:
    fontFamily: duolingo-sans
    fontSize: 24px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0em
  heading-sm:
    fontFamily: duolingo-sans
    fontSize: 28px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: 0em
  heading-md:
    fontFamily: duolingo-sans
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  heading-lg:
    fontFamily: duolingo-sans
    fontSize: 40px
    fontWeight: 400
    lineHeight: 44px
    letterSpacing: 0em
  display:
    fontFamily: feather
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0em
  display-xl:
    fontFamily: feather
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: -1.28px
rounded:
  marketing-control-1rcv8-1vyyp-1ursp-7jw2: 12px
  subject-control-and-topic-card-3q-f-20ol: 16px
  bands-rules-body-footer-1ift9-3zmwg-1rwl: 0px
spacing:
  gap-xs: 10px
  gap-sm: 12px
  gap: 16px
  gap-md: 20px
  gap-lg: 24px
  stack: 32px
  stack-lg: 40px
  block: 48px
  block-lg: 80px
  hero-gap: 101px
  header-pad: 70px
  footer-pad: 72px
  section: 96px
  section-lg: 120px
  section-xl: 140px
  section-xxl: 185px
  card-pad: 28px
---
# Duolingo — Style Reference
> A white page interrupted by flat green plates, and type that laughs before it teaches.

**Theme:** light

Two systems live at this address — a marketing pair, the home page and the English course lander, and a pair of subject landers for chess and math — and the split falls at the first heading you read. The marketing pages set display type in feather, all lowercase, in a green that is also the footer, the ground and the logo; the subject landers drop feather entirely, set every heading in duolingo-sans at a soft charcoal, and trade green for a teal on chess and a blue on math. The canvas carries no texture: it is interrupted rather than decorated, by full-bleed plates of one flat colour at a time. Hierarchy is scale and ink, not weight — the body face carries almost every size at 700, so the jump from a footer link to a section head is pure size. Corners are small and confident, a rounded rectangle rather than a pill, and separation is drawn with 2px hairlines rather than shadow. The voice is lowercase and unembarrassed, and the illustration does the smiling so the type doesn't have to.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#FFFFFF` | `--color-canvas` | The body fill (`._2j8ko`) and the top bar (`._3L2FE._1JEFf`). Also a label ink — "Get started" (`._2NRlK`) and "Start playing" (`._9lHjd`) go white on colour. |
| Feather Green | `#58CC02` | `--color-green` | The identity. Fills the footer (`._1nNuk`), the 1440px plate (`._1IFT9`) and the 240×416px ground shapes (`._3zmWG`), and inks "free. fun. effective." (`._3X-2C`) and "learn a language with duolingo" (`._1FmL9`) — a surface and a headline in one hex. |
| Mint | `#A5ED6E` | `--color-mint` | Footer link ink at 15px and 13px, and the 2px border of the footer rule (`.c-sxz`). No contrast on white — keep it inside the green plate. |
| Pale Lime | `#D7FFB8` | `--color-lime` | Footer column heads ("About us" `._30Vi6`) and the "Site language:" label (`._1LLyK`). The lighter tier of the on-green ramp: heads in lime, links in mint. |
| Ink | `#3C3C3C` | `--color-ink` | An inherited `color` on containers, not an ink you can see — the census counts 455 carriers (`li`, `div`, `img`, `section`, `._2j8ko`) and the type census sets no text in it. Table it, don't paint with it. |
| Heading Ink | `#4B4B4B` | `--color-heading` | Nearly every duolingo-sans heading — `.w67-i`, `.v1-3J`, `._2b6i8`, `.L93Ok` — plus the topic-card label `.eovCn`. A step lighter than charcoal, which is why the pages read soft rather than editorial. The heading census prints one exception — `h3 ._1o8Df` on the course lander, 19px/700/24px in `#777777`. |
| Body Grey | `#777777` | `--color-body` | Paragraph ink at 17px/500/24px on the marketing pages ("Learning with Duolingo is fun, and research show…", 9 elements, class `not measured`) and 20px/500/28px on the subject landers (`._2dA3Y`, 1 of 9), plus the course-rail labels "English", "Chess", "Math" … (`._2qfTm`, 42 spans on the home page). The reading colour; heads go darker from here, not lighter. |
| Muted Grey | `#AFAFAF` | `--color-muted` | Eyebrows and utility links — "Bite-sized learning" (`._3Q3nZ`), the footer link row (`._2aeq-._2Rt1l`), "Site language: English" (`._9lHjd`). The quietest ink here. |
| Hairline | `#E5E5E5` | `--color-hairline` | The structural line: the FAQ rule's fill (`._1RWL5`) and the 2px border on the course rail (`._3XjUp`), the topic card (`._21rqH`) and `.MwOde`. Structure is drawn, not shaded. |
| Rule Grey | `#808080` | `--color-rule-ink` | The `color` value the `hr` elements carry. The line you see is the `#E5E5E5` fill or border — table this one, don't paint with it. |
| Duo Blue | `#1CB0F6` | `--color-blue` | Secondary-action ink: "I ALREADY HAVE AN ACCOUNT" (`._2NRlK._9lHjd`) and the inline link "research shows that it works" (`._1F7oE`). The math lander promotes it to house accent. |
| Chess Teal | `#00CD9C` | `--color-teal` | The chess lander's accent ink, on ghost buttons (`._2paU5.rdtAy._2V6ug._1ursp`) and the "I ALREADY HAVE AN ACCOUNT" label (`._9lHjd`). Swaps in for the blue, one page at a time. |
| Teal Wash | `rgba(0, 205, 156, 0.1)` | `--color-teal-wash` | Chess Teal at 10%, filling the chess header (`._39x5J._3XKeD`) and a section (`._1VREO`) — the one entry in the translucent inventory, where the other painted surfaces are saturated flats or white. |
| Midnight | `#100F3E` | `--color-midnight` | Fills one 1920×1200px section (`.LlPOq`). The dark plate in the capture; its rarity is what makes the subscription pitch read as another product. |
| Super Ink | `#000437` | `--color-super-ink` | The "Try 1 week free" label (`._2NRlK._9lHjd`) inside that band — near-black with a blue cast, so the white control it sits in doesn't ring. |
| Navy | `#042C60` | `--color-navy` | The ink of one feather display line, "learn anytime, anywhere" (`.QO0Sm`) — the heading colour that is neither green nor grey. |

## Tokens — Typography

### feather — the marketing display face: lowercase at 48px (`._3X-2C`) and 64px (`._1FmL9`), weight 700, almost always in `#58CC02` · `--font-display`
- **Substitute:** Baloo 2, Fredoka, Quicksand
- **Weights:** 700
- **Sizes:** 48px, 64px
- **Line height:** normal at both sizes — the face's own leading is left alone
- **Letter spacing:** tightens at the larger size: −1.28px (−0.02em) on the 64px rows `._1FmL9` and `.QO0Sm`, normal on the 48px row `._3X-2C`.
- **Role:** The marketing display face — lowercase, weight 700, 48px and 64px, almost always `#58CC02`; the heading census paints it on `._3X-2C`, `._1FmL9` and `.QO0Sm`.

### duolingo-sans — everything else: headings, body, labels, buttons, footer, from 13px to 40px · `--font-sans`
- **Substitute:** Nunito, Museo Sans Rounded, ui-rounded
- **Weights:** 400, 500, 700
- **Sizes:** 13, 14, 15, 16, 17, 19, 20, 24, 28, 32, 40px
- **Line height:** 15px to 48px — tight at label sizes (15px/15px on `._2aeq-._2Rt1l`), generous at body (20px/28px on `._2dA3Y`), stretched to 42–44px on button labels so text centres in a 48px box.
- **Letter spacing:** the heading and paragraph rows `.w67-i`, `.v1-3J`, `._2b6i8` and `._2dA3Y` all measure normal; labels open up instead — 0.8px on 15px (`._2NRlK`, 0.053em) and 0.64px on 16px (`._9lHjd`, 0.04em).
- **Role:** Everything that isn't a marketing display line — headings, body, labels, buttons, footer, 13px to 40px.

### sans-serif — the inherited fallback; the weights census lists 500 for it · `--font-fallback`
- **Substitute:** system-ui, -apple-system, Segoe UI
- **Weights:** 500
- **Sizes:** not measured — the census names no sized text row for this family
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** The stack's tail. With no sized text row in the census, treat it as a fallback, not a face to specify.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 13px | 16px | normal | `--text-caption` |
| Subtext | 14px | 17px | normal | `--text-subtext` |
| Label | 15px | normal | 0.8px | `--text-label` |
| Link | 15px | 22px | normal | `--text-link` |
| Eyebrow | 15px | 20px | 0.8px | `--text-eyebrow` |
| Utility | 15px | 15px / 17.25px | 0.8px | `--text-utility` |
| Button | 16px | 42px / 44px | 0.64px | `--text-button` |
| Eyebrow sm | 16px | 16px | 0.64px | `--text-eyebrow-sm` |
| Body | 17px | 24px | normal | `--text-body` |
| Column head | 19px | 24px / 26.6px | normal | `--text-column-head` |
| Body lg | 20px | 28px | normal | `--text-body-lg` |
| Accordion head | 20px | 24px | normal | `--text-accordion` |
| Card label | 24px | 28px | normal | `--text-card-label` |
| Heading sm | 28px | 32px | normal | `--text-heading-sm` |
| Heading md | 32px | normal | normal | `--text-heading-md` |
| Heading lg | 40px | 44px / 48px | normal | `--text-heading-lg` |
| Display | 48px | normal | normal | `--text-display` |
| Display xl | 64px | normal | −1.28px | `--text-display-xl` |

## Tokens — Spacing & Shapes

**Base unit:** 4px — the gap ladder runs 12 / 16 / 20 / 24 / 32 / 40 / 48 / 80px on it, with 10px and 101px off-grid.   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| Gap xs | 10px | `--spacing-10` |
| Gap sm | 12px | `--spacing-12` |
| Gap | 16px | `--spacing-16` |
| Gap md | 20px | `--spacing-20` |
| Gap lg | 24px | `--spacing-24` |
| Stack | 32px | `--spacing-32` |
| Stack lg | 40px | `--spacing-40` |
| Block | 48px | `--spacing-48` |
| Block lg | 80px | `--spacing-80` |
| Hero gap | 101px | `--spacing-101` |
| Header pad | 70px | `--spacing-70` |
| Footer pad | 72px | `--spacing-72` |
| Section | 96px | `--spacing-96` |
| Section lg | 120px | `--spacing-120` |
| Section xl | 140px | `--spacing-140` |
| Section xxl | 185px | `--spacing-185` |
| Card pad | 28px 35px | `--spacing-card` |

### Border Radius

| Element | Value |
|---------|-------|
| Marketing control — `._1rcV8._1VYyp._1ursp._7jW2t`, `._2V6ug._1ursp._7jW2t.-TeUZ`, `._2V6ug._1ursp._7jW2t._133DB` | 12px |
| Subject control and topic card — `._3q--f._20olS._1VYyp._1ursp`, `._2paU5.rdtAy._2V6ug._1ursp`, `._21rqH` | 16px |
| Bands, rules, body, footer — `._1IFT9`, `._3zmWG`, `._1RWL5`, `._1nNuk`, `._2j8ko`, `.LlPOq` | 0px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Teal wash | `rgba(0, 205, 156, 0.1) 0px 0px 0px 1920px` | `--shadow-wash` |

### Layout
- **Page max-width:** not measured — the census paints no horizontal inset of 48px or more; the widest boxes are 1920px bands (`._2j8ko`, `._1nNuk`, `._3XjUp`, `.LlPOq`), with a 1440px inner plate (`._1IFT9`) and text rules as narrow as 643px (`._1RWL5`).
- **Section gap:** 96px vertical padding on 7 blocks (`.uU0-M`, `._3dG3I`, `.kWIKU`), 120px on 4 (`._3jnEa.SO3BX`, `._1QhXW`); the marketing hero sequence rides a 101px flex gap across 9 sections (`._3k9io`).
- **Card padding:** 28px top, 35px left (`._21rqH`).
- **Element gap:** 16px on 18 elements (`._1MHf9`), 24px on 12 (`._2Yq-n`), 32px on 12 (`._2zjY4`).

## Components

### Primary Action Button
**Role:** The button that starts a course — the green rectangle the marketing pages repeat above and below the fold.
`._1rcV8._1VYyp._1ursp._7jW2t`: a 330×50px box (154×50px in the "Try 1 week free" variant), padding `0px 16px`, radius 12px, no border, no shadow. Label in duolingo-sans 15px/700, 0.8px tracking, normal line-height — `#FFFFFF` on the course pages (`._2NRlK`), `#000437` in the midnight band (`._2NRlK._9lHjd`). The row measures `fill none`: the green face sits on a child the census does not name, so the fill is `not measured` — take it from `#58CC02`. Vertical padding is zero and the label's line-height measures `normal`, so what centres it in the 50px box is `not measured`.

### Secondary Outline Button
**Role:** The "I already have an account" path — the primary's footprint, arguing only with colour.
`._2V6ug._1ursp._7jW2t.-TeUZ`: 330×50px, padding `0px 16px`, radius 12px, `fill none`, `border none`, `shadow none` — the primary's geometry exactly, so the two stack as one block. Label in duolingo-sans 15px/700, 0.8px tracking, Duo Blue `#1CB0F6` (`._2NRlK._9lHjd`). The white face and hairline edge in the screenshots sit on a descendant and are `not measured` here. The sibling `._2V6ug._1ursp._7jW2t._1L3MW` carries the same 330×50px box and 12px radius for "Certify your English".

### Subject Solid Button
**Role:** The start action on the subject landers, where the system changes its corner language.
`._3q--f._20olS._1VYyp._1ursp`: a 300×48px box, padding `0px 12px`, radius **16px**, no border, no shadow. It appears twice on chess as "Start playing" and twice on math as "GET STARTED" — same measurements, different label. Its ink is the white 16px/700 button row at 44px line-height and 0.64px tracking (`._9lHjd`), which is how you tell it from the ghost variant: 44px, not 42px. Thirty pixels narrower than the marketing button, two shorter, four more of radius — the subject pages run softer and tighter.

### Subject Ghost Button
**Role:** The quieter twin on the subject landers — sign-in and the repeated in-section calls to action.
`._2paU5.rdtAy._2V6ug._1ursp`: 300×48px, padding `0px 11px`, radius 16px, `fill none`, `border none`, `shadow none`, four elements on chess and three on math. Its label measures 16px/700, 42px line-height, 0.64px tracking, inked Chess Teal `#00CD9C` on chess and Duo Blue `#1CB0F6` on math (`._9lHjd`) — one class, two accents, decided by the page. One pixel less horizontal padding than the solid variant is the only geometric difference.

### App Store Badge
**Role:** The store lockup under the "learn anytime, anywhere" display line — a button that behaves like a card.
`._2V6ug._1ursp._7jW2t._133DB`: a 162–177px × 63px box (two widths, App Store and Google Play), padding `9.5px 14px`, radius 12px, no border, no shadow, a 10px flex gap between glyph and text. Among the control rows the census prints, it is the one with vertical padding, and the one stacking two type sizes: `.subtext` sets "Download on the" at 14px/700/17px inside a 17px/700/20px wrapper whose own text reads "Download on theApp Store", both `#4B4B4B`. The store name is not a row of its own — its size is `not measured`. Its 12px radius keeps it in the marketing corner vocabulary.

### Top Bar
**Role:** The persistent header — logo left, one action right, and nothing between them.
`._3L2FE._1JEFf` (and `._3L2FE` on the course lander): a 1920×72px div filled `#FFFFFF`, radius 0, no border, no shadow, containing "Site language: English". Its utility label is duolingo-sans 15px/700/17.25px, 0.8px tracking, Muted Grey `#AFAFAF` (`._9lHjd`). White on white — the row measures `border none` and `shadow none`, so whatever edge the screenshots show under the bar is `not measured`.

### Course Rail
**Role:** The language strip under the home hero — a horizontal shelf of courses you scroll with arrows.
`._3XjUp`: a full-bleed 1920×80px div, padding `0px 40px`, radius 0, `fill none`, a 2px `#E5E5E5` border, no shadow, containing "English Chess Math Spanish French German Italian". Each label is duolingo-sans 15px/700/20px, 0.8px tracking, Body Grey `#777777` (`._2qfTm`) — uppercase in the screenshots, beside a flag glyph. The 40px side padding sets where content starts while the border runs edge to edge.

### Marketing Hero Lockup
**Role:** The opening statement on the marketing pages — one `h1`, two stacked buttons, illustration alongside.
The hero is `._15kfC`, carrying an 80px flex gap and 48px of top padding. Its `h1` is duolingo-sans 32px/700, normal line-height, `#4B4B4B` ("The most fun way to learn languages, chess, and ", `.L93Ok`). Below it a 12px-gap stack (`._1-0oK`) holds the two 330×50px controls — `._1rcV8._1VYyp._1ursp._7jW2t` ("Get started") over `._2V6ug._1ursp._7jW2t.-TeUZ` ("I ALREADY HAVE AN ACCOUNT"). The illustration beside them carries no census row, so its box is `not measured`. The 101px gap belongs to the nine feature sections below it (`._3k9io`), which carry no vertical padding of their own.

### Subject Section Header
**Role:** The three-line unit that introduces every feature block on the chess lander.
Three rows again, all centred in the screenshots. The eyebrow is duolingo-sans 16px/700/16px, 0.64px tracking, Muted Grey `#AFAFAF` (`._3Q3nZ`, "Bite-sized learning") — four spans, chess only. The heading is 28px/700/32px in `#4B4B4B` — seven across chess and math, four of them `.v1-3J` ("Chess for the rest of us"); the class the math lander uses for the other three is `not measured`. The page-level version goes to 40px/700/44px (`.w67-i`). The paragraph is 20px/500/28px in `#777777` (`._2dA3Y`) — three points larger than the home page's 17px/500 body, which is what makes these pages read calmer.

### Topic Card
**Role:** The math syllabus tile — a bordered rectangle holding one topic name.
`._21rqH`: a 342×110px div, padding `28px 35px`, radius 16px, `fill none`, a 2px `#E5E5E5` border, no shadow, eight of them on the math lander. The 20px gap the census records is the card's own, between glyph and label; the gap between cards is `not measured`. The label is duolingo-sans 24px/700/28px in `#4B4B4B` (`.eovCn`, "Arithmetic"). No fill, no shadow, no accent — a hairline and a word, which is why a grid of eight reads as a list rather than a wall of boxes. Padding is asymmetric: 35px of side room for a long topic name against 28px above.

### FAQ Accordion
**Role:** The closing question list on the subject landers — a stack of headings separated by rules.
Two rows. The question is duolingo-sans 20px/700/24px in `#4B4B4B` (`._2b6i8`, "Does Duolingo teach chess?"), sixteen across the chess and math pages. The separator is `._1RWL5`, an `hr` filled `#E5E5E5` at 643×2px — radius 0, no border, no shadow — which also fixes the block's column width. The section head runs 40px/700/48px (`._2nHlt`, "Frequently Asked Questions"). A wider rule, `.MwOde`, measures 1065×2px with a 2px `#E5E5E5` border.

### Green Footer
**Role:** The sitemap — a screen-height green plate closing both marketing pages.
`._1nNuk`: a 1920×827px `footer` filled `#58CC02`, radius 0, no border, no shadow. Inside, the on-green ramp does all the work: column heads at 19px/700/26.6px in Pale Lime `#D7FFB8` (`._30Vi6`), links at 15px/700/22px in Mint `#A5ED6E`, the language list at 13px/700/16px, also mint (`.FXHbm`). The divider above that block is `.c-sxz`, a 1920×2px `hr` with a 2px `#A5ED6E` border. Ink, rule and plate stay in one hue.

## Do's and Don'ts

### Do
- Put feather on lowercase display lines at 48px or 64px, with −1.28px tracking at 64px (`._1FmL9`, `.QO0Sm`).
- Use duolingo-sans 700 for headings, labels and buttons alike; let size carry the hierarchy from 13px (`.FXHbm`) to 40px (`.w67-i`).
- Keep 12px radii on marketing controls, 16px on subject controls and cards — the corner tells you which system you're in.
- Draw structure with 2px `#E5E5E5` borders (`._3XjUp`, `._21rqH`) and `#E5E5E5` rule fills (`._1RWL5`).
- Stack primary and secondary buttons at identical 330×50px footprints so the pair reads as one block.
- Switch the accent per subject — teal `#00CD9C` on chess, blue `#1CB0F6` on math — one class doing both (`._2paU5.rdtAy._2V6ug._1ursp`).
- Set subject-control labels at 16px/0.64px with 42px (`._2paU5.rdtAy._2V6ug._1ursp`) or 44px (`._3q--f._20olS._1VYyp._1ursp`) leading inside the 300×48px box; set marketing-control labels at 15px/0.8px with line-height `normal` inside the 330×50px box.

### Don't
- Don't add elevation. The shadow census lists one box-shadow — `rgba(0, 205, 156, 0.1) 0px 0px 0px 1920px` on `._1VREO`, a 1920px spread used as a full-bleed tint, not a lift.
- Don't invent a corner value. Controls and cards paint two — 12px on the 10 marketing controls, 16px on the 21 subject controls and cards — and everything structural paints 0px: the footer (`._1nNuk`), the bands (`._1IFT9`, `._3zmWG`), the bars (`._3L2FE._1JEFf`), the rail (`._3XjUp`) and every `hr` (`._1RWL5`, `.MwOde`, `.c-sxz`).
- Don't set mint `#A5ED6E` or pale lime `#D7FFB8` on white — the census carries them as ink inside the green footer (`._30Vi6`, `.FXHbm`, `.c-sxz`).
- Don't put feather on the chess or math headings; the heading census sets those in duolingo-sans (`.w67-i`, `.v1-3J`, `._2b6i8`).
- Don't give the display face a heavier weight to make it louder — the weights census lists 700 for feather, and `._3X-2C`, `._1FmL9` and `.QO0Sm` all measure it; scale is the volume control.
- Don't darken the heading ink past `#4B4B4B`. Headings sit one step above the body, which the census sets in `#777777` at 17px/500/24px and 20px/500/28px — reversing the two hardens the page.
- Don't tint the canvas. White fills the body (`._2j8ko`) on the marketing pages, and colour arrives as a full-bleed plate instead.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | The body fill (`._2j8ko`), 1920px wide, 5192–8403px tall. |
| 1 | Bar | `#FFFFFF` | The 1920×72px top bar (`._3L2FE._1JEFf`) — canvas value, separated by the rail's border. |
| 2 | Hairline | `#E5E5E5` | The drawn line: rule fills (`._1RWL5`) and 2px borders (`._3XjUp`, `._21rqH`, `.MwOde`). |
| 3 | Wash | `rgba(0, 205, 156, 0.1)` | The chess header tint (`._39x5J._3XKeD`, `._1VREO`) — the measured translucent surface. |
| 4 | Green plate | `#58CC02` | The 1440×80px band (`._1IFT9`), the 240×416px ground shapes (`._3zmWG`), the 1920×827px footer (`._1nNuk`). |
| 5 | Midnight plate | `#100F3E` | One 1920×1200px section (`.LlPOq`), the subscription pitch. |

## Elevation

There is no elevation ladder. The one box-shadow in the census is `rgba(0, 205, 156, 0.1) 0px 0px 0px 1920px` on `._1VREO` — zero offset, zero blur, 1920px spread, flooding a section with tint. A fill trick, not a lift. Depth comes from three other moves: a 2px `#E5E5E5` border (course rail, topic card), a 2px rule fill (`._1RWL5`), and a change of plate — white gives way to green or midnight with a hard edge. The screenshots show the primary button carrying a darker bottom lip and the outline buttons a soft grey edge; neither is measured on `._1rcV8._1VYyp._1ursp._7jW2t` or `._2V6ug._1ursp._7jW2t.-TeUZ`, both of which report `shadow none`, so that lip is `not measured`.

## Imagery

Flat vector illustration, and a great deal of it — drawing does the work photography would elsewhere. The cast is rounded and outline-free, oversized heads on simple limbs, caught mid-action around the type. Duo the owl is the constant, rendered in the same green as the display type so mascot and headline are one ink. Devices appear as isometric phone frames with thick bezels and a real UI inside — progress bars, hearts, a chess board, a pizza fraction — so the product demo is illustration, not a screenshot. The chess lander adds soft grey pieces on a mint checkerboard floor; the math lander, blue axes and equation glyphs. Two hero plates read as pale blue and pale mint in the screenshots; the census names no hex for either, so both are unmeasured fills. Icons are flag glyphs and store marks — no line-icon set.

## Layout

Full-bleed by default. The widest measured boxes are 1920px — body, footer, course rail and midnight section all run the full viewport, and the census records no horizontal inset of 48px or more, so bands touch both edges and content centres inside them. One plate steps in: `._1IFT9` at 1440×80px. Content columns are far narrower than the bands beneath them — the FAQ rule fixes its block at 643px, the wider divider at 1065px, the topic card at 342px. Vertical rhythm is two-tiered: 96px of section padding on seven blocks, 120px on four, with outliers at 140px and 185px on the home page and 70px around the marketing header. The marketing hero sequence alternates two columns — copy one side, illustration the other — on a 101px flex gap. The subject landers centre everything instead: eyebrow, heading, paragraph and button on one axis, a phone mockup offset beside. Nav is a single bar: logo left, one or two controls right, no menu.

## Typography Voice

Two typographic modes, switched by page rather than by level. In marketing mode, feather sets lowercase display at 64px with −1.28px tracking and 48px with none, at 700, in green — "free. fun. effective." is the whole thesis, three fragments and three full stops. In subject mode, feather disappears and duolingo-sans takes the headings at 40px/44px and 28px/32px in `#4B4B4B`, sentence case, a 16px muted eyebrow above and a 20px/28px paragraph below. The signature move is tracking that flips with scale: negative at 64px, positive at every label size — 0.8px on 15px, 0.64px on 16px — so small type opens as big type closes. The second is line-height as a layout tool: subject-control labels carry 42px or 44px leading inside the 300×48px box, while marketing-control labels set 15px type at line-height `normal` inside the 330×50px box. And the weight ladder barely exists — 700 does headings, buttons, footer links and 13px captions alike, 500 the running paragraphs.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FFFFFF`
- text: `#777777`
- surface: `#58CC02`
- border: `#E5E5E5`
- accent: `#00CD9C`
- primary action: `#58CC02`

## Example Component Prompts
1. **Primary Action Button**: A 330×50px button, padding `0px 16px`, radius 12px, no border, no shadow, filled `#58CC02`; label in duolingo-sans 15px/700, 0.8px letter-spacing, normal line-height, `#FFFFFF`, uppercase, centred.
2. **Subject Ghost Button**: A 300×48px button, padding `0px 11px`, radius 16px, transparent fill, no border, no shadow; label in duolingo-sans 16px/700, 42px line-height, 0.64px letter-spacing, `#00CD9C` (`#1CB0F6` for the math variant), uppercase.
3. **Topic Card Grid**: Eight 342×110px cards, each with a 20px internal gap between glyph and label (grid gap `not measured`); padding `28px 35px`, radius 16px, transparent fill, a 2px `#E5E5E5` border, no shadow, holding one label in duolingo-sans 24px/700/28px in `#4B4B4B`.
4. **Green Footer**: A full-bleed 1920×827px footer filled `#58CC02`, radius 0, six link columns; heads in duolingo-sans 19px/700/26.6px in `#D7FFB8`, links 15px/700/22px in `#A5ED6E`, a 1920×2px rule with a 2px `#A5ED6E` border above a 13px/700/16px language list in `#A5ED6E`.
5. **Marketing Hero**: A two-column block on an 80px gap with 48px of top padding, white background; left an illustration, right a 32px/700 duolingo-sans heading in `#4B4B4B`, a 17px/500/24px paragraph in `#777777` with inline links at 700 in `#1CB0F6`, then two stacked 330×50px buttons at 12px radius — green with a `#FFFFFF` label, then transparent with a `#1CB0F6` label.

## Similar Brands
- **Headspace** — flat vector characters on an undecorated ground, one saturated brand colour carrying every moment of emphasis.
- **Mailchimp** — illustration does the personality work while a single rounded workhorse sans handles headings, body and labels alike.
- **Monzo** — full-bleed plates of flat colour with hard edges, small confident radii and no shadow vocabulary.
- **Nintendo** — rounded display type at large scale in a saturated house colour, product shown as drawing rather than screenshot.
- **Slack's brand site** — a white canvas interrupted by colour bands, friendly geometry, type that stays warm at every size.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #FFFFFF;
  --color-green: #58CC02;
  --color-mint: #A5ED6E;
  --color-lime: #D7FFB8;
  --color-ink: #3C3C3C;
  --color-heading: #4B4B4B;
  --color-body: #777777;
  --color-muted: #AFAFAF;
  --color-hairline: #E5E5E5;
  --color-rule-ink: #808080;
  --color-blue: #1CB0F6;
  --color-teal: #00CD9C;
  --color-teal-wash: rgba(0, 205, 156, 0.1);
  --color-midnight: #100F3E;
  --color-super-ink: #000437;
  --color-navy: #042C60;
  --color-link-default: #0000EE;
  --color-root-ink: #000000;

  /* Typography — Families */
  --font-display: 'feather', 'Baloo 2', ui-rounded, sans-serif;
  --font-sans: 'duolingo-sans', 'Nunito', ui-rounded, sans-serif;
  --font-fallback: sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;       --leading-caption: 16px;
  --text-subtext: 14px;       --leading-subtext: 17px;
  --text-label: 15px;         --leading-label: normal;
  --text-link: 15px;          --leading-link: 22px;
  --text-eyebrow: 15px;       --leading-eyebrow: 20px;
  --text-utility: 15px;       --leading-utility: 17.25px;
  --text-button: 16px;        --leading-button: 44px;
  --text-eyebrow-sm: 16px;    --leading-eyebrow-sm: 16px;
  --text-body: 17px;          --leading-body: 24px;
  --text-column-head: 19px;   --leading-column-head: 26.6px;
  --text-body-lg: 20px;       --leading-body-lg: 28px;
  --text-accordion: 20px;     --leading-accordion: 24px;
  --text-card-label: 24px;    --leading-card-label: 28px;
  --text-heading-sm: 28px;    --leading-heading-sm: 32px;
  --text-heading-md: 32px;    --leading-heading-md: normal;
  --text-heading-lg: 40px;    --leading-heading-lg: 44px;
  --text-display: 48px;       --leading-display: normal;
  --text-display-xl: 64px;    --leading-display-xl: normal;
  --tracking-label: 0.8px;
  --tracking-button: 0.64px;
  --tracking-display-xl: -1.28px;

  /* Spacing */
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-70: 70px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-101: 101px;
  --spacing-120: 120px;
  --spacing-140: 140px;
  --spacing-185: 185px;
  --spacing-card: 28px 35px;

  /* Border Radius */
  --radius-control: 12px;
  --radius-card: 16px;
  --radius-band: 0px;

  /* Shadow */
  --shadow-wash: rgba(0, 205, 156, 0.1) 0px 0px 0px 1920px;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #FFFFFF;
  --color-green: #58CC02;
  --color-mint: #A5ED6E;
  --color-lime: #D7FFB8;
  --color-ink: #3C3C3C;
  --color-heading: #4B4B4B;
  --color-body: #777777;
  --color-muted: #AFAFAF;
  --color-hairline: #E5E5E5;
  --color-rule-ink: #808080;
  --color-blue: #1CB0F6;
  --color-teal: #00CD9C;
  --color-teal-wash: rgba(0, 205, 156, 0.1);
  --color-midnight: #100F3E;
  --color-super-ink: #000437;
  --color-navy: #042C60;
  --color-link-default: #0000EE;
  --color-root-ink: #000000;

  --font-display: 'feather', 'Baloo 2', ui-rounded, sans-serif;
  --font-sans: 'duolingo-sans', 'Nunito', ui-rounded, sans-serif;
  --font-fallback: sans-serif;

  --text-caption: 13px;
  --text-subtext: 14px;
  --text-label: 15px;
  --text-link: 15px;
  --text-eyebrow: 15px;
  --text-utility: 15px;
  --text-button: 16px;
  --text-eyebrow-sm: 16px;
  --text-body: 17px;
  --text-column-head: 19px;
  --text-body-lg: 20px;
  --text-accordion: 20px;
  --text-card-label: 24px;
  --text-heading-sm: 28px;
  --text-heading-md: 32px;
  --text-heading-lg: 40px;
  --text-display: 48px;
  --text-display-xl: 64px;

  --leading-caption: 16px;
  --leading-subtext: 17px;
  --leading-link: 22px;
  --leading-eyebrow: 20px;
  --leading-utility: 17.25px;
  --leading-button: 44px;
  --leading-eyebrow-sm: 16px;
  --leading-body: 24px;
  --leading-column-head: 26.6px;
  --leading-body-lg: 28px;
  --leading-accordion: 24px;
  --leading-card-label: 28px;
  --leading-heading-sm: 32px;
  --leading-heading-lg: 44px;

  --tracking-label: 0.8px;
  --tracking-button: 0.64px;
  --tracking-display-xl: -1.28px;

  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-70: 70px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-101: 101px;
  --spacing-120: 120px;
  --spacing-140: 140px;
  --spacing-185: 185px;

  --radius-control: 12px;
  --radius-card: 16px;
  --radius-band: 0px;

  --shadow-wash: rgba(0, 205, 156, 0.1) 0px 0px 0px 1920px;
}
```