Design

O sistema visual do site em uma página. Tudo aqui é renderizado com o mesmo main.css que as outras páginas carregam, então o que aparece nesta tela é o que existe de verdade. Troque o tema no canto para ver os dois lados.

Cores

Definidas como custom properties em :root no main.css. O escuro é o padrão; o claro entra por [data-theme="light"]. As duas colunas de hex mostram o valor em cada tema, o quadrado mostra o valor ativo agora.

amostratokenescuroclaroonde entra

--bg-primary#000000#ffffff fundo da página

--bg-secondary#1a1a1a#fafafa bloco elevado, tabela zebrada

--bg-tertiary#2a2a2a#f5f5f5 campo de formulário, código

--text-primary#ffffff#000000 texto e traço dos desenhos

--text-secondary#b3b3b3#666666 apoio, legenda

--text-tertiary#808080#999999 metadado, data, rótulo de eixo

--border-color#333333#e0e0e0 fio de 1px de card, tabela e régua

--quote-border#666666#999999 barra da citação

--link-color#00BFFF#00BFFF link no corpo do texto

--link-color-hover#40cfff#0099cc link sob o cursor

--d-vivo#ff5a5a#d0342c só no deck: ponto de "ao vivo"

A paleta é monocromática por regra. O azul do link e o vermelho do "ao vivo" são as duas únicas cores, e cada uma tem um trabalho: uma diz o que é clicável, a outra diz o que está acontecendo agora. Gráfico, ícone e diagrama usam currentColor e níveis de cinza, nunca cor de categoria.

Tipografia

Duas famílias. Inter Tight no cromo de interface (título, menu, rótulo, número). Lora na leitura longa, via --font-serif: é o que os estudos e a escrita usam no corpo do texto. O deck mantém EB Garamond, que é decisão dele.

Inter Tight · interface

Engenharia e dados

Corpo de interface em Inter Tight, 1rem, entrelinha 1.6, espaçamento 0.01em.

Metadado e legenda, 0.75rem, em text-tertiary.

Lora · leitura

O preço de uma capacidade fixa caiu mil vezes em três anos. O custo de rodar o melhor modelo de hoje sobe de 3 a 18 vezes por ano. As duas curvas são verdadeiras ao mesmo tempo e apontam para lados opostos.

1234567890 · números com a mesma serifa, para tabela dentro do texto.

Logos

Marca

A tartaruga marinha é a marca do site: proteção, longevidade, estratégia. Fica em _includes/site/logo.html como SVG inline em currentColor, não como <img>, para herdar a cor do texto ao redor e virar sozinha no tema claro, sem filter: invert().

site/logo.html

logo/fontenele-logo.svg

favicon-dark.svg

favicon-light.svg

Kit de ferramentas

Silhueta de uma cor, tirada do Simple Icons 16.28.0 e normalizada para viewBox="0 0 24 24" com fill="currentColor". Vive em _includes/logo/stack/ e entra inline, então quem monta o bloco só precisa dar a cor: .d-stack__logo define color: var(--text-primary) e o logo acompanha o tema sozinho, sem filter: invert(). Os desenhos são CC0; as marcas seguem de cada empresa, em uso nominativo.

claude cursor notebooklm mcp python observable github jekyll nextjs vercel cloudflare maplibre openstreetmap apis-abertas

apis-abertas.svg não é marca de ninguém: é um glifo desenhado aqui, porque "APIs abertas" é categoria, não produto.

Aviação

Usadas nos estudos de aviação. A Embraer virou currentColor em uma cor só. A Azul mantém o mosaico original e troca só a palavra por variável, que é o tratamento de fundo escuro da própria marca.

aereas/azul aereas/gol fabricantes/embraer

Componentes

O card é a unidade de composição do site: caixa monocromática com fio de 1px nos quatro lados, sem sombra, sem cor de categoria. Título, tag, data e chamada em três níveis de cinza. É o mesmo bloco em /estudos/, na home e no /org/.

Categoria · Tema