salmakisyatch/stitch/DESIGN.md

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.