miti_navi___style_reference:
  info: "> Tuscan sea-view chapbook on raw linen"

  theme: "light"

  info: "Miti Navi operates as a warm, paper-toned editorial canvas — think a luxury yachting magazine spread printed on unbleached craft stock. The entire interface is built on a sand-beige field (#e6dece) with deep ink-black typography, giving the site a tactile, hand-printed quality. Monospaced type (GT Pressura Mono) carries all functional UI — nav, buttons, body — lending technical precision that contrasts with the swooping, romantic serif (Voyage) reserved for editorial display lines. A single warm peach underline (#ffdead) is the only chromatic accent, used sparingly to mark interactive moments. The hero photograph is masked by a dramatic arch, the navigation splits into three balanced clusters around a centered wordmark, and a vertical sticky side tab interrupts the right edge with rotated text — all choices that read more like an art book than a product page."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Linen | `#e6dece` | `--color-linen` | Page canvas, card surfaces, section backgrounds — the warm unbleached-paper field that carries all content |"
    info: "| Deep Ink | `#000e13` | `--color-deep-ink` | Primary text, navigation, structural borders, logo lockup — near-black with the faintest cool undertone |"
    info: "| Carbon | `#232323` | `--color-carbon` | Body text, icon strokes, secondary headings, hairline rules, card borders — workhorse dark for dense UI elements |"
    info: "| Soft Ash | `#999999` | `--color-soft-ash` | Muted helper text, inactive nav items, subtle dividers, secondary metadata |"
    info: "| Warm Apricot | `#ffdead` | `--color-warm-apricot` | Interactive link underlines, outlined action borders, the sole chromatic accent — used as a 1px rule beneath active elements to signal affordance without weight |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Pure black for maximum-contrast headings and icon fills where Carbon reads as warm |"

  tokens___typography:

    gt_pressura_mono___all_functional_ui__top_navigation__body_copy__buttons__links__cards__breadcrumbs__icon_labels__the_monospaced_engine_runs_the_entire_interface__tracking_opens_up_at_larger_sizes__0_71px_at_10px__1_0px_at_12px__1_4px_at_14px__1_6px_at_16px___the_wider_letterspacing_as_size_grows_gives_the_type_a_deliberate__spaced_out_breath_that_suits_the_editorial_register_____font_gt_pressura_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, Space Mono"
      - "**Weights:** 400"
      - "**Sizes:** 10px, 12px, 14px, 16px"
      - "**Line height:** 1.40"
      - "**Letter spacing:** 0.71px at 10px, 1.0px at 12px, 1.4px at 14px, 1.6px at 16px"
      - "**Role:** All functional UI: top navigation, body copy, buttons, links, cards, breadcrumbs, icon labels. The monospaced engine runs the entire interface. Tracking opens up at larger sizes: 0.71px at 10px, 1.0px at 12px, 1.4px at 14px, 1.6px at 16px — the wider letterspacing as size grows gives the type a deliberate, spaced-out breath that suits the editorial register."

    voyage___hero_and_section_display_lines__the_extreme_sizes_130px__180px_paired_with_tight_0_90_0_94_leading_create_oversized__airy_editorial_headlines_that_dominate_the_page__only_the_wordmark_adjacent_and_16px_use_normal_leading__this_is_a_custom_high_contrast_display_serif_with_theatrical_curves___it_carries_the_romantic_brand_voice_____font_voyage:
      - "**Substitute:** Playfair Display, Cormorant Garamond, DM Serif Display"
      - "**Weights:** 400"
      - "**Sizes:** 16px, 46px, 72px, 130px, 180px"
      - "**Line height:** 0.90–0.94"
      - "**Role:** Hero and section display lines. The extreme sizes (130px, 180px) paired with tight 0.90–0.94 leading create oversized, airy editorial headlines that dominate the page. Only the wordmark-adjacent and 16px use normal leading. This is a custom high-contrast display serif with theatrical curves — it carries the romantic brand voice."

    gtsectradisplay___mid_weight_editorial_subheadings_that_bridge_the_monospaced_ui_type_and_the_huge_voyage_display__a_transitional_serif_with_old_style_warmth__used_sparingly_for_paragraph_level_headings_inside_content_blocks_____font_gtsectradisplay:
      - "**Substitute:** Cormorant Garamond, EB Garamond, Lora"
      - "**Weights:** 400"
      - "**Sizes:** 26px"
      - "**Line height:** 1.20"
      - "**Role:** Mid-weight editorial subheadings that bridge the monospaced UI type and the huge Voyage display. A transitional serif with old-style warmth, used sparingly for paragraph-level headings inside content blocks."

    times___tiny_uppercase_eyebrow_labels_0_2860em_letterspacing___4px___the_0_28em_tracking_is_a_system_default__used_only_for_short_all_caps_tags_above_headlines__substitute_with_a_real_serif_when_available_____font_times:
      - "**Substitute:** Times New Roman, EB Garamond"
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1.40"
      - "**Letter spacing:** 4.0px at 14px"
      - "**Role:** Tiny uppercase eyebrow labels (0.2860em letterspacing = 4px) — the 0.28em tracking is a system default; used only for short all-caps tags above headlines. Substitute with a real serif when available."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.4 | 0.71px | `--text-caption` |"
      info: "| eyebrow | 14px | 1.4 | 4px | `--text-eyebrow` |"
      info: "| body-lg | 16px | 1.4 | 1.6px | `--text-body-lg` |"
      info: "| subheading | 26px | 1.2 | — | `--text-subheading` |"
      info: "| heading | 46px | 0.94 | — | `--text-heading` |"
      info: "| heading-lg | 72px | 0.92 | — | `--text-heading-lg` |"
      info: "| display | 130px | 0.9 | — | `--text-display` |"
      info: "| display-xl | 180px | 0.9 | — | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 60 | 60px | `--spacing-60` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| images | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 60px"
      - "**Card padding:** 24px"
      - "**Element gap:** 16px"

  components:

    arched_hero_image:
      role: "Full-bleed yacht photography with signature curved mask"

      info: "Photograph masked by a large arch/dome shape on the top edge, creating a cathedral-window silhouette against the linen canvas. No border-radius on the image itself — the arch is a custom SVG/clip-path. Image fills the viewport width minus side gutters, with the lower edge running straight."

    split_top_navigation:
      role: "Three-cluster header with centered wordmark"

      fixed_at_top_of_viewport__left_cluster: "2–3 monospaced links in 12px GT Pressura Mono, #000e13, tracking 1.0px, 10px horizontal gap. Center: stylized \"MITI NAVI\" wordmark in custom display, ~32px. Right cluster: 3–4 monospaced links matching left cluster. No background fill — nav sits directly on linen. Active link has a 1px #ffdead bottom border."

    vertical_side_tab:
      role: "Persistent right-edge page marker"

      info: "A narrow vertical strip (roughly 24px wide) running down the right viewport edge. Contains short uppercase text (GT Pressura Mono, 10px, tracking 0.71px) rotated 90° — reads bottom-to-top. Filled with #000e13, text in #e6dece. Functions as both navigation and a printed-page margin marker."

    underlined_interactive_link:
      role: "Primary action / link / CTA"

      info: "The only CTA style on the site. Text in GT Pressura Mono, 12–14px, #000e13, tracking 1.0–1.4px, all-caps. A 1px #ffdead (Warm Apricot) bottom border sits 4px below the text baseline. No background fill, no padding beyond the underline gap. Hover deepens text to #000000. No filled buttons exist — every action is this underlined link."

    section_header_centered:
      role: "Editorial section opener"

      centered_stack: "small all-caps eyebrow (Times 14px, 4.0px tracking) at top, then a 26px GTSectraDisplay or 46px Voyage heading beneath. Generous vertical breathing room (30–60px above and below). Optional 1px #232323 horizontal rule beneath the heading, spanning 40–60px."

    display_headline_voyage_oversize:
      role: "Hero and page-introduction typography"

      info: "Voyage at 130–180px, line-height 0.90, tracking 0, color #000e13. Always left-aligned within its column. The tight leading lets ascenders and descenders of multiple lines nearly touch, creating a dense typographic block that reads as a printed broadside. Used once per major section."

    flat_content_card:
      role: "Yacht listings, feature blocks"

      info: "No fill, no border, no shadow. Content sits directly on the linen canvas. Internal padding: 24px on sides, 15–24px vertical. A 1px #232323 hairline may separate cards in a grid. Image at top (if present) is flush-edged, no radius."

    monospaced_body_block:
      role: "Standard paragraph content"

      info: "GT Pressura Mono 14px, tracking 1.4px, line-height 1.4, color #232323. Justified or left-aligned. Paragraph spacing: 15–20px. No drop caps, no first-line indents — the monospaced engine already gives the text a distinctive rhythm."

    logo_wordmark:
      role: "Brand identity mark"

      info: "Custom 'MITI NAVI' lockup in a custom display face, approximately 32–40px, with a thin hairline rule beneath and a small 'NAVI' sub-label in GT Pressura Mono 10px, tracking 1.0px, #999999. Centered in the header."

    eyebrow_tag:
      role: "Pre-heading category label"

      info: "Times 14px, uppercase, tracking 4.0px, color #999999, centered above a section heading. No border, no background. Functions as a printed page caption."

    image_window_dark_mask:
      role: "Photographic content block with dark frame"

      info: "Full-width or large-block photographs placed inside a #000e13 filled container, giving the image a dark surround that frames it like a print behind glass. No border-radius. Used for editorial photography that needs weight against the linen field."

    hairline_divider:
      role: "Section break"

      info: "1px line in #232323, spanning 40–120px (short rule) or full container width. Centered or left-aligned. Replaces whitespace as a structural divider. No background, no icon, no label."

  do_s_and_don_ts:

    do:
      - "Use GT Pressura Mono at 14px with 1.4px tracking for every UI label, button, nav item, and body paragraph"
      - "Apply Voyage at 130–180px, line-height 0.90, for hero and major editorial headlines — never at sizes below 46px"
      - "Mark every interactive link with a 1px #ffdead bottom border offset 4px below the text — no filled buttons exist in this system"
      - "Let the linen #e6dece canvas carry through the entire page; do not introduce white or light-gray surfaces"
      - "Anchor all secondary metadata in #999999 Soft Ash rather than the primary #000e13"
      - "Place hairline rules (1px #232323) at 40–60px width as printed-style section markers instead of relying on whitespace alone"
      - "Set all uppercase micro-text at GT Pressura Mono 10–12px with tracking ≥0.7px to maintain the spaced, monospaced cadence"

    don_t:
      - "Do not use filled, rounded, or shadowed buttons — this system has no filled CTA component"
      - "Do not introduce new chromatic colors beyond #ffdead; the interface must read monochrome except for the apricot underline accent"
      - "Do not apply border-radius to cards, images, or buttons — the design is rigorously square-edged"
      - "Do not use box-shadows or elevation effects; separation comes from color contrast, hairline rules, and dark image insets"
      - "Do not use sans-serif system fonts for UI text — GT Pressura Mono's monospaced cadence is the system's signature"
      - "Do not use Voyage at small sizes; it only works at 46px and above where its curves can breathe"
      - "Do not place white, light-gray, or off-canvas tints anywhere — every surface is linen or deep ink"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Linen Canvas | `#e6dece` | Page background, primary field |"
    info: "| 2 | Card Surface | `#e6dece` | Same as canvas — content blocks float on the linen without raised panels |"
    info: "| 3 | Image Inset | `#000e13` | Dark photographic insets, hero arches, and image masks that read as windows into deeper space |"

  elevation:

    info: "This design deliberately avoids box-shadows and elevation. Separation is achieved through color contrast (linen canvas vs #000e13 image insets), 1px hairline rules in #232323, and generous whitespace. The flat, unshadowed treatment is core to the printed/editorial language — shadows would break the paper metaphor."

  imagery:

    info: "Photography is the dominant visual element. The hero is a single, large-format full-bleed image of a sailing yacht photographed from astern on open Mediterranean water, with mountainous coastline in the background. The treatment is documentary-naturalistic — high-key daylight, no color grading beyond natural blue water and sky, no studio staging. A signature arched clip-path masks the top edge of the hero image, creating a cathedral/window silhouette. Secondary images appear inside dark #000e13 frames that function like prints mounted behind glass, making warm linen content blocks read as the surrounding paper. No illustrations, no abstract graphics, no product renders. Iconography is minimal: a few thin line icons drawn at 1px stroke weight in #232323, used sparingly for functional affordances. Imagery density is low — large editorial photographs are given maximum breathing room rather than tiled."

  layout:

    info: "Full-bleed page model with the linen #e6dece canvas extending to all edges. Content is constrained to an approximately 1200px max-width centered column, with generous outer gutters of 30–60px. The hero is the visual exception — the arched photograph spans the full viewport width. The header is split into three balanced clusters (left nav, center wordmark, right nav) with no background fill. Section rhythm is editorial: each section opens with a centered display headline (Voyage) over generous whitespace, followed by a monospaced body block, with hairline rules as transitions rather than background color bands. Content arrangement alternates between centered stacks (for section openers and editorial quotes) and asymmetric text+image compositions (for yacht features). Navigation is a single fixed top bar with a persistent vertical side tab on the right edge. No sidebar, no mega-menu. The overall density is low — sections breathe with 60px+ vertical gaps, and the site feels like flipping through a printed catalog rather than scrolling a dashboard."

  agent_prompt_guide:

    quick_color_reference:
    - "canvas: #e6dece (Linen)"
    - "text: #232323 (Carbon)"
    - "border: #000e13 (Deep Ink)"
    - "accent: #ffdead (Warm Apricot, underline only)"
    - "muted: #999999 (Soft Ash)"
    - "primary action: #ffdead (outlined action border)"

    3_5_example_component_prompts:
    - "Build a split top navigation: linen #e6dece canvas, no background. Left cluster with two links ('MITI NAVI', 'LOCATION') in GT Pressura Mono 12px, #000e13, tracking 1.0px, uppercase, with 10px gap between items. Center: 'MITI NAVI' wordmark in Voyage 40px, #000e13, with a 1px #232323 hairline beneath and a 10px 'NAVI' sublabel in GT Pressura Mono, #999999. Right cluster: 'RÉPARATION', 'CHANTIER NAVAL', 'CONTACT' in same monospaced style as left."

    - "Build an arched hero section: full-viewport-width image of a sailing yacht on open water, masked at the top by a tall arch (clip-path or SVG) creating a cathedral-window silhouette against the linen canvas. Image fills 100% width, height approximately 70vh. Below the arch, a left-aligned display headline in Voyage 130px, line-height 0.90, #000e13 reading 'Les voiliers de nos rêves'. An underlined link in GT Pressura Mono 12px, #000e13, with a 1px #ffdead bottom border offset 4px below, labeled 'DÉCOUVRIR MITI NAVI'."

    - "Build a centered editorial section opener: 60px top padding on linen #e6dece. Centered Times 14px eyebrow in #999999, tracking 4.0px, uppercase, reading 'MITI NAVI'. Below it, a Voyage 46px heading in #000e13, line-height 0.94, reading 'Un voilier selon vos envies'. A 60px-wide 1px #232323 hairline centered 30px below the heading."

    - "Build a dark image window: #000e13 filled container, 100% container width, with a full-bleed photograph of a yacht interior. No border-radius, no shadow. A 24px internal padding frame separates the image from the container edges. Below the dark block, a GT Pressura Mono 14px caption in #232323, tracking 1.4px, reading 'Le pont principal — 38m² de teck massif'."

    - "Build a vertical side tab: 24px-wide, 200px-tall strip pinned to the right viewport edge, vertically centered. Fill #000e13. Contains 'UN LIEU REMARQUABLE' in GT Pressura Mono 10px, #e6dece, tracking 0.71px, uppercase, rotated -90° (reads bottom-to-top)."

  similar_brands:

    - "**Aesop** — Same warm, paper-toned canvas (off-white/cream) with monochrome typography and a single restrained accent, treating the website as an editorial object rather than a product catalog"
    - "**Hermès (editions section)** — Large-format serif display headlines paired with monospaced functional type, hairline rules, and a luxury print-magazine cadence across a warm neutral field"
    - "**Riva (riva-yachts.com)** — Marine luxury brand using oversized serif display type, warm neutral backgrounds, and editorial photography with generous whitespace over interactive density"
    - "**Toast (toa.st)** — Same single-accent-color discipline on a warm linen-like canvas with monospaced micro-type and a print-catalogue rhythm"
    - "**Le Labo** — Restrained monochrome interface with editorial serif headlines, a single warm chromatic accent, and a deliberate hand-set, typeset-in-metal feel"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-linen: #e6dece;
          --color-deep-ink: #000e13;
          --color-carbon: #232323;
          --color-soft-ash: #999999;
          --color-warm-apricot: #ffdead;
          --color-obsidian: #000000;
        
          /* Typography — Font Families */
          --font-gt-pressura-mono: 'GT Pressura Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-voyage: 'Voyage', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtsectradisplay: 'GTSectraDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.4;
          --tracking-caption: 0.71px;
          --text-eyebrow: 14px;
          --leading-eyebrow: 1.4;
          --tracking-eyebrow: 4px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.4;
          --tracking-body-lg: 1.6px;
          --text-subheading: 26px;
          --leading-subheading: 1.2;
          --text-heading: 46px;
          --leading-heading: 0.94;
          --text-heading-lg: 72px;
          --leading-heading-lg: 0.92;
          --text-display: 130px;
          --leading-display: 0.9;
          --text-display-xl: 180px;
          --leading-display-xl: 0.9;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-60: 60px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 60px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-linen-canvas: #e6dece;
          --surface-card-surface: #e6dece;
          --surface-image-inset: #000e13;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-linen: #e6dece;
          --color-deep-ink: #000e13;
          --color-carbon: #232323;
          --color-soft-ash: #999999;
          --color-warm-apricot: #ffdead;
          --color-obsidian: #000000;
        
          /* Typography */
          --font-gt-pressura-mono: 'GT Pressura Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-voyage: 'Voyage', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtsectradisplay: 'GTSectraDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.4;
          --tracking-caption: 0.71px;
          --text-eyebrow: 14px;
          --leading-eyebrow: 1.4;
          --tracking-eyebrow: 4px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.4;
          --tracking-body-lg: 1.6px;
          --text-subheading: 26px;
          --leading-subheading: 1.2;
          --text-heading: 46px;
          --leading-heading: 0.94;
          --text-heading-lg: 72px;
          --leading-heading-lg: 0.92;
          --text-display: 130px;
          --leading-display: 0.9;
          --text-display-xl: 180px;
          --leading-display-xl: 0.9;
        
          /* Spacing */
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-60: 60px;
        }