Erreguina Auberge

Overview

Erreguina is a heritage-rooted Basque Country auberge brand that celebrates regional authenticity through a design system anchored in warm earth tones, refined serif typography, and a contemporary-rustic aesthetic. The brand serves travelers seeking genuine cultural immersion and culinary excellence in the Aldudes Valley, evoking a sense of timeless hospitality and territorial pride. The design language—termed 'Heritage Minimalism'—strips away ornament to reveal essential beauty: warm taupe (#8b6958) and charcoal (#282828) ground the palette, while cream (#f9f2ea) provides breathing room. The emotional response is one of quiet confidence: a place where tradition and modernity coexist without friction. Voice: warm, precise, locally rooted. Erreguina speaks in the cadence of someone who knows the land intimately—no marketing hyperbole, only honest description. Example: 'Our kitchen honors the valley's terroir: txuleta from the Baztan, txakoli from the slopes, prepared as our grandmothers taught us.'

Colors

The color system is built on a warm, earthy foundation that reflects the Basque landscape. Primary (#282828) is a sophisticated charcoal used for all interactive elements, navigation, and primary CTAs—it commands attention without aggression. Secondary (#ff9c9e), a soft coral-pink, appears as an accent on hero imagery and highlights, creating visual warmth against the neutral palette. Tertiary (#8b6958), a muted terracotta-brown, anchors the hero section and represents the region's soil and heritage. Surface (#f9f2ea) is a warm cream that serves as the page background, reducing eye strain while maintaining visual richness. The surface stack progresses from #f7f7ee (surface-container-lowest, for subtle layering) through #e9ecef (surface-container, for cards and panels) to #d4cfc7 (surface-c

Typography

The type system pairs NewYork serif (display, headline-lg, headline-md) with Figtree sans-serif (body, labels, UI text), creating a hierarchy that balances editorial authority with contemporary accessibility. Display (108px, 400 weight, NewYork) is reserved for hero headlines and brand moments—its generous scale and serif elegance command the page. Headline-lg (48px, 400 weight) and headline-md (36px, 400 weight) maintain serif warmth for section titles, reinforcing the brand's heritage positioning. Body-lg (18px, 300 weight, Figtree) and body-md (16px, 300 weight) use a light weight to create visual airiness; the 300 weight is critical—it prevents Figtree from feeling corporate or cold. Label-md (14px, 600 weight) is applied to buttons and navigation, with 0.02em letter-spacing for clarit

Layout

The layout follows a 12-column fluid grid with a max-width of 1280px, centered with margin: 0 auto. The page rhythm is governed by a semantic spacing scale: lg (40px) separates major sections (hero, content blocks, footer), md (24px) is used for card padding and internal component spacing, sm (12px) for input padding and list item spacing. The gutter is 32px on desktop, reducing to 16px on tablet and 12px on mobile via Tailwind breakpoints. Hero sections span full-width with 64px (xl) vertical padding; content containers use 24px horizontal padding (md) with a max-width of 1024px for readability. The cream background (#f9f2ea) is applied to body, creating a cohesive canvas. White (#ffffff) is reserved for header backgrounds and elevated cards to create visual separation. Whitespace is gene

Elevation & Depth

Depth is conveyed through a restrained shadow system that respects the brand's minimalist aesthetic. Level 1 (Base): no shadow; flat surfaces on the cream background. Level 2 (Cards, Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a soft, close shadow that lifts elements 4-8px. Level 3 (Modals, Dropdowns, Hover States): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)—a larger blur radius and spread for deeper elevation. Shadows are always warm-tinted (using rgba(0, 0, 0, ...) rather than pure black) to harmonize with the warm palette. Borders are used sparingly: 1px solid #8b8b8b (outline-varian

Shapes

The shape philosophy is termed 'Refined Geometry'—a balance between sharp architectural lines and organic softness. Buttons use rounded: full (9999px) on the left edge only (border-radius: 9999px 0px 0px 9999px) for a distinctive, asymmetrical CTA treatment that signals Erreguina's contemporary edge. Cards and panels use rounded: md (0.75rem / 12px) for a gentle, approachable feel. Input fields use rounded: DEFAULT (0.5rem / 8px) for a neutral, functional appearance. The header navigation uses 5px border-radius for a subtle, refined frame. Modals and dropdowns use rounded: lg (1rem / 16px) to

Components

Action Elements Buttons are the primary interactive element. The primary button (button-primary) uses backgroundColor: #282828, textColor: #ffffff, padding: 28px 56px, height: 56px, with the distinctive asymmetrical border-radius: 9999px 0px 0px 9999px. On hover (button-primary-hover), the background shifts to #5b5b5b (primary-container) with a 200ms ease-out transition. Secondary buttons (button-secondary) are transparent with a 1px solid #8b8b8b border, textColor: #282828, and the same padding and height. On hover, they gain backgroundColor: #e0dcd4 (surface-container-high). Links use textColor: #282828 with no underline by default; on hover, a 1px bottom border appears (borderBottomColor: #282828) with a 200ms transition. All interactive elements use cursor: pointer and include a fo

Do's and Don'ts

**Do**

• Do use the warm cream background (#f9f2ea) as the default page surface—it reduces eye strain and reinforces the brand's approachable heritage aesthetic.
• Do pair NewYork serif headlines with Figtree sans-serif body text; the contrast creates editorial authority while maintaining contemporary accessibility.
• Do apply the asymmetrical button radius (9999px 0px 0px 9999px) consistently on all primary CTAs—it is a distinctive brand signature.
• Do use the tertiary color (#8b6958) for hero sections and large background areas to ground the design in the Basque terroir.
• Do maintain 40px+ vertical spacing (lg) between major sections to create visual breathing room and hierarchy.
• Do use the shadow system (0 3px 8px rgba(0, 0, 0, 0.15) for cards, 0 8px 24px for modals) to create subtle depth without visual heaviness.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary text or background colors—always use #020202 for text and #f9f2ea for surfaces to maintain warmth.
• Don't apply border-radius: 0px (sharp corners) to cards or buttons—it conflicts with the refined, approachable brand voice.
• Don't use the secondary color (#ff9c9e) as a background for large areas; reserve it for accents, highlights, and small UI elements only.
• Don't mix serif and sans-serif fonts within a single headline or body paragraph—maintain clear typographic hierarchy by role (display/headline = serif, body/label = sans-serif).
• Don't use heavy font weights (700+) on body text; Figtree at 300–500 weight maintains the brand's light, contemporary feel.
• Don't apply shadows with blur-radius > 24px or spread > 8px—the brand favors subtle, close shadows that respect the minimalist aesthetic.