/// color palette ///
Color: the language of purpose.
C
O
L
O
R
O
L
O
R
Purpose-driven palette
Colors that adapt to youOnce UI's color system is fluid. Brand, accent and neutral colors can be changed based on your preference. We put visitors first and our brand second — we believe that's what it means to design around humans.
Main colors
Colors that define the canvas.Pagebackground="page"
Brandbackground="brand-strong"
Surfacebackground="surface"
Neutral
Weakbackground="neutral-weak"
Mediumbackground="neutral-medium"
Strongbackground="neutral-strong"
Your brand, your colorsBrand colors aren't ours to decide. They're yours to define. The system adapts to your identity, not the other way around.
Brand
Weakbackground="brand-weak"
Mediumbackground="brand-medium"
Strongbackground="brand-strong"
Alpha weakbackground="brand-alpha-weak"
Alpha mediumbackground="brand-alpha-medium"
Accent
Complementary colors that add depth without competing.Weakbackground="accent-weak"
Mediumbackground="accent-medium"
Strongbackground="accent-strong"
Alpha weakbackground="accent-alpha-weak"
Alpha mediumbackground="accent-alpha-medium"
Meaning through consistencySemantic colors communicate purpose. Success, warning, danger — their meaning stays constant even as their hues change to match your palette.
Semantic colors
Success weakbackground="success-weak"
Success mediumbackground="success-medium"
Success strongbackground="success-strong"
Warning weakbackground="warning-weak"
Warning mediumbackground="warning-medium"
Warning strongbackground="warning-strong"
Danger weakbackground="danger-weak"
Danger mediumbackground="danger-medium"
Danger strongbackground="danger-strong"
Success alphabackground="success-alpha-weak"
Warning alphabackground="warning-alpha-weak"
Danger alphabackground="danger-alpha-weak"
A system that respects choiceEvery color, every weight, every variant exists to serve your vision. The system is flexible because we believe design should bend to people, not the other way around.
Themes
Products
Learn
Resources
