Marca

Especificação

0. Sobre esta especificação

Esta página é ao mesmo tempo a especificação e uma amostra dela. As cores, os tipos e os componentes da primeira metade são lidos da própria folha de estilos do site quando o site é gerado, então não têm como se afastar do código: se a página citar um token que a folha de estilos não tem mais, o build falha.

As regras abaixo são as lições do design do site, escritas para que a próxima mudança comece delas em vez de redescobri-las.

• Deve é uma regra que o site cumpre hoje. Uma mudança que quebra uma delas muda a regra primeiro, aqui.
• Deveria é o padrão. Sair dele pede um motivo.
• Lacuna marca um lugar onde o site ainda não cumpre a própria regra.

Como ela melhora. Toda regra tem um código (P1, C2…) e, quando veio de um erro ou de uma decisão, uma origem. Uma regra entra quando um padrão se repete ou um erro ensina, e sai quando deixa de valer o lugar. Cada revisão sobe a versão e acrescenta uma linha ao histórico (§ 12). As lacunas conhecidas (§ 11) são onde a próxima revisão começa.

1. Princípios

• P1. Achar antes de inventar. Uma identidade deve ser procurada no que já existe antes de ser proposta. O amarelo-sol (hsl(42 95% 50%)), a Jost e a Fira Code vieram todos do primeiro site de Leon, de 2022. Origem: uma primeira proposta, tipográfica e terracota, foi feita sem olhar, e substituída no mesmo dia.
• P2. Uma ideia, levada a toda parte. O site tem uma imagem só: um girassol feito de dados, com ordem no centro e entropia na borda, informação organizada contra o ruído. Todo motivo é uma forma menor dela: a marca, o favicon, os pontos de tema, o amarelo sob os links. Um motivo novo deve ser lido como parte dessa ideia, ou não entra.
• P3. Um conceito simples, feito com cuidado. A profundidade vai para o comportamento, não para mais elementos. Leon, sobre o primeiro girassol: “looking nice for a simple concept.”
• P4. Todo leitor recebe um site inteiro. Sem JavaScript, sem movimento, sem as fontes da web, o site deve continuar completo. O aprimoramento só acrescenta.
• P5. Nada sai do domínio. Nenhuma fonte, script ou analytics de terceiros. As fontes vêm do Fontsource, empacotadas no build.
• P6. O conteúdo sobrevive ao design. Os textos são Markdown puro em content/, fora do código. O design nunca deve precisar de marcação dentro de um texto; o site já foi Gatsby e Next.js, e os textos precisam sobreviver à próxima troca de ferramenta.
• P7. A origem faz parte do design. Todo texto diz em que língua Leon o escreveu e de onde veio. A nota de tradução é um elemento desenhado, não letra miúda.
• P8. Provado, não julgado. Uma afirmação de design se confere com algo que pode falhar: o contraste é calculado (a tabela acima), a animação é medida (S7), os links são contados depois de cada build.

2. Cor

A paleta tem dez cores com nome; os componentes usam papéis. Um tema é só uma troca de papéis.

