Geral

O sistema de cor do EDS tem 3 camadas. Cada uma consome a anterior; o componente usa só a última.

Base (Nuxt UI Colors) → Semânticas (Primary, Success, Error…) → Tokens (--ui-*) → ComponenteUse sempre a camada Token em componentes e telas. Nunca HEX ou cor base direta.

Regra de ouro: em componente/tela/modal use token (var(--ui-...)). Nunca hex, nunca cor base, nunca semântica direta. O token resolve light/dark sozinho.

Boas Práticas

As cores do ME existem para manter identidade e consistência — da primária aos estados de feedback. Ao construir telas no código ou exportar para o Figma, use apenas os tons documentados nesta página.

Quando usar

Cores base só como ponto de partida para compor semânticas e tokens.

Nomenclatura oficial da escala do sistema (ex.: `me-brand-500`).

Consultar a paleta base para achar o tom exato ao mapear uma nova necessidade.

Manter consistência usando apenas as famílias já aprovadas.

Níveis de intensidade da escala para orientar contraste e acessibilidade.

Quando não usar

Cores base ou HEX direto em componentes, telas e código final.

Valores HEX soltos, arbitrários ou inventados fora das escalas.

Associar significado direto à cor base (ex.: "Red 500 é a cor de erro").

Alterar opacidade (alpha) ou criar tons manualmente fora da estrutura.

Pular a hierarquia aplicando cor base sem passar pela camada semântica.

Cores semânticas

Sete famílias com papel definido na interface. Cada uma tem escala 50 → 950, variantes alpha, tokens prontos e orientações de uso:

Papel	Para que serve	Página
Primary	Identidade da marca e ações principais (CTAs)	Primary
Neutral	Texto, fundos, bordas e estrutura visual	Neutral
Secondary	Apoio visual e hierarquia complementar	Secondary
Success	Confirmações, validações e feedbacks positivos	Success
Error	Falhas, erros críticos e ações destrutivas	Error
Warning	Avisos, pendências e situações de cautela	Warning
Info	Contexto informativo e orientações neutras	Info

Depois das semânticas vêm os Tokens — a camada final consumida pelos componentes.

Paletas base (Nuxt UI Colors)

Matéria-prima crua, escala 50 → 950 (nome · hex · oklch). Não entram direto no componente — alimentam as semânticas. Coleção Figma 0 - Nuxt UI Colors.

Variable

white#FFFFFFoklch(1.0000 0.0000 89.88)

ME brand

me-brand-50#EDF3FFoklch(0.9631 0.0173 264.49)

me-brand-100#D0E0FFoklch(0.9045 0.0460 263.71)

me-brand-200#A9C6FFoklch(0.8255 0.0867 263.61)

me-brand-300#7CA8FFoklch(0.7366 0.1355 263.07)

me-brand-400#437FFFoklch(0.6260 0.2009 263.01)

me-brand-500#1052E0oklch(0.5003 0.2245 262.72)

me-brand-600#0C3DA8oklch(0.4073 0.1788 262.79)

me-brand-700#082970oklch(0.3109 0.1285 262.66)

me-brand-800#061D4Eoklch(0.2494 0.0951 262.44)

me-brand-900#041438oklch(0.2043 0.0740 262.34)

me-brand-950#020C22oklch(0.1591 0.0500 259.63)

Slate

slate-50#F8FAFCoklch(0.9842 0.0034 247.86)

slate-100#F1F5F9oklch(0.9683 0.0069 247.90)

slate-200#E2E8F0oklch(0.9288 0.0126 255.51)

slate-300#CAD5E2oklch(0.8686 0.0216 252.51)

slate-400#90A1B9oklch(0.7038 0.0402 256.99)

slate-500#64748Eoklch(0.5556 0.0449 260.06)

slate-600#45556Coklch(0.4454 0.0430 257.42)

slate-700#314158oklch(0.3717 0.0449 257.42)

slate-800#1D293Doklch(0.2799 0.0408 260.33)

slate-900#0F172Boklch(0.2084 0.0417 266.36)

slate-950#020618oklch(0.1298 0.0425 265.13)

Gray

gray-50#F9FAFBoklch(0.9846 0.0017 247.84)

gray-100#F3F4F6oklch(0.9670 0.0029 264.54)

