Arc Design Tokens

Name: Dembrandt
Author: Dembrandt

Browser rethought around sidebar-first navigation

Sidebar-first navigation

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

#fffcec

#2702c2

#3139fb

#210784

#696969

#000000

primary#2702c2

background#fffcec

text#000000

logo#000000

Typography

Marlin Soft SQ, -apple-system, system-ui

hero:45.51px / 700

body:17px / 700

button:14px / 600

weights:600, 700

leading:1, 1.1, 1.4, 1.6

tracking:-0.02em, 0, 0.04em

Shadows

Spacing

2px3px4px8px16px20px

Border Radius

8px

10px

Borders

2px solid #3139fb

Links

Link text#000000 · no underline

Gradients

linear-gradient(135deg, #fffcec 0%, #000000 100%)

linear-gradient(90deg, #fffcec, #2702c2, #3139fb)

radial-gradient(circle at 30% 20%, #fffcec 0%, #2702c2 70%)

Opacity

0.04

0.08

0.16

0.4

0.64

0.92

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

Button label

11.21:1

AAA

Body text

20.39:1

AAA

Button States

PrimeReact

Default

#ffffff

Hover

#ffffff

Active

#ffffff

Focus

focus

Disabled

disabled

radius: 10pxpadding: 8px 0px

output.json

{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#fffcec"
    },
    "palette-2": {
      "$type": "color",
      "$value": "#2702c2"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#3139fb"
    },
    "palette-4": {
      "$type": "color",
      "$value": "#210784"
    },
    "palette-5": {
      "$type": "color",
      "$value": "#696969"
    },
    "palette-6": {
      "$type": "color",
      "$value": "#000000"
    },
    "primary": {
      "$type": "color",
      "$value": "#2702c2"
    },
    "background": {
      "$type": "color",
      "$value": "#fffcec"
    },
    "text": {
      "$type": "color",
      "$value": "#000000"
    },
    "logo": {
      "$type": "color",
      "$value": "#000000"
    },
    "link": {
      "$type": "color",
      "$value": "#000000"
    }
  },
  "border": {
    "border-1": {
      "$type": "border",
      "$value": "2px solid #3139fb"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "linear-gradient(135deg, #fffcec 0%, #000000 100%)"
    },
    "gradient-2": {
      "$type": "gradient",
      "$value": "linear-gradient(90deg, #fffcec, #2702c2, #3139fb)"
    },
    "gradient-3": {
      "$type": "gradient",
      "$value": "radial-gradient(circle at 30% 20%, #fffcec 0%, #2702c2 70%)"
    }
  },
  "fontFamily": {
    "base": {
      "$type": "fontFamily",
      "$value": "Marlin Soft SQ, -apple-system, system-ui"
    }
  },
  "fontWeight": {
    "weight-600": {
      "$type": "fontWeight",
      "$value": 600
    },
    "weight-700": {
      "$type": "fontWeight",
      "$value": 700
    }
  },
  "dimension": {
    "space-1": {
      "$type": "dimension",
      "$value": "2px"
    },
    "space-2": {
      "$type": "dimension",
      "$value": "3px"
    },
    "space-3": {
      "$type": "dimension",
      "$value": "4px"
    },
    "space-4": {
      "$type": "dimension",
      "$value": "8px"
    },
    "space-5": {
      "$type": "dimension",
      "$value": "16px"
    },
    "space-6": {
      "$type": "dimension",
      "$value": "20px"
    },
    "radius-1": {
      "$type": "dimension",
      "$value": "8px"
    },
    "radius-2": {
      "$type": "dimension",
      "$value": "10px"
    }
  },
  "shadow": {
    "shadow-1": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0.1) 0px 5px 5px 0px"
    },
    "shadow-2": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0.25) 0px 2px 8px 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": 11.21,
      "grade": "AAA"
    },
    "body-text": {
      "ratio": 20.39,
      "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 arc.net