hnst_studio___style_reference:
  info: "> earthy atelier with rust on linen — a slow-fashion gallery where a single burnt-orange accent warms an otherwise monastic cream and charcoal interior"

  theme: "light"

  info: "HNST Studio speaks in a warm, earthy editorial language: bone-white canvases tinted with raw silk cream, a single rust accent that anchors every interactive moment, and gallery-style uppercase typography that lets the photography breathe. The site treats full-bleed fashion imagery as the primary surface — text and chrome are whisper-thin, positioned like museum placards around the visual work. Two type families divide labor cleanly: Raleway handles UI, navigation, and body copy in humanist proportions, while Poppins takes display headings with extreme letter-spacing, turning section labels like 'TRENDING' into printed gallery signage. Components are stripped to essentials — thin borders, soft sand-toned badges, charcoal ink for action, no shadows, no gradients — so the rust accent lands with editorial gravity against the otherwise neutral palette."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Rust Hearth | `#892500` | `--color-rust-hearth` | Brand logo, active navigation state, section underlines, the only chromatic punctuation in the interface — carries identity weight wherever it appears |"
    info: "| Blush Whisper | `#ea9195` | `--color-blush-whisper` | Secondary chromatic accent for hover states, soft tags, and paired decorative elements — never standalone, always supporting Rust Hearth |"
    info: "| Linen | `#ffffff` | `--color-linen` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color |"
    info: "| Raw Silk | `#f9f6f2` | `--color-raw-silk` | Warm off-white page background — replaces sterile pure white to give the site a tactile, natural-fiber feel |"
    info: "| Sand Plaster | `#eee5d9` | `--color-sand-plaster` | Card backgrounds, badge fills, soft surface lifts — the warm secondary tier that differentiates containers from the page canvas |"
    info: "| Charcoal Ink | `#0e0e0e` | `--color-charcoal-ink` | Primary text, navigation text, filled action buttons, dark hero overlays — near-black reads softer than pure black against the warm neutrals |"
    info: "| Stone | `#868686` | `--color-stone` | Mid-gray for hairline borders, dividers, secondary metadata, inactive UI scaffolding — the dominant structural neutral |"
    info: "| Ash | `#b7b7b7` | `--color-ash` | Lighter borders, muted helper text, disabled states, subtle list separators |"
    info: "| Frost | `#d7d7d7` | `--color-frost` | Faintest divider lines on links, barely-there separators |"

  tokens___typography:

    raleway___primary_ui_and_body_typeface___humanist_sans_with_elegant_terminals__used_for_navigation__body_copy__links__buttons__and_footer__the_600_weight_handles_button_labels_and_nav_items__400_carries_running_text_with_generous_1_67_1_79_line_height_for_editorial_readability____font_raleway:
      - "**Substitute:** Montserrat, Lato, Nunito Sans"
      - "**Weights:** 400, 600, 700"
      - "**Sizes:** 12px, 13px, 14px, 15px, 16px"
      - "**Line height:** 1.67 (body), 1.70, 1.20 (tight UI)"
      - "**Letter spacing:** 0.1920em, 0.2310em"
      - "**Role:** Primary UI and body typeface — humanist sans with elegant terminals. Used for navigation, body copy, links, buttons, and footer. The 600 weight handles button labels and nav items; 400 carries running text with generous 1.67–1.79 line-height for editorial readability"

    poppins___display_and_section_heading_typeface___geometric_sans_used_for_hero_scale_section_labels_like__trending__at_62px__extreme_letter_spacing_0_154em_at_display__0_091em_at_20px_transforms_headlines_into_printed_gallery_signage__the_signature_typographic_moment_of_the_brand____font_poppins:
      - "**Substitute:** Montserrat, Outfit, Space Grotesk"
      - "**Weights:** 500, 600, 700"
      - "**Sizes:** 11px, 13px, 16px, 20px, 62px"
      - "**Line height:** 1.15 (display), 1.20, 1.25, 2.27 (small caps labels)"
      - "**Letter spacing:** 0.154em at 62px, 0.091em at 20px, 0.065em at 16px, 0.050em at 11–13px"
      - "**Role:** Display and section-heading typeface — geometric sans used for hero-scale section labels like 'TRENDING' at 62px. Extreme letter-spacing (0.154em at display, 0.091em at 20px) transforms headlines into printed gallery signage, the signature typographic moment of the brand"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.25 | 1.69px | `--text-caption` |"
      info: "| heading-sm | 20px | 1.2 | 1.82px | `--text-heading-sm` |"
      info: "| display | 62px | 1.15 | 9.55px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 23 | 23px | `--spacing-23` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 42 | 42px | `--spacing-42` |"
      info: "| 45 | 45px | `--spacing-45` |"
      info: "| 75 | 75px | `--spacing-75` |"
      info: "| 114 | 114px | `--spacing-114` |"
      info: "| 170 | 170px | `--spacing-170` |"
      info: "| 185 | 185px | `--spacing-185` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 75-170px"
      - "**Card padding:** 42px"
      - "**Element gap:** 15px"

  components:

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

      info: "Full-bleed bar, 10–15px vertical padding, no shadow. Rust Hearth (#892500) lowercase wordmark 'hnst' at ~32px Raleway 700 left-aligned. Right side: uppercase nav links (HOME, SUSTAINABILITY, PRESS, SHOP) in Raleway 600 at 12–13px with 0.192–0.231em letter-spacing and Stone (#868686) color, 15px horizontal gap. Active state switches text to Rust Hearth. Thin Stone hairline border-bottom separates from content."

    hero_carousel:
      role: "Full-viewport lifestyle photography opening the homepage"

      info: "Full-bleed image at 100vw width, ~80vh height, no radius. Left/right arrow controls rendered as thin chevrons in semi-transparent white, 48px tap targets, vertically centered. Four-dot pagination indicator centered at the bottom in white with the active dot at full opacity. No headline overlay — the photograph carries the message."

    section_display_heading:
      role: "Gallery-label style title for content sections"

      info: "Poppins 700 at 62px, letter-spacing 9.55px (0.154em), line-height 1.15, color Charcoal Ink (#0e0e0e). Centered or left-aligned depending on context. This is the signature type moment — the extreme tracking makes 'TRENDING' read as a printed wall label, not a web heading."

    filled_action_button:
      role: "Primary call-to-action in Charcoal Ink"

      info: "Charcoal Ink (#0e0e0e) background, Linen (#ffffff) text, Raleway 600 at 13–14px, uppercase with 0.192em letter-spacing. Padding 15px horizontal, 42px to 45px on wider variants. Zero radius — the sharp corners reinforce the editorial gallery aesthetic."

    ghost_navigation_button:
      role: "Secondary or inactive link styled as borderless uppercase text"

      info: "No background or border. Raleway 600 at 12–13px, uppercase, letter-spacing 0.192em, color Stone (#868686). Hover transitions to Charcoal Ink (#0e0e0e). Used in the nav bar and footer link clusters."

    editorial_image_block:
      role: "Large product or story photograph in a content section"

      info: "Full-width or right-column image with zero radius, no border, no shadow. Floating at the edge of the container or centered. Sits on Raw Silk (#f9f6f2) or Linen (#ffffff) canvas. The image itself is the component — no frame or caption chrome around it."

    sand_badge:
      role: "Soft warm-toned tag for metadata or status"

      info: "Sand Plaster (#eee5d9) background, no border, zero radius. Raleway 600 at 12–13px, Charcoal Ink text, padding 8–10px horizontal, 4–6px vertical. Used for small contextual labels, timestamps, and category markers."

    info_icon_button:
      role: "Small floating circular button for secondary actions"

      info: "Charcoal Ink (#0e0e0e) fill, white lowercase 'i' glyph at 16px, 40×40px square with zero radius. Fixed-position utility button (info panel toggle, cart preview). High contrast against the warm canvas."

    carousel_arrow:
      role: "Slide navigation control for the hero and product carousels"

      info: "Minimal chevron icon, 24px, white at 70% opacity over imagery, Charcoal Ink on light backgrounds. No background shape — the arrow floats directly on the image. 48px invisible hit area for touch."

    section_divider_band:
      role: "Full-bleed photographic strip separating content sections"

      info: "100vw width, ~20–30vh height, zero radius, edge-to-edge image. Functions as a visual palate cleanser between text blocks. Examples: the industrial textile-mill photograph and the leather/texture close-up that appear as horizontal bands between editorial sections."

    list_item_with_marker:
      role: "Bulleted or numbered list inside editorial copy"

      info: "Raleway 400 at 14–15px, line-height 1.70, color Charcoal Ink. 9px horizontal gap between marker and text. Stone (#868686) thin left-border on the list container at 1px. No custom bullet glyphs — relies on default markers or small rust-colored dots when brand-styled."

    pill_filter_tag:
      role: "Rounded interactive tag for filtering product lists"

      info: "The only rounded component in the system at 10px radius. Sand Plaster (#eee5d9) or Linen (#ffffff) background with 1px Stone (#868686) border. Raleway 600 at 12–13px, 10–15px horizontal padding, 4–6px vertical. Active state: Rust Hearth border and text."

    footer_link_cluster:
      role: "Organized link groups in the site footer"

      info: "Multi-column layout, Raleway 400 at 14px for links, Stone color, 15px vertical gap. Column headers in Raleway 600 uppercase at 12px with 0.192em letter-spacing. Thin Stone top-border separates footer from content. No background color change — footer sits on Raw Silk canvas."

  do_s_and_don_ts:

    do:
      - "Use Rust Hearth (#892500) exclusively for the brand wordmark, active nav states, and section underlines — let it carry full identity weight as the only chromatic accent"
      - "Apply Poppins 700 at 62px with 0.154em letter-spacing for all display section headings to maintain the gallery-label signature"
      - "Keep all component corners sharp (0px radius) except pill filter tags, which use 10px — this single exception is intentional"
      - "Set body text at Raleway 400, 15px, line-height 1.70 for editorial readability on the warm Raw Silk canvas"
      - "Use Sand Plaster (#eee5d9) for badge and tag fills to create soft warm-tinted containers that feel like craft paper"
      - "Separate sections with full-bleed photographic bands rather than decorative dividers — the imagery is the structural element"
      - "Maintain 1px Stone (#868686) hairline borders for all structural separation; never use shadows to imply elevation"

    don_t:
      - "Do not introduce additional accent colors beyond Rust Hearth and Blush Whisper — the 1% colorfulness is the brand"
      - "Do not use rounded corners on cards, buttons, or images — sharp edges are essential to the editorial-print identity"
      - "Do not add drop shadows or elevation effects to any component — the design system is deliberately flat"
      - "Do not use pure white (#ffffff) as the page background — always use Raw Silk (#f9f6f2) to preserve the warm, natural-fiber atmosphere"
      - "Do not set body text below 14px or above 17px — the type scale is narrow and intentional for editorial reading comfort"
      - "Do not apply tight letter-spacing to display headings — the extreme tracking (0.154em) at 62px is a signature, not a mistake"
      - "Do not overlay text, buttons, or UI chrome on top of hero photography — let the image breathe without interference"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Raw Silk | `#f9f6f2` | Page canvas — warm off-white base for the entire site |"
    info: "| 1 | Linen | `#ffffff` | Card surfaces, product panels, and elevated content blocks |"
    info: "| 2 | Sand Plaster | `#eee5d9` | Badge fills, soft tag backgrounds, warm-toned containers |"
    info: "| 3 | Charcoal Ink | `#0e0e0` | Dark inverted sections, navigation bar, filled action buttons |"

  elevation:

    - "**Navigation Bar:** `none — separated from content by a 1px Stone (#868686) bottom border only`"
    - "**Product Cards:** `none — flat surfaces with thin Stone hairline borders or no border at all`"
    - "**Buttons:** `none — solid fill provides all visual weight`"
    - "**Info Icon Button:** `none — Charcoal Ink solid fill is the visual anchor`"

  imagery:

    info: "Editorial fashion photography dominates the visual language. The hero features intimate, warmly lit studio portraits of models in relaxed poses against neutral backdrops — high-key with golden undertones, no harsh shadows. Interior editorial sections use industrial and craft-process imagery: textile-mill machinery, raw denim, leather close-ups with warm directional lighting. All photography is full-bleed, sharp-cornered, and unmasked — no rounded edges, no overlays, no decorative frames. The treatment is always cinematic and tactile, favoring material texture (denim weave, leather grain, fabric folds) over product-pack shots. No illustrations, no icons beyond simple UI glyphs, no 3D renders."

  layout:

    info: "The page follows a full-bleed editorial rhythm: a full-viewport hero photograph opens the experience, followed by asymmetric content sections where a large image occupies the right half and empty Raw Silk canvas holds the left. Sections are separated by full-bleed photographic bands that act as visual breath. Headlines are centered or left-aligned with extreme letter-spacing, reading as gallery wall text. The grid is single-column or two-column asymmetric, never multi-column card grids. Navigation is a minimal top bar — no sidebar, no mega-menu, no sticky header. Content density is spacious: 75–170px between sections, generous whitespace around all text blocks. The overall feel is of a curated zine or museum catalog, not a retail catalog."

  agent_prompt_guide:

    quick_color_reference:
    - "Text: #0e0e0e (Charcoal Ink)"
    - "Background: #f9f6f2 (Raw Silk)"
    - "Border: #868686 (Stone)"
    - "Accent: #892500 (Rust Hearth)"
    - "Card/badge fill: #eee5d9 (Sand Plaster)"
    - "Inverted text: #ffffff (Linen)"
    - "primary action: #0e0e0e (filled action)"

    3_5_example_component_prompts:

    - "**Top Navigation Bar**: Full-bleed bar, Raw Silk (#f9f6f2) background, 1px Stone (#868686) bottom border. Left: 'hnst' wordmark in Raleway 700, 32px, Rust Hearth (#892500). Right: nav items (HOME, SUSTAINABILITY, PRESS, SHOP) in Raleway 600, 12px, uppercase, letter-spacing 0.192em, Stone (#868686) color, 15px horizontal gap. Active item in Rust Hearth."

    - "**Section Display Heading**: 'TRENDING' set in Poppins 700, 62px, letter-spacing 9.55px (0.154em), line-height 1.15, color Charcoal Ink (#0e0e0e). Centered. No underline, no decoration — the letter-spacing alone creates the gallery-label presence."

    - "**Sand Badge**: Sand Plaster (#eee5d9) background, zero radius, no border. Raleway 600, 12px, Charcoal Ink (#0e0e0e) text, padding 10px horizontal and 5px vertical. Used for small contextual labels like 'New Arrival' or 'Limited Edition'."

    - "**Editorial Image Block**: Full-width photograph, zero radius, no border, no shadow, no overlay. Sits on Raw Silk (#f9f6f2) canvas. Image fills the container edge-to-edge. Optional caption in Raleway 400, 13px, Stone (#868686) below."

    - "**Ghost Navigation Link**: No background, no border. Raleway 600, 13px, uppercase, letter-spacing 0.192em, color Stone (#868686). On hover, transitions to Charcoal Ink (#0e0e0e). 15px horizontal spacing between adjacent links."

  typography_personality:

    info: "The two-font system is the most distinctive structural choice. Raleway does the quiet work — navigation, body, buttons, forms — in humanist proportions that feel crafted rather than engineered. Poppins does the loud work once per section, at 62px with 0.154em tracking, turning a single word like 'TRENDING' into a physical sign on a gallery wall. Never let Poppins appear at body sizes; never let Raleway appear at display sizes. The contrast between Raleway's 1.67 body line-height and Poppins' 1.15 display line-height is the tension that gives the typography its voice."

  spacing_rhythm:

    vertical_rhythm_operates_on_three_tiers: "15px for intra-component gaps (between nav items, list items, badge internals), 42–45px for component-level padding (button interior, card content breathing room), and 75–170px for section-to-section breathing. Never compress below 15px between siblings — the comfortable density is non-negotiable. Section transitions should always include a full-bleed image band as a visual palate cleanser, not just whitespace."

  similar_brands:

    - "**Patagonia** — Same warm earthy neutral palette with a single rust/burnt-orange brand accent, photography-first editorial layout, and anti-corporate sustainable-fashion tone"
    - "**Eileen Fisher** — Shared commitment to full-bleed lifestyle photography, generous whitespace, cream/off-white canvases, and a minimal sans-serif typography system"
    - "**Toast (toa.st)** — Identical slow-fashion editorial language — warm bone-white backgrounds, sharp-cornered components, no shadows, and a single chromatic accent used sparingly"
    - "**Studio Nicholson** — Same gallery-catalog approach with wide-tracked uppercase section headings, asymmetric image+text layouts, and a restrained near-monochrome palette"
    - "**Asket** — Shared minimal navigation, single accent color philosophy, body-text-forward type system, and photography that fills the viewport without decorative chrome"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-rust-hearth: #892500;
          --color-blush-whisper: #ea9195;
          --color-linen: #ffffff;
          --color-raw-silk: #f9f6f2;
          --color-sand-plaster: #eee5d9;
          --color-charcoal-ink: #0e0e0e;
          --color-stone: #868686;
          --color-ash: #b7b7b7;
          --color-frost: #d7d7d7;
        
          /* Typography — Font Families */
          --font-raleway: 'Raleway', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.25;
          --tracking-caption: 1.69px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: 1.82px;
          --text-display: 62px;
          --leading-display: 1.15;
          --tracking-display: 9.55px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-23: 23px;
          --spacing-40: 40px;
          --spacing-42: 42px;
          --spacing-45: 45px;
          --spacing-75: 75px;
          --spacing-114: 114px;
          --spacing-170: 170px;
          --spacing-185: 185px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 75-170px;
          --card-padding: 42px;
          --element-gap: 15px;
        
          /* Border Radius */
          --radius-lg: 10px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-pills: 10px;
          --radius-badges: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-raw-silk: #f9f6f2;
          --surface-linen: #ffffff;
          --surface-sand-plaster: #eee5d9;
          --surface-charcoal-ink: #0e0e0;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-rust-hearth: #892500;
          --color-blush-whisper: #ea9195;
          --color-linen: #ffffff;
          --color-raw-silk: #f9f6f2;
          --color-sand-plaster: #eee5d9;
          --color-charcoal-ink: #0e0e0e;
          --color-stone: #868686;
          --color-ash: #b7b7b7;
          --color-frost: #d7d7d7;
        
          /* Typography */
          --font-raleway: 'Raleway', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.25;
          --tracking-caption: 1.69px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: 1.82px;
          --text-display: 62px;
          --leading-display: 1.15;
          --tracking-display: 9.55px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-23: 23px;
          --spacing-40: 40px;
          --spacing-42: 42px;
          --spacing-45: 45px;
          --spacing-75: 75px;
          --spacing-114: 114px;
          --spacing-170: 170px;
          --spacing-185: 185px;
        
          /* Border Radius */
          --radius-lg: 10px;
        }