Guia de estilo

Duas assinaturas, um sistema. O Lápis HB assina o estúdio e o ambigrama assina o designer. O domínio de acesso escolhe a marca, o tom de voz, o favicon e a imagem de compartilhamento, sem duplicar nenhuma página.

Área de respiro: altura do hexágono ÷ 4 em todos os lados.

Grafite, papel e um único coral. Cada cor tem versão clara e escura, e o contraste ao lado é calculado na hora sobre o fundo em que ela é usada.

• background

  --color-background

  Papel creme: fundo principal, com textura

  Claro

  #F7F3EA

  Escuro

  #0F1111

• surface

  --color-surface

  Fichas e cartões

  Claro

  #F6F6F6

  Escuro

  #1A1C1C

• foreground

  --color-foreground

  Grafite: texto base

  Claro

  #1A1A1A 15,72:1 · AAA

  Escuro

  #F6F6F6 17,53:1 · AAA

• muted

  --color-muted

  Fundos suaves, carimbos

  Claro

  #ECECF0

  Escuro

  #2A2C2C

• muted-foreground

  --color-muted-foreground

  Metadados e legendas

  Claro

  #5F5F6B 5,68:1 · AA

  Escuro

  #A1A1AA 7,39:1 · AAA

• accent

  --color-accent

  Coral: títulos grandes, traços e ícones

  Claro

  #D85E4C 3,37:1 · AA

  Escuro

  #E36D5B 5,96:1 · AA

  Rev. 03: #E36D5B → 2,87:1

• accent-text

  --color-accent-text

  Coral para texto pequeno e links

  Claro

  #B84E3E 4,52:1 · AA

  Escuro

  #FF8C7A 8,37:1 · AAA

• accent-contrast

  --color-accent-contrast

  Texto sobre fundo coral

  Claro

  #FFFFFF

  Escuro

  #0F1111

• border

  --color-border

  Bordas de componentes (3:1)

  Claro

  rgba(26,26,26,0.5) 3,26:1 · AA

  Escuro

  rgba(246,246,246,0.38) 3,39:1 · AA

  Rev. 03: rgba(0,0,0,0.22) → 1,68:1

• rule

  --color-rule

  Linhas decorativas e divisórias

  Claro

  rgba(26,26,26,0.12)

  Escuro

  rgba(246,246,246,0.12)

  Decorativo

• paper-grid

  --color-paper-grid

  Grade milimetrada (linhas de 40px; as de 8px usam 35% deste valor)

  Claro

  rgba(178,208,206,0.28)

  Escuro

  rgba(178,208,206,0.05)

  Decorativo

• margin-line

  --color-margin-line

  Linha de margem do caderno

  Claro

  rgba(216,94,76,0.18)

  Escuro

  rgba(227,109,91,0.16)

  Decorativo

• destructive

  --color-destructive

  Erro e remoção

  Claro

  #C4163A 5,38:1 · AA

  Escuro

  #FF6B81 6,92:1 · AA

O papel é a superfície de tudo, porque é onde o trabalho começa: um creme leve no tema claro e um grafite no escuro, os dois com fibras e grão gerados em SVG (sem nenhuma imagem para baixar), a grade milimetrada de 8 e 40 px feita só com CSS (nítida em qualquer zoom) e a linha de margem do caderno.

background-image:
  linear-gradient(var(--color-paper-grid) 1px, transparent 1px),
  linear-gradient(90deg, var(--color-paper-grid) 1px, transparent 1px),
  linear-gradient(var(--grid-minor-color) 1px, transparent 1px),
  linear-gradient(90deg, var(--grid-minor-color) 1px, transparent 1px),
  var(--paper-fiber); /* fibra em SVG, com uma versão para cada tema */
background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px, 520px 520px;

Três famílias, três papéis: Space Grotesk nos títulos, Inter na leitura e JetBrains Mono nas anotações. O protótipo pedia Space Grotesk 900, que não existe, e o navegador engrossava as letras na marra. Aqui é 700 real, com tracking fechado.

Regra de uso: a JetBrains Mono em caixa alta fica só para rótulos curtos (até umas quatro palavras), como datas, carimbos e legendas de figura. Frases e explicações usam a Inter, em caixa normal.

• display-xl 160px / 0.86 / -0.045em / 700

  Lápis HB

• display-l 96px / 0.9 / -0.04em / 700

  Toda boa ideia começa no papel

• display-m 72px / 0.92 / -0.035em / 700

  Toda boa ideia começa no papel

• heading 36px / 1 / -0.03em / 700

  Toda boa ideia começa no papel

• title 22px / 1.1 / -0.02em / 700

  Toda boa ideia começa no papel

• lead 26px / 1.3 / -0.01em / 500

  Toda boa ideia começa no papel

• body 17px / 1.6 / 0 / 400

  Toda boa ideia começa no papel

• small 14px / 1.5 / 0 / 400

  Toda boa ideia começa no papel

• label 12px / 1.2 / 0.24em / 700

  Toda boa ideia começa no papel

• micro 11px / 1.3 / 0.32em / 400

  Toda boa ideia começa no papel

Base de 4 px, amarrada à grade de 8 px do papel: todo espaço cai numa linha do caderno.

Conteúdo até 1280px, com respiro lateral fluido (clamp(16px, 4vw, 48px)). No desktop, a linha de margem do caderno fica a 56px da borda.

Dois tipos de linha. Bordas de componente usam o token border (3:1, visíveis para todos); linhas decorativas usam rule e ficam leves, como o pautado do caderno.

Peças reais do site, com as mesmas classes das páginas: o que aparece aqui é exatamente o que o site usa.

Gestos de quem anota à mão, levados para a interface: cabeçalho de página, marcação de figura, circulado e carimbo.

Lucide, traço de 2 px, inline no HTML. Sempre com texto ao lado ou rótulo acessível.

• arrow-right
• arrow-left
• arrow-up
• download
• map-pin
• pause
• play
• moon
• sun
• menu
• lock
• x
• file-text
• external-link
• copy
• pencil
• mail
• eraser
• ruler
• check
• pen-tool
• tablet
• clapperboard
• keyframes

Acessibilidade é regra do sistema, não revisão no fim. A tabela é calculada agora a partir dos tokens, nos dois temas: texto pede 4,5:1; texto grande e elementos gráficos pedem 3:1.

Tudo que se mexe sozinho para no botão de pausa do topo, e some com “reduzir movimento” do sistema. Foco do teclado sempre visível em coral.