wouq___style_reference:
  info: "> Monochrome gallery wall, museum label typography"

  theme: "light"

  info: "WOUQ operates as a monochrome editorial portfolio: a near-total absence of color, with black text and hairline rules carrying all functional weight on a white canvas. The page is image-forward — large photography and 3D-rendered artwork dominate, treated as gallery objects with a single shared 10px corner radius and minimal chrome. Typography is the only expressive instrument: a custom neo-grotesque face (ESAllianz) is deployed at near-display sizes (45px) for the tagline and category labels, with a tight 1.11 line-height that lets the text stack into editorial blocks rather than breathing room. The interface deliberately removes every non-essential signal — no buttons, no badges, no gradients, no shadows, no accent color — so that the work itself carries the visual identity. Navigation is a plain text row, and project tiles are flat rectangles with two stacked text lines overlaid in a corner, mimicking museum wall labels rather than card UI patterns."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Carbon Black | `#000000` | `--color-carbon-black` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color |"
    info: "| Gallery White | `#ffffff` | `--color-gallery-white` | Page canvas, card surfaces, and heading backgrounds — the dominant surface across all sections |"
    info: "| Plaster Gray | `#efefef` | `--color-plaster-gray` | Subtle surface variation against white — used at near-imperceptible contrast for stacked layers |"

  tokens___typography:

    esallianz___primary_brand_typeface_for_navigation_links__body_copy__and_display_headlines__the_custom_face_is_a_neo_grotesque_with_restrained_geometry___its_near_monolinear_strokes_and_generous_counters_give_the_editorial_feel__at_45px_it_functions_as_display__at_27px_as_section_headings__at_18px_as_body_and_nav__two_weights_light__regular_both_used_at_400___the_visual_difference_is_in_the_eye__not_the_number_____font_esallianz:
      - "**Substitute:** Inter, Neue Haas Grotesk, Manrope"
      - "**Weights:** 400"
      - "**Sizes:** 18px, 27px, 45px"
      - "**Line height:** 1.11–1.50"
      - "**Letter spacing:** normal"
      - "**Role:** Primary brand typeface for navigation links, body copy, and display headlines. The custom face is a neo-grotesque with restrained geometry — its near-monolinear strokes and generous counters give the editorial feel. At 45px it functions as display; at 27px as section headings; at 18px as body and nav. Two weights (Light, Regular) both used at 400 — the visual difference is in the eye, not the number."

    open_sans___secondary_face_for_general_body_text_and_link_rendering___serves_as_a_web_safe_fallback_and_the_default_for_text_blocks_where_the_custom_face_is_unavailable____font_open_sans:
      - "**Substitute:** system-ui, -apple-system, Segoe UI"
      - "**Weights:** 400"
      - "**Sizes:** 18px, 22px"
      - "**Line height:** 1.00–1.67"
      - "**Role:** Secondary face for general body text and link rendering — serves as a web-safe fallback and the default for text blocks where the custom face is unavailable"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 18px | 1.67 | — | `--text-caption` |"
      info: "| subheading | 22px | 1.67 | — | `--text-subheading` |"
      info: "| heading | 27px | 1.5 | — | `--text-heading` |"
      info: "| display | 45px | 1.11 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "6px"

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 30 | 30px | `--spacing-30` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 48px"
      - "**Card padding:** 25px"
      - "**Element gap:** 30px"

  components:

    top_navigation_bar:
      role: "Persistent site header with brand mark and section links"

      info: "Minimal horizontal bar with #000000 WOUQ wordmark left-aligned and three text links (Work, About, Dreams) right-aligned. 18px ESAllianz at weight 400, normal letter-spacing. No background fill, no border, no shadow. Links use #000000 with no underline; hover state inherits text-decoration: underline. Sits directly on the #ffffff canvas with no padding separation."

    tagline_headline_block:
      role: "Opening editorial statement that replaces a traditional hero"

      info: "Large 45px ESAllianz display text in #000000, line-height 1.11, left-aligned, set directly under the nav with 25px top padding. Functions as the primary value proposition — a full declarative sentence, not a marketing slogan. No background, no CTA button, no supporting visual."

    project_thumbnail_card:
      role: "Gallery tile for a portfolio piece"

      info: "Image-first card on #ffffff background, 10px border-radius, no border, no shadow. An image fills the card edge-to-edge. Two lines of overlaid text sit in the top-left or bottom-left corner: a 18px category label in #000000 and a 27px project name in #000000 weight 400. No hover state lifts the card — the tile is a static gallery object."

    wide_hero_banner_card:
      role: "Full-width featured project image"

      info: "Spans the full content width (approximately 1200px), 10px border-radius. The same overlay-label pattern applies (category + project name) in the top-left corner. Functions as a visual lead-in to the grid below."

    two_column_grid_pair:
      role: "Side-by-side project tiles of equal width"

      info: "Two project thumbnail cards placed adjacent with 5–10px gap between them. Both share the 10px radius and overlaid label treatment. Heights are equal, creating a magazine-spread rhythm."

    full_width_editorial_image:
      role: "Atmospheric photography strip"

      info: "Bleeds edge-to-edge across the content area (1200px max), 10px border-radius on corners, no overlay text. Acts as a visual breath between grid sections — a single uncaptioned image, like a magazine double-page spread."

  do_s_and_don_ts:

    do:
      - "Use #000000 for all text, borders, and outlined interactive elements on #ffffff or #efefef surfaces"
      - "Set headlines at 45px ESAllianz with line-height 1.11 for editorial display impact"
      - "Apply 10px border-radius to all image-containing cards and thumbnails"
      - "Keep card padding at 25px top/right/left and 10px bottom for overlay labels"
      - "Overlay category labels (18px) and project names (27px) in the top-left corner of project tiles, stacked vertically"
      - "Use a max content width of 1200px, centered, with generous 48px section gaps"
      - "Keep the palette strictly to #000000, #ffffff, and #efefef — no accent colors, no gradients"

    don_t:
      - "Do not introduce any color beyond #000000, #ffffff, and #efefef — no brand accent, no semantic colors"
      - "Do not add drop shadows, glows, or any elevation to cards — surfaces are flat by design"
      - "Do not add visible CTA buttons with fills or large rounded radii — the interface is buttonless"
      - "Do not use font weights other than 400 (ESAllianz Light and Regular are both 400, distinguished by face not number)"
      - "Do not apply letter-spacing modifications — all text uses normal tracking"
      - "Do not add hover lifts, transforms, or scale animations to cards — tiles are static gallery objects"
      - "Do not use fully justified or centered text in body blocks — left-align all paragraphs and headlines"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#ffffff` | Page background |"
    info: "| 2 | Recessed | `#efefef` | Near-white surface tint for secondary layers |"
    info: "| 3 | Card | `#ffffff` | Project thumbnail backgrounds, same as canvas — cards are defined by their image content, not a fill |"

  elevation:

    info: "The design eliminates elevation entirely. No drop shadows, no border-based depth, no z-axis differentiation between cards and canvas. Surfaces are defined by content boundaries (images, text) rather than depth cues. The 10px border-radius provides the only geometric softening; the #efefef surface is used so sparingly it barely registers as a separate layer. This flatness is intentional — it forces the imagery and typography to carry all visual weight, preventing the interface from competing with the portfolio work."

  imagery:

    info: "Image-forward, photographic and 3D-rendered. Two distinct treatment modes appear: (1) abstract 3D renders with warm metallic surfaces — copper, chrome, polished black — used as hero and feature tiles, treated as full-bleed gallery objects with no cropping; (2) editorial still-life photography (interior objects, instruments, stationery, plants) used in the grid tiles, also uncropped and edge-to-edge. All images are contained within 10px-radius rectangles. There is no lifestyle photography, no people, no candid shots. The visual density is high: imagery occupies roughly 70% of the page area, with text acting as a thin labeling layer rather than competing for attention. No icons, no illustrations, no decorative graphics — the work itself is the only visual content."

  layout:

    info: "Max-width 1200px centered on a #ffffff canvas. The page opens with a minimal nav bar, followed by a large left-aligned editorial tagline (45px display) that acts as the hero — no supporting visual, no CTA. Below the tagline, a full-width hero image card introduces the work. The main body is a masonry-style grid of project tiles: one full-width banner, then paired two-column rows, then another full-bleed image strip, repeating. Each tile follows the same overlay-label pattern (category + project name in top-left corner). No sidebar, no footer chrome, no alternating background bands — the entire page reads as a continuous white gallery wall. Navigation is a single flat text row at the top with no sticky behavior implied."

  agent_prompt_guide:

  quick_color_reference:
    - "Text: #000000"
    - "Background: #ffffff"
    - "Border: #000000"
    - "Surface tint: #efefef"
    - "primary action: no distinct CTA color"

  example_component_prompts:
    - "**Editorial Tagline Block**: 45px ESAllianz weight 400 in #000000, line-height 1.11, left-aligned on #ffffff, 25px top padding. Full declarative sentence. No button, no visual."

    - "**Project Thumbnail Card**: #ffffff background, 10px border-radius, image filling the card edge-to-edge. Overlay in top-left corner: 18px ESAllianz category label in #000000, 27px ESAllianz project name in #000000 weight 400 directly below. No border, no shadow, no hover effect."

    - "**Wide Hero Banner**: 1200px max-width, 10px border-radius, full-bleed abstract 3D render (warm copper/chrome surfaces). Category label (18px) and project name (27px) in #000000 overlaid top-left. No other UI elements."

    - "**Two-Column Grid Pair**: Two equal-width project tiles side by side, 5px gap between them, each with the 10px radius and overlay-label treatment described above."

    - "**Full-Width Editorial Image Strip**: Single uncaptioned photograph bleeding to the 1200px content width, 10px border-radius, no overlay text. Separates grid sections like a magazine spread."

  similar_brands:

    - "**Locomotive** — Same monochrome editorial approach with large neo-grotesque type and image-driven project grids"
    - "**Resn** — Gallery-style portfolio layout with full-bleed imagery, flat surfaces, and minimal UI chrome"
    - "**Pentagram** — Museum-label typography overlaid on project thumbnails, zero accent color, text as the only structural element"
    - "**Manual** — Spacious image grid with hairline-thin UI and neo-grotesque custom typeface at display sizes"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-carbon-black: #000000;
          --color-gallery-white: #ffffff;
          --color-plaster-gray: #efefef;
        
          /* Typography — Font Families */
          --font-esallianz: 'ESAllianz', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-open-sans: 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 18px;
          --leading-caption: 1.67;
          --text-subheading: 22px;
          --leading-subheading: 1.67;
          --text-heading: 27px;
          --leading-heading: 1.5;
          --text-display: 45px;
          --leading-display: 1.11;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 6px;
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-25: 25px;
          --spacing-30: 30px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48px;
          --card-padding: 25px;
          --element-gap: 30px;
        
          /* Border Radius */
          --radius-lg: 10px;
        
          /* Named Radii */
          --radius-cards: 10px;
          --radius-images: 10px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-recessed: #efefef;
          --surface-card: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-carbon-black: #000000;
          --color-gallery-white: #ffffff;
          --color-plaster-gray: #efefef;
        
          /* Typography */
          --font-esallianz: 'ESAllianz', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-open-sans: 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 18px;
          --leading-caption: 1.67;
          --text-subheading: 22px;
          --leading-subheading: 1.67;
          --text-heading: 27px;
          --leading-heading: 1.5;
          --text-display: 45px;
          --leading-display: 1.11;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-25: 25px;
          --spacing-30: 30px;
        
          /* Border Radius */
          --radius-lg: 10px;
        }