Full Page
Full Page
Process
Client
Year
Services
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
Copyright © 2024 LumosTech. All rights reserved.
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
Default input • cinza-300 border
Focused State
Focus state • amarelo-800 border
Error State
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)
