lightship___style_reference:
  info: "> Cinematic open-road diorama. Warm cream gallery walls with oversized landscape photographs pinned at gentle radii, thin black type whispering across the frames, one ember-orange accent breaking the monochrome like a campfire in a meadow."

  theme: "light"

  info: "Lightship is a photography-first editorial system built on a warm cream canvas (#faf6ef) with full-bleed cinematic imagery doing all the storytelling. The UI is deliberately invisible: a single custom geometric sans (F37Bolton) with tight negative tracking, hairline borders, 20px rounded photo cards, and pill-shaped navigation chips. The entire palette is near-monochrome with one warm orange (#fa5c40) reserved as a rare surface accent. Density is generous — large breathing room around elements, 100px section gaps — letting landscape photography and short editorial headlines command attention. No shadows, no gradients, no decorative chrome: the product and the places it goes are the interface."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Warm Cream | `#faf6ef` | `--color-warm-cream` | Primary page canvas, card surfaces — warm off-white replaces stark white to soften the photography-first layout and avoid the cold SaaS feel |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Image borders, elevated card surfaces, contrast panel behind embedded media |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Primary text, hairline borders, icon strokes, navigation typography — the structural anchor of the entire system |"
    info: "| Pebble | `#999999` | `--color-pebble` | Muted body text, secondary borders, disabled states — the one step above placeholder gray |"
    info: "| Driftwood | `#a1a1a1` | `--color-driftwood` | Helper text, low-emphasis captions, subtle dividers |"
    info: "| Mist | `#d9d9d9` | `--color-mist` | Light hairline dividers, nav separators, input borders in resting state |"
    info: "| Ember Orange | `#fa5c40` | `--color-ember-orange` | Orange wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color |"

  tokens___typography:

    f37bolton___sole_typeface_across_the_entire_system__custom_geometric_sans_with_tight_aperture_and_industrial_dna__weight_400_for_body__700_only_for_display_headlines_and_the_wordmark__tracking_runs__0_05em_at_display_sizes_down_to__0_03em_at_body__giving_headlines_a_compressed_editorial_feel_and_body_text_a_quiet__compact_rhythm____font_f37bolton:
      - "**Substitute:** Söhne, Inter, or DM Sans — pick the variant with the most geometric (non-humanist) character to preserve the industrial tone"
      - "**Weights:** 400, 700"
      - "**Sizes:** 12, 14, 16, 20, 22, 24, 34, 48, 64, 72, 75px"
      - "**Line height:** 1.00, 1.20, 1.25"
      - "**Letter spacing:** -0.05em at 48px and above, -0.03em at 34px and below"
      - "**Role:** Sole typeface across the entire system. Custom geometric sans with tight aperture and industrial DNA. Weight 400 for body, 700 only for display headlines and the wordmark. Tracking runs -0.05em at display sizes down to -0.03em at body, giving headlines a compressed editorial feel and body text a quiet, compact rhythm"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | -0.36px | `--text-caption` |"
      info: "| body-sm | 14px | 1.2 | -0.42px | `--text-body-sm` |"
      info: "| body | 16px | 1.25 | -0.48px | `--text-body` |"
      info: "| body-lg | 20px | 1.25 | -0.6px | `--text-body-lg` |"
      info: "| subheading | 22px | 1.2 | -0.66px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | -0.72px | `--text-heading-sm` |"
      info: "| heading | 34px | 1.2 | -1.02px | `--text-heading` |"
      info: "| heading-lg | 48px | 1 | -2.4px | `--text-heading-lg` |"
      info: "| display | 72px | 1 | -3.6px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 100 | 100px | `--spacing-100` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 20px |"
      info: "| images | 20px |"
      info: "| inputs | 100px |"
      info: "| buttons | 100px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 100px"
      - "**Card padding:** 24px"
      - "**Element gap:** 16px"

  components:

    full_bleed_hero_frame:
      role: "Cinematic opening image spanning the entire viewport"

      info: "100vw × 100vh image, no border-radius, no overlay tint. Text sits directly on the photograph in white (#ffffff) at 72px / 75px display weight 400, letter-spacing -3.6px, line-height 1.0. Headline and supporting phrase anchor to opposite edges of the viewport (left + right split) to create compositional tension against the centered image."

    navigation_bar:
      role: "Minimal top bar over hero and subsequent sections"

      three_zone_layout: "left cluster (hamburger icon + nav links: AE1, Technology, Specs), centered wordmark (LIGHTSHIP at 16px weight 400, letter-spacing 0.4em for the brand mark treatment), right cluster (Experience, Buy it now as text links). All type at 14px, weight 400, #ffffff over hero / #000000 over cream sections. No background fill — sits transparently over content."

    pill_navigation_link:
      role: "Text link styled as a rounded chip"

      info: "14px F37Bolton weight 400, no background fill, no border. Sits inline within the nav bar. The 100px radius token governs interactive elements (links, buttons) when a pill shape is needed."

    photo_mosaic_card:
      role: "Asymmetrically arranged editorial photo block"

      info: "Photograph framed with 20px border-radius, no border, no shadow. Cards are placed in an off-grid collage layout (not equal columns) at varying sizes and vertical offsets. The 20px radius is the signature — it softens editorial photography without looking app-like or corporate."

    editorial_headline_pair:
      role: "Two-line complementary headline layout"

      info: "Left-aligned statement ("

    hamburger_menu_trigger:
      role: "Mobile/utility menu opener"

      info: "Two thin horizontal lines, #ffffff over hero / #000000 over cream, 2px stroke weight, 24px wide. Sits in a pill-shaped touch target (100px radius) with 12px padding all sides."

    scroll_indicator:
      role: "Fixed-bottom-right prompt to continue reading"

      info: "Small downward arrow icon (1.5px stroke, #ffffff) above 12px caption text ("

    ghost_text_button:
      role: "Secondary action link (Buy it now, Experience)"

      info: "Text-only, no fill, no border. 14px F37Bolton weight 400, #000000 or #ffffff depending on surface. Underline appears on hover. This is the system's only interactive pattern — there are no filled buttons anywhere on the site."

    hairline_divider:
      role: "Section separator"

      info: "1px solid #d9d9d9 or #000000 horizontal rule. Used sparingly — the system prefers whitespace and full-bleed image transitions over visible dividers."

    pill_input_field:
      role: "Form input (newsletter, configuration)"

      info: "100px border-radius, 1px border in #d9d9d9 resting state, focus shifts border to #000000. Cream or white fill, 16px F37Bolton weight 400, generous 20px horizontal padding."

  do_s_and_don_ts:

    do:
      - "Let photography fill the viewport — use full-bleed images (100vw) with no border-radius for hero and section breaks"
      - "Use 20px border-radius on all framed photographs and content cards — this is the system's signature softness"
      - "Use 100px border-radius for all interactive elements (nav links, buttons, inputs) to create the pill geometry"
      - "Set type at -0.05em letter-spacing on anything 48px and above, -0.03em on 34px and below — tight tracking is non-negotiable for the editorial feel"
      - "Keep the entire UI monochromatic — black text, white/cream surfaces, hairline borders. The only chromatic color in the system is #fa5c40, used as a surface accent strip, not as a button fill"
      - "Separate hero text to opposite viewport edges (left + right split) at 72–75px display weight to create compositional tension across the photograph"
      - "Use whitespace as the primary separator between sections — 100px vertical gaps, no visible dividers needed"

    don_t:
      - "Do not use filled buttons or saturated CTA backgrounds — the system has no primary action color; interactions are ghost text links and pill nav items"
      - "Do not introduce shadows or elevation effects — the design is intentionally flat, relying on border-radius and whitespace for depth"
      - "Do not use gradients anywhere — surfaces are solid (cream, white, black, or ember orange)"
      - "Do not use rounded type, decorative serifs, or display scripts — F37Bolton's geometric sans is the only voice"
      - "Do not place content in equal-width grid columns — photo layouts use asymmetric, offset collage positioning"
      - "Do not use #ffffff as the page background — the warm cream #faf6ef is the canvas; pure white is reserved for card elevation"
      - "Do not use the ember orange #fa5c40 at large surface areas — it should appear only as small accent strips or focused-state washes"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#faf6ef` | Full-page warm cream background |"
    info: "| 2 | Card | `#ffffff` | Elevated white surface for content cards, image frames, embedded panels |"
    info: "| 3 | Accent Wash | `#fa5c40` | Rare ember-orange highlight strip or focused-state surface |"

  imagery:

    info: "Photography is the dominant visual element — full-bleed cinematic landscape shots (mountains, meadows, open roads) serve as hero backdrops, while asymmetric collages of lifestyle and product photography populate content sections. All photographs share a warm, slightly desaturated treatment that complements the cream canvas. Product shots show the trailer in use: towed on mountain roads, parked at campsites, integrated into family life. No illustrations, no 3D renders, no abstract graphics. Images are framed with 20px border-radius, never sharp-cornered, and are placed in off-grid compositions with varying vertical offsets. Icons are minimal thin-line (1.5–2px stroke) monochrome."

  layout:

    info: "Hero is full-viewport (100vw × 100vh) with a single cinematic photograph and a two-column headline split (left statement + right statement at opposite viewport edges). The navigation bar sits transparently over the hero with three zones (left nav / centered wordmark / right utility links). Below the hero, the layout shifts to an asymmetric photo mosaic on the warm cream canvas — images of varying sizes offset vertically rather than aligned to a strict grid, with generous 100px vertical breathing room between major sections. Content blocks alternate between editorial two-column (text + image) and pure photography passages. The layout is max-width contained at 1440px for content areas but allows sections to break to full-bleed when the visual demands it. There is no sidebar, no sticky header that persists aggressively, and no footer chrome visible in the initial scroll."

  agent_prompt_guide:

  quick_color_reference_n__canvas__faf6ef_warm_cream_n__card_surface__ffffff_pure_white_n__primary_text__000000_n__hairline_border__d9d9d9_n__muted_text__999999_n__accent__fa5c40_ember_orange___surface_washes_only_n__primary_action__no_distinct_cta_color:

  similar_brands:

    - "**Patagonia** — Same full-bleed landscape photography as the primary visual, warm/natural color palette, minimal text overlay, editorial headline weight on product pages"
    - "**Airstream** — Same product-lifestyle photography approach with cinematic outdoor settings, generous whitespace, and near-monochrome UI that lets the product imagery lead"
    - "**Rivian** — Same premium adventure-brand visual language: large display type with tight tracking, photography-first layout, minimal UI chrome, warm accent restraint"
    - "**Fellow (fellowproducts.com)** — Same warm cream canvas, custom geometric sans with tight tracking, rounded product photography, and near-invisible UI chrome that lets product imagery dominate"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-warm-cream: #faf6ef;
          --color-pure-white: #ffffff;
          --color-obsidian: #000000;
          --color-pebble: #999999;
          --color-driftwood: #a1a1a1;
          --color-mist: #d9d9d9;
          --color-ember-orange: #fa5c40;
        
          /* Typography — Font Families */
          --font-f37bolton: 'F37Bolton', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: -0.36px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: -0.42px;
          --text-body: 16px;
          --leading-body: 1.25;
          --tracking-body: -0.48px;
          --text-body-lg: 20px;
          --leading-body-lg: 1.25;
          --tracking-body-lg: -0.6px;
          --text-subheading: 22px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.66px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.72px;
          --text-heading: 34px;
          --leading-heading: 1.2;
          --tracking-heading: -1.02px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -2.4px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -3.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-100: 100px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 100px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-2xl: 20px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-cards: 20px;
          --radius-images: 20px;
          --radius-inputs: 100px;
          --radius-buttons: 100px;
        
          /* Surfaces */
          --surface-canvas: #faf6ef;
          --surface-card: #ffffff;
          --surface-accent-wash: #fa5c40;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-warm-cream: #faf6ef;
          --color-pure-white: #ffffff;
          --color-obsidian: #000000;
          --color-pebble: #999999;
          --color-driftwood: #a1a1a1;
          --color-mist: #d9d9d9;
          --color-ember-orange: #fa5c40;
        
          /* Typography */
          --font-f37bolton: 'F37Bolton', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: -0.36px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: -0.42px;
          --text-body: 16px;
          --leading-body: 1.25;
          --tracking-body: -0.48px;
          --text-body-lg: 20px;
          --leading-body-lg: 1.25;
          --tracking-body-lg: -0.6px;
          --text-subheading: 22px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.66px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.72px;
          --text-heading: 34px;
          --leading-heading: 1.2;
          --tracking-heading: -1.02px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -2.4px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -3.6px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-100: 100px;
        
          /* Border Radius */
          --radius-2xl: 20px;
          --radius-full: 100px;
        }