Duolingo

---
version: alpha
name: "Duolingo Light"
description: "Typography baseline relies on duolingo-sans for primary hero headline — 'the free, fun, and effective way to learn a language!'."
colors:
  pale-green-tint: "#d7ffb8"
  surface-white: "#ffffff"
  brand-green: "#58cc02"
  light-green-tint: "#a5ed6e"
  muted-text: "#4b4b4b"
  primary-text: "#3c3c3c"
  secondary-text: "#777777"
  sky-blue: "#1cb0f6"
  border-subtle: "#e5e5e5"
  disabled-placeholder: "#afafaf"
typography:
  hero-heading:
    fontFamily: "duolingo-sans"
    fontSize: "32px"
    fontWeight: "700"
  body-default:
    fontFamily: "duolingo-sans"
    fontSize: "17px"
    fontWeight: "500"
    lineHeight: "20px"
  button-label:
    fontFamily: "duolingo-sans"
    fontSize: "15px"
    fontWeight: "700"
    lineHeight: "20px"
    letterSpacing: "0.8px"
  small-label:
    fontFamily: "duolingo-sans"
    fontSize: "13px"
    fontWeight: "700"
    lineHeight: "16px"
  subheading:
    fontFamily: "duolingo-sans"
    fontSize: "19px"
    fontWeight: "700"
    lineHeight: "26.6px"
  nav-link:
    fontFamily: "duolingo-sans"
    fontSize: "17px"
    fontWeight: "500"
    lineHeight: "24px"
  icon-font:
    fontFamily: "feather"
    fontSize: "48px"
    fontWeight: "700"
rounded:
  button: "12px"
  badge: "2px"
spacing:
  xs: "8px"
  sm: "10px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "40px"
  3xl: "48px"
  4xl: "64px"
  5xl: "96px"
  section: "146px"
---

## Overview

Typography baseline relies on duolingo-sans for primary hero headline — 'the free, fun, and effective way to learn a language!'.

This system uses a 8px base grid with scale values 8, 10, 12, 16, 24, 32, 40, 48, 64, 96, 146.

**Signature traits:**
- Core token rhythm: Token evidence indicates consistent color, spacing, and radius rhythm across visible UI.

## Colors

The palette uses 10 validated color tokens across 1 theme profile. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **action-text** maps to `brand-green`: Role "text" is grounded by usage context "Primary CTA button fill (GET STARTED), logo accent, key interactive elements".
- **action-background** maps to `surface-white`: Role "background" is grounded by usage context "Page background, button text on green CTA, card surfaces".
- **content-text** maps to `primary-text`: Role "text" is grounded by usage context "Body text, navigation labels, footer text — dominant text color across the page".
- **action-border** maps to `disabled-placeholder`: Role "border" is grounded by usage context "Disabled button text, placeholder states, inactive carousel arrows".

