paulolemosx.com.br sistema de design

00 Fundamento

Um jeito só de parecer a mesma casa.

Sete páginas, um vocabulário. Hierarquia vem do tamanho da letra e do fio de 1px — não de caixa flutuante com brilho. O amarelo é caneta de destaque, não ouro.

1amarelo
3raios
3famílias
0gradientes

01 Paleta

Marca--marca
Tinta 900--tinta-900
Tinta 800--tinta-800
Tinta 700--tinta-700
Papel--papel
Papel 2--papel-2
Ok--ok
Erro--erro

O amarelo aparece em três lugares e mais nenhum: palavra destacada, fio de rótulo e botão principal. Antes deste sistema existiam oito amarelos diferentes espalhados pelas páginas.

02 Tipografia

Archivo Black

Só título. Pesada e estreita, tem cara de manchete — não de app.

Instrument Sans

Corpo e interface. Neutra, boa de ler em bloco longo.

IBM Plex Mono

Rótulo, número e dado. É o que dá o tom de quem mede as coisas.

03 A assinatura

O marca-texto é o gesto que amarra tudo.

Uma palavra por bloco, nunca duas. É o que faz alguém reconhecer a página como sua antes de ler o nome — e é o oposto do headline com gradiente, que qualquer gerador faz.

Como usar

  • 01Uma marcação por bloco de texto
  • 02Na palavra que carrega o argumento
  • 03Nunca em frase inteira
  • 04Nunca dentro de botão

04 Componentes

Botões — retângulo, raio 4px

Estado

no ar lento fora do ar

Campo

Números

R$ 1.621mínimo
49%da cesta
1,7cestas

05 O que este sistema proíbe

não

Gradiente em texto. Estava em cinco das sete páginas. É a assinatura mais reconhecível de página gerada por IA.

não

Vidro fosco. Card translúcido flutuando no escuro — bonito uma vez, genérico na terceira.

não

Emoji como ícone. Muda de desenho em cada sistema e entrega que ninguém desenhou nada.

não

Botão pílula. Canto vivo é decisão desta casa.

não

Cor solta. Foi assim que oito amarelos diferentes nasceram.

sim

Fio de 1px para separar, no lugar de sombra e borda arredondada.

sim

Rótulo numerado em mono abrindo cada seção.

sim

Número grande com fio em cima e legenda em mono embaixo.

sim

Medida de 62 caracteres no texto corrido — linha longa cansa.

sim

Marca-texto em uma palavra por bloco.

06 A trava

Sistema de design que depende de disciplina volta a divergir em duas semanas. Este não deixa: a publicação falha e diz onde. 

$ node publicar.js liberdadedigital

✖ liberdadedigital/index.html — 3 fora do design system:

   118: cor solta #ffdd00 — use var(--…) do tokens.css
   204: raio "22px" fora da escala — use var(--r-min|--r|--r-max)
   331: gradiente em texto — proibido (é a cara de página gerada por IA)

Corrija, ou marque a linha com  /* fora do sistema: <motivo> */  se for exceção real.

A exceção existe e é honesta — verde do WhatsApp, laranja da Hotmart. Só exige motivo escrito na linha.

07 Como usar