Nimbus.
Ciel bleu avec nuages en mouvement et cartes en verre dépoli. Titre sans serif avec un mot en serif italique et le produit qui flotte au-dessus des nuages.
- Type
- Landing page
- Thème
- Clair
- Titres
- Geist + Instrument Serif itálico
- Texte
- Geist
PourChefs d'entreprise et personnes qui veulent s'alléger le quotidien grâce à un produit digital
Sections de la page01/08O financeiro da sua empresa, leve como deveria ser.
Céu limpo de manhã: azul claro, nuvens macias passando devagar e vidro fosco por cima. Vende tranquilidade. O produto aparece flutuando, sem peso.
Extrait du DESIGN.md, en portugais pour l'instant.
PourChefs d'entreprise et personnes qui veulent s'alléger le quotidien grâce à un produit digital
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Geist + Instrument Serif itálico pour les titres, Geist pour le texte.
TitresGeist + Instrument Serif itálico
Aag!
Nimbus en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteGeist
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
- promesse de tranquillité ou de moins de travail
- marque en bleu clair, ciel ou blanc
- abonnements
- activité nocturne ou à forte énergie (salle de sport, bar)
- restaurant
- marque aux couleurs chaudes et saturées
- public qui attend un look technique et sombre
Ton
Ce qui fait Nimbus
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 01
Nuvens em CSS: bolhas brancas desfocadas em camadas, as de trás menores, mais desfocadas e mais lentas (
<Nuvem>,.nimbus-nuvem). - 02
Vidro fosco (
.nimbus-vidro): gradiente branco translúcido, borda branca, brilho interno e sombra azulada. - 03
Nav em pílula de vidro solta no céu.
- 04
Mock do produto em vidro flutuando (
.nimbus-flutua) sobre as nuvens. - 05
Uma palavra em serifa itálica azul dentro de cada título grande.
- 06
Numeração gigante em serifa, bem clarinha, atrás dos cartões de passo.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
Identidade
- Céu em gradiente vertical
#8ec5ff → #e8f3ff, com halo branco no alto (.nimbus-ceu). Só no hero, no cartão "depois" e na chamada final. - Fundo do resto da página em branco-azulado
#f4f8fd; blocos em#e9f1fb. - Texto azul-noite
#0c1a33, que também é a primária (botões com texto branco). - Destaque azul-céu
#5aa9ffem ícones, pontos e selos; a palavra em serifa usa#1f5fae. - Fontes: Geist semibold com tracking bem apertado (
-0.035em) nos títulos; uma palavra por título em Instrument Serif itálico (.nimbus-serifa). Texto em Geist.
Regras
- Céu no máximo 3 vezes na página. O resto é claro e limpo, para o céu ter impacto.
- Uma palavra em serifa por título, nunca a frase inteira.
- Botões em pílula. Primário escuro, secundário em vidro.
- Movimento lento e contínuo (nuvens 45–80s, flutuação 7s). Nada rápido.
- Sombras sempre azuladas (
rgba(40,90,170,…)), nunca pretas.
Adaptar à marca do cliente
- Marca azul: troque
--d-accente a cor da palavra em serifa (#1f5fae). Mantenha o céu. - Marca verde-água ou lilás: dá para recolorir o céu (
.nimbus-ceu) para um amanhecer (#c9b8ff → #f3eeff), mantendo nuvens brancas. - Marca com cor quente forte: esse design provavelmente não é o certo.
Deux fichiers.
Un prompt.
Nimbus 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 Nimbus.