Eletro Design System EletroDSGuide

Primary

Cores primárias do sistema — ações de destaque e identidade de marca, prontas para temas.

Esta família parte da paleta ME brand documentada em Colors. No produto, essas cores viram Tokens prontos para uso.

Boas Práticas

Quando usar
Estabelecer e reforçar a identidade da marca ativa em toda a plataforma.
Ações principais (CTAs) e elementos de maior hierarquia.
Aplicar via tokens (`--ui-primary`); ao trocar de tema, muda só a origem.
Quando não usar
HEX bruto no componente — quebra tokens e tematização.
Como semântica de erro, sucesso ou atenção.
Opacidade manual — use a variante alpha correspondente.
Misturar famílias base na mesma escala primária.

Cores padrão

A paleta ME brand é a identidade visual central do produto. Escala completa + variantes alpha:

ME brand
primary-50UIColors/ME brand/50
primary-100UIColors/ME brand/100
primary-200UIColors/ME brand/200
primary-300UIColors/ME brand/300
primary-400UIColors/ME brand/400
primary-500UIColors/ME brand/500
primary-600UIColors/ME brand/600
primary-700UIColors/ME brand/700
primary-800UIColors/ME brand/800
primary-900UIColors/ME brand/900
primary-950UIColors/ME brand/950
alpha
400-10437FFF 10%
400-15437FFF 15%
400-20437FFF 20%
400-25437FFF 25%
400-50437FFF 50%
400-75437FFF 75%
400-90437FFF 90%
500-101052E0 10%
500-151052E0 15%
500-201052E0 20%
500-251052E0 25%
500-501052E0 50%
500-751052E0 75%
500-901052E0 90%

Tematizações alternativas

A primária pode mapear outra família conforme a marca — os nomes (primary-50…) não mudam, só a origem.

Blue

Sky
primary-50UIColors/Sky/50
primary-100UIColors/Sky/100
primary-200UIColors/Sky/200
primary-300UIColors/Sky/300
primary-400UIColors/Sky/400
primary-500UIColors/Sky/500
primary-600UIColors/Sky/600
primary-700UIColors/Sky/700
primary-800UIColors/Sky/800
primary-900UIColors/Sky/900
primary-950UIColors/Sky/950
alpha
400-1000BCFF 10%
400-1500BCFF 15%
400-2000BCFF 20%
400-2500BCFF 25%
400-5000BCFF 50%
400-7500BCFF 75%
400-9000BCFF 90%
500-1000A6F4 10%
500-1500A6F4 15%
500-2000A6F4 20%
500-2500A6F4 25%
500-5000A6F4 50%
500-7500A6F4 75%
500-9000A6F4 90%

Orange

Orange
primary-50UIColors/Orange/50
primary-100UIColors/Orange/100
primary-200UIColors/Orange/200
primary-300UIColors/Orange/300
primary-400UIColors/Orange/400
primary-500UIColors/Orange/500
primary-600UIColors/Orange/600
primary-700UIColors/Orange/700
primary-800UIColors/Orange/800
primary-900UIColors/Orange/900
primary-950UIColors/Orange/950
alpha
400-10FF8904 10%
400-15FF8904 15%
400-20FF8904 20%
400-25FF8904 25%
400-50FF8904 50%
400-75FF8904 75%
400-90FF8904 90%
500-10FF6900 10%
500-15FF6900 15%
500-20FF6900 20%
500-25FF6900 25%
500-50FF6900 50%
500-75FF6900 75%
500-90FF6900 90%

Teal

Teal
primary-50UIColors/Teal/50
primary-100UIColors/Teal/100
primary-200UIColors/Teal/200
primary-300UIColors/Teal/300
primary-400UIColors/Teal/400
primary-500UIColors/Teal/500
primary-600UIColors/Teal/600
primary-700UIColors/Teal/700
primary-800UIColors/Teal/800
primary-900UIColors/Teal/900
primary-950UIColors/Teal/950
alpha
400-1000D5BE 10%
400-1500D5BE 15%
400-2000D5BE 20%
400-2500D5BE 25%
400-5000D5BE 50%
400-7500D5BE 75%
400-9000D5BE 90%
500-1000BBA7 10%
500-1500BBA7 15%
500-2000BBA7 20%
500-2500BBA7 25%
500-5000BBA7 50%
500-7500BBA7 75%
500-9000BBA7 90%
Veja tambémColors Tokens › Marca Neutral