LET US Ibiza

Overview

LET US Ibiza is a boutique real estate platform that transforms the Mediterranean property market through a philosophy of radical transparency and human-centered design. The brand serves affluent second-home buyers seeking safe, legally vetted investments in Ibiza—a market historically plagued by opacity, regulatory confusion, and unreliable intermediaries. The aesthetic movement is 'Warm Minimalism with Architectural Clarity': a warm terracotta-rust primary palette (#ac4747) anchors the interface against a soft, off-white canvas (#f7f2eb), while typography in the custom Riforma typeface conveys both approachability and professional authority. The UI evokes a sense of calm confidence—the feeling of walking into a trusted advisor's office where complexity is distilled into clarity.

The brand voice is conversational yet precise, avoiding both the sterile corporate tone of traditional real estate and the breathless hype of luxury marketing. Vocabulary patterns emphasize agency ('you decide', 'your network', 'your home') and honesty ('different rules per area', 'paperwork you don't understand'). The tone is never apologetic but always empowering. Example sentence in brand voice: 'We handle the legal maze so you can focus on finding your perfect Ibiza escape.'

Colors

The color system is rooted in Mediterranean warmth tempered by Swiss-style clarity. Primary (#ac4747) is a muted rust-terracotta that appears on all CTAs, active states, and brand-critical interactive elements—it reads as both trustworthy and locally grounded, evoking the island's earth tones without veering into cliché. The on-primary text is pure white (#ffffff) for maximum legibility over the warm background. Secondary (#1863dc) is a professional blue reserved for links, secondary actions, and data-driven UI elements (property filters, market insights), providing visual contrast and signaling informational hierarchy. Tertiary (#ff6900) is a vibrant orange used sparingly for alerts, highlights, and accent badges—it commands attention without overwhelming. The surface stack progresses fro

Typography

The type system is built on Riforma, a custom sans-serif typeface that balances humanist warmth with geometric precision—essential for a brand that must feel both locally authentic and internationally professional. Display (73.67px, 400 weight, -0.02em tracking) is reserved for hero headlines like 'Don't play real estate roulette,' where the generous size and tight letter-spacing create impact without aggression. Headline-lg (48px, 400 weight) is used for section titles and property feature callouts, maintaining the same approachable weight while reducing visual dominance. Body-lg (17.5px, 400 weight, 26px line-height) is the primary reading size for property descriptions and long-form content, with generous line-height ensuring comfort during extended reading. Body-md (16px) handles UI la

Layout

The layout system employs a 12-column fluid grid with a max-width of 1140px, allowing the design to breathe on large screens while maintaining focus on smaller viewports. The page rhythm is governed by the spacing scale: section separation uses lg spacing (40px), card-to-card gutters use md spacing (24px), and internal component padding uses sm spacing (12px). The off-white background (#f7f2eb) provides a warm, slightly textured canvas that reduces eye strain compared to pure white, while the container-max-width of 1140px ensures that property listings and hero sections never feel stretched or cramped. White-space is treated as a design material, not a void—generous margins around hero content (40px+ on desktop) create breathing room that reinforces the brand's 'no pressure' positioning. T

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the heavy drop-shadows common in real estate UI. Level 1 (Base): the page background (#f7f2eb) sits flat with no shadow, establishing a calm foundation. Level 2 (Standard Cards): property cards and content containers use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft, close shadow that lifts elements 2–3px from the surface without creating visual drama. Level 3 (Elevated/Modals): modals, expanded property details, and hover states on cards escalate to box-shadow: 0 32px 68px rgba(0, 0, 0, 0.3), a larger, more diffuse shadow th

Shapes

The shape philosophy is 'Architectural Precision with Warmth'—sharp enough to feel modern and trustworthy, but never cold or corporate. Buttons use rounded-sm (2px), a barely-perceptible radius that maintains the geometric clarity of rectangles while softening hard corners just enough to feel contemporary. Cards and containers use rounded-lg (8px), a moderate radius that suggests approachability without veering into the 'friendly' territory of 12px+ radii. Input fields use rounded-DEFAULT (4px), splitting the difference to signal their functional role without competing with buttons or cards. M

Components

Action Elements Buttons are the primary interaction pattern and must be immediately recognizable. The primary button (button-primary) uses the brand primary (#ac4747) background with white text, 8px vertical padding, 24px horizontal padding, and a 2px border-radius. The label-md typography (14px, 500 weight) ensures text is legible at any size. On hover, the background shifts to #8b3535 (a darkened rust) over 200ms, providing clear feedback without animation complexity. The secondary button (button-secondary) inverts this logic: transparent background with a 1px border in primary (#ac4747) and primary text color. On hover, it fills with primary-container (#e8d5d5) and shifts text to on-primary-container (#5b1514), creating a 'reveal' effect that feels intentional rather than accidental

Do's and Don'ts

**Do**

• Do use primary (#ac4747) exclusively for CTAs, active states, and brand-critical interactions—never dilute it with secondary uses.
• Do maintain the 2px border-radius on buttons and inputs; this subtle sharpness is core to the brand's architectural clarity.
• Do apply generous white-space (40px+ margins) around hero content and property listings to reinforce the 'no pressure' brand positioning.
• Do use the secondary blue (#1863dc) for all links and informational elements to create clear visual hierarchy separate from primary actions.
• Do transition all interactive states (hover, focus, active) over 150–200ms using ease-in-out timing to feel responsive without feeling rushed.

**Don't**

• Don't use rounded-full (9999px) for buttons or cards; reserve it exclusively for badges and avatars to maintain shape hierarchy.
• Don't apply multiple shadows or blur effects to a single element; the system uses a single, clean shadow per elevation level.
• Don't use the tertiary orange (#ff6900) for primary CTAs or navigation; it's reserved for alerts and accent highlights only.
• Don't set body text smaller than 16px or larger than 18px; the Riforma typeface is optimized for this range and loses legibility outside it.
• Don't override the 1px border on input fields or cards; these borders are essential for visual definition in the warm, light color palette.