Verde Lar
Verde Lar is an interior design company specialized in creating sustainable environments. Its work combines aesthetics and functionality with eco-friendly practices, such as repurposed furniture, certified materials, and the integration of natural elements into spaces.
Brief
Process
The creative process for Verde Lar’s landing page started with a clear definition of the brand identity and its sustainable values. A simple wireframe was then structured to organize the sections, prioritizing clarity and smooth navigation. The choice of colors and typography aimed to convey sophistication and a connection with nature, while real project images were selected to create proximity and inspire trust.
Client
Verde Lar
Year
2025
Services
UI Design / Web Design / Landing Page / Art Direction
Full Page
Design System
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