Nimbus.
Cielo azul con nubes en movimiento y tarjetas de vidrio esmerilado. Título sans serif con una palabra en serif cursiva y el producto flotando sobre las nubes.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Geist + Instrument Serif itálico
- Texto
- Geist
ParaDueños de empresa y personas que quieren quitarse peso de la rutina con un producto digital
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaDueños de empresa y personas que quieren quitarse peso de la rutina con un producto digital
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Geist + Instrument Serif itálico en los títulos, Geist en el texto.
TítulosGeist + Instrument Serif itálico
Aag!
Nimbus en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoGeist
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
- promesa de tranquilidad o menos trabajo
- marca en azul claro, celeste o blanco
- planes de suscripción
- negocio nocturno o de alta energía (gimnasio, bar)
- restaurante
- marca con colores cálidos y saturados
- público que espera un look técnico y oscuro
Tono
Lo que lo hace Nimbus
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Nimbus 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 Nimbus.
