Tokens

Estes são os tokens do design system. Todos os valores estão disponíveis no arquivo tokens.css.

Para alterar os tokens, consulte a seção Personalização.

Observação: para os demais valores, consulte a documentação do Tailwind.

Cores

Branco

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

Preto

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

Escala de cinza

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

Verde

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

Vermelho

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

Amarelo

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

Primária da marca

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

Secundária da marca

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

Cores Cm

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

Cores Go

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

Cores Cir

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

Cores Ped

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

Cores Prev

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

Cores ouro

Propriedade	Valor
--color-gold	rgba(217, 172, 104, 1)
--color-gold-darken-1	rgba(200, 152, 81, 1)
--color-gold-darken-2	rgba(181, 132, 59, 1)
--color-gold-darken-3	rgba(151, 110, 48, 1)
--color-gold-darken-4	rgba(119, 87, 39, 1)
--color-gold-darken-5	rgba(89, 65, 29, 1)
--color-gold-darken-6	rgba(57, 42, 19, 1)
--color-gold-lighten-1	rgba(221, 181, 121, 1)
--color-gold-lighten-2	rgba(229, 199, 153, 1)
--color-gold-lighten-3	rgba(233, 208, 170, 1)
--color-gold-lighten-4	rgba(237, 217, 186, 1)
--color-gold-lighten-5	rgba(242, 226, 202, 1)
--color-gold-lighten-6	rgba(246, 235, 218, 1)
--color-gold-80	rgba(217, 172, 104, 0.8)
--color-gold-64	rgba(217, 172, 104, 0.64)
--color-gold-48	rgba(217, 172, 104, 0.48)
--color-gold-24	rgba(217, 172, 104, 0.24)
--color-gold-16	rgba(217, 172, 104, 0.16)
--color-gold-12	rgba(217, 172, 104, 0.12)
--color-gold-8	rgba(217, 172, 104, 0.08)
--color-gold-6	rgba(217, 172, 104, 0.06)
--color-gold-4	rgba(217, 172, 104, 0.04)
--color-gold-0	rgba(217, 172, 104, 0)

Cores prata

Propriedade	Valor
--color-silver	rgba(120, 120, 120, 1)
--color-silver-darken-1	rgba(99, 99, 99, 1)
--color-silver-darken-2	rgba(79, 79, 79, 1)
--color-silver-darken-3	rgba(69, 69, 69, 1)
--color-silver-darken-4	rgba(59, 59, 59, 1)
--color-silver-darken-5	rgba(48, 48, 48, 1)
--color-silver-darken-6	rgba(38, 38, 38, 1)
--color-silver-lighten-1	rgba(140, 140, 140, 1)
--color-silver-lighten-2	rgba(161, 161, 161, 1)
--color-silver-lighten-3	rgba(181, 181, 181, 1)
--color-silver-lighten-4	rgba(199, 199, 199, 1)
--color-silver-lighten-5	rgba(219, 219, 219, 1)
--color-silver-lighten-6	rgba(240, 240, 240, 1)
--color-silver-80	rgba(120, 120, 120, 0.8)
--color-silver-64	rgba(120, 120, 120, 0.64)
--color-silver-48	rgba(120, 120, 120, 0.48)
--color-silver-24	rgba(120, 120, 120, 0.24)
--color-silver-16	rgba(120, 120, 120, 0.16)
--color-silver-12	rgba(120, 120, 120, 0.12)
--color-silver-8	rgba(120, 120, 120, 0.08)
--color-silver-6	rgba(120, 120, 120, 0.06)
--color-silver-4	rgba(120, 120, 120, 0.04)
--color-silver-0	rgba(120, 120, 120, 0)

Cores bronze

Propriedade	Valor
--color-bronze	rgba(199, 119, 87, 1)
--color-bronze-darken-1	rgba(184, 97, 61, 1)
--color-bronze-darken-2	rgba(153, 80, 51, 1)
--color-bronze-darken-3	rgba(122, 64, 41, 1)
--color-bronze-darken-4	rgba(92, 48, 31, 1)
--color-bronze-darken-5	rgba(61, 32, 20, 1)
--color-bronze-darken-6	rgba(31, 16, 10, 1)
--color-bronze-lighten-1	rgba(209, 144, 117, 1)
--color-bronze-lighten-2	rgba(219, 168, 148, 1)
--color-bronze-lighten-3	rgba(229, 193, 178, 1)
--color-bronze-lighten-4	rgba(240, 218, 209, 1)
--color-bronze-lighten-5	rgba(250, 243, 240, 1)
--color-bronze-80	rgba(199, 119, 87, 0.8)
--color-bronze-64	rgba(199, 119, 87, 0.64)
--color-bronze-48	rgba(199, 119, 87, 0.48)
--color-bronze-24	rgba(199, 119, 87, 0.24)
--color-bronze-16	rgba(199, 119, 87, 0.16)
--color-bronze-12	rgba(199, 119, 87, 0.12)
--color-bronze-8	rgba(199, 119, 87, 0.08)
--color-bronze-6	rgba(199, 119, 87, 0.06)
--color-bronze-4	rgba(199, 119, 87, 0.04)
--color-bronze-0	rgba(199, 119, 87, 0)

