---
name: "Duolingo"
mode: "light"
---
# Duolingo
## Visual theme and atmosphere
Storybook, gamified, pill-shaped, and mascot-friendly.
Playful classroom mascot on white paper — sticker-like buttons with thick borders.
## Color palette and roles
- **Eager Green (#58cc02)**: Primary brand — headings, CTA fills, footer band.
- **Spark Blue (#1cb0f6)**: Interactive links and outlined secondary CTAs.
- **Charcoal (#4b4b4b)**: Hero headings and primary body copy.
- **Pencil Gray (#777777)**: Muted body paragraphs.
- **Paper White (#ffffff)**: Page canvas and card surfaces.
## Typography rules
- **Display**: feather, 700, 64px. Display headlines — rounded brand face.
- **Body**: duolingo-sans, 500, 17px. Body paragraphs and nav links.
- **Label**: duolingo-sans, 700, 15px. Uppercase nav labels with wide tracking.
## Spacing and shape
- Base unit: 4px.
- Default gap: 12px.
- Card padding: 24px.
- Section padding: 120px.
- Card corners: 12px.
- Control corners: 12px.
- Pills: 9999px.
## Motion
Use expressive motion. Fast feedback lasts 120ms; composed transitions last 400ms; easing is cubic-bezier(0.22, 1, 0.36, 1).
## Guardrails
- Set display headlines at 48-64px in feather 700 with -0.02em letter-spacing.
- Give every button a 12px radius with 2px solid border.
- Keep body text in #777777 so colored elements can lead.
- Do not use feather below 48px — it is display-only.
---
name: "Duolingo"
mode: "light"
---
# Duolingo
## Visual theme and atmosphere
Storybook, gamified, pill-shaped, and mascot-friendly.
Playful classroom mascot on white paper — sticker-like buttons with thick borders.
## Color palette and roles
- **Eager Green (#58cc02)**: Primary brand — headings, CTA fills, footer band.
- **Spark Blue (#1cb0f6)**: Interactive links and outlined secondary CTAs.
- **Charcoal (#4b4b4b)**: Hero headings and primary body copy.
- **Pencil Gray (#777777)**: Muted body paragraphs.
- **Paper White (#ffffff)**: Page canvas and card surfaces.
## Typography rules
- **Display**: feather, 700, 64px. Display headlines — rounded brand face.
- **Body**: duolingo-sans, 500, 17px. Body paragraphs and nav links.
- **Label**: duolingo-sans, 700, 15px. Uppercase nav labels with wide tracking.
## Spacing and shape
- Base unit: 4px.
- Default gap: 12px.
- Card padding: 24px.
- Section padding: 120px.
- Card corners: 12px.
- Control corners: 12px.
- Pills: 9999px.
## Motion
Use expressive motion. Fast feedback lasts 120ms; composed transitions last 400ms; easing is cubic-bezier(0.22, 1, 0.36, 1).
## Guardrails
- Set display headlines at 48-64px in feather 700 with -0.02em letter-spacing.
- Give every button a 12px radius with 2px solid border.
- Keep body text in #777777 so colored elements can lead.
- Do not use feather below 48px — it is display-only.
---
name: "Duolingo"
mode: "light"
---
# Duolingo
## Visual theme and atmosphere
Storybook, gamified, pill-shaped, and mascot-friendly.
Playful classroom mascot on white paper — sticker-like buttons with thick borders.
## Color palette and roles
- **Eager Green (#58cc02)**: Primary brand — headings, CTA fills, footer band.
- **Spark Blue (#1cb0f6)**: Interactive links and outlined secondary CTAs.
- **Charcoal (#4b4b4b)**: Hero headings and primary body copy.
- **Pencil Gray (#777777)**: Muted body paragraphs.
- **Paper White (#ffffff)**: Page canvas and card surfaces.
## Typography rules
- **Display**: feather, 700, 64px. Display headlines — rounded brand face.
- **Body**: duolingo-sans, 500, 17px. Body paragraphs and nav links.
- **Label**: duolingo-sans, 700, 15px. Uppercase nav labels with wide tracking.
## Spacing and shape
- Base unit: 4px.
- Default gap: 12px.
- Card padding: 24px.
- Section padding: 120px.
- Card corners: 12px.
- Control corners: 12px.
- Pills: 9999px.
## Motion
Use expressive motion. Fast feedback lasts 120ms; composed transitions last 400ms; easing is cubic-bezier(0.22, 1, 0.36, 1).
## Guardrails
- Set display headlines at 48-64px in feather 700 with -0.02em letter-spacing.
- Give every button a 12px radius with 2px solid border.
- Keep body text in #777777 so colored elements can lead.
- Do not use feather below 48px — it is display-only.
---
name: "Duolingo"
mode: "light"
---
# Duolingo
## Visual theme and atmosphere
Storybook, gamified, pill-shaped, and mascot-friendly.
Playful classroom mascot on white paper — sticker-like buttons with thick borders.
## Color palette and roles
- **Eager Green (#58cc02)**: Primary brand — headings, CTA fills, footer band.
- **Spark Blue (#1cb0f6)**: Interactive links and outlined secondary CTAs.
- **Charcoal (#4b4b4b)**: Hero headings and primary body copy.
- **Pencil Gray (#777777)**: Muted body paragraphs.
- **Paper White (#ffffff)**: Page canvas and card surfaces.
## Typography rules
- **Display**: feather, 700, 64px. Display headlines — rounded brand face.
- **Body**: duolingo-sans, 500, 17px. Body paragraphs and nav links.
- **Label**: duolingo-sans, 700, 15px. Uppercase nav labels with wide tracking.
## Spacing and shape
- Base unit: 4px.
- Default gap: 12px.
- Card padding: 24px.
- Section padding: 120px.
- Card corners: 12px.
- Control corners: 12px.
- Pills: 9999px.
## Motion
Use expressive motion. Fast feedback lasts 120ms; composed transitions last 400ms; easing is cubic-bezier(0.22, 1, 0.36, 1).
## Guardrails
- Set display headlines at 48-64px in feather 700 with -0.02em letter-spacing.
- Give every button a 12px radius with 2px solid border.
- Keep body text in #777777 so colored elements can lead.
- Do not use feather below 48px — it is display-only.
---
name: "Duolingo"
mode: "light"
---
# Duolingo
## Visual theme and atmosphere
Storybook, gamified, pill-shaped, and mascot-friendly.
Playful classroom mascot on white paper — sticker-like buttons with thick borders.
## Color palette and roles
- **Eager Green (#58cc02)**: Primary brand — headings, CTA fills, footer band.
- **Spark Blue (#1cb0f6)**: Interactive links and outlined secondary CTAs.
- **Charcoal (#4b4b4b)**: Hero headings and primary body copy.
- **Pencil Gray (#777777)**: Muted body paragraphs.
- **Paper White (#ffffff)**: Page canvas and card surfaces.
## Typography rules
- **Display**: feather, 700, 64px. Display headlines — rounded brand face.
- **Body**: duolingo-sans, 500, 17px. Body paragraphs and nav links.
- **Label**: duolingo-sans, 700, 15px. Uppercase nav labels with wide tracking.
## Spacing and shape
- Base unit: 4px.
- Default gap: 12px.
- Card padding: 24px.
- Section padding: 120px.
- Card corners: 12px.
- Control corners: 12px.
- Pills: 9999px.
## Motion
Use expressive motion. Fast feedback lasts 120ms; composed transitions last 400ms; easing is cubic-bezier(0.22, 1, 0.36, 1).
## Guardrails
- Set display headlines at 48-64px in feather 700 with -0.02em letter-spacing.
- Give every button a 12px radius with 2px solid border.
- Keep body text in #777777 so colored elements can lead.
- Do not use feather below 48px — it is display-only.
