Órbita.
SaaS sombre avec grille de fond, lueur violette et vert citron électrique. Maquette du produit en vedette, bento de fonctionnalités et tableau de tarifs.
- Type
- Landing page
- Thème
- Sombre
- Titres
- Space Grotesk
- Texte
- Inter
PourChefs d'entreprise et équipes techniques qui achètent des logiciels
Sections de la page01/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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourChefs d'entreprise et équipes techniques qui achètent des logiciels
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Space Grotesk pour les titres, Inter pour le texte.
TitresSpace Grotesk
Aag!
Órbita en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteInter
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- produit digital avec un écran à montrer
- abonnements
- marque avec vert, violet, bleu électrique ou noir
- service local en présentiel
- public plus âgé et peu digital
- beauté/bien-être
- restaurant
Ton
Ce qui fait Órbita
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Órbita devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Órbita.