---
name: Aegean Coastal Sanctuary
colors:
  surface: '#f6fafb'
  surface-dim: '#d7dbdc'
  surface-bright: '#f6fafb'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f1f4f5'
  surface-container: '#ebeef0'
  surface-container-high: '#e5e9ea'
  surface-container-highest: '#dfe3e4'
  on-surface: '#181c1d'
  on-surface-variant: '#3e494b'
  inverse-surface: '#2d3132'
  inverse-on-surface: '#eef1f2'
  outline: '#6e797c'
  outline-variant: '#bdc8cb'
  surface-tint: '#006877'
  primary: '#006574'
  on-primary: '#ffffff'
  primary-container: '#088092'
  on-primary-container: '#f8fdff'
  inverse-primary: '#78d4e7'
  secondary: '#705a4c'
  on-secondary: '#ffffff'
  secondary-container: '#f8dac8'
  on-secondary-container: '#755e50'
  tertiary: '#8a4c17'
  on-tertiary: '#ffffff'
  tertiary-container: '#a7642e'
  on-tertiary-container: '#fffbff'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#a3eeff'
  primary-fixed-dim: '#78d4e7'
  on-primary-fixed: '#001f25'
  on-primary-fixed-variant: '#004e5a'
  secondary-fixed: '#fbddca'
  secondary-fixed-dim: '#dec1af'
  on-secondary-fixed: '#28180d'
  on-secondary-fixed-variant: '#574335'
  tertiary-fixed: '#ffdcc5'
  tertiary-fixed-dim: '#ffb782'
  on-tertiary-fixed: '#301400'
  on-tertiary-fixed-variant: '#703802'
  background: '#f6fafb'
  on-background: '#181c1d'
  surface-variant: '#dfe3e4'
typography:
  headline-xl:
    fontFamily: Literata
    fontSize: 48px
    fontWeight: '600'
    lineHeight: '1.2'
  headline-lg:
    fontFamily: Literata
    fontSize: 32px
    fontWeight: '600'
    lineHeight: '1.3'
  headline-md:
    fontFamily: Literata
    fontSize: 24px
    fontWeight: '500'
    lineHeight: '1.4'
  body-lg:
    fontFamily: Nunito Sans
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-md:
    fontFamily: Nunito Sans
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
  label-lg:
    fontFamily: Nunito Sans
    fontSize: 14px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: 0.05em
  headline-lg-mobile:
    fontFamily: Literata
    fontSize: 28px
    fontWeight: '600'
    lineHeight: '1.3'
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  container-max: 1200px
  gutter: 24px
  margin-mobile: 20px
  section-gap: 80px
---

## Brand & Style

This design system embodies the "Warm Coastal" aesthetic, specifically tailored for the slow-living atmosphere of Akyaka. It departs from sterile corporate luxury in favor of an **Authentic & Boutique** personality. The visual language is tactile and inviting, evoking the feeling of sun-drenched stone walls, turquoise waters, and the iconic bougainvillea of the Turkish coast.

The style leverages **soft minimalism** paired with **organic accents**. Large, evocative photography of the Aegean landscape is grounded by generous whitespace and soft, rounded geometry. A signature line-art motif of a bougainvillea branch is used sparingly to anchor section headers, adding a human, illustrative touch to the digital interface.

## Colors

The palette is derived directly from the Akyaka landscape:
- **Primary (Turquoise):** Represents the Azmak River and the Aegean sea. Used for primary branding and navigational elements.
- **Secondary (Dark Wood):** Inspired by the traditional Ula-style architecture and woodwork. Used for deep contrast, footers, and high-priority text.
- **Accent (Bougainvillea Pink):** Reserved specifically for call-to-action buttons and highlights to ensure they pop against the neutral base.
- **Background (Cream):** An off-white, paper-like base that feels warmer and more organic than pure white.

## Typography

The typographic hierarchy balances a literary, authoritative serif with a friendly, accessible sans-serif.

- **Headlines:** Use **Literata** (or Lora) to convey a sense of history and boutique quality. Larger headlines should use tighter tracking, while smaller subheads benefit from more breathing room.
- **Body & UI:** Use **Nunito Sans**. Its rounded terminals mirror the "soft" shape language of the UI and ensure high readability for room descriptions and booking details.
- **Accents:** Use all-caps labels with slight letter spacing for categories or "small print" to maintain a clean, organized appearance.

## Layout & Spacing

This design system uses a **Fluid-Fixed hybrid grid**. On desktop, content is contained within a 1200px max-width container to maintain focus, while background elements can bleed to the edges.

- **Rhythm:** A base 8px unit dictates all spacing.
- **Sectioning:** Large gaps (80px-120px) are used between major content blocks to evoke a sense of calm and "unhurried" browsing.
- **Mobile:** Margins shrink to 20px, and vertical spacing is compressed slightly to 64px between sections to maintain momentum.

## Elevation & Depth

Visual hierarchy is established through **Tonal Layers** and **Ambient Shadows**.

- **Surfaces:** Cards and floating elements sit on the Cream background with extremely soft, diffused shadows (Blur: 32px, Opacity: 4%, Color: Secondary Brown).
- **Glassmorphism:** The primary navigation bar uses a frosted glass effect (Backdrop Blur: 12px) with a semi-transparent cream tint (85% opacity). This allows the colors of the hero imagery to bleed through subtly.
- **Depth Levels:**
  - Level 0: Background (#F7F4EF).
  - Level 1: Flat cards with a 1px #E5E0D5 border.
  - Level 2: Raised elements (interactive cards) with the ambient shadow.

## Shapes

The shape language is consistently "Soft-Organic." 

- **Corner Radii:** Standard components (buttons, input fields) use 12px. Larger components (cards, image containers) use 24px.
- **Images:** Always utilize the `rounded-xl` (24px) radius to soften the edges of the photography, making the imagery feel more like "windows" into the hotel.
- **Icons:** Use rounded icon sets (e.g., Feather or Lucide) with a 2px stroke weight to match the body typography weight.

## Components

### Navbar
The navbar is a fixed-top element with a frosted glass background. The logo (Sitar) is placed on the left, with primary navigation links in the center (Secondary Brown) and a "Book Now" CTA in the Accent Pink on the right.

### Buttons
- **Primary:** Filled Accent Pink (#D46A8C) with Cream text. 24px rounded corners. Minimum height 48px.
- **Secondary:** Outlined Primary Teal (#3A9CAE) with 1.5px border.
- **Text:** Underlined Serif (Literata) for a sophisticated "Read More" feel.

### Cards
Room and amenity cards use a vertical stack:
1. **Image:** 3:2 aspect ratio with a 24px corner radius.
2. **Content:** Cream background, 12px padding. 
3. **Typography:** Headline-MD for titles, Body-MD for descriptions.

### Input Fields
Soft cream background (#F2EEE5) with no border until focused. On focus, a 1.5px Primary Teal border appears. Label text sits above the field in Nunito Sans Bold (12px).

### Footer
A high-contrast block using the Dark Wood Brown (#3D2B1F). Text is rendered in Cream (#F7F4EF) at 80% opacity for secondary info, and 100% for links and titles.

### Motifs
Small SVG line-art bougainvillea branches should be placed at a -5 degree angle above H2 section headers, slightly overlapping the text to create a hand-crafted, scrapbook feel.