LumosTech
LumosTech é uma empresa de soluções de energia solar que oferece projetos acessíveis e sustentáveis para residências e pequenas empresas. Seu foco é fornecer economias significativas nas contas de eletricidade, instalação rápida e suporte completo, tornando a energia limpa acessível para todos.
Brief
Processo
O processo criativo para a página de destino da VerdeLar começou com uma definição clara da identidade da marca e seus valores sustentáveis. Um wireframe simples foi então estruturado para organizar as seções, priorizando a clareza e a navegação suave. A escolha de cores e tipografia visou transmitir sofisticação e uma conexão com a natureza, enquanto imagens de projetos reais foram selecionadas para criar proximidade e inspirar confiança.
Cliente
LumosTech
Ano
2025
Serviços
Design de UI / Design de Web / Página de Destino / Direção de Arte
LumosTech
LumosTech
A lightweight design system was created based on the final UI decisions to ensure consistency and scalability across the landing page. The system includes typography styles, color tokens, and reusable components such as buttons, inputs, cards, and badges.
The scope was intentionally kept minimal and pragmatic, focusing on real project needs rather than over-documentation, allowing for faster iteration while maintaining visual coherence.
Green Scale
Primary brand colors used for CTAs, accents, and brand identity
50
200
300
400
500
600
700
800
900
920
950
1000
Grey Scale
Neutral grays for text, borders, and subtle backgrounds
50
100
200
300
400
500
600
700
800
900
950
Semantic Colors
Purpose-driven colors for consistent UI patterns
Background
Page background
Surface Light
Cards, modals
Text Primary
Headings, body
Text Secondary
Secondary text
Text Muted
Captions, labels
Accent Green
Interactive elements
CTA Background
Primary buttons
Border Light
Dividers, inputs
Divider
Section breaks
Headline Large
32px / 1.3 / Playfair Display / 400
Usage: Section headers, content blocks
Headline Medium
28px / 1.3 / Playfair Display / 400
Usage: Category titles, article headers
Headline Small
24px / 1.3 / Playfair Display / 400
Usage: Card headers, list titles
Title Large
22px / 1.4 / Playfair Display / 400
Usage: Card titles, widget headers
Title Medium
16px / 1.2 / Playfair Display / 500
Usage: Small card titles, labels
Display Large
72px / 1.1 / Playfair Display / 400
Usage: Hero headlines, landing page titles
Display Medium
48px / 1.2 / Playfair Display / 400
Usage: Page titles, feature headlines
Display Small
36px / 1.2 / Playfair Display / 400
Usage: Section headers, modal titles
Display XS
24px / 1.2 / Playfair Display / 400
Usage: Subsection headers
Body 2 — Larger body text for emphasis and introductions
20px / 1.5 / Lato / 400
Usage: Lead paragraphs, introductions
Body Regular — Standard body text used throughout the interface
16px / 1.6 / Lato / 400
Usage: Paragraphs, descriptions, content
Body Bold — Emphasized text and important labels
16px / 1.5 / Lato / 700
Usage: Strong emphasis, key information
Body Light — Subtle text with lighter weight
16px / 1.6 / Lato / 300
Usage: Quotes, subtle information
Body Small — Captions, labels, and supporting text
14px / 1.5 / Lato / 400
Usage: Captions, metadata, fine print
Usage Guidelines
Playfair Display
• Hero headings and page titles
• Section titles and headers
• Feature highlights and callouts
• Card titles and component headers
• Expressive, emotional moments
Lato
• Body paragraphs and content
• UI labels and form fields
• Button text and navigation
• Lists and structured content
• Functional, readable text
Components
Reusable, accessible components built with consistency and sustainability in mind.
Primary
Green background • Primary actions • High emphasis
Secondary
Small Button
Medium Button
Large Button
White background with border • Secondary actions • Medium emphasis
Outline
Small Button
Medium Button
Large Button
Transparent with border • Tertiary actions • Low emphasis
Form Elements
Clean, accessible inputs with soft borders and clear focus states
Nome completo
Digite seu nome
seu@email.com
Mensagem
Como podemos ajudar?
Campo com erro
Digite algo
Este campo é obrigatório
Features: Soft rounded corners, subtle borders, green focus ring, accessible labels, error states
Cards
Versatile containers with soft shadows and rounded corners
Default & Highlighted
Default Card
Clean white background with subtle border and soft shadow
Highlighted Card
Light green background for emphasis and special content
Testimonial Cards
"A experiência foi incrível! O design sustentável transformou
completamente minha casa."
Maria Silva
Cliente desde 2023
João Santos
Cliente desde 2022
Features: Quote formatting, author details, optional avatar, highlighted variant
Border Radius
Soft, rounded corners create an organic and friendly aesthetic
Small
8px · var(--radius-sm)
XL
24px · var(--radius-xl)
Medium
12px · var(--radius-md)
2XL
32px · var(--radius-2xl)
Large
16px · var(--radius-lg)
Full
9999px · var(--radius-full)
Shadows
Subtle shadows add depth without harshness
Soft
Subtle elevation
Card
Cards, containers
Elevated
Modals, dropdowns