Solar.
Tecnologia limpa e luminosa: branco quente, azul-petróleo e um gradiente de sol amarelo-laranja. Casa isométrica com painéis no hero, simulador de economia e dados em fonte mono.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Outfit
- Texto
- Inter
ParaDonos de casa e empresas avaliando investimento em energia; decisão racional, olham números
Seções da 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".
ParaDonos de casa e empresas avaliando investimento em energia; decisão racional, olham números
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Outfit nos títulos, Inter no texto.
TítulosOutfit
Aag!
Solar em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter
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.
- marca com amarelo, laranja ou azul-petróleo
- venda consultiva com orçamento/visita técnica
- negócio que quer mostrar cálculo e ficha técnica
- atendimento regional
- beleza e moda
- gastronomia
- marca de luxo minimalista
- SaaS escuro
- negócio sem nenhum número para mostrar
Tom
O que faz ser Solar
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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.
Regras do jogo
Direto do DESIGN.md.
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.
Dois arquivos.
Um prompt.
O Solar 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 Solar.