• C1. Papéis, não cores. Os componentes devem usar os tokens de papel (--bg, --ink, --muted…). Os nomes da paleta só aparecem dentro das definições de papel e no par da marca (C3).
• C2. O amarelo-sol é luz, não tinta. Sobre fundo claro o amarelo nunca deve levar texto: ali ele chega a 1,8:1. Ele é superfície: a faixa do cabeçalho, o marca-texto sob os links, o anel de foco, os marcadores. No tema escuro, onde chega a 9,7:1, vira a cor do nome.
• C3. O par da marca é fixo. Marrom sobre sol (8,8:1) é o mesmo nos dois temas: o hover dos links, o link de pular, o selo de ensaio.
• C4. O ocre é para coisas grandes. O ocre chega a 3,6:1 sobre o fundo claro: pode colorir numerais, marcadores de lista, títulos no hover e outras marcas grandes ou decorativas, nunca texto corrido.
• C5. O escuro é quente. O tema escuro é marrom, nunca cinza neutro ou preto, e o texto é creme, nunca branco puro. O fundo claro é branco quente pelo mesmo motivo.
• C6. Os temas guardam sua cor. Significado é sol, modelagem é ocre, organização é musgo, fundamentos é o segundo marrom (marrom claro no escuro), carreira é sálvia, cada um um token --topic-*. Um tema tem o mesmo ponto em toda parte. O ponto sempre fica ao lado do rótulo, então não precisa de 3:1, mas deve continuar visível: pelo menos 1,5:1 sobre sua superfície, medido na tabela de contraste. Origem: o ponto de fundamentos estava a 1,3:1 sobre os chips escuros, e um CSS morto escondia o anel que deveria salvá-lo.
• C7. O contraste é calculado. Pares de texto devem chegar ao WCAG AA (4,5:1) nos dois temas; texto grande e marcas, a 3:1. A tabela acima é calculada a partir da folha de estilos a cada build.
• C8. O girassol segue o tema. Suas cores vêm de --dot-1 a --dot-4, resolvidas ao vivo por um elemento-sonda escondido (um canvas não lê light-dark()), então trocar de tema o recolore sem recarregar.
• C9. Uma linha por papel. Cada papel é definido uma vez, como light-dark(<claro>, <escuro>); um tema não passa de color-scheme. Origem: a v0.1 escrevia cada valor escuro duas vezes, uma para o sistema e outra para o seletor. Custo: light-dark() precisa de um navegador de 2024 em diante; um mais antigo cai nas cores padrão, sem graça mas legível (P4).

3. Tipos

• T1. Duas vozes. A Jost é a voz humana: a leitura, os títulos, o nome. A Fira Code é a voz dos dados: datas, rótulos, selos, metadados, código. O que descreve um texto (a data, o tipo, a língua) vai em mono; o texto em si, em Jost.
• T2. Rótulos são mono, peso 500, em maiúsculas, com espaçamento de 0,06em, em --step--1, na cor --muted.
• T3. A escala. O corpo é --step-0 (1,1875rem) com entrelinha 1,65. Os títulos ficam em entrelinha 1,1, com espaçamento de -0,02em. O tamanho de vitrine, fluido, --step-3, é do nome na home; os títulos de página usam --step-2.
• T4. Largura de linha. O texto corrido deve ficar dentro de --measure (40rem). As páginas de índice usam 48rem; só a home usa --wide (68rem).
• T5. As seções em prosa começam com um § de sol. Um texto não tem H1 no corpo: a página mostra o título.

4. Layout e espaço

• L1. Um invólucro só. .wrap, até --wide, com --gutter (1,25rem) de cada lado.
• L2. Três pontos de quebra, em rem, para acompanhar o tamanho de fonte do leitor: 34rem (celular: as listas viram uma coluna, o cabeçalho empilha), 44rem (o topo vira uma coluna, o sol acima do texto), 52rem (as duas colunas da home viram uma).
• L3. Ritmo. Margens, paddings e gaps deveriam vir da escala --space-1 a --space-6 (0,5, 1, 1,5, 2,5, 3,5, 5rem). As seções ficam a --space-5 uma da outra; os itens de um grupo, de --space-2 a --space-3. Um valor fora da escala pede um motivo; os que ficaram de antes da escala entram nela quando a regra deles for mexida.
• L4. Faixas. O cabeçalho é a superfície do topo (amarelo no claro, marrom no escuro). O rodapé é marrom escuro nos dois temas e leva o lema em sol.

5. Motivos e componentes

