Cor

Paleta Global AD

Duas escalas — pink e ink — de 50 a 950. Rosa é a assinatura, ink sustenta o produto. Semânticas comunicam estado. Tudo mais é neutro.

Global AD Pink

Escala primária, do 50 (quase branco rosado) ao 950 (magenta profundo). O 500 é o brand.

#FFF7FA

pink-50

#FFF7FA

--pink-50

#FFE8F1

pink-100

#FFE8F1

--pink-100

#FED9E7

pink-200

#FED9E7

--pink-200

#FED0E1

pink-300

#FED0E1

--pink-300

#FECBDF

pink-400

#FECBDF

--pink-400

#FEC5DD

pink-500 · BRAND

#FEC5DD

--pink-500

#FAA9CB

pink-600

#FAA9CB

--pink-600

#F58BB8

pink-700

#F58BB8

--pink-700

#C4658C

pink-800

#C4658C

--pink-800

#82405B

pink-900

#82405B

--pink-900

#4A1F30

pink-950

#4A1F30

--pink-950

Ink · neutros

Escala neutra cinza-azulada. Fundo e superfícies do produto vêm daqui.

#F5F5F7

ink-50

#F5F5F7

--ink-50

#E9E9EC

ink-100

#E9E9EC

--ink-100

#D4D5D9

ink-200

#D4D5D9

--ink-200

#A8A8B2

ink-300

#A8A8B2

--ink-300

#7A7B84

ink-400

#7A7B84

--ink-400

#6D6E77

ink-500

#6D6E77

--ink-500

#55565C

ink-600

#55565C

--ink-600

#3F4046

ink-700

#3F4046

--ink-700

#33343A

ink-800

#33343A

--ink-800

#202125

ink-900 · fundo

#202125

--ink-900

#16171A

ink-950

#16171A

--ink-950

Aliases da marca

Atalhos semânticos usados no código. Rosa-link é obrigatório para links e texto rosa — pink-500 sobre ink-900 dá 12.3:1 (AAA); pink-500 sobre fundo claro reprova (1.4:1) e não deve ser usado como texto.

#FEC5DD

rosa

#FEC5DD

--rosa · pink-500

#F58BB8

rosa-detalhe

#F58BB8

--rosa-detalhe · pink-700

#FEC5DD

rosa-link

#FEC5DD

--rosa-link · pink-500 · AAA em fundo escuro

#202125

neutra · fundo

#202125

--neutra · ink-900

Texto — tokens de intensidade

Texto principal · ink-50 sobre ink-900

--text · ratio 14.7 : 1 · AAA

Texto secundário · ink-300

--text-2 · ratio 6.4 : 1 · AA

Texto terciário · ink-500

--text-3 · ratio 3.3 : 1 · AA UI grande · não usar em corpo

Link / destaque · pink-500

--rosa-link · ratio 12.3 : 1 · AAA

Bordas & estados

Padrão

ink-700

Hover

ink-600

Foco

pink-500 + ring/30

Erro

--destructive · #F14343

Semânticas

Quatro cores com contraste testado sobre ink-900. Sempre acompanhadas de ícone ou texto — cor nunca sozinha.

#4ADE80

Sucesso

#4ADE80

--success

#F14343

Erro

#F14343

--destructive

#FACC15

Alerta

#FACC15

--warning

#60A5FA

Informação

#60A5FA

--info