Year-end giving ends December 31. Be there for the next diagnosis. Give now →
Cores, tipografia e padrões de componentes que compõem a identidade visual da Fundação contra o Câncer Testicular. Clique em qualquer valor hexadecimal ou RGB para copiá-lo.
Três funções: "primary " para a identidade da marca, "ink " para tipos de letra e superfícies, e "signals" para tons e bordas. Clique em qualquer código hexadecimal ou RGB para copiá-lo.
A marca. CTAs, detalhes de destaque, links, texto em destaque e momentos visuais importantes.
Marca os botões, o texto dos links embutidos e os estados de passar o mouse com a cor ciano principal. Aumenta o contraste em fundos coloridos.
Estado de passar o mouse sobre qualquer elemento que já esteja na cor ciano escuro, botões secundários, links de registro e links de cartão.
Fundos de tags, legendas e cartões em destaque. Uma presença sutil da marca, sem competir com o conteúdo.
A borda que combina com o preenchimento “Cyan Tint”. Mantém os cartões coloridos legíveis contra uma página branca.
Títulos, cartões de destaque, blocos de CTA, rodapé, contornos de destaque. Substitui o preto puro em todos os lugares.
Texto padrão em superfícies claras. Contraste menor do que o azul-marinho, mais agradável para leituras longas.
Subtítulos, descrições de listas, texto complementar abaixo de um título.
Legendas, rótulos de especificações, notas de rodapé, nomes de pontos de venda, linhas de EIN. Discreto, mas legível.
Texto principal sobre fundo azul-marinho escuro, destaques, cartões de destaque, CTAs e rodapé.
Fundo padrão da página. Cartões e áreas de conteúdo.
Fundos alternados nas seções, estados inativos dos botões de alternância, blocos de código embutidos.
Bordas de cartões, linhas finas abaixo dos títulos, divisórias entre colunas de tabelas e linhas de listas.
Contornos dos botões secundários e qualquer borda que precise ficar visível sobre uma superfície Slate 100.
Reservado para a mídia (logotipos com moldura, máscaras fotográficas). Não use para texto; use a cor Deep Navy.
Linhas finas em tons escuros: em superfícies na cor “Deep Navy”, use divisórias e bordas rgba(255,255,255,0,08) para rgba(255,255,255,0,12) em vez de um hex de ardósia.
Tem um tom de ciano: #00B4DB, com #0091B0 para o tom escuro e ao passar o mouse. Essas variantes antigas ainda aparecem em páginas mais antigas e no CSS personalizado. Substitui-as assim que as vires e nunca as use de novo em trabalhos novos.
Uma fonte serifada para títulos e uma sans-serif para todo o resto. A DM Serif Display traz aconchego e peso editorial; a Inter é ideal para textos longos e interfaces de usuário, sem causar distração.
Serif · Apenas 400 · Títulos, citações, algarismos
Sans · 400 / 600 / 700 · Corpo do texto, interface do usuário, botões
A fonte DM Serif Display vem em uma única espessura. Nunca aplique <strong>, <b>, ou font-weight: 600/700 Com fontes serifadas, o navegador cria um efeito de negrito falso que fica pesado e borrado, o que fica mais visível no Safari. Se uma linha em fonte serifada precisar de ênfase, use <em>: itálico com a cor TCF Cyan é o padrão de destaque da empresa.
Duas balanças. Artigo É para conteúdos mais longos, posts de blog e páginas de programas. Exibir É pra seções de destaque, páginas de destino e momentos de marketing em que a tipografia precisa se destacar mais. Os tamanhos abaixo são o limite máximo para desktop; os títulos são exibidos como clamp() por isso, elas ficam menores nos celulares.
A confiança se constrói por meio de prestação de contas mensurável e transparência constante, e nossas avaliações feitas por terceiros refletem exatamente isso.
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.
Inter 16 / 600, padding: 1rem 2rem text: 1rem 2rem, raio de 8 px, transição de cor de 0,18 s. Os estilos de link do Squarespace se misturam com os blocos de código, então as âncoras dos botões sempre ficam definidas como cor e text-decoration com !important.
Ciano primário para a ação principal; ciano escuro quando o botão fica ao lado do texto do corpo e precisa de contraste; contorno para qualquer elemento secundário.
Ciano sobre azul-marinho. Azul-marinho sobre ciano: a faixa de doações é o único grande destaque em ciano da página, então o botão dela fica escuro, em vez de entrar em conflito com o fundo.
Elementos reusáveis. Eles aparecem em posts de blog, páginas de programas e conteúdos voltados para doadores. Recorra a um modelo já existente antes de inventar um novo; a marca mantém a consistência pela repetição, não pela novidade.
Rótulo de categoria acima de um H1. Fundo sombreado, texto em ciano escuro.
Resumo curto ou ponto principal. Tonalidade ciano com uma borda esquerda principal de 3px.
Resumo: Candid Platinum, 4 estrelas no Charity Navigator com 93%, classificação máxima no GreatNonprofits, avaliações independentes no Trustpilot.
Fundo escuro com título, subtítulo, parágrafo de desenvolvimento e citação em destaque (opcional).
Para doadores e parceiros
A maioria das organizações sem fins lucrativos da nossa categoria está presente em uma ou duas dessas plataformas. A TCF está avaliada nas quatro.
"A verificação independente é o mínimo, não o máximo."
Listas escalonadas, classificações, seções do programa. Números com serifa em ciano primário, divisórias finíssimas, sem detalhes cromados.
Chegue aos jovens lá onde eles estão, com uma educação sem estigmas.
Conecta pacientes recém-diagnosticados com sobreviventes que já passaram por isso.
Cuidados de longo prazo, apoio comunitário e recursos após o término do tratamento.
Textos em primeira pessoa com fonte serifada servem como linhas de referência. Ao passar o mouse por uma linha, as linhas ao lado ficam esmaecidas, a frase em itálico fica na cor ciano e a seta desliza. Isso é usado para tópicos do navegador e qualquer lista do tipo “escolha sua situação”.
Cartões com margens de altura igual para notícias da imprensa, recursos e downloads. Ao passar o mouse, aparece uma borda ciano e um anel de 1px, sem nunca haver um deslocamento vertical.
Uma sobrevivente fala sobre a importância dos autoexames, indicando aos leitores os recursos da TCF sobre o assunto.
Leia o artigo →Um estudo revisado por pares que analisa como as campanhas baseadas no humor atraem os rapazes.
Leia o estudo →Sobreviventes, cuidadores, defensores e profissionais da área da saúde se reúnem para um fim de semana de capacitação.
Leia o artigo →Números grandes na fonte DM Serif. Uma microlegenda acima e uma explicação em linguagem simples abaixo. Nunca coloque o número em negrito.
De cada dólar, vai direto para os serviços do programa.
O único grupo especializado em câncer testicular do país que conta com equipe em tempo integral.
Avaliadores independentes de instituições de caridade, todos com relatórios publicados.
Vozes de sobreviventes e parceiros. Fonte Serif em itálico, atribuição em microetiqueta, cartão com traço fino.
"Ninguém me disse pra verificar. É esse silêncio que viemos quebrar."Sobrevivente, diagnosticado aos 24 anos
Bloco de doações ou cadastro no final do artigo. Azul-marinho escuro com destaque em ciano, coluna única centralizada, largura máxima de cerca de 720 px.
Cada dólar é administrado de acordo com os mesmos padrões refletidos em nossas classificações independentes.
Faça uma doação para a TCFO movimento é uma sugestão, não uma exibição. Tudo se move na mesma curva curta, e nada se move sem necessidade.
0,18 s a 0,2 s facilidade cor, plano de fundo, borda e opacidade. Nada muito longo, nada que salte.
A borda fica na cor TCF Cyan com um anel de 1px da mesma cor (box-shadow: 0 0 0 1px #00B4DB). Não transY Inclusão de cartões em novos trabalhos; os cartões antigos estão sendo removidos à medida que as páginas são reconstruídas.
Quando você passa o mouse por cima de uma linha, as linhas ao lado dela vão para opacidade: 0,55, muda a cor da frase em itálico para ciano e desloca a seta 4px. A linha sobre a qual o cursor passa mantém a opacidade total.
Cada elemento interativo recebe :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }. Nunca tire os anéis de foco sem recolocá-los.
Sem pulsar, brilhar, saltar, efeito de paralaxe ou movimento que comece automaticamente. Sem animações que se repitam enquanto a página fica parada.
O site roda no Squarespace 7.1, então a maioria dos novos trabalhos de design vem como um bloco de código independente inserido em uma seção do Fluid Engine. Essas regras evitam que esses blocos entrem em conflito entre si ou com a plataforma.
Cada novo bloco usa o tcfx- prefixo. tcf- faz parte do CSS personalizado antigo e vai causar conflito.
.tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } e nada mais largo. Uma largura de página * A reinicialização já deixou o site fora do ar antes.
Analise todas as regras da classe raiz do bloco. Um bloco de código deve poder ser colado em qualquer página sem causar efeitos indesejados.
Se um <style> usos @import No caso das fontes, isso precisa estar na primeira linha dessa tag, senão o navegador ignora.
O HTML e o CSS de produção vêm sem comentários. Em vez disso, documenta o bloco nas notas do projeto.
Texto, números ou SVG embutido. Os emojis são exibidos de forma inconsistente nas diferentes plataformas e soam informais.
O Deep Navy substitui o preto em toda a interface do usuário. O preto puro é reservado para os arquivos de mídia.
Use o layout do celular como base e adicione min-width consultas para cima. Pilhas de uma coluna, clamp() tipo de fonte, espaçamento reduzido abaixo de 640px, áreas de toque fáceis de clicar.
target="_blank" sempre vem com rel="noopener noreferrer".
Ao reformular uma página já existente, mantenha os títulos, o texto do corpo, as URLs e os parâmetros UTM exatamente como estão. Indique qualquer alteração, em vez de fazer isso sem avisar.
Os heróis reformulados mantêm exatamente um H1 com o texto original, por causa do SEO. Evita o Squarespace’s texto com escala quadrada wrapper: o tamanho dele na linha pode desaparecer durante a execução e fazer com que o título se contraia.
Para escurecer a seção de um bloco, seleciona a camada de fundo, e não a caixa da seção, e pinta .page-section alinhar com qualquer divisor de caminho de recorte.
.page-section:has(.tcfx-block) .section-background { background: #0F172A !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }