Oura Design Tokens

Name: Dembrandt
Author: Dembrandt

Smart ring for sleep and health tracking

Biometric data visualization

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

#f7f1e8

#000000

#4a4741

#a8a5a0

#5b6550

#8c8b88

primary#f7f1e8

background#ffffff

text#000000

logo#4a4741

Typography

AkkuratLL

hero:96px / 500

body:16px / 400

button:16px / 400

weights:400, 500

leading:1, 1.1, 1.4, 1.6

tracking:-0.02em, 0, 0.04em

Shadows

Spacing

1px5px8px10px11.2px12px

Border Radius

1px

2px

4px

8px

12px

Borders

1px solid #2a72de

1px solid #d3d1ce

Links · Inputs

Link text#000000 · no underline

Input value#4a4741 · r 12px

Gradients

radial-gradient(circle at 20% 20%, #eadccf 0px, rgba(0, 0, 0, 0) 20%)

radial-gradient(circle at 0% 40%, rgba(182, 207, 221, 0.5) 0px, rgba(0, 0, 0, 0) 20%)

Opacity

0.04

0.08

0.16

0.4

0.64

0.92

Breakpoints

320px480px600px768px1024px1280px

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

3.42:1

AA Large

Body text

18.70:1

AAA

Button States

Tailwind CSS

Default

#f7f1e8

Hover

#1eaedb

Active

#f7f1e8

Focus

focus

Disabled

disabled

radius: 9999pxpadding: 16px 12px

output.json

{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#f7f1e8"
    },
    "palette-2": {
      "$type": "color",
      "$value": "#000000"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#4a4741"
    },
    "palette-4": {
      "$type": "color",
      "$value": "#a8a5a0"
    },
    "palette-5": {
      "$type": "color",
      "$value": "#5b6550"
    },
    "palette-6": {
      "$type": "color",
      "$value": "#8c8b88"
    },
    "primary": {
      "$type": "color",
      "$value": "#f7f1e8"
    },
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "text": {
      "$type": "color",
      "$value": "#000000"
    },
    "logo": {
      "$type": "color",
      "$value": "#4a4741"
    },
    "link": {
      "$type": "color",
      "$value": "#000000"
    }
  },
  "border": {
    "border-1": {
      "$type": "border",
      "$value": "1px solid #2a72de"
    },
    "border-2": {
      "$type": "border",
      "$value": "1px solid #d3d1ce"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "radial-gradient(circle at 20% 20%, #eadccf 0px, rgba(0, 0, 0, 0) 20%)"
    },
    "gradient-2": {
      "$type": "gradient",
      "$value": "radial-gradient(circle at 0% 40%, rgba(182, 207, 221, 0.5) 0px, rgba(0, 0, 0, 0) 20%)"
    }
  },
  "fontFamily": {
    "base": {
      "$type": "fontFamily",
      "$value": "AkkuratLL"
    }
  },
  "fontWeight": {
    "weight-400": {
      "$type": "fontWeight",
      "$value": 400
    },
    "weight-500": {
      "$type": "fontWeight",
      "$value": 500
    }
  },
  "dimension": {
    "space-1": {
      "$type": "dimension",
      "$value": "1px"
    },
    "space-2": {
      "$type": "dimension",
      "$value": "5px"
    },
    "space-3": {
      "$type": "dimension",
      "$value": "8px"
    },
    "space-4": {
      "$type": "dimension",
      "$value": "10px"
    },
    "space-5": {
      "$type": "dimension",
      "$value": "11.2px"
    },
    "space-6": {
      "$type": "dimension",
      "$value": "12px"
    },
    "radius-1": {
      "$type": "dimension",
      "$value": "1px"
    },
    "radius-2": {
      "$type": "dimension",
      "$value": "2px"
    },
    "radius-3": {
      "$type": "dimension",
      "$value": "4px"
    },
    "radius-4": {
      "$type": "dimension",
      "$value": "8px"
    },
    "radius-5": {
      "$type": "dimension",
      "$value": "12px"
    }
  },
  "shadow": {
    "shadow-1": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0.25) 0px 25px 50px -12px"
    },
    "shadow-2": {
      "$type": "shadow",
      "$value": "rgba(255, 255, 255, 0.06) 0px 1px 0px 0px inset"
    },
    "shadow-3": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0.2) 0px 0px 18px 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": "320px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "480px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "600px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "768px"
    },
    "bp-5": {
      "$type": "dimension",
      "$value": "1024px"
    },
    "bp-6": {
      "$type": "dimension",
      "$value": "1280px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 3.42,
      "grade": "AA Large"
    },
    "body-text": {
      "ratio": 18.7,
      "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 ouraring.com