Skip to Content
DocumentationTokens

Tokens

Here are the tokens for the design system. All these values are available in the tokens.css file.

If you need to change the tokens, you can follow the Customization section guide.

Note: For the other values, you can follow the Tailwind documentation .

Colors

White Colors

PropertyValue
--color-whitergba(255, 255, 255, 1)
--color-white-80rgba(255, 255, 255, 0.8)
--color-white-48rgba(255, 255, 255, 0.48)
--color-white-24rgba(255, 255, 255, 0.24)
--color-white-16rgba(255, 255, 255, 0.16)
--color-white-12rgba(255, 255, 255, 0.12)
--color-white-8rgba(255, 255, 255, 0.08)
--color-white-6rgba(255, 255, 255, 0.06)
--color-white-4rgba(255, 255, 255, 0.04)
--color-white-0rgba(255, 255, 255, 0)

Black Colors

PropertyValue
--color-blackrgba(0, 0, 0, 1)
--color-black-80rgba(0, 0, 0, 0.8)
--color-black-48rgba(0, 0, 0, 0.48)
--color-black-24rgba(0, 0, 0, 0.24)
--color-black-16rgba(0, 0, 0, 0.16)
--color-black-12rgba(0, 0, 0, 0.12)
--color-black-8rgba(0, 0, 0, 0.08)
--color-black-6rgba(0, 0, 0, 0.06)
--color-black-4rgba(0, 0, 0, 0.04)
--color-black-0rgba(0, 0, 0, 0)

Gray Scale

PropertyValue
--color-gray-950rgba(8, 10, 12, 1)
--color-gray-900rgba(12, 14, 18, 1)
--color-gray-850rgba(16, 19, 24, 1)
--color-gray-800rgba(24, 29, 37, 1)
--color-gray-700rgba(33, 38, 49, 1)
--color-gray-600rgba(49, 57, 73, 1)
--color-gray-500rgba(73, 86, 110, 1)
--color-gray-450rgba(90, 105, 135, 1)
--color-gray-400rgba(98, 114, 147, 1)
--color-gray-300rgba(133, 146, 173, 1)
--color-gray-200rgba(169, 179, 198, 1)
--color-gray-150rgba(206, 211, 222, 1)
--color-gray-100rgba(231, 233, 239, 1)
--color-gray-70rgba(240, 241, 245, 1)
--color-gray-50rgba(246, 247, 249, 1)
--color-gray-30rgba(249, 250, 251, 1)
--color-gray-10rgba(252, 252, 253, 1)
--color-gray-0rgba(252, 252, 253, 0)

Green

PropertyValue
--color-greenrgba(12, 187, 102, 1)
--color-green-darken-1rgba(16, 152, 86, 1)
--color-green-darken-2rgba(17, 120, 71, 1)
--color-green-darken-3rgba(16, 91, 55, 1)
--color-green-darken-4rgba(14, 63, 39, 1)
--color-green-darken-5rgba(9, 37, 23, 1)
--color-green-darken-6rgba(3, 12, 8, 1)
--color-green-lighten-1rgba(22, 208, 118, 1)
--color-green-lighten-2rgba(36, 224, 133, 1)
--color-green-lighten-3rgba(69, 222, 148, 1)
--color-green-lighten-4rgba(100, 221, 163, 1)
--color-green-lighten-5rgba(129, 223, 178, 1)
--color-green-lighten-6rgba(156, 226, 192, 1)
--color-green-80rgba(12, 187, 102, 0.8)
--color-green-64rgba(12, 187, 102, 0.64)
--color-green-48rgba(12, 187, 102, 0.48)
--color-green-24rgba(12, 187, 102, 0.24)
--color-green-16rgba(12, 187, 102, 0.16)
--color-green-12rgba(12, 187, 102, 0.12)
--color-green-8rgba(12, 187, 102, 0.08)
--color-green-6rgba(12, 187, 102, 0.06)
--color-green-4rgba(12, 187, 102, 0.04)
--color-green-0rgba(12, 187, 102, 0)

Red

PropertyValue
--color-redrgba(238, 32, 56, 1)
--color-red-darken-1rgba(216, 24, 46, 1)
--color-red-darken-2rgba(182, 27, 45, 1)
--color-red-darken-3rgba(150, 29, 43, 1)
--color-red-darken-4rgba(121, 27, 38, 1)
--color-red-darken-5rgba(93, 25, 33, 1)
--color-red-darken-6rgba(67, 20, 25, 1)
--color-red-darken-7rgba(42, 14, 17, 1)
--color-red-lighten-1rgba(234, 67, 86, 1)
--color-red-lighten-2rgba(232, 100, 115, 1)
--color-red-lighten-3rgba(231, 131, 142, 1)
--color-red-lighten-4rgba(233, 159, 168, 1)
--color-red-lighten-5rgba(237, 187, 192, 1)
--color-red-lighten-6rgba(242, 212, 215, 1)
--color-red-80rgba(238, 32, 56, 0.8)
--color-red-64rgba(238, 32, 56, 0.64)
--color-red-48rgba(238, 32, 56, 0.48)
--color-red-24rgba(238, 32, 56, 0.24)
--color-red-16rgba(238, 32, 56, 0.16)
--color-red-12rgba(238, 32, 56, 0.12)
--color-red-8rgba(238, 32, 56, 0.08)
--color-red-6rgba(238, 32, 56, 0.06)
--color-red-4rgba(238, 32, 56, 0.04)
--color-red-0rgba(238, 32, 56, 0)