gray-200#E5E7EBoklch(0.9276 0.0058 264.53)

gray-300#D1D5DBoklch(0.8717 0.0093 258.34)

gray-400#99A1AFoklch(0.7071 0.0224 261.75)

gray-500#6A7282oklch(0.5510 0.0267 264.33)

gray-600#4A5565oklch(0.4461 0.0298 257.68)

gray-700#364153oklch(0.3731 0.0343 260.17)

gray-800#1E2939oklch(0.2784 0.0335 257.67)

gray-900#101820oklch(0.2050 0.0200 248.83)

gray-950#030712oklch(0.1296 0.0274 261.69)

Zinc

zinc-50#FAFAFAoklch(0.9851 0.0000 89.88)

zinc-100#F4F4F5oklch(0.9674 0.0013 286.38)

zinc-200#E4E4E7oklch(0.9197 0.0040 286.32)

zinc-300#D4D4D8oklch(0.8711 0.0055 286.29)

zinc-400#9F9FA9oklch(0.7057 0.0144 286.02)

zinc-500#71717Boklch(0.5520 0.0153 285.89)

zinc-600#52525Coklch(0.4422 0.0162 285.72)

zinc-700#3F3F46oklch(0.3703 0.0119 285.81)

zinc-800#27272Aoklch(0.2739 0.0055 286.03)

zinc-900#18181Boklch(0.2103 0.0059 285.89)

zinc-950#09090Boklch(0.1408 0.0044 285.82)

Neutral

neutral-50#FAFAFAoklch(0.9851 0.0000 89.88)

neutral-100#F5F5F5oklch(0.9702 0.0000 89.88)

neutral-200#E5E5E5oklch(0.9219 0.0000 89.88)

neutral-300#D4D4D4oklch(0.8699 0.0000 89.88)

neutral-400#A1A1A1oklch(0.7090 0.0000 89.88)

neutral-500#737373oklch(0.5555 0.0000 89.88)

neutral-600#525252oklch(0.4386 0.0000 89.88)

neutral-700#404040oklch(0.3715 0.0000 89.88)

neutral-800#262626oklch(0.2686 0.0000 89.88)

neutral-900#171717oklch(0.2046 0.0000 89.88)

neutral-950#0A0A0Aoklch(0.1448 0.0000 89.88)

Stone

stone-50#FAFAF9oklch(0.9848 0.0013 106.42)

stone-100#F5F5F4oklch(0.9699 0.0013 106.42)

stone-200#E7E5E4oklch(0.9232 0.0026 48.72)

stone-300#D6D3D1oklch(0.8687 0.0043 56.37)

stone-400#A6A09Boklch(0.7093 0.0100 62.53)

stone-500#79716Boklch(0.5540 0.0136 59.40)

stone-600#57534Doklch(0.4441 0.0110 78.21)

stone-700#44403Boklch(0.3738 0.0100 73.59)

stone-800#292524oklch(0.2685 0.0063 34.30)

stone-900#1C1917oklch(0.2161 0.0061 56.04)

stone-950#0C0A09oklch(0.1469 0.0041 49.25)

Red

red-50#FEF2F2oklch(0.9705 0.0129 17.38)

red-100#FEE2E2oklch(0.9356 0.0309 17.72)

red-200#FFC9C9oklch(0.8834 0.0616 18.39)

red-300#FFA2A2oklch(0.8053 0.1109 19.78)

red-400#FF6467oklch(0.7022 0.1892 22.23)

red-500#FB2C36oklch(0.6378 0.2373 25.44)

red-600#E7000Boklch(0.5830 0.2387 28.48)

red-700#C10007oklch(0.5095 0.2086 28.51)

red-800#9F0712oklch(0.4446 0.1774 26.79)

red-900#82181Aoklch(0.3967 0.1408 25.71)

red-950#460809oklch(0.2575 0.0918 25.84)

Orange

orange-50#FFF7EDoklch(0.9796 0.0158 73.68)

orange-100#FFEDD4oklch(0.9540 0.0382 76.20)

orange-200#FFD6A8oklch(0.9001 0.0753 69.86)

orange-300#FFB86Aoklch(0.8337 0.1256 67.19)

