Identidade visual.
Sistema digital.

Marca e logótipo

TEDxSãoTomé, por inteiro. Uma identidade local, um evento organizado de forma independente.

Cores com uma função

O vermelho destaca. Os neutros dão espaço às pessoas, às imagens e às ideias. Estes são os valores usados pelo website.

• Aa4.60:1

  Vermelho

  #EB0028--red

  Destaques e ações principais

  Copiar
• Aa6.60:1

  Vermelho de ação

  #BD001F--red-dark

  Links, filtros e estados de interação

  Copiar
• Aa20.38:1

  Fundo escuro

  #050505--black

  Navegação e superfícies escuras

  Copiar
• Aa17.93:1

  Texto

  #171717--ink

  Títulos e texto principal

  Copiar
• Aa6.25:1

  Texto secundário

  #606066--muted

  Descrições e metadados

  Copiar
• Aa12.86:1

  Linha

  #DADADE--line

  Separadores decorativos; não usar como único limite de campos

  Copiar
• Aa16.28:1

  Superfície suave

  #F4F4F2--soft

  Painéis de apoio

  Copiar
• Aa17.93:1

  Branco

  #FFFFFF--white

  Fundo principal e texto sobre superfícies escuras

  Copiar

Os rácios apresentados são calculados entre o fundo e o texto de cada amostra. O vermelho de ação é a escolha para links de texto; a cor de linha é apenas decorativa.

Tipografia direta

Arial para a interface, com Helvetica Neue e Helvetica como alternativas locais. Sem fontes externas para carregar.

A escala responde ao ecrã e ao contexto. A tipografia de interface não serve para reconstruir o logótipo: utilizar sempre o ficheiro de arte original.

Espaço para respirar

Conteúdo alinhado à esquerda, colunas que se adaptam e espaço suficiente para ler e tocar.

Esta escala torna explícitos os espaçamentos usados nos novos exemplos do guia. O arquivo anterior mantém os seus estilos; não é uma normalização de todas as páginas.

Largura máxima do conteúdo

1180px

Alvo mínimo de interação

44px × 44px

Cantos dos controlos / cartões

6px / 8px

Transição breve

160ms

Componentes em uso

Exemplos funcionais dos mesmos componentes que aparecem no website. Não são imagens de uma interface.

Acessibilidade faz parte do sistema

Uma ideia deve poder ser encontrada, lida e explorada por diferentes pessoas.

• Foco visível em links, botões e campos. O estado não depende apenas da cor.
• Nomes acessíveis nos controlos; filtros anunciam os resultados sem interromper a leitura.
• Modais nativos com Escape, isolamento do fundo e retorno de foco.
• Sem reprodução automática antes de uma ação; dar sempre acesso à fonte original.
• Movimento reduzido respeitado e conteúdo utilizável em ecrãs estreitos.
• Texto normal com contraste de pelo menos 4.5:1; limites essenciais de controlos com 3:1.

Recursos para continuar

Copie os valores ou descarregue os ficheiros. Os tokens são locais ao website; o logótipo pertence ao arquivo histórico.

:root {
  --red: #eb0028;
  --red-dark: #bd001f;
  --black: #050505;
  --ink: #171717;
  --muted: #606066;
  --line: #dadade;
  --soft: #f4f4f2;
  --white: #ffffff;
  --content: 1180px;
  --font-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-control: 6px;
  --radius-card: 8px;
  --control-min: 44px;
  --motion-fast: 160ms;
}

As cores e os tokens deste guia são verificados contra o CSS em cada execução de pnpm check. A arte do logótipo é validada pelo seu hash, sem alterar o original.