exhibition_magazine___style_reference:
  info: "> Concrete editorial monolith"

  theme: "light"

  info: "Exhibition Magazine operates as a printed editorial artifact translated to screen: white canvas, hairline rules, and oversized condensed typography that commands the viewport. The visual system is almost entirely achromatic — color is virtually absent, replaced by the interplay of pure black text, white surfaces, and the grey 1px line that organizes everything. Two type families do all the work: DIN at 90–100px for display and section titles with extremely tight tracking and near-vertical line-height, and a serif (Cochin) for editorial body and descriptions that warms the otherwise clinical grid. Navigation and micro-labels use a tiny 13px all-caps face with generous 0.062em letter-spacing, creating a typographic hierarchy based on scale contrast alone — gargantuan display type against whisper-quiet UI chrome. Components are stripped to their essentials: image cards with no rounded corners, text buttons that are just underlined words, and a full-bleed black footer that closes the page with the same oversized type on inverted grounds."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page backgrounds, nav bar, card surfaces, image backgrounds |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | All text, nav links, display headings, footer background, card titles |"
    info: "| Hairline Grey | `#e5e7eb` | `--color-hairline-grey` | 1px borders, dividers, card outlines, link underlines — the structural skeleton of the layout |"
    info: "| Ash Grey | `#a9a9a9` | `--color-ash-grey` | Muted surface fills, image placeholder backgrounds, secondary tonal blocks |"
    info: "| Bone Blush | `#fff5fa` | `--color-bone-blush` | Subtle warm-tinted card surface — near-white with a hint of warmth, used sparingly |"

  tokens___typography:

    din___display_and_section_headings___used_at_90_100px_for_the_wordmark_and_feature_titles__36_52px_for_card_titles__25px_for_secondary_headlines__line_height_collapses_to_0_75_0_80_at_the_largest_sizes__stacking_lines_into_near_solid_blocks__tracking_tightens_proportionally___0_004em_at_small_sizes_up_to__0_008em_at_display__this_single_weight_at_extreme_sizes_carries_the_entire_visual_authority_of_the_brand___no_bold_weight_exists__scale_alone_creates_hierarchy_____font_din:
      - "**Substitute:** Bebas Neue, Oswald, Anton"
      - "**Weights:** 400"
      - "**Sizes:** 25px, 36px, 40px, 50px, 52px, 90px, 100px"
      - "**Line height:** 0.75–1.20"
      - "**Letter spacing:** -0.008em at 90–100px, -0.006em at 50–52px, -0.004em at 25–40px"
      - "**Role:** Display and section headings — used at 90–100px for the wordmark and feature titles, 36–52px for card titles, 25px for secondary headlines. Line-height collapses to 0.75–0.80 at the largest sizes, stacking lines into near-solid blocks. Tracking tightens proportionally: -0.004em at small sizes up to -0.008em at display. This single weight at extreme sizes carries the entire visual authority of the brand — no bold weight exists, scale alone creates hierarchy."

    cochin___editorial_body_text_and_article_descriptions__at_16px_1_50_it_provides_readable_long_form_copy_with_generous_breathing_room__at_46px_it_functions_as_an_oversized_serif_lead___warm__literary_counterpoint_to_the_industrial_din_display_type__the_only_serif_in_the_system__its_presence_signals__this_is_editorial_content__not_ui_chrome_____font_cochin:
      - "**Substitute:** Hoefler Text, Cormorant Garamond, Lora"
      - "**Weights:** 400"
      - "**Sizes:** 16px, 46px"
      - "**Line height:** 1.20–1.50"
      - "**Letter spacing:** normal"
      - "**Role:** Editorial body text and article descriptions. At 16px/1.50 it provides readable long-form copy with generous breathing room. At 46px it functions as an oversized serif lead — warm, literary counterpoint to the industrial DIN display type. The only serif in the system; its presence signals 'this is editorial content, not UI chrome'."

    forma_djr_display___navigation_labels__micro_ui__category_tags__footer_links__always_rendered_all_caps_at_13px_with_0_062em_letter_spacing___the_tracking_is_the_signature__generous__almost_luxurious_spacing_at_tiny_size_creates_a_deliberate_tension_against_the_compressed_din_display_type__this_is_the_typographic_glue_that_holds_the_system_together_at_the_functional_level_____font_forma_djr_display:
      - "**Substitute:** Futura PT, Avenir Next, Jost"
      - "**Weights:** 500"
      - "**Sizes:** 13px"
      - "**Line height:** 1.60"
      - "**Letter spacing:** 0.062em"
      - "**Role:** Navigation labels, micro-UI, category tags, footer links. Always rendered all-caps at 13px with 0.062em letter-spacing — the tracking is the signature: generous, almost luxurious spacing at tiny size creates a deliberate tension against the compressed DIN display type. This is the typographic glue that holds the system together at the functional level."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 25px | 1 | — | `--text-caption` |"
      info: "| body-sm | 36px | 1 | — | `--text-body-sm` |"
      info: "| body | 40px | 1 | — | `--text-body` |"
      info: "| body-lg | 50px | 1 | — | `--text-body-lg` |"
      info: "| heading-sm | 52px | 1 | — | `--text-heading-sm` |"
      info: "| heading | 90px | 1 | — | `--text-heading` |"
      info: "| heading-lg | 100px | 1 | — | `--text-heading-lg` |"

  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: "| 24 | 24px | `--spacing-24` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 100 | 100px | `--spacing-100` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1400px"
      - "**Section gap:** 60-100px"
      - "**Card padding:** 24px"
      - "**Element gap:** 12px"

  components:

    display_wordmark:
      role: "Brand identifier in header"

      info: "Full-width text logo 'EXHIBITION MAGAZINE' in DIN 400 at 100px, white text, letter-spacing -0.008em, line-height 0.80. Sits above the navigation bar, bleeding edge to edge with no padding. The 100px size on viewport width creates an immediate editorial authority — this is a magazine masthead, not a SaaS logo."

    top_navigation_bar:
      role: "Primary site navigation"

      horizontal_bar_with_8_items: "HOME, FASHION, ART, DECODING, BEAUTY, STUDIO, SHOP, SEARCH. forma-djr-display 500 at 13px, all-caps, 0.062em letter-spacing, color #000000. Items distributed with generous horizontal spacing (235px gaps between groups). No background, no border — floats directly on white. Active item indicated by underline only."

    full_bleed_hero_slide:
      role: "Featured editorial content"

      info: "Full-viewport-width image with overlaid text. Headline in DIN 400 at 50–52px, white, centered or right-aligned over image. Subtitle in Cochin 400 at 16px, white. No card background, no padding — text floats on the photograph. Navigation arrows (‹ ›) in white on left/right edges."

    editorial_content_card:
      role: "Article or feature preview in grid"

      info: "Square or portrait image on top (0px radius, no border). DIN 400 at 36–40px for card title in #000000, 24px margin-top from image. Cochin 400 at 16px/1.50 for description in #000000, 8px margin-top from title. No card container, no background fill — image and text sit directly on white page. Arranged in 4-column grid."

    underlined_text_link:
      role: "Text-based call-to-action and navigation"

      info: "forma-djr-display 500 at 13px, all-caps, 0.062em tracking, #000000, 1px underline (border-bottom: 1px solid #000000). Used for 'LOAD MORE CONTENT', category labels, and all interactive text. No background, no border-radius, no padding beyond text. The underline is the only affordance — no button chrome exists in the system."

    image_grid_4_column:
      role: "Primary content arrangement"

      info: "4 equal columns on desktop, 12px gap between cards. No gutters at row boundaries — images and text flow continuously. Each cell is an independent editorial unit. No card borders, no background separation between cards and page."

    full_bleed_image_strip:
      role: "Editorial feature interruption"

      info: "Edge-to-edge photograph with no text overlay, 0px radius, no border. Sits between content grids to break visual rhythm and provide atmospheric scale. Typical height: 50–70vh."

    dark_footer:
      role: "Site closure and secondary navigation"

      info: "Full-width #000000 background. Two columns of forma-djr-display links at 13px, 0.062em tracking, #ffffff, left-aligned (CONTRIBUTORS, LEGAL/PRIVACY POLICY, ONLINE SHOP, ABOUT) and right-aligned (INSTAGRAM, TIKTOK, LINKEDIN). Centered DIN display text at 52px, white, with 1px white underline — mirrors the body link style at display scale. Wordmark 'EXHIBITION' in bottom-left at 25px DIN, white."

    footer_display_cta:
      role: "Issue promotion in footer"

      info: "DIN 400 at 52px, #ffffff, centered, with 1px solid #ffffff underline. Text like 'UNCOVER CRAFT ISSUE'. Functions as the primary action of the entire site — a text link scaled to display proportions. The underline is the interactive affordance; no button exists."

    category_tag:
      role: "Content classification"

      info: "forma-djr-display 500 at 13px, all-caps, 0.062em tracking, #000000. Inline text, no background, no border. Appears above card titles or beside content to indicate section (FASHION, ART, DECODING, etc.)."

    image_carousel_indicator:
      role: "Slide position in hero"

      info: "Row of small dots (4px diameter, #ffffff with varying opacity) centered below hero content. No active state color shift — opacity gradient indicates position. Minimal, non-intrusive."

    expand_icon:
      role: "Fullscreen or expand affordance"

      info: "Simple '+' symbol in forma-djr-display at 13px, #ffffff, centered between hero text elements. No border, no background — pure typographic glyph."

    section_divider:
      role: "Horizontal separation between content groups"

      info: "1px solid #e5e7eb line spanning full content width. No margin — sits flush between sections. The only structural divider in the system; replaces card backgrounds and shadows entirely."

  do_s_and_don_ts:

    do:
      - "Use DIN at 90–100px for any display-level headline — the extreme scale is the signature, not a preference"
      - "Set all navigation and micro-labels in forma-djr-display at 13px, all-caps, with 0.062em letter-spacing — this tracking is non-negotiable"
      - "Apply 1px solid #e5e7eb borders for all structural lines — dividers, card outlines, link underlines"
      - "Use Cochin 16px/1.50 for all editorial body and descriptions — never substitute a sans-serif for body copy"
      - "Set line-height to 0.75–0.80 on DIN display sizes (50px+) to create dense, stacked typographic blocks"
      - "Maintain 0px border-radius on all elements — no rounded corners anywhere in the system"
      - "Use white (#ffffff) as the sole page and card background — no tinted surfaces unless matching #fff5fa exactly"

    don_t:
      - "Do not add color, gradients, or shadows — the system is intentionally achromatic; any chromatic addition breaks the editorial contract"
      - "Do not use bold or heavy weights on DIN — weight 400 at extreme sizes is the only correct approach"
      - "Do not apply border-radius to images, cards, or buttons — all edges must remain sharp"
      - "Do not use letter-spacing on Cochin body text — tracking belongs only to display and micro-UI"
      - "Do not introduce button components with backgrounds or padding — all actions are underlined text links"
      - "Do not add card background colors or box-shadows to create separation — use hairlines and whitespace"
      - "Do not use warm or cool greys beyond #e5e7eb and #a9a9a9 — the two-value grey scale is deliberate restraint"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper White | `#ffffff` | Page background, nav bar surface, content card background |"
    info: "| 1 | Bone Blush | `#fff5fa` | Subtle warm card surface — used on rare editorial cards to break the pure-white field |"
    info: "| 2 | Ash Grey | `#a9a9a9` | Image placeholder fills, muted tonal blocks behind absent photography |"
    info: "| 3 | Ink Black | `#000000` | Footer background, inverted text contexts — the only non-white surface in the system |"

  elevation:

    info: "The system deliberately avoids all box-shadows and elevation effects. Visual separation is achieved exclusively through 1px hairline borders (#e5e7eb), whitespace, and typographic scale. This flat-everything approach reinforces the printed editorial metaphor — the screen behaves as a page, not a software interface."

  imagery:

    info: "Full-bleed editorial photography dominates the visual system. Images are high-fashion, art-directed portraits and scenes with cinematic lighting — moody, desaturated, often with strong directional light. Treatment is always edge-to-edge with 0px radius, no masks, no overlays beyond text. No illustrations, no icons, no abstract graphics. Photography functions as both atmosphere and content — the hero image IS the page, not decoration around it. The product is the image; type and chrome exist only to frame it."

  layout:

    info: "Full-bleed layout with no max-width container on the hero — images and the wordmark span the entire viewport. Content sections use a centered max-width of ~1400px with no side gutters beyond natural centering. Hero is a full-viewport image carousel with overlaid text, no split-screen or boxed hero. Below the hero, a 4-column equal grid presents editorial cards in a continuous flow with 12px gaps. A full-bleed image strip interrupts the grid rhythm at intervals. The footer is a full-width black band with two-column micro-navigation flanking a centered display CTA. Section spacing is generous (60–100px) with 1px hairline dividers marking transitions. Navigation is a minimal top bar — no sticky behavior, no sidebar, no mega-menu. The page scrolls vertically as a single editorial sequence."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #e5e7eb"
    - "footer surface: #000000"
    - "muted surface: #a9a9a9"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:
    - "Build the masthead: white background. Full-width 'EXHIBITION MAGAZINE' in DIN 400 at 100px, #000000, letter-spacing -0.008em, line-height 0.80. No padding, text bleeds edge to edge."
    - "Build the top nav: white background, no border. 8 items (HOME, FASHION, ART, DECODING, BEAUTY, STUDIO, SHOP, SEARCH) in forma-djr-display 500 at 13px, all-caps, 0.062em letter-spacing, #000000. Active item gets 1px solid #000000 underline. Items spaced with 235px horizontal gaps."
    - "Build an editorial content card: no background, no border. Top: full-width image, 0px radius. Below: DIN 400 at 40px title in #000000, 8px gap, then Cochin 400 at 16px/1.50 description in #000000. 24px padding around the text block."
    - "Build the 'LOAD MORE CONTENT' link: forma-djr-display 500 at 13px, all-caps, 0.062em tracking, #000000, 1px solid #000000 underline. No background, no padding, centered on white."
    - "Build the dark footer: #000000 full-width background. Left column: 4 forma-djr-display links at 13px, 0.062em tracking, #ffffff, left-aligned. Right column: 3 social links in same style, right-aligned. Center: DIN 400 at 52px, #ffffff, with 1px solid #ffffff underline. Bottom-left: 'EXHIBITION' in DIN 400 at 25px, #ffffff."

  typographic_scale_rules:

    info: "The type system operates on extreme scale contrast, not weight contrast. Three tiers: DISPLAY (DIN 90–100px, line-height 0.80, tracking -0.008em), HEADLINE (DIN 36–52px, line-height 1.00, tracking -0.004 to -0.006em), BODY (Cochin 16px, line-height 1.50, normal tracking). Navigation and micro-labels occupy a fourth tier at 13px all-caps with 0.062em tracking — this wide tracking on tiny type is the counter-signature to the compressed display type. Never use more than two type families on a single screen. Never use bold weights — hierarchy comes from size alone."

  similar_brands:

    - "**032c Magazine** — Same oversized condensed sans-serif display type, all-caps micro-navigation, and pure black-on-white editorial layout with no decorative elements"
    - "**Apartamento** — Editorial magazine aesthetic with hairline borders, oversized serif headlines, and full-bleed photography with minimal UI chrome"
    - "**System Magazine** — Extreme typographic scale contrast, full-bleed hero photography, and near-zero color palette — image and type as the only content"
    - "**KALEIDOSCOPE** — Same art-magazine discipline: white canvas, oversized condensed display type, hairline structural lines, and zero chromatic UI elements"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-paper-white: #ffffff;
          --color-ink-black: #000000;
          --color-hairline-grey: #e5e7eb;
          --color-ash-grey: #a9a9a9;
          --color-bone-blush: #fff5fa;
        
          /* Typography — Font Families */
          --font-din: 'DIN', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-cochin: 'Cochin', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-forma-djr-display: 'forma-djr-display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 25px;
          --leading-caption: 1;
          --text-body-sm: 36px;
          --leading-body-sm: 1;
          --text-body: 40px;
          --leading-body: 1;
          --text-body-lg: 50px;
          --leading-body-lg: 1;
          --text-heading-sm: 52px;
          --leading-heading-sm: 1;
          --text-heading: 90px;
          --leading-heading: 1;
          --text-heading-lg: 100px;
          --leading-heading-lg: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-60: 60px;
          --spacing-100: 100px;
        
          /* Layout */
          --page-max-width: 1400px;
          --section-gap: 60-100px;
          --card-padding: 24px;
          --element-gap: 12px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-bone-blush: #fff5fa;
          --surface-ash-grey: #a9a9a9;
          --surface-ink-black: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-paper-white: #ffffff;
          --color-ink-black: #000000;
          --color-hairline-grey: #e5e7eb;
          --color-ash-grey: #a9a9a9;
          --color-bone-blush: #fff5fa;
        
          /* Typography */
          --font-din: 'DIN', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-cochin: 'Cochin', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-forma-djr-display: 'forma-djr-display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 25px;
          --leading-caption: 1;
          --text-body-sm: 36px;
          --leading-body-sm: 1;
          --text-body: 40px;
          --leading-body: 1;
          --text-body-lg: 50px;
          --leading-body-lg: 1;
          --text-heading-sm: 52px;
          --leading-heading-sm: 1;
          --text-heading: 90px;
          --leading-heading: 1;
          --text-heading-lg: 100px;
          --leading-heading-lg: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-60: 60px;
          --spacing-100: 100px;
        }