Guia didático Direção 2 de 5 — Orrério
Anatomia do Orrério
A segunda evolução do Horizonte de Eventos abandona o espetáculo e prova o oposto: que a mesma marca sustenta uma monografia técnica em modo claro — estilo suíço, papel e tinta, figuras de prancheta que obedecem à física de verdade. Este guia abre o desenho.
Guia · 01
Direção
Gravidade como desenho de engenharia. A Singularidade era cinema; o Orrério é arquivo de observatório. A narrativa é a mesma — atração, massa, profundidade, luz na borda do escuro — mas contada com régua: diagramas orbitais, matemática de velocidade de escape, trajetórias plotadas.
As regras de partida valem para as cinco direções: nada da identidade cósmica anterior, nenhuma fonte do sistema antigo, nenhum teal. Aqui a resposta foi precisão no lugar de espetáculo — o azul-marinho do logotipo promovido a acento de sistema, e um vermelhão de anotação usado no máximo uma vez por tela.
- ConceitoMonografia técnica: o site como volume numerado de um arquivo científico.
- RegistroSuíço/Internacional — grade estrita, marginália numerada, índice denso.
- Prova de alcanceModo claro e contenção, na mesma marca que sustentou o modo cinemático escuro.
Guia · 02
Paleta
Papel, seção, tinta, grafite — e dois acentos com papéis distintos: o azul-marinho oficial do logotipo (#1F2A44), promovido a cor de sistema, e o vermelhão de anotação, reservado ao que não pode passar despercebido: o raio de captura, o horizonte.
Todo contraste abaixo foi medido, não estimado. O corpo de texto opera entre 7,15:1 e 15,74:1 — folga ampla sobre o mínimo AA de 4,5:1. Não há preto puro nem branco puro em nenhum pixel do site.
- Papel#F4F1EAbase
- Seção#ECE8DEpranchas
- Tinta#16181D15,74:1 no papel
- Grafite#4C505A7,15:1 no papel
- Marinho#1F2A4412,64:1 no papel
- Vermelhão#C8371F4,63:1 · ≤ 1 por tela
Guia · 03
Tipografia
Uma única família sustenta o display e a interface: Archivo variável, explorada pelo eixo de largura. Expandida a 125% ela vira voz de manchete; a 100%, texto de trabalho. O arquivo woff2 é um só — a variação é do próprio desenho da fonte.
Os dados falam em Fragment Mono: tabelas, legendas de figura, eixos e o índice do rodapé. Duas famílias, três vozes, servidas do próprio domínio — sem CDN.
Guia · 04
Grade & marginália
Doze colunas estritas, quebradas de propósito pelas pranchas de figura, que avançam sobre as margens. O texto zigue-zagueia: capítulos ímpares com prosa à esquerda, pares à direita — nenhuma fileira de cards em todo o site.
A linha de base de 32 px fica visível como textura de prancheta: um gradiente repetido de 1 px atravessa o fundo inteiro, e todo o ritmo vertical assenta nela. A marginália numerada (FIG. 01…) corre na vertical, na margem externa de cada prancha.
Textura de linha de base — CSS integral
body::before {
background: repeating-linear-gradient(
to bottom,
rgba(22, 24, 29, 0.045) 0 1px,
transparent 1px 2rem
);
}Guia · 05
Figuras que se desenham
Cada prancha é SVG autoral — traçado a mão, coordenada por coordenada. Nenhuma imagem gerada, nenhum canvas, nenhuma biblioteca: o site inteiro carrega zero dependências de JavaScript.
O truque do desenho: todo traço recebe pathLength="1", o que normaliza seu comprimento. Com stroke-dasharray: 1 e stroke-dashoffset: 1 o traço nasce invisível; quando o IntersectionObserver vê a prancha, o offset vai a zero e a linha se desenha, com atraso escalonado por traço.
As órbitas da capa giram por CSS puro, e os períodos não são inventados: seguem T² ∝ a³. A órbita de raio duplo leva 2,83× mais tempo — como manda Kepler. Com prefers-reduced-motion, tudo nasce desenhado e nada gira.
O sistema de desenho — CSS + observer
<path d="…" pathLength="1" class="draw"/>
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-drawn .draw {
stroke-dashoffset: 0;
transition: stroke-dashoffset 1.3s;
transition-delay: calc(var(--i) * 110ms);
}Órbitas com período correto — Kepler em CSS
.orbit { animation: orbit-rot var(--T) linear infinite; }
/* T² ∝ a³ → T = (a/a₁)^1,5 × 16 s */
--T: 16s /* a = 1,00 */
--T: 27.8s /* a = 1,44 */
--T: 45.3s /* a = 2,00 */
--T: 74.1s /* a = 2,78 */Guia · 06
Como a Fable construiu
O Orrério nasceu de um contrato criativo escrito antes de qualquer pixel — o mesmo documento que rege as cinco direções. Cada decisão de construção e cada passe de revisão respondem a ele.
- Contrato criativoDireção, paleta, tipos, técnica-assinatura e dials definidos por escrito para as cinco evoluções.
- Autoria das pranchasCinco figuras SVG desenhadas coordenada a coordenada, com física real: Kepler, Schwarzschild, parâmetro de impacto.
- Sistema, não páginasTokens de cor, grade de 12 colunas e linha de base visível — o guia que você lê usa o mesmo sistema.
- Três passes de revisãoCapturas de tela em desktop e mobile, contra a lista de sinais de IA genérica: ritmo de escala, zonas mortas, contraste medido.
- PublicaçãoCloudflare Pages, ativos próprios, sem CDN externo e sem rastreadores.