Loading...
Tokens
Design Tokens
CSS custom properties registered as Tailwind utilities. All respond to color mode and active theme automatically.
Surface scale
theme-50 through theme-950 — defaults to zinc, overridden per theme. Use bg-theme-*, text-theme-*, border-theme-* in components instead of zinc-* so surfaces respond to the active theme.
50
100
200
300
400
500
600
700
800
900
950
Switch theme (warm / midnight) in UI Settings to see the scale shift.
Semantic colors
Single solid value per color, light and dark. Use the /N opacity modifier for tints — bg-success/10 applies alpha to the color only, not the element.
primary
solid
bg-primarytint /10
bg-primary/10Aa
text + border
text-primary--color-primary (= accent)
neutral
solid
bg-neutraltint /10
bg-neutral/10Aa
text + border
text-neutral--color-neutral
success
solid
bg-successtint /10
bg-success/10Aa
text + border
text-success--color-success
warn
solid
bg-warntint /10
bg-warn/10Aa
text + border
text-warn--color-warn
error
solid
bg-errortint /10
bg-error/10Aa
text + border
text-error--color-error
info
solid
bg-infotint /10
bg-info/10Aa
text + border
text-info--color-info
Accent palette
User-switchable accent colors. Each has a light and dark value. The active accent sets --color-accent, which primary aliases.
kingfisher
#0284a8/#22d3ee
Kingfisher
amber
#a07c14/#c49a28
Amber
rose
#9e3068/#c45c8a
Rose
azure
#2563a8/#4d95d4
Azure
lime
#6a9416/#94c228
Lime
magenta
#a8186e/#f040b4
Magenta
violet
#7020c8/#a870ff
Violet
mono
#18181b/#f4f4f5
Mono
Usage
How to use these in components.
Badge / pill
SuccessWarningErrorInfoNeutral
bg-success/10 text-success
Alert / banner
Something went wrong.
Changes saved.
New version available.
bg-error/10 border-error/20 text-error