mishmash____style_reference:
  info: "> paper boutique, black frame, vivid contents."

  theme: "light"

  info: "mishmash® operates as a paper goods gallery: the chrome (type, borders, buttons, cards) is almost entirely achromatic, letting the saturated product photography carry every color moment. The layout is a compact, image-led grid where large editorial photos do the heavy lifting and UI elements stay quiet, small, and confident. Only two chromatic tokens exist in the interface — a soft butter yellow and a warmer amber — and both appear as small floating punctuation (sale badges, the persistent discount chip) rather than as filled buttons or backgrounds. Type is the only place warmth enters the system: Circular at modest sizes with comfortable line-height, set tight to the grid. The result feels like a curated stationery boutique — restrained shell, vivid contents."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink | `#171717` | `--color-ink` | Primary text, nav links, button text, card borders, footer dividers — near-black with a hint of warmth, not pure #000 |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surface, product card background |"
    info: "| Bone | `#f2f2f2` | `--color-bone` | Subtle body borders, secondary text, input borders, hairline dividers between sections |"
    info: "| Ash | `#e3e3e3` | `--color-ash` | Button borders, card surface variant, footer separator lines — slightly darker than Bone for elevated borders |"
    info: "| Smoke | `#c7c7c7` | `--color-smoke` | Muted helper text, disabled borders, de-emphasized labels |"
    info: "| Graphite | `#a1a1a1` | `--color-graphite` | Secondary heading text, subdued body copy, inactive state labels |"
    info: "| Pewter | `#919191` | `--color-pewter` | Tertiary headings, less prominent metadata |"
    info: "| Iron | `#858585` | `--color-iron` | Body helper text, captions, subtle annotations |"
    info: "| Buttercream | `#f4debb` | `--color-buttercream` | Soft category card surface (kraft-adjacent pastel), gentle highlight wash behind editorial text |"
    info: "| Amber Tag | `#f9cb86` | `--color-amber-tag` | Yellow action color for filled buttons, selected navigation states, and focused conversion moments. |"

  tokens___typography:

    circular___sole_typeface_across_all_contexts___nav__body__buttons__headings__hero__footer__circular_s_geometric_humanism_gives_the_brand_a_friendly_but_editorial_voice__weight_500_is_the_workhorse_for_headings__400_for_body__600_reserved_for_emphasis_and_small_caps_labels__the_10px_step_likely_for_legal_announcement_bars_and_46px_display_step_define_the_extreme_ends_of_the_scale_____font_circular:
      - "**Substitute:** Inter or Manrope for system fallback"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 10px, 14px, 16px, 18px, 20px, 30px, 38px, 46px"
      - "**Line height:** 1.04 (display) / 1.12 (headings) / 1.20 (body)"
      - "**Role:** Sole typeface across all contexts — nav, body, buttons, headings, hero, footer. Circular's geometric humanism gives the brand a friendly-but-editorial voice; weight 500 is the workhorse for headings, 400 for body, 600 reserved for emphasis and small caps labels. The 10px step (likely for legal/announcement bars) and 46px display step define the extreme ends of the scale."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.2 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.2 | — | `--text-body` |"
      info: "| subheading | 18px | 1.2 | — | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 30px | 1.12 | — | `--text-heading` |"
      info: "| heading-lg | 38px | 1.12 | — | `--text-heading-lg` |"
      info: "| display | 46px | 1.04 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 80 | 80px | `--spacing-80` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 4px |"
      info: "| tags | 9999px |"
      info: "| cards | 12px |"
      info: "| inputs | 4px |"
      info: "| buttons | 12px |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 48px"
      - "**Card padding:** 24px"
      - "**Element gap:** 24px"

  components:

    primary_filled_button_black:
      role: "Main conversion action — 'Shop now', 'Add to cart'"

      info: "Black (#171717) background, white text, 12px radius, 14px vertical × 20px horizontal padding, Circular 16px weight 500. Used sparingly — only one per viewport section."

    ghost_text_button:
      role: "Secondary navigation actions"

      info: "Transparent background, #171717 text, 12px radius, 14px×20px padding. Used in category cards and inline links."

    outlined_input_field:
      role: "Email capture, search, newsletter signup"

      info: "White background, 1px solid #e3e3e3 border, 4px radius, 14px vertical × 16px horizontal padding, Circular 16px weight 400 placeholder in #858585. Focus state: border darkens to #171717."

    pill_discount_badge:
      role: "Discount indicator on product cards and floating CTA"

      info: "Amber (#f9cb86) background, #171717 text, 9999px full radius, 10–14px Circular weight 600. Two contexts: (a) small circular '30%' badge top-left of product card, (b) elongated 'WANT 15% OFF?' floating chip bottom-right."

    wishlist_heart_icon:
      role: "Save product action on cards"

      info: "Stroke-only heart icon, 1.5px stroke, #171717, top-right of product card. 16px container, no background."

    product_card:
      role: "Planner/stationery product in grid"

      info: "White surface, 12px radius, 24px padding, product photo fills top, Circular 16px weight 500 title, 14px weight 400 price in #171717 with strikethrough original in #a1a1a1. White outlined 'Add' button (1px #e3e3e3) bottom-right of card body."

    category_editorial_card:
      role: "Collection/feature highlight (Log, Accessories, etc.)"

      info: "Full-bleed colored background (yellow, pink, kraft), product imagery overlapping right half, title in Circular 20–30px weight 500 left-aligned, subtitle in lighter weight 400, black 'Shop now' button bottom-left. No border, relies on image bleed for edge."

    announcement_bar:
      role: "Site-wide promotional strip at top"

      info: "Solid #171717 background, white Circular 14px weight 400 text, centered, 8–10px vertical padding. Single-line scrollable."

    top_navigation:
      role: "Primary site navigation"

      info: "White background, 'Shop' and 'Search' left in Circular 16px weight 500, centered wordmark logo (Circular 600 with ® mark), wishlist/cart/account icons right at 20px. 4px radius on any active search/pill state. ~64px height."

    hero_banner:
      role: "Full-bleed editorial product image"

      info: "Large lifestyle/product photograph fills width, 12px corner radius, black 'Shop now' button overlaid bottom-left at 12px radius. No headline overlay — the image IS the headline."

    newsletter_card:
      role: "Email capture with incentive"

      info: "Kraft/tan (#f4debb or similar) background, Circular 20px weight 500 headline, 14px body, inline email input + black 'Join now' button side by side. 16px radius, 24px padding."

    footer_link_column:
      role: "Site map navigation in footer"

      info: "White background, column header in Circular 16px weight 600, links in 14px weight 400 #171717, 12px vertical spacing between links. No dividers between columns."

    section_heading_with_accent_dots:
      role: "Editorial copy break between product bands"

      info: "Large Circular 30–38px weight 500 body text, black, with small colored circle/rectangle decorations inline (buttercream, mint, amber) at 12–16px. Left-aligned, max-width ~800px, relaxed line-height 1.2."

  do_s_and_don_ts:

    do:
      - "Keep the UI achromatic — let product photography be the only source of saturated color on any given screen."
      - "Use #f9cb86 exclusively for small floating chips and percentage badges; never fill large surfaces with it."
      - "Default to 12px radius for cards, buttons, and images; use 4px only for inputs and nav-pill states; use 9999px for tag/discount pills only."
      - "Set body type at 16px Circular weight 400, 1.2 line-height; reserve weight 600 for footer column headers and small labels."
      - "Use 48px section padding and 24px card padding; maintain a 1280px max-width container."
      - "Place exactly one filled black 'Shop now' or 'Add to cart' button per viewport — let ghost/text buttons carry secondary actions."
      - "Anchor every page with the black announcement bar at 14px Circular weight 400 in white."

    don_t:
      - "Don't introduce new chromatic colors into the UI chrome — the 1% colorfulness is the brand."
      - "Don't fill buttons with #f9cb86 or #f4debb; those are surface/accent tokens, not action tokens."
      - "Don't use box-shadows or gradients — the system is flat, separated by borders and surface contrast."
      - "Don't use corner radius other than 4px (inputs/nav), 12px (cards/buttons), or 9999px (pills)."
      - "Don't set type below 14px for body or above 46px for display; 10px is reserved for the announcement bar and legal micro-copy only."
      - "Don't place two filled black buttons in the same viewport — use ghost or text variants for additional actions."
      - "Don't use colored backgrounds for navigation, footer, or structural chrome — only for editorial category cards."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Page background, product card base |"
    info: "| 1 | Card | `#f2f2f2` | Secondary card surfaces, soft band backgrounds |"
    info: "| 2 | Border | `#e3e3e3` | Button outlines, elevated card borders, footer rules |"
    info: "| 3 | Accent Card | `#f4debb` | Editorial category cards, newsletter accent panels |"

  elevation:

    info: "The system is intentionally flat. Depth is communicated through surface color contrast (#ffffff → #f2f2f2 → #e3e3e3) and 1px hairline borders in #e3e3e3 or #f2f2f2, never through drop shadows. Product photography provides the only sense of dimensionality."

  imagery:

    info: "Product photography is the dominant visual asset — tight crops of planners, notebooks, pens, and sticky tabs on neutral surfaces, often showing hands or desk context. Treatment is high-key with natural light, vivid but not oversaturated, allowing the product colors (red M cover, blue W cover, yellow D cover, green UNDATED) to read as graphic elements. Images are full-bleed in heroes, contained within 12px-radius cards in grids, and used as overlapping right-half bleeds in editorial category cards. No illustration, no 3D, no abstract graphics — photography is the sole visual language beyond type."

  layout:

    info: "Full-width sections contained within a 1280px max-width, centered. The hero is a single full-bleed image with one overlaid CTA. Below the hero, category cards sit in a 3-column grid with varied background colors and overlapping product imagery. Product grids are 4-column on desktop with consistent card sizing. The page alternates between white bands and single-accent-color bands (buttercream, pink, kraft) to create rhythm without dark-mode sections. Navigation is a single thin top bar with centered logo; no sidebar, no mega-menu visible. Floating 'WANT 15% OFF?' chip is fixed bottom-right across all viewports. Spacing between sections is generous (48px) but within sections the rhythm is compact (24px gaps, 14–20px button padding)."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #171717"
    - "background: #ffffff"
    - "border: #e3e3e3"
    - "muted text: #858585"
    - "accent: #f9cb86"
    - "primary action: #f9cb86 (filled action)"

    example_component_prompts:

    - "*Product grid card*: White surface, 12px radius, 24px padding. Product photo fills top 60% with no inner border. Circular 16px weight 500 title in #171717, 14px weight 400 price in #171717 with strikethrough original in #a1a1a1. White outlined 'Add' button (1px #e3e3e3 border, 4px radius, 14px×20px padding) bottom-right. Optional 9999px amber pill (#f9cb86, #171717 text) top-left for '30%' discount."

    - "*Editorial category card*: Full-bleed buttercream (#f4debb) or pink background, no border, 16px radius. Product photo overlapping right half (extending beyond card edge). Title in Circular 30px weight 500 #171717 left-aligned, subtitle in 16px weight 400. Black 'Shop now' button (#171717 bg, white text, 12px radius, 14px×20px padding) bottom-left."

    - "*Hero banner*: Full-width photograph, 12px corner radius, max-height 600px. No overlay headline. Black 'Shop now' button (#171717, white text, 12px radius, 14px×20px padding) positioned bottom-left at 24px inset."

    - "*Announcement bar*: Full-width #171717 background, 10px vertical padding, single line of centered white Circular 14px weight 400 text. Sticky at top."

    - "*Newsletter card*: Buttercream (#f4debb) background, 16px radius, 24px padding. Circular 20px weight 500 #171717 headline, 14px weight 400 subtext. Inline email input (white bg, 1px #e3e3e3 border, 4px radius, 14px×16px padding) adjacent to black 'Join now' button (12px radius, 14px×20px padding)."

  accent_discipline:

    info: "The system contains exactly two chromatic UI colors: #f4debb (buttercream, for soft editorial card surfaces) and #f9cb86 (amber, for discount badges and floating chips). These must never appear as button fills, never as body text, and never as large background bands. Their role is punctuation — a single amber tag on a white product card, a single buttercream card in a row of three. The 1% colorfulness ratio is a hard constraint: if a new screen feels colorful, the chrome is wrong."

  similar_brands:

    - "**Papier** — Same achromatic chrome with product photography as the sole color source; similar editorial category cards with overlapping imagery; compact type and tight card grids."
    - "**Field Notes (fieldnotesbrand.com)** — Minimalist stationery DTC with near-black/white palette, small accent badges, product-grid homepage, and wordmark-as-logo navigation."
    - "**Areaware** — Design-object retailer using a restrained black/white/cream palette where product imagery provides all color; flat surfaces, no shadows, tight card padding."
    - "**HAY (hay.dk)** — Design retailer with a paper-goods sensibility; uses single-color editorial cards, flat product grids, and a wordmark-centered header with minimal navigation chrome."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #171717;
          --color-paper-white: #ffffff;
          --color-bone: #f2f2f2;
          --color-ash: #e3e3e3;
          --color-smoke: #c7c7c7;
          --color-graphite: #a1a1a1;
          --color-pewter: #919191;
          --color-iron: #858585;
          --color-buttercream: #f4debb;
          --color-amber-tag: #f9cb86;
        
          /* Typography — Font Families */
          --font-circular: 'Circular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --text-body: 16px;
          --leading-body: 1.2;
          --text-subheading: 18px;
          --leading-subheading: 1.2;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.2;
          --text-heading: 30px;
          --leading-heading: 1.12;
          --text-heading-lg: 38px;
          --leading-heading-lg: 1.12;
          --text-display: 46px;
          --leading-display: 1.04;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 48px;
          --card-padding: 24px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 99999px;
        
          /* Named Radii */
          --radius-nav: 4px;
          --radius-tags: 9999px;
          --radius-cards: 12px;
          --radius-inputs: 4px;
          --radius-buttons: 12px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-card: #f2f2f2;
          --surface-border: #e3e3e3;
          --surface-accent-card: #f4debb;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #171717;
          --color-paper-white: #ffffff;
          --color-bone: #f2f2f2;
          --color-ash: #e3e3e3;
          --color-smoke: #c7c7c7;
          --color-graphite: #a1a1a1;
          --color-pewter: #919191;
          --color-iron: #858585;
          --color-buttercream: #f4debb;
          --color-amber-tag: #f9cb86;
        
          /* Typography */
          --font-circular: 'Circular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --text-body: 16px;
          --leading-body: 1.2;
          --text-subheading: 18px;
          --leading-subheading: 1.2;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.2;
          --text-heading: 30px;
          --leading-heading: 1.12;
          --text-heading-lg: 38px;
          --leading-heading-lg: 1.12;
          --text-display: 46px;
          --leading-display: 1.04;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 99999px;
        }