Color Guidelines
This page outlines the color system used in the VUER UI Kit.
Brand Colors
| Variable | Dark Mode | Light Mode | Liquid Dark Mode | Liquid Light Mode |
|---|---|---|---|---|
| --brand-primary | rgba(0, 123, 255, 1) | rgba(0, 123, 255, 1) | rgba(0, 123, 255, 1) | rgba(0, 123, 255, 1) |
| --brand-hover | rgba(41, 151, 255, 1) | rgba(41, 151, 255, 1) | rgba(41, 151, 255, 1) | rgba(41, 151, 255, 1) |
| --brand-pressed | rgba(0, 74, 179, 1) | rgba(0, 74, 179, 1) | rgba(0, 74, 179, 1) | rgba(0, 74, 179, 1) |
Background Colors
| Variable | Dark Mode | Light Mode | Liquid Dark Mode | Liquid Light Mode |
|---|---|---|---|---|
| --bg-primary | rgba(29, 29, 30, 1) | rgba(255, 255, 255, 1) | rgba(29, 29, 30, 1) | rgba(255, 255, 255, 1) |
| --bg-secondary | rgba(90, 93, 98, 0.3) | rgba(227, 230, 235, 0.6) | rgba(90, 93, 98, 0.3) | rgba(227, 230, 235, 0.6) |
| --bg-tertiary | rgba(75, 77, 83, 1) | rgba(220, 222, 229, 1) | rgba(75, 77, 83, 1) | rgba(220, 222, 229, 1) |
| --bg-quaternary | rgba(87, 90, 96, 1) | rgba(202, 206, 217, 1) | rgba(87, 90, 96, 1) | rgba(202, 206, 217, 1) |
| --bg-mask | rgba(56, 57, 59, 0.5) | rgba(56, 57, 59, 0.5) | rgba(56, 57, 59, 0.5) | rgba(246, 247, 248, 0.8) |
| liquid-dark/light-bg | rgba(50, 50, 50, 0.6) to rgba(70, 70, 70, 0.6)147.1° + Blur 20px147° | rgba(236, 236, 236, 0.6) to rgba(202, 202, 202, 0.6)147.1° + Blur 20px147° | rgba(50, 50, 50, 0.6) to rgba(70, 70, 70, 0.6)147.1° + Blur 20px147° | rgba(236, 236, 236, 0.6) to rgba(202, 202, 202, 0.6)147.1° + Blur 20px147° |
Text Colors
| Variable | Dark Mode | Light Mode | Liquid Dark Mode | Liquid Light Mode |
|---|---|---|---|---|
| --text-highlight | rgba(255, 255, 255, 1) | rgba(0, 0, 0, 1) | rgba(255, 255, 255, 1) | rgba(0, 0, 0, 1) |
| --text-primary | rgba(220, 222, 229, 1) | rgba(52, 53, 56, 1) | rgba(220, 222, 229, 1) | rgba(52, 53, 56, 1) |
| --text-secondary | rgba(147, 150, 159, 1) | rgba(87, 90, 96, 1) | rgba(147, 150, 159, 1) | rgba(87, 90, 96, 1) |
| --text-tertiary | rgba(121, 124, 131, 1) | rgba(147, 150, 159, 1) | rgba(121, 124, 131, 1) | rgba(147, 150, 159, 1) |
| --text-withbg | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 1) |
Icon Colors
| Variable | Dark Mode | Light Mode | Liquid Dark Mode | Liquid Light Mode |
|---|---|---|---|---|
| --icon-highlight | rgba(255, 255, 255, 1) | rgba(0, 0, 0, 1) | rgba(255, 255, 255, 1) | rgba(0, 0, 0, 1) |
| --icon-primary | rgba(220, 222, 229, 1) | rgba(75, 77, 83, 1) | rgba(220, 222, 229, 1) | rgba(75, 77, 83, 1) |
| --icon-secondary | rgba(147, 150, 159, 1) | rgba(121, 124, 131, 1) | rgba(147, 150, 159, 1) | rgba(121, 124, 131, 1) |
| --icon-tertiary | rgba(121, 124, 131, 1) | rgba(181, 184, 196, 1) | rgba(121, 124, 131, 1) | rgba(181, 184, 196, 1) |
| --icon-withbg | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 1) |
Danger Colors
| Variable | Dark Mode | Light Mode | Liquid Dark Mode | Liquid Light Mode |
|---|---|---|---|---|
| --danger-primary | rgba(255, 69, 91, 1) | rgba(255, 69, 91, 1) | rgba(255, 69, 91, 1) | rgba(255, 69, 91, 1) |
| --danger-secondary | rgba(255, 150, 156, 1) | rgba(255, 150, 156, 1) | rgba(255, 150, 156, 1) | rgba(255, 150, 156, 1) |
| --danger-tertiary | rgba(179, 30, 58, 1) | rgba(179, 30, 58, 1) | rgba(179, 30, 58, 1) | rgba(179, 30, 58, 1) |
Accent Colors
| Variable | Dark Mode | Light Mode | Liquid Dark Mode | Liquid Light Mode |
|---|---|---|---|---|
| --accent-warning | rgba(251, 187, 49, 1) | rgba(251, 187, 49, 1) | rgba(251, 187, 49, 1) | rgba(251, 187, 49, 1) |
| --accent-success | rgba(84, 190, 125, 1) | rgba(84, 190, 125, 1) | rgba(84, 190, 125, 1) | rgba(84, 190, 125, 1) |
Line Colors
| Variable | Dark Mode | Light Mode | Liquid Dark Mode | Liquid Light Mode |
|---|---|---|---|---|
| --line-primary | rgba(75, 77, 83, 1) | rgba(220, 222, 229, 1) | rgba(75, 77, 83, 0.5) | rgba(173, 176, 183, 0.6) |
| --line-secondary | rgba(52, 53, 56, 1) | rgba(245, 245, 245, 1) | rgba(52, 53, 56, 1) | rgba(245, 245, 245, 1) |
Shadow Colors
| Variable | Dark Mode | Light Mode | Liquid Dark Mode | Liquid Light Mode |
|---|---|---|---|---|
| --shadow-primary | rgba(0, 0, 0, 0.6) | rgba(0, 0, 0, 0.1) | rgba(0, 0, 0, 0.6) | rgba(0, 0, 0, 0.1) |
| --shadow-secondary | rgba(0, 0, 0, 0.2) | rgba(0, 0, 0, 0.06) | rgba(0, 0, 0, 0.2) | rgba(0, 0, 0, 0.06) |
Alternative Colors
| Variable | Dark Mode | Light Mode | Liquid Dark Mode | Liquid Light Mode |
|---|---|---|---|---|
| --alt-primary | rgba(52, 53, 56, 1) | rgba(245, 245, 245, 1) | rgba(52, 53, 56, 1) | rgba(245, 245, 245, 1) |
| --alt-hover | rgba(87, 90, 96, 1) | rgba(220, 222, 229, 1) | rgba(87, 90, 96, 1) | rgba(220, 222, 229, 1) |
| --alt-pressed | rgba(75, 77, 83, 1) | rgba(245, 245, 245, 1) | rgba(75, 77, 83, 1) | rgba(245, 245, 245, 1) |
Group Colors
| Variable | Dark Mode | Light Mode | Liquid Dark Mode | Liquid Light Mode |
|---|---|---|---|---|
| --group-primary | rgba(0, 0, 0, 1) | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 1) |
| --group-hover | rgba(52, 53, 56, 1) | rgba(245, 245, 245, 1) | rgba(52, 53, 56, 1) | rgba(245, 245, 245, 1) |
| --group-pressed | rgba(29, 29, 30, 1) | rgba(220, 222, 229, 1) | rgba(220, 222, 229, 1) | rgba(220, 222, 229, 1) |
Select Colors
| Variable | Dark Mode | Light Mode | Liquid Dark Mode | Liquid Light Mode |
|---|---|---|---|---|
| --select-secondary | rgba(56, 57, 59, 0.5) | rgba(227, 230, 235, 0.6) | rgba(56, 57, 59, 0.5) | rgba(227, 230, 235, 0.6) |