Nimbus.
Céu azul com nuvens em movimento e cartões de vidro fosco. Título sem serifa com uma palavra em serifa itálica e o produto flutuando sobre as nuvens.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Geist + Instrument Serif itálico
- Texto
- Geist
ParaDonos de empresa e pessoas que querem tirar peso da rotina com um produto digital
Seções da página01/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.
ParaDonos de empresa e pessoas que querem tirar peso da rotina com um produto digital
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Geist + Instrument Serif itálico nos títulos, Geist no texto.
TítulosGeist + Instrument Serif itálico
Aag!
Nimbus em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoGeist
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
- promessa de tranquilidade ou menos trabalho
- marca em azul claro, céu ou branco
- planos de assinatura
- negócio noturno ou de energia alta (academia, bar)
- restaurante
- marca com cores quentes e saturadas
- público que espera visual técnico e escuro
Tom
O que faz ser Nimbus
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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.
Regras do jogo
Direto do DESIGN.md.
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.
Dois arquivos.
Um prompt.
O Nimbus 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 Nimbus.