01 · As duas zonas
Duas fontes, dois papéis bem definidos
Sem uma terceira zona clara/colorida para contrastar, a página inteira permanece escura — e funciona, porque as duas fontes já compartilhavam essa base.
Navegação e cartões
Degradê índigo → roxo escuro na barra de topo; cartões de conteúdo com borda fina de 1px, verde para ação, azul para link — usado em toda a extensão da página, não só no topo.
Herói e fechamento
Preto absoluto, título gigante, um número enorme como protagonista (preço, latência), botão branco em pílula — abre e fecha a página no mesmo tom.
02 · Cor
Uma base escura só, dois acentos com papel específico
Verde e azul não competem: verde é status/ação positiva (commit, em estoque, saudável), azul é link e ação secundária. Nenhum dos dois é "cor de marca" — são emprestados do próprio vocabulário de produto do GitHub.
03 · Tipografia
Uma família por função, compartilhada entre as duas zonas
Public Sans 800 nos títulos, Unbounded nos números grandes do herói e nos preços, JetBrains Mono em todo dado tabular e em comandos de terminal.
Usada nas duas zonas
Peso 800 e tracking apertado bastam para dar presença, sem precisar de uma fonte "de vitrine" separada.
Zona Starlink e preços
Reservada para o número-protagonista do herói e para preços — nunca para um parágrafo inteiro.
Terminal, tabela, parcela
Todo número que precisa alinhar em coluna — logs de deploy, latência por região, status de estoque.
04 · Componentes por zona
Só dois vocabulários de botão agora, não três
O botão azul-Mercado-Livre e o selo rosa saíram do sistema. Sobram: o botão verde da navegação/cartões (GitHub) e o botão branco em pílula do herói/fechamento (Starlink).
Zona GitHub — navegação e cartões
Zona Starlink — herói e fechamento
Status — semântico, não decorativo
Tokens em tabela
| Elemento | Zona | Regra |
|---|---|---|
| Navegação | GitHub | Degradê índigo/roxo, dropdown, busca em pílula, CTA verde |
| Herói | Starlink | Preto absoluto, número gigante, botão branco em pílula |
| Corpo / cartões | GitHub | Superfície escura, borda de 1px, azul de link |
| Fechamento | Starlink | Volta ao preto — fecha a página no mesmo tom que abriu o herói |
| Tipografia | Compartilhada | Public Sans (títulos) + Unbounded (números) + JetBrains Mono (dados) |