Cores base (claro)

Propriedade	Valor
--color-background	var(--color-white)
--color-foreground	var(--color-gray-700)
--color-ring	var(--color-gray-150)
--color-backdrop	rgba(16, 19, 24, 0.3)

Cores base (escuro)

Propriedade	Valor
--color-background	var(--color-gray-850)
--color-foreground	var(--color-white)
--color-ring	var(--color-gray-500)
--color-backdrop	rgba(16, 19, 24, 0.5)

Cores de conteúdo (claro)

Propriedade	Valor
--color-content-title	var(--color-primary)
--color-content-paragraph	var(--color-gray-600)
--color-content-link	var(--color-secondary-darken-2)

Cores de conteúdo (escuro)

Propriedade	Valor
--color-content-title	var(--color-white)
--color-content-paragraph	var(--color-gray-150)
--color-content-link	var(--color-secondary)

Cores de estado (claro)

Propriedade	Valor
--color-state-hover	var(--color-gray-50)
--color-state-focus	var(--color-gray-70)
--color-state-active	var(--color-primary-16)
--color-state-error	var(--color-red-16)
--color-state-success	var(--color-green-16)

Cores de estado (escuro)

Propriedade	Valor
--color-state-hover	var(--color-gray-800)
--color-state-focus	var(--color-gray-700)
--color-state-active	var(--color-white-16)
--color-state-error	var(--color-red-16)
--color-state-success	var(--color-green-16)

Cores de superfície (claro)

Propriedade	Valor
--color-surface-elevated	var(--color-white)
--color-surface-card	var(--color-white)
--color-surface-navigation	var(--color-white)
--color-surface-section	var(--color-white)
--color-surface-page	var(--color-gray-30)
--color-surface-disable	var(--color-white-8)
--color-surface-settings-on	var(--color-white-80)
--color-surface-settings-off	var(--color-white-48)

Cores de superfície (escuro)

Propriedade	Valor
--color-surface-elevated	var(--color-gray-800)
--color-surface-card	var(--color-gray-850)
--color-surface-navigation	var(--color-gray-900)
--color-surface-section	var(--color-gray-850)
--color-surface-page	var(--color-gray-950)
--color-surface-disable	var(--color-black-8)
--color-surface-settings-on	var(--color-black-48)
--color-surface-settings-off	var(--color-gray-950)

Cores de sombra (claro)

Propriedade	Valor
--color-drop-shadow-layer-a	rgba(33, 38, 49, 0.04)
--color-drop-shadow-layer-b	rgba(73, 85, 110, 0.08)
--color-drop-shadow-subtle-layer-a	rgba(33, 38, 49, 0.04)
--color-drop-shadow-subtle-layer-b	rgba(73, 85, 110, 0.08)

Cores de sombra (escuro)

Propriedade	Valor
--color-drop-shadow-layer-a	var(--color-black-24)
--color-drop-shadow-layer-b	var(--color-black-16)
--color-drop-shadow-subtle-layer-a	var(--color-drop-shadow-layer-a)
--color-drop-shadow-subtle-layer-b	var(--color-drop-shadow-layer-b)

Cores de gradiente (claro)

Base

Propriedade	Valor
--color-gradient-base-blur-1	var(--color-primary-lighten-6)
--color-gradient-base-blur-2	var(--color-secondary-lighten-3)
--color-gradient-base-blur-3	var(--color-secondary-lighten-6)
--color-gradient-base-bg-1	var(--color-gray-50)
--color-gradient-base-bg-2	var(--color-gray-10)

Cir

Propriedade	Valor
--color-gradient-cir-blur-1	var(--color-cir-lighten-3)
--color-gradient-cir-blur-2	var(--color-secondary-lighten-1)
--color-gradient-cir-blur-3	var(--color-cir-darken-1)
--color-gradient-cir-bg-1	var(--color-cir-lighten-6)
--color-gradient-cir-bg-2	var(--color-gray-10)

Cm

Propriedade	Valor
--color-gradient-cm-blur-1	var(--color-cm-lighten-4)
--color-gradient-cm-blur-2	var(--color-cm-lighten-2)
--color-gradient-cm-blur-3	var(--color-cm)
--color-gradient-cm-bg-1	var(--color-cm-lighten-6)
--color-gradient-cm-bg-2	var(--color-gray-10)

Go

Propriedade	Valor
--color-gradient-go-blur-1	var(--color-go-lighten-6)
--color-gradient-go-blur-2	var(--color-go-lighten-4)
--color-gradient-go-blur-3	var(--color-go-lighten-2)
--color-gradient-go-bg-1	var(--color-go-lighten-6)
--color-gradient-go-bg-2	var(--color-gray-10)

Ped

Propriedade	Valor
--color-gradient-ped-blur-1	var(--color-ped-lighten-4)
--color-gradient-ped-blur-2	var(--color-ped-lighten-2)
--color-gradient-ped-blur-3	var(--color-ped)
--color-gradient-ped-bg-1	var(--color-ped-lighten-5)
--color-gradient-ped-bg-2	var(--color-gray-10)

Prev

