ohdada___style_reference:
  info: "> Editorial gallery wall"

  theme: "light"

  info: "OhDada operates on a gallery-catalog visual language: two quiet, chalky neutrals (warm cream and lavender-gray) alternate as full-bleed section canvases, and a single saturated saddle brown does all the typographic and structural work. The signature typographic move pairs GrandSlang-Roman at weight 100 — an ultra-thin display serif — with Neue Haas Grotesk, so the brand name whispers in calligraphic hairline strokes while supporting text sits in crisp, engineered grotesque. This is a low-density, image-forward layout where the product photography (kinetic sculptures in primary blues and browns against white walls) provides all the color the UI refuses to use. The interface is minimal to the point of editorial restraint: thin hairline borders, almost no shadows, no gradients, and components that feel like printed catalog plates rather than software surfaces."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Chalk Cream | `#e6e0d9` | `--color-chalk-cream` | Primary page canvas and secondary section background; the warm off-white that makes brown type and sculpture photography feel curated rather than clinical |"
    info: "| Lavender Stone | `#b7b3be` | `--color-lavender-stone` | Alternate section background and hero canvas; introduces a cool, chalky counterpoint to the warm cream without breaking the achromatic discipline |"
    info: "| Saddle Brown | `#5d3a19` | `--color-saddle-brown` | All headings, body copy, link text, and hairline borders — the only chromatic voice in the system, used as a drawn-with-ink accent against the pale neutrals; Outlined and ghost interactive borders; links and navigation controls carry a 1px brown stroke rather than a filled background, keeping the surface quiet |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Decorative SVG fills only; never used for UI text or surface elements |"

  tokens___typography:

    grandslang_roman___brand_mark_and_large_display_headings_only___used_at_58px__for_the_wordmark_and_section_titles__weight_100_is_the_entire_signature__hairline_serif_strokes_that_read_as_drawn_rather_than_typeset__substitute__cormorant_garamond_ultralight_or_italiana__which_approximate_the_extreme_thinness_and_high_contrast_serif_construction_____font_grandslang_roman:
      - "**Substitute:** Cormorant Garamond Ultralight"
      - "**Weights:** 100"
      - "**Sizes:** 58px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** normal"
      - "**Role:** Brand mark and large display headings only — used at 58px+ for the wordmark and section titles. Weight 100 is the entire signature: hairline serif strokes that read as drawn rather than typeset. Substitute: Cormorant Garamond Ultralight or Italiana, which approximate the extreme thinness and high-contrast serif construction."

    neue_haas_grotesk_display___all_body_copy__navigation__secondary_headings__and_product_labels__weights_400_for_body__500_for_emphasis__the_neo_grotesque_geometry_acts_as_a_neutral_ground_for_the_expressive_display_serif___a_deliberate_swiss_type_baseline_that_lets_grandslang_perform__substitute__inter__neue_haas_unica__or_helvetica_neue_____font_neue_haas_grotesk_display:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500"
      - "**Sizes:** 16px, 17px, 72px"
      - "**Line height:** 1.00, 1.18, 1.20"
      - "**Letter spacing:** normal"
      - "**Role:** All body copy, navigation, secondary headings, and product labels. Weights 400 for body, 500 for emphasis. The neo-grotesque geometry acts as a neutral ground for the expressive display serif — a deliberate Swiss-type baseline that lets GrandSlang perform. Substitute: Inter, Neue Haas Unica, or Helvetica Neue."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body-sm | 16px | 1.18 | — | `--text-body-sm` |"
      info: "| display | 58px | 1 | — | `--text-display` |"
      info: "| display-lg | 72px | 1 | — | `--text-display-lg` |"

  tokens___spacing___shapes:

    base_unit: "6px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 115 | 115px | `--spacing-115` |"
      info: "| 144 | 144px | `--spacing-144` |"

    border_radius:

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

    layout:

      - "**Section gap:** 115px"
      - "**Card padding:** 40px"
      - "**Element gap:** 10px"

  components:

    hero_wordmark:
      role: "Brand identity display"

      info: "Full-bleed Lavender Stone (#b7b3be) section. GrandSlang-Roman weight 100 at 58–72px, Saddle Brown (#5d3a19), set on two lines with tight line-height 1.0. No logo mark, no icon — the type IS the brand. Generous left margin, text aligned to the left third."

    hero_subtitle:
      role: "Tagline beneath wordmark"

      info: "Neue Haas Grotesk weight 400 at 16px, color Chalk Cream (#e6e0d9) on Lavender Stone ground. Three short lines stacked with 5px vertical rhythm. The cream-on-lavender pairing is deliberately low-contrast — the subtitle is read second, not first."

    section_title_display:
      role: "Major section heading"

      info: "Neue Haas Grotesk weight 500 at 58px, Saddle Brown (#5d3a19) on Chalk Cream ground. Tight line-height 1.0. No underline, no decoration. Appears as the first content element in each section with 115px top padding."

    product_card___editorial:
      role: "Product entry in catalog"

      info: "Full-bleed image on the right (50% width), product name in Neue Haas Grotesk italic weight 400 at 17px, Saddle Brown, aligned to the bottom-left of the image column. No border, no shadow, no background card — the image sits directly on the Chalk Cream canvas. The product name is the only metadata visible."

    outlined_link:
      role: "Navigation and inline links"

      info: "Saddle Brown (#5d3a19) text in Neue Haas Grotesk weight 400 at 16–17px, 1px Saddle Brown bottom border, no background fill. 10px right margin when grouped. The border acts as the clickable affordance; the text alone would be too quiet."

    section_divider:
      role: "Implicit section break"

      info: "No visible rule. Sections separate through background color alternation (Chalk Cream → Lavender Stone → Chalk Cream) and 115px vertical padding. The layout breath IS the divider."

    product_photography_frame:
      role: "Sculpture product imagery"

      info: "Edge-to-edge photographic crops with 0px radius, no border, no shadow. Images fill their column edge-to-edge. Subjects are shot on white or neutral gallery walls — the image provides its own contrast against the cream page."

    navigation_bar:
      role: "Top-level site navigation"

      info: "Full-width, transparent, sits directly on the current section's background color. Neue Haas Grotesk weight 400 at 16px, Saddle Brown, inline items separated by spacing, no background fill, no shadow, no sticky behavior implied."

  do_s_and_don_ts:

    do:
      - "Use only GrandSlang-Roman weight 100 for the wordmark and display headings — never set it bold or above 72px"
      - "Alternate Chalk Cream (#e6e0d9) and Lavender Stone (#b7b3be) as full-bleed section backgrounds to create rhythm without introducing new colors"
      - "Apply 115px top/bottom padding to all major sections to maintain gallery-wall breathing room"
      - "Set all body and navigation text in Neue Haas Grotesk weight 400–500, Saddle Brown (#5d3a19), 16–17px"
      - "Mark links and interactive elements with a 1px Saddle Brown bottom border rather than a filled background"
      - "Use 0px border-radius on all components — cards, buttons, images, and product frames are sharp-edged"
      - "Let product photography be the only source of additional color (blues, whites from the sculptures); the UI itself stays three-tone"

    don_t:
      - "Do not introduce gradients, drop shadows, or elevation effects — the system is flat by design"
      - "Do not use rounded corners on any element; 0px radius is structural to the editorial feel"
      - "Do not add a fourth color to the palette — Saddle Brown, Chalk Cream, and Lavender Stone are the complete chromatic vocabulary"
      - "Do not set GrandSlang-Roman below 58px or in any weight other than 100; it loses its character at small sizes"
      - "Do not use filled button backgrounds for primary actions; use the outlined-link treatment with a brown border instead"
      - "Do not center body text — the layout is left-aligned throughout, even in the hero"
      - "Do not add hover animations, color transitions, or motion; the interface reads as a printed catalog"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Cream Canvas | `#e6e0d9` | Dominant page and product-section background |"
    info: "| 2 | Lavender Plinth | `#b7b3be` | Hero and accent section background, creates a tonal shift without introducing a new hue family |"

  elevation:

    info: "No shadows, no blur, no stacked surfaces. Depth comes solely from alternating cream and lavender-stone background bands and the natural dimension of product photography against flat UI."

  imagery:

    info: "Product photography dominates and is the only source of color beyond the three-tone UI. Sculptures are shot in clean, well-lit studio conditions on white or neutral gallery walls — tight, straight-on crops that show the kinetic mobile in full. No lifestyle context, no human subjects, no decorative backgrounds. Treatment is high-key, natural, unretouched. The blue and brown geometric forms of the sculptures echo the UI palette by coincidence, not by art direction. Icons are absent from the interface entirely. Imagery ratio: image-forward on product pages, text-only on the hero."

  layout:

    info: "Full-bleed page model with no max-width container — content aligns to the page edges with generous left margins. The hero is a full-viewport Lavender Stone band with the wordmark left-aligned at roughly 10% from the left edge, no centered composition. Sections alternate between Chalk Cream and Lavender Stone bands separated by 115px vertical padding. Product sections use a 2-column split: product name in italic serif on the left third, full-bleed photograph filling the right two-thirds. Navigation is a minimal top bar with inline links, no logo block, no hamburger. The overall rhythm is editorial — large quiet bands, single product per section, no card grids or multi-column feature blocks."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #5d3a19 (Saddle Brown)"
    - "background: #e6e0d9 (Chalk Cream)"
    - "border: #5d3a19 (Saddle Brown, 1px hairline)"
    - "accent surface: #b7b3be (Lavender Stone)"
    - "primary action: #5d3a19 (outlined action border)"

    info: "Example Component Prompts:"

    - "Create a hero wordmark block: full-bleed Lavender Stone (#b7b3be) background, 115px top padding. Headline 'Oh DaDa' set in GrandSlang-Roman weight 100, 72px, color #5d3a19, line-height 1.0, left-aligned with ~10% left margin. Below at 40px gap, a three-line subtitle in Neue Haas Grotesk weight 400, 16px, color #e6e0d9, line-height 1.18."

    - "Create a section title: Chalk Cream (#e6e0d9) background. Heading 'Products' in Neue Haas Grotesk weight 500, 58px, color #5d3a19, line-height 1.0, 115px top padding, left-aligned."

    - "Create a product card: Chalk Cream (#e6e0d9) background, two-column split. Right column (65% width) is an edge-to-edge product photograph with 0px radius. Left column (35% width) contains the product name 'Kaskasi' set in Neue Haas Grotesk italic weight 400, 17px, color #5d3a19, aligned to the bottom of the column."

    - "Create an outlined navigation link: Neue Haas Grotesk weight 400, 16px, color #5d3a19, 1px solid #5d3a19 bottom border, 10px right margin, no background fill, no padding."

    - "Create a section transition: switch from Chalk Cream (#e6e0d9) to Lavender Stone (#b7b3be) as the background, 115px vertical padding, no visible border or shadow between sections."

  elevation_philosophy:

    info: "The system has no elevation. Components are flush against their canvas — no drop shadows, no blur, no layered surfaces. Depth is implied through background color alternation (Chalk Cream ↔ Lavender Stone) and the contrast between the flat UI and the dimensional product photography. This absence of elevation is structural: it keeps the interface reading as a printed gallery catalog rather than a software surface."

  similar_brands:

    - "**Maison & Objet** — Same editorial catalog layout with full-bleed section bands, product photography as the sole color source, and minimal sans-serif supporting type around a distinctive display face"
    - "**Hem (hem.com)** — Same flat two-tone background alternation, oversized low-weight display headings, and the discipline of using a single warm accent color for all text and borders"
    - "**Atelier Bingo** — Same gallery-portfolio rhythm: quiet neutral canvases alternating with accent bands, sharp-edged product imagery flush to page edges, and restraint as the primary design principle"
    - "**Menu Space (menu.space)** — Same warm cream and muted cool-gray alternating sections, hairline-only interactive elements, and the pairing of a thin display serif with a neutral grotesque"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-chalk-cream: #e6e0d9;
          --color-lavender-stone: #b7b3be;
          --color-saddle-brown: #5d3a19;
          --color-ink-black: #000000;
        
          /* Typography — Font Families */
          --font-grandslang-roman: 'GrandSlang-Roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-neue-haas-grotesk-display: 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 16px;
          --leading-body-sm: 1.18;
          --text-display: 58px;
          --leading-display: 1;
          --text-display-lg: 72px;
          --leading-display-lg: 1;
        
          /* Typography — Weights */
          --font-weight-thin: 100;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 6px;
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-115: 115px;
          --spacing-144: 144px;
        
          /* Layout */
          --section-gap: 115px;
          --card-padding: 40px;
          --element-gap: 10px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-cream-canvas: #e6e0d9;
          --surface-lavender-plinth: #b7b3be;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-chalk-cream: #e6e0d9;
          --color-lavender-stone: #b7b3be;
          --color-saddle-brown: #5d3a19;
          --color-ink-black: #000000;
        
          /* Typography */
          --font-grandslang-roman: 'GrandSlang-Roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-neue-haas-grotesk-display: 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 16px;
          --leading-body-sm: 1.18;
          --text-display: 58px;
          --leading-display: 1;
          --text-display-lg: 72px;
          --leading-display-lg: 1;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-115: 115px;
          --spacing-144: 144px;
        }