joby_aviation___style_reference:
  info: "> Golden hour cockpit over a sleeping city — every screen is a window seat."

  theme: "light"

  info: "Joby Aviation's design language is cinematic aviation editorial: full-bleed golden-hour photography carries the narrative, with a warm parchment canvas (#f5f4df) and near-black ink (#0e1620) doing all the structural work. The interface stays minimal and almost invisible so the imagery does the persuading — text overlays float over photographs with thin left-border accents rather than boxed containers. Vivid electric blue (#007ae5) appears only as functional punctuation on floating cards, the bottom tour strip, and select icon strokes, while the custom Joby Display type at near-200px sizes whispers the headline rather than shouts it. Components are light, floating, and round; even the tour card and small chips use generous 16px radii, and the navigation is reduced to a centered logomark with a hamburger and a single text link. The system never decorates — every surface is either a photograph, the warm cream canvas, or a single solid blue band."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Parchment Cream | `#f5f4df` | `--color-parchment-cream` | Page canvas, card surfaces, text color on dark imagery — the warm off-white that keeps photography from feeling cold |"
    info: "| Carbon Ink | `#0e1620` | `--color-carbon-ink` | Body text, headings, hairline borders, icon strokes — near-black with a cool blue undertone that pairs with the cream |"
    info: "| Pale Sky | `#c1dfef` | `--color-pale-sky` | Soft secondary surface wash, subtle section backgrounds when cream needs contrast |"
    info: "| Shadow Khaki | `#abab9c` | `--color-shadow-khaki` | Warm gray used in card box-shadow tinting — gives elevation a warm cast rather than a cold blue |"
    info: "| Electric Blue | `#007ae5` | `--color-electric-blue` | Blue wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color |"
    info: "| Deep Cobalt | `#1c3f99` | `--color-deep-cobalt` | Secondary brand surface for navigation bars and accent fills — darker register of the blue for layering |"
    info: "| Outlined Action | `#083e6f` | `--color-outlined-action` | Blue accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color |"
    info: "| Sunset Orange | `#eb6110` | `--color-sunset-orange` | Warm accent fill for decorative highlights and select illustration elements — echoes the golden-hour photography palette |"
    info: "| Peach Glow | `#ffd9c9` | `--color-peach-glow` | Soft warm surface accent, peachy wash that harmonizes with the sunset photography |"
    info: "| Signal Blue | `#319fff` | `--color-signal-blue` | Brighter blue accent for small icon and illustration highlights — lighter pop than the primary Electric Blue |"

  tokens___typography:

    jobydisplay___display_headlines_and_hero_text__sizes_scale_dramatically_from_40px_to_207px_with_tight_tracking__0_03em_at_the_largest_sizes___the_near_200px_display_weight_is_the_signature__whisper_light_at_colossal_scale__the_opposite_of_typical_bold_hero_convention__used_for_hero_copy__skip_traffic__time_to_fly__and_section_display_headlines_____font_jobydisplay:
      - "**Substitute:** Inter Display or a geometric grotesque with low contrast and generous x-height"
      - "**Weights:** 500, 550"
      - "**Sizes:** 10px, 18px, 24px, 28px, 40px, 48px, 64px, 80px, 141px, 207px"
      - "**Line height:** 1.00, 1.05, 1.20"
      - "**Letter spacing:** -0.0300em, -0.0200em, -0.0100em"
      - "**Role:** Display headlines and hero text. Sizes scale dramatically from 40px to 207px with tight tracking (-0.03em at the largest sizes) — the near-200px display weight is the signature: whisper-light at colossal scale, the opposite of typical bold-hero convention. Used for hero copy ('Skip traffic. Time to fly.') and section display headlines."

    jobytext___all_body_copy__navigation__badges__footer__and_inline_links__the_450_weight_is_distinctive___a_custom_intermediate_weight_between_regular_and_medium_that_gives_body_text_a_subtly_heavier_presence_than_a_standard_400__tight_letter_spacing__0_01_to__0_02em_even_at_body_sizes_reinforces_the_display_font_s_compressed_character_____font_jobytext:
      - "**Substitute:** Inter or a humanist sans with similar weight gradations"
      - "**Weights:** 400, 450, 500, 550"
      - "**Sizes:** 12px, 14px, 16px, 18px"
      - "**Line height:** 0.89, 1.00, 1.20, 1.30, 1.40"
      - "**Letter spacing:** -0.0200em, -0.0100em"
      - "**Role:** All body copy, navigation, badges, footer, and inline links. The 450 weight is distinctive — a custom intermediate weight between Regular and Medium that gives body text a subtly heavier presence than a standard 400. Tight letter-spacing (-0.01 to -0.02em) even at body sizes reinforces the display font's compressed character."

    joby_sans_display___micro_display_usage_at_12px_for_labels_and_tags_that_need_display_type_personality_at_small_scale____0_03em_tracking_gives_these_tiny_labels_the_same_compressed_character_as_the_200px_headlines____font_joby_sans_display:
      - "**Substitute:** Same family as jobyDisplay at 12px"
      - "**Weights:** 500"
      - "**Sizes:** 12px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** -0.0300em"
      - "**Role:** Micro-display usage at 12px for labels and tags that need display-type personality at small scale — -0.03em tracking gives these tiny labels the same compressed character as the 200px headlines"

    arial___system_fallback_for_button_text_and_icon_adjacent_micro_copy_where_system_font_rendering_is_preferred____font_arial:
      - "**Substitute:** Arial"
      - "**Weights:** 400"
      - "**Sizes:** 13px"
      - "**Line height:** 1.20"
      - "**Role:** System fallback for button text and icon-adjacent micro-copy where system font rendering is preferred"

    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.3 | -0.14px | `--text-body-sm` |"
      info: "| body | 16px | 1.4 | -0.16px | `--text-body` |"
      info: "| body-lg | 18px | 1.3 | -0.18px | `--text-body-lg` |"
      info: "| subheading | 28px | 1.2 | -0.56px | `--text-subheading` |"
      info: "| heading-sm | 40px | 1.05 | -1.2px | `--text-heading-sm` |"
      info: "| heading | 64px | 1.05 | -1.92px | `--text-heading` |"
      info: "| heading-lg | 80px | 1 | -2.4px | `--text-heading-lg` |"
      info: "| display | 207px | 1 | -6.21px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 80 | 80px | `--spacing-80` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 16px |"
      info: "| buttons | 8px |"
      info: "| asymmetric | 147.6px |"
      info: "| promoCards | 160px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 113px"
      - "**Card padding:** 40px"
      - "**Element gap:** 8-32px"

  components:

    floating_promo_card:
      role: "Promotional overlay card for campaign announcements (e.g. 'Electric Skies Tour')"

      info: "Electric Blue (#007ae5) solid background, white text, 16px corner radius, ~32px padding. Positioned floating top-right of hero. Contains a small kicker label, a display-size headline, a thin white close-button circle, and a miniature product illustration. The card reads as a single bold chromatic moment against the dark photographic hero."

    cinematic_full_bleed_hero:
      role: "First-viewport hero using full-bleed photography"

      info: "Edge-to-edge photographic image with no visible container. White or cream headline text overlaid at the lower-center in jobyDisplay at 64-80px, weight 500, tracking -0.03em. The text floats directly on the image with no card or background plate — the photography provides the contrast."

    bordered_caption_block:
      role: "Short editorial text overlay on photography"

      info: "Body text at 16px in Parchment Cream (#f5f4df) over dark imagery. Marked by a 2-4px vertical left-border accent line in cream. No background fill, no padding box — just the text and a thin guide line. Max width ~320px, positioned lower-left. The left border is the only structural element."

    centered_logomark_navigation:
      role: "Minimal top navigation bar"

      info: "Transparent bar over hero photography. Joby wordmark and aviation mark centered in white. Hamburger icon (two horizontal lines) at far left in white. A single 'Investors ↗' text link at far right in white, jobyText 16px weight 500. No background fill, no shadow, no border — the bar dissolves into the photograph."

    saturated_banner_strip:
      role: "Full-width tour/event announcement band"

      info: "Full-bleed Electric Blue (#007ae5) horizontal band, ~60-80px tall. Centered white text in jobyText 16px weight 500, tracking -0.01em. Single line of copy. No border, no rounded corners — sits as a sharp color transition at the page base."

    outlined_icon_button:
      role: "Ghost/secondary action control"

      info: "No background fill. Outlined Action (#083e6f) border at 1-2px, 8px radius. Icon centered in Outlined Action color. Sized approximately 40-48px square. This is the preferred action pattern: a chromatic border replaces a filled background so the control stays visually quiet against the cream canvas or photography."

    warm_card_surface:
      role: "Content card on the cream canvas"

      info: "Parchment Cream (#f5f4df) background with box-shadow in Shadow Khaki (#abab9c) at low opacity, giving the elevation a warm cast rather than a cold blue. 16px corner radius. 40px internal padding. Hairline border in Carbon Ink (#0e1620) at low opacity sometimes replaces the shadow for flatter compositions."

    asymmetric_rounded_container:
      role: "Editorial content block with extreme corner curvature"

      info: "Uses 160px or 147.6px corner radii — the intentionally asymmetric, near-circular rounding that signals a featured/promotional treatment. Always used for premium or hero-adjacent content. Carbon Ink text on Parchment Cream or Electric Blue fill."

    footer_link_list:
      role: "Footer navigation columns"

      info: "jobyText 14px weight 450 in Carbon Ink, 15-26px horizontal padding between items, 32px vertical rhythm. Underlined link state in Outlined Action (#083e6f) at 14px. No visible dividers or backgrounds — the footer reads as a clean text grid."

    hairline_divider:
      role: "Section separator"

      info: "1px horizontal line in Carbon Ink (#0e1620) at ~10-20% opacity, or in Parchment Cream at similar opacity when over dark imagery. Used to separate content sections without adding visual weight."

    dark_image_overlay:
      role: "Text contrast layer on photography"

      info: "No actual overlay — text uses pure Parchment Cream (#f5f4df) at 16.4:1 contrast against the darkest parts of the photograph. The contrast ratio is designed into the photography, not achieved with a scrim."

  do_s_and_don_ts:

    do:
      - "Use jobyDisplay at 48-207px with tracking between -0.01em and -0.03em for all headlines — the compressed, large-scale typography is the brand's primary signature"
      - "Default all content surfaces to Parchment Cream (#f5f4df) with Carbon Ink (#0e1620) text — the warm/cool duotone is the structural backbone"
      - "Reserve Electric Blue (#007ae5) for floating cards, the bottom banner strip, and single-color accent moments — never tile it across large areas"
      - "Use outlined actions with Outlined Action (#083e6f) borders at 8px radius instead of filled buttons — the ghost control pattern keeps the interface quiet against photography"
      - "Apply 16px radius to standard cards and 160px radius to featured/promotional containers — the radius itself signals content importance"
      - "Float body text directly over photography with a 2-4px left-border accent in cream rather than wrapping it in a card or scrim"
      - "Maintain generous spacing: 40px card padding, 32px vertical rhythm, 8-32px element gaps — the spacious density lets the photography breathe"

    don_t:
      - "Do not use filled rectangular CTA buttons — the system uses outlined actions, floating cards, or text links instead"
      - "Do not apply standard gray or blue-tinted drop shadows — the only shadow is the warm khaki glow on cream cards"
      - "Do not use bold (700+) weight for headlines — jobyDisplay's signature is weight 500-550 at extreme sizes, not heavy weight at moderate sizes"
      - "Do not add dark scrims or background plates behind text on photography — the contrast is built into the image itself"
      - "Do not use multiple saturated colors in one composition — Electric Blue, Cobalt, and Sunset Orange each appear in isolated moments, never together"
      - "Do not apply system fonts (Arial, Helvetica) to headlines or body — they are fallback only for 13px button text"
      - "Do not add gradients, patterns, or decorative backgrounds — every surface is either solid cream, solid blue, or a photograph"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Imagery Layer | `#0e1620` | Full-bleed photography and dark cinematic backgrounds — the dominant first impression |"
    info: "| 1 | Parchment Canvas | `#f5f4df` | Default content surface for all editorial text sections, cards, and structural blocks |"
    info: "| 2 | Pale Sky Wash | `#c1dfef` | Subtle alternative surface for section contrast against the cream |"
    info: "| 3 | Electric Blue Band | `#007ae5` | Saturated accent surface for the bottom tour strip and floating promo card |"
    info: "| 4 | Cobalt Depth | `#1c3f99` | Darker blue layer for navigation chrome and stacked accent surfaces |"

  elevation:

    - "**Warm Card Surface:** `0px 0px 40px 0px rgba(171, 171, 156, 0.4)`"

  imagery:

    info: "Photography is the primary visual asset and dominates the page. All imagery is cinematic, golden-hour aerial photography shot from inside an eVTOL cockpit looking out over a sleeping city skyline. The treatment is full-bleed, no rounded corners, no masks — images extend to all edges of the viewport. The lighting is consistently warm sunset/dawn with deep amber highlights and cool blue-grey city silhouettes, giving every image a built-in duotone that matches the Parchment Cream and Carbon Ink palette. Product illustrations appear only inside the floating Electric Skies promo card (small eVTOL render in white/blue line art). No lifestyle photography, no people in staged settings — the single human figure is a silhouetted passenger in the cockpit, visible only as a dark shape against the window. The photography is documentary in feel, not aspirational: the viewer is a passenger, not a spectator."

  layout:

    info: "The page is a full-bleed single-column experience with no visible grid or sidebar. The hero occupies the full viewport with centered text overlaid on the photograph. Below the hero, a saturated Electric Blue banner strip spans the full width. Content sections alternate between full-bleed photography (with text overlays) and the warm cream canvas. A centered logomark navigation sits at the top with a hamburger left and a single text link right — no horizontal nav bar, no mega-menu. Text blocks are left-aligned with a thin vertical accent border, max-width ~320px, positioned lower-left of the frame. The layout rhythm is: full-bleed photo → cream text section → full-bleed photo → cream text section, with no visible card containers or boxed layouts. The generous section gap (113px) and the spacious density make the page feel like flipping through a premium print magazine rather than navigating a website."

  agent_prompt_guide:

    primary_action: "#083e6f (outlined action border)"
    create_an_outlined_primary_action: "Transparent background, #083e6f border and text, 9999px radius, compact pill padding. Use it for the main CTA instead of a filled button."
    info: "QUICK COLOR REFERENCE:"
    - "text: #0e1620 (Carbon Ink)"
    - "background: #f5f4df (Parchment Cream)"
    - "border: #0e1620 (Carbon Ink, hairline at low opacity)"
    - "accent: #007ae5 (Electric Blue)"
    - "floating card / banner surface: #007ae5 (Electric Blue)"
    - "outlined action border: #083e6f (Outlined Action)"

    info: "EXAMPLE COMPONENT PROMPTS:"

    - "Create a floating promo card: 16px corner radius, 32px padding, Electric Blue (#007ae5) background, white kicker label in jobyText 12px weight 500, white display headline in jobyDisplay 28px weight 500, tracking -0.56px, small white close-button circle (24px, 1px white border, no fill)."

    - "Create a hero section: full-bleed photographic background (no overlay), white headline in jobyDisplay at 80px weight 500, tracking -2.4px, positioned lower-center. No card, no background plate, no scrim — text floats directly on the image."

    - "Create a bordered caption block: Parchment Cream (#f5f4df) text in jobyText 16px weight 450, tracking -0.16px, max-width 320px, positioned lower-left over dark imagery, with a 3px vertical left-border accent line in Parchment Cream. No background fill."

    - "Create a content card: Parchment Cream (#f5f4df) background, 16px corner radius, 40px internal padding, box-shadow 0px 0px 40px 0px rgba(171,171,156,0.4). Carbon Ink (#0e1620) body text in jobyText 16px weight 450."

    - "Create a ghost icon button: no background fill, 8px corner radius, 1.5px border in Outlined Action (#083e6f), 44px square, centered icon in Outlined Action color. This is the preferred action pattern — never use a filled rectangular button."

  typography_philosophy:

    info: "The Joby type system runs on two custom families: jobyDisplay for headlines and jobyText for everything else. The signature is contrast through scale, not weight. jobyDisplay is used at weights 500-550 even at 207px — the same weight as body text, just enormous. This is anti-convention: most brands use weight 700-900 to make large headlines feel authoritative, but Joby uses medium weight at extreme scale, which makes the type feel like it's floating rather than planted. The tight tracking (-0.03em at the largest sizes, -0.01em at body) compresses the letterforms and gives the headlines a condensed, aviation-instrument feel. The jobyText 450 weight is a custom intermediate step that gives body copy a subtly heavier presence than standard 400 without crossing into medium territory — this is the weight that makes 16px body text feel intentional rather than default."

  similar_brands:

    - "**Lilium** — Same eVTOL aviation category with full-bleed cinematic photography and minimal UI overlay"
    - "**Archer Aviation** — Same warm/cool duotone palette (cream + deep ink) with single electric blue accent and oversized display headlines"
    - "**Tesla** — Same ghost-button + minimal-chrome approach with full-bleed product photography as the primary visual"
    - "**Rivian** — Same spacious editorial layout with photography-first composition and quiet, restrained UI chrome"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-parchment-cream: #f5f4df;
          --color-carbon-ink: #0e1620;
          --color-pale-sky: #c1dfef;
          --color-shadow-khaki: #abab9c;
          --color-electric-blue: #007ae5;
          --color-deep-cobalt: #1c3f99;
          --color-outlined-action: #083e6f;
          --color-sunset-orange: #eb6110;
          --color-peach-glow: #ffd9c9;
          --color-signal-blue: #319fff;
        
          /* Typography — Font Families */
          --font-jobydisplay: 'jobyDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-jobytext: 'jobyText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-joby-sans-display: 'Joby Sans Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', 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.3;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.4;
          --tracking-body: -0.16px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.3;
          --tracking-body-lg: -0.18px;
          --text-subheading: 28px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.56px;
          --text-heading-sm: 40px;
          --leading-heading-sm: 1.05;
          --tracking-heading-sm: -1.2px;
          --text-heading: 64px;
          --leading-heading: 1.05;
          --tracking-heading: -1.92px;
          --text-heading-lg: 80px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -2.4px;
          --text-display: 207px;
          --leading-display: 1;
          --tracking-display: -6.21px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-w450: 450;
          --font-weight-medium: 500;
          --font-weight-w550: 550;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 113px;
          --card-padding: 40px;
          --element-gap: 8-32px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-full: 147.6px;
          --radius-full-2: 160px;
        
          /* Named Radii */
          --radius-cards: 16px;
          --radius-buttons: 8px;
          --radius-asymmetric: 147.6px;
          --radius-promocards: 160px;
        
          /* Surfaces */
          --surface-imagery-layer: #0e1620;
          --surface-parchment-canvas: #f5f4df;
          --surface-pale-sky-wash: #c1dfef;
          --surface-electric-blue-band: #007ae5;
          --surface-cobalt-depth: #1c3f99;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-parchment-cream: #f5f4df;
          --color-carbon-ink: #0e1620;
          --color-pale-sky: #c1dfef;
          --color-shadow-khaki: #abab9c;
          --color-electric-blue: #007ae5;
          --color-deep-cobalt: #1c3f99;
          --color-outlined-action: #083e6f;
          --color-sunset-orange: #eb6110;
          --color-peach-glow: #ffd9c9;
          --color-signal-blue: #319fff;
        
          /* Typography */
          --font-jobydisplay: 'jobyDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-jobytext: 'jobyText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-joby-sans-display: 'Joby Sans Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', 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.3;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.4;
          --tracking-body: -0.16px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.3;
          --tracking-body-lg: -0.18px;
          --text-subheading: 28px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.56px;
          --text-heading-sm: 40px;
          --leading-heading-sm: 1.05;
          --tracking-heading-sm: -1.2px;
          --text-heading: 64px;
          --leading-heading: 1.05;
          --tracking-heading: -1.92px;
          --text-heading-lg: 80px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -2.4px;
          --text-display: 207px;
          --leading-display: 1;
          --tracking-display: -6.21px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-full: 147.6px;
          --radius-full-2: 160px;
        }