Propriedade	Valor
--color-gradient-prev-blur-1	var(--color-prev-lighten-5)
--color-gradient-prev-blur-2	var(--color-prev-lighten-3)
--color-gradient-prev-blur-3	var(--color-prev)
--color-gradient-prev-bg-1	var(--color-prev-lighten-6)
--color-gradient-prev-bg-2	var(--color-gray-10)

R1

Propriedade	Valor
--color-gradient-r1-blur-1	var(--color-secondary-lighten-1)
--color-gradient-r1-blur-2	var(--color-cm)
--color-gradient-r1-blur-3	var(--color-primary-lighten-5)
--color-gradient-r1-bg-1	var(--color-primary-lighten-2)
--color-gradient-r1-bg-2	var(--color-primary-lighten-6)

Rplus

Propriedade	Valor
--color-gradient-rplus-blur-1	var(--color-prev)
--color-gradient-rplus-blur-2	var(--color-primary-lighten-3)
--color-gradient-rplus-blur-3	var(--color-primary-lighten-5)
--color-gradient-rplus-bg-1	var(--color-primary-lighten-4)
--color-gradient-rplus-bg-2	var(--color-prev-lighten-3)

PT

Propriedade	Valor
--color-gradient-pt-blur-1	var(--color-cir)
--color-gradient-pt-blur-2	var(--color-secondary-darken-1)
--color-gradient-pt-blur-3	var(--color-secondary-darken-2)
--color-gradient-pt-bg-1	var(--color-gray-600)
--color-gradient-pt-bg-2	var(--color-gray-300)

Default

Propriedade	Valor
--color-gradient-default-blur-1	var(--color-gray-10)
--color-gradient-default-blur-2	var(--color-secondary-lighten-5)
--color-gradient-default-blur-3	var(--color-primary-lighten-6)
--color-gradient-default-bg-1	var(--color-gray-150)
--color-gradient-default-bg-2	var(--color-gray-50)

Neutral

Propriedade	Valor
--color-gradient-neutral-blur-1	var(--color-white)
--color-gradient-neutral-blur-2	var(--color-gray-70)
--color-gradient-neutral-blur-3	var(--color-gray-150)
--color-gradient-neutral-bg-1	var(--color-gray-50)
--color-gradient-neutral-bg-2	var(--color-gray-30)

Cores de gradiente (escuro)

Base

Propriedade	Valor
--color-gradient-base-blur-1	var(--color-primary-lighten-3)
--color-gradient-base-blur-2	var(--color-secondary-darken-1)
--color-gradient-base-blur-3	var(--color-secondary)
--color-gradient-base-bg-1	var(--color-primary-darken-1)
--color-gradient-base-bg-2	var(--color-primary-darken-2)

Cir

Propriedade	Valor
--color-gradient-cir-blur-1	var(--color-cir-darken-1)
--color-gradient-cir-blur-2	var(--color-cir-darken-2)
--color-gradient-cir-blur-3	var(--color-cir-darken-3)
--color-gradient-cir-bg-1	var(--color-cir-darken-5)
--color-gradient-cir-bg-2	var(--color-cir-darken-6)

Cm

Propriedade	Valor
--color-gradient-cm-blur-1	var(--color-cm)
--color-gradient-cm-blur-2	var(--color-cm-darken-1)
--color-gradient-cm-blur-3	var(--color-cm-darken-2)
--color-gradient-cm-bg-1	var(--color-cm-darken-4)
--color-gradient-cm-bg-2	var(--color-cm-darken-6)

Go

Propriedade	Valor
--color-gradient-go-blur-1	var(--color-go-lighten-2)
--color-gradient-go-blur-2	var(--color-go)
--color-gradient-go-blur-3	var(--color-go-darken-2)
--color-gradient-go-bg-1	var(--color-go-darken-3)
--color-gradient-go-bg-2	var(--color-go-darken-5)

Ped

Propriedade	Valor
--color-gradient-ped-blur-1	var(--color-ped)
--color-gradient-ped-blur-2	var(--color-ped-darken-3)
--color-gradient-ped-blur-3	var(--color-ped-darken-5)
--color-gradient-ped-bg-1	var(--color-ped-darken-4)
--color-gradient-ped-bg-2	var(--color-yellow-darken-6)

Prev

Propriedade	Valor
--color-gradient-prev-blur-1	var(--color-prev-lighten-1)
--color-gradient-prev-blur-2	var(--color-prev)
--color-gradient-prev-blur-3	var(--color-prev-darken-1)
--color-gradient-prev-bg-1	var(--color-prev-darken-2)
--color-gradient-prev-bg-2	var(--color-prev-darken-4)

R1

Propriedade	Valor
--color-gradient-r1-blur-1	var(--color-secondary)
--color-gradient-r1-blur-2	var(--color-primary-lighten-2)
--color-gradient-r1-blur-3	var(--color-primary-lighten-2)
--color-gradient-r1-bg-1	var(--color-primary)
--color-gradient-r1-bg-2	var(--color-primary-darken-1)

Rplus

