Color Support in Pillar UI
Pillar UI includes a powerful color theme system built for scalability and visual consistency. Each color category (e.g., Primary, Danger, Success) includes 12 shades and supports dark mode.
Supported Color
| Category | Variable Prefix | Description |
|---|---|---|
| Primary | --P* | Highlights key UI elements. |
| Secondary | --Se* | Complements the primary color. |
| Danger | --D* | Used for error states or critical alerts. |
| Warning | --W* | Indicates caution or potential issues. |
| Success | --Su* | Represents positive or successful outcomes. |
| Info | --I* | Communicates informational messages. |
| Opacity | --O* | Controls transparency levels. |
| Background | --B* | Used for surface or container backgrounds. |
Note: Each color group has
-1(lightest) to-12(darkest) shades.
Dark Mode Support
Pillar UI supports both light and dark themes using distinct variable sets:
| Mode | Prefix | Example Variable |
|---|---|---|
| Light | l | --Pl-1 , Wl-2 |
| Dark | d | --Pd-1 , Wd-2 |
To customize a color, click the copy button next to the color set below to get the Primary color variables. To modify another color category, replace P in the variable names (e.g., --Pl-1) with the appropriate category code, such as Su for Success or Se for Secondary, as listed in the table above.
Theming change Example
:root {
/* Light Mode: Primary */
--Pl-1: hsl(359, 100%, 99.4%);
--Pl-2: hsl(359, 100%, 98.6%);
--Pl-3: hsl(360, 100%, 96.8%);
--Pl-4: hsl(360, 97.9%, 94.8%);
--Pl-5: hsl(360, 90.2%, 91.9%);
--Pl-6: hsl(360, 81.7%, 87.8%);
--Pl-7: hsl(359, 74.2%, 81.7%);
--Pl-8: hsl(359, 69.5%, 74.3%);
--Pl-9: hsl(358, 75%, 59%);
--Pl-10: hsl(358, 69.4%, 55.2%);
--Pl-11: hsl(358, 65%, 48.7%);
--Pl-12: hsl(354, 50%, 14.6%);
/* Dark Mode: Primary */
--Pd-1: hsl(353, 23%, 9.8%);
--Pd-2: hsl(357, 34.4%, 12%);
--Pd-3: hsl(356, 43.4%, 16.4%);
--Pd-4: hsl(356, 47.6%, 19.2%);
--Pd-5: hsl(356, 51.1%, 21.9%);
--Pd-6: hsl(356, 55.2%, 25.9%);
--Pd-7: hsl(357, 60.2%, 31.8%);
--Pd-8: hsl(358, 65%, 40.4%);
--Pd-9: hsl(358, 75%, 59%);
--Pd-10: hsl(358, 85.3%, 64%);
--Pd-11: hsl(358, 100%, 69.5%);
--Pd-12: hsl(351, 89%, 96%);
}Be Careful with State Colors
Colors like Danger, Warning, Info, and Success carry specific semantic meanings in UI design.
- Avoid changing them unless absolutely necessary.
- If customized, ensure their meaning is preserved (e.g., danger should still feel urgent).
Colors Component
red
1
2
3
4
5
6
7
8
9
10
11
12
tomato
1
2
3
4
5
6
7
8
9
10
11
12
crimson
1
2
3
4
5
6
7
8
9
10
11
12
pink
1
2
3
4
5
6
7
8
9
10
11
12
plum
1
2
3
4
5
6
7
8
9
10
11
12
purple
1
2
3
4
5
6
7
8
9
10
11
12
secondary
1
2
3
4
5
6
7
8
9
10
11
12
primary
1
2
3
4
5
6
7
8
9
10
11
12
blue
1
2
3
4
5
6
7
8
9
10
11
12
cyan
1
2
3
4
5
6
7
8
9
10
11
12
teal
1
2
3
4
5
6
7
8
9
10
11
12
green
1
2
3
4
5
6
7
8
9
10
11
12
grass
1
2
3
4
5
6
7
8
9
10
11
12
orange
1
2
3
4
5
6
7
8
9
10
11
12
brown
1
2
3
4
5
6
7
8
9
10
11
12
sky
1
2
3
4
5
6
7
8
9
10
11
12
mint
1
2
3
4
5
6
7
8
9
10
11
12
lime
1
2
3
4
5
6
7
8
9
10
11
12
yellow
1
2
3
4
5
6
7
8
9
10
11
12
amber
1
2
3
4
5
6
7
8
9
10
11
12
gray
1
2
3
4
5
6
7
8
9
10
11
12
mauve
1
2
3
4
5
6
7
8
9
10
11
12
bg
1
2
3
4
5
6
7
8
9
10
11
12
sage
1
2
3
4
5
6
7
8
9
10
11
12
olive
1
2
3
4
5
6
7
8
9
10
11
12
sand
1
2
3
4
5
6
7
8
9
10
11
12
bronze
1
2
3
4
5
6
7
8
9
10
11
12
gold
1
2
3
4
5
6
7
8
9
10
11
12
Summary
- Pillar UI offers semantic color groups with light and dark variants (
landdsuffixes). - Each group includes 12 shades, useful for backgrounds, borders, texts, and interactions.
- Color variables are easy to copy and customize — just swap the prefix.
- Use caution when altering state-based colors like danger, success, or warning.