Órbita.
SaaS oscuro con grilla de fondo, brillo violeta y verde lima eléctrico. Mock del producto destacado, bento de funciones y tabla de precios.
- Tipo
- Landing page
- Tema
- Oscuro
- Títulos
- Space Grotesk
- Texto
- Inter
ParaDueños de negocio y equipos técnicos que compran software
Secciones de la página01/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.
Del DESIGN.md, que por ahora está en portugués.
ParaDueños de negocio y equipos técnicos que compran software
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Space Grotesk en los títulos, Inter en el texto.
TítulosSpace Grotesk
Aag!
Órbita en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- producto digital con pantalla para mostrar
- planes de suscripción
- marca con verde, violeta, azul eléctrico o negro
- servicio presencial local
- público mayor y poco digital
- belleza y bienestar
- restaurante
Tono
Lo que lo hace Órbita
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Órbita se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Similares
Landings con tono o nicho en común con Órbita.
