A régua da marca mateusfb.ai, dos tokens aos componentes: o que vale no site, no carrossel e em qualquer peça nova. Os valores desta página saem dos arquivos do projeto no momento do build, e os componentes são os mesmos que o site usa, então ela não tem como atrasar em relação ao código.
Não existe azul de link, vermelho de erro nem verde de sucesso. Estado se mostra por inversão, por peso ou por posição. Cinza é opacidade de fg, nunca cor nova.
O piso escrito: corpo de texto nunca abaixo de 60%, metadado nunca abaixo de 40%. O fg/45 dá 4,4 para 1, logo abaixo dos 4,5 da WCAG AA, e fica assim de propósito, porque nada que se leia como texto corrido usa esse degrau. O fg/15 dá 1,4 para 1 porque a borda tracejada é textura: quem ancora o cartão para o olho são as marcas de canto, em fg cheio.
Inverte: fundo fg, letra bg.
Borda em fg cheio, ícone de alerta e a palavra. Nunca só um tom.
Ícone mais palavra. A bolinha verde não existe neste sistema.
Duas famílias, as duas do projeto. Tamanho cru no className reprova na catraca: a hierarquia sai da escala, não de um número escolhido na hora.
Cinco degraus encolhem no telefone. Caption, button, field e eyebrow não mudam: eles já são o piso. O text-field existe por causa do Safari do iPhone, que dá zoom ao focar um campo abaixo de 16px.
Geist e Geist Mono vêm do pacote do projeto e são servidas junto com a página. Nunca puxe uma fonte do Google Fonts no site.
Frase que quebra em duas linhas e deixa UMA palavra sozinha embaixo. Ele não aparece no código: aparece na largura da tela de quem lê, e some quando a janela muda de tamanho, que é o que o faz passar despercebido.
Título distribui as linhas com `text-wrap: balance`; texto corrido puxa a última palavra para cima com `text-wrap: pretty`. Os dois valem para o site inteiro, na folha global. Onde a quebra é decisão editorial, como a manchete de um post aprovada palavra por palavra, ela continua explícita no conteúdo.
A medida do texto de apoio é o token `medida-nota`, 448px, e não um valor em `ch`: o `ch` do CSS é a largura do ALGARISMO ZERO, 9,3px nesta fonte, enquanto a letra média mede 6,4px. Com 58ch as notas saíam com 84 caracteres por linha. Medido no navegador, contando caractere por linha.
Todo gate nasce com a mutação declarada: um defeito real, injetado no código de verdade, que ele tem que pegar. Gate que fica verde com o defeito dentro é um gate quebrado, e quem acusa isso é o meta-gate.
A pauta passa embaixo do texto sem cortar letra nenhuma.
A regra que faz funcionar é uma só: todo espaçamento vertical é múltiplo da pauta. Um margin fora do múltiplo desalinha todo o texto abaixo, e o efeito de papel pautado morre.
Cada uma tem um trabalho, e juntas cobrem o site inteiro. Estão todas em app/tokens.css, e esta página lê de lá.
Largura máxima do conteúdo.
Respiro lateral em desktop. No telefone, 24px.
Declarado e não usado em lugar nenhum hoje.
O vão entre linhas de post: coladas, elas leem como pilha.
Altura da navegação, usada em calc para centrar página.
O único raio que não é pílula nem zero: o canto da área de texto.
Uma coluna no telefone, duas no tablet, três ou quatro no desktop. O conteúdo passa sempre pelo Container, e o respiro lateral é o gutter: nenhuma peça encosta no corte da tela.
O padrão é raio zero. Arredondar é exceção, e cada exceção tem motivo. Separar é trabalho da borda tracejada, nunca de sombra.
A única sombra do sistema é o brilho interno da pílula de vidro, e ela existe para dar volume ao vidro, não para separar objeto.
Easing e duração saem de lib/motion.ts, nunca inventados na hora. Com movimento reduzido tudo cai para quase zero, e a peça continua legível e no mesmo lugar.
A entrada escalona por delay de 80ms, nunca por duração diferente: duas coisas que entram juntas têm a mesma curva, e o que muda é quando cada uma começa.
A entrada de seção é o Reveal: opacidade 0 para 1 com y de 12px para 0, disparando com margem de -10% e uma vez só. Rolar para cima e descer de novo não re-anima nada. Botão não se move no hover: quem muda é a cor, e as letras embaralham.
Grade de 24 e traço 1,5, o mesmo dos planos da marca. Três formas de tinta, e só três: contorno, preenchido para o glifo que só existe como massa, e o ponto de ênfase onde o traço não faz pingo.
Sólido isométrico branco, sem contorno nenhum, existindo só pela densidade do ponto, com a aresta de cima acesa e a borda se desfazendo em pó. É a mesma linguagem no hero, nos tópicos de projeto e na capa de cada post, e até aqui ela não tinha nome.
São os sólidos DE VERDADE, lidos de social/instagram/capa.mjs, e o movimento é o DO HERO, com os números dele: cada ponto cintila sozinho, o campo respira a cada 6s, e o cursor empurra quem está num raio de 140px com um redemoinho de 20°, que volta com inércia (0,10 entrando, 0,05 soltando, então o rastro dura mais que a ida). Passe o cursor devagar por cima. Com movimento reduzido, fica um quadro parado.
À esquerda, o que esta folha desenha: o mesmo campo de tons da capa, ditherizado em canvas e animado com a física do hero. À direita, o PNG publicado. A diferença que sobra é o grão: a capa de verdade ditheriza com célula de 2,2px num quadro de 918, e aqui a célula é de 3px numa peça três vezes menor.
A mesma dos planos da marca. Nada de perspectiva e nada de ponto de fuga: a laje é vista de cima e de lado ao mesmo tempo.
A forma existe só pela densidade do ponto: topo claro, lateral direita no meio, lateral esquerda escura. Desenhar a silhueta com um traço vira ícone com textura dentro.
A quina do topo ganha uma faixa mais densa. É ela que faz o volume ler como volume, e não como mancha.
O objeto não termina numa linha: ele se desfaz em pontos soltos que somem. É daí que vem o nome.
Cada lugar tem uma restrição diferente. O hero precisa de movimento contínuo sem custar processamento por quadro, então lê uma imagem pronta. O tópico precisa girar de verdade, então é geometria em 3D. A capa precisa virar PNG num navegador sem cabeça e custar R$0, então nasce em canvas.
Esta folha desenha a quarta versão, em CSS, porque especificação não carrega WebGL e não vale 40 KB de círculos em SVG.
O que as três preservam é o que decide: projeção, ordem dos tons, aresta acesa e dispersão. O resto é o meio: partícula viva no hero, giro lento no tópico, pixel congelado na capa.
Sólido para a ação principal, contorno para a secundária. Um sólido por tela, no máximo. O rótulo diz o que acontece ao clicar, nunca clique aqui.
Passe o cursor: o sólido inverte em 200ms e as letras embaralham da esquerda para a direita. O contorno não muda nada além das letras. Navegue por tab: o foco é um contorno de 1px em fg, afastado 4px, e ele é o mesmo em todo o sistema.
Com href interno sai um Link do Next. Com http, mailto ou tel sai um a, e só http abre em aba nova. Sem href sai um button, cujo tipo padrão é button e não envia formulário.
A borda existe sempre, inclusive no sólido, onde é branca sobre branco. Se nascesse no hover, 1px empurraria o layout naquele instante.
A mesma linha de classes que o formulário da comunidade, a senha do painel e o editor de notas escreviam cada um à sua maneira. Erro se marca por borda cheia, ícone e palavra, porque vermelho não existe aqui.
A área de texto é a única coisa do sistema com raio que não é pílula nem zero: radius-campo, 10px. Ela é mono porque o que se escreve ali é Markdown.
Os três usam o controle nativo escondido com sr-only, nunca display none: foco, toque, tecla de espaço e leitor de tela continuam sendo os do navegador, e só a aparência é nossa.
Selecionado é inversão. Situação é ícone mais palavra, porque a bolinha colorida não existe neste sistema e não fazia falta.
Trilho em fg/15, preenchimento em fg cheio. O número vai em mono com tabular-nums, senão a coluna dança a cada atualização.
Projeção isométrica: o de cima sólido, os dois de baixo só contorno. Desenho 2D que lê como 3D, e que abstrai camadas construindo alguma coisa.
Nunca: mudar a proporção 2 para 1 do losango, preencher os planos de baixo, acrescentar arestas laterais, rotacionar, inclinar, aplicar cor, gradiente ou sombra, ou juntar a marca a uma letra.
Três peças que só aparecem quando algo sai do caminho feliz, e por isso costumam ser as menos cuidadas de um sistema. Aqui elas usam o mesmo cartão tracejado do resto.
Quando a primeira sair, ela aparece aqui e no feed em português e em inglês.
Número, eyebrow, título e um parágrafo de apoio na coluna ao lado. É o que dá ritmo à home inteira, e o número é âncora, não enfeite.
Notas curtas e práticas sobre construir com agentes.
Série não se distingue por cor aqui, porque não há cor: se distingue por traço e por rótulo direto. O que parece limitação é a versão que funciona impressa, no escuro e para quem não separa matiz.
Três medições reais do mesmo dia: 1494 KB quando o three.js entrava no bundle inicial de toda rota, 772 depois que ele saiu, 794 depois que a main trouxe o next/image no bloco de retrato. O teto é a catraca, em traço apagado porque é referência, não medida.
Horizontal porque rótulo de categoria é texto, e texto deitado se lê. O valor vai na ponta da barra, nunca num eixo que obriga a medir com o olho.
Uma célula por dia, cinco degraus de tinta. É o gráfico mais honesto que um sistema sem cor tem para frequência, porque densidade é exatamente o que a escada de cinza sabe dizer, e é a mesma linguagem do dither das capas. Os dados aqui são um exemplo.
Radar compara PERFIL, não valor: o olho compara área e formato bem, e ângulo mal. Se a pergunta é quanto vale um eixo, isso é barra. Até dois perfis no mesmo desenho, e o segundo entra tracejado e sem preenchimento, senão uma área esconde a outra. Os números aqui são contados dos arquivos que compõem esta página.
A última coluna em fg cheio e o resto em fg/25: a cheia é o agora, ou o degrau em foco, e é a única coisa que precisa saltar. Sem eixo vertical, porque o valor que importa vai escrito. Aqui as colunas são os tamanhos da escala, lidos de app/globals.css.
Uma barra de 100% com as partes em degraus de tinta, e a legenda logo abaixo NA MESMA ORDEM, com o número junto. É a exceção da regra de rotular direto: parte pequena não cabe rótulo dentro. O que continua proibido é a legenda que só dá a cor e manda você adivinhar o tamanho.
Uma linha por dia, uma célula por faixa de hora. Serve para achar PADRÃO, a hora em que sempre acontece, e nunca para ler o valor de uma célula: para isso existe a tabela. Os dados aqui são um exemplo.
Cheio, tracejado, pontilhado, e o nome no fim da linha. Legenda com quadradinho obriga o olho a ir e voltar.
Acima disso, vários gráficos pequenos lado a lado, e não mais um traço no mesmo.
O período anterior e a meta ficam apagados. O agora fica em fg cheio.
Ponto cheio no fim, que é onde o olho procura o agora.
Todo valor no eixo é um valor que o gráfico alcança de verdade.
Número que ninguém mediu não pode parecer medido.
Número alinha à direita e usa tabular-nums. Sem isso a coluna se mexe a cada dígito, e a comparação vertical, que é o único motivo de existir uma tabela, deixa de funcionar.
| Rota | Situação | JS |
|---|---|---|
| en/about | acima da média | 828 KB |
| en/notas | acima da média | 814 KB |
| en/notas/building-with-agents | acima da média | 814 KB |
| en/notas/hello-world | acima da média | 814 KB |
| pt/about | acima da média | 828 KB |
| pt/notas | acima da média | 814 KB |
| pt/notas/building-with-agents | acima da média | 814 KB |
| pt/notas/hello-world | acima da média | 814 KB |
| Média de todas as rotas | 796 KB |
| Gate | Prova |
|---|---|
| so-preto-e-branco | cor cromática injetada |
| escala-tipografica | tamanho cru novo |
| peso-do-bundle | import estático de biblioteca pesada |
Quando alguma passar, ela aparece aqui com o excesso em KB.
Tabela vazia continua sendo superfície do sistema, não um vão. O estado vazio diz o que fazer, e não só que não há nada.
Painel não é página de leitura: o resumo vem antes do detalhe, o que precisa de atenção se enxerga sem contar número, e todo bloco tem o mesmo topo, o mesmo respiro e a ação no mesmo canto.
Rótulo e período em cima, número grande, e embaixo o detalhe: a lista que abre o número, a série que mostra a forma, ou a situação. A variação NÃO TEM COR. Num painel colorido, verde e vermelho dizem bom e ruim sem ninguém escrever nada, e isso é falso metade das vezes: erro que sobe é ruim, custo que desce é bom, e o mesmo verde estaria nos dois. A seta diz a direção; o rótulo diz o que ela significa.
Os mesmos blocos numa grade de duas colunas, com o gráfico largo ocupando as duas. Todo número aqui sai de um arquivo do repositório; onde entra exemplo, a legenda diz que é exemplo.
O número que responde a pergunta vem primeiro; o gráfico que explica vem depois.
Ícone e palavra, nunca um tom. Quem precisa de atenção se enxerga sem ler o número.
Todo bloco com o mesmo topo, o mesmo respiro e a ação no mesmo canto.
A ação de um bloco é um link em eyebrow, não um botão: botão cheio compete com o número, que é o que a pessoa veio ver.
Uma no telefone. O gráfico de linha ocupa duas, senão vira garrancho.
Atualização não se anuncia com animação: o painel fica parado e o número troca.
Todo valor sai de um arquivo do repositório, e o exemplo que não sai diz que é exemplo.
As duas listagens do site. O cartão é uma grade de objetos iguais; a linha de post é uma pilha, e por isso o vão entre elas é o cell-gap, e não o respiro de um cartão.
Uma página que se monta sozinha.
Três telas, uma rampa de brilho.
O notch vira console de música.
components/sections/ProjectCard.tsx é o componente real. O cartão inteiro é o link, e a etiqueta de em construção é a inversão, no alto à direita.
components/sections/PostRow.tsx é o componente real. Uma só coisa domina: o título. Data e resumo são apoio, resolvido por tamanho, peso e opacidade, nunca por cor, e o Ler é metadado, porque o link é a linha inteira.
Rótulo em eyebrow, campo, dica ou erro embaixo. A ação principal é sólida e fica à esquerda; a saída é um botão de texto em fg/45, não um segundo botão disputando atenção.
Preencha e eu te levo pro Vibe100Coding Club.
Seus dados estão seguros e não são compartilhados.
Um carrossel por projeto, quatro slides: capa, dois de como funciona com dois itens cada, e a chamada. Mais uma peça estática, para quando o post é um só.
Estes são os PNGs publicados, servidos de /social/, byte a byte iguais aos que o render.sh produz. Uma folha de especificação que redesenha a peça à mão nunca fica igual e envelhece sozinha: a peça é a peça.
Cada peça é renderizada nos dois fundos, o que dá 40 PNGs: quatro projetos, cinco peças, dois temas. O fundo é escolhido por post, e é isso que dá xadrez na grade do perfil.
Isto NÃO é a peça, é o diagrama dela: os blocos que o gerador monta, na ordem em que ele monta, com a copy real lida de dados.mjs. Serve para dizer o que entra em cada faixa, e a peça ao lado é que diz como fica.
Medido no PNG, não estimado: preto a 15% sobre branco pesa mais que branco a 15% sobre preto, e a moldura tem que sussurrar nos dois fundos. É a única coisa que o tema claro NÃO faz por inversão simples.
A arte nasce em canvas no mesmo navegador sem cabeça que já rasteriza os slides: o PNG do slide é a única saída, sem arquivo intermediário, sem ferramenta externa e sem binário novo no repositório.
Herda o TRATAMENTO do hero (sólido isométrico ditherizado, aresta acesa, poeira nas bordas) e troca o ASSUNTO: cada projeto tem o seu sólido. Não é a cena do hero repetida quatro vezes, nem o print da interface.
Assinatura, situação e o que mais existe. O rodapé é o único lugar onde a marca aparece de novo depois do topo.
Ferramentas, agentes e conteúdo. Entregues em público.
Seções numeradas, uma medida de leitura curta e muito respiro. O que dá ritmo não é linha divisória, é espaço, e o que dá orientação é o número da seção.
Borda, fundo e raio dizem objeto separado. Gastar nos três achata a hierarquia.
O texto nasce alinhado à esquerda, onde o olho volta.
Primeiro o espaço. A linha entra quando o espaço não bastou.
Todo recurso estrutural precisa dizer algo verdadeiro sobre o conteúdo. Numerar uma seção é dizer que existe ordem; se não existe, o número é enfeite.
Um sistema sem cor precisa acertar o resto. Foco visível, alvo grande, controle nativo e movimento que se desliga de verdade.
Contorno de 1px em fg, afastado 4px, declarado uma vez na folha global. Nenhum componente redefine o dele.
44px de altura em qualquer coisa que se clique com o dedo, mesmo quando o desenho é menor.
Marcar, escolher e ligar usam o input do navegador escondido com sr-only. display none tira do teclado.
Animação e transição caem para 0,01ms e a árvore renderizada é a mesma, para não haver diferença entre servidor e cliente.
Erro e situação carregam ícone e palavra. Aqui não há escolha: não existe cor para carregar sentido.
Alt que descreve o que a imagem faz na página. Decoração vai com aria-hidden, sem texto nenhum.
pt-BR direto, sem jargão, o número antes do adjetivo. Três destas regras têm catraca, então não são preferência: reprovam o commit.
| Regra | Em vez de | Escreva |
|---|---|---|
| Travessão | Uma coisa — e outra | Uma coisa, e outra |
| Promessa | O melhor kit de agentes | O kit que eu uso todo dia |
| Número | Centenas de commits | 31 commits, medidos hoje |
| Jargão | Configure o webhook | Receber aviso de nota nova |
O sistema não se sustenta por disciplina, se sustenta por gate. Cada regra que podia ser furada em silêncio virou um programa que reprova o commit.
| Catraca | O que reprova |
|---|---|
| sem-travessao | Travessão em texto que uma pessoa lê. |
| lista-de-gates | Gate que existe no arquivo e não roda. |
| sessao-abre-arvore | O comando que abre a árvore de trabalho parando de funcionar. |
| check | eslint, tsc e os testes. |
| build | O build do Next. |
| sem-hype | Promessa sem base na copy: garantido, vagas limitadas, o melhor. |
| numero-com-fonte | Número em copy que não existe em content/. |
| grafico-com-serie-real | Sem descrição nesta página. |
| so-preto-e-branco | Qualquer cor cromática em app/ ou components/, por hex, rgb, hsl ou nome. |
| botao-visivel-no-invertido | Sem descrição nesta página. |
| escala-tipografica | Tamanho de fonte cru fora da escala e fora da lista de exceções. |
| frase-com-maiuscula | Sem descrição nesta página. |
| repo-url | URL de repositório montada a partir do slug. |
| links-vivos | Link morto na documentação. |
| palavra-chave | Código de projeto fora do formato, repetido entre projetos, ou ausente da legenda ou da arte do CTA. |
| peso-do-bundle | Biblioteca pesada entrando no JS inicial de uma rota. |
| artes-servidas | Sem descrição nesta página. |
| personagem-sem-dono | Sem descrição nesta página. |
| acesso-em-camadas | Sem descrição nesta página. |
| painel-fechado | Sem descrição nesta página. |
| dominio-com-cookie | Sem descrição nesta página. |
| hosts-exclusivos | Sem descrição nesta página. |
| marca-sem-fonte | Sem descrição nesta página. |
| previa-sem-vazamento | Sem descrição nesta página. |
| ramo-com-marca | Sem descrição nesta página. |
| sem-jargao | Sem descrição nesta página. |
| tela-fala-os-dois-idiomas | Sem descrição nesta página. |
| secao-com-elemento | Sem descrição nesta página. |
| faixa-alternada | Sem descrição nesta página. |
| painel-que-responde | Sem descrição nesta página. |
| destaque-do-kit | Sem descrição nesta página. |
| passo-sem-vazio | Sem descrição nesta página. |
E a regra que faz um gate valer alguma coisa: gate que não sabe dizer como se prova não protege nada. Cada um nasce com a mutação declarada, um defeito real injetado no código, e o meta-gate exige vermelho em cada uma antes de aceitar que a cerca existe.
