Perplexity AI Design Tokens
AI-powered answer engine with citations
AI answer UI with citations
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
#000000
#27251e
#271a00
#fcfcf9
#fdfbfa
background#fcfcf9
text#000000
logo#27251e
Typography
pplxSans, ui-sans-serif, system-ui
hero:16px / 400
body:16px / 400
button:16px / 400
weights:400
leading:1, 1.1, 1.4, 1.6
tracking:-0.02em, 0, 0.04em
Shadows
sm
Spacing
1px2px4px8px12px16px
Border Radius
6px
8px
12px
16px
9999px
Borders
1px solid rgba(39, 26, 0, 0.14)
1px solid rgba(39, 26, 0, 0.07)
Links
Link text#000000 · no underline
Gradients
linear-gradient(#faf8f5, rgba(0, 0, 0, 0))
radial-gradient(110.21% 173.1% at 0% -79.81%, rgba(61, 149, 149, 0.1) 0%, rgba(61, 149, 149, 0) 100%)
Opacity
0
0.04
0.08
0.16
0.4
0.64
0.92
1
Breakpoints
640px768px970px1024px1280px1536px
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
21.00:1
Aa
Body text
20.43:1
Button States
Tailwind CSSDefault
#000000Hover
#000000Active
#000000Focus
focusDisabled
disabledLoading
loadingradius: 9999pxpadding: 0px 12px
output.json
{
"$schema": "https://design-tokens.org/schema.json",
"color": {
"palette-1": {
"$type": "color",
"$value": "#000000"
},
"palette-2": {
"$type": "color",
"$value": "#27251e"
},
"palette-3": {
"$type": "color",
"$value": "#271a00"
},
"palette-4": {
"$type": "color",
"$value": "#fcfcf9"
},
"palette-5": {
"$type": "color",
"$value": "#fdfbfa"
},
"background": {
"$type": "color",
"$value": "#fcfcf9"
},
"text": {
"$type": "color",
"$value": "#000000"
},
"logo": {
"$type": "color",
"$value": "#27251e"
},
"link": {
"$type": "color",
"$value": "#000000"
}
},
"border": {
"border-1": {
"$type": "border",
"$value": "1px solid rgba(39, 26, 0, 0.14)"
},
"border-2": {
"$type": "border",
"$value": "1px solid rgba(39, 26, 0, 0.07)"
}
},
"gradient": {
"gradient-1": {
"$type": "gradient",
"$value": "linear-gradient(#faf8f5, rgba(0, 0, 0, 0))"
},
"gradient-2": {
"$type": "gradient",
"$value": "radial-gradient(110.21% 173.1% at 0% -79.81%, rgba(61, 149, 149, 0.1) 0%, rgba(61, 149, 149, 0) 100%)"
}
},
"fontFamily": {
"base": {
"$type": "fontFamily",
"$value": "pplxSans, ui-sans-serif, system-ui"
}
},
"fontWeight": {
"weight-400": {
"$type": "fontWeight",
"$value": 400
}
},
"dimension": {
"space-1": {
"$type": "dimension",
"$value": "1px"
},
"space-2": {
"$type": "dimension",
"$value": "2px"
},
"space-3": {
"$type": "dimension",
"$value": "4px"
},
"space-4": {
"$type": "dimension",
"$value": "8px"
},
"space-5": {
"$type": "dimension",
"$value": "12px"
},
"space-6": {
"$type": "dimension",
"$value": "16px"
},
"radius-1": {
"$type": "dimension",
"$value": "6px"
},
"radius-2": {
"$type": "dimension",
"$value": "8px"
},
"radius-3": {
"$type": "dimension",
"$value": "12px"
},
"radius-4": {
"$type": "dimension",
"$value": "16px"
},
"radius-5": {
"$type": "dimension",
"$value": "9999px"
}
},
"shadow": {
"shadow-1": {
"$type": "shadow",
"$value": "rgba(0, 0, 0, 0.05) 0px 1px 2px 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": "640px"
},
"bp-2": {
"$type": "dimension",
"$value": "768px"
},
"bp-3": {
"$type": "dimension",
"$value": "970px"
},
"bp-4": {
"$type": "dimension",
"$value": "1024px"
},
"bp-5": {
"$type": "dimension",
"$value": "1280px"
},
"bp-6": {
"$type": "dimension",
"$value": "1536px"
}
},
"contrast": {
"button-label": {
"ratio": 21,
"grade": "AAA"
},
"body-text": {
"ratio": 20.43,
"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 perplexity.ai