Nimbus.
Blue sky with moving clouds and frosted-glass cards. A sans-serif headline with one word in italic serif and the product floating over the clouds.
- Type
- Landing page
- Theme
- Light
- Headings
- Geist + Instrument Serif itálico
- Body
- Geist
ForBusiness owners and people who want to take weight off their routine with a digital product
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForBusiness owners and people who want to take weight off their routine with a digital product
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Geist + Instrument Serif itálico for headings, Geist for body text.
HeadingsGeist + Instrument Serif itálico
Aag!
Nimbus in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyGeist
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
- promise of peace of mind or less work
- brand in light blue, sky or white
- subscription plans
- nocturnal or high-energy business (gym, bar)
- restaurant
- brand with warm, saturated colors
- audience expecting a technical, dark look
Tone
What makes it Nimbus
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Nimbus 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 Nimbus.
