waka_waka___style_reference:
  info: "> museum poster in bone and ink — monumental black grotesk type printed on warm off-white paper, everything else recedes"

  theme: "light"

  info: "Waka Waka treats its website like a printed exhibition catalog: a warm bone-colored paper canvas, one near-black ink, and a custom grotesk typeface deployed at both 10px footnote size and 560px monumental scale. The system is essentially monoline and monochromatic — there are no accents, no secondary hues, no gradients, and almost no decorative chrome. Visual hierarchy is created entirely through typographic weight, scale, and whitespace, with the brand's own name acting as the dominant graphic device on every screen. Components are flat, borderless or hairline-bordered, and feel curated rather than interactive — the page reads as a gallery wall of objects and oversized letterforms, not a software interface."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Bone Paper | `#edeae4` | `--color-bone-paper` | Page background, all canvas surfaces — warm off-white that reads as unbleached paper rather than digital white |"
    info: "| Stone Gray | `#c9c7c4` | `--color-stone-gray` | Secondary surface and muted contextual neutral — appears in contrast pairings as a slightly deeper layer below the canvas |"
    info: "| Ink Black | `#28282a` | `--color-ink-black` | Primary text, all borders, hairline rules, icon strokes, and the only chromatic anchor in the system — near-black with a hint of warmth so it sits comfortably on the bone background instead of vibrating |"

  tokens___typography:

    waka_sans___single_custom_grotesk_used_for_everything_from_10px_captions_to_560px_display___tight_tracking_scales_with_size__0_09em_at_display___0_02em_at_body_so_the_enormous_type_locks_into_a_dense_block_while_body_text_stays_readable__the_0_80_0_83_line_height_at_display_size_is_the_signature__letterforms_stack_into_an_almost_solid_mass_of_ink____font_waka_sans:
      - "**Substitute:** Inter (free) or Söhne (paid) — modern grotesks with similarly tight apertures and even stroke weights"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 10px, 14px, 18px, 24px, 560px"
      - "**Line height:** 0.80, 0.83, 1.00, 1.20, 1.60"
      - "**Letter spacing:** -0.09em at 560px, -0.03em at 24px, -0.02em at 18px"
      - "**Role:** Single custom grotesk used for everything from 10px captions to 560px display — tight tracking scales with size (-0.09em at display, -0.02em at body) so the enormous type locks into a dense block while body text stays readable. The 0.80–0.83 line-height at display size is the signature: letterforms stack into an almost solid mass of ink"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.6 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.2 | — | `--text-body-sm` |"
      info: "| body | 18px | 1.2 | -0.36px | `--text-body` |"
      info: "| subheading | 24px | 1 | -0.72px | `--text-subheading` |"
      info: "| display | 560px | 0.8 | -50.4px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 27 | 27px | `--spacing-27` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 20px"
      - "**Element gap:** 10px"

  components:

    monumental_display_headline:
      role: "Hero wordmark and section dividers"

      info: "Waka Sans weight 700 at 560px, line-height 0.80, letter-spacing -0.09em, color #28282a. Used for the brand name rendered as a single oversized graphic element that fills the vertical viewport. No other type element approaches this scale — the contrast between 560px display and 10px captions defines the visual rhythm."

    editorial_section_heading:
      role: "Mid-scale titles and category labels"

      info: "Waka Sans weight 700 at 24px, line-height 1.0, letter-spacing -0.03em, color #28282a. Functions as a quiet secondary headline that appears above product blocks or image grids."

    product_image_plate:
      role: "Photography containers in grid layouts"

      info: "Raw product photography on the #edeae4 canvas with no border, no padding, no radius, and no shadow. Images are presented as full-bleed crops at grid cell size, sitting directly on the bone background so the negative space between images becomes part of the composition."

    hairline_divider:
      role: "Section and content separators"

      info: "1px solid #28282a rule spanning the full content width. The divider is the only structural separator in the system — no background tints, no shadows, no spacing tricks to divide content."

    nav_link:
      role: "Top navigation items"

      info: "Waka Sans weight 500 at 14px, color #28282a, 10px horizontal margin between items. No background, no underline, no active state background — navigation reads as a quiet list of words in the top margin of the page."

    footer_text:
      role: "Bottom page information"

      info: "Waka Sans weight 400 at 10–14px, line-height 1.6, color #28282a, 20px horizontal padding. Multi-column text block at the foot of the page that mirrors the density of a printed colophon."

    outlined_action_border:
      role: "The only interactive element treatment available"

      info: "Uses #28282a as a 1px border on interactive surfaces (ACTION_BORDER evidence present, ACTION_BACKGROUND=0). This is a ghost/outlined pattern only — no filled buttons exist. Interactive areas are demarcated by a hairline outline against the bone background, never by a colored fill."

    icon_stroke:
      role: "All iconography"

      info: "Waka Sans weight 400 glyphs or simple stroke icons at #28282a, sized to match surrounding text (10–18px). 6px margin offset. Icons are treated as typographic elements, not illustrations."

    full_bleed_poster_page:
      role: "Landing and index pages"

      info: "The entire viewport acts as a single composition: oversized type at top, image grid below, footer at bottom. #edeae4 background, no card containers, no sections with distinct surface colors. The page itself is the component."

  do_s_and_don_ts:

    do:
      - "Use Waka Sans weight 700 at 560px with line-height 0.80 and letter-spacing -0.09em for any monumental display element — this is the system's single most recognizable choice"
      - "Set all backgrounds to #edeae4 and all text, borders, and icons to #28282a — never introduce a second color"
      - "Use 0px border-radius on every component including cards, buttons, and image containers"
      - "Use hairline 1px #28282a dividers and borders instead of background-color contrast to separate content"
      - "Set tight letter-spacing at scale: -0.09em at display, -0.03em at subheading, -0.02em at body"
      - "Keep spacing compact: 10px element gaps, 20px container padding, 80px section gaps"
      - "Let product photography sit directly on the bone background with no frame, shadow, or radius"

    don_t:
      - "Do not introduce any chromatic color, gradient, or accent hue — the system is strictly two-tone"
      - "Do not use filled buttons, colored backgrounds, or background-fill hover states on interactive elements"
      - "Do not apply border-radius greater than 0px to any element"
      - "Do not use box-shadow or any elevation effect — surfaces are flat"
      - "Do not set type below 10px or above 560px — the scale is deliberate and extreme"
      - "Do not use light line-heights (1.5+) on display or heading sizes — 0.80–1.00 is required to maintain density"
      - "Do not separate sections with colored bands or background fills — use whitespace and hairline rules only"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Bone Paper | `#edeae4` | Base canvas — the entire page surface |"
    info: "| 2 | Stone Gray | `#c9c7c4` | Secondary contextual surface appearing in contrast relationships, slightly deeper than the canvas |"

  elevation:

    info: "The system is intentionally flat. There are no shadows, no elevation effects, and no layered surfaces. Depth is communicated entirely through typographic scale contrast, hairline 1px #28282a borders, and the arrangement of objects on the bone-colored plane."

  imagery:

    info: "Product photography is the only visual content beyond type. Images are presented as documentary-style object studies on the warm bone background — furniture and functional objects photographed frontally or at slight angle, with no lifestyle context, no human subjects, and no environmental staging. Each image is a tight crop that fills its grid cell edge-to-edge with no margin, frame, or radius. The photography carries the role of a museum catalog plate: the object IS the image, and the surrounding bone paper is the gallery wall. No illustration, no abstract graphics, no decorative imagery. Color treatment is natural and slightly desaturated so the objects read as physical artifacts rather than advertising."

  layout:

    info: "Max-width 1200px centered on the bone canvas with generous outer margins that create a printed-page feel. The page is organized as a single vertical scroll of stacked sections rather than a multi-column dashboard. The hero is a full-viewport editorial poster: oversized 560px wordmark anchored to the top, followed by an image grid, then a second monumental type block. Below the hero, sections alternate between product image grids (2-column and asymmetric layouts) and typographic statements. Navigation is a minimal top bar with small text and 10px gaps. Footer is a dense colophon-style text block. The overall rhythm is the rhythm of a printed catalog: one bold image or type statement, then breathing space, then the next. Grid usage is restrained — 2-column image grids and asymmetric editorial compositions, not dense card matrices."

  agent_prompt_guide:

    quick_color_reference:
    - "background: #edeae4"
    - "text: #28282a"
    - "border: #28282a"
    - "accent: no accent color"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:
    - "*Create a hero poster section:* Full-viewport on #edeae4 background. Headline at 560px Waka Sans weight 700, color #28282a, line-height 0.80, letter-spacing -50.4px (-0.09em). Subtitle at 18px weight 400, color #28282a, letter-spacing -0.36px. No buttons, no decoration — the type is the hero."

    - "*Create a product image grid:* 2-column grid with 10px gap on #edeae4 background. Each cell is a product photograph filling the cell edge-to-edge with 0px radius, no border, no padding, no shadow. Caption below each image at 10px Waka Sans weight 400, color #28282a, 6px margin-top."

    - "*Create a minimal top navigation:* Full-width on #edeae4 background, 20px horizontal padding. Nav items in Waka Sans weight 500 at 14px, color #28282a, 10px horizontal gap between items. No background, no border, no underline on hover — just a quiet list of words."

    - "*Create a section divider:* Full-width 1px solid #28282a hairline rule, no padding, no margin decoration. This is the only structural separator in the system."

    - "*Create a footer colophon:* 3-column text block at the bottom of the page on #edeae4 background, 20px horizontal padding, separated from content above by a 1px #28282a hairline. Text in Waka Sans weight 400 at 10–14px, line-height 1.6, color #28282a."

  similar_brands:

    - "**Menu Space** — Same bone-and-ink monochromatic palette, same editorial poster approach, same custom grotesk used at monumental scale against warm off-white"
    - "**Areaware** — Same museum-catalog product presentation on warm neutral canvas, same hairline-bordered grid layouts, no decorative chrome"
    - "**Hem** — Same Scandinavian furniture-studio restraint — single background tone, oversized wordmark as primary graphic, products photographed flat on neutral"
    - "**Coming Soon (studio)** — Same editorial typographic system with grotesk at extreme scale, same printed-publication rhythm instead of app-like sectioning"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-bone-paper: #edeae4;
          --color-stone-gray: #c9c7c4;
          --color-ink-black: #28282a;
        
          /* Typography — Font Families */
          --font-waka-sans: 'Waka Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.6;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --text-body: 18px;
          --leading-body: 1.2;
          --tracking-body: -0.36px;
          --text-subheading: 24px;
          --leading-subheading: 1;
          --tracking-subheading: -0.72px;
          --text-display: 560px;
          --leading-display: 0.8;
          --tracking-display: -50.4px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-10: 10px;
          --spacing-20: 20px;
          --spacing-27: 27px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 10px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-bone-paper: #edeae4;
          --surface-stone-gray: #c9c7c4;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-bone-paper: #edeae4;
          --color-stone-gray: #c9c7c4;
          --color-ink-black: #28282a;
        
          /* Typography */
          --font-waka-sans: 'Waka Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.6;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --text-body: 18px;
          --leading-body: 1.2;
          --tracking-body: -0.36px;
          --text-subheading: 24px;
          --leading-subheading: 1;
          --tracking-subheading: -0.72px;
          --text-display: 560px;
          --leading-display: 0.8;
          --tracking-display: -50.4px;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-10: 10px;
          --spacing-20: 20px;
          --spacing-27: 27px;
        }