Yellow

PropertyValue
--color-yellowrgba(241, 194, 4, 1)
--color-yellow-darken-1rgba(203, 165, 11, 1)
--color-yellow-darken-2rgba(168, 138, 16, 1)
--color-yellow-darken-3rgba(135, 112, 18, 1)
--color-yellow-darken-4rgba(105, 87, 18, 1)
--color-yellow-darken-5rgba(76, 64, 16, 1)
--color-yellow-darken-6rgba(49, 42, 12, 1)
--color-yellow-lighten-1rgba(243, 201, 32, 1)
--color-yellow-lighten-2rgba(238, 204, 68, 1)
--color-yellow-lighten-3rgba(235, 208, 102, 1)
--color-yellow-lighten-4rgba(234, 214, 133, 1)
--color-yellow-lighten-5rgba(236, 221, 162, 1)
--color-yellow-lighten-6rgba(239, 229, 189, 1)
--color-yellow-80rgba(241, 194, 4, 0.8)
--color-yellow-64rgba(241, 194, 4, 0.64)
--color-yellow-48rgba(241, 194, 4, 0.48)
--color-yellow-24rgba(241, 194, 4, 0.24)
--color-yellow-16rgba(241, 194, 4, 0.16)
--color-yellow-12rgba(241, 194, 4, 0.12)
--color-yellow-8rgba(241, 194, 4, 0.08)
--color-yellow-6rgba(241, 194, 4, 0.06)
--color-yellow-4rgba(241, 194, 4, 0.04)
--color-yellow-0rgba(241, 194, 4, 0)

Brand Primary

PropertyValue
--color-primaryrgba(0, 32, 91, 1)
--color-primary-darken-1rgba(2, 22, 59, 1)
--color-primary-darken-2rgba(2, 11, 28, 1)
--color-primary-lighten-1rgba(4, 44, 118, 1)
--color-primary-lighten-2rgba(11, 57, 142, 1)
--color-primary-lighten-3rgba(19, 70, 164, 1)
--color-primary-lighten-4rgba(29, 80, 185, 1)
--color-primary-lighten-5rgba(39, 94, 206, 1)
--color-primary-lighten-6rgba(64, 112, 212, 1)
--color-primary-80rgba(0, 32, 91, 0.8)
--color-primary-64rgba(0, 32, 91, 0.64)
--color-primary-48rgba(0, 32, 91, 0.48)
--color-primary-24rgba(0, 32, 91, 0.24)
--color-primary-16rgba(0, 32, 91, 0.16)
--color-primary-12rgba(0, 32, 91, 0.12)
--color-primary-8rgba(0, 32, 91, 0.08)
--color-primary-6rgba(0, 32, 91, 0.06)
--color-primary-4rgba(0, 32, 91, 0.04)
--color-primary-0rgba(0, 32, 91, 0)

Brand Secondary

PropertyValue
--color-secondaryrgba(1, 208, 180, 1)
--color-secondary-darken-1rgba(7, 171, 149, 1)
--color-secondary-darken-2rgba(11, 137, 120, 1)
--color-secondary-darken-3rgba(13, 104, 92, 1)
--color-secondary-darken-4rgba(12, 75, 66, 1)
--color-secondary-darken-5rgba(9, 47, 42, 1)
--color-secondary-darken-6rgba(5, 21, 19, 1)
--color-secondary-lighten-1rgba(10, 230, 201, 1)
--color-secondary-lighten-2rgba(33, 237, 210, 1)
--color-secondary-lighten-3rgba(69, 232, 210, 1)
--color-secondary-lighten-4rgba(101, 230, 213, 1)
--color-secondary-lighten-5rgba(132, 231, 217, 1)
--color-secondary-lighten-6rgba(160, 233, 223, 1)
--color-secondary-80rgba(1, 208, 180, 0.8)
--color-secondary-64rgba(1, 208, 180, 0.64)
--color-secondary-48rgba(1, 208, 180, 0.48)
--color-secondary-24rgba(1, 208, 180, 0.24)
--color-secondary-16rgba(1, 208, 180, 0.16)
--color-secondary-12rgba(1, 208, 180, 0.12)
--color-secondary-8rgba(1, 208, 180, 0.08)
--color-secondary-6rgba(1, 208, 180, 0.06)
--color-secondary-4rgba(1, 208, 180, 0.04)
--color-secondary-0rgba(1, 208, 180, 0)

Cm Colors

