identidade.

As cores, fontes e medidas deste site, nos dois temas. São os mesmos valores que o CSS usa, então servem para montar proposta, PDF ou slide com a minha cara. Para IA, a mesma coisa está em/identidade.md.

princípios.

Paleta monocromática: preto, branco e cinzas. A única cor vem dos ícones das tecnologias, na cor de cada marca.
Tema escuro é o padrão. O claro inverte a escala, com os mesmos papéis.
Título de seção em Instrument Serif itálica, em minúsculas e terminado por um ponto em cor secundária, como em “projetos.”.
Uma coluna de no máximo 40rem, muito espaço em branco e divisórias de 1px na cor de borda, sem sombra.
Texto corrido em cor secundária; o que é nome, título ou valor fica na cor de texto ou na primária.

cores.

Fundo

--background · Fundo da página e cor do texto em botão primário

escuro: #050505
claro: #ffffff

Texto

--foreground · Texto principal e nomes

escuro: #fafafa
claro: #0a0a0a

Primária

--primary · Títulos, destaques e fundo do botão primário

escuro: #e6e6e6
claro: #171717

Texto secundário

--muted-foreground · Parágrafos, legendas, datas e metadados

escuro: #a1a1a1
claro: #71717a

Superfície suave

--muted · Hover de botão e de link, botão de voltar ao topo

escuro: #212121
claro: #f4f4f5

Cartão

--card · Fundo de tooltip e de bloco de código

escuro: #131313
claro: #fafafa

Borda

--border · Divisórias e contorno de 1px

escuro: rgba(255, 255, 255, 0.1)
claro: rgba(0, 0, 0, 0.1)

Foco

--ring · Contorno de foco do teclado

escuro: #6f6f6f
claro: #a1a1aa

Brilho

--brilho · Reflexo que atravessa o gráfico de atividade

escuro: rgba(255, 255, 255, 0.14)
claro: rgba(0, 0, 0, 0.07)

escala.

Do dia sem contribuição ao mais cheio, no gráfico de atividade. Serve de escala de cinzas para gráfico e tabela.

escuro#1c1c1c · #40403f · #6b6b6a · #9c9c9a · #e6e6e6

claro#ebebee · #c6c6cb · #96969d · #5d5d65 · #1f1f22

tipografia.

Geist

--sans · Texto, nomes, botões e navegação. Variável, 400 no texto, 500 em destaque, 600 no nome da home.

Instrument Serif

--heading · Títulos de seção, sempre em itálico e em minúsculas. 400 itálico.

Geist Mono

--mono · Código, comandos e rótulos técnicos. 400.

Nome na home: Geist 600, 1.5rem, espaçamento -0.025em
Título de seção: Instrument Serif itálico, 1.25rem, altura de linha 1.75rem
Texto: Geist 400, 1rem, altura de linha 1.5
Parágrafo de página: Geist 400, 0.875rem, altura de linha 1.625rem
Legenda e metadado: Geist 400, 0.75rem

medidas.

--radius: 0.625rem · Canto de bloco de código; botão e tooltip usam 0.5rem
--container: 40rem · Largura máxima do conteúdo, numa coluna só

css.

As variáveis prontas para colar. A versão com fontes e medidas, em tabela, está em/identidade.md e no/llms.txt.

/* tema escuro */
:root {
  --background: #050505;
  --foreground: #fafafa;
  --primary: #e6e6e6;
  --muted-foreground: #a1a1a1;
  --muted: #212121;
  --card: #131313;
  --border: rgba(255, 255, 255, 0.1);
  --ring: #6f6f6f;
  --brilho: rgba(255, 255, 255, 0.14);
  --cell-0: #1c1c1c;
  --cell-1: #40403f;
  --cell-2: #6b6b6a;
  --cell-3: #9c9c9a;
  --cell-4: #e6e6e6;
}

/* tema claro */
:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --primary: #171717;
  --muted-foreground: #71717a;
  --muted: #f4f4f5;
  --card: #fafafa;
  --border: rgba(0, 0, 0, 0.1);
  --ring: #a1a1aa;
  --brilho: rgba(0, 0, 0, 0.07);
  --cell-0: #ebebee;
  --cell-1: #c6c6cb;
  --cell-2: #96969d;
  --cell-3: #5d5d65;
  --cell-4: #1f1f22;
}

voltar para a home