wallpaper_projects___style_reference:
  info: "> Editorial gallery on warm paper — a spread from a 12×16 art monograph where cream stock, near-black ink, and one enormous serif do all the talking."

  theme: "light"

  info: "Wallpaper Projects reads like a high-end art book spread printed on warm cream stock: massive editorial serif type (Cardinal Fruit) set against quiet, paper-warm surfaces, with a single near-black ink doing all the work. The palette is rigorously monochrome — no chromatic accents, no decorative gradients, no shadows — letting the photography and the typographic scale do the heavy lifting. Layout is asymmetric and gallery-paced: full-bleed atmospheric heroes give way to split text+image compositions on cream, with generous negative space acting as the primary structural device. Every interactive element is reduced to a dark pill on warm paper, and the entire system whispers 'considered, expensive, restrained' rather than shouting."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#1e1e1e` | `--color-ink-black` | Primary text, dark pill button fills, borders, heading strokes — the only ink in the system |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Primary canvas, image backgrounds, button text on dark fills |"
    info: "| Warm Cream | `#fbf9f3` | `--color-warm-cream` | Alternate surface — the signature cream stock that gives the system its editorial warmth, used for secondary sections and cards |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Maximum contrast moments, occasional true-black text where #1e1e1 isn't dark enough |"

  tokens___typography:

    cardinal_fruit___the_signature_display_serif___exclusively_used_for_hero_headlines__section_openers__and_any_moment_that_needs_to_feel_like_a_magazine_cover__the_medium_weight_500_is_reserved_for_the_most_massive_treatments_132_180px_where_hairline_strokes_would_disappear__negative_letter_spacing_tightens_the_massive_forms_into_a_cohesive_block_of_ink_____font_cardinal_fruit:
      - "**Substitute:** Playfair Display, Tiempos Headline, GT Sectra"
      - "**Weights:** 400, 500"
      - "**Sizes:** 36px, 48px, 132px, 180px"
      - "**Line height:** 1.00–1.24"
      - "**Letter spacing:** -9px at 180px, -6.6px at 132px, -1.2px at 48px, -0.72px at 36px"
      - "**Role:** The signature display serif — exclusively used for hero headlines, section openers, and any moment that needs to feel like a magazine cover. The medium weight (500) is reserved for the most massive treatments (132–180px) where hairline strokes would disappear. Negative letter-spacing tightens the massive forms into a cohesive block of ink."

    soehne_breit_buch___the_workhorse_grotesque_with_widened_proportions__at_small_sizes_10_14px_the_0_1em_tracking_creates_the_editorial__kicker__label_aesthetic__at_72_80px_it_serves_as_a_secondary_display_face_for_contexts_where_serif_would_feel_too_precious__the_600_weight_is_used_sparingly_for_emphasis_____font_soehne_breit_buch:
      - "**Weights:** 400, 600"
      - "**Sizes:** 10px, 12px, 14px, 72px, 80px"
      - "**Line height:** 1.00–1.50"
      - "**Letter spacing:** 1.0px at 10px, 1.2px at 12px, 1.4px at 14px, tighter at larger sizes"
      - "**Role:** The workhorse grotesque with widened proportions. At small sizes (10–14px) the 0.1em tracking creates the editorial 'kicker' label aesthetic. At 72–80px it serves as a secondary display face for contexts where serif would feel too precious. The 600 weight is used sparingly for emphasis."

    soehne_mono_buch___monospaced_ui_face_for_technical_labels__metadata__button_text__and_small_data_displays__its_presence_signals__system_metadata__versus__editorial_content____the_mono_is_the_interface_voice__the_serif_is_the_gallery_voice_____font_soehne_mono_buch:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, Berkeley Mono"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 14px"
      - "**Line height:** 1.00–1.60"
      - "**Letter spacing:** 0.3px at 12px, 0.7px at 14px"
      - "**Role:** Monospaced UI face for technical labels, metadata, button text, and small data displays. Its presence signals 'system metadata' versus 'editorial content' — the mono is the interface voice, the serif is the gallery voice."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.5 | 1px | `--text-caption` |"
      info: "| body | 14px | 1.6 | — | `--text-body` |"
      info: "| subheading | 36px | 1.1 | -0.72px | `--text-subheading` |"
      info: "| heading-sm | 48px | 1.05 | -1.2px | `--text-heading-sm` |"
      info: "| heading | 72px | 1 | -1.44px | `--text-heading` |"
      info: "| display | 132px | 1 | -6.6px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "spacious"

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

    border_radius:

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

    layout:

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

  components:

    dark_pill_button_primary_action:
      role: "The only button style that matters — the system's single interactive punctuation mark"

      info: "Filled with #1e1e1, white text in Soehne Mono 12px, 20px border-radius (distinctive squircle-pill, not full pill), 7px top padding + 8px bottom padding + 16px horizontal padding. Tracks tight at 0.3px letter-spacing. Label is always uppercase. No hover state changes color — it just feels like ink on paper."

    ghost_outline_button:
      role: "Secondary action for less critical interactions"

      info: "Transparent fill, 1px #1e1e1 border, #1e1e1 text in Soehne Mono 12px, 20px radius, 7-8px vertical padding, 16px horizontal padding. Shares the pill geometry with the dark variant."

    section_kicker_label:
      role: "Tiny uppercase label that opens every content section like a magazine department header"

      info: "Soehne Breit Buch 10px, weight 400, #1e1e1, letter-spacing 1.0px (0.1em), uppercase. Sits above headings with 10-12px gap. No punctuation. Examples of the pattern: 'TRANSFORMING SPACES', 'PROJECTS'."

    editorial_display_headline:
      role: "The hero/cover headline that defines the page"

      info: "Cardinal Fruit 132-180px, weight 500 at the largest sizes, #1e1e1 or #fbf9f3 (white-cream) when overlaid on photography. Letter-spacing -0.05em at 132-180px. Line-height 1.0 to 1.2. This is the only element allowed to be this large."

    asymmetric_section_header:
      role: "Left-column header for split text+image sections"

      info: "Cardinal Fruit 48px weight 500, #1e1e1, letter-spacing -0.025em. Sits above a body text block (Soehne Breit 14px, 1.5 line-height) with 20px gap. No horizontal rule — whitespace is the divider."

    full_bleed_hero_with_overlay_type:
      role: "The page-opening canvas — atmospheric photography as backdrop, type as subject"

      info: "Image fills 100vw × ~85vh, no border-radius, type overlays in light cream (#fbf9f3 or white) with a thin vertical divider line and downward arrow in #1e1e1e. No darkening overlay — the type sits on the raw image."

    two_column_image_grid:
      role: "Quick visual proof beneath introductory text"

      info: "Two equal-width images side by side, 12-16px gap between them, zero radius, full-bleed within their column. Images are uncropped architectural/interior photography."

    split_content_section_text_left___image_right:
      role: "The primary content arrangement for project showcases and about sections"

      info: "Two-column grid at roughly 40/60 or 35/65 ratio. Left column: kicker label, Cardinal Fruit heading, body text, pill button. Right column: large uncropped photography, zero radius. Background alternates between #ffffff and #fbf9f3. 100px vertical section padding."

    minimal_navigation_header:
      role: "Persistent top bar — almost invisible by design"

      info: "Sticky, white or transparent background, #1e1e1 elements. Left: small two-line wordmark logo (Soehne Breit 12-14px, stacked). Right: single hamburger icon. No nav links visible, no background bar — just floats on the page."

    footer_single_line:
      role: "Minimal page closure"

      info: "Single line of metadata in Soehne Mono 12px, #1e1e1, tracking 0.6px. Left: project identifier or studio name. Right: small action link or credit. 32px bottom padding separates it from page edge."

    scroll_indicator:
      role: "Vertical guide suggesting 'there's more below'"

      info: "Thin 1px vertical line in #1e1e1, ~120px tall, centered, terminating in a small downward arrow (SVG). Centered in the hero, the only graphical element competing with the display type."

  do_s_and_don_ts:

    do:
      - "Use Cardinal Fruit at 48-180px for all display headlines; never below 36px"
      - "Set all buttons to 20px border-radius with 7-8px vertical and 16px horizontal padding in Soehne Mono 12px"
      - "Alternate section backgrounds between #ffffff and #fbf9f3 to create editorial rhythm"
      - "Prefix every content section with a Soehne Breit 10px uppercase kicker label at 1.0px letter-spacing"
      - "Use 100px section gaps and 20px element gaps as the standard rhythm"
      - "Let images fill their containers edge-to-edge with zero border-radius"
      - "Reserve #1e1e1 for text, borders, and button fills only — never as a decorative wash"

    don_t:
      - "Never introduce chromatic colors — the 0% colorfulness is the entire brand"
      - "Never use box-shadow for elevation; let surface color contrast do the work"
      - "Never use a border-radius other than 20px for interactive elements or 0px for images/cards"
      - "Never set body text below 14px or above 18px; the editorial scale is fixed"
      - "Never use the display serif (Cardinal Fruit) at sizes below 36px — it loses its character"
      - "Never add visible dividers, rules, or borders between sections — whitespace is the only separator"
      - "Never darken or overlay hero photography; let the type sit directly on the raw image"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper White | `#ffffff` | Primary page canvas |"
    info: "| 1 | Warm Cream | `#fbf9f3` | Alternate section surface, card backgrounds, editorial warmth |"
    info: "| 2 | Ink Black | `#1e1e1` | Dark mode sections, button fills, footer |"

  elevation:

    info: "The system uses zero shadows. All depth and separation comes from the contrast between #ffffff, #fbf9f3, and #1e1e1 surfaces, plus generous whitespace. The cream-on-white tonal shift IS the elevation system — there is no z-axis, only surface levels. This is a deliberate editorial choice: shadows would cheapen the gallery aesthetic."

  imagery:

    info: "Imagery is the content, not decoration. The site uses large-format, uncropped architectural and interior photography — retail spaces, living rooms, and art installations where custom wallpaper is the protagonist. The hero is an abstract painted wallpaper texture (warm peach, pink, and blue atmospheric wash) that functions as a mood board rather than a product shot. All images have zero border-radius and fill their containers edge-to-edge. No image overlays, no darkened scrims, no duotone treatments. The color is allowed to live in the photography because the UI itself is strictly monochrome — this is a deliberate handoff: the interface is the frame, the imagery is the art. Density is image-heavy in content sections but text-dominant in the hero, where the 180px serif headline occupies the full viewport."

  layout:

    page_model: "full-bleed sections that alternate between atmospheric image backgrounds and cream/white editorial blocks, all max-width ~1440px centered for content. Hero pattern: full-viewport atmospheric image with massive overlaid serif headline in light cream, no nav, no CTAs — just title and a thin scroll indicator. Section rhythm: alternating bands of #ffffff and #fbf9f3, each separated by 100px of vertical breathing room, no visible dividers or rules. Content arrangement: consistently asymmetric — text occupies a narrow left column (35-40%) while photography takes the dominant right column (60-65%), creating a gallery-catalog reading rhythm. Grid usage: 2-column image grids for visual proof, 2-column text+image splits for editorial content, no 3+ column grids. Navigation: minimal sticky header with stacked wordmark and single hamburger, no mega-menu, no visible nav links until interaction. The overall feel is a printed monograph digitized — each screen is a spread."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #1e1e1e"
    - "background: #ffffff"
    - "alternate surface: #fbf9f3"
    - "border: #1e1e1e"
    - "primary action: #1e1e1e (filled action)"
    - "accent: none — the system has no chromatic accent"

    example_component_prompts:

    - "*Create a dark pill CTA button:* Fill #1e1e1e, text #ffffff in Soehne Mono 12px with 0.3px letter-spacing, 20px border-radius, 8px top padding, 7px bottom padding, 16px left/right padding. Label in uppercase."

    - "*Create a section opener:* Warm cream background (#fbf9f3). Top: Soehne Breit 10px uppercase kicker in #1e1e1e with 1.0px letter-spacing, 10px bottom margin. Below: Cardinal Fruit 48px weight 500 in #1e1e1e, letter-spacing -1.2px. Below: Soehne Breit 14px body text in #1e1e1e, line-height 1.6. No card, no border — content sits directly on the cream surface."

    - "*Create a split content section:* Two-column grid at 35/65 ratio. Left column on #ffffff: kicker label (Soehne Breit 10px tracked), Cardinal Fruit 48px heading, 14px body text, dark pill button (20px radius). Right column: full-bleed interior photography, zero radius, no overlay. 100px vertical section padding."

    - "*Create a full-bleed hero:* Background image fills 100vw × 85vh, no border-radius. Overlaid text: Cardinal Fruit 180px weight 500 in #fbf9f3, letter-spacing -9px, centered. A thin 1px vertical scroll indicator in #fbf9f3, ~120px tall, centered below the headline, ending in a small downward arrow."

    - "*Create a minimal nav header:* Transparent background, position sticky. Left: two-line wordmark in Soehne Breit 12px #1e1e1e (first line, second line below). Right: single hamburger icon in #1e1e1e, 24px. No background bar, no visible nav links."

  similar_brands:

    - "**Other Means** — Same editorial agency aesthetic — monochrome palette, massive serif display type, generous whitespace, and the sense that every screen is a printed spread"
    - "**Resn** — Creative studio with the same typographic confidence — serif display headlines at extreme sizes against atmospheric full-bleed imagery"
    - "**&Walsh** — Shared warm-tone minimalism, asymmetric text+image splits, and the same gallery-pacing whitespace rhythm"
    - "**Locomotive** — Both treat the portfolio page as an editorial publication — large serif type, warm neutral surfaces, and a single dark ink color"
    - "**Cereal Magazine (digital)** — Same warm cream stock, serif-driven hierarchy, and the conviction that photography should be uncropped and edge-to-edge without chrome"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #1e1e1e;
          --color-paper-white: #ffffff;
          --color-warm-cream: #fbf9f3;
          --color-pure-black: #000000;
        
          /* Typography — Font Families */
          --font-cardinal-fruit: 'Cardinal Fruit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-soehne-breit-buch: 'Soehne Breit Buch', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-soehne-mono-buch: 'Soehne Mono Buch', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --tracking-caption: 1px;
          --text-body: 14px;
          --leading-body: 1.6;
          --text-subheading: 36px;
          --leading-subheading: 1.1;
          --tracking-subheading: -0.72px;
          --text-heading-sm: 48px;
          --leading-heading-sm: 1.05;
          --tracking-heading-sm: -1.2px;
          --text-heading: 72px;
          --leading-heading: 1;
          --tracking-heading: -1.44px;
          --text-display: 132px;
          --leading-display: 1;
          --tracking-display: -6.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-100: 100px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 100px;
          --card-padding: 24px;
          --element-gap: 20px;
        
          /* Border Radius */
          --radius-2xl: 20px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 20px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-warm-cream: #fbf9f3;
          --surface-ink-black: #1e1e1;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #1e1e1e;
          --color-paper-white: #ffffff;
          --color-warm-cream: #fbf9f3;
          --color-pure-black: #000000;
        
          /* Typography */
          --font-cardinal-fruit: 'Cardinal Fruit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-soehne-breit-buch: 'Soehne Breit Buch', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-soehne-mono-buch: 'Soehne Mono Buch', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --tracking-caption: 1px;
          --text-body: 14px;
          --leading-body: 1.6;
          --text-subheading: 36px;
          --leading-subheading: 1.1;
          --tracking-subheading: -0.72px;
          --text-heading-sm: 48px;
          --leading-heading-sm: 1.05;
          --tracking-heading-sm: -1.2px;
          --text-heading: 72px;
          --leading-heading: 1;
          --tracking-heading: -1.44px;
          --text-display: 132px;
          --leading-display: 1;
          --tracking-display: -6.6px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-100: 100px;
        
          /* Border Radius */
          --radius-2xl: 20px;
        }