72 lines
6.1 KiB
Markdown
72 lines
6.1 KiB
Markdown
# 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. |