Manual de Marca · Versão 1.0

Luis Meireles

O sistema visual do blog. Um símbolo, duas cores, uma grelha — e tudo o resto derivado delas. Este documento não descreve a marca: constrói-a à frente dos teus olhos, e entrega as peças prontas a copiar.

Começar
A grelha

25

Unidades por lado. Todo o símbolo cabe num quadrado de 25×25.

O traço

7

Unidades de espessura. Constante nos três L — nunca escala.

O canal

2

Unidades de respiração entre traços. A menor medida do sistema.

01 — O Símbolo

Um L dentro de um L dentro de um L.

O símbolo não é uma letra desenhada: é uma regra aplicada três vezes. Um L, recuado e repetido, até o terceiro colapsar no seu mínimo — o quadrado do canto. Essa regra é a origem de tudo o que vem a seguir neste manual.

A verificação sobrepõe o ficheiro original em modo difference. Se o resultado ficar totalmente preto, o vetor coincide com o original.

A construção

O símbolo assenta num quadrado de 25 unidades. O traço tem sempre 7 unidades e o canal entre traços 2 unidades. Três traços mais dois canais fecham exatamente os 25: 7+2+7+2+7 = 25.

Nenhuma medida é arbitrária. Para redesenhar o símbolo em qualquer contexto, estas cinco formas bastam:

FormaxyLarg.Alt.
L exterior · vertical00725
L exterior · base018257
L médio · vertical90716
L médio · base99167
L interior18077

A regra, passo a passo

Iteração 1

O L completo, 25×25. Traço de 7u.

Iteração 2

O mesmo L recuado 9u — traço mais canal. Fica 16×16.

Iteração 3

Recuado outra vez: 7×7. O L colapsa no traço e o sistema fecha.

Assinaturas

Três construções autorizadas. Fora destas, o símbolo usa-se isolado. A distância entre símbolo e nome é sempre meio traço — 3,5u à escala do símbolo.

Luis Meireles
Blog Pessoal
Horizontal · preferencial
Luis Meireles
Blog Pessoal
Vertical · espaços estreitos
Isolado · avatar, favicon

Área de proteção

Nenhum elemento entra na margem de um traço (7u) à volta do símbolo. À escala de 100px são 28px de cada lado. A trama marca a zona intocável.

Tamanhos mínimos

Abaixo destes valores o canal de 2u fecha e o símbolo lê-se como uma mancha. Se o espaço for menor, não reduzas — usa outra coisa.

24px

16px

8mm

  • 24pxMínimo absoluto em ecrã. Abaixo disto o canal de 2u desaparece.
  • 16pxSó como favicon, onde o browser encaixa o desenho na grelha de pixel.
  • 8mmMínimo em impressão, offset ou digital.

O que nunca se faz

Oito maneiras de partir a marca.

Não esticar nem comprimir.

Não rodar. O L tem chão.

Não contornar. O símbolo é maciço.

Não inclinar nem falsear itálico.

Não assentar sobre trama ou imagem.

Não desfocar nem sombrear.

Não usar abaixo do mínimo.

Não achatar. As proporções são fixas.

Ficheiros

Vetor

SVG em grelha de 25u, pintado com currentColor: herda a cor do contexto e inverte sozinho.

Original

O PNG de origem, 2000×2000px. Mantido apenas como referência de arquivo — prefere sempre o vetor.

02 — Cor

Duas cores. Nenhum cinzento.

A paleta tem dois valores e não admite um terceiro. Sem cinzentos, sem opacidades, sem sombras difusas. A hierarquia faz-se com peso, escala, área e inversão — não com tinta a meio gás.

Primária

Preto

#000000

rgb(0 0 0) · CMYK 0/0/0/100 · Pantone Black 6 C

Primária

Branco

#FFFFFF

rgb(255 255 255) · sem impressão · o papel

Contraste

21:1

O máximo possível. Passa WCAG AAA em qualquer tamanho de texto, sem exceções a verificar.

Modos

2

Positivo e negativo. Não são temas: são a mesma marca vista dos dois lados.

Cinzentos

0

Onde um sistema normal usaria #888, este usa trama.

Positivo e negativo

Os dois modos têm peso igual — nenhum é o principal. O positivo é para leitura longa: artigos, documentação, impressão. O negativo é para momentos de afirmação: capas, aberturas, apresentações, ecrãs de destaque. A passagem de um ao outro é a transição-assinatura da marca.