• K1. A marca é um disco de sol com o miolo escuro: o girassol a dezesseis pixels. O favicon é o mesmo disco sobre marrom.
• K2. Links são marca-texto: uma faixa de --mark sob o terço de baixo do texto. No hover ela se enche de sol e o texto fica marrom (C3). A navegação e os títulos dispensam a faixa: a navegação sublinha, os títulos mudam de cor.
• K3. O foco é um anel de sol de 3px, a 3px de distância, em tudo o que recebe foco.
• K4. Selos (tipo, rascunho) são mono, 0,68rem, em maiúsculas, com raio de 4px. Ensaio é o par da marca; nota é discreta (fundo de chip, filete); rascunho é musgo com branco.
• K5. Chips (temas, o índice de conceitos) são pílulas sobre --chip-bg, com o ponto do tema quando representam um tema.
• K6. Seixos (as três crenças da home, o cartão da comunidade) são --chip-bg com um raio irregular, um seixo e não uma caixa, numerados em ocre mono. Sob o ponteiro, o seixo sobe 4px e inclina menos de um grau. Origem: 0.4; até ali, um cartão com raio de 12px.
• K7. O seletor de língua mostra as línguas em que a página existe, a atual invertida. Nunca oferece uma língua que a página não tem.
• K8. O seletor de tema são três ícones (sistema, claro, escuro), com aria-pressed no atual.
• K9. Divisórias. Um filete de 1px em --rule entre itens de lista. Na prosa, uma barra curta de sol de 4px.
• K10. O personagem é Leon num cartum 3D macio (gerado no Gemini a partir das fotos dele, recortado em WebP com transparência por scripts/cutout.py). Uma cena por ideia do site, nunca só enfeite: o herói fica de pé diante do girassol, cada crença tem sua cena sobre uma bolha macia (sol, sálvia, sol). Toda cena tem um texto alternativo de verdade, em cada língua. As cenas flutuam devagar (6 a 7 s, 6px) e ficam paradas com reduzir movimento. Origem: 0.4, quando Leon publicou a própria semelhança (2026-11-03).
• K11. Morros fecham uma seção: uma curva suave, desenhada uma vez, na cor do que vem depois (o herói para --bg, a página para --footer-bg). Decorativos, aria-hidden.

6. O girassol

Gravidade como consciência, juntando dados (Leon). Cerca de 900 sementes numa esfera de Fibonacci, vista de um polo que se inclina para o leitor, girando devagar. Em repouso, o núcleo é denso e a borda se espalha como dados soltos, que flutuam por baixo do título. Quando o ponteiro chega perto do centro, as sementes caem no lugar com massa: aceleram, passam um pouco do ponto, espiralam e assentam, e as espirais de Fibonacci (21 e 34) aparecem como linhas finas. Ele respira, e uma onda de luz corre do polo para a borda a cada poucos segundos.

• S1. O movimento quer dizer algo. A ordem segue a atenção: só o ponteiro perto do centro ordena os dados. O movimento não deve ser só enfeite.
• S2. Tempo, não quadros. A suavização e a física devem ser funções do tempo decorrido (1 − e^(−k·dt)), e a física roda em passos de no máximo 1/120 s, para que o sol se comporte igual a 30, 60 ou 120 Hz. Origem: a suavização por quadro era um bug; o sol corria mais rápido em telas mais rápidas.
• S3. Pausar quando não é visto. O laço para enquanto o canvas está fora da tela.
• S4. Três níveis. Sem JavaScript: um SVG plano de 560 pontos, gerado no build, no mesmo lugar. Com movimento reduzido: um quadro parado da versão 3D. Fora isso, o canvas vivo, aparecendo aos poucos sobre o SVG.
• S5. Posicionado pelo CSS. A posição e o tamanho vêm de --sun-x, --sun-y e --sun-d no contêiner; o script os lê pelo SVG plano, então o layout fica na folha de estilos.
• S6. Ajustado num lugar só. Os parâmetros (N, CAP, TILT, SPIN, NEAR, FAR, BREATH, WAVE) ficam no topo do script, com nome e comentário.
• S7. Medido, não olhado. A animação se testa simulando o ponteiro e contando quadros. Origem: o painel do navegador do app às vezes reporta movimento reduzido, e para de animar quando sua janela está fora da tela; olhar não provava nada.

7. Tema

• M1. Três estados: sistema (o padrão), claro, escuro. A escolha fica no navegador do leitor (localStorage, chave theme) e vira data-theme no <html>, que só define o color-scheme (C9).
• M2. Sem piscar. Um script embutido no <head> restaura a escolha antes do primeiro desenho.
• M3. Tudo muda de tema pelos papéis, o girassol e o theme-color do navegador incluídos; as metatags leem --hero-bg da folha de estilos no build.

8. Língua e voz

