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 de criação da página inicial da LumosTech começou com a definição da proposta de valor, destacando a economia e a sustentabilidade como seus pilares centrais. A estrutura foi organizada em seções claras para guiar o usuário desde a introdução da marca até o formulário de contato, garantindo um fluxo natural. A identidade visual foi elaborada com cores que evocam o sol e a confiança, transmitindo inovação e credibilidade ao mesmo tempo.

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.

Heading 1

72px / 1.0 / Bold

Reduce your electricity bill

Heading 2

48px / 1.0 / Bold

Clean energy within everyone's reach

Heading 3

32px / 1.2 / Bold

Why choose LumosTech?

Heading 4

20px / 1.0 / Bold

10-year warranty

Body

16px / 1.4 / Regular

Affordable and sustainable solutions for homes and businesses. With quick installation and expert support.

Body 2 - light

16px / 1.4 / Light

Subtitle variant or lighter context description text.

Body 2

12px / 1.4 / Regular

a-m-a-r-e-l-o-50

a-m-a-r-e-l-o-100

a-m-a-r-e-l-o-200

a-m-a-r-e-l-o-300

a-m-a-r-e-l-o-400

a-m-a-r-e-l-o-500

a-m-a-r-e-l-o-600

a-m-a-r-e-l-o-700

a-m-a-r-e-l-o-800

Brand Primary

a-m-a-r-e-l-o-900

a-m-a-r-e-l-o-950

a-m-a-r-e-l-o-1000

AMARELO BG

Section BG

c-i-n-z-a-50

c-i-n-z-a-100

c-i-n-z-a-200

c-i-n-z-a-300

c-i-n-z-a-400

c-i-n-z-a-500

c-i-n-z-a-600

c-i-n-z-a-700

c-i-n-z-a-800

c-i-n-z-a-900

cinza-980

Hero BG

Buttons

Primary Button

amarelo-700

Secondary Button

outlined

Text Button

text only

Disabled Button

disabled state

Input Fields

Label

Placeholder text

Default input • cinza-300 border

Focused State

Click to focus

Focus state • amarelo-800 border

Error State

Error message

This field is required

Cards

Card Title

This is a card component using the design system tokens.

Learn More

Highlighted Card

Card with amarelo-700 border and AMARELO BG background.

Learn More

Info Card

Card using blue palette (azul-50 bg, azul-500 border).

Learn More

Badges

Primary

Warning

Info

Neutral

Color Usage Example

Background Colors

AMARELO BG (#FFF5E5)

cinza-50 (#F1F1F1)

Text Colors

Primary Text (cinza-950)

Secondary Text (cinza-600)

Tertiary Text (cinza-400)

Accent Text (amarelo-800)