Secondary

Esta família parte da paleta Blue documentada em Colors. No produto, viram Tokens de apoio.

Boas Práticas

Quando usar

Reforçar hierarquia e complementar a marca ativa.

Tokens de apoio — tags, badges, chips, elementos abaixo da primária.

Aplicar via tokens (`--ui-secondary`).

Quando não usar

HEX bruto no componente.

Como CTA principal ou maior destaque (use Primary).

Opacidade manual — use a variante alpha.

Misturar famílias base na mesma escala secundária.

Cores padrão

A paleta Blue é o apoio visual central. Escala completa + variantes alpha:

Blue

secondary-50UIColors/Blue/50

secondary-100UIColors/Blue/100

secondary-200UIColors/Blue/200

secondary-300UIColors/Blue/300

secondary-400UIColors/Blue/400

secondary-500UIColors/Blue/500

secondary-600UIColors/Blue/600

secondary-700UIColors/Blue/700

secondary-800UIColors/Blue/800

secondary-900UIColors/Blue/900

secondary-950UIColors/Blue/950

alpha

400-1051A2FF 10%

400-1551A2FF 15%

400-2051A2FF 20%

400-2551A2FF 25%

400-5051A2FF 50%

400-7551A2FF 75%

400-9051A2FF 90%

500-102B7FFF 10%

500-152B7FFF 15%

500-202B7FFF 20%

500-252B7FFF 25%

500-502B7FFF 50%

500-752B7FFF 75%

500-902B7FFF 90%

Tematizações alternativas

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

Pink

secondary-50UIColors/Pink/50

secondary-100UIColors/Pink/100

secondary-200UIColors/Pink/200

secondary-300UIColors/Pink/300

secondary-400UIColors/Pink/400

secondary-500UIColors/Pink/500

secondary-600UIColors/Pink/600

secondary-700UIColors/Pink/700

secondary-800UIColors/Pink/800

secondary-900UIColors/Pink/900

secondary-950UIColors/Pink/950

alpha

400-10FB64B6 10%

400-15FB64B6 15%

400-20FB64B6 20%

400-25FB64B6 25%

400-50FB64B6 50%

400-75FB64B6 75%

400-90FB64B6 90%

500-10F6339A 10%

500-15F6339A 15%

500-20F6339A 20%

500-25F6339A 25%

500-50F6339A 50%

500-75F6339A 75%

500-90F6339A 90%

Purple

Indigo

secondary-50UIColors/Indigo/50

secondary-100UIColors/Indigo/100

secondary-200UIColors/Indigo/200

secondary-300UIColors/Indigo/300

secondary-400UIColors/Indigo/400

secondary-500UIColors/Indigo/500

secondary-600UIColors/Indigo/600

secondary-700UIColors/Indigo/700

secondary-800UIColors/Indigo/800

secondary-900UIColors/Indigo/900

secondary-950UIColors/Indigo/950

alpha

400-107C86FF 10%

400-157C86FF 15%

400-207C86FF 20%

400-257C86FF 25%

400-507C86FF 50%

400-757C86FF 75%

400-907C86FF 90%

500-10615FFF 10%

500-15615FFF 15%

500-20615FFF 20%

500-25615FFF 25%

500-50615FFF 50%

500-75615FFF 75%

500-90615FFF 90%

Fuchsia

secondary-50UIColors/Fuchsia/50

secondary-100UIColors/Fuchsia/100

secondary-200UIColors/Fuchsia/200

secondary-300UIColors/Fuchsia/300

secondary-400UIColors/Fuchsia/400

secondary-500UIColors/Fuchsia/500

secondary-600UIColors/Fuchsia/600

secondary-700UIColors/Fuchsia/700

secondary-800UIColors/Fuchsia/800

secondary-900UIColors/Fuchsia/900

secondary-950UIColors/Fuchsia/950

alpha

400-10ED6BFF 10%

400-15ED6BFF 15%

400-20ED6BFF 20%

400-25ED6BFF 25%

400-50ED6BFF 50%

400-75ED6BFF 75%

400-90ED6BFF 90%

500-10E12AFB 10%

500-15E12AFB 15%

500-20E12AFB 20%

500-25E12AFB 25%

500-50E12AFB 50%

500-75E12AFB 75%

500-90E12AFB 90%

Veja tambémColors Tokens › Marca Primary