Voltar paraBack to ExperimentosTinkering

O sistema por trás deste site.The system behind this site.

Cores, tipos e espaços escolhidos de antemão, como ensina o Refactoring UI. Os valores desta página são lidos direto do CSS, então ela nunca fica desatualizada.Colors, type and spacing chosen up front, as Refactoring UI teaches. The values on this page are read straight from the CSS, so it never goes out of date.

O site no ar usa Neutro com Bronze. As outras opções são candidatas: troque para ver cada uma aplicada nesta página, inclusive no cabeçalho. As de modo único não têm modo escuro: um só tema, com fundo menos claro.The live site uses Neutral with Bronze. The other options are candidates: switch to see each one applied to this page, header included. The single-mode ones have no dark mode: one theme, on a less bright ground.

CorColor

Duas camadas. As escalas guardam os valores em OKLCH, onde a luminosidade é perceptual: o mesmo número parece igualmente claro em qualquer matiz. Os papéis apontam para um degrau da escala, e os componentes só usam os papéis. Trocar de paleta é trocar a escala.Two layers. The scales hold the values in OKLCH, where lightness is perceptual: the same number looks equally light in any hue. The roles point at one step of a scale, and components only use the roles. Switching palettes means switching the scale.

CinzasGreys

DestaqueAccent

Sem destaque nesta paleta: o papel --brand usa a cor do texto.No accent in this palette: the --brand role uses the text color.

PapéisRoles

--background: Fundo da páginaPage background base-0 · escurodark base-950
--foreground: Texto principalMain text base-950 · escurodark base-50
--muted-foreground: Texto secundário, rótulosSecondary text, labels base-600 · escurodark base-400
--muted: Fundo de códigoCode background base-100 · escurodark base-800
--border: Linhas e divisóriasRules and dividers base-200 · escurodark branco 10%
--brand: Destaque: setas, sublinhados, citaçõesAccent: arrows, underlines, quotes brand-600 · escurodark brand-400

ContrasteContrast

Calculado na hora, para a paleta e o modo escolhidos. Texto precisa de pelo menos 4,5:1 (AA).Calculated live for the chosen palette and mode. Text needs at least 4.5:1 (AA).

Aa

Texto sobre fundoText on background

…
Aa

Texto secundário sobre fundoSecondary text on background

…
Aa

Destaque sobre fundoAccent on background

…
Aa

Código sobre seu fundoCode on its background

…

TipografiaType

Três famílias, cada uma com um papel: Newsreader (serifa) para títulos e números, Geist para leitura, Geist Mono para navegação e rótulos. Uma escala feita à mão, em px e rem, nunca em em.Three families, each with a job: Newsreader (serif) for headings and numbers, Geist for reading, Geist Mono for navigation and labels. A hand-picked scale, in px and rem, never em.

DisplayDisplay Newsreader · 60→96px · 0.92

Carlos Bronze.
Título de páginaPage title Newsreader · 32→46px · 1.15

Criatividade em função de resultado.Creativity in service of results.
NúmeroNumber Newsreader · 40px · 1

100
Título de seçãoSection title Newsreader · 24px · 1.2

O que aprendiWhat I learned
CitaçãoQuote Newsreader · 20px · 1.4

Alguns materiais não envelhecem.Some material never gets old.
Texto longoLong text Geist · 18px · 1.75

Parágrafos de páginas como Sobre e os projetos.Paragraphs on pages like About and the projects.
TextoText Geist · 16px · 1.6

Descrições curtas e listas.Short descriptions and lists.
NavegaçãoNavigation Geist Mono · 14px

sobre aprendendo experimentosabout learning tinkering
RótuloLabel Geist Mono · 12px · caixa alta · 0.06em

ExperimentosTinkering

Entre 16, 18 e 20px os degraus são menores que os 25% que o livro recomenda. É de propósito: corpo e citação precisam desse ajuste fino. O resto da escala respeita a regra.Between 16, 18 and 20px the steps are smaller than the 25% the book recommends. That's on purpose: body and quote text need the finer control. The rest of the scale follows the rule.

EspaçoSpacing

Começar com espaço demais e tirar até ficar bom. A escala aperta embaixo e abre em cima, para que nenhum degrau fique a menos de uns 25% do vizinho.Start with too much white space and remove it until it looks right. The scale is tight at the bottom and opens up at the top, so no step sits within about 25% of its neighbour.

Fora da escala, em uso hoje e a revisar:Off the scale, in use today and up for review: 6 · 14 · 20 · 40 · 44 · 56

ComponentesComponents

Os mesmos componentes das páginas de projeto, para quebrar parágrafos sem inventar estilos novos.The same components the project pages use, to break up paragraphs without inventing new styles.

Stats

Performance: 77 → 91
Speed Index: 4,4 s → 0,9 s
PageSpeed: 34 → 100

Steps

01 Mapear Rodar o crawler no site.
02 Construir Conteúdo primeiro.
03 Polir Desktop e mobile.

01 Map Crawl the site.
02 Build Content first.
03 Polish Desktop and mobile.

Rows

2021: VitePress
2023: Astro Starlight
2025: Fumadocs

Texto de projetoProject text

O que aprendi

Parágrafo com um link e um trecho de código.

Antes de pensar na interface, vale pensar no formato do dado.

What I learned

A paragraph with a link and some code.

Before thinking about the interface, think about the shape of the data.

Link de seçãoSection link

SobreAbout O que me moveWhat drives me

O que levei do Refactoring UIWhat I took from Refactoring UI

Hierarquia vem de cor e peso, não só de tamanho. Texto secundário é mais claro, não menor.Hierarchy comes from color and weight, not just size. Secondary text is lighter, not smaller.
Cinzas não precisam ser cinza. Um pouco de matiz dá temperatura sem chamar atenção.Greys don't have to be grey. A touch of hue adds warmth without drawing attention.
Defina os tons de antemão. Nada de clarear ou escurecer na hora.Define your shades up front. No lightening or darkening on the fly.
Linhas de 45 a 75 caracteres. Por isso o texto fica em 720px, mesmo com tela sobrando.Lines of 45 to 75 characters. That's why text stays at 720px, even with screen to spare.
Não depender só da cor. Link ativo também é sublinhado, e o contraste tem texto, não só um selo verde.Don't rely on color alone. The active link is also underlined, and contrast is spelled out, not just a green badge.