Propriedade	Valor
--color-gradient-rplus-blur-1	var(--color-prev-darken-1)
--color-gradient-rplus-blur-2	var(--color-primary-lighten-3)
--color-gradient-rplus-blur-3	var(--color-primary-lighten-1)
--color-gradient-rplus-bg-1	var(--color-primary)
--color-gradient-rplus-bg-2	var(--color-prev-darken-6)

PT

Propriedade	Valor
--color-gradient-pt-blur-1	var(--color-cir-darken-1)
--color-gradient-pt-blur-2	var(--color-secondary-darken-2)
--color-gradient-pt-blur-3	var(--color-secondary-darken-4)
--color-gradient-pt-bg-1	var(--color-gray-800)
--color-gradient-pt-bg-2	var(--color-gray-900)

Default

Propriedade	Valor
--color-gradient-default-blur-1	var(--color-primary-lighten-1)
--color-gradient-default-blur-2	var(--color-secondary-lighten-2)
--color-gradient-default-blur-3	var(--color-primary-lighten-3)
--color-gradient-default-bg-1	var(--color-gray-850)
--color-gradient-default-bg-2	var(--color-gray-900)

Neutral

Propriedade	Valor
--color-gradient-neutral-blur-1	var(--color-gray-900)
--color-gradient-neutral-blur-2	var(--color-gray-850)
--color-gradient-neutral-blur-3	var(--color-gray-800)
--color-gradient-neutral-bg-1	var(--color-gray-850)
--color-gradient-neutral-bg-2	var(--color-gray-950)

Tokens Cm (claro)

Propriedade	Valor
--color-cm-foreground	var(--color-cm-darken-2)
--color-cm-foreground-emphasis	var(--color-cm-darken-4)
--color-cm-foreground-onfill	var(--color-white)
--color-cm-background-fill	var(--color-cm-darken-1)
--color-cm-background-fill-emphasis	var(--color-cm-darken-3)
--color-cm-background-soft	var(--color-cm-8)
--color-cm-background-soft-emphasis	var(--color-cm-4)

Tokens semânticos Cm (escuro)

Propriedade	Valor
--color-cm-foreground	var(--color-cm-lighten-4)
--color-cm-foreground-emphasis	var(--color-cm-lighten-6)
--color-cm-foreground-onfill	var(--color-white)
--color-cm-background-fill	var(--color-cm-darken-2)
--color-cm-background-fill-emphasis	var(--color-cm)
--color-cm-background-soft	var(--color-cm-12)
--color-cm-background-soft-emphasis	var(--color-cm-24)

Tokens Go (claro)

Propriedade	Valor
--color-go-foreground	var(--color-go-darken-1)
--color-go-foreground-emphasis	var(--color-go-darken-3)
--color-go-foreground-onfill	var(--color-white)
--color-go-background-fill	var(--color-go)
--color-go-background-fill-emphasis	var(--color-go-darken-1)
--color-go-background-soft	var(--color-go-8)
--color-go-background-soft-emphasis	var(--color-go-4)

Tokens semânticos Go (escuro)

Propriedade	Valor
--color-go-foreground	var(--color-go-lighten-5)
--color-go-foreground-emphasis	var(--color-go-lighten-6)
--color-go-foreground-onfill	var(--color-white)
--color-go-background-fill	var(--color-go-darken-1)
--color-go-background-fill-emphasis	var(--color-go)
--color-go-background-soft	var(--color-go-16)
--color-go-background-soft-emphasis	var(--color-go-24)

Tokens semânticos Cir (claro)

Propriedade	Valor
--color-cir-foreground	var(--color-cir-darken-4)
--color-cir-foreground-emphasis	var(--color-cir-darken-5)
--color-cir-foreground-onfill	var(--color-cir-darken-6)
--color-cir-background-fill	var(--color-cir)
--color-cir-background-fill-emphasis	var(--color-cir-darken-1)
--color-cir-background-soft	var(--color-cir-16)
--color-cir-background-soft-emphasis	var(--color-cir-8)

Tokens semânticos Cir (escuro)

Propriedade	Valor
--color-cir-foreground	var(--color-cir)
--color-cir-foreground-emphasis	var(--color-cir-lighten-3)
--color-cir-foreground-onfill	var(--color-cir-darken-6)
--color-cir-background-fill	var(--color-cir-darken-1)
--color-cir-background-fill-emphasis	var(--color-cir)
--color-cir-background-soft	var(--color-cir-8)
--color-cir-background-soft-emphasis	var(--color-cir-16)

Tokens semânticos Ped (claro)

Propriedade	Valor
--color-ped-foreground	var(--color-ped-darken-6)
--color-ped-foreground-emphasis	var(--color-ped-darken-7)
--color-ped-foreground-onfill	var(--color-ped-darken-7)
--color-ped-background-fill	var(--color-ped-lighten-1)
--color-ped-background-fill-emphasis	var(--color-ped)
--color-ped-background-soft	var(--color-ped-16)
--color-ped-background-soft-emphasis	var(--color-ped-8)

Tokens semânticos Ped (escuro)

Propriedade	Valor
--color-ped-foreground	var(--color-ped)
--color-ped-foreground-emphasis	var(--color-ped-lighten-1)
--color-ped-foreground-onfill	var(--color-ped-darken-7)
--color-ped-background-fill	var(--color-ped)
--color-ped-background-fill-emphasis	var(--color-ped-lighten-1)
--color-ped-background-soft	var(--color-ped-8)
--color-ped-background-soft-emphasis	var(--color-ped-16)

