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.

Principal e marca

Tinta e tipografia

Sinais e superfícies

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.

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 vêm como clamp() por isso, elas ficam menores nos celulares.

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.

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.

O movimento é uma sugestão, não uma exibição. Tudo se move na mesma curva curta, e nada se move sem necessidade.

• Transições

  0,18 s a 0,2 s facilidade cor, plano de fundo, borda e opacidade. Nada muito longo, nada que salte.

• Passe o mouse sobre o cartão

  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 atualização de cartões no novo trabalho — os cartões antigos estão sendo removidos à medida que as páginas são reconstruídas.

• Passe o mouse sobre o livro-razão

  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.

• Foco

  Cada elemento interativo recebe :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }. Nunca tire os anéis de foco sem recolocá-los.

• Não é permitido

  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.

• Prefixo de classe

  Cada novo bloco usa o tcfx- prefixo. tcf- faz parte do CSS personalizado antigo e vai causar conflito.

• Apenas reinicialização de escopo

  .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.

• Coloca tudo em namespaces

  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.

• Importa primeiro

  Se um <style> usos @import No caso das fontes, isso precisa estar na primeira linha dessa tag, senão o navegador ignora.

• Sem comentários

  O HTML e o CSS de produção vêm sem comentários. Em vez disso, documenta o bloco nas notas do projeto.

• Sem emojis como ícones

  Texto, números ou SVG embutido. Os emojis são exibidos de forma inconsistente nas diferentes plataformas e soam informais.

• Azul-marinho, não preto

  O Deep Navy substitui o preto em toda a interface do usuário. O preto puro é reservado para os arquivos de mídia.

• Mobile first

  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.

• Links externos

  target="_blank" sempre vem com rel="noopener noreferrer".

• O texto está copiado literalmente

  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.

• Mantém o H1

  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.

• Assunção do controle da seção

  Para deixar a seção de um bloco escura, seleciona a camada de fundo, não a caixa da seção — pintura .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;
}