orange-400#FF8904oklch(0.7458 0.1802 56.73)

orange-500#FF6900oklch(0.6996 0.2020 44.44)

orange-600#F54A00oklch(0.6481 0.2166 37.07)

orange-700#CA3500oklch(0.5542 0.1922 35.48)

orange-800#9F2D00oklch(0.4696 0.1566 37.15)

orange-900#7E2A0Coklch(0.4073 0.1228 38.02)

orange-950#441306oklch(0.2662 0.0789 35.91)

Amber

amber-50#FFFBEBoklch(0.9869 0.0214 95.28)

amber-100#FEF3C6oklch(0.9617 0.0592 95.89)

amber-200#FEE685oklch(0.9244 0.1203 95.85)

amber-300#FFD230oklch(0.8781 0.1688 91.86)

amber-400#FFBA00oklch(0.8309 0.1714 81.55)

amber-500#FD9A00oklch(0.7712 0.1721 65.68)

amber-600#E17100oklch(0.6671 0.1685 53.38)

amber-700#BB4D00oklch(0.5570 0.1583 45.36)

amber-800#973C00oklch(0.4747 0.1358 44.98)

amber-900#7B3306oklch(0.4149 0.1126 45.88)

amber-950#461901oklch(0.2790 0.0773 45.60)

Yellow

yellow-50#FEFCE8oklch(0.9873 0.0262 102.21)

yellow-100#FEF9C2oklch(0.9727 0.0706 103.29)

yellow-200#FFF085oklch(0.9453 0.1293 101.40)

yellow-300#FFDF20oklch(0.9032 0.1817 98.27)

yellow-400#FCC800oklch(0.8544 0.1746 89.64)

yellow-500#EFB100oklch(0.7966 0.1638 83.11)

yellow-600#D08700oklch(0.6822 0.1465 71.47)

yellow-700#A65F00oklch(0.5548 0.1271 62.52)

yellow-800#894B00oklch(0.4776 0.1115 60.43)

yellow-900#733E0Aoklch(0.4215 0.0952 57.94)

yellow-950#432004oklch(0.2871 0.0662 54.59)

Lime

lime-50#F7FEE7oklch(0.9857 0.0310 120.76)

lime-100#ECFCCAoklch(0.9667 0.0671 122.08)

lime-200#D8F999oklch(0.9369 0.1264 124.26)

lime-300#BBF451oklch(0.8980 0.1965 126.71)

lime-400#9AE600oklch(0.8426 0.2256 129.65)

lime-500#7CCF00oklch(0.7709 0.2156 132.45)

lime-600#5EA500oklch(0.6493 0.1841 133.28)

lime-700#497D00oklch(0.5321 0.1487 132.39)

lime-800#3D6300oklch(0.4535 0.1235 130.78)

lime-900#35530Eoklch(0.4039 0.1003 130.80)

lime-950#192E03oklch(0.2731 0.0716 132.27)

Green

green-50#EFFDF5oklch(0.9815 0.0181 161.13)

green-100#D9FBE8oklch(0.9586 0.0434 161.03)

green-200#B3F5D1oklch(0.9163 0.0826 160.36)

green-300#75EDAEoklch(0.8599 0.1414 158.46)

green-400#00DC82oklch(0.7862 0.1920 155.63)

green-500#00C16Aoklch(0.7114 0.1807 153.66)

green-600#00A155oklch(0.6215 0.1602 152.95)

green-700#007F45oklch(0.5235 0.1317 154.13)

green-800#016538oklch(0.4454 0.1093 155.17)

green-900#0A5331oklch(0.3912 0.0888 156.63)

green-950#052E16oklch(0.2664 0.0628 152.93)

Emerald

emerald-50#ECFDF5oklch(0.9793 0.0207 166.11)

emerald-100#D0FAE5oklch(0.9498 0.0516 163.63)

emerald-200#A4F4CFoklch(0.9053 0.0939 163.87)

emerald-300#5EE9B5oklch(0.8441 0.1425 165.23)

emerald-400#00D492oklch(0.7688 0.1687 161.95)

emerald-500#00BC7Doklch(0.7019 0.1577 160.44)

emerald-600#009966oklch(0.6031 0.1344 160.92)

emerald-700#007A55oklch(0.5128 0.1100 163.56)

