break_maiden___style_reference:
  info: "> Oversized white type carved into a black gallery wall. A single condensed display face at 150px sits in a sea of negative space, surrounded by product photographs arranged like a magazine spread."

  theme: "dark"

  info: "Break Maiden operates as a black-canvas portfolio for a creative studio: pure black surfaces, oversized white display type, and product imagery presented like a curated print spread. The visual system is deliberately monochrome and typographically aggressive — a single custom display face (Martin) at near-billboard scale does all the emotional work, while a restrained neo-grotesque (America) carries navigation, body, and captions. The page is a gallery: project tiles sit on an irregular three-column grid with generous gutters, letting the product photography carry the color that the interface refuses to. There are no buttons, gradients, shadows, or decoration in the chrome itself — the system derives its identity from the contrast between negative space and a colossal heading, not from palette depth."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Onyx Black | `#000000` | `--color-onyx-black` | Page canvas, hero background, card surface base — the only color that ever fills a region. Every section, card, and divider sits on this absolute black |"
    info: "| Bone White | `#ffffff` | `--color-bone-white` | Primary display type, nav text, card titles, body copy, hairline borders on the few framed elements — used wherever a shape or letter needs to be seen against black |"
    info: "| Ash Gray | `#8e8e8e` | `--color-ash-gray` | Muted metadata and secondary nav strokes — the only mid-tone in the system, reserved for information that must recede behind the headline |"

  tokens___typography:

    martin___signature_display_headline__a_custom_condensed_sans_rendered_at_153px___used_only_for_the_hero_statement__its_scale_is_the_brand__every_other_element_on_the_page_visually_defers_to_it__substitute__anton__tungsten_bold__druk_wide_bold_____font_martin:
      - "**Substitute:** Anton"
      - "**Weights:** 400"
      - "**Sizes:** 153px"
      - "**Line height:** normal"
      - "**Letter spacing:** normal"
      - "**Role:** Signature display headline. A custom condensed sans rendered at 153px — used only for the hero statement. Its scale is the brand: every other element on the page visually defers to it. Substitute: Anton, Tungsten Bold, Druk Wide Bold."

    america___primary_ui_and_body_voice___nav_links__card_titles__and_tagline_copy__a_neo_grotesque_with_quiet_character__the_contrast_against_martin_s_display_weight_is_what_creates_the_system_s_editorial_rhythm__substitute__s_hne__inter__neue_haas_grotesk_____font_america:
      - "**Substitute:** Inter"
      - "**Weights:** 400"
      - "**Sizes:** 19px, 22px"
      - "**Line height:** 1.00–1.50"
      - "**Role:** Primary UI and body voice — nav links, card titles, and tagline copy. A neo-grotesque with quiet character; the contrast against Martin's display weight is what creates the system's editorial rhythm. Substitute: Söhne, Inter, Neue Haas Grotesk."

    helvetica_neue___fallback___system_layer__appears_where_america_is_absent___likely_secondary_display_moments_or_browser_default_rendering__keeps_a_grotesque_geometry_consistent_with_america_at_smaller_scale_____font_helvetica_neue:
      - "**Substitute:** Helvetica"
      - "**Weights:** 400, 500"
      - "**Sizes:** 25px"
      - "**Line height:** 1.00"
      - "**Role:** Fallback / system layer. Appears where America is absent — likely secondary display moments or browser-default rendering. Keeps a grotesque geometry consistent with America at smaller scale."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body-sm | 19px | 1.25 | — | `--text-body-sm` |"
      info: "| body | 22px | 1.5 | — | `--text-body` |"
      info: "| display | 153px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 27 | 27px | `--spacing-27` |"
      info: "| 43 | 43px | `--spacing-43` |"
      info: "| 78 | 78px | `--spacing-78` |"

    border_radius:

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

    layout:

      - "**Section gap:** 43px"
      - "**Card padding:** 18px"
      - "**Element gap:** 18px"

  components:

    display_headline_block:
      role: "Hero statement"

      info: "Single line of Martin at 153px, weight 400, in Bone White (#ffffff) on Onyx Black (#000000). No line-height restriction, no max-width clamp — the headline occupies the full left two-thirds of the viewport. Inline graphic glyphs (parenthetical icon, arrow, sunburst) sit at display scale as type, not images."

    top_navigation_bar:
      role: "Primary navigation"

      info: "Horizontal bar on Onyx Black. Logo (circular stamp) at far left in Bone White. Four text links right-aligned: Work, About, Contact, Shop. America 400 at 19px, Bone White, no underline. ~43px horizontal padding from page edge, ~18px vertical padding."

    hero_intro_paragraph:
      role: "Supporting hero copy"

      info: "Short body sentence (2-3 lines) in America 400, 19px, Bone White, sitting to the right of the oversized headline. Provides context without competing — its smallness is the point."

    project_tile:
      role: "Portfolio card"

      info: "Full-bleed product photograph with no border, no radius, no shadow — image sits directly on the black canvas. Below the image: project name in America 400 at 19px Bone White, then a one-line tagline at 19px in a lighter weight. No card background, no padding around the image — the black of the page is the card."

    project_grid:
      role: "Work index layout"

      info: "Three-column irregular grid. Columns are not equal height — tiles span single, double, and offset positions to create a magazine-cut rhythm. Gutter is the page's own black; tiles touch visually but are separated by ~18px white space (or align to a sparse baseline)."

    logo_stamp:
      role: "Brand mark"

      info: "Circular seal-style mark in the top-left corner — text wrapping a central glyph in Bone White on transparent black. Acts as the home link. No fill, no background plate."

    ghost_link:
      role: "Inline navigation/action"

      info: "Text link in America 400, 19-22px, Bone White, no underline at rest. On hover, a 1px Ash Gray underline appears. No filled buttons exist in the system — all CTAs are typographic."

    section_divider:
      role: "Vertical rhythm"

      info: "Pure negative space — no horizontal rules, no bands, no background changes. Sections are separated by ~43px of black and a shift in type scale or grid behavior."

  do_s_and_don_ts:

    do:
      - "Set the hero headline in Martin at 153px, weight 400, line-height normal — never shrink it below 96px, never set it in a different face"
      - "Use only Onyx Black (#000000) as a fill for any region larger than a hairline — no charcoal, no near-black, no tinted grays"
      - "Let project photography provide all color; the interface itself stays monochrome black-on-white"
      - "Space project tiles on a three-column irregular grid where column heights differ — avoid uniform card grids"
      - "Reserve America at 19-22px for everything that isn't the display headline — nav, card titles, taglines, body"
      - "Use Ash Gray (#8e8e8e) only for metadata or hairline rules that must visually recede from the Bone White foreground"
      - "Keep all corners at 0px radius — no rounded buttons, cards, or tags; the system is hard-edged throughout"

    don_t:
      - "Do not introduce any chromatic color — no accent blues, reds, or greens; the palette is black, white, gray"
      - "Do not apply box-shadows, gradients, or glows — surfaces are flat, depth comes from type scale only"
      - "Do not add a filled CTA button; all actions are typographic ghost links in Bone White"
      - "Do not use a system sans for the display headline — Martin's condensed geometry is the signature"
      - "Do not wrap the headline in a card, container, or centered max-width — it bleeds to the left edge"
      - "Do not apply border-radius to images, cards, or any element — the aesthetic is razor-sharp"
      - "Do not mix multiple mid-grays; Ash Gray at #8e8e8 is the only non-extreme neutral permitted"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#000000` | Every region of the page — hero, nav, grid, footer — sits directly on this surface. There is no higher elevation. |"

  elevation:

    info: "The system has zero elevation. No shadows, no overlapping translucent layers, no z-stacked modals in the visual language. Depth is communicated entirely through typographic scale (153px headline vs 19px body) and the photograph-as-card relationship, not through surface stacking. This is a deliberate flat-aesthetic choice — adding shadows would shatter the print-spread / gallery-wall feel."

  imagery:

    info: "Product photography is the sole source of color in the system. All imagery is tightly cropped product shots (cans, bottles, jars, sauce labels) presented on light pastel or saturated single-color backdrops set against the black page. Photographs are square or 3:4, edge-to-edge with no border or frame, zero border-radius. The interface is icon-only in terms of graphic marks (a small greyhound illustration appears inline within the headline as a parenthetical character). No illustrations, no abstract graphics, no video. Photography does explanatory work (showcasing the work) rather than decorative work."

  layout:

    info: "Full-bleed dark canvas with no max-width container — the page extends to viewport edges on all sides. The hero is an asymmetric two-zone composition: a massive left-justified headline occupying roughly two-thirds of the viewport width, balanced by a small right-aligned intro paragraph. Navigation is a single top bar (logo left, four links right) with no sticky behavior implied. Below the hero, the layout shifts to a three-column irregular grid of project tiles where each tile is an edge-to-edge product photograph with a two-line caption (title + tagline) below in white type. The grid is deliberately uneven — tiles have different vertical positions and the column rhythm breaks across rows to create a magazine-cut feel rather than a uniform dashboard. Section transitions are made by black space alone, not by background color shifts."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #ffffff"
    - "background: #000000"
    - "border: #ffffff (hairline) or #8e8e8e (receded)"
    - "accent: none — the system is monochrome"
    - "primary action: no distinct CTA color"

    info: "3-5 Example Component Prompts:"

    - "Hero headline block: Onyx Black (#000000) background. Display text in Martin (substitute: Anton) at 153px, weight 400, line-height 1.0, color #ffffff, left-aligned, no max-width. Include one inline graphic glyph (small running animal illustration inside parentheses) at display scale. No underline, no border."

    - "Top navigation bar: Onyx Black (#000000) background, full-bleed. Circular stamp logo at far-left in #ffffff. Four text links right-aligned (Work, About, Contact, Shop) in America (substitute: Inter) 400, 19px, #ffffff, no fill, no border. Horizontal padding 43px from viewport edge, vertical padding 18px."

    - "Project tile: Edge-to-edge product photograph (no border-radius, no border, no shadow) sitting directly on #000000. Below: project title in America 400, 19px, #ffffff. Below that: one-line tagline in America 400, 19px, #ffffff at reduced opacity or same weight. No card background, no padding around the image, no meta labels."

    - "Ghost nav link: America 400, 19px, #ffffff, no underline, no background. On hover, 1px solid #8e8e8e underline appears. No filled state, no border-box, no padding beyond the text advance."

    - "Supporting hero paragraph: America 400, 19-22px, line-height 1.5, #ffffff, right-aligned to the hero column, max-width ~30% of viewport. Sits at the vertical midpoint of the headline to the right of the display type."

  similar_brands:

    - "**Wieden+Kennedy** — Same agency-as-gallery approach: black canvas, oversized display type, product/portfolio imagery doing the color work, and zero UI chrome"
    - "**Studio Dumbar** — Monochrome dark-mode portfolio with editorial display typography and irregular grid layouts for case studies"
    - "**Pentagram** — Hard-edged zero-radius components, flat black surfaces, and let-the-work-speak composition with minimal navigation"
    - "**Manual Creative** — Dark-canvas creative studio site that pairs a single condensed display face with product photography tiles in an uneven grid"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-onyx-black: #000000;
          --color-bone-white: #ffffff;
          --color-ash-gray: #8e8e8e;
        
          /* Typography — Font Families */
          --font-martin: 'Martin', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-america: 'America', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 19px;
          --leading-body-sm: 1.25;
          --text-body: 22px;
          --leading-body: 1.5;
          --text-display: 153px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-13: 13px;
          --spacing-18: 18px;
          --spacing-27: 27px;
          --spacing-43: 43px;
          --spacing-78: 78px;
        
          /* Layout */
          --section-gap: 43px;
          --card-padding: 18px;
          --element-gap: 18px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-onyx-black: #000000;
          --color-bone-white: #ffffff;
          --color-ash-gray: #8e8e8e;
        
          /* Typography */
          --font-martin: 'Martin', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-america: 'America', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 19px;
          --leading-body-sm: 1.25;
          --text-body: 22px;
          --leading-body: 1.5;
          --text-display: 153px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-13: 13px;
          --spacing-18: 18px;
          --spacing-27: 27px;
          --spacing-43: 43px;
          --spacing-78: 78px;
        }