Landing Apoia.se SouJunior

A SouJunior é mantida por voluntários e sustentada por doações no Apoia.se. O pedido de apoio vivia no fim de uma página institucional longa, e nada explicava para onde o dinheiro ia.

O UI Kit oficial chegou no meio do projeto. O azul primário dele dá 3,79 de contraste com texto branco, abaixo dos 4,5 exigidos. Usei a cor de destaque do próprio kit no botão, com 11,22.

• ADOTADO DO KIT

  Tipografia, mascotes, ação e hover

• MANTIDO DO CÓDIGO

  O navy dos títulos e o azul das seções

• CRIADO PARA A CAMPANHA

  Âmbar de destaque, espaçamento, raios e tema claro

Montei o sistema em três camadas: primitivas, tokens semânticos e componentes. O nome do token diz a função, não a cor, então a identidade inteira troca num arquivo.

/* Vindas do UI Kit oficial da SouJunior */
--kit-destaque: #0e14bf;
--kit-secundaria: #0a1662;
--kit-neutra: #242731;

/* Azuis da marca SouJunior */
--brand-900: #00205f;
--brand-300: #95c6ff;

/* Âmbar: cor de acento criada para esta campanha */
--accent-400: #ffb020;
--accent-700: #b25e00;

--color-heading: var(--brand-900);
--color-text: var(--kit-neutra);
--color-action: var(--kit-destaque);
/* botão principal. 11.22:1 com texto branco */
--color-action-hover: var(--kit-secundaria);
/* hover do botão. 16.10:1 */

/* Campanha: o âmbar marca valor e decisão.
   Nunca é fundo de botão: branco sobre ele dá 1.83:1 e reprova. */
--color-highlight: var(--accent-400);
--color-on-highlight: var(--kit-neutra);
/* texto sobre o âmbar. 8.15:1 */

Entreguei o esqueleto do HTML com os textos escritos, os tokens e o CSS base, e dividi as seções em um arquivo por responsável.