Luis Meireles
Positivo

Preto sobre branco. Texto corrido, artigos, impressão, documentos.

Luis Meireles
Negativo

Branco sobre preto. Capas, aberturas, destaques, apresentações.

Experimenta: carrega em Inverter na barra lateral, ou na tecla I. O documento inteiro troca de lado — e nada se perde, porque nada dependia de cor.

Densidade ótica

Um sistema sem cinzentos precisa de responder à pergunta óbvia: e quando é preciso um meio-tom? A resposta é trama ordenada. Uma matriz de Bayer 4×4 sobre um módulo de 2px distribui os pontos de forma perfeitamente regular: à distância de leitura vês um cinzento, ao pixel só existe preto e branco.

É esta a escala a usar em fundos, estados desativados, marcas de água e camadas de apoio — nunca opacity, nunca #ccc. A trama imprime bem, sobrevive à fotocópia e mantém-se honesta em qualquer suporte.

0%papel
6,25%d1
12,5%d2
25%d3
50%d4
100%tinta

Cobertura de tinta, não luminosidade. Aproxima-te do ecrã e a ilusão desfaz-se.

Estados sem cor

Sem vermelho para o erro e sem verde para o sucesso, os estados distinguem-se por forma: espessura de filete, trama, inversão e deslocamento. É mais trabalhoso de desenhar e mais acessível de ler — funciona para quem não distingue cores e continua a funcionar em fotocópia a preto.

Neutro

Filete de 1px. O estado por omissão.

Erro

Filete de 2px mais trama a 6,25%.

Sucesso

Inversão sólida. Sem meios-termos.

Desativado

Trama a 12,5%. Nunca opacidade.

Etiqueta Ativa

Regras de cor

  • 01Só existem #000000 e #FFFFFF. Qualquer outro valor é um erro, não uma variação.
  • 02Nunca opacity para atenuar. Usa a escala de densidade.
  • 03Nunca box-shadow difusa. A elevação faz-se com deslocamento e filete.
  • 04Nunca gradientes. A transição entre valores faz-se por trama, se tiver mesmo de existir.
  • 05Nada de cor de acento — nem para links, nem para alertas. A ênfase é sempre inversão.
  • 06Fotografia entra a preto e branco, com contraste alto. Nunca a cor, nunca em sépia.
  • 07O anti-aliasing do texto gera cinzentos nas arestas. É renderização, não desenho — não conta como violação.
03 — Tipografia

Uma grotesca que trabalha, uma geométrica que assina.

Num sistema sem cor, a tipografia carrega toda a hierarquia. Duas famílias, com fronteiras claras: a Neue Haas Grotesk faz o trabalho, a Poppins marca os intervalos. Nunca competem pelo mesmo lugar.

Aa

ABCDEFGHIJKLM
abcdefghijklm 0123456789

Primária

Neue Haas Grotesk

Títulos, texto corrido, interface, botões — tudo o que é estrutura. Neutra sem ser anónima: as terminações horizontais e o a de dois andares dão-lhe a mesma frieza construída do símbolo.

Instalada localmente. Se faltar, cai para Helvetica Now, Helvetica Neue e Arial, por esta ordem.

Aa

ABCDEFGHIJKLM
abcdefghijklm 0123456789

Secundária

Poppins

Metadados, legendas, numeração de secções, etiquetas e datas. Sempre em corpo pequeno, quase sempre em maiúsculas com tracking aberto. O seu o circular contrasta com a grelha quadrada — por isso funciona em doses pequenas e falha em doses grandes.

Nunca em texto corrido, títulos ou botões.

Pesos em uso

Aa300 · Light — só Poppins
Aa400 · Regular — texto corrido
Aa500 · Medium — interface, etiquetas
Aa600 · Semibold — títulos

Quatro pesos chegam. Não usamos Bold nem Black: num sistema a preto e branco, o peso máximo já está reservado à mancha sólida, e um título a 900 compete com ela.

Escala tipográfica

Escala modular de razão 1,25 (terça maior) sobre uma base de 16px. Clica em qualquer linha para copiar as suas declarações CSS.

Regras de composição

  • 01O tracking aperta quando o corpo cresce: −0,045em nos títulos grandes, 0 no texto pequeno.
  • 02Medida ideal de 65 a 70 caracteres. Acima disso o olho perde a linha.
  • 03Entrelinha de 1,5 no texto corrido; 1,0 a 1,1 nos títulos.
  • 04Maiúsculas só na Poppins e só com tracking de 0,12em ou mais.
  • 05Ênfase faz-se com peso ou inversão — nunca sublinhado, nunca itálico em títulos.
  • 06Nunca centrar texto corrido. Alinhamento à esquerda, sempre.