PropertyValue
--color-cmrgba(64, 126, 201, 1)
--color-cm-darken-1rgba(56, 112, 178, 1)
--color-cm-darken-2rgba(53, 97, 151, 1)
--color-cm-darken-3rgba(49, 83, 125, 1)
--color-cm-darken-4rgba(42, 69, 101, 1)
--color-cm-darken-5rgba(35, 54, 77, 1)
--color-cm-darken-6rgba(27, 39, 55, 1)
--color-cm-lighten-1rgba(92, 143, 204, 1)
--color-cm-lighten-2rgba(119, 159, 207, 1)
--color-cm-lighten-3rgba(145, 175, 212, 1)
--color-cm-lighten-4rgba(169, 191, 219, 1)
--color-cm-lighten-5rgba(192, 207, 227, 1)
--color-cm-lighten-6rgba(214, 223, 235, 1)
--color-cm-80rgba(64, 126, 201, 0.8)
--color-cm-64rgba(64, 126, 201, 0.64)
--color-cm-48rgba(64, 126, 201, 0.48)
--color-cm-24rgba(64, 126, 201, 0.24)
--color-cm-16rgba(64, 126, 201, 0.16)
--color-cm-12rgba(64, 126, 201, 0.12)
--color-cm-8rgba(64, 126, 201, 0.08)
--color-cm-6rgba(64, 126, 201, 0.06)
--color-cm-4rgba(64, 126, 201, 0.04)
--color-cm-0rgba(64, 126, 201, 0)

Go Colors

PropertyValue
--color-gorgba(172, 20, 90, 1)
--color-go-darken-1rgba(141, 22, 77, 1)
--color-go-darken-2rgba(111, 21, 63, 1)
--color-go-darken-3rgba(83, 19, 48, 1)
--color-go-darken-4rgba(56, 15, 34, 1)
--color-go-darken-5rgba(31, 10, 20, 1)
--color-go-darken-6rgba(8, 3, 5, 1)
--color-go-lighten-1rgba(194, 30, 106, 1)
--color-go-lighten-2rgba(214, 41, 121, 1)
--color-go-lighten-3rgba(213, 72, 137, 1)
--color-go-lighten-4rgba(214, 102, 154, 1)
--color-go-lighten-5rgba(217, 130, 170, 1)
--color-go-lighten-6rgba(221, 156, 186, 1)
--color-go-80rgba(172, 20, 90, 0.8)
--color-go-64rgba(172, 20, 90, 0.64)
--color-go-48rgba(172, 20, 90, 0.48)
--color-go-24rgba(172, 20, 90, 0.24)
--color-go-16rgba(172, 20, 90, 0.16)
--color-go-12rgba(172, 20, 90, 0.12)
--color-go-8rgba(172, 20, 90, 0.08)
--color-go-6rgba(172, 20, 90, 0.06)
--color-go-4rgba(172, 20, 90, 0.04)
--color-go-0rgba(172, 20, 90, 0)

Cir Colors

PropertyValue
--color-cirrgba(0, 239, 200, 1)
--color-cir-darken-1rgba(7, 202, 170, 1)
--color-cir-darken-2rgba(12, 166, 141, 1)
--color-cir-darken-3rgba(16, 132, 113, 1)
--color-cir-darken-4rgba(16, 101, 87, 1)
--color-cir-darken-5rgba(14, 73, 63, 1)
--color-cir-darken-6rgba(10, 46, 40, 1)
--color-cir-lighten-1rgba(24, 247, 210, 1)
--color-cir-lighten-2rgba(61, 240, 211, 1)
--color-cir-lighten-3rgba(95, 236, 213, 1)
--color-cir-lighten-4rgba(127, 235, 217, 1)
--color-cir-lighten-5rgba(156, 236, 223, 1)
--color-cir-lighten-6rgba(184, 239, 230, 1)
--color-cir-80rgba(0, 239, 200, 0.8)
--color-cir-64rgba(0, 239, 200, 0.64)
--color-cir-48rgba(0, 239, 200, 0.48)
--color-cir-24rgba(0, 239, 200, 0.24)
--color-cir-16rgba(0, 239, 200, 0.16)
--color-cir-12rgba(0, 239, 200, 0.12)
--color-cir-8rgba(0, 239, 200, 0.08)
--color-cir-6rgba(0, 239, 200, 0.06)
--color-cir-4rgba(0, 239, 200, 0.04)
--color-cir-0rgba(0, 239, 200, 0)

Ped Colors

PropertyValue
--color-pedrgba(255, 198, 73, 1)
--color-ped-darken-1rgba(248, 185, 48, 1)
--color-ped-darken-2rgba(238, 172, 27, 1)
--color-ped-darken-3rgba(210, 152, 25, 1)
--color-ped-darken-4rgba(176, 130, 28, 1)
--color-ped-darken-5rgba(146, 109, 28, 1)
--color-ped-darken-6rgba(116, 88, 26, 1)
--color-ped-darken-7rgba(89, 68, 24, 1)
--color-ped-lighten-1rgba(250, 205, 107, 1)
--color-ped-lighten-2rgba(246, 213, 141, 1)
--color-ped-lighten-3rgba(245, 223, 173, 1)
--color-ped-lighten-4rgba(247, 233, 202, 1)
--color-ped-lighten-5rgba(250, 244, 229, 1)
--color-ped-lighten-6rgba(255, 255, 255, 1)
--color-ped-80rgba(255, 198, 73, 0.8)
--color-ped-64rgba(255, 198, 73, 0.64)
--color-ped-48rgba(255, 198, 73, 0.48)
--color-ped-24rgba(255, 198, 73, 0.24)
--color-ped-16rgba(255, 198, 73, 0.16)
--color-ped-12rgba(255, 198, 73, 0.12)
--color-ped-8rgba(255, 198, 73, 0.08)
--color-ped-6rgba(255, 198, 73, 0.06)
--color-ped-4rgba(255, 198, 73, 0.04)
--color-ped-0rgba(255, 198, 73, 0)

