Charte byteTuto
Conceito: ▶_ — o botão play de um vídeo que se torna o prompt de um terminal.
Assinatura: « Aprenda tecnologia, um byte de cada vez. »
O nome é sempre escrito byteTuto (nunca Bytetuto, ByteTuto, BYTETUTO no texto corrente).
Cores (tokens)
| Token | Claro | Escuro | Uso |
|---|---|---|---|
| surface | #F6F5F0 | #0E1116 | fundo de página |
| surface-raised | #FFFFFF | #171B22 | cartões, blocos de código |
| ink | #0E1116 | #F2F1EC | texto principal |
| ink-muted | #565B66 | #A3A8B3 | texto secundário |
| line | #DDDBD2 | #2A2F38 | linhas, pontos da trama |
| byte | #B8F03C | #B8F03C | verde assinatura: tile, botão principal, áreas chapadas |
| byte-ink | #3B6B00 | #B8F03C | o verde quando é TEXTO |
| byte-tint | #E9F9C8 | #24300F | fundo leve, badge |
| on-byte | #0E1116 | #0E1116 | texto sobre byte ou spark |
| spark | #FF5A1F | #FF6B33 | acento raro: UM ÚNICO elemento por tela |
| tile | #0E1116 | #1E232C | áreas chapadas escuras, faixas |
| danger | #C4320A | #FF7A5C | apenas para erros |
Regras:
- Nunca usar
byte(#B8F03C) como texto sobre fundo claro → usarbyte-ink. - Nunca usar texto branco sobre
byteouspark→ usaron-byte. - Sem degradê ou sombra projetada no logotipo. Brilhos « néon » são estilização de animação, não do logotipo.
- Contraste texto/fundo ≥ 4,5:1.
Tipografia (Google Fonts)
- Space Grotesk 700 (títulos, letter-spacing apertado −0,02em a −0,03em)
- IBM Plex Sans 400/600 (texto)
- JetBrains Mono 500 (código, comandos, pequenas etiquetas estilo terminal)
Formas
Raios: 6px (badges), 12px (botões, cartões), 24px (blocos grandes, tile do logotipo = 23% do lado).
Padrão proprietário: trama de pontos em line sobre fundo escuro, blocos byte/spark que extrapolam as bordas.
Logotipo
O logotipo é um DESENHO (traços monoline de 9 unidades, pontas arredondadas), não uma fonte: nunca redigite em texto.
Os traços estão em site/index.html (SVG .logo). Sobre fundo escuro: « byte » em #F2F1EC, « Tuto » em #B8F03C.
Símbolo isolado: site/favicon.svg.
Tom
Tratamento por « tu » (informal), frases curtas, verbos de ação. Mostrar antes de explicar. Nada de jargão não explicado, promessas exageradas. Exemplos: « Instale o Node em 2 minutos », « O bug que me custou 4 horas ».
Acessibilidade
Respeitar prefers-reduced-motion para qualquer nova animação. Foco visível (outline byte).