Solar.
Clean, luminous technology: warm white, petrol blue and a yellow-orange sun gradient. Isometric house with panels in the hero, savings simulator and data in mono type.
- Type
- Landing page
- Theme
- Light
- Headings
- Outfit
- Body
- Inter
ForHomeowners and companies evaluating an energy investment; rational decision, they look at numbers
Page sections01/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".
From DESIGN.md, which is in Portuguese for now.
ForHomeowners and companies evaluating an energy investment; rational decision, they look at numbers
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Outfit for headings, Inter for body text.
HeadingsOutfit
Aag!
Solar in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyInter
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.
- brand with yellow, orange or petrol blue
- consultative sale with quote/site visit
- business that wants to show calculations and spec sheets
- regional service
- beauty and fashion
- food and dining
- minimalist luxury brand
- dark SaaS
- business with no numbers to show
Tone
What makes it Solar
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Solar 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 Solar.