Linear Design Tokens

Name: Dembrandt
Author: Dembrandt

Issue tracking and project management tool

Frosted glass effects

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

#08090a

#5e6ad2

#62666d

#8a8f98

#eb5757

#f7f8f8

primary#5e6ad2

background#08090a

text#f7f8f8

logo#f7f8f8

Typography

Inter Variable, Berkeley Mono, sans-serif

hero:72px / 510

body:17px / 400

button:14px / 500

weights:400, 500, 510

leading:1, 1.1, 1.4, 1.6

tracking:-0.02em, 0, 0.04em

Shadows

Spacing

4px8px12px16px24px32px

Border Radius

6px

8px

12px

Borders

1px solid rgba(255, 255, 255, 0.05)

1px solid rgba(255, 255, 255, 0.08)

Links · Inputs

Link text#ffffff · no underline

Input valuergba(255, 255, 255, 0.02) · r 6px

Gradients

radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 50%)

radial-gradient(52.53% 57.5% at 50% 100%, rgba(8, 9, 10, 0) 0%, rgba(8, 9, 10, 0.5) 100%)

Opacity

0.04

0.08

0.16

0.4

0.64

0.92

Breakpoints

600px640px768px1024px1280px

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

4.70:1

Body text

18.73:1

AAA

Button States

React + Next.js

Default

#5e6ad2

Hover

#6e7ae2

Active

#4e5ac2

Focus

focus

Disabled

disabled

radius: 6pxpadding: 8px 16px

output.json

{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#08090a"
    },
    "palette-2": {
      "$type": "color",
      "$value": "#5e6ad2"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#62666d"
    },
    "palette-4": {
      "$type": "color",
      "$value": "#8a8f98"
    },
    "palette-5": {
      "$type": "color",
      "$value": "#eb5757"
    },
    "palette-6": {
      "$type": "color",
      "$value": "#f7f8f8"
    },
    "primary": {
      "$type": "color",
      "$value": "#5e6ad2"
    },
    "background": {
      "$type": "color",
      "$value": "#08090a"
    },
    "text": {
      "$type": "color",
      "$value": "#f7f8f8"
    },
    "logo": {
      "$type": "color",
      "$value": "#f7f8f8"
    },
    "link": {
      "$type": "color",
      "$value": "#ffffff"
    }
  },
  "border": {
    "border-1": {
      "$type": "border",
      "$value": "1px solid rgba(255, 255, 255, 0.05)"
    },
    "border-2": {
      "$type": "border",
      "$value": "1px solid rgba(255, 255, 255, 0.08)"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 50%)"
    },
    "gradient-2": {
      "$type": "gradient",
      "$value": "radial-gradient(52.53% 57.5% at 50% 100%, rgba(8, 9, 10, 0) 0%, rgba(8, 9, 10, 0.5) 100%)"
    }
  },
  "fontFamily": {
    "base": {
      "$type": "fontFamily",
      "$value": "Inter Variable, Berkeley Mono, sans-serif"
    }
  },
  "fontWeight": {
    "weight-400": {
      "$type": "fontWeight",
      "$value": 400
    },
    "weight-500": {
      "$type": "fontWeight",
      "$value": 500
    },
    "weight-510": {
      "$type": "fontWeight",
      "$value": 510
    }
  },
  "dimension": {
    "space-1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "space-2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "space-3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "space-4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "space-5": {
      "$type": "dimension",
      "$value": "24px"
    },
    "space-6": {
      "$type": "dimension",
      "$value": "32px"
    },
    "radius-1": {
      "$type": "dimension",
      "$value": "6px"
    },
    "radius-2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "radius-3": {
      "$type": "dimension",
      "$value": "12px"
    }
  },
  "shadow": {
    "shadow-1": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.1)"
    },
    "shadow-2": {
      "$type": "shadow",
      "$value": "0 4px 16px rgba(94,106,210,0.2)"
    },
    "shadow-3": {
      "$type": "shadow",
      "$value": "0 16px 32px rgba(0,0,0,0.25)"
    }
  },
  "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": "600px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "640px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "768px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "1024px"
    },
    "bp-5": {
      "$type": "dimension",
      "$value": "1280px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 4.7,
      "grade": "AA"
    },
    "body-text": {
      "ratio": 18.73,
      "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 linear.app