Órbita.
SaaS escuro com grade de fundo, brilho violeta e verde-limão elétrico. Mock do produto em destaque, bento de recursos e tabela de preços.
- Tipo
- Landing page
- Tema
- Escuro
- Títulos
- Space Grotesk
- Texto
- Inter
ParaDonos de negócio e times técnicos que compram software
Seções da página01/07nav fixa com blur
SaaS escuro, preciso e com um pouco de brilho. O produto é o herói: a tela do sistema aparece grande logo no hero.
ParaDonos de negócio e times técnicos que compram software
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Space Grotesk nos títulos, Inter no texto.
TítulosSpace Grotesk
Aag!
Órbita em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- produto digital com tela para mostrar
- planos de assinatura
- marca com verde, roxo, azul elétrico ou preto
- serviço presencial local
- público mais velho e pouco digital
- beleza/bem-estar
- restaurante
Tom
O que faz ser Órbita
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Grade quadriculada no fundo do hero, sumindo em elipse (
.orbita-grade). - 02
Brilho violeta desfocado atrás do título.
- 03
Selo com ponto pulsando em fonte mono.
- 04
Final do título em gradiente limão → violeta.
- 05
Rótulos de seção no formato
// RECURSOSem mono limão. - 06
Bento com cartões largos e estreitos alternados; brilho aparece no hover.
- 07
Passos em grade colada por bordas de 1px (
gap-pxsobrebg-border).
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo quase preto
#09090b, cartões em#111114e#18181c. Bordas finas#26262b. - Primária verde-limão
#c6f24ecom texto preto por cima. É o único elemento que "grita": CTA, plano destacado, variação positiva. - Destaque violeta
#8b7bffsó em brilhos desfocados, gráficos e numeração. - Fontes: Space Grotesk semibold para títulos (tracking apertado), Inter para texto, JetBrains Mono para rótulos e detalhes técnicos.
Regras
- Contraste: texto secundário nunca abaixo de
#9a9aa3no fundo escuro. - Verde-limão aparece no máximo 1 vez por bloco. Se tudo brilha, nada brilha.
- Cantos de 12px nos elementos e 20px nos cartões grandes. Nada de pílula.
- Animação só na entrada e no hover.
Adaptar à marca do cliente
- Troque
--d-primarypela cor da marca, desde que seja clara e viva o bastante para ler texto preto em cima. Troque também a cor das sombras#c6f24eno Landing. - Marca com cor escura (azul-marinho, vinho)? Use ela como
--d-accente mantenha uma primária clara.
Dois arquivos.
Um prompt.
O Órbita vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.
Prompt para o agente
Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.
Parecidos
Landings com tom ou nicho em comum com Órbita.