Prev Colors

PropertyValue
--color-prevrgba(59, 63, 182, 1)
--color-prev-darken-1rgba(55, 59, 154, 1)
--color-prev-darken-2rgba(50, 53, 129, 1)
--color-prev-darken-3rgba(44, 46, 104, 1)
--color-prev-darken-4rgba(37, 38, 80, 1)
--color-prev-darken-5rgba(28, 29, 59, 1)
--color-prev-darken-6rgba(19, 20, 37, 1)
--color-prev-lighten-1rgba(79, 82, 191, 1)
--color-prev-lighten-2rgba(104, 107, 196, 1)
--color-prev-lighten-3rgba(130, 132, 201, 1)
--color-prev-lighten-4rgba(154, 155, 208, 1)
--color-prev-lighten-5rgba(176, 177, 217, 1)
--color-prev-lighten-6rgba(198, 199, 226, 1)
--color-prev-80rgba(59, 63, 182, 0.8)
--color-prev-64rgba(59, 63, 182, 0.64)
--color-prev-48rgba(59, 63, 182, 0.48)
--color-prev-24rgba(59, 63, 182, 0.24)
--color-prev-16rgba(59, 63, 182, 0.16)
--color-prev-12rgba(59, 63, 182, 0.12)
--color-prev-8rgba(59, 63, 182, 0.08)
--color-prev-6rgba(59, 63, 182, 0.06)
--color-prev-4rgba(59, 63, 182, 0.04)
--color-prev-0rgba(59, 63, 182, 0)

Base Colors (Light)

PropertyValue
--color-backgroundvar(—color-white)
--color-foregroundvar(—color-gray-700)
--color-ringvar(—color-gray-150)

Base Colors (Dark)

PropertyValue
--color-backgroundvar(—color-gray-850)
--color-foregroundvar(—color-white)
--color-ringvar(—color-gray-500)

Content Colors (Light)

PropertyValue
--color-content-titlevar(—color-primary)
--color-content-paragraphvar(—color-gray-600)
--color-content-linkvar(—color-secondary-darken-2)

Content Colors (Dark)

PropertyValue
--color-content-titlevar(—color-white)
--color-content-paragraphvar(—color-gray-150)
--color-content-linkvar(—color-secondary)

State Colors (Light)

PropertyValue
--color-state-hovervar(—color-gray-50)
--color-state-focusvar(—color-gray-70)
--color-state-activevar(—color-primary-16)
--color-state-errorvar(—color-red-16)

State Colors (Dark)

PropertyValue
--color-state-hovervar(—color-gray-800)
--color-state-focusvar(—color-gray-700)
--color-state-activevar(—color-white-16)
--color-state-errorvar(—color-red-16)

Surface Colors (Light)

PropertyValue
--color-surface-elevatedvar(—color-white)
--color-surface-cardvar(—color-white)
--color-surface-navigationvar(—color-white)
--color-surface-sectionvar(—color-white)
--color-surface-pagevar(—color-gray-30)
--color-surface-disablevar(—color-white-8)
--color-surface-settings-onvar(—color-white-80)
--color-surface-settings-offvar(—color-white-48)

Surface Colors (Dark)

PropertyValue
--color-surface-elevatedvar(—color-gray-800)
--color-surface-cardvar(—color-gray-850)
--color-surface-navigationvar(—color-gray-850)
--color-surface-sectionvar(—color-gray-900)
--color-surface-pagevar(—color-gray-950)
--color-surface-disablevar(—color-black-8)
--color-surface-settings-onvar(—color-black-48)
--color-surface-settings-offvar(—color-gray-950)

Drop Shadow Colors (Light)

PropertyValue
--color-drop-shadow-layer-argba(33, 38, 49, 0.16)
--color-drop-shadow-layer-brgba(73, 85, 110, 0.16)

Drop Shadow Colors (Dark)

PropertyValue
--color-drop-shadow-layer-avar(—color-black-24)
--color-drop-shadow-layer-bvar(—color-black-16)

Gradient Colors (Light)