Tokens semânticos Prev (claro)

Propriedade	Valor
--color-prev-foreground	var(--color-prev)
--color-prev-foreground-emphasis	var(--color-prev-darken-2)
--color-prev-foreground-onfill	var(--color-white)
--color-prev-background-fill	var(--color-prev)
--color-prev-background-fill-emphasis	var(--color-prev-darken-2)
--color-prev-background-soft	var(--color-prev-8)
--color-prev-background-soft-emphasis	var(--color-prev-4)

Tokens semânticos Prev (escuro)

Propriedade	Valor
--color-prev-foreground	var(--color-prev-lighten-5)
--color-prev-foreground-emphasis	var(--color-prev-lighten-6)
--color-prev-foreground-onfill	var(--color-white)
--color-prev-background-fill	var(--color-prev-darken-1)
--color-prev-background-fill-emphasis	var(--color-prev)
--color-prev-background-soft	var(--color-prev-24)
--color-prev-background-soft-emphasis	var(--color-prev-48)

Tokens semânticos ouro (claro)

Propriedade	Valor
--color-gold-foreground	var(--color-gold-darken-4)
--color-gold-foreground-emphasis	var(--color-gold-darken-5)
--color-gold-foreground-onfill	var(--color-gold-darken-6)
--color-gold-background-fill	var(--color-gold-lighten-1)
--color-gold-background-fill-emphasis	var(--color-gold-darken-1)
--color-gold-background-soft	var(--color-gold-16)
--color-gold-background-soft-emphasis	var(--color-gold-8)

Tokens semânticos ouro (escuro)

Propriedade	Valor
--color-gold-foreground	var(--color-gold-lighten-1)
--color-gold-foreground-emphasis	var(--color-gold-lighten-2)
--color-gold-foreground-onfill	var(--color-gold-darken-6)
--color-gold-background-fill	var(--color-gold-darken-1)
--color-gold-background-fill-emphasis	var(--color-gold)
--color-gold-background-soft	var(--color-gold-8)
--color-gold-background-soft-emphasis	var(--color-gold-16)

Tokens semânticos prata (claro)

Propriedade	Valor
--color-silver-foreground	var(--color-silver-darken-3)
--color-silver-foreground-emphasis	var(--color-silver-darken-6)
--color-silver-foreground-onfill	var(--color-white)
--color-silver-background-fill	var(--color-silver-darken-1)
--color-silver-background-fill-emphasis	var(--color-silver-darken-3)
--color-silver-background-soft	var(--color-silver-16)
--color-silver-background-soft-emphasis	var(--color-silver-8)

Tokens semânticos prata (escuro)

Propriedade	Valor
--color-silver-foreground	var(--color-silver-lighten-3)
--color-silver-foreground-emphasis	var(--color-silver-lighten-5)
--color-silver-foreground-onfill	var(--color-white)
--color-silver-background-fill	var(--color-silver-darken-1)
--color-silver-background-fill-emphasis	var(--color-silver)
--color-silver-background-soft	var(--color-silver-8)
--color-silver-background-soft-emphasis	var(--color-silver-16)

Tokens semânticos bronze (claro)

Propriedade	Valor
--color-bronze-foreground	var(--color-bronze-darken-2)
--color-bronze-foreground-emphasis	var(--color-bronze-darken-3)
--color-bronze-foreground-onfill	var(--color-white)
--color-bronze-background-fill	var(--color-bronze)
--color-bronze-background-fill-emphasis	var(--color-bronze-darken-1)
--color-bronze-background-soft	var(--color-bronze-16)
--color-bronze-background-soft-emphasis	var(--color-bronze-8)

Tokens semânticos bronze (escuro)

Propriedade	Valor
--color-bronze-foreground	var(--color-bronze-lighten-3)
--color-bronze-foreground-emphasis	var(--color-bronze-lighten-4)
--color-bronze-foreground-onfill	var(--color-bronze-darken-5)
--color-bronze-background-fill	var(--color-bronze-lighten-1)
--color-bronze-background-fill-emphasis	var(--color-bronze)
--color-bronze-background-soft	var(--color-bronze-8)
--color-bronze-background-soft-emphasis	var(--color-bronze-16)

Tokens semânticos de cor gerais

Estes tokens carregam significado semântico e se adaptam sozinhos aos temas claro e escuro:

Tokens semânticos cinza (claro)

Propriedade	Valor
--color-gray-foreground	var(--color-gray-600)
--color-gray-foreground-emphasis	var(--color-gray-700)
--color-gray-foreground-muted	var(--color-gray-450)
--color-gray-foreground-onfill	var(--color-white)
--color-gray-stroke	var(--color-gray-150)
--color-gray-stroke-emphasis	var(--color-gray-200)
--color-gray-stroke-muted	var(--color-gray-100)
--color-gray-background-fill	var(--color-gray-700)
--color-gray-background-fill-emphasis	var(--color-gray-850)
--color-gray-background-fill-muted	var(--color-gray-400)
--color-gray-background-soft	var(--color-gray-70)
--color-gray-background-soft-emphasis	var(--color-gray-50)
--color-gray-background-soft-muted	var(--color-gray-30)

