Solar.
Technologie propre et lumineuse : blanc chaud, bleu pétrole et un dégradé de soleil jaune-orange. Maison isométrique avec panneaux dans le hero, simulateur d'économies et données en police mono.
- Type
- Landing page
- Thème
- Clair
- Titres
- Outfit
- Texte
- Inter
PourPropriétaires et entreprises qui évaluent un investissement énergétique ; décision rationnelle, ils regardent les chiffres
Sections de la page01/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".
Extrait du DESIGN.md, en portugais pour l'instant.
PourPropriétaires et entreprises qui évaluent un investissement énergétique ; décision rationnelle, ils regardent les chiffres
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Outfit pour les titres, Inter pour le texte.
TitresOutfit
Aag!
Solar en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteInter
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- marque avec jaune, orange ou bleu pétrole
- vente consultative avec devis/visite technique
- activité qui veut montrer calculs et fiches techniques
- service régional
- beauté et mode
- gastronomie
- marque de luxe minimaliste
- SaaS sombre
- activité sans aucun chiffre à montrer
Ton
Ce qui fait Solar
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Solar devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Solar.