• V1. Três línguas: inglês em /, português em /pt/, espanhol em /es/. As palavras da interface vivem em src/i18n.ts; todo o resto é conteúdo.
• V2. A voz de Leon nunca é inventada. O Saci organiza, corta, liga e traduz. Ideias que o Saci acrescenta são marcadas e contadas a Leon. Primeira pessoa que não é de Leon fica como rascunho.
• V3. Todo texto mostra sua origem: “Escrito em …” ou “Traduzido do … com o Saci”, e a fonte.
• V4. Citações de outros ficam abaixo de quinze palavras, com o nome do autor.
• V5. A moldura fala simples: frases curtas, sem hype. O site defende os fundamentos contra o hype; as palavras dele mesmo não devem vender.
• V6. Os nomes acessíveis falam a língua da página, como toda outra palavra da moldura: vivem em src/i18n.ts.
• V7. As traduções acompanham. Esta especificação é escrita em inglês e traduzida com o Saci para o português e o espanhol, um arquivo por língua em src/brand/spec/. Cada arquivo declara a versão que diz; uma tradução atrás do original quebra o build, para que nenhum leitor receba regras mais velhas que outro.

9. Acessibilidade

• A1. Um link de pular é a primeira coisa a receber foco.
• A2. Regiões e grupos de controles têm nome.
• A3. O contraste segue C7; o foco segue K3; o movimento segue S4.
• A4. Gráficos decorativos (o girassol, a marca, os pontos de tema) ficam escondidos das tecnologias assistivas.
• A5. Cores forçadas (o alto contraste do Windows) trocam os fundos, então os links recebem de volta o sublinhado, e selos e chips uma borda; a marca e os pontos de tema guardam suas cores.
• A6. A impressão é o texto em tinta sobre papel: sem faixas, sem sol, sem controles; o código vira tinta e quebra a linha.

10. Como as decisões de design se tomam aqui

• D1. “Sem preferência” não é carta branca. Antes de escolher por Leon, olhe o que Leon já fez. Origem: a stack foi escolhida antes de ler a história do site; a história mudou a pergunta.
• D2. Carta branca ainda é proposta. “Be creative” (Leon) quis dizer: propor, mostrar, refinar junto em passos pequenos e registrar quem decidiu o quê.
• D3. As decisões vivem onde duram: o porquê na nota do projeto na Mente, o como no repositório, as regras nesta página.
• D4. A estrutura vem do uso. Nenhum token, componente ou regra nova até um padrão se repetir.

11. Lacunas conhecidas

Onde a v0.5 começa.

• As cores forçadas estão escritas, não provadas (A5): os navegadores à mão não as simulam. Precisam de um olhar no Windows com um tema de contraste.
• Duas navegações dividem um nome: o seletor de língua e a lista de línguas do rodapé se chamam ambos “Língua”.
• Espaços fora da escala (3rem, 2rem, 0,75rem e outros) ficaram de antes da L3.
• Dois pontos de tema passam no limite sobre os chips claros: significado a 1,6:1 e carreira a 1,9:1, contra um piso de 1,5.
• As cenas são capturas de 800px da janela do Gemini, não os arquivos em tamanho cheio: servem nos tamanhos usados, ficam macias em telas grandes. O tamanho cheio vem pelo Chrome (K10).
• K10 e K11 ainda não têm amostra nesta página, só na home.

12. Histórico

• 0.4 · 2026-11-03. A home com o personagem vai ao ar: a semelhança de Leon, por escolha dele. Regras novas K10 (o personagem) e K11 (morros); os cartões de K6 viram seixos. As cenas saem do <Image> do Astro (tamanhos e srcset).
• 0.3 · 2026-11-02. A página em três línguas: as regras em src/brand/spec/<língua>.md, as palavras da página em src/brand/ui.ts, e uma conferência no build que mantém as traduções na versão do original (V7).
• 0.2 · 2026-11-02. Fechadas as lacunas da 0.1. Cada papel é uma linha light-dark() (C9). As cores de tema viraram tokens; o ponto de fundamentos voltou a aparecer no escuro (C6), e o CSS morto em volta dele saiu. Os nomes acessíveis foram traduzidos (V6). O theme-color lê os tokens (M3). Uma escala de espaço (L3, provada sem mudar nenhum valor). Regras para cores forçadas e impressão (A5, A6); a impressão conferida imprimindo em PDF.
• 0.1 · 2026-11-02. Primeira versão, extraída das sessões que construíram o site: a identidade, o girassol, o seletor de tema.