Tokens semânticos cinza (escuro)

Propriedade	Valor
--color-gray-foreground	var(--color-gray-100)
--color-gray-foreground-emphasis	var(--color-white)
--color-gray-foreground-muted	var(--color-gray-150)
--color-gray-foreground-onfill	var(--color-gray-700)
--color-gray-stroke	var(--color-gray-600)
--color-gray-stroke-emphasis	var(--color-gray-500)
--color-gray-stroke-muted	var(--color-gray-700)
--color-gray-background-fill	var(--color-gray-100)
--color-gray-background-fill-emphasis	var(--color-gray-30)
--color-gray-background-fill-muted	var(--color-gray-300)
--color-gray-background-soft	var(--color-gray-800)
--color-gray-background-soft-emphasis	var(--color-gray-600)
--color-gray-background-soft-muted	var(--color-gray-700)

Tokens semânticos verde

Cada --color-green-* aponta para o --color-feedback-success-* de mesmo sufixo, então os dois têm sempre a mesma cor, no tema claro e no escuro. O Figma usa os de feedback de sucesso: prefira esses em código novo.

Propriedade	Valor
--color-green-foreground	var(--color-feedback-success-foreground)
--color-green-foreground-emphasis	var(--color-feedback-success-foreground-emphasis)
--color-green-foreground-onfill	var(--color-feedback-success-foreground-onfill)
--color-green-stroke	var(--color-feedback-success-stroke)
--color-green-stroke-emphasis	var(--color-feedback-success-stroke-emphasis)
--color-green-background-fill	var(--color-feedback-success-background-fill)
--color-green-background-fill-emphasis	var(--color-feedback-success-background-fill-emphasis)
--color-green-background-soft	var(--color-feedback-success-background-soft)
--color-green-background-soft-emphasis	var(--color-feedback-success-background-soft-emphasis)
--color-green-background-soft-muted	var(--color-feedback-success-background-soft-muted)

Tokens semânticos vermelho

Cada --color-red-* aponta para o --color-feedback-error-* de mesmo sufixo, então os dois têm sempre a mesma cor, no tema claro e no escuro. O Figma usa os de feedback de erro: prefira esses em código novo.

Propriedade	Valor
--color-red-foreground	var(--color-feedback-error-foreground)
--color-red-foreground-emphasis	var(--color-feedback-error-foreground-emphasis)
--color-red-foreground-onfill	var(--color-feedback-error-foreground-onfill)
--color-red-stroke	var(--color-feedback-error-stroke)
--color-red-stroke-emphasis	var(--color-feedback-error-stroke-emphasis)
--color-red-background-fill	var(--color-feedback-error-background-fill)
--color-red-background-fill-emphasis	var(--color-feedback-error-background-fill-emphasis)
--color-red-background-soft	var(--color-feedback-error-background-soft)
--color-red-background-soft-emphasis	var(--color-feedback-error-background-soft-emphasis)
--color-red-background-soft-muted	var(--color-feedback-error-background-soft-muted)

Tokens semânticos amarelo

Cada --color-yellow-* aponta para o --color-feedback-warning-* de mesmo sufixo, então os dois têm sempre a mesma cor, no tema claro e no escuro. O Figma usa os de feedback de aviso: prefira esses em código novo.

Propriedade	Valor
--color-yellow-foreground	var(--color-feedback-warning-foreground)
--color-yellow-foreground-emphasis	var(--color-feedback-warning-foreground-emphasis)
--color-yellow-foreground-onfill	var(--color-feedback-warning-foreground-onfill)
--color-yellow-stroke	var(--color-feedback-warning-stroke)
--color-yellow-stroke-emphasis	var(--color-feedback-warning-stroke-emphasis)
--color-yellow-background-fill	var(--color-feedback-warning-background-fill)
--color-yellow-background-fill-emphasis	var(--color-feedback-warning-background-fill-emphasis)
--color-yellow-background-soft	var(--color-feedback-warning-background-soft)
--color-yellow-background-soft-emphasis	var(--color-feedback-warning-background-soft-emphasis)
--color-yellow-background-soft-muted	var(--color-feedback-warning-background-soft-muted)

Tokens semânticos de feedback de sucesso (claro)

Propriedade	Valor
--color-feedback-success-foreground	var(--color-green-darken-3)
--color-feedback-success-foreground-emphasis	var(--color-green-darken-4)
--color-feedback-success-foreground-onfill	var(--color-white)
--color-feedback-success-stroke	var(--color-green)
--color-feedback-success-stroke-emphasis	var(--color-green-darken-2)
--color-feedback-success-background-fill	var(--color-green-darken-2)
--color-feedback-success-background-fill-emphasis	var(--color-green-darken-3)
--color-feedback-success-background-soft	var(--color-green-16)
--color-feedback-success-background-soft-emphasis	var(--color-green-12)
--color-feedback-success-background-soft-muted	var(--color-green-6)

Tokens semânticos de feedback de sucesso (escuro)