Hierarquia sem cor

Com uma só tinta, restam quatro alavancas. Usa-as por esta ordem e raramente precisarás de mais do que duas ao mesmo tempo.

  • EscalaA diferença de corpo é o sinal mais forte e o mais barato.
  • PesoDe 400 para 600. Saltos maiores tornam-se ruído.
  • ÁreaEspaço branco à volta. Isolar é destacar.
  • InversãoA alavanca mais forte. Guarda-a para um elemento por ecrã.
04 — Grelha e Espaçamento

O símbolo, transformado em régua.

O espaçamento não foi inventado à parte: é o mesmo sistema do símbolo, convertido em pixels. Uma unidade da grelha vale 4px. O traço passa a 28px, o canal a 8px. A partir daí, toda a página respira na mesma cadência do L.

Módulo

4px

1 unidade da grelha do símbolo. Nenhuma medida do sistema é indivisível por 4.

Canal · 2u

8px

A menor distância entre dois elementos relacionados.

Traço · 7u

28px

A distância que separa blocos distintos. O ritmo base do documento.

Escala de espaçamento

Doze passos. Se precisares de um valor que não esteja aqui, o problema quase sempre está no desenho e não na escala. Clica numa linha para copiar o token.

Grelha de 12 colunas

Doze colunas com goteira de 24px. Divide bem por 2, 3, 4 e 6 — cobre praticamente qualquer composição sem inventar exceções. Carrega em Grelha na barra lateral (ou na tecla G) para a ver sobreposta a este documento.

123456 789101112

Filetes

Quatro espessuras. Como não há cinzentos, é a espessura que define a importância de uma linha — não o tom.

1px · divisórias, contornos, tabelas

2px · foco, estado de erro, ícones

4px · separação de secções, progresso

8px · cortes editoriais, capas

Cantos

O raio é zero. Sempre. O símbolo é feito de retângulos de canto vivo cortados numa grelha, e um botão arredondado ao lado dele denuncia-se de imediato.

0px · correto

18px · nunca

X
  • 01Espaçamento vertical entre secções: 160px em ecrã largo, 64px em telemóvel.
  • 02Dentro de um bloco, o espaço nunca é maior do que o espaço à sua volta.
  • 03Margem lateral mínima do documento: 24px. Preferencial: 64px.
05 — Ícones

Desenhados na mesma grelha do símbolo.

Nenhum ícone foi importado de uma biblioteca genérica. Todos assentam numa caixa de 24px com margem de 2px, traço de 2px e remates quadrados — as mesmas decisões que definem o L. Clica em qualquer um para copiar o seu SVG.

Anatomia

Caixa de 24×24. Área viva de 20×20 (tracejado). Dentro dela, as três formas-chave: quadrado de 20, círculo de diâmetro 20, retângulo de 20×16. Um ícone que preencha uma destas formas terá o mesmo peso ótico dos outros.

Como se desenha um ícone novo

  • 01Caixa de 24×24, margem de 2px intocada em todos os lados.
  • 02Traço de 2px, sempre. Nunca contornos de espessura variável.
  • 03stroke-linecap: square e stroke-linejoin: miter. Zero cantos redondos.
  • 04Coordenadas em números inteiros. Meio pixel é sinal de que a forma está errada.
  • 05Ângulos de 45° ou 90°. Diagonais livres só quando o objeto representado as exige.
  • 06Preferir o quadrado ao círculo sempre que a leitura não se perca.
  • 07Um conceito por ícone. Se precisas de um badge, compõe dois.
  • 08Pintar com currentColor — o ícone inverte com o contexto.
06 — Padrões e Texturas

A marca, repetida até virar superfície.

Esta é a base de criação da marca. Todos os padrões saem da mesma peça — o L, os seus recuos, o seu canal. Servem de fundo, de separador, de textura de capa e de substituto do cinzento. Cada um copia-se em SVG ou em CSS.

Biblioteca

Gerador

Ajusta e leva. O que sai daqui é um SVG autónomo, sem dependências, pronto a colar num CSS, num Figma ou num ficheiro de capa.

Em uso

