Duolingo Design Tokens

Name: Dembrandt
Author: Dembrandt

Gamified language learning platform

Gamified progress UI

Stripe Linear Notion OpenAI Tesla Airbnb Figma Slack Uber Apple Raycast Krea AI Family Oura Nike Duolingo Arc Perplexity AI Anthropic Vercel Cursor

Observed with Dembrandt. Semantic roles, gradients, and breakpoints come from live extractions where available; contrast is computed from the real palette. Try the CLI for the complete W3C token export.

Design tokens observed from publicly visible CSS. Dembrandt does not host, copy, or redistribute any brand assets.

Colors

#58cc02

#a5ed6e

#1cb0f6

#d7ffb8

#3c3c3c

#ffffff

primary#58cc02

background#ffffff

text#3c3c3c

accent#1cb0f6

Typography

duolingo-sans, feather

hero:64px / 700

body:17px / 500

button:15px / 700

weights:500, 700

leading:1, 1.1, 1.4, 1.6

tracking:-0.02em, 0, 0.04em

Shadows

Spacing

1px8px9.5px10px12px13px

Border Radius

12px

Borders

1px solid #c1c1c1

2px inset #3c3c3c

Links

Link text#0000ee · no underline · hover #565656

Gradients

linear-gradient(135deg, #58cc02 0%, #ffffff 100%)

linear-gradient(90deg, #58cc02, #a5ed6e, #1cb0f6)

radial-gradient(circle at 30% 20%, #58cc02 0%, #a5ed6e 70%)

Opacity

0.04

0.08

0.16

0.4

0.64

0.92

Breakpoints

400px600px1024px1280px

Motion

Duration120ms180ms280ms420ms

Easingcubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.16, 1, 0.3, 1)linear

Contrast · WCAG 2.2

Button label

2.44:1

Fail

Body text

11.03:1

AAA

Button States

Quasar

Default

#1cb0f6

Hover

#1eaedb

Active

#1cb0f6

Focus

focus

Disabled

disabled

radius: 12pxpadding: 13px 16px

output.json

{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#58cc02"
    },
    "palette-2": {
      "$type": "color",
      "$value": "#a5ed6e"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#1cb0f6"
    },
    "palette-4": {
      "$type": "color",
      "$value": "#d7ffb8"
    },
    "palette-5": {
      "$type": "color",
      "$value": "#3c3c3c"
    },
    "palette-6": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "primary": {
      "$type": "color",
      "$value": "#58cc02"
    },
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "text": {
      "$type": "color",
      "$value": "#3c3c3c"
    },
    "accent": {
      "$type": "color",
      "$value": "#1cb0f6"
    },
    "link": {
      "$type": "color",
      "$value": "#0000ee"
    }
  },
  "border": {
    "border-1": {
      "$type": "border",
      "$value": "1px solid #c1c1c1"
    },
    "border-2": {
      "$type": "border",
      "$value": "2px inset #3c3c3c"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "linear-gradient(135deg, #58cc02 0%, #ffffff 100%)"
    },
    "gradient-2": {
      "$type": "gradient",
      "$value": "linear-gradient(90deg, #58cc02, #a5ed6e, #1cb0f6)"
    },
    "gradient-3": {
      "$type": "gradient",
      "$value": "radial-gradient(circle at 30% 20%, #58cc02 0%, #a5ed6e 70%)"
    }
  },
  "fontFamily": {
    "base": {
      "$type": "fontFamily",
      "$value": "duolingo-sans, feather"
    }
  },
  "fontWeight": {
    "weight-500": {
      "$type": "fontWeight",
      "$value": 500
    },
    "weight-700": {
      "$type": "fontWeight",
      "$value": 700
    }
  },
  "dimension": {
    "space-1": {
      "$type": "dimension",
      "$value": "1px"
    },
    "space-2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "space-3": {
      "$type": "dimension",
      "$value": "9.5px"
    },
    "space-4": {
      "$type": "dimension",
      "$value": "10px"
    },
    "space-5": {
      "$type": "dimension",
      "$value": "12px"
    },
    "space-6": {
      "$type": "dimension",
      "$value": "13px"
    },
    "radius-1": {
      "$type": "dimension",
      "$value": "12px"
    }
  },
  "shadow": {
    "shadow-1": {
      "$type": "shadow",
      "$value": "rgb(128, 128, 128) 0px 0px 5px 0px"
    }
  },
  "opacity": {
    "opacity-0": {
      "$type": "number",
      "$value": 0
    },
    "opacity-1": {
      "$type": "number",
      "$value": 0.04
    },
    "opacity-2": {
      "$type": "number",
      "$value": 0.08
    },
    "opacity-3": {
      "$type": "number",
      "$value": 0.16
    },
    "opacity-4": {
      "$type": "number",
      "$value": 0.4
    },
    "opacity-5": {
      "$type": "number",
      "$value": 0.64
    },
    "opacity-6": {
      "$type": "number",
      "$value": 0.92
    },
    "opacity-7": {
      "$type": "number",
      "$value": 1
    }
  },
  "duration": {
    "duration-1": {
      "$type": "duration",
      "$value": "120ms"
    },
    "duration-2": {
      "$type": "duration",
      "$value": "180ms"
    },
    "duration-3": {
      "$type": "duration",
      "$value": "280ms"
    },
    "duration-4": {
      "$type": "duration",
      "$value": "420ms"
    }
  },
  "cubicBezier": {
    "ease-1": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.4, 0, 0.2, 1)"
    },
    "ease-2": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.16, 1, 0.3, 1)"
    },
    "ease-3": {
      "$type": "cubicBezier",
      "$value": "linear"
    }
  },
  "breakpoint": {
    "bp-1": {
      "$type": "dimension",
      "$value": "400px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "600px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "1024px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "1280px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 2.44,
      "grade": "Fail"
    },
    "body-text": {
      "ratio": 11.03,
      "grade": "AAA"
    }
  }
}
// ...and more

Other token exports

--dtcgW3C token JSON, checked by the DTCG Validator

--design-mdDESIGN.md for agents and docs

--brand-guideBrand guide PDF

--wcagPalette-wide contrast report

All flags in the CLI quickstart. Same tokens in your editor via the MCP server.

$npx dembrandt duolingo.com