Propriedade	Valor
--color-feedback-success-foreground	var(--color-green-lighten-4)
--color-feedback-success-foreground-emphasis	var(--color-green-lighten-6)
--color-feedback-success-foreground-onfill	var(--color-white)
--color-feedback-success-stroke	var(--color-green-darken-2)
--color-feedback-success-stroke-emphasis	var(--color-green)
--color-feedback-success-background-fill	var(--color-green-darken-3)
--color-feedback-success-background-fill-emphasis	var(--color-green-darken-2)
--color-feedback-success-background-soft	var(--color-green-8)
--color-feedback-success-background-soft-emphasis	var(--color-green-24)
--color-feedback-success-background-soft-muted	var(--color-green-16)

Tokens semânticos de feedback de erro (claro)

Propriedade	Valor
--color-feedback-error-foreground	var(--color-red-darken-2)
--color-feedback-error-foreground-emphasis	var(--color-red-darken-3)
--color-feedback-error-foreground-onfill	var(--color-white)
--color-feedback-error-stroke	var(--color-red)
--color-feedback-error-stroke-emphasis	var(--color-red-darken-1)
--color-feedback-error-background-fill	var(--color-red-darken-1)
--color-feedback-error-background-fill-emphasis	var(--color-red-darken-2)
--color-feedback-error-background-soft	var(--color-red-12)
--color-feedback-error-background-soft-emphasis	var(--color-red-8)
--color-feedback-error-background-soft-muted	var(--color-red-4)

Tokens semânticos de feedback de erro (escuro)

Propriedade	Valor
--color-feedback-error-foreground	var(--color-red-lighten-3)
--color-feedback-error-foreground-emphasis	var(--color-red-lighten-4)
--color-feedback-error-foreground-onfill	var(--color-white)
--color-feedback-error-stroke	var(--color-red-darken-1)
--color-feedback-error-stroke-emphasis	var(--color-red)
--color-feedback-error-background-fill	var(--color-red-darken-2)
--color-feedback-error-background-fill-emphasis	var(--color-red-darken-1)
--color-feedback-error-background-soft	var(--color-red-12)
--color-feedback-error-background-soft-emphasis	var(--color-red-24)
--color-feedback-error-background-soft-muted	var(--color-red-16)

Tokens semânticos de feedback de aviso (claro)

Propriedade	Valor
--color-feedback-warning-foreground	var(--color-yellow-darken-4)
--color-feedback-warning-foreground-emphasis	var(--color-yellow-darken-5)
--color-feedback-warning-foreground-onfill	var(--color-yellow-darken-5)
--color-feedback-warning-stroke	var(--color-yellow-lighten-1)
--color-feedback-warning-stroke-emphasis	var(--color-yellow)
--color-feedback-warning-background-fill	var(--color-yellow-lighten-2)
--color-feedback-warning-background-fill-emphasis	var(--color-yellow)
--color-feedback-warning-background-soft	var(--color-yellow-24)
--color-feedback-warning-background-soft-emphasis	var(--color-yellow-16)
--color-feedback-warning-background-soft-muted	var(--color-yellow-8)

Tokens semânticos de feedback de aviso (escuro)

Propriedade	Valor
--color-feedback-warning-foreground	var(--color-yellow-lighten-2)
--color-feedback-warning-foreground-emphasis	var(--color-yellow-lighten-4)
--color-feedback-warning-foreground-onfill	var(--color-yellow-darken-5)
--color-feedback-warning-stroke	var(--color-yellow)
--color-feedback-warning-stroke-emphasis	var(--color-yellow-lighten-1)
--color-feedback-warning-background-fill	var(--color-yellow)
--color-feedback-warning-background-fill-emphasis	var(--color-yellow-lighten-2)
--color-feedback-warning-background-soft	var(--color-yellow-8)
--color-feedback-warning-background-soft-emphasis	var(--color-yellow-24)
--color-feedback-warning-background-soft-muted	var(--color-yellow-16)

Tokens semânticos de cor primária (claro)

Propriedade	Valor
--color-primary-foreground	var(--color-primary)
--color-primary-foreground-emphasis	var(--color-primary-darken-1)
--color-primary-foreground-muted	var(--color-primary-64)
--color-primary-foreground-onfill	var(--color-white)
--color-primary-stroke	var(--color-primary)
--color-primary-stroke-emphasis	var(--color-primary-darken-1)
--color-primary-background-fill	var(--color-primary)
--color-primary-background-fill-emphasis	var(--color-primary-darken-1)
--color-primary-background-soft	var(--color-primary-8)
--color-primary-background-soft-emphasis	var(--color-primary-6)
--color-primary-background-soft-muted	var(--color-primary-4)

Tokens semânticos de cor primária (escuro)

Propriedade	Valor
--color-primary-foreground	var(--color-gray-100)
--color-primary-foreground-emphasis	var(--color-white)
--color-primary-foreground-muted	var(--color-gray-200)
--color-primary-foreground-onfill	var(--color-primary)
--color-primary-stroke	var(--color-gray-100)
--color-primary-stroke-emphasis	var(--color-white)
--color-primary-background-fill	var(--color-gray-70)
--color-primary-background-fill-emphasis	var(--color-white)
--color-primary-background-soft	var(--color-white-8)
--color-primary-background-soft-emphasis	var(--color-white-16)
--color-primary-background-soft-muted	var(--color-white-12)

