ÓRBITA / sistema de design

Sistema recombinado — v1.0

Um sistema de design construído a partir de três referências reais.

A Órbita não nasceu de um moodboard genérico. Ela é a recombinação deliberada de três linguagens visuais distintas — a clareza técnica de uma ferramenta para desenvolvedores, o minimalismo cinematográfico de uma rede orbital, e a energia comercial de um marketplace latino-americano — reunidas em um único vocabulário coerente para produtos de tecnologia.

Fonte 01 · github.com

Clareza de ferramenta de trabalho

Modo escuro como padrão, hierarquia tipográfica discreta, cartões com bordas finas de 1px em vez de sombra pesada, cantos com raio moderado (6–10px) e uma paleta quase monocromática pontuada por um único azul de interação.

Fonte 02 · starlink.com

Silêncio e escala cinematográfica

Fundo preto absoluto, tipografia gigante e confiante, uso extremo de espaço negativo, botões em pílula de alto contraste e uma linguagem de "painel técnico" — números, status, coordenadas — como elemento decorativo legítimo.

Fonte 03 · mercadolivre.com.br

Energia comercial e confiança

Amarelo de marca vibrante como gatilho de ação, selos em formato de pílula (frete grátis, mais vendido), avaliação por estrelas, tipografia bem encorpada e uma sensação geral de "isso é fácil de usar agora".

01 · Cor

Uma base quase neutra, dois acentos com trabalho claro

Os neutros do GitHub e o preto absoluto da Starlink se fundem numa única base grafite com viés azulado — nunca cinza puro. Sobre ela, dois acentos herdados: o azul de "ação técnica" (GitHub + telemetria Starlink) e o amarelo de "ação comercial" (Mercado Livre), cada um com um papel específico, nunca competindo na mesma tela.

--bg
Fundo base — o "vácuo" da Starlink, mantido pelo GitHub em modo escuro.
--surface
Superfície de cartões e painéis, um degrau acima do fundo.
--surface-2
Superfície elevada — hover, inputs, blocos de destaque.
--border
Linha de 1px que substitui sombra pesada (herança GitHub).
--accent
Azul técnico — links, foco, ação primária de produto.
--accent-2
Amarelo Mercado Livre — CTA comercial único por tela, selos "popular".
--live
Verde semântico — status "ao vivo"/operacional, nunca usado como acento de marca.
--text
Texto primário — branco suave, nunca #FFFFFF puro.

02 · Tipografia

Três famílias, três funções, zero ambiguidade

Nenhuma fonte "segura" de dashboard genérico. Unbounded carrega a personalidade orbital/geométrica dos títulos; Public Sans faz o trabalho pesado de leitura com excelente suporte a acentuação em português; JetBrains Mono assume tudo que é dado, rótulo ou status — a herança direta do terminal do GitHub e do painel de telemetria da Starlink.

Display · Unbounded 700–900
Aa Órbita

Títulos e números grandes

Geometria quadrada com leve tensão — técnica o bastante para parecer engenharia, arredondada o bastante para não parecer fria. É o ponto de maior personalidade do sistema; por isso usada só em título e destaques numéricos.

Corpo · Public Sans 400–700
Aa Órbita

Texto de leitura e interface

Desenhada para clareza em alta densidade (é a fonte de sistemas de governo dos EUA). Herda a legibilidade sem ruído do GitHub e sustenta parágrafos longos sem cansar.

Utilitária · JetBrains Mono 400–600
Aa Órbita

Rótulos, dados, status

Toda métrica, badge, coordenada ou preço tabular passa por aqui. É a costura entre a estética de código do GitHub e o painel técnico da Starlink.

Hero / 800
Infra que escala
Unbounded 800 · clamp(2.5rem, 5vw, 4.5rem) · line-height 1.04
H2 / 700
Um novo padrão de confiabilidade
Unbounded 700 · clamp(1.5rem, 2.5vw, 2.25rem)
H3 / 700
Implantação em qualquer região
Public Sans 700 · 1.25rem
Corpo / 400
Texto corrido em Public Sans, otimizado para permanecer confortável em blocos longos — a mesma decisão de legibilidade que sustenta os textos de produto do GitHub.
Public Sans 400 · 1rem–1.05rem · line-height 1.6
Rótulo / mono
STATUS · 99.98% UPTIME
JetBrains Mono 500 · .72–.8rem · letter-spacing .1em

03 · Espaço & forma

Escala de espaçamento e raio de canto

Cantos moderados nos cartões (herança GitHub), pílula total em botões e badges (herança Mercado Livre) — a mistura evita tanto a frieza excessiva quanto o "tudo arredondado" genérico.

sm · 6px · inputs
md · 10px · cartões
lg · 16px · painéis
pill · botões/badges

04 · Componentes

Peças testadas contra as três origens

Cada componente abaixo cita explicitamente de qual referência herdou sua regra principal.

Botões

Badges & selos

Operacional Novo ★ Mais popular v2.4.0

Cartão

Edge / São Paulo

Latência de 9ms na região sul

Borda de 1px, sem sombra pesada — o cartão se apoia na linha, não na profundidade.

Campo de formulário

Tokens em tabela

TokenPapelOrigem
--bg / --surfaceBase quase-preta, bordas finas em vez de sombraGitHub · Starlink
--accentAzul de ação técnica, foco de teclado, linksGitHub
--accent-2Amarelo de ação comercial, um por telaMercado Livre
--liveVerde semântico de status operacionalStarlink (telemetria)
radius-pillBotões, badges, tags de preçoMercado Livre
radius-md (10px)Cartões, painéis, inputsGitHub
font-displayUnbounded — títulos e números grandesStarlink (escala)
font-monoJetBrains Mono — dados, status, preçoGitHub + Starlink