Solar.
Tecnología limpia y luminosa: blanco cálido, azul petróleo y un degradé de sol amarillo-naranja. Casa isométrica con paneles en el hero, simulador de ahorro y datos en fuente mono.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Outfit
- Texto
- Inter
ParaDueños de casas y empresas que evalúan una inversión en energía; decisión racional, miran los números
Secciones de la página01/12Topo e navegação
Tecnologia limpa e luminosa: branco quente, azul-petróleo e um sol em gradiente. Parece empresa de engenharia que mostra a conta, não anúncio de "energia grátis".
Del DESIGN.md, que por ahora está en portugués.
ParaDueños de casas y empresas que evalúan una inversión en energía; decisión racional, miran los números
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Outfit en los títulos, Inter en el texto.
TítulosOutfit
Aag!
Solar en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter
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.
- marca con amarillo, naranja o azul petróleo
- venta consultiva con presupuesto o visita técnica
- negocio que quiere mostrar cálculos y ficha técnica
- atención regional
- belleza y moda
- gastronomía
- marca de lujo minimalista
- SaaS oscuro
- negocio sin ningún número para mostrar
Tono
Lo que lo hace Solar
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 01
Hero com casa isométrica em SVG (terreno em bloco, painéis no telhado, inversor e wallbox na lateral com energia correndo) e um sol-gradiente enorme se pondo no horizonte, com faixas.
- 02
Simulador (
Simulador.tsx, único componente client): slider da conta de luz → economia, kWp, módulos, área de telhado, geração, payback. Selo "Estimativa" e premissas sempre visíveis. - 03
Gráfico de 12 meses em CSS (antes em petróleo translúcido, depois em gradiente de sol), calculado com as mesmas premissas do simulador.
- 04
Linha do tempo da instalação com numeração mono e trilho em gradiente (horizontal no desktop, vertical no celular).
- 05
Equipamentos em ficha técnica: cabeçalho petróleo com código mono, linhas chave/valor tracejadas.
- 06
Pagamento em grade colada com aviso de crédito.
- 07
Mapa de atendimento em SVG de pontos com raios em km e a base pulsando.
- 08
Rótulo de seção: pílula de gradiente + texto mono caixa-alta.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
Identidade
- Fundo branco levemente quente
#fffaf3. Blocos alternados emsurface-2(#fdf0de). - Texto, primária e blocos escuros em azul-petróleo
#0b3b4a. Secundário#4e6a73. Nada de preto. - Sol: gradiente
#ffb400 → #ff6b2c(.solar-texto-sol,.solar-fundo-sol,.solar-barra-sol). Só em destaque: palavra do título, rótulos, barras "com solar", selos, sol do hero e da chamada final. Nunca em fundo de seção inteira nem em texto corrido. - Fontes: Outfit 600/700 com tracking apertado nos títulos; Inter no texto; JetBrains Mono em todo número (R$, kWp, kWh, prazos, códigos de ficha).
- No
meta.json, "primaria" mostra o amarelo do sol (para a galeria); o botão é petróleo. - Não confundir com Nimbus (céu azul e vidro) nem Órbita (SaaS escuro): aqui é sol, telhado e dados.
Regras
- Seções com
py-24, largura máx.max-w-6xl. Máximo 2 botões por tela. - Botão primário petróleo; no hover o gradiente de sol sobe por dentro (
.solar-botao). - Animações: entrada (
data-sobe), revela (data-revela), barras crescendo, brilho do sol, fluxo de energia e pulso. Tudo para emprefers-reduced-motion.
Adaptar à marca do cliente
- Cor da marca azul/verde escuro: troque
--d-primary/--d-texte mantenha o sol. - Cor da marca amarela/laranja: ajuste as duas pontas do gradiente (
--solar-sol,--solar-sol-v, e osstopColordo SVG) e mantenha o petróleo. - Marca verde-limão, roxa ou neon: esse design provavelmente não é o certo.
- Só carregador veicular ou só engenharia elétrica: mantenha o hero (a casa tem wallbox) e troque o simulador pela seção de serviços em destaque.
Dos archivos.
Un prompt.
Solar 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 Solar.