Tokens semânticos de cor secundária (claro)

Propriedade	Valor
--color-secondary-foreground	var(--color-secondary-darken-3)
--color-secondary-foreground-emphasis	var(--color-secondary-darken-4)
--color-secondary-foreground-muted	var(--color-secondary-darken-2)
--color-secondary-foreground-onfill	var(--color-white)
--color-secondary-stroke	var(--color-secondary)
--color-secondary-stroke-emphasis	var(--color-secondary-darken-1)
--color-secondary-background-fill	var(--color-secondary-darken-2)
--color-secondary-background-fill-emphasis	var(--color-secondary-darken-3)
--color-secondary-background-soft	var(--color-secondary-12)
--color-secondary-background-soft-emphasis	var(--color-secondary-8)
--color-secondary-background-soft-muted	var(--color-secondary-6)

Tokens semânticos de cor secundária (escuro)

Propriedade	Valor
--color-secondary-foreground	var(--color-secondary-lighten-1)
--color-secondary-foreground-emphasis	var(--color-secondary-lighten-2)
--color-secondary-foreground-muted	var(--color-secondary)
--color-secondary-foreground-onfill	var(--color-secondary-darken-6)
--color-secondary-stroke	var(--color-secondary-darken-1)
--color-secondary-stroke-emphasis	var(--color-secondary)
--color-secondary-background-fill	var(--color-secondary-darken-1)
--color-secondary-background-fill-emphasis	var(--color-secondary)
--color-secondary-background-soft	var(--color-secondary-8)
--color-secondary-background-soft-emphasis	var(--color-secondary-24)
--color-secondary-background-soft-muted	var(--color-secondary-12)

Família tipográfica

Propriedade	Valor
--font-sans	"Montserrat", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Peso da fonte

Propriedade	Valor
--font-weight-regular	400
--font-weight-medium	500
--font-weight-semibold	600
--font-weight-bold	700
--font-weight-extrabold	800

Tamanho da fonte

Propriedade	Valor
--text-xxs	10px
--text-xs	12px
--text-sm	14px
--text-base	15px
--text-md	16px
--text-lg	18px
--text-title-xs	20px
--text-title-sm	24px
--text-title-md	28px
--text-title-lg	32px
--text-title-xl	36px
--text-title-xxl	40px
--text-display-sm	46px
--text-display-md	52px
--text-display-lg	58px

Altura de linha

Propriedade	Valor
--leading-xxs	12px
--leading-xs	16px
--leading-sm	20px
--leading-md	24px
--leading-lg	28px
--leading-title-xs	28px
--leading-title-sm	32px
--leading-title-md	36px
--leading-title-lg	40px
--leading-title-xl	44px
--leading-title-xxl	52px
--leading-display-sm	62px
--leading-display-md	70px
--leading-display-lg	78px

Raio de borda

O --radius-xl (32px) ainda não tem classe própria: o rounded-xl de hoje é o 12px padrão do Tailwind, e não o radius-xl do Figma. Para 32px, use rounded-[--radius-xl].

Propriedade	Valor
--radius-none	0
--radius-sm	4px
--radius-md	8px
--radius-lg	16px
--radius-xl	32px
--radius-pill	320px
--radius-circular	1600px
--radius-full	9999px

Sombra

Os níveis de sombra são classes do Tailwind, com duas camadas cada. As cores das camadas vêm de --color-drop-shadow-layer-a e --color-drop-shadow-layer-b e mudam no tema escuro.

Propriedade	Valor
shadow-level-1	0 0 2px 0 var(--color-drop-shadow-layer-a), 0 2px 4px 0 var(--color-drop-shadow-layer-b)
shadow-level-1-subtle	0 0 2px 0 var(--color-drop-shadow-subtle-layer-a), 0 2px 4px 0 var(--color-drop-shadow-subtle-layer-b)
shadow-level-2	0 1px 4px 0 var(--color-drop-shadow-layer-a), 0 4px 8px 0 var(--color-drop-shadow-layer-b)
shadow-level-3	0 2px 8px 0 var(--color-drop-shadow-layer-a), 0 8px 16px 0 var(--color-drop-shadow-layer-b)
shadow-level-4	0 4px 16px 0 var(--color-drop-shadow-layer-a), 0 16px 32px 0 var(--color-drop-shadow-layer-b)
shadow-level-5	0 8px 32px 0 var(--color-drop-shadow-layer-a), 0 32px 64px 0 var(--color-drop-shadow-layer-b)

Breakpoints

Propriedade	Valor
--breakpoint-tv	1920px
--breakpoint-desktop	1024px
--breakpoint-tablet	600px
--breakpoint-mobile	320px

Container

Propriedade	Valor
--container-tv	1288px
--container-desktop	1288px
--container-tablet	768px
--container-mobile	480px

Sidebar

Propriedade	Valor
--sidebar-width	256px
--sidebar-width-mobile	256px
--sidebar-width-icon	72px