Vizensn Living

Overview

Vizensn Living is a luxury Alpine hospitality brand centered on the aesthetic of 'Warm Minimalism'—a design philosophy that balances the austere beauty of mountain architecture with the comfort of natural materials and human warmth. The brand serves discerning travelers seeking authentic Ötztal experiences in a contemporary setting. The UI evokes a sense of arrival: clean, inviting, and grounded in earth tones (warm browns #583f28, soft beiges #f5f1ef) punctuated by a vibrant lime-green accent (#b0b626) that signals energy, nature, and the promise of outdoor adventure. The emotional response is one of serene anticipation—a feeling that your mountain holiday is already beginning.

The brand voice is conversational yet refined, speaking directly to guests in German and English with the warmth of a local innkeeper who knows the mountains intimately. Vocabulary emphasizes authenticity ('unvergesslicher Urlaub'—unforgettable holiday), comfort ('erholsam'—restorative), and place ('Ötztal', 'Sölden'). The tone avoids corporate jargon; instead, it uses sensory language and specificity. Example sentence in brand voice: 'Morgens Kaffee auf der Terrasse, mittags Skifahren, abends Fondue im Ort—das ist Sölden.'

Colors

The color system is rooted in the Alpine landscape: warm earth tones form the foundation (surface #ffffff, on-surface #583f28, outline #b9a18b), while the primary accent—a vibrant lime-green (#b0b626)—represents the energy of spring meadows and sustainable living. This primary is used exclusively for call-to-action buttons ('BUCHEN', 'ANFRAGEN'), interactive highlights, and focus states. The secondary color (#2fa4e7, a clear sky blue) provides a cool counterpoint for secondary actions, informational elements, and status indicators. Tertiary (#73a839, forest green) reinforces the Alpine theme and is reserved for success states and nature-related badges.

The surface stack progresses from bright (#ffffff) through warm neutrals (surface-container-lowest #f5f1ef, surface-container #e9ecef) to

Typography

The type system pairs Animosa Extra Light (a serif display face with elegant, elongated letterforms) for headlines and hero text with Avenir LT Std 35 Light (a humanist sans-serif) for body and UI text. This pairing communicates sophistication without pretension: the serif headlines evoke Alpine lodge signage and heritage, while the sans-serif body ensures legibility and modernity. Display text (60px, 400 weight, -0.04em letter-spacing) is used sparingly for hero statements like 'Vizensn Living. Besser leben.' Headline-lg (40px) anchors section introductions; headline-md (28px) breaks up content. Body-lg (19px, the rendered DOM default) is the primary reading size, with body-md (16px) for secondary content. Label-md (14px, 600 weight) is applied to buttons and form labels with 0.01em lette

Layout

The layout follows a 12-column fluid grid with a max-width of 1140px (matching Bootstrap's lg breakpoint), centered with 15px padding on each side. The page rhythm uses a semantic spacing scale: lg (40px) separates major sections (hero, content blocks, footer), md (24px) separates cards and subsections, sm (12px) separates list items and inline elements. The hero image carousel occupies the full viewport width (1165px rendered) with 800px height, establishing visual dominance. Content containers use gutter spacing (24px) between columns. White-space is generous—never crowd elements; a card with padding md (24px) on all sides creates breathing room for text and imagery. Mobile breakpoints follow Bootstrap conventions (576px, 768px, 992px, 1200px), with the container max-width scaling down t

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through darkness or opacity shifts. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like form inputs and small cards; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and buttons; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals, overlays, and hero content. Buttons use md elevation by default, transitioning to lg on hover. Cards use md elevation, upgrading to lg on hover with a 300ms cubic-bezier(0.4, 0, 0.2, 1) transition. The modal overlay applies a semi-transparent dark scrim (rg

Shapes

The shape philosophy is 'Architectural Softness'—sharp enough to feel modern and precise, yet rounded enough to feel approachable and human. Buttons use sm radius (0.25rem / 4px), creating a subtle roundness that suggests interaction without appearing playful. Cards and containers use DEFAULT radius (0.5rem / 8px), balancing formality with warmth. Larger containers (modals, hero overlays) use lg radius (1rem / 16px) to create a sense of enclosure and comfort. Input fields use DEFAULT radius (0.5rem / 8px) to align with cards. Badges and pills use full radius (9999px) to signal compactness and

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses primary color (#b0b626) with white text, md elevation (0 3px 8px rgba(0, 0, 0, 0.15)), and sm radius (4px). Height is fixed at 48px with 12px vertical and 24px horizontal padding, ensuring touch-friendly targets. On hover, the background shifts to #9da01f with a 200ms ease-in-out transition and lg elevation (0 8px 24px rgba(0, 0, 0, 0.12)). On active/pressed state, the background darkens further to #8b8d1a. Button-secondary uses a transparent background with a 2px primary-colored border, maintaining the same height and padding. On hover, it gains a subtle surface-container-low background (#ede8e5) without changing text color, creating a 'fill-in' effect. Both button variants use label-md ty

Do's and Don'ts

**Do**

• Do use primary (#b0b626) exclusively for CTAs and interactive highlights—it is the brand's signature accent and must remain distinctive and recognizable.
• Do maintain the warm earth-tone surface stack (#ffffff → #f5f1ef → #e9ecef → #dee2e6) for visual hierarchy; never introduce cool grays or pure blacks for backgrounds.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to all interactive elements (buttons, cards, inputs) to signal clickability and depth.
• Do use Animosa Extra Light for headlines and Avenir LT Std 35 Light for body text; never mix serif and sans-serif weights or substitute system fonts.
• Do ensure all interactive elements have a 200–300ms transition on state changes (hover, focus, active) using ease-in-out or cubic-bezier timing functions.
• Do apply 3px focus rings in rgba(176, 182, 38, 0.1) (primary at 10% opacity) to all keyboard-focusable elements for accessibility without visual harshness.

**Don't**

• Don't use the secondary color (#2fa4e7) or tertiary color (#73a839) as primary CTAs; they are supporting accents only and dilute the brand's visual identity.
• Don't apply hard drop-shadows (e.g., 0 10px 30px rgba(0, 0, 0, 0.3)); all shadows must be soft and diffuse (md or lg elevation values only).
• Don't round corners beyond lg (1rem / 16px) on standard UI elements; excessive rounding (>1.5rem) contradicts the 'Architectural Softness' philosophy.
• Don't use pure white (#ffffff) or pure black (#000000) for text; always use on-surface (#583f28) for primary text and on-surface-variant (#868e96) for secondary text.
• Don't mix Animosa with body text or use Avenir for headlines; the serif-sans pairing is intentional and must remain consistent.
• Don't disable transitions on interactive elements; every state change (hover, focus, active, disabled) must animate smoothly over 150–300ms to feel responsive and polished.