Eletro Design System EletroDSGuide

Neutral

Tons neutros — texto, fundo, borda e hierarquia visual, prontos para temas.

Esta família parte da paleta Slate documentada em Colors. No produto, viram Tokens de texto, superfície e borda.

Boas Práticas

Quando usar
Texto, fundos, bordas e superfícies em toda a plataforma.
Hierarquia visual — tipografia, divisores, camadas.
Aplicar via tokens; ao trocar de tema, muda só a origem da neutra.
Quando não usar
HEX bruto no componente.
Para CTAs principais ou destaque de marca (use Primary).
Opacidade manual — use a variante alpha.
Misturar famílias base na mesma escala neutra.

Cores padrão

A paleta Slate é a base estrutural para texto, fundo e borda. Escala completa + variantes alpha:

Slate
neutral-50UIColors/Slate/50
neutral-100UIColors/Slate/100
neutral-200UIColors/Slate/200
neutral-300UIColors/Slate/300
neutral-400UIColors/Slate/400
neutral-500UIColors/Slate/500
neutral-600UIColors/Slate/600
neutral-700UIColors/Slate/700
neutral-800UIColors/Slate/800
neutral-900UIColors/Slate/900
neutral-950UIColors/Slate/950
alpha
400-1090A1B9 10%
400-1590A1B9 15%
400-2090A1B9 20%
400-2590A1B9 25%
400-5090A1B9 50%
400-7590A1B9 75%
400-9090A1B9 90%
500-1064748E 10%
500-1564748E 15%
500-2064748E 20%
500-2564748E 25%
500-5064748E 50%
500-7564748E 75%
500-9064748E 90%

Tematizações alternativas

Os nomes (neutral-50…) não mudam, só a origem.

Gray

Gray
neutral-50UIColors/Gray/50
neutral-100UIColors/Gray/100
neutral-200UIColors/Gray/200
neutral-300UIColors/Gray/300
neutral-400UIColors/Gray/400
neutral-500UIColors/Gray/500
neutral-600UIColors/Gray/600
neutral-700UIColors/Gray/700
neutral-800UIColors/Gray/800
neutral-900UIColors/Gray/900
neutral-950UIColors/Gray/950
alpha
400-1099A1AF 10%
400-1599A1AF 15%
400-2099A1AF 20%
400-2599A1AF 25%
400-5099A1AF 50%
400-7599A1AF 75%
400-9099A1AF 90%
500-106A7282 10%
500-156A7282 15%
500-206A7282 20%
500-256A7282 25%
500-506A7282 50%
500-756A7282 75%
500-906A7282 90%

Zinc

Zinc
neutral-50UIColors/Zinc/50
neutral-100UIColors/Zinc/100
neutral-200UIColors/Zinc/200
neutral-300UIColors/Zinc/300
neutral-400UIColors/Zinc/400
neutral-500UIColors/Zinc/500
neutral-600UIColors/Zinc/600
neutral-700UIColors/Zinc/700
neutral-800UIColors/Zinc/800
neutral-900UIColors/Zinc/900
neutral-950UIColors/Zinc/950
alpha
400-109F9FA9 10%
400-159F9FA9 15%
400-209F9FA9 20%
400-259F9FA9 25%
400-509F9FA9 50%
400-759F9FA9 75%
400-909F9FA9 90%
500-1071717B 10%
500-1571717B 15%
500-2071717B 20%
500-2571717B 25%
500-5071717B 50%
500-7571717B 75%
500-9071717B 90%

Neutral

Neutral
neutral-50UIColors/Neutral/50
neutral-100UIColors/Neutral/100
neutral-200UIColors/Neutral/200
neutral-300UIColors/Neutral/300
neutral-400UIColors/Neutral/400
neutral-500UIColors/Neutral/500
neutral-600UIColors/Neutral/600
neutral-700UIColors/Neutral/700
neutral-800UIColors/Neutral/800
neutral-900UIColors/Neutral/900
neutral-950UIColors/Neutral/950
alpha
400-10A1A1A1 10%
400-15A1A1A1 15%
400-20A1A1A1 20%
400-25A1A1A1 25%
400-50A1A1A1 50%
400-75A1A1A1 75%
400-90A1A1A1 90%
500-10737373 10%
500-15737373 15%
500-20737373 20%
500-25737373 25%
500-50737373 50%
500-75737373 75%
500-90737373 90%
Veja tambémColors Tokens › Texto Tokens › Background