Base
PropertyValue
--color-gradient-base-blur-1var(—color-primary-lighten-6)
--color-gradient-base-blur-2var(—color-secondary-lighten-3)
--color-gradient-base-blur-3var(—color-secondary-lighten-6)
--color-gradient-base-bg-1var(—color-gray-50)
--color-gradient-base-bg-2var(—color-gray-10)
Cir
PropertyValue
--color-gradient-cir-blur-1var(—color-cir-lighten-3)
--color-gradient-cir-blur-2var(—color-secondary-lighten-1)
--color-gradient-cir-blur-3var(—color-cir-darken-1)
--color-gradient-cir-bg-1var(—color-cir-lighten-6)
--color-gradient-cir-bg-2var(—color-gray-10)
Cm
PropertyValue
--color-gradient-cm-blur-1var(—color-cm-lighten-4)
--color-gradient-cm-blur-2var(—color-cm-lighten-2)
--color-gradient-cm-blur-3var(—color-cm)
--color-gradient-cm-bg-1var(—color-cm-lighten-6)
--color-gradient-cm-bg-2var(—color-gray-10)
Go
PropertyValue
--color-gradient-go-blur-1var(—color-go-lighten-6)
--color-gradient-go-blur-2var(—color-go-lighten-4)
--color-gradient-go-blur-3var(—color-go-lighten-2)
--color-gradient-go-bg-1var(—color-go-lighten-6)
--color-gradient-go-bg-2var(—color-gray-10)
Ped
PropertyValue
--color-gradient-ped-blur-1var(—color-ped-lighten-4)
--color-gradient-ped-blur-2var(—color-ped-lighten-2)
--color-gradient-ped-blur-3var(—color-ped)
--color-gradient-ped-bg-1var(—color-ped-lighten-5)
--color-gradient-ped-bg-2var(—color-gray-10)
Prev
PropertyValue
--color-gradient-prev-blur-1var(—color-prev-lighten-5)
--color-gradient-prev-blur-2var(—color-prev-lighten-3)
--color-gradient-prev-blur-3var(—color-prev)
--color-gradient-prev-bg-1var(—color-prev-lighten-6)
--color-gradient-prev-bg-2var(—color-gray-10)
R1
PropertyValue
--color-gradient-r1-blur-1var(—color-secondary)
--color-gradient-r1-blur-2var(—color-primary-lighten-3)
--color-gradient-r1-blur-3var(—color-primary-lighten-5)
--color-gradient-r1-bg-1var(—color-primary)
--color-gradient-r1-bg-2var(—color-primary-lighten-1)
Rplus
PropertyValue
--color-gradient-rplus-blur-1var(—color-primary-lighten-1)
--color-gradient-rplus-blur-2var(—color-primary-lighten-3)
--color-gradient-rplus-blur-3var(—color-primary-lighten-5)
--color-gradient-rplus-bg-1var(—color-primary-lighten-1)
--color-gradient-rplus-bg-2var(—color-primary)
PT
PropertyValue
--color-gradient-pt-blur-1var(—color-secondary)
--color-gradient-pt-blur-2var(—color-secondary-darken-2)
--color-gradient-pt-blur-3var(—color-secondary-darken-4)
--color-gradient-pt-bg-1var(—color-gray-600)
--color-gradient-pt-bg-2var(—color-gray-450)

Gradient Colors (Dark)

