Skip to main content

Duolingo Design Tokens

Gamified language learning platform

Gamified progress UI

StripeLinearNotionOpenAITeslaAirbnbFigmaSlackUberAppleRaycastKrea AIFamilyOuraNikeDuolingoArcPerplexity AIAnthropicVercelCursor

Observed with Dembrandt. Contrast and gradients are 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

#3c3c3c

Typography

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

sm

Spacing

1px8px9.5px10px12px13px

Border Radius

12px

Opacity

0
0.04
0.08
0.16
0.4
0.64
0.92
1

Breakpoints

480px640px768px1024px1280px1536px

Motion

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

Contrast · WCAG 2.2

Aa

Button label

2.44:1

Fail
Aa

Body text

1.00:1

Fail

Button States

Quasar
Default
#1cb0f6
Hover
#1eaedb
Active
#1cb0f6
Focus
focus
Disabled
disabled
Loading
loading
radius: 12pxpadding: 13px 16px
output.json
{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#3c3c3c"
    }
  },
  "gradient": {},
  "fontFamily": {
    "base": {
      "$type": "fontFamily",
      "$value": "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": "480px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "640px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "768px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "1024px"
    },
    "bp-5": {
      "$type": "dimension",
      "$value": "1280px"
    },
    "bp-6": {
      "$type": "dimension",
      "$value": "1536px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 2.44,
      "grade": "Fail"
    },
    "body-text": {
      "ratio": 1,
      "grade": "Fail"
    }
  }
}
// ...and more

Other token exports

The JSON above is one of several output formats. The same extraction can produce:

  • --dtcgW3C Design Tokens format. Validate any DTCG file with the DTCG Validator.
  • --design-mdA readable DESIGN.md summary for agents and docs. More on its limits in DESIGN.md is a good idea with a low ceiling.
  • --brand-guideA brand guide PDF generated from the live URL.
  • --wcagA full WCAG contrast report across the palette, the same grades shown above. Why it matters in catching token drift.

See every flag in the CLI quickstart, or pull tokens straight into your editor with the Dembrandt MCP server.

$npx dembrandt duolingo.com