Colors
The VUI design system uses CSS custom properties (variables) to manage its color system. These variables are built using theme-specific color tokens that define the core palette.
The active theme determines which values are assigned to these top-level variables. VUI includes both light and dark themes by default, but the system is extensible, allowing users to create and implement their own custom themes. Learn more about theme configuration.
Background
rgb(246, 246, 246)#F6F6F6
Background Raised
rgb(222, 222, 222)#DEDEDE
Background Medium
rgb(236, 236, 236)#ECECEC
Background Lowered
rgb(255, 255, 255)#FFFFFF
Text
rgb(8, 8, 8)#080808
Text Light
rgb(64, 64, 64)#404040
Text Lighter
rgb(92, 92, 92)#5C5C5C
Text Lightest
rgb(128, 128, 128)#808080
Text Invert
rgb(248, 248, 248)#F8F8F8
Button Gray
rgb(224, 224, 224)#E0E0E0
Button Gray Hover
rgb(198, 198, 198)#C6C6C6
Button Fill
rgb(12, 12, 12)#0C0C0C
Button Fill Hover
rgb(52, 52, 52)#343434
Text Red
rgb(215, 18, 5)#D71205
Background Red Lowered
rgb(172, 45, 45)#AC2D2D
Background Red Raised
rgb(220, 38, 38)#DC2626
Text Green
rgb(22, 163, 40)#16A328
Background Green Lowered
rgb(42, 114, 19)#2A7213
Background Green Raised
rgb(61, 146, 35)#3D9223
Text Yellow
rgb(185, 115, 0)#B97300
Background Yellow Lowered
rgb(230, 205, 137)#E6CD89
Background Yellow Raised
rgb(253, 200, 86)#FDC856
Text Blue
rgb(59, 130, 246)#3B82F6
Background Blue Lowered
rgb(196, 214, 255)#C4D6FF
Background Blue Raised
rgb(136, 178, 255)#88B2FF
Border
rgb(200, 200, 200)#C8C8C8
Border Strong
rgb(152, 152, 152)#989898
Border Weak
rgb(224, 224, 224)#E0E0E0
Accent
rgb(245, 109, 24)#F56D18
Background Accent Raised
rgb(252, 190, 140)#FCBE8C
Background Accent Lowered
rgb(255, 225, 200)#FFE1C8
Purple
rgb(193, 118, 255)#C176FF
Background Purple Raised
rgb(211, 169, 242)#D3A9F2
Background Purple Lowered
rgb(243, 228, 255)#F3E4FF