emerald-800#006045oklch(0.4336 0.0901 165.87)

emerald-900#004F3Boklch(0.3800 0.0763 168.71)

emerald-950#022C22oklch(0.2621 0.0487 172.55)

Teal

teal-50#F0FDFAoklch(0.9836 0.0142 180.72)

teal-100#CBFBF1oklch(0.9520 0.0507 181.07)

teal-200#96F7E4oklch(0.9108 0.0962 180.11)

teal-300#46ECD5oklch(0.8539 0.1375 181.57)

teal-400#00D5BEoklch(0.7830 0.1408 181.38)

teal-500#00BBA7oklch(0.7105 0.1276 181.60)

teal-600#009689oklch(0.6049 0.1070 184.17)

teal-700#00786Foklch(0.5152 0.0905 185.73)

teal-800#005F5Aoklch(0.4376 0.0759 188.55)

teal-900#0B4F4Aoklch(0.3871 0.0634 187.21)

teal-950#022F2Eoklch(0.2766 0.0460 192.53)

Cyan

cyan-50#ECFEFFoklch(0.9841 0.0189 200.87)

cyan-100#CEFAFEoklch(0.9556 0.0453 203.23)

cyan-200#A2F4FDoklch(0.9176 0.0805 204.61)

cyan-300#53EAFDoklch(0.8654 0.1272 207.08)

cyan-400#00D3F2oklch(0.7965 0.1395 213.23)

cyan-500#00B8DBoklch(0.7224 0.1298 217.95)

cyan-600#0092B8oklch(0.6136 0.1159 224.64)

cyan-700#007595oklch(0.5234 0.0995 225.32)

cyan-800#005F78oklch(0.4510 0.0845 223.79)

cyan-900#104E64oklch(0.3972 0.0698 227.19)

cyan-950#053345oklch(0.3015 0.0565 230.16)

Sky

sky-50#F0F9FFoklch(0.9771 0.0125 236.62)

sky-100#DFF2FEoklch(0.9507 0.0258 235.35)

sky-200#B8E6FEoklch(0.9005 0.0579 230.91)

sky-300#74D4FFoklch(0.8271 0.1090 229.20)

sky-400#00BCFFoklch(0.7484 0.1551 233.25)

sky-500#00A6F4oklch(0.6920 0.1595 240.38)

sky-600#0084D1oklch(0.5933 0.1505 245.37)

sky-700#0069A8oklch(0.5040 0.1281 245.46)

sky-800#00598Aoklch(0.4455 0.1073 242.79)

sky-900#024A70oklch(0.3907 0.0894 240.61)

sky-950#052F4Aoklch(0.2932 0.0658 242.91)

Blue

blue-50#EFF6FFoklch(0.9705 0.0142 254.60)

blue-100#DBEAFEoklch(0.9319 0.0316 255.59)

blue-200#BEDBFFoklch(0.8820 0.0588 253.97)

blue-300#8EC5FFoklch(0.8071 0.1007 250.45)

blue-400#51A2FFoklch(0.7040 0.1583 253.63)

blue-500#2B7FFFoklch(0.6187 0.2067 259.23)

blue-600#155DFCoklch(0.5465 0.2455 262.87)

blue-700#1447E6oklch(0.4878 0.2432 264.40)

blue-800#193CB8oklch(0.4242 0.1982 265.50)

blue-900#1C398Eoklch(0.3796 0.1453 265.47)

blue-950#162456oklch(0.2810 0.0924 268.13)

Indigo

indigo-50#EEF2FFoklch(0.9619 0.0179 272.31)

indigo-100#E0E7FFoklch(0.9299 0.0334 272.79)

indigo-200#C6D2FFoklch(0.8695 0.0638 273.31)

indigo-300#A3B3FFoklch(0.7833 0.1100 274.47)

indigo-400#7C86FFoklch(0.6696 0.1767 276.95)

indigo-500#615FFFoklch(0.5834 0.2305 277.07)

indigo-600#4F39F6oklch(0.5102 0.2618 276.94)

indigo-700#432DD7oklch(0.4562 0.2396 276.93)

indigo-800#372AACoklch(0.3988 0.1949 277.32)

indigo-900#312C85oklch(0.3588 0.1436 278.81)

