Helena Campos Imóveis

Overview

Helena Campos Imóveis operates within the **Architectural Minimalism** aesthetic—a design philosophy that prioritizes clean lines, geometric precision, and restrained color application to convey luxury and professional authority. The brand serves high-net-worth individuals and institutional investors seeking premium real estate consultancy in urban markets, particularly São Paulo. The visual system evokes calm confidence through a predominantly white canvas punctuated by a vivid cyan-blue accent (#0693e3) that signals trust, clarity, and forward-thinking vision. Warm secondary accents in vibrant orange (#ff6900) and fresh green (#00d084) introduce approachability and vitality, preventing the system from feeling cold or austere.

The brand voice is precise, knowledgeable, and conversational—never breathless or hyperbolic. Sentences are direct and benefit-focused: "Alameda Ricardo Paranhos returns 40 minutes to your day through transit proximity." Typography pairs a serif display font (Playfair Display) for headlines with a clean sans-serif body (IBM Plex Sans), creating visual hierarchy that feels both editorial and professional. The tone celebrates location intelligence and lifestyle optimization rather than property specifications alone.

Colors

The color system is anchored by a **neutral-dominant surface stack** (whites and light grays from #ffffff to #d8d8d8) that provides breathing room and emphasizes content clarity. This restraint is essential for a real estate brand where property photography must remain the focal point.

**Primary (#0693e3)** is the signature accent—a vivid cyan-blue deployed on call-to-action buttons, key links, focus states, and interactive elements. It conveys digital confidence and professional trustworthiness. Use primary for: primary action buttons (48px height, 12px 24px padding), link underlines on hover, form focus rings (3px blur at rgba(6, 147, 227, 0.1)), and active navigation states.

**Secondary (#ff6900)** is a warm, energetic orange reserved for secondary CTAs, accent highlights, and status

Typography

The type system employs a **serif-sans pairing** that balances editorial sophistication with functional clarity. Playfair Display (serif, weights 600–700) anchors headlines and display text, conveying luxury and editorial authority; IBM Plex Sans (sans-serif, weights 400–600) handles body copy, labels, and interface text for legibility and precision.

**Hierarchy structure**: Display (60px, 700 weight) for hero statements; Headline-lg (40px, 600 weight) for section titles; Headline-md (28px, 600 weight) for subsections; Title-lg (20px, 600 weight, IBM Plex) for card titles and form labels; Body-lg (18px, 400 weight) for introductory paragraphs; Body-md (16px, 400 weight) for standard body copy; Label-md (14px, 600 weight) for button text and field labels; Label-sm (12px, 500 weight) for ba

Layout

The layout employs a **fluid 12-column grid** with a maximum container width of 1280px, ensuring content remains readable on ultra-wide displays while adapting gracefully to mobile viewports. The gutter (24px) provides consistent breathing room between columns; section separation uses lg spacing (40px) vertically and md spacing (24px) horizontally for internal card padding.

**White-space philosophy**: Embrace generous margins around property hero images (40px top/bottom, 24px sides) to let photography breathe and establish visual hierarchy. Input fields and form containers use sm spacing (12px) for internal padding to maintain compact, scannable layouts. List items (property cards, agent profiles) employ md padding (24px) with lg spacing (40px) between sections. Container max-width of 128

Elevation & Depth

Depth in this system is achieved through **subtle shadow layering and border definition** rather than dramatic elevation. The design avoids glassmorphism or heavy shadows, instead using precise 1px borders and soft shadows to create visual separation.

**Elevation levels**: Level 1 (Base/Surface): no shadow, 1px border at surface-variant (#cccccc). Level 2 (Standard Card): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 1px border at surface-variant. Level 3 (Elevated/Modal): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 1px border at surface-container-high (#e0e0e0). Level 4 (Floating/Overlay): box-

Shapes

The shape language follows **Geometric Precision**—a philosophy that uses consistent, moderate border-radius values to convey professionalism and approachability without sacrificing clarity. Sharp corners would feel austere; excessive rounding would undermine authority.

**Radius assignments**: Buttons and primary interactive elements use lg (1rem / 16px) for a balanced, modern appearance. Cards and containers use lg (1rem) for consistency with buttons, creating visual cohesion. Input fields use md (0.75rem / 12px) for a slightly tighter, more utilitarian feel that signals form functionality.

Components

Action Elements Buttons are the primary interaction mechanism and must signal affordance clearly. **Button-primary** (48px height, 12px 24px padding, lg radius, primary blue background, white text) is the dominant CTA for property inquiries, contact forms, and navigation. Apply transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) for smooth state changes. On hover, darken to #0580c9 and apply box-shadow: 0 4px 12px rgba(6, 147, 227, 0.3); on active, shift to #046ba3 with reduced shadow (0 2px 6px). **Button-secondary** (transparent background, 2px primary border, primary text) provides a lower-emphasis alternative for secondary actions; on hover, fill the background with primary-container (#cce5f7) and shift text to on-primary-container (#003d7a). **Button-tertiary** uses secondary orang

Do's and Don'ts

**Do**

• Do use primary blue (#0693e3) exclusively for primary CTAs and focus states—never for decorative elements or backgrounds.
• Do maintain 1px borders on all cards and containers using surface-variant (#cccccc) to preserve visual separation without heavy shadows.
• Do apply generous white-space (40px lg spacing) around property hero images to let photography dominate and establish visual hierarchy.
• Do use Playfair Display serif for all headlines (28px and above) and IBM Plex Sans for body copy to maintain the editorial-professional balance.
• Do transition all interactive elements over 150–200ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, predictable state changes.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (12–14px) over busy backgrounds to ensure legibility.

**Don't**

• Don't use secondary orange (#ff6900) or tertiary green (#00d084) on primary buttons—reserve these for secondary and accent actions only.
• Don't apply box-shadow values larger than 0 16px 40px rgba(0, 0, 0, 0.12)—excessive shadows undermine the minimalist aesthetic and obscure content.
• Don't use rounded: full (9999px) on buttons or cards—reserve pill-shaped radius for badges and small accent elements only.
• Don't mix serif and sans-serif fonts within a single headline or body paragraph—maintain clear typographic separation between Playfair Display (headlines) and IBM Plex Sans (body).
• Don't reduce gutter spacing below 16px on mobile or below 24px on desktop—white-space is essential for readability and premium perception.
• Don't apply color to more than 15% of the interface—the neutral surface stack must dominate to keep property photography as the focal point.