La Cardabelle de mer

Overview

La Cardabelle de mer embodies a design philosophy rooted in 'Refined Coastal Minimalism'—a marriage of Mediterranean warmth and contemporary restraint. The brand serves leisure travelers seeking authentic seaside experiences in Valras-Plage, transforming a mobile home rental into a gateway to two distinct worlds: the serene Causse plateau and the vibrant beach. The visual identity evokes calm sophistication through a restrained palette of slate-blue (#4a6b7c), warm terracotta (#b8794d), and soft sand tones (#fbf8f3), layered with generous whitespace and serif typography that whispers rather than shouts.

The brand voice is intimate, poetic, and grounded in sensory detail. Sentences are measured and unhurried—'Une fleur du causse posée sur le sable' (A wildflower from the plateau resting on sand) captures the essence: unexpected beauty in simple juxtaposition. The tone avoids marketing clichés; instead, it invites guests to imagine their own story. Example: 'Each morning, choose your world—limestone cliffs or salt spray—then return to the same threshold at dusk.'

Colors

The color system is built on a warm, earthy foundation that reflects the Languedoc landscape. Primary (#4a6b7c) is a sophisticated slate-blue used for CTAs, navigation, and interactive states—it commands attention without aggression. Secondary (#b8794d) is a warm terracotta that appears in accents, badges, and supporting UI elements, evoking clay and sun-baked stone. Tertiary (#0274be) provides a bright, energetic accent reserved for highlights and secondary CTAs, creating visual rhythm against the muted palette.

The surface stack progresses from warm cream (#fbf8f3) as the base through increasingly defined container layers: surface-container-low (#f5f1eb) for subtle backgrounds, surface-container (#eeebe5) for standard cards, and surface-container-high (#e8e4dd) for elevated or hovered s

Typography

The type system pairs Fraunces (serif, 400 weight) for all headings and display text with Nunito Sans (sans-serif, 400 weight) for body and UI copy. This pairing creates a 'literary-meets-functional' hierarchy: Fraunces conveys editorial elegance and timelessness (display at 70px/84px line-height, headline-lg at 42px/52px), while Nunito Sans provides clarity and accessibility for instructional content (body-md at 16px/24px). Labels use Nata Sans in 500 weight with 0.125em letter-spacing and uppercase transformation, creating a distinctive, slightly formal accent for buttons and form labels. All headings use a 1.1–1.4em line-height to ensure breathing room; body text maintains 1.5em line-height for comfortable reading. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-

Layout

The layout employs a 12-column fluid grid with a max-width of 1200px, centered on the viewport. Section padding scales with viewport: 6.67em on extra-large screens, 5.67em on large, 4.34em on medium, and 2.4em on mobile (xs). The gutter between columns is 24px. Whitespace is treated as a design material: lg spacing (40px) separates major sections, md spacing (24px) divides content blocks, and sm spacing (12px) creates breathing room within components. The hero section uses 80px vertical padding with a gradient background (primary to primary-container), establishing visual dominance. Container widths remain consistent at 1200px for desktop, collapsing to 100% minus 2.4em padding on mobile. This rhythm creates a meditative pacing that mirrors the brand's unhurried voice.

Elevation & Depth

Depth is conveyed through subtle layering rather than dramatic shadows. The elevation system uses three levels: sm (0 0 3px rgba(0, 0, 0, 0.2)) for standard cards and default UI elements, md (0 0 4px rgba(0, 0, 0, 0.5)) for hover states and slightly elevated surfaces, and lg (0 0 30px rgba(0, 0, 0, 0.33)) for modals or prominent overlays. All shadows use soft, diffused blur values (3–30px) to avoid harsh contrast. Cards include a 1px border in outline-variant (#d0d0d0) to define edges without relying solely on shadow. Interactive elements transition between elevation levels over 0.2s ease, cre

Shapes

The shape philosophy is 'Architectural Softness'—a deliberate rejection of both hard 90° corners and overly rounded forms. Border-radius follows a curated scale: sm (2px) for subtle definition on inputs and small UI elements, DEFAULT (3px) for standard cards and buttons, md (4px) for slightly more prominent containers, lg (8px) for larger interactive surfaces, and xl (13.6px) for hero sections and major layout blocks. The full (50%) radius is reserved for badges and icon buttons, creating visual distinction. This restrained approach maintains the brand's refined aesthetic while ensuring compon

Components

Action Elements Buttons are the primary interactive affordance. button-primary uses primary (#4a6b7c) background with white text, 12px vertical / 20px horizontal padding, 44px height, and 3px border-radius. On hover, the background shifts to primary-container (#557dbc) over 0.2s ease. button-secondary uses a transparent background with a 1px primary border and primary text; on hover, it inverts to a filled primary state. Both use label-md typography (Nata Sans, 16px, 500 weight, 0.125em letter-spacing, uppercase). The WhatsApp CTA in the header uses a bright green accent (#25d366) as a tertiary accent for high-visibility reservation prompts.

Containers & Surfaces Cards (card component) use surface-container-lowest (#fafaf8) background with 24px padding, 3px border-radius, and a 1p

Do's and Don'ts

**Do**

• Do use Fraunces serif for all headings and display text to maintain editorial elegance and brand recognition across all touchpoints.
• Do apply the primary color (#4a6b7c) exclusively to interactive CTAs, focus states, and navigation highlights—never use it for body text or backgrounds.
• Do maintain lg spacing (40px) between major sections to create the meditative rhythm that defines the brand's unhurried aesthetic.
• Do use the full (50%) border-radius exclusively for badges and icon buttons to create visual distinction from standard UI components.
• Do transition all interactive states over 0.2s ease to reinforce the brand's deliberate, measured pace.

**Don't**

• Don't use sharp 90° corners or excessive rounding (>16px) on standard components—the 3px DEFAULT radius is the brand standard.
• Don't apply drop shadows larger than 30px blur or darker than rgba(0, 0, 0, 0.33)—the aesthetic demands soft, diffused depth.
• Don't mix Fraunces and Nunito Sans weights arbitrarily; use Fraunces 400 for headings and Nunito Sans 400 for body to maintain typographic clarity.
• Don't use the secondary color (#b8794d) as a primary CTA background—reserve it for badges, accents, and supporting UI elements only.
• Don't reduce whitespace below md (24px) between content blocks or below lg (40px) between sections—the brand's voice depends on breathing room.