Arc Design Tokens
Browser rethought around sidebar-first navigation
Sidebar-first navigation
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
sm
md
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
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
11.21:1
Aa
Body text
20.39:1
Button States
PrimeReactDefault
#ffffffHover
#ffffffActive
#ffffffFocus
focusDisabled
disabledLoading
loadingradius: 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 moreOther 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