Base
PropertyValue
--color-gradient-base-blur-1var(—color-primary-lighten-3)
--color-gradient-base-blur-2var(—color-secondary-darken-1)
--color-gradient-base-blur-3var(—color-secondary)
--color-gradient-base-bg-1var(—color-primary-darken-1)
--color-gradient-base-bg-2var(—color-primary-darken-2)
Cir
PropertyValue
--color-gradient-cir-blur-1var(—color-cir-darken-1)
--color-gradient-cir-blur-2var(—color-cir-darken-2)
--color-gradient-cir-blur-3var(—color-cir-darken-3)
--color-gradient-cir-bg-1var(—color-cir-darken-5)
--color-gradient-cir-bg-2var(—color-cir-darken-6)
Cm
PropertyValue
--color-gradient-cm-blur-1var(—color-cm)
--color-gradient-cm-blur-2var(—color-cm-darken-1)
--color-gradient-cm-blur-3var(—color-cm-darken-2)
--color-gradient-cm-bg-1var(—color-cm-darken-4)
--color-gradient-cm-bg-2var(—color-cm-darken-6)
Go
PropertyValue
--color-gradient-go-blur-1var(—color-go-lighten-2)
--color-gradient-go-blur-2var(—color-go)
--color-gradient-go-blur-3var(—color-go-darken-2)
--color-gradient-go-bg-1var(—color-go-darken-3)
--color-gradient-go-bg-2var(—color-go-darken-5)
Ped
PropertyValue
--color-gradient-ped-blur-1var(—color-ped)
--color-gradient-ped-blur-2var(—color-ped-darken-3)
--color-gradient-ped-blur-3var(—color-ped-darken-5)
--color-gradient-ped-bg-1var(—color-ped-darken-4)
--color-gradient-ped-bg-2var(—color-yellow-darken-6)
Prev
PropertyValue
--color-gradient-prev-blur-1var(—color-prev-lighten-1)
--color-gradient-prev-blur-2var(—color-prev)
--color-gradient-prev-blur-3var(—color-prev-darken-1)
--color-gradient-prev-bg-1var(—color-prev-darken-2)
--color-gradient-prev-bg-2var(—color-prev-darken-4)
R1
PropertyValue
--color-gradient-r1-blur-1var(—color-secondary)
--color-gradient-r1-blur-2var(—color-primary-lighten-1)
--color-gradient-r1-blur-3var(—color-primary-lighten-2)
--color-gradient-r1-bg-1var(—color-primary)
--color-gradient-r1-bg-2var(—color-primary-darken-2)
Rplus
PropertyValue
--color-gradient-rplus-blur-1var(—color-primary-lighten-5)
--color-gradient-rplus-blur-2var(—color-primary-lighten-3)
--color-gradient-rplus-blur-3var(—color-primary-lighten-1)
--color-gradient-rplus-bg-1var(—color-primary)
--color-gradient-rplus-bg-2var(—color-primary-darken-2)
PT
PropertyValue
--color-gradient-pt-blur-1var(—color-secondary)
--color-gradient-pt-blur-2var(—color-secondary-darken-1)
--color-gradient-pt-blur-3var(—color-secondary-darken-3)
--color-gradient-pt-bg-1var(—color-gray-800)
--color-gradient-pt-bg-2var(—color-gray-900)
Cm Light Tokens
PropertyValue
--color-cm-foregroundvar(—color-cm-darken-2)
--color-cm-foreground-emphasisvar(—color-cm-darken-4)
--color-cm-foreground-onfillvar(—color-white)
--color-cm-background-fillvar(—color-cm-darken-1)
--color-cm-background-fill-emphasisvar(—color-cm-darken-3)
--color-cm-background-softvar(—color-cm-8)
--color-cm-background-soft-emphasisvar(—color-cm-4)
Cm Semantic Dark Tokens
PropertyValue
--color-cm-foregroundvar(—color-cm-lighten-4)
--color-cm-foreground-emphasisvar(—color-cm-lighten-6)
--color-cm-foreground-onfillvar(—color-white)
--color-cm-background-fillvar(—color-cm-darken-2)
--color-cm-background-fill-emphasisvar(—color-cm)
--color-cm-background-softvar(—color-cm-12)
--color-cm-background-soft-emphasisvar(—color-cm-24)
Go Light Tokens
PropertyValue
--color-go-foregroundvar(—color-go-darken-1)
--color-go-foreground-emphasisvar(—color-go-darken-3)
--color-go-foreground-onfillvar(—color-white)
--color-go-background-fillvar(—color-go)
--color-go-background-fill-emphasisvar(—color-go-darken-1)
--color-go-background-softvar(—color-go-8)
--color-go-background-soft-emphasisvar(—color-go-4)
Go Semantic Dark Tokens
PropertyValue
--color-go-foregroundvar(—color-go-lighten-5)
--color-go-foreground-emphasisvar(—color-go-lighten-6)
--color-go-foreground-onfillvar(—color-white)
--color-go-background-fillvar(—color-go-darken-1)
--color-go-background-fill-emphasisvar(—color-go)
--color-go-background-softvar(—color-go-16)
--color-go-background-soft-emphasisvar(—color-go-24)
Cir Semantic Light Tokens
PropertyValue
--color-cir-foregroundvar(—color-cir-darken-4)
--color-cir-foreground-emphasisvar(—color-cir-darken-5)
--color-cir-foreground-onfillvar(—color-cir-darken-6)
--color-cir-background-fillvar(—color-cir)
--color-cir-background-fill-emphasisvar(—color-cir-darken-1)
--color-cir-background-softvar(—color-cir-16)
--color-cir-background-soft-emphasisvar(—color-cir-8)
Cir Semantic Dark Tokens
PropertyValue
--color-cir-foregroundvar(—color-cir)
--color-cir-foreground-emphasisvar(—color-cir-lighten-3)
--color-cir-foreground-onfillvar(—color-cir-darken-6)
--color-cir-background-fillvar(—color-cir-darken-1)
--color-cir-background-fill-emphasisvar(—color-cir)
--color-cir-background-softvar(—color-cir-8)
--color-cir-background-soft-emphasisvar(—color-cir-16)
Ped Semantic Light Tokens
PropertyValue
--color-ped-foregroundvar(—color-ped-darken-6)
--color-ped-foreground-emphasisvar(—color-ped-darken-7)
--color-ped-foreground-onfillvar(—color-ped-darken-7)
--color-ped-background-fillvar(—color-ped-lighten-1)
--color-ped-background-fill-emphasisvar(—color-ped)
--color-ped-background-softvar(—color-ped-16)
--color-ped-background-soft-emphasisvar(—color-ped-8)
Ped Semantic Dark Tokens
PropertyValue
--color-ped-foregroundvar(—color-ped)
--color-ped-foreground-emphasisvar(—color-ped-lighten-1)
--color-ped-foreground-onfillvar(—color-ped-darken-7)
--color-ped-background-fillvar(—color-ped)
--color-ped-background-fill-emphasisvar(—color-ped-lighten-1)
--color-ped-background-softvar(—color-ped-8)
--color-ped-background-soft-emphasisvar(—color-ped-16)
Prev Semantic Light Tokens
PropertyValue
--color-prev-foregroundvar(—color-prev)
--color-prev-foreground-emphasisvar(—color-prev-darken-2)
--color-prev-foreground-onfillvar(—color-white)
--color-prev-background-fillvar(—color-prev)
--color-prev-background-fill-emphasisvar(—color-prev-darken-2)
--color-prev-background-softvar(—color-prev-8)
--color-prev-background-soft-emphasisvar(—color-prev-4)
Prev Semantic Dark Tokens
PropertyValue
--color-prev-foregroundvar(—color-prev-lighten-5)
--color-prev-foreground-emphasisvar(—color-prev-lighten-6)
--color-prev-foreground-onfillvar(—color-white)
--color-prev-background-fillvar(—color-prev-darken-1)
--color-prev-background-fill-emphasisvar(—color-prev)
--color-prev-background-softvar(—color-prev-24)
--color-prev-background-soft-emphasisvar(—color-prev-48)

General Semantic Color Tokens

