Serene Oasis Estate Design System

Overview

Serene Oasis Estate presents a luxury vacation rental management platform built around a striking visual dichotomy: deep teal darkness meets warm amber activation. The design system is anchored by full-bleed photography of premium villa properties—captured at golden hour or twilight—that establishes an immediate sense of exclusivity and escapism. Over these rich backdrops, the interface deploys crisp white typography and a single vibrant amber ({colors.accent}) call-to-action that functions as the brand's voltage point.

The typographic voice splits duties between two complementary families: Raleway carries all hierarchical weight (headlines, titles, navigation labels) with bold, confident strokes at {typography.display-lg} (48px) down through {typography.title-md} (24px), while Open Sans handles body copy, form inputs, and supporting text with understated readability at {typography.body-md} (16px). This pairing creates a clear information architecture where headlines command attention through geometric sans-serif presence, and body content recedes into comfortable reading rhythm.

Shape language leans toward restrained rounding—{rounded.sm} (4px) dominates interactive elements like {component.button-primary} and {component.text-input}, while {rounded.lg} (12px) softens the {component.lead-form-card} container that floats over the hero imagery. The system avoids aggressive pill shapes or fully sharp corners, instead occupying a middle ground that feels polished but not overly playful.

Color philosophy centers on contrast and warmth. The primary brand identity lives in {colors.primary} (a deep teal #006373) that appears in subheadings and structural elements, while the emotional energy of every page flows through {colors.accent} (amber #faa024) reserved exclusively for conversion actions. On dark surfaces ({{colors.surface-dark}} or photographic backgrounds), {colors.ink} (#ffffff) provides maximum legibility. The overall mood is one of sophisticated hospitality—professional enough to convey trustworthiness for property management, yet visually rich enough to evoke the leisure lifestyle being sold.

A notable sub-system emerges in the lead capture pattern: a semi-transparent or solid white card ({component.lead-form-card}) containing three inline inputs and a wide amber CTA ({component.button-primary-wide}). This component represents the highest-conversion surface in the system and receives special treatment via elevated shadow and generous internal padding.

Key Characteristics

• Dark-hero, light-content duality: Photographic hero bands use {colors.surface-dark} or imagery as background with {colors.ink} text; content sections below switch to {colors.canvas} with {colors.body-dark} text
• Single voltage color: {colors.accent} amber is reserved for {component.button-primary}, {component.button-primary-wide}, and accent headline spans only—never used for borders, icons, or secondary actions
• Bold headline hierarchy: All headings use fontWeight: "700" in Raleway; hierarchy is achieved through size alone (48px → 24px → 20px), not weight variation
• Generous form padding: {component.lead-form-card} uses {spacing.xxl} (24px) internal padding with {rounded.lg} corners to create a "floating card" effect over hero imagery
• Transition consistency: All interactive elements use 300ms ease transitions for background-color, color, and box-shadow properties
• Shadow vocabulary: Five distinct shadow treatments ranging from white glow ({extensions.shadows.glow-white}) to strong dark drop ({extensions.shadows.drop-strong}), all sharing a 45px blur radius signature
• Input borderlessness: {component.text-input} elements have zero border, relying on background contrast and focus rings instead
• Nav transparency: {component.top-nav} uses {colors.surface-transparent} background to overlay hero imagery without obstruction

Colors

Brand & Accent

• Primary ({colors.primary} — #006373): Deep teal used for H2 headings ({component.h2-heading}), brand text accents, and potential secondary navigation states. Conveys professionalism and coastal/luxury association.
• Primary Dark ({colors.primary-dark} — #023a41): Darker teal variant appearing as background tint in specific sections or overlay treatments.
• Accent ({colors.accent} — #faa024): Warm amber/gold serving as the sole CTA color across {component.button-primary}, {component.button-primary-wide}, and highlighted words within {component.hero-headline-accent}. This is the highest-energy color in the palette.
• Accent Light ({colors.accent-light} — #ffead7): Pale amber used sparingly as a background wash or subtle hover state indicator.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white baseline for content sections below the hero, form cards ({component.lead-form-card}), input fields, and footer backgrounds.
• Surface Soft ({colors.surface-soft} — #faa024): Maps to the accent color in this system; used where a colored surface treatment aligns with brand energy.
• Surface Dark ({colors.surface-dark} — #023a41): Deep teal-blue serving as the hero band background ({component.hero-band}) and potentially dark section alternates.
• Surface Overlay ({colors.surface-overlay} — rgba(255, 255, 255, 0.02)): Nearly invisible white tint for extremely subtle surface elevation on dark backgrounds.
• Surface Muted ({colors.surface-muted} — rgba(107, 114, 128, 0.2)): Gray-tinted translucent surface for disabled states or decorative overlays.
• Surface Glass ({colors.surface-glass} — rgba(255, 255, 255, 0.2)): Semi-transparent white for glassmorphism effects on dark imagery.
• Surface Transparent ({colors.surface-transparent} — rgba(255, 255, 255, 0)): Fully transparent for navigation overlays and floating elements.

Text

• Ink ({colors.ink} — #ffffff): Primary text color on dark backgrounds—used for {component.hero-headline}, {component.hero-subheadline}, {component.legal-text}, and all {component.top-nav} elements when overlaid on photography.
• Body ({colors.body} — #6b7280): Medium gray for body copy on light backgrounds, muted labels, and {component.mobile-menu-button} icon color.
• Body Dark ({colors.body-dark} — #333333): Near-black for input field text ({component.text-input}) and primary body content on white surfaces.
• Muted ({colors.muted} — #aaadb0): Light gray for placeholder text, form dividers, and secondary metadata.
• On Primary ({colors.on-primary} — #ffffff): White text atop {colors.primary} backgrounds.
• On Accent ({colors.on-accent} — #ffffff): White text atop {colors.accent} button backgrounds.
• On Dark ({colors.on-dark} — #ffffff): White text on any dark surface (alias for ink).

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(255, 255, 255, 0.1)): Subtle white border for separating elements on dark backgrounds without harsh lines.
• Border Subtle ({colors.border-subtle} — rgba(0, 0, 0, 0.1)): Faint black border for light-surface separations, focus indicators, or input outlines.

Semantic

• Link ({colors.link} — #0000ee): Standard blue for hyperlinks, currently observed in the Webflow badge ({component.webflow-badge}).

Typography

Font Family

The system employs a two-family typeface strategy optimized for luxury hospitality contexts. Raleway (Google Fonts, weights 100–900) serves as the display and heading face, chosen for its geometric elegance, open counters, and confident presence at large sizes. It is deployed across {typography.display-lg} (48px), {typography.title-md} (24px), {typography.title-sm} (20px), and all navigation text ({typography.nav-link}). Open Sans (Google Fonts, weights 300–800) handles all body copy, form inputs, captions, and UI microcopy—selected for its exceptional readability at {typography.body-md} (16px) and neutral personality that never competes with Raleway's expressiveness. Both fonts load from Google Fonts CDN with full italic variants available though not prominently used in the current design. A third entry, webflow-icons, appears once in the icon font stack for framework-specific icon glyphs.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 56px | 700 | 1.2 | -0.02em | Future mega-headlines (inferred) | | {typography.display-lg} | 48px | 700 | 1.33 | 0 | H1 hero headline | | {typography.title-md} | 24px | 700 | 1.33 | 0 | H2 section headings | | {typography.title-sm} | 20px | 600 | 1.4 | 0 | Subsection titles, card headers | | {typography.body-md} | 16px | 400 | 1.63 | 0 | Body paragraphs, descriptions | | {typography.body-sm} | 14px | 400 | 1.5 | 0 | Secondary text, footnotes | | {typography.caption} | 13px | 400 | 1.4 | 0 | Legal disclaimers, labels | | {typography.button} | 16px | 700 | 1.25 | 0 | CTA button labels | | {typography.nav-link} | 16px | 600 | 1.5 | 0 | Navigation menu items | | {typography.input} | 16px | 400 | 1.5 | 0 | Form input placeholders/values |

Principles

The typography system trusts size and family contrast as its primary hierarchy signals rather than weight variation. Every Raleway heading—from {typography.display-lg} down to {typography.title-sm}—uses either 700 or 600 weight, creating a consistent "bold heading" convention that immediately distinguishes headers from Open Sans body text at 400. Line heights are deliberately generous: {typography.body-md} sits at 1.63 (26px on 16px type), giving the luxury editorial breathing room that matches the photographic backdrop's spaciousness. Display type tightens slightly ({typography.display-xl} uses -0.02em letter-spacing) for visual cohesion at large sizes, while all other roles maintain normal spacing. Color also carries hierarchy weight: {colors.ink} (white) headlines pop against dark hero backgrounds, while {colors.accent} (amber) highlights critical words within headlines (e.g., "Full-Service" in the hero). The system avoids italics for emphasis, reserving them for potential citation or foreign-language use cases. Uppercase is absent from the current implementation—all text renders in sentence case or title case only.

Note on Font Substitutes

Both Raleway and Open Sans are freely available via Google Fonts, requiring no proprietary licensing or substitution. If Google Fonts CDN is unavailable, Montserrat serves as a near-identical substitute for Raleway (matching geometric structure and weight range), while Noto Sans or Lato can replace Open Sans with minimal layout shift. Define CSS variables as follows for easy swapping:

--font-display: 'Raleway', 'Montserrat', sans-serif;
--font-body: 'Open Sans', 'Noto Sans', 'Lato', sans-serif;

Layout

Spacing System

• Base unit: 4px (derived from {spacing.xxs}).
• Tokens: {spacing.xxs} (4px — micro-gaps, inner input padding offsets), {spacing.xs} (8px — icon gaps, tight stacks), {spacing.sm} (10px — small component margins), {spacing.md} (12px — label-input gaps), {spacing.base} (14px — form vertical rhythm), {spacing.lg} (16px — standard padding), {spacing.xl} (20px — dominant spacing token, used 78 times in extracted CSS for component margins and internal padding), {spacing.xxl} (24px — card padding, section gutters), {spacing.section} (50px — vertical section rhythm), {spacing.section-lg} (60px — hero vertical padding).
• Section padding (vertical): {spacing.section-lg} (60px) — used in {component.hero-band} for top/bottom breathing room around the headline and form.
• Card internal padding: {spacing.xxl} (24px) — applied to {component.lead-form-card} creating the floating form aesthetic.
• Gutters: Horizontal gutter between form inputs appears to use {spacing.md} (12px) or implicit flex gap; container max-width constrains content to approximately 1100–1200px centered.

Grid & Container

The layout employs a single-column centered container pattern with no multi-column grid visible in the hero section. Content constrains to roughly 1100px max-width (Webflow's standard w-container class) with auto left/right margins. The hero band splits visually into a text column (left-aligned headline + subheadline, ~60% width) and a form column (the {component.lead-form-card} positioned below or overlapping the lower hero area). This is not a strict CSS grid but rather a stacked flex/column layout with generous vertical spacing. For content sections below the hero (implied by the H2 styling in {component.h2-heading} using {colors.primary} on light background), the system likely shifts to a 2–3 column feature grid, though this is inferred rather than directly observed.

Whitespace Philosophy

Whitespace is editorial and expansive, matching the luxury vacation rental category. The hero band breathes with 60px vertical padding above and below content. The {component.lead-form-card} sits with significant clearance from the headline (approximately 40–50px implied gap). Input fields within the form use horizontal padding of 16px left / 12px right, creating comfortable touch targets without cramping. This is not a marketplace-dense layout—it's a storytelling layout where negative space conveys premium positioning.

Header Architecture

+------------------------------------------------------------------+
| [LOGO]         Homepage  How We Work  Services v  About  [CTA]    |
|  Serene Oasis                                                   |
|  Estate                                    [Contact Us]          |
|                                              (amber button)      |
+------------------------------------------------------------------+
  ^                                                                          ^
  ~80px height                                                               max-width: ~1200px centered

The {component.top-nav} is transparent ({colors.surface-transparent}), allowing hero imagery to show through. Logo sits flush left. Navigation links center-left with 20px right padding per item. The {component.button-primary} ("Contact Us") sits flush right in amber. A hamburger menu ({component.mobile-menu-button}) appears at mobile breakpoints.

Hero Section

+------------------------------------------------------------------+
|  [NAVIGATION BAR - transparent overlay]                           |
|                                                                    |
|                                                                    |
|        Full-Service (amber) Vacation Rental Management             |
|        (white, 48px Raleway 700)                                   |
|                                                                    |
|        Maximize Your Earnings, Minimize Your Stress...            |
|        (white, 16px Open Sans 400)                                 |
|                                                                    |
|        Get your personalised income estimate                       |
|        (white, 16px Open Sans 400)                                 |
|                                                                    |
|  +------------------------------------------------------------+   |
|  | [Full Name] | [Email] | [Phone Number] | [Get Estimate]   |   |
|  |  white card  rounded-12px  padding-24px     amber button    |   |
|  +------------------------------------------------------------+   |
|                                                                    |
|  © Absolute safe & secure. Read our terms & conditions            |
|  (white 13px caption)                                             |
|                                                                    |
+------------------------------------------------------------------+
  Background: Dark teal #023a41 or full-bleed villa photography

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, no border | Base surfaces, nav bar, text blocks | | 1 — Hairline | {colors.hairline} or {colors.border-subtle} 1px border | Subtle separators, input focus states | | 2 — Soft lift | {extensions.shadows.glow-white} (white glow) | Elevated elements on dark backgrounds (form card on hero) | | 3 — Standard drop | {extensions.shadows.drop-sm} / {extensions.shadows.drop-md} | Cards on light backgrounds, dropdowns | | 4 — Strong drop | {extensions.shadows.drop-strong} | Modals, persistent overlays | | 5 — Focus ring | {extensions.shadows.focus-ring} | Input focus states, keyboard navigation |

The elevation system favors shadow-based depth over color-block layering. Notably, the {component.lead-form-card} sitting over the dark hero likely uses {extensions.shadows.glow-white}—a white-tinted shadow that creates lift against dark photography without the muddy appearance a black shadow would produce. On light ({colors.canvas}) surfaces, the system switches to neutral dark shadows ({extensions.shadows.drop-sm} through {extensions.shadows.drop-strong}). All extracted shadows share an identical 45px blur radius, creating a consistent "soft diffusion" signature regardless of opacity/color. Focus states employ a dual-layer approach: a 1px solid outline combined with a 3px offset shadow ({extensions.shadows.focus-ring}) for accessible keyboard navigation indication.

Decorative Depth

The primary decorative depth element is full-bleed photography — the hero background image of a luxury villa at twilight with pool reflection. This imagery isn't a shallow gradient wash; it's a high-fidelity photograph that is the depth. The design layers transparent navigation, white text, and a floating white form card atop this photograph, creating real-world spatial depth rather than simulated CSS depth. Secondary decorative depth may include subtle {colors.surface-overlay} tints (2% white) on dark sections to add barely-perceptible surface differentiation.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.xs} | 3px | Subtle input corners, minimal rounding | | {rounded.sm} | 4px | Buttons ({component.button-primary}), default interactive elements | | {rounded.DEFAULT} | 4px | System default (aliases to sm) | | {rounded.md} | 8px | Potential card variants, medium containers | | {rounded.lg} | 12px | {component.lead-form-card}, prominent surface cards |

The radius vocabulary is intentionally compact—five values spanning 3px to 12px. There are no pill shapes (9999px) in this system, which aligns with the sophisticated-not-playful brand voice. The most frequently used radius is {rounded.sm} (4px), appearing on both button variants and forming the default for any new component. The largest radius {rounded.lg} (12px) is reserved for the hero form card, where extra softness helps the white rectangle feel inviting rather than boxy against organic photographic backgrounds.

Photography Geometry

Imagery in this system is full-bleed and uncropped for hero backgrounds—the villa photograph extends edge-to-edge without corner rounding (radius does not apply to background images). If avatar images, property thumbnails, or gallery items exist elsewhere on the site (not visible in current viewport), they would likely use {rounded.md} (8px) or {rounded.lg} (12px)` based on the established pattern of softening rectangular content containers. Aspect ratios for property imagery would presumably follow standard photography formats (16:9 for hero banners, 4:3 or 1:1 for gallery grids).

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The primary call-to-action button with amber ({colors.accent}) background and white ({colors.on-accent}) text. Uses {typography.button} (16px/700 Open Sans), {rounded.sm} (4px) corners, and 14px 26px padding. Appears in the top navigation as "Contact Us". Has no border, relying on background-color contrast. Shadow is none (flat), allowing it to sit cleanly on transparent or light surfaces. State variant: {component.button-primary-active} darkens the amber to #e59215; {component.button-primary-disabled} reduces opacity to 50%.

{component.button-primary-wide} — Wide-format variant of the primary button, identical in all visual properties except padding: 14px 50px horizontally. Used for the hero form's "Get Estimate" submission button and likely "Get Started" CTAs deeper in the page. Shares the same active and disabled state token references as the standard primary button.

{component.button-primary-active} — Pressed/active state for both primary button variants. Background shifts to a darker amber (#e59215) providing tactile feedback. All other properties (text color, radius, typography) remain unchanged. Implement hover state at this same color value or slightly lighter.

{component.button-primary-disabled} — Disabled/non-interactive state. Background becomes 50%-opacity amber (rgba(250, 160, 36, 0.5)), signaling inactivity while maintaining layout position. Text remains white but may reduce contrast—ensure accessibility compliance if used in production.

Cards & Containers

{component.lead-form-card} — The signature floating form container positioned over the hero band. White ({colors.canvas}) background with {colors.body-dark} text color for inputs. Uses {rounded.lg} (12px) corners—the most generous radius in the system—and {spacing.xxl} (24px) internal padding. This component likely carries {extensions.shadows.glow-white} shadow to elevate it from the dark photographic background. Contains three {component.text-input} instances and one {component.button-primary-wide} arranged horizontally (or stacked on mobile).

{component.hero-band} — Full-width hero section container. Background is {colors.surface-dark} (deep teal #023a41) or a full-bleed <img> element with villa photography. Text color defaults to {colors.ink} (white). Vertical padding is {spacing.section-lg} (60px). This is a structural/layout component rather than an interactive one, establishing the dark-mode context for nested headline and form components.

{component.section} — Generic content section wrapper for areas below the hero. Transparent background (inherits page background), {typography.body-md} text styling, and {spacing.section} (50px) vertical padding with {spacing.xl} (20px) horizontal padding. Used for features, testimonials, or informational content blocks.

{component.container} — Inner content constraint wrapper (Webflow w-container). Centers content with max-width (~1200px) and zero background/padding of its own—purely a layout utility. Nested inside {component.section} or {component.hero-band}.

Inputs & Forms

{component.text-input} — Standard text/email/phone input field. White ({colors.canvas}) background, {colors.body-dark} (#333333) text color, {typography.input} (16px/400 Open Sans). Notably has zero border (border: 0px none)—differentiation from the card background relies solely on the card's shadow/elevation and the input's internal padding (8px 12px 8px 16px). Height is approximately 44px (implied by padding + line-height). Corner radius is {rounded.xs} (3px)—slightly sharper than buttons, giving inputs a subtly different geometric character. State variant: {component.text-input-focus} should add {extensions.shadows.focus-ring} or border highlight.

{component.text-input-focus} — Focused state for form inputs. While the extracted CSS shows no explicit focus styling beyond the base, best practice for this system would apply {extensions.shadows.focus-ring} (dual-layer shadow: 1px outline + 3px offset drop) or a subtle {colors.primary} teal border. Maintain all other properties (background, text color, radius, padding) unchanged from {component.text-input}.

{component.form-divider} — Visual separator between form fields or below the form. Uses {typography.caption} (13px) styling in {colors.muted} gray. In the observed layout, this may manifest as the "© Absolute safe & secure..." legal text sitting beneath the form card, or as subtle vertical dividers between the three input fields.

{component.legal-text} — Disclaimer or terms text appearing below the lead form. White ({colors.ink}) text on the dark hero background, {typography.caption} size (13px). Contains links (likely styled with {colors.link} or underlined white) for "terms & conditions".

Navigation

{component.top-nav} — Fixed or absolute-positioned navigation bar overlaying the hero. Transparent background ({colors.surface-transparent}) allows photography to show through. Height approximately 80px. Contains {component.nav-logo}, {component.nav-link} items, and {component.button-primary}. Typography is {typography.nav-link} (16px/600 Open Sans) in white.

{component.nav-logo} — Brand logo mark + wordmark ("SERENE OASIS ESTATE") positioned flush left in the nav bar. White text color, transparent background, inherits nav link typography or slightly larger. Likely includes an SVG icon mark alongside the wordmark.

{component.nav-link} — Individual navigation menu item ("Homepage", "How We Work", "About"). Transparent background, white ({colors.ink}) text, {typography.nav-link} (16px/600), with 0 20px 0 0 padding (right-padding only, creating spacing between items). No underline in default state; hover/active states would benefit from {colors.accent} color shift or underline appearance.

{component.nav-dropdown-toggle} — Dropdown trigger for "Services" menu item. Identical styling to {component.nav-link} with the addition of a chevron-down icon (implied by "v" suffix in screenshot). Same padding and typography tokens. The dropdown panel itself is not visible in the current viewport.

{component.mobile-menu-button} — Hamburger/menu icon button visible at responsive breakpoints. Transparent background, {colors.body} (gray #6b7280) icon color (not white—intentionally muted to de-emphasize on desktop, show on mobile), 18px padding, 24px icon size. Toggles the mobile navigation drawer/overlay.

Signature Components

{component.hero-headline} — The H1 element displaying "Full-Service Vacation Rental Management". Uses {typography.display-lg} (48px/700 Raleway), white ({colors.ink}) color, transparent background. Sits within {component.hero-band}. Note that "Full-Service" appears to use {component.hero-headline-accent} styling (amber color) for emphasis—a text-span-level variation.

{component.hero-headline-accent} — Color variant of the headline for emphasized words. Identical typography to {component.hero-headline} but with {colors.accent} (amber) text color instead of white. Used to highlight "Full-Service" in the observed hero, drawing the eye to the key value proposition.

{component.hero-subheadline} — Supporting paragraph beneath the headline: "Maximize Your Earnings, Minimize Your Stress with Serene Oasis Estate Property Management". Uses {typography.body-md} (16px/400 Open Sans), white text, transparent background. Also followed by "Get your personalised income estimate" as a second subheadline line before the form.

{component.webflow-badge} — Framework attribution badge in bottom-right corner ("Made in Webflow"). Small {typography.caption} (13px) sizing, white background ({colors.canvas}), {colors.link} blue for the branding text, {rounded.sm} (4px) corners. This is a framework artifact rather than a core brand component but is documented for completeness.

{component.h2-heading} — Section heading for content areas below the hero (not visible in screenshot but present in CSS data). Uses {typography.title-md} (24px/700 Raleway) with {colors.primary} (teal) text color on light backgrounds. This represents the shift from dark-hero typography (white on dark) to content-section typography (teal on white).

{component.body-text} — Standard paragraph text for content sections. {typography.body-md} (16px/400 Open Sans), {colors.body} (gray #6b7280) color on white background. Used for feature descriptions, about copy, or service explanations.

{component.muted-text} — Secondary or metadata text. {typography.body-sm} (14px/400) in {colors.muted} (light gray #aaadb0). Used for timestamps, categories, or supplementary labels.

{component.link-text} — Inline hyperlink styling. {typography.body-sm} size with {colors.link} (standard blue #0000ee). Currently observed only in the Webflow badge; in-body links may adopt {colors.primary} teal or remain blue depending on context.

Do's and Don'ts

Do

• Do reserve {colors.accent} (amber #faa024) exclusively for conversion actions—primary buttons and headline emphasis words only. Using it for borders, icons, or non-interactive elements dilutes its call-to-action power.
• Do maintain zero borders on {component.text-input} fields. The system achieves input definition through background contrast (white input on white card separated by internal padding/gap), card elevation shadow, and focus-ring states—not through border strokes.
• Do apply {rounded.lg} (12px) radius to any card or container floating over photographic/dark backgrounds (like {component.lead-form-card}). The extra softness prevents the rectangle from feeling jarring against organic imagery.
• Do use {typography.display-lg} (48px/700 Raleway) for all H1 hero headlines with {colors.ink} (white) text. Never reduce the weight below 700 for primary headlines—boldness is essential for readability over complex photographs.
• Do implement 300ms ease transitions for background-color, color, and box-shadow properties on all interactive elements. This matches the extracted transition tokens and provides smooth state changes without feeling sluggish.
• Do place {component.legal-text} (disclaimers, terms links) in {typography.caption} (13px) with {colors.ink} (white) when on dark backgrounds, or {colors.muted} (gray) when on light backgrounds. Keep it visually subordinate to primary content.
• Do keep {component.top-nav} background transparent ({colors.surface-transparent}) when overlaid on hero photography. Add a background color (likely {colors.canvas} or {colors.surface-dark}) only on scroll or on non-hero pages.
• Do use {colors.primary} (teal #006373) for H2 headings ({component.h2-heading}) in content sections below the hero. This creates visual continuity with the brand while adapting to the light-background context.
• Do ensure {component.lead-form-card} has substantial vertical padding ({spacing.xxl} / 24px) so inputs don't feel cramped. The form is the primary conversion mechanism and should feel spacious and inviting.
• Do apply {extensions.shadows.glow-white} (white-tinted shadow) when elevating elements on dark/photographic backgrounds. Black shadows disappear or look muddy against dark imagery; white shadows create perceptible lift.

Don't

• Don't substitute {colors.link} (blue #0000ee) for {colors.primary} (teal #006373) in navigation or body links. The blue is reserved for external/system attribution; brand links should use the primary teal or accent amber depending on context.
• Don't introduce pill-shaped buttons (border-radius > 12px). The maximum radius in this system is {rounded.lg} (12px), and the dominant button radius is {rounded.sm} (4px). Pill shapes conflict with the refined, architectural aesthetic.
• Don't use font weights below 400 for any body text. Even {typography.body-md} sits at weight 400—there are no 300-weight text elements in the current design. Lighter weights reduce readability, especially for older demographics in the luxury rental market.
• Don't add gradients to button backgrounds. The {component.button-primary} uses a flat {colors.accent} (solid amber) fill. Gradient buttons would introduce a modern-tech aesthetic that clashes with the timeless luxury positioning.
• Don't place {colors.ink} (white #ffffff) text on {colors.canvas} (white #ffffff) backgrounds. White-on-white has zero contrast. Ensure text color always adapts to its background: white for dark surfaces, {colors.body-dark} (#333333) or {colors.body} (#6b7280) for light surfaces.
• Don't expand the spacing scale beyond the defined tokens. The system has a clear progression from 4px to 60px. Adding arbitrary values (e.g., 7px, 33px, 88px) breaks the rhythmic consistency that gives the design its polished feel.
• Don't apply shadows to {component.top-nav} or {component.hero-band}. These are flat, foundational layers. Shadows are reserved for elevated elements (cards, dropdowns, modals) that sit above the base surface.
• Don't mix font families within a single text block. Headlines stay entirely in Raleway; body stays entirely in Open Sans. Cross-family mixing within a paragraph or headline disrupts the clean dual-family architecture.
• Don't use {colors.muted} (#aaadb0) for primary body text on light backgrounds. Muted gray is for secondary information—timestamps, placeholders, hints. Primary readable content requires {colors.body-dark} (#333333) for sufficient contrast.
• Don't implement hover states without a corresponding active/pressed state. The system documents both {component.button-primary} (default) and {component.button-primary-active} (pressed); hover should interpolate between them (or match active for immediate feedback).

Motion & Animation

Transition Tokens

/* Core interaction transitions — extracted from live DOM */
--transition-all: all 0.3s ease;
--transition-shadow: box-shadow 0.3s ease;
--transition-bg: background-color 0.3s ease;
--transition-color: color 0.3s ease;
--transition-base: 0.3s ease;

/* Recommended additional transitions for implementation */
--transform-ease: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--opacity-fade: opacity 0.24s ease;

Keyframe Animations

No explicit @keyframes rules were detected in the extracted CSS. The Webflow framework may inject animations (scroll-triggered fades, parallax) via JavaScript or the w-animation data attributes, but these are not present in the static stylesheet snapshot.

Interaction Patterns

• Button state transitions: All {component.button-primary} variants transition background-color and color over 300ms ease. Active state darkens the amber; disabled state reduces opacity.
• Input focus reveal: {component.text-input} likely gains a focus ring ({extensions.shadows.focus-ring}) or subtle border on focus, transitioning over 300ms.
• Shadow elevation: Cards and dropdowns may animate their box-shadow property on hover/focus using {extensions.shadows.drop-sm} → {extensions.shadows.drop-md} progression.
• Navigation scroll behavior: The transparent {component.top-nav} likely transitions to a solid background ({colors.canvas} or {colors.surface-dark}) on scroll, triggered via JS intersection observer or scroll event listener.
• Dropdown reveal: {component.nav-dropdown-toggle} triggers a panel (not visible in screenshot) that likely animates opacity and translateY from -8px to 0 over 200-300ms.
• Mobile menu slide: {component.mobile-menu-button} toggles a drawer/overlay that slides in from the right or drops down, likely using transform transitions.
• Image lazy loading: Hero and property images may fade in on load (opacity 0 → 1) to prevent jarring layout shifts.

If implementing new motion, respect the 300ms ease baseline established by existing transitions. Avoid springy or bouncy easing—the luxury category demands smooth, deceleration-biased motion (ease-out or cubic-bezier with strong deceleration).

Imagery Style

• Photography-first approach: The hero (and likely property galleries) uses high-resolution architectural/landscape photography as the primary visual element, not illustration or abstraction.
• Golden hour/twilight timing: The observed villa image is captured at dusk with interior lights glowing, pool reflecting the sky—this "magic hour" lighting is a signature aesthetic choice conveying warmth, exclusivity, and escape.
• Full-bleed hero treatment: Photography extends edge-to-edge without framing, masks, or gradient overlays (or with extremely subtle 2% white tint at most).
• Architectural subject matter: Luxury residential architecture—Mediterranean or Spanish colonial style villas with terracotta roofs, palm trees, infinity pools—is the visual vocabulary.
• Color harmony with palette: The photography naturally contains the brand's amber/warm tones (interior lighting, sunset sky) and deep blues (twilight, water, shadows), creating organic alignment with {colors.accent} and {colors.primary} without forced color grading.
• Lifestyle staging: Poolside furniture, landscape lighting, and palm trees suggest curated vacation living—the imagery sells an aspirational experience, not just a building.
• No visible illustration or 3D renderings: The design relies entirely on photography for visual richness; there are no flat illustrations, isometric graphics, or 3D product renders in the current viewport.
• Potential gallery grid: Below the hero, property listings or features likely use consistent aspect-ratio thumbnails (probably 16:9 or 4:3) with {rounded.md} or {rounded.lg} corners and {extensions.shadows.drop-sm} elevation.

Icon System

• Library: Custom/Webflow Icons. The extracted CSS references webflow-icons as the sole icon font family (appearing once). No Lucide, Heroicons, Material Icons, or Font Awesome classes were detected.
• Specific icons observed:
  • Chevron/down arrow (implied by "Services v" dropdown indicator)
  • Hamburger menu icon (three horizontal lines, implied by {component.mobile-menu-button})
  • Logo mark (circular "SO" monogram or similar for Serene Oasis)
  • External link or badge icon (within Webflow attribution)
• Treatment: Icons appear to use currentColor inheritance, adopting the text color of their parent component (white in nav, gray on mobile menu button). Stroke-based rendering is likely given the Webflow icon font convention.
• Size alignment: Nav icons (dropdown chevron) likely match {typography.nav-link} size (16px) or slightly smaller (12–14px). Mobile hamburger is 24px (per extracted font-size on menu button). Logo mark is proportionally scaled to nav height (~40–50px).
• Recommendation: For re-implementation outside Webflow, replace webflow-icons with Lucide or Heroicons (outline style) mapped to equivalent symbols: ChevronDown for dropdown, Menu for hamburger, and a custom SVG for the brand monogram.

Recommended Frontend Stack

- Framework:      Next.js 14 (App Router) or Astro (static-friendly)
                  Current site: Webflow (no-code/low-code)
- Styling:        Tailwind CSS v3.4+ with custom theme extension
                  (map all tokens to tailwind.config.js)
- Fonts:          Google Fonts: Raleway (weights 600, 700) + 
                  Open Sans (weights 400, 600, 700)
                  CSS variables: --font-display, --font-body
- Animation:      Framer Motion (for scroll-triggered reveals) or
                  Tailwind CSS transitions (for hover/focus states)
- Icons:          Lucide React (stroke-based, currentColor compatible)
                  Custom SVG for brand monogram/logo
- Component lib:  None (custom components) or Radix Primitives
                  for accessible dropdowns/dialogs
- Forms:          React Hook Form + Zod validation
                  (match the 3-field lead capture pattern)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 480px | Single column everything, stacked form fields, hamburger nav | | Tablet | 480px – 768px | Two-column form may persist, condensed nav | | Desktop | 768px – 1200px | Full nav visible, 3-column inline form, centered container | | Wide | > 1200px | Max-width container centered, potential sidebar rail |

Touch Targets

• {component.button-primary}: 26px vertical × (26px + text-width) horizontal — exceeds 44px minimum comfortably.
• {component.button-primary-wide}: 26px vertical × (100px + text-width) horizontal — generously exceeds 44×44px WCAG AAA target.
• {component.text-input}: 44px height (implied) × flexible width — meets 44px height requirement for thumb-friendly tapping.
• {component.mobile-menu-button}: 60px × 60px (from padding 18px × 2 + 24px icon) — excellent touch target, well above minimums.
• {component.nav-link}: Text-height dependent (~24px) × padded width — may fall short of 44px on mobile; consider increasing vertical padding to 14–16px in responsive styles.

Collapsing Strategy

• Navigation bar: At tablet/mobile widths, {component.top-nav} hides the {component.nav-link} items and {component.button-primary} behind the {component.mobile-menu-button} hamburger. The menu likely opens as a full-screen overlay or side drawer with stacked links and a prominent CTA.
• Hero headline: {component.hero-headline} (48px) scales down proportionally—likely 32–36px on tablet, 28–32px on mobile—maintaining Raleway 700 weight and white color.
• Lead form card: The three inline inputs ({component.text-inpu}t × 3 + {component.button-primary-wide}) stack vertically on mobile. Each input takes full width of the card. The button expands to full width below the inputs.
• Container padding: Horizontal padding reduces from {spacing.xl} (20px) to {spacing.lg} (16px) or {spacing.base} (14px) on mobile to maximize content width.
• Hero image: Background photography likely uses background-size: cover with background-position: center to ensure the villa focal point remains visible across aspect ratios. On very tall mobile screens, the image may need background-position: center top to keep the building (not the pool) in view.
• Form card width: On mobile, {component.lead-form-card} likely stretches to near-full-width (with {spacing.lg} or {spacing.xl} margin) rather than being constrained to the desktop container width.

Image Behavior

• Hero photograph: Set as background-image on {component.hero-band} with background-size: cover, background-position: center, and background-repeat: no-repeat. On mobile portrait orientation, consider background-position: center 30% to keep the villa architecture (upper portion of image) visible rather than the pool (lower portion).
• Logo: SVG with max-width: 160px (desktop) scaling down to 120px on mobile, maintaining aspect ratio.
• Property thumbnails (future): If adding property listing images below the hero, use aspect-ratio: 16/9 or aspect-ratio: 4/3 with object-fit: cover and {rounded.md} (8px) corners. Lazy-load with loading="lazy" and fade-in animation.

Iteration Guide

1. Initialize the project using Next.js or Astro with Tailwind CSS. Create a tailwind.config.js that maps every token from the YAML frontmatter—colors under theme.colors.extend, typography under theme.fontSize/theme.fontWeight/theme.lineHeight/theme.letterSpacing/theme.fontFamily, spacing under theme.spacing, and borderRadius under theme.borderRadius. This ensures zero hard-coded values.

2. Build the hero section first—it contains the highest density of unique components: {component.top-nav}, {component.hero-band}, {component.hero-headline}, {component.hero-headline-accent}, {component.hero-subheadline}, {component.lead-form-card}, three {component.text-input} instances, {component.button-primary-wide}, and {component.legal-text}. Getting the hero right validates 70% of the design system.

3. Implement the color context switching. The system has two "modes" within a single page: dark-hero mode (white text, transparent nav, amber buttons) and light-content mode (dark text, teal headings, white backgrounds). Create CSS context classes (e.g., .context-dark, .context-light) or use Tailwind's dark: variant logic (even though extensions.mode: "light", the hero behaves as a dark surface).

4. Use the exact font files. Import Raleway (weights 600, 700) and Open Sans (weights 400, 600, 700) from Google Fonts via <link> tags or next/font/google. Define CSS custom properties --font-display: 'Raleway', sans-serif and --font-body: 'Open Sans', sans-serif and reference these in your Tailwind config's theme.fontFamily.

5. Every component in the frontmatter gets a React/Vue/Svelte component. Don't skip "small" ones like {component.form-divider} or {component.legal-text}—they carry specific typography and color tokens that must be consistent. Name your files to match the kebab-case token names (e.g., ButtonPrimary.tsx, LeadFormCard.tsx).

6. State variants are sibling components, not props. {component.button-primary-active} is not a variant="active" prop on <ButtonPrimary>; it's either a separate exported component <ButtonPrimaryActive> or a CSS class .button-primary-active that you apply via state management. This matches the frontmatter's flat structure.

7. Add the missing hover states now. The spec explicitly omits hover (per policy), but your implementation needs them. For {component.button-primary}, hover = slightly lighter amber or subtle scale(1.02) transform. For {component.nav-link}, hover = {colors.accent} text color. For {component.text-input}, hover = subtle border or background shift. Keep all hover transitions at 300ms ease.

8. Match the shadow signatures exactly. When applying {extensions.shadows.glow-white} to {component.lead-form-card}, use the full value: rgba(255, 255, 255, 0.1) 0px 4px 45px 0px. Don't approximate with Tailwind's shadow-2xl—it won't match the 45px blur radius or the white tint. Add these as custom shadow utilities in your Tailwind config.

9. Test the form layout at 375px (mobile), 768px (tablet), and 1440px (desktop). The three-input + button row in {component.lead-form-card} is the most layout-sensitive element. Verify it stacks gracefully, maintains {spacing.md} (12px) gaps between fields, and keeps the {component.button-primary-wide} prominent.

10. Run accessibility audits. Check contrast ratios: white (#ffffff) on {colors.surface-dark} (#023a41) exceeds 7:1 (AAA). Amber (#faa024) on... verify it meets 4.5:1 for normal text. Teal (#006373) on white is likely AA-compliant for large text. Fix any failures by adjusting the lighter color (never the dark background, per brand guidelines).

Font Setup

For local development or environments where Google Fonts CDN is inaccessible:

/* If substituting Raleway */
--font-display: 'Raleway', 'Montserrat', 'Segoe UI', sans-serif;

/* If substituting Open Sans */
--font-body: 'Open Sans', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;

Recommended Google Fonts <link> tag:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Raleway:wght@600;700&display=swap" rel="stylesheet">

Load only the weights actually used (400, 600, 700) to minimize payload—don't import the full 100–900 range.

Known Gaps

• Hover state styling: Per the no-hover policy, all :hover pseudo-class styles are absent from this spec. Implementation teams must derive hover states from the documented Default and Active/Pressed tokens.
• Loading/skeleton states: No loading skeletons, spinners, or pending-state treatments were extractable from the static screenshot. Form submission likely shows a spinner or disables the button ({component.button-primary-disabled}) during API calls.
• Form validation states: Beyond {component.text-input-focus}, there are no error ({colors.error} not defined), success, or warning input states. Real-world forms require red-border + error-message patterns for invalid fields.
• Dropdown panel visuals: The "Services" dropdown trigger ({component.nav-dropdown-toggle}) implies a dropdown menu, but the panel itself (background, shadow, item list, hover states) is not visible in the current viewport and thus undocumented.
• Mobile navigation drawer: The {component.mobile-menu-button} togges a menu overlay, but its layout (full-screen vs side-panel, background color, animation direction, close button) is unobserved.
• Below-the-fold sections: Content sections using {component.h2-heading} (teal text on white), feature grids, testimonial carousels, pricing tables, or footer columns are referenced by CSS data but not visible in the screenshot. Their layouts, component compositions, and image treatments are inferred only.
• Sub-brand or property-specific palettes: If the site manages multiple properties or offers tiered service levels (Standard, Premium, Elite), sub-brand color variations are not present in the current viewport.
• Dark mode toggle: Despite the hero using a dark photographic background, extensions.mode: "light" indicates the system's base mode is light. A true dark mode (inverted canvas, adjusted text colors) is neither implemented nor documented here.
• Pixel-exact amber shade sampling: {colors.accent} (#faa024) was extracted from CSS, but gradient buttons or hover states might use intermediate shades (e.g., #ffb84d for hover) that require visual refinement against the original design file.
• Webflow-specific CSS classes: Classes like w-nav, w-dropdown, w-container, w-button are Webflow framework artifacts. Their generated CSS (transitions, responsiveness, JavaScript bindings) is not fully captured in the static extraction and may contain behavioral details (nav breakpoint logic, dropdown animation timings) not reflected in this spec.