Órbita.
Dark SaaS with a background grid, violet glow and electric lime green. Featured product mock, feature bento and pricing table.
- Type
- Landing page
- Theme
- Dark
- Headings
- Space Grotesk
- Body
- Inter
ForBusiness owners and technical teams who buy software
Page sections01/06Topo e navegação
SaaS escuro e preciso, sem enfeite. O produto é o herói: a tela do sistema aparece grande logo no hero, e o "como funciona" mora dentro dela — não numa seção de marketing à parte.
From DESIGN.md, which is in Portuguese for now.
ForBusiness owners and technical teams who buy software
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Space Grotesk for headings, Inter for body text.
HeadingsSpace Grotesk
Aag!
Órbita in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyInter
The reading font carries long paragraphs without tiring the eye.
Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.
0123456789 · $1,234.56 · Sep 25, 7:30 PM
Who it's for
What the AI compares with your client to pick the design.
- digital product with a screen to show
- subscription plans
- brand with green, purple, electric blue or black
- local in-person service
- older, less digital audience
- beauty/wellness
- restaurant
Tone
What makes it Órbita
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 01
Grade quadriculada no fundo do hero, sumindo em elipse (
.orbita-grade); variante.orbita-grade--basesobe do pé do bloco na chamada final. - 02
Painel do produto sem moldura de navegador: é um cartão único (
p-0, sem cartão dentro de cartão) com KPIs, gráfico e os passos "como funciona" empilhados na mesma superfície, separados só por linhas de 1px. - 03
Numeração mono violeta (
0X) nos passos dentro do painel — é sequência real, por isso pode numerar. - 04
Bento de recursos com cartões largos e estreitos alternados; ícone solto (sem quadradinho, sem cor de destaque — cinza neutro).
- 05
Plano em destaque com selo retangular (
.selo, cantos de 12px) dentro do fluxo do cartão, nunca pílula flutuante.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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. No máximo 1 uso por bloco. - Destaque violeta
#8b7bffsó em gráficos, numeração de sequência real e borda de hover. Nunca em brilho desfocado. - Negativa
#ff7a8a(--d-negative) para variação ruim de indicador (ex.: item caindo, alerta subindo). Mesma cor do aviso de erro do sistema.css. - Fontes: Space Grotesk semibold para títulos (tracking apertado), Inter para texto, JetBrains Mono para números e rótulos 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.
- A chamada final nunca repete a composição do hero (centralizada, empilhada): é uma faixa baixa, título à esquerda e botão à direita.
Adaptar à marca do cliente
- Troque
--d-primarypela cor da marca, desde que seja clara e viva o bastante para ler texto preto em cima. - Marca com cor escura (azul-marinho, vinho)? Use ela como
--d-accente mantenha uma primária clara.
Two files.
One prompt.
Órbita becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.
Prompt for the agent Use with AI
Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.
Similar
Landings that share a tone or niche with Órbita.