These tokens provide semantic meaning and automatically adapt to light/dark themes:

Gray Semantic Light Tokens
PropertyValue
--color-gray-foregroundvar(—color-gray-600)
--color-gray-foreground-emphasisvar(—color-gray-700)
--color-gray-foreground-mutedvar(—color-gray-450)
--color-gray-foreground-onfillvar(—color-white)
--color-gray-strokevar(—color-gray-150)
--color-gray-stroke-emphasisvar(—color-gray-200)
--color-gray-stroke-mutedvar(—color-gray-100)
--color-gray-background-fillvar(—color-gray-700)
--color-gray-background-fill-emphasisvar(—color-gray-850)
--color-gray-background-fill-mutedvar(—color-gray-400)
--color-gray-background-softvar(—color-gray-70)
--color-gray-background-soft-emphasisvar(—color-gray-50)
--color-gray-background-soft-mutedvar(—color-gray-30)
Gray Semantic Dark Tokens
PropertyValue
--color-gray-foregroundvar(—color-gray-100)
--color-gray-foreground-emphasisvar(—color-white)
--color-gray-foreground-mutedvar(—color-gray-150)
--color-gray-foreground-onfillvar(—color-gray-700)
--color-gray-strokevar(—color-gray-600)
--color-gray-stroke-emphasisvar(—color-gray-500)
--color-gray-stroke-mutedvar(—color-gray-700)
--color-gray-background-fillvar(—color-gray-100)
--color-gray-background-fill-emphasisvar(—color-gray-30)
--color-gray-background-fill-mutedvar(—color-gray-300)
--color-gray-background-softvar(—color-gray-800)
--color-gray-background-soft-emphasisvar(—color-gray-600)
--color-gray-background-soft-mutedvar(—color-gray-700)
Green Semantic Light Tokens
PropertyValue
--color-green-foregroundvar(—color-green-darken-3)
--color-green-foreground-emphasisvar(—color-green-darken-4)
--color-green-foreground-onfillvar(—color-white)
--color-green-strokevar(—color-green)
--color-green-stroke-emphasisvar(—color-green-darken-2)
--color-green-background-fillvar(—color-green-darken-2)
--color-green-background-fill-emphasisvar(—color-green-darken-3)
--color-green-background-softvar(—color-green-16)
--color-green-background-soft-emphasisvar(—color-green-12)
--color-green-background-soft-mutedvar(—color-green-6)
Green Semantic Dark Tokens
PropertyValue
--color-green-foregroundvar(—color-green-lighten-4)
--color-green-foreground-emphasisvar(—color-green-lighten-6)
--color-green-foreground-onfillvar(—color-white)
--color-green-strokevar(—color-green-darken-2)
--color-green-stroke-emphasisvar(—color-green)
--color-green-background-fillvar(—color-green-darken-3)
--color-green-background-fill-emphasisvar(—color-green-darken-2)
--color-green-background-softvar(—color-green-8)
--color-green-background-soft-emphasisvar(—color-green-24)
--color-green-background-soft-mutedvar(—color-green-16)
Red Semantic Light Tokens
PropertyValue
--color-red-foregroundvar(—color-red-darken-2)
--color-red-foreground-emphasisvar(—color-red-darken-3)
--color-red-foreground-onfillvar(—color-white)
--color-red-strokevar(—color-red)
--color-red-stroke-emphasisvar(—color-red-darken-1)
--color-red-background-fillvar(—color-red-darken-1)
--color-red-background-fill-emphasisvar(—color-red-darken-2)
--color-red-background-softvar(—color-red-12)
--color-red-background-soft-emphasisvar(—color-red-8)
--color-red-background-soft-mutedvar(—color-red-4)
Red Semantic Dark Tokens
PropertyValue
--color-red-foregroundvar(—color-red-lighten-3)
--color-red-foreground-emphasisvar(—color-red-lighten-4)
--color-red-foreground-onfillvar(—color-white)
--color-red-strokevar(—color-red-darken-1)
--color-red-stroke-emphasisvar(—color-red)
--color-red-background-fillvar(—color-red-darken-2)
--color-red-background-fill-emphasisvar(—color-red-darken-1)
--color-red-background-softvar(—color-red-12)
--color-red-background-soft-emphasisvar(—color-red-24)
--color-red-background-soft-mutedvar(—color-red-16)
Yellow Semantic Light Tokens
PropertyValue
--color-yellow-foregroundvar(—color-yellow-darken-4)
--color-yellow-foreground-emphasisvar(—color-yellow-darken-5)
--color-yellow-foreground-onfillvar(—color-yellow-darken-5)
--color-yellow-strokevar(—color-yellow-lighten-1)
--color-yellow-stroke-emphasisvar(—color-yellow)
--color-yellow-background-fillvar(—color-yellow-lighten-2)
--color-yellow-background-fill-emphasisvar(—color-yellow)
--color-yellow-background-softvar(—color-yellow-24)
--color-yellow-background-soft-emphasisvar(—color-yellow-16)
--color-yellow-background-soft-mutedvar(—color-yellow-8)
Yellow Semantic Dark Tokens
PropertyValue
--color-yellow-foregroundvar(—color-yellow-lighten-2)
--color-yellow-foreground-emphasisvar(—color-yellow-lighten-4)
--color-yellow-foreground-onfillvar(—color-yellow-darken-5)
--color-yellow-strokevar(—color-yellow)
--color-yellow-stroke-emphasisvar(—color-yellow-lighten-1)
--color-yellow-background-fillvar(—color-yellow)
--color-yellow-background-fill-emphasisvar(—color-yellow-lighten-2)
--color-yellow-background-softvar(—color-yellow-8)
--color-yellow-background-soft-emphasisvar(—color-yellow-24)
--color-yellow-background-soft-mutedvar(—color-yellow-16)
Primary Semantic Light Tokens
PropertyValue
--color-primary-foregroundvar(—color-primary)
--color-primary-foreground-emphasisvar(—color-primary-darken-1)
--color-primary-foreground-mutedvar(—color-primary-64)
--color-primary-foreground-onfillvar(—color-white)
--color-primary-strokevar(—color-primary)
--color-primary-stroke-emphasisvar(—color-primary-darken-1)
--color-primary-background-fillvar(—color-primary)
--color-primary-background-fill-emphasisvar(—color-primary-darken-1)
--color-primary-background-softvar(—color-primary-8)
--color-primary-background-soft-emphasisvar(—color-primary-6)
--color-primary-background-soft-mutedvar(—color-primary-4)
Primary Semantic Dark Tokens
PropertyValue
--color-primary-foregroundvar(—color-gray-100)
--color-primary-foreground-emphasisvar(—color-white)
--color-primary-foreground-mutedvar(—color-gray-200)
--color-primary-foreground-onfillvar(—color-primary)
--color-primary-strokevar(—color-gray-100)
--color-primary-stroke-emphasisvar(—color-white)
--color-primary-background-fillvar(—color-gray-70)
--color-primary-background-fill-emphasisvar(—color-white)
--color-primary-background-softvar(—color-white-8)
--color-primary-background-soft-emphasisvar(—color-white-16)
--color-primary-background-soft-mutedvar(—color-white-12)
Secondary Semantic Light Tokens
PropertyValue
--color-secondary-foregroundvar(—color-secondary-darken-3)
--color-secondary-foreground-emphasisvar(—color-secondary-darken-4)
--color-secondary-foreground-mutedvar(—color-secondary-darken-2)
--color-secondary-foreground-onfillvar(—color-white)
--color-secondary-strokevar(—color-secondary)
--color-secondary-stroke-emphasisvar(—color-secondary-darken-1)
--color-secondary-background-fillvar(—color-secondary-darken-2)
--color-secondary-background-fill-emphasisvar(—color-secondary-darken-3)
--color-secondary-background-softvar(—color-secondary-12)
--color-secondary-background-soft-emphasisvar(—color-secondary-8)
--color-secondary-background-soft-mutedvar(—color-secondary-6)
Secondary Semantic Dark Tokens
PropertyValue
--color-secondary-foregroundvar(—color-secondary-lighten-1)
--color-secondary-foreground-emphasisvar(—color-secondary-lighten-2)
--color-secondary-foreground-mutedvar(—color-secondary)
--color-secondary-foreground-onfillvar(—color-secondary-darken-6)
--color-secondary-strokevar(—color-secondary-darken-1)
--color-secondary-stroke-emphasisvar(—color-secondary)
--color-secondary-background-fillvar(—color-secondary-darken-1)
--color-secondary-background-fill-emphasisvar(—color-secondary)
--color-secondary-background-softvar(—color-secondary-8)
--color-secondary-background-soft-emphasisvar(—color-secondary-24)
--color-secondary-background-soft-mutedvar(—color-secondary-12)

