Manual da marca

A Tatuu adapta atividades escolares para alunos autistas. Quatro princípios guiam cada decisão de marca, da cor de um botão ao texto de um aviso.

A marca é a palavra TATUU desenhada em blocos, com os dois U fundidos e um ponto quadrado laranja. Existem três formas. Nenhuma outra versão é permitida.

Versões de cor

Sobre laranja, o ponto vira papel, para não sumir. Na impressão em uma cor, o ponto acompanha a cor das letras.

As letras vêm da Archivo Black e foram redesenhadas. O logo é um desenho fechado: nunca digite TATUU numa fonte para imitar a marca.

Usos errados

Três cores fazem a marca: tinta, papel e laranja. O laranja aparece pouco e sempre com intenção. Clique num código para copiar.

Principais

Apoio

Estados

Proporção de uso

Contraste medido (WCAG 2.2)

O laranja #FF5A1F nunca é cor de texto sobre papel. Para texto e link em laranja, use #C2410C.

Duas famílias. A Archivo Black, pesada e compacta, só para títulos e números de destaque. A Atkinson Hyperlegible, criada para leitores com baixa visão, para todo o resto.

Escala

Tudo se mede em múltiplos de 8. A página usa 12 colunas no computador, 4 no celular, e conteúdo de leitura com no máximo 68 caracteres por linha.

As formas vêm do ponto do logo: quadradas e firmes. Cantos retos, bordas de 2 px na cor da tinta e sombra dura deslocada, sem desfoque.

Nada é arredondado na Tatuu: botões, campos, caixas de seleção, ícones e blocos são retos. A única curva da marca é a do UU no logo.

Cada textura nasce de uma parte do logo. Elas preenchem faixas, capas e fundos de destaque. Nunca vão atrás de texto corrido.

Grade de 24 px, traço de 2 px, pontas e cantos retos, sem círculos nem curvas. Um único detalhe em laranja, só quando ele carrega sentido.

Ícone nunca aparece sozinho em tela do aluno: sempre com a palavra ao lado.

Botões parecem peças físicas: borda, sombra dura e um afundamento quando pressionados. O texto diz exatamente o que vai acontecer.

Rótulo sempre visível acima do campo, nunca só dentro dele. O erro diz o que aconteceu e como resolver.

Etiquetas e níveis

Avisos

Blocos

Abas, progresso e etapas

Tabela, perguntas e paginação

Nomes de exemplo.

Diálogo

Menu do site

As páginas são montadas com estes blocos, separados por linhas de 2 px, como uma folha dividida. Nada de cartões arredondados flutuando no vazio.

O movimento da Tatuu é curto, firme e com propósito: as peças se assentam no lugar. Nada pisca, nada fica girando sem parar.

Quem usa a Tatuu são alunos autistas, muitos com sensibilidade a luz, som e movimento. A marca existe para não atrapalhar.

A Tatuu fala como uma professora experiente: direta, calma e literal. Com escolas, é segura e concreta. Com alunos, é curta e gentil.

Escreva "inteligência artificial" só quando explicar como algo funciona. Ela é o meio, não a promessa.

As variáveis de CSS deste manual. Copie para qualquer projeto da Tatuu.

:root{
  /* cores */
  --tinta:#111111; --papel:#F5F3EF; --branco:#FFFFFF; --areia:#ECE8E0;
  --laranja:#FF5A1F; --laranja-texto:#C2410C;
  --cinza-700:#3A3A3A; --cinza-500:#5C5C5C; --linha:#E2DED6; --linha-forte:#CFCAC0;
  --sucesso:#1F7A4D; --aviso:#9A4A06; --erro:#B42318; --info:#1F4FD1;
  /* letras */
  --display:'Archivo Black','Arial Black',sans-serif;
  --texto:'Atkinson Hyperlegible',Verdana,Arial,sans-serif;
  /* espaço */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px;
  /* formas */
  --raio:0; --borda:2px solid var(--tinta);
  --sombra:4px 4px 0 var(--tinta); --sombra-alta:8px 8px 0 var(--tinta);
  /* movimento */
  --rapido:120ms; --medio:200ms; --lento:320ms; --assentar:cubic-bezier(.2,.8,.2,1);
}