area_17___style_reference:
  info: "> Monochrome editorial struck yellow — a typographic monolith on white marble interrupted by a single flash of electric yellow."

  theme: "light"

  info: "AREA 17 operates as a monochrome editorial canvas with typographic confidence as its primary visual language. The system is deliberately austere: near-black text on pure white, hairline borders, flat surfaces, and almost no color — just one electric yellow that appears as a single bright accent against the grayscale field. Headlines do the heavy lifting through scale and tight tracking, using Suisse Intl at display sizes to create an editorial, almost magazine-like voice. Layout breathes with generous whitespace punctuated by full-bleed cinematic content blocks that break the typographic grid. The aesthetic reads as a design agency's own portfolio: restrained, opinionated, and confident enough to leave most of the page empty."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, input fields, inverse text on dark surfaces |"
    info: "| Graphite | `#1a1a1a` | `--color-graphite` | Primary text, headlines, body copy, nav links — near-black warmth over pure black |"
    info: "| True Black | `#000000` | `--color-true-black` | Logo mark fill, select borders, deep shadow tone |"
    info: "| Hairline | `#e6e6e6` | `--color-hairline` | Borders, dividers, outlined control strokes, card edges |"
    info: "| Fog | `#f2f2f2` | `--color-fog` | Secondary card surfaces, disabled button fills, subtle elevation layers |"
    info: "| Cream Stone | `#f2ede9` | `--color-cream-stone` | Warm accent card surface — the only chromatic neutral, used for editorial feature cards |"
    info: "| Muted | `#949494` | `--color-muted` | Secondary link color, meta text, subdued captions |"
    info: "| Dim | `#757575` | `--color-dim` | Tertiary text, low-priority helper copy |"
    info: "| Disabled | `#cccccc` | `--color-disabled` | Disabled button backgrounds, inactive control fills |"
    info: "| Electric Yellow | `#fdf313` | `--color-electric-yellow` | Announcement bar, single chromatic accent across the system — the only color permitted to break monochrome |"

  tokens___typography:

    ui_sans_serif___ui_sans_serif___detected_in_extracted_data_but_not_described_by_ai____font_ui_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.5"
      - "**Role:** ui-sans-serif — detected in extracted data but not described by AI"

    suisse_intl___primary_brand_typeface_for_headlines__navigation__body__and_ui__the_55px_display_at_line_height_1_10_with__0_015em_tracking_is_the_signature_voice___editorial_weight__magazine_tight_rhythm__weight_500_is_reserved_for_nav_links_and_select_emphasis_____font_suisse_intl:
      - "**Substitute:** Inter, Söhne, or GT America for paid alternatives; Manrope as a free editorial-adjacent substitute"
      - "**Weights:** 400, 500"
      - "**Sizes:** 16px, 20px, 32px, 42px, 55px"
      - "**Line height:** 1.10 / 1.15 / 1.40"
      - "**Letter spacing:** -0.015em at 55px, -0.014em at 42px, -0.013em at 32px, 0.004em at small sizes"
      - "**Role:** Primary brand typeface for headlines, navigation, body, and UI. The 55px display at line-height 1.10 with -0.015em tracking is the signature voice — editorial weight, magazine-tight rhythm. Weight 500 is reserved for nav links and select emphasis."

    system_sans_serif___secondary_ui_text__system_fallbacks__form_labels__used_sparingly___suisse_intl_is_the_workhorse__system_stack_appears_for_form_fields_and_accessibility_fallbacks_where_neutral_rendering_matters_____font_system_sans_serif:
      - "**Substitute:** system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
      - "**Weights:** 400"
      - "**Sizes:**"
      - "**Line height:** 1.50"
      - "**Role:** Secondary UI text, system fallbacks, form labels. Used sparingly — Suisse Intl is the workhorse. System stack appears for form fields and accessibility fallbacks where neutral rendering matters."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 16px | 1.5 | 0.06px | `--text-caption` |"
      info: "| subheading | 20px | 1.4 | -0.28px | `--text-subheading` |"
      info: "| heading-sm | 32px | 1.15 | -0.42px | `--text-heading-sm` |"
      info: "| heading | 42px | 1.15 | -0.59px | `--text-heading` |"
      info: "| display | 55px | 1.1 | -0.82px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    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: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 192 | 192px | `--spacing-192` |"
      info: "| 232 | 232px | `--spacing-232` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 4px |"
      info: "| cards | 8px |"
      info: "| pills | 9999px |"
      info: "| images | 8px |"
      info: "| inputs | 8px |"
      info: "| buttons | 8px |"

    layout:

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

  components:

    announcement_bar:
      role: "Sticky bottom notification strip — the system's sole chromatic element"

      info: "Fixed to viewport bottom, full-width. Background #fdf313 Electric Yellow, text #1a1a1a in Suisse Intl 16px/1.5. Single line of text with optional arrow/link. Height approximately 40-48px, padding 12px 24px. This bar is the brand's signature: one flash of color in an otherwise monochrome system."

    top_navigation:
      role: "Minimal horizontal nav bar with logo left, links right"

      info: "Transparent or white background, no border. Logo 'A/' at left in True Black, Suisse Intl bold (custom logotype, not a font glyph). Right-aligned links in Suisse Intl 16px weight 500, color #1a1a1a. Nav height approximately 64-84px, horizontal padding 24-48px. No background fill — the nav sits directly on the white canvas."

    editorial_headline:
      role: "Large display text that carries the brand voice"

      info: "Suisse Intl 55px / 42px at line-height 1.10-1.15, weight 400, color #1a1a1a, letter-spacing -0.015em. Left-aligned, max-width approximately 900px. No underline, no decorative elements — the typography IS the design. Often appears in two-to-three line stacks with natural sentence breaks."

    ghost_text_link:
      role: "Standard inline link and nav link treatment"

      info: "No background, no border. Text in Suisse Intl 16px weight 500, color #1a1a1a. Hover state: color shifts to #949494 Muted or underline appears. This is the dominant interactive element — the system avoids filled buttons in favor of typographic links."

    outlined_button:
      role: "Secondary action with hairline border"

      info: "Background transparent, border 1px solid #1a1a1a, radius 8px. Text in Suisse Intl 16px weight 500, color #1a1a1a. Padding 16px top/bottom, 24px left/right. Hover: inverts to #1a1a1a background with #ffffff text."

    solid_neutral_button:
      role: "Primary action button using Fog surface"

      info: "Background #f2f2f2, border none, radius 8px. Text in Suisse Intl 16px weight 500, color #1a1a1a. Padding 16px 24px. The system avoids heavy chromatic buttons — primary actions are quiet, almost ghosted."

    fog_card:
      role: "Quiet elevated content block"

      info: "Background #f2f2f2, border none, radius 8px. Padding 16-24px. No shadow — the system uses surface color shifts instead of elevation. Contains text, links, or media at a lower visual weight than the canvas."

    cream_feature_card:
      role: "Editorial accent card with warm tone"

      info: "Background #f2ede9 Cream Stone, border none, radius 8px. Padding 24px. Used sparingly for featured content blocks — the warm tone is the only chromatic neutral and signals editorial importance. No shadow."

    text_input:
      role: "Minimal form field"

      info: "Background #ffffff, border 1px solid #e6e6e6 Hairline, radius 8px. Padding 12px 16px. Text in Suisse Intl 16px weight 400, color #1a1a1a. Placeholder color #949494. Focus state: border darkens to #1a1a1a. No floating labels, no decorative icons."

    full_bleed_video_block:
      role: "Cinematic content section breaking the typographic grid"

      info: "Edge-to-edge media, no border, no radius — bleeds to viewport edges. Aspect ratio 16:9 or wider. No overlay text, no captions inside the frame. Functions as a visual exhale between typographic sections. Content is documentary/cinematic photography or video, not stock imagery."

    pill_element:
      role: "Occasional rounded tag or status indicator"

      info: "Radius 9999px (full pill). Background #f2f2f2 or transparent, text Suisse Intl 16px weight 500. Rarely used — the system prefers square 8px corners. Pills appear only for status indicators or tag-like metadata."

    footer:
      role: "Minimal closing block with links and meta"

      info: "White or #f2f2f2 background, no heavy decoration. Links in Suisse Intl 16px weight 500, color #1a1a1a. Generous padding (128px+ top/bottom) to create visual closure. Same nav links may repeat; copyright text in #949494 Muted."

  do_s_and_don_ts:

    do:
      - "Use Suisse Intl at 55px/1.10 with -0.015em tracking for editorial headlines — the tight rhythm is the signature"
      - "Maintain the monochrome palette across all pages; #fdf313 Electric Yellow is the only chromatic color and must appear as a singular accent, not decoration"
      - "Use 8px radius as the default for cards, buttons, and inputs — it's the system's geometric constant"
      - "Use #e6e6e6 Hairline for all borders and dividers; never use heavier borders or decorative strokes"
      - "Let the layout breathe with section gaps of 80px-192px; whitespace is a design element, not empty space"
      - "Use ghost text links and outlined buttons for most interactions; reserve filled buttons for primary actions only"
      - "Left-align editorial headlines and body copy; the system reads as a publication, not a centered marketing page"

    don_t:
      - "Never add chromatic colors beyond #fdf313 Electric Yellow; the system is intentionally 0% colorful outside the accent bar"
      - "Never use shadows, glows, or blur effects for elevation; use surface color shifts (#ffffff → #f2f2f2) instead"
      - "Never use system-ui as the primary typeface; Suisse Intl is the workhorse and defines the brand voice"
      - "Never center-align body text or headlines; left-alignment is non-negotiable"
      - "Never use border-radius values other than 4px (nav), 8px (default), or 9999px (pills); the system avoids 12px, 16px, or custom radii on interactive elements"
      - "Never fill pages with imagery; full-bleed content blocks are cinematic punctuation, not wallpaper"
      - "Never use letter-spacing values looser than normal on body text; Suisse Intl wants tight tracking at all sizes, with 0.004em as the loosest allowed"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#ffffff` | Primary page background |"
    info: "| 2 | Fog Surface | `#f2f2f2` | Secondary card backgrounds, quiet elevated panels |"
    info: "| 3 | Cream Surface | `#f2ede9` | Warm editorial card — the only chromatic neutral surface |"
    info: "| 4 | Yellow Accent | `#fdf313` | Announcement bar, the system's sole chromatic surface |"
    info: "| 5 | Graphite | `#1a1a1a` | Dark inverse surface (not used as a page background — reserved for dark text only) |"

  imagery:

    info: "Full-bleed cinematic photography and video dominate the visual storytelling — documentary-style stills, wide environmental shots, and high-production film content that bleeds to viewport edges. The hero uses a full-bleed film or photograph with no overlay text, no rounded corners, no decorative framing. Imagery serves as visual exhalation between typographic sections: the page alternates between dense editorial text and immersive moving-image moments. The photography style is cinematic, naturalistic, and human-centered — not product shots, not stock imagery, not illustrations. No iconography beyond minimal text-based marks."

  layout:

    info: "Full-bleed edge-to-edge sections with no max-width container on media blocks. The typographic sections use an implicit left-aligned grid with max-width around 900px for text blocks. The hero pattern is a large left-aligned editorial headline (3 lines) followed by generous whitespace, then a full-bleed video/photography block. Section rhythm alternates: quiet white space → typographic headline → full-bleed media → whitespace. The navigation is a minimal top bar with logo left and 5-6 text links right — no background, no border, no hamburger. The announcement bar is fixed to the viewport bottom. Content density is low; the page favors breathing room and single-column reading over multi-column grids or card matrices."

  agent_prompt_guide:

    quick_color_reference:
    - "Text: #1a1a1a"
    - "Background: #ffffff"
    - "Surface (secondary): #f2f2f2"
    - "Border/hairline: #e6e6e6"
    - "Accent: #fdf313"
    - "Muted text: #949494"
    - "primary action: no distinct CTA color"

    example_component_prompts:
    - "Editorial hero headline: Suisse Intl 55px, weight 400, line-height 1.10, color #1a1a1a, letter-spacing -0.015em. Left-aligned, max-width 900px, sitting on #ffffff canvas with 192px top padding."

    - "Ghost text link in body: No background, no border. Suisse Intl 16px weight 500, color #1a1a1a. On hover, color shifts to #949494. Inline with body text, 16px line-height 1.5."

    - "Fog surface card: Background #f2f2f2, border none, border-radius 8px. Padding 24px. Contains a Suisse Intl 20px subheading (weight 500, #1a1a1a, letter-spacing -0.014em) and 16px body text below. No shadow."

    - "Outlined action button: Background transparent, border 1px solid #1a1a1a, border-radius 8px. Text Suisse Intl 16px weight 500, color #1a1a1a. Padding 16px vertical, 24px horizontal. Hover state inverts to #1a1a1a background with #ffffff text."

    - "Sticky announcement bar: Fixed to viewport bottom, full width. Background #fdf313, padding 12px 24px. Single line of text in Suisse Intl 16px weight 500, color #1a1a1a, with a trailing arrow link."

  typographic_identity:

    info: "The 'A/' logotype is set in a custom geometric sans (bolder than Suisse Intl's display cuts) with a forward-slash terminal. It functions as both logo and punctuation. The system treats type as the primary visual asset: there are no decorative icons, no graphic flourishes, no color washes — the typographic system carries 90% of the visual identity. Suisse Intl's slightly humanist proportions and tight tracking give the page a confident, editorial feel that distinguishes it from generic system-font SaaS sites."

  elevation_philosophy:

    info: "The system uses zero shadows. Elevation is communicated entirely through surface color shifts: #ffffff (base) → #f2f2f2 (card) → #f2ede9 (warm accent). The absence of shadows is deliberate — it keeps the page flat, editorial, and print-like. No element should have a box-shadow, drop-shadow, or blur. Depth comes from the warm cream surface (#f2ede9) acting as a subtle warm island against the cool gray (#f2f2f2) and white (#ffffff) system."

  similar_brands:

    - "**Pentagram** — Same agency-as-publisher ethos: monochromatic canvas, oversized editorial headlines, typographic confidence, and full-bleed project imagery breaking the grid"
    - "**Instrument** — Shares the restrained monochrome aesthetic with one strong accent color used sparingly, plus oversized left-aligned headlines and full-bleed visual storytelling"
    - "**Locomotive** — Editorial agency layout language — generous whitespace, large confident type, content blocks that alternate between typographic and full-bleed media"
    - "**Resn** — Experimental creative agency aesthetic with typographic identity, monochrome restraint, and willingness to let one bold element (here, the yellow bar) carry all the color"
    - "**Manual** — Design agency portfolio that treats typography as hero, uses flat surfaces without shadows, and relies on full-bleed visual content to punctuate typographic sections"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-pure-white: #ffffff;
          --color-graphite: #1a1a1a;
          --color-true-black: #000000;
          --color-hairline: #e6e6e6;
          --color-fog: #f2f2f2;
          --color-cream-stone: #f2ede9;
          --color-muted: #949494;
          --color-dim: #757575;
          --color-disabled: #cccccc;
          --color-electric-yellow: #fdf313;
        
          /* Typography — Font Families */
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-intl: 'Suisse Intl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-sans-serif: 'System Sans-Serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.5;
          --tracking-caption: 0.06px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.28px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.15;
          --tracking-heading-sm: -0.42px;
          --text-heading: 42px;
          --leading-heading: 1.15;
          --tracking-heading: -0.59px;
          --text-display: 55px;
          --leading-display: 1.1;
          --tracking-display: -0.82px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-128: 128px;
          --spacing-192: 192px;
          --spacing-232: 232px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 80-192px;
          --card-padding: 16-24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-nav: 4px;
          --radius-cards: 8px;
          --radius-pills: 9999px;
          --radius-images: 8px;
          --radius-inputs: 8px;
          --radius-buttons: 8px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-fog-surface: #f2f2f2;
          --surface-cream-surface: #f2ede9;
          --surface-yellow-accent: #fdf313;
          --surface-graphite: #1a1a1a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-pure-white: #ffffff;
          --color-graphite: #1a1a1a;
          --color-true-black: #000000;
          --color-hairline: #e6e6e6;
          --color-fog: #f2f2f2;
          --color-cream-stone: #f2ede9;
          --color-muted: #949494;
          --color-dim: #757575;
          --color-disabled: #cccccc;
          --color-electric-yellow: #fdf313;
        
          /* Typography */
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-intl: 'Suisse Intl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-sans-serif: 'System Sans-Serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.5;
          --tracking-caption: 0.06px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.28px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.15;
          --tracking-heading-sm: -0.42px;
          --text-heading: 42px;
          --leading-heading: 1.15;
          --tracking-heading: -0.59px;
          --text-display: 55px;
          --leading-display: 1.1;
          --tracking-display: -0.82px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-128: 128px;
          --spacing-192: 192px;
          --spacing-232: 232px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-full: 9999px;
        }