Font Family

PropertyValue
--font-sans”Montserrat”, ui-sans-serif, system-ui, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”, “Noto Color Emoji”

Font Weight

PropertyValue
--font-weight-regular400
--font-weight-medium500
--font-weight-semibold600
--font-weight-bold700
--font-weight-extrabold900

Font Size

PropertyValue
--text-xxs10px
--text-xs12px
--text-sm14px
--text-md16px
--text-lg18px
--text-title-xs20px
--text-title-sm24px
--text-title-md28px
--text-title-lg32px
--text-title-xl36px
--text-title-xxl40px
--text-display-sm46px
--text-display-md52px
--text-display-lg58px

Line Height

PropertyValue
--leading-xxs12px
--leading-xs16px
--leading-sm20px
--leading-md24px
--leading-lg28px
--leading-title-xs28px
--leading-title-sm32px
--leading-title-md36px
--leading-title-lg40px
--leading-title-xl44px
--leading-title-xxl52px
--leading-display-sm62px
--leading-display-md70px
--leading-display-lg78px

Radius

PropertyValue
--radius-none0
--radius-sm4px
--radius-md8px
--radius-lg16px
--radius-pill320px
--radius-circular1600px
--radius-full9999px

Breakpoints

PropertyValue
--breakpoint-tv1920px
--breakpoint-desktop1024px
--breakpoint-tablet600px
--breakpoint-mobile320px

Container

PropertyValue
--container-tv1288px
--container-desktop1288px
--container-tablet768px
--container-mobile480px
PropertyValue
--sidebar-width256px
--sidebar-width-mobile256px
--sidebar-width-icon72px
Last updated on
Getting StartedCustomization