Ensaio
Sobre escrever
menos e melhor
Capa de artigo

Trama a 25% com a caixa de título em branco por cima.

Fim de uma parte

Começo da seguinte

Faixa divisória

O L repetido em banda de 28px — a altura do traço.

“A restrição não é o obstáculo ao desenho. É o desenho.”
Bloco de citação

Inversão sólida, sem trama. A citação é o destaque do artigo.

Regras de padrão

  • 01Um padrão por peça. Dois padrões na mesma superfície anulam-se.
  • 02Texto nunca assenta diretamente sobre trama — precisa sempre de uma caixa sólida por baixo.
  • 03O símbolo nunca se sobrepõe a um padrão. Vale também para o padrão feito do próprio símbolo.
  • 04Em corpos pequenos, tramas acima de 50% fecham-se e leem-se como preto. Verifica impressa.
  • 05A escala do padrão é decidida ao tamanho final da peça, nunca no zoom do editor.
07 — Movimento

Mecânico, não elástico.

O movimento da marca comporta-se como uma peça de máquina: arranca com intenção, trava com firmeza e não oscila. Nada faz bounce, nada exagera a chegada. Se uma animação parece simpática, provavelmente está errada.

Durações

TokenValorAplicação
--dur-1120msReação ao toque: cor de botão, estado de foco.
--dur-2200msInterface pequena: menus, etiquetas, hover.
--dur-3320msInversão do documento, painéis, transições de estado.
--dur-4500msEntradas de bloco, revelação ao scroll.
--dur-5800msSó a construção do símbolo. Mais nada.

Acima de 500ms o utilizador espera pela interface. Reserva esse tempo para momentos que valham a espera.

Princípios

  • 01Sem bounce, sem elastic, sem overshoot. O sistema é construído, não animado.
  • 02As formas crescem a partir de uma aresta, nunca do centro — como o L se desenha.
  • 03A inversão preto/branco é a transição-assinatura. Uma por ecrã, no máximo.
  • 04Movimento no eixo, sempre. Nada se move na diagonal sem razão.
  • 05Nunca animar opacidade sozinha para atenuar — isso é cinzento por outra via.
  • 06prefers-reduced-motion desliga tudo. Sem exceções, sem negociação.

Curvas

Clica numa curva para a ver correr.

Standard

cubic-bezier(.2,0,0,1)

Omissão. Serve tudo o que muda de estado.

Enter

cubic-bezier(0,0,0,1)

Entradas. Arranca depressa, assenta devagar.

Exit

cubic-bezier(.4,0,1,1)

Saídas. Acelera para fora e desaparece.

Mecânica

cubic-bezier(.85,0,.15,1)

A curva da marca. Construção do símbolo e inversões.

A construção do símbolo: cinco formas, curva mecânica, 140ms de desfasamento entre cada uma. Cada forma cresce a partir da aresta onde nasce — o vertical desce, o horizontal avança. É a única animação longa que a marca autoriza.

08 — Aplicação

O sistema, montado.

As peças mínimas do blog, construídas só com o que este manual define. Não são componentes finais nem templates de exportação: são a prova de que as regras aguentam interface a sério.

Botões

Campo

Etiquetas

Ensaio Design Código Notas

Código

.marca { color: var(--ink); background: var(--paper); }

Cartão de artigo

Ensaio 14 min · 03.2026

Porque é que restringir a paleta melhorou tudo o resto

Tirei a cor do sistema durante uma semana para perceber do que dependia. Não voltei a pô-la.

Citação

Quando só tens duas cores, deixas de as usar para decidir e passas a usá-las para dizer.

Cabeçalho do blog

Luis Meireles
ArtigosNotasSobre

Último

Notas sobre grelhas que não se veem

09 — Tokens

Tudo o que este manual decide, em texto.

O sistema inteiro cabe numa folha de variáveis. Cola-a no topo do teu CSS e tens a marca montada — cor, tipo, escala, espaço, filete e movimento. 


  


  

    
Resumo do sistema

    

      
Cor
2 valores. Preto e branco puros, contraste 21:1. Meios-tons por trama.

      
Tipo
Neue Haas Grotesk para estrutura, Poppins para metadados. 4 pesos, escala 1,25.

      
Espaço
Módulo de 4px, herdado da grelha do símbolo. 12 passos, 12 colunas, raio 0.

      
Forma
Ícones de 24px, traço 2px, remates quadrados. Padrões gerados a partir do L.