Guia de estilo

Este guia de estilo oferece uma visão geral completa do sistema de design visual do site da Fundação contra o Câncer Testicular, com foco em cores e tipografia.

Paleta de cores

A paleta de cores é um elemento essencial da identidade da marca, criando uma aparência consistente e reconhecível. A paleta é composta por cores primárias, secundárias e de destaque, que são usadas estrategicamente em todo o site.

Cores Primárias

As cores primárias são as mais usadas no design e representam a identidade central da marca.

Ciano/Turquesa primário

HEX #00B4DB
RGB rgb(0, 180, 216)

Cor principal da marca, usada em fundos, botões e elementos visuais principais.

Preto

HEX #000000
RGB rgb(0, 0, 0)

O corpo do texto, os títulos em fundos claros e o rodapé do site.

Branco

HEX #FFFFFF
RGB rgb(255, 255, 255)

Texto do corpo em fundos escuros, fundos para as seções de conteúdo.

Cores secundárias e de destaque

As cores secundárias e de destaque são usadas para complementar as cores primárias e chamar a atenção para elementos específicos, como botões, links e seções informativas.

Azul-marinho escuro

HEX #0F172A
RGB rgb(15, 23, 42)

Fundos para cartões de estatísticas e outras seções destacadas.

Cinza ardósia

HEX #64748B
RGB rgb(100, 116, 139)

Botões secundários e elementos da interface do usuário.

Cinza claro

HEX #F1F5F9
RGB rgb(241, 245, 249)

Fundos para cartões e módulos de conteúdo, para criar uma separação visual.

Cinza médio

HEX #C1C1C1
RGB rgb(193, 193, 193)

Bordas e elementos sutis da interface do usuário.

Off-White

HEX #EBEEF0
RGB rgb(235, 238, 240)

Pequenas variações no fundo.

Tipografia

O site usa uma combinação de fonte serifada para os títulos e fonte sans-serif para o corpo do texto, criando uma hierarquia tipográfica clara e legível.

DM Serif Display

Serif • Títulos

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Inter

Sans-Serif • Texto do corpo

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Escala tipográfica

Os exemplos a seguir mostram os tamanhos e espessuras das fontes para vários elementos de texto no site.

BARRA DE LINKS RESUMIDA
Fonte Inter
Tamanho 0,74 rem
Peso 600
TÍTULO 1 (T1)
Fonte DM Serif Display
Tamanho 62px
Peso 400

Combate ao câncer testicular por meio da detecção precoce

TÍTULO 2 (T2)
Fonte DM Serif Display
Tamanho 40px - 48px
Peso 400 - 800

Nossa missão: salvar vidas por meio da educação

TÍTULO 3 (H3)
Fonte DM Serif Display
Tamanho 28px
Peso 400

Aprenda a fazer o autoexame testicular

TEXTO DO CORPO (P)
Fonte Inter
Tamanho 17,5 px
Peso 400

Fundada em 2009, a Testicular Cancer Foundation é uma organização sem fins lucrativos 501(c)(3) e a única entidade dedicada exclusivamente ao câncer testicular no país. Somos uma equipe formada por sobreviventes, cuidadores e defensores, todos empenhados em promover a educação e a conscientização.

FONTE DO BOTÃO
Fonte Inter
Tamanho 0,9 rem
Peso 600
Espaçamento entre letras 0,07 em
Transformar Maiúsculas
Altura da linha 1,8 em