# Identidade visual

Cores, fontes e medidas de Lucas Cavalheri, nos temas escuro e claro. São os mesmos valores que o site
usa, gerados da mesma fonte: o que está aqui é o que está no ar.

Use para gerar proposta, PDF, slide ou qualquer material com a identidade dele. Para impressão ou
documento que vai ser lido em papel, prefira o tema claro; para tela, o escuro é o padrão.

## 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

| Token | Nome | Escuro | Claro | Uso |
| --- | --- | --- | --- | --- |
| `--background` | Fundo | `#050505` | `#ffffff` | Fundo da página e cor do texto em botão primário |
| `--foreground` | Texto | `#fafafa` | `#0a0a0a` | Texto principal e nomes |
| `--primary` | Primária | `#e6e6e6` | `#171717` | Títulos, destaques e fundo do botão primário |
| `--muted-foreground` | Texto secundário | `#a1a1a1` | `#71717a` | Parágrafos, legendas, datas e metadados |
| `--muted` | Superfície suave | `#212121` | `#f4f4f5` | Hover de botão e de link, botão de voltar ao topo |
| `--card` | Cartão | `#131313` | `#fafafa` | Fundo de tooltip e de bloco de código |
| `--border` | Borda | `rgba(255, 255, 255, 0.1)` | `rgba(0, 0, 0, 0.1)` | Divisórias e contorno de 1px |
| `--ring` | Foco | `#6f6f6f` | `#a1a1aa` | Contorno de foco do teclado |
| `--brilho` | Brilho | `rgba(255, 255, 255, 0.14)` | `rgba(0, 0, 0, 0.07)` | Reflexo que atravessa o gráfico de atividade |

## Escala do gráfico de atividade

| Token | Nome | Escuro | Claro | Uso |
| --- | --- | --- | --- | --- |
| `--cell-0` | Nível 0 | `#1c1c1c` | `#ebebee` | Dia sem contribuição |
| `--cell-1` | Nível 1 | `#40403f` | `#c6c6cb` | Pouca contribuição |
| `--cell-2` | Nível 2 | `#6b6b6a` | `#96969d` | Contribuição média |
| `--cell-3` | Nível 3 | `#9c9c9a` | `#5d5d65` | Muita contribuição |
| `--cell-4` | Nível 4 | `#e6e6e6` | `#1f1f22` | Dia mais cheio |

## Tipografia

| Token | Fonte | Papel | Estilo | Onde baixar |
| --- | --- | --- | --- | --- |
| `--sans` | Geist | Texto, nomes, botões e navegação | Variável, 400 no texto, 500 em destaque, 600 no nome da home | https://fonts.google.com/specimen/Geist |
| `--heading` | Instrument Serif | Títulos de seção, sempre em itálico e em minúsculas | 400 itálico | https://fonts.google.com/specimen/Instrument+Serif |
| `--mono` | Geist Mono | Código, comandos e rótulos técnicos | 400 | https://fonts.google.com/specimen/Geist+Mono |

- **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 pronto

Tema escuro:

```css
: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;
  --sans: "Geist Variable", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --heading: "Instrument Serif", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 0.625rem;
  --container: 40rem;
}
```

Tema claro:

```css
: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;
}
```

## Arquivos

- Logo (monograma LC): https://lucascavalheri.com.br/favicon.svg
- Foto: https://lucascavalheri.com.br/avatar.webp
- Imagem social 1200×630: https://lucascavalheri.com.br/og.png

---

Outras páginas deste site:

- [Início](https://lucascavalheri.com.br/) — Perfil, projetos, experiência e stack
- [Sobre](https://lucascavalheri.com.br/sobre) — Trajetória, como trabalho e o que procuro
- [Contato](https://lucascavalheri.com.br/contato) — E-mail, WhatsApp, redes e tempo de resposta
- [Open source](https://lucascavalheri.com.br/open-source) — Projetos com código aberto e contribuições em repositórios de terceiros
- [Usos](https://lucascavalheri.com.br/usos) — Lista completa de linguagens, frameworks e ferramentas
- [Identidade](https://lucascavalheri.com.br/identidade) — Cores, fontes e tokens do site, nos temas claro e escuro
- [Desenvolvedores](https://lucascavalheri.com.br/desenvolvedores) — API pública em JSON, especificação OpenAPI e CLI
- [Privacidade](https://lucascavalheri.com.br/privacidade) — Que dados o site coleta, e quais não coleta

Qualquer página responde em markdown com `Accept: text/markdown` ou pelo sufixo `.md`.