indigo-950#1E1A4Doklch(0.2571 0.0908 281.44)

Violet

violet-50#F5F3FFoklch(0.9691 0.0161 293.76)

violet-100#EDE9FEoklch(0.9433 0.0284 294.59)

violet-200#DDD6FEoklch(0.8943 0.0549 293.28)

violet-300#C4B4FFoklch(0.8101 0.1055 293.70)

violet-400#A684FFoklch(0.6989 0.1760 294.12)

violet-500#8E51FFoklch(0.6006 0.2425 293.89)

violet-600#7F22FEoklch(0.5405 0.2811 292.85)

violet-700#7008E7oklch(0.4907 0.2699 292.56)

violet-800#5D0EC0oklch(0.4316 0.2320 292.71)

violet-900#4D179Aoklch(0.3801 0.1888 293.64)

violet-950#2F0D68oklch(0.2840 0.1414 291.29)

Purple

purple-50#FAF5FFoklch(0.9768 0.0142 308.30)

purple-100#F3E8FFoklch(0.9464 0.0327 307.17)

purple-200#E9D4FFoklch(0.9005 0.0621 307.20)

purple-300#DAB2FFoklch(0.8254 0.1135 307.79)

purple-400#C27AFFoklch(0.7100 0.1961 307.11)

purple-500#AD46FFoklch(0.6217 0.2589 305.31)

purple-600#9810FAoklch(0.5576 0.2877 302.30)

purple-700#8200DBoklch(0.4981 0.2634 301.68)

purple-800#6E11B0oklch(0.4383 0.2179 303.91)

purple-900#59168Boklch(0.3802 0.1761 304.78)

purple-950#3C0366oklch(0.2909 0.1487 302.99)

Fuchsia

fuchsia-50#FDF4FFoklch(0.9773 0.0173 320.06)

fuchsia-100#FAE8FFoklch(0.9520 0.0360 318.85)

fuchsia-200#F6CFFFoklch(0.9024 0.0766 319.91)

fuchsia-300#F4A8FFoklch(0.8334 0.1427 322.27)

fuchsia-400#ED6BFFoklch(0.7393 0.2353 322.64)

fuchsia-500#E12AFBoklch(0.6664 0.2950 322.08)

fuchsia-600#C800DEoklch(0.5985 0.2831 322.76)

fuchsia-700#A800B7oklch(0.5232 0.2461 323.82)

fuchsia-800#8A0194oklch(0.4516 0.2109 324.70)

fuchsia-900#721378oklch(0.4007 0.1703 325.40)

fuchsia-950#4B004Foklch(0.2927 0.1363 325.84)

Pink

pink-50#FDF2F8oklch(0.9714 0.0141 343.20)

pink-100#FCE7F3oklch(0.9482 0.0276 342.26)

pink-200#FCCEE8oklch(0.8985 0.0615 343.45)

pink-300#FDA5D5oklch(0.8225 0.1190 346.16)

pink-400#FB64B6oklch(0.7176 0.2017 349.70)

pink-500#F6339Aoklch(0.6558 0.2404 354.32)

pink-600#E60076oklch(0.5979 0.2417 1.37)

pink-700#C6005Coklch(0.5317 0.2137 4.81)

pink-800#A3004Coklch(0.4607 0.1853 4.10)

pink-900#861043oklch(0.4082 0.1533 2.23)

pink-950#510424oklch(0.2841 0.1089 3.59)

Rose

rose-50#FFF1F2oklch(0.9694 0.0152 12.42)

rose-100#FFE4E6oklch(0.9414 0.0298 12.58)

rose-200#FFCCD3oklch(0.8916 0.0584 9.08)

rose-300#FFA1ADoklch(0.8064 0.1124 11.59)

rose-400#FF637Eoklch(0.7057 0.1900 12.98)

rose-500#FF2056oklch(0.6435 0.2452 16.50)

rose-600#EC003Foklch(0.5968 0.2396 19.69)

rose-700#C70036oklch(0.5254 0.2107 18.94)

rose-800#A50036oklch(0.4591 0.1835 14.56)

rose-900#8B0036oklch(0.4072 0.1629 9.43)

rose-950#4D0218oklch(0.2700 0.1049 12.30)

Veja tambémTokens