# Design System Strategy: The Nautical Atelier

## 1. Overview & Creative North Star
The Creative North Star for this design system is **"The Nautical Atelier."** 

Unlike standard booking platforms that feel like transactional utilities, this system is designed to mirror the experience of a high-end concierge service. We are moving away from the "standard grid" into a space of **Editorial Precision**. The design breaks the traditional template look through intentional asymmetry—where high-resolution imagery of yacht hulls and crystalline waters bleeds off-canvas—and vast, "expensive" whitespace that allows the content to breathe, suggesting exclusivity and calm.

Every element is treated as a piece of craftsmanship. We use high-contrast typography scales (the "Didot" effect) to create a sense of heritage, paired with ultra-modern layout techniques to signal technological superiority.

## 2. Colors & Tonal Depth
The palette is rooted in the "Golden Hour" on the Mediterranean: deep oceanic shadows and the warm, metallic glint of sunset on hardware.

*   **Primary (Deep Navy - #000613 / #001F3F):** Used for deep immersion. This is not just a background; it is the "anchor" of the visual identity. Use `primary_container` for hero sections to establish authority.
*   **Secondary (Champagne Gold - #775A19):** This is your "jewelry." It should be used sparingly for high-value CTAs, iconography accents, and active states to guide the eye toward conversion.
*   **Neutral (Pearl White - #F9F9F9):** The canvas. It provides the "vast whitespace" required to make the Navy and Gold feel premium.

### The "No-Line" Rule
Standard 1px borders are strictly prohibited for sectioning. They create visual noise that feels "cheap." Instead, boundaries must be defined by:
*   **Background Shifts:** Transitioning from `surface` to `surface_container_low`.
*   **Tonal Transitions:** Using subtle gradients between `primary` and `primary_container` for large-scale immersive sections.

### Surface Hierarchy & Nesting
Treat the UI as physical layers of fine paper or polished deck wood. 
*   **Level 1 (Foundation):** `surface` (#F9F9F9) for the main page body.
*   **Level 2 (The Deck):** `surface_container_low` (#F3F3F3) for secondary content areas or sidebar filters.
*   **Level 3 (The Cabin):** `surface_container_highest` (#E2E2E2) for interactive elements like cards.

### Signature Textures
Use **Glassmorphism** for navigation bars and floating price cards. Utilize semi-transparent versions of `surface` with a 20px backdrop-blur. This allows the high-quality imagery of the yachts to bleed through, maintaining a sense of place.

## 3. Typography: The Editorial Voice
Typography is the primary driver of the "Luxury Watch" aesthetic.

*   **Display & Headline (Noto Serif):** These are your "statements." Set with increased letter-spacing (0.02em) and thin weights to mimic the elegance of *Vogue* or *Rolex* advertisements. Use `display-lg` for yacht names and `headline-md` for section introductions.
*   **Body (Manrope):** A clean, high-legibility sans-serif. It acts as the functional counterpart to the serif. Keep line heights generous (1.6x) to maintain the feeling of openness.
*   **Labels (Inter):** Small, all-caps labels (using `label-md`) should be used for technical specs (e.g., "LENGTH: 45M") to provide a precision-engineered feel.

## 4. Elevation & Depth
This design system rejects heavy drop shadows in favor of **Tonal Layering**.

*   **The Layering Principle:** Depth is achieved by stacking. A `surface_container_lowest` card sitting on a `surface_container` background provides a soft, natural lift that mimics architectural shadows.
*   **Ambient Shadows:** When a yacht listing card must float, use a "Sea Mist" shadow: `on_surface` color at 4% opacity, with a 40px blur and 10px Y-offset. It should be barely perceptible, felt rather than seen.
*   **The Ghost Border:** If a form field or button requires a border, use `outline_variant` at 20% opacity. Never use 100% opaque lines.

## 5. Components

### Buttons: The "Gold Standard"
*   **Primary:** Solid `secondary` (Champagne Gold) with `on_secondary` text. Rectangular with 0px corner radius (The "Sharp Edge" Rule) to convey architectural precision.
*   **Secondary:** `primary` (Navy) with a gold `outline_variant` (20% opacity). 
*   **Tertiary:** Text-only with a 1px gold underline that expands on hover.

### Cards & Lists: The "Whitespace" Rule
*   **Dividers:** Strictly forbidden. Separate yacht listings or itinerary items using 64px or 80px of vertical whitespace (from the spacing scale).
*   **Imagery:** All cards must feature high-aspect-ratio photography. Content (Price, Name) should be overlaid using a subtle `primary_container` gradient at the bottom 30% of the image.

### Input Fields: The "Minimalist Entry"
*   Inputs should not be boxes. They are a single 1px `outline_variant` line at the bottom. The label should be in `label-sm` (Inter) floating above the line, reminiscent of a yacht’s technical blueprint.

### Signature Component: The "Heritage Modal"
*   A full-screen overlay using `primary_container` (Navy). Use `display-md` (Serif) for titles and high-opacity Glassmorphism for the close button. This creates a focused, "private lounge" experience for the user.

## 6. Do’s and Don'ts

### Do:
*   **Embrace Asymmetry:** Place a yacht image on the left and offset the text block to the right with 120px of padding.
*   **Use The "Sharp Edge":** Keep all `borderRadius` at **0px**. Rounded corners are for consumer tech; sharp edges are for luxury yachts and supercars.
*   **Prioritize Image Quality:** If the photography is low-res, the entire design system fails. Treat images as the primary "UI" element.

### Don’t:
*   **Don't use "Blue":** Avoid standard digital blues. Only use the Deep Navy (`#001F3F`) provided.
*   **Don't use Grids rigidly:** Do not feel forced to align everything to a 12-column grid. Let elements overlap—like a serif headline partially covering an image—to create depth.
*   **Don't use pure Black:** Use `primary` or `tertiary` for dark tones. Pure black (#000000) lacks the "soul" and depth of this maritime palette.