### Text Scale
- **Brand Green** (#58cc02): Primary CTA button fill (GET STARTED), logo accent, key interactive elements. Role: text. {authored: rgb(88, 204, 2), space: rgb}
- **Light Green Tint** (#a5ed6e): Button hover states, progress indicators, secondary green accents. Role: text. {authored: rgb(165, 237, 110), space: rgb}
- **Muted Text** (#4b4b4b): Heading text (h1), slightly lighter than primary body text. Role: text. {authored: rgb(75, 75, 75), space: rgb}
- **Primary Text** (#3c3c3c): Body text, navigation labels, footer text — dominant text color across the page. Role: text. {authored: rgb(60, 60, 60), space: rgb}
- **Secondary Text** (#777777): Subdued labels, footer links, secondary navigation items. Role: text. {authored: rgb(119, 119, 119), space: rgb}
- **Sky Blue** (#1cb0f6): Secondary button text (I ALREADY HAVE AN ACCOUNT), link accents, macaw color token. Role: text. {authored: rgb(28, 176, 246), space: rgb}

### Interactive
- **Border Subtle** (#e5e5e5): Hairline dividers, card outlines, subtle separators. Role: border. {authored: rgb(229, 229, 229) rgb(60, 60, 60), space: rgb}
- **Disabled / Placeholder** (#afafaf): Disabled button text, placeholder states, inactive carousel arrows. Role: border. {authored: rgb(175, 175, 175), space: rgb}

### Surface & Shadows
- **Pale Green Tint** (#d7ffb8): Light green background tints for progress/streak panels. Role: background. {authored: rgb(215, 255, 184), space: rgb}
- **Surface White** (#ffffff): Page background, button text on green CTA, card surfaces. Role: background. {authored: rgb(255, 255, 255), space: rgb}

## Typography

Typography uses duolingo-sans, feather across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes duolingo-sans and feather for visual contrast. Weight range spans bold, medium. Sizes range from 13px to 48px.

### Font Roles
- **Headline Font**: duolingo-sans
- **Body Font**: duolingo-sans

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Primary hero headline — 'The free, fun, and effective way to learn a language!' | duolingo-sans | 32px | 700 | normal | normal | duolingo-sans, sans-serif | Extracted token |
| Primary body text, navigation items, general UI text — most frequent tuple | duolingo-sans | 17px | 500 | 20px | normal | duolingo-sans, sans-serif | Extracted token |
| CTA button labels, uppercase-tracked interactive labels (GET STARTED, I ALREADY HAVE AN ACCOUNT) | duolingo-sans | 15px | 700 | 20px | 0.8px | duolingo-sans, sans-serif | Extracted token |
| Small UI labels, badges, language carousel items | duolingo-sans | 13px | 700 | 16px | normal | duolingo-sans, sans-serif | Extracted token |
| Section subheadings, feature callouts | duolingo-sans | 19px | 700 | 26.6px | normal | duolingo-sans, sans-serif | Extracted token |
| Navigation links, footer links | duolingo-sans | 17px | 500 | 24px | normal | duolingo-sans, sans-serif | Extracted token |
| Icon glyphs (carousel arrows, UI icons) | feather | 48px | 700 | normal | normal | feather, sans-serif | Extracted token |

## Layout

Responsive system uses 3 breakpoint tier(s): mobile, tablet, desktop.

### Responsive Strategy
- **mobile (400-896px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **tablet (769-1023px)**: Increase spacing and column structure for medium-width viewports.
- **desktop (>= 1024px)**: Expand layout density and horizontal composition for wide viewports.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| xs | 8px | 8 | Extracted spacing token |
| sm | 10px | 10 | Extracted spacing token |
| md | 12px | 12 | Extracted spacing token |
| base | 16px | 16 | Extracted spacing token |
| lg | 24px | 24 | Extracted spacing token |
| xl | 32px | 32 | Extracted spacing token |
| 2xl | 40px | 40 | Extracted spacing token |
| 3xl | 48px | 48 | Extracted spacing token |
| 4xl | 64px | 64 | Extracted spacing token |
| 5xl | 96px | 96 | Extracted spacing token |
| section | 146px | 146 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| badge-glow | 1 | 0px 0px 5px 0px rgb(128, 128, 128) |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | outline-color | rgb(60, 60, 60) ; rgb(119, 119, 119) ; rgb(165, 237, 110) |
| Light | outline-width | 3px |
| Light | outline-offset | 0px |
| Light | transform | matrix(1, 0, 0, 1, 0, 0) ; matrix(1, 0, 0, 1, 540, 540) ; matrix(1, 0, 0, 1, 590, 590) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| badge | 2px | 2 | Hairline corner |
| button | 12px | 12 | Control corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| button | 12px | px |
| badge | 2px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Core token rhythm without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 425px | only screen and (max-width: 425px) |
| Mobile | <= 530px | only screen and (max-width: 530px) |
| Mobile | <= 600px | only screen and (max-width: 600px) |
| Mobile | >= 400px | (min-width: 400px) |
| Mobile | 425-550px | only screen and (min-width: 425px) and (max-width: 550px) |
| Mobile | 426-896px | only screen and (min-width: 426px) and (max-width: 896px) |
| Mobile | >= 550px | (min-width: 550px) |
| Tablet | >= 769px | only screen and (min-width: 769px) |
| Tablet | >= 890px | only screen and (min-width: 890px) |
| Tablet | >= 896px | (min-width: 896px) |
| Tablet | 897-1023px | only screen and (min-width: 897px) and (max-width: 1023px) |
| Tablet | >= 897px | (min-width: 897px) |
| Desktop | >= 1024px | (min-width: 1024px) |
| Desktop | >= 1280px | only screen and (min-width: 1280px) |
| Breakpoint 15 | Unknown | screen and (-ms-high-contrast:active) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.