ddna___style_reference:
  info: "> warm museum vitrine on raw linen"

  theme: "light"

  info: "ddna is a warm earth-toned luxury system built on a single temperature of pigment: cream canvas, stone beige surfaces, dark warm-charcoal text. There is no accent color — the brand speaks through material, texture, and generous silence. Typography is uniformly weight 400 across every level, with wide tracking on small text that makes even body copy feel like a museum label. The hero is a composition of iridescent floating orbs against a peach-cream field, the only chromatic event in an otherwise monochrome world. Surfaces are flat and shadowless; depth comes from tonal layering, not elevation. Components are quiet to the point of absence — text links replace buttons, labels replace cards, and the product photography does the work that chrome would normally do."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Stone Charcoal | `#444242` | `--color-stone-charcoal` | Primary text, navigation links, hairline borders, footer anchors — dark warm gray carries the same temperature as the cream surfaces it sits on, never pure black |"
    info: "| Linen Cream | `#efe3dc` | `--color-linen-cream` | Heading text, footer surface, and the lighter plane in the surface stack — sits one step above the canvas |"
    info: "| Warm Sand | `#dacabf` | `--color-warm-sand` | Page canvas — the dominant field every section and hero lives on |"
    info: "| Dust | `#938a83` | `--color-dust` | Secondary borders and dividers when Stone Charcoal would be too heavy |"
    info: "| Mortar | `#595552` | `--color-mortar` | Muted body text and subdued borders — the quietest readable neutral |"

  tokens___typography:

    basis___body__nav__labels__captions___the_only_text_family_used_for_everything_below_display__the_0_066_0_099em_tracking_on_10_14px_is_the_signature__it_makes_small_text_feel_like_a_printed_catalogue_label_rather_than_screen_ui_____font_basis:
      - "**Substitute:** Söhne, Inter, or Untitled Sans"
      - "**Weights:** 400"
      - "**Sizes:** 10px, 14px, 15px, 17px"
      - "**Line height:** 1.0–1.5"
      - "**Letter spacing:** 0.066em at 14–15px, 0.099em at 10px"
      - "**Role:** Body, nav, labels, captions — the only text family used for everything below display. The 0.066–0.099em tracking on 10–14px is the signature: it makes small text feel like a printed catalogue label rather than screen UI."

    favorit___display_and_heading___set_at_a_single_30px_size__weight_400_only__the_narrow__slightly_quirky_character_shapes_open_apertures__subtle_inktraps_carry_all_the_personality_the_system_allows__no_bold_weight_exists_____font_favorit:
      - "**Substitute:** Söhne Breit, Migra, or Editorial New (light)"
      - "**Weights:** 400"
      - "**Sizes:** 30px"
      - "**Line height:** 1.3–2.0"
      - "**Role:** Display and heading — set at a single 30px size, weight 400 only. The narrow, slightly quirky character shapes (open apertures, subtle inktraps) carry all the personality the system allows. No bold weight exists."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1 | 0.99px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | 0.92px | `--text-body-sm` |"
      info: "| body-lg | 17px | 1.5 | 1.12px | `--text-body-lg` |"
      info: "| heading | 30px | 1.3 | — | `--text-heading` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 33 | 33px | `--spacing-33` |"
      info: "| 45 | 45px | `--spacing-45` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 135 | 135px | `--spacing-135` |"

    border_radius:

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

    layout:

      - "**Section gap:** 100px"
      - "**Card padding:** 135px"
      - "**Element gap:** 20-25px"

  components:

    top_navigation:
      role: "Site header"

      info: "Full-bleed, transparent over canvas. Logo (Favorit-style wordmark) at far left, 3–4 nav links at far right. Links in Basis 14px, weight 400, letter-spacing 0.066em, color Stone Charcoal. 50px horizontal padding, 25px vertical padding. No background, no border, no shadow."

    text_link_with_arrow:
      role: "Primary action affordance"

      info: "The system has no filled buttons. A text link in Basis 14px weight 400, color Stone Charcoal, with a downward arrow glyph (↓) for scroll cues or a right arrow for navigation. Underline appears only on hover. This is the only 'CTA' the system uses."

    product_card:
      role: "Jewelry item display"

      info: "Full-bleed image card with no border, no radius, no shadow. Image fills the card edge-to-edge. Product name overlay in Basis 10–14px, letter-spacing 0.066–0.099em, color Stone Charcoal on a Linen Cream chip or directly on the image. Padding around card content: none — image bleeds. Card-to-card gap: 25px."

    hero_composition:
      role: "Above-the-fold brand statement"

      info: "Full-viewport Warm Sand canvas with a scattered constellation of iridescent 3D orbs (content, not tokens — purple/magenta/teal). Centered headline overlay in Favorit 30px, weight 400, line-height 2.0, color Stone Charcoal, max-width ~600px. 100px bottom padding, 50px horizontal padding."

    statement_paragraph:
      role: "Brand body copy"

      info: "Centered, Favorit 30px weight 400 at line-height 2.0, color Stone Charcoal. Two sentences max. This is the only place Favorit runs long — the wide line-height gives body text a poetic, spaced-out rhythm."

    section_container:
      role: "Vertical rhythm unit"

      info: "Full-bleed Warm Sand bands stacked vertically. Section gap: 100px. Horizontal padding: 50px. No dividers between sections — visual rhythm comes from whitespace alone."

    footer:
      role: "Site footer"

      info: "Linen Cream (#efe3dc) surface — one tonal step lighter than the Warm Sand canvas above it. Basis 10–14px text, letter-spacing 0.066–0.099em, color Stone Charcoal. Minimal link list, no logo repeat, no social icons."

    image_label:
      role: "Product caption overlay"

      info: "Basis 10px, weight 400, letter-spacing 0.099em, uppercase by convention. Sits on a Linen Cream rectangular chip at top-left of the image with 25px padding. No border, no radius."

  do_s_and_don_ts:

    do:
      - "Set all text at weight 400 — never introduce bold or semibold weights, the system has no hierarchy through weight"
      - "Use 0.066em letter-spacing on 14–15px text and 0.099em on 10px captions to maintain the catalogue-label feel"
      - "Keep the palette to five warm neutrals (#444242, #595552, #938a83, #dacabf, #efe3dc) — no accent colors, no blue links"
      - "Use Favorit at 30px with line-height 2.0 for any heading or statement — one size, one leading, one weight"
      - "Build depth through tonal layering (sand → cream → charcoal), never through box-shadow"
      - "Pair every affordance with a downward or rightward arrow glyph instead of a button shape"
      - "Use full-bleed product images with 0px radius — let the texture and material do the work"

    don_t:
      - "Do not add drop-shadows, blurs, or any z-axis elevation to cards, buttons, or images"
      - "Do not introduce a brand accent color — the iridescent orbs are content, not tokens"
      - "Do not use bold (600/700) or semibold (500) weights at any level"
      - "Do not use border-radius greater than 0px on any component — sharp edges preserve the printed-catalogue feel"
      - "Do not set body copy below 14px or above 17px; display should stay at 30px"
      - "Do not fill a button background — the system uses text links with arrow glyphs, not filled rectangles"
      - "Do not separate sections with hairline dividers; use 100px of whitespace as the only separator"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Warm Sand | `#dacabf` | Page canvas — every section sits on this warm beige field |"
    info: "| 2 | Linen Cream | `#efe3dc` | Footer and lighter text-grounding surface, one step lighter than canvas |"
    info: "| 3 | Stone Charcoal | `#444242` | Inverted dark surface for contrast moments — anchors the tonal stack |"

  elevation:

    info: "No shadows, no blur, no z-axis. Depth is purely tonal: the surface stack moves through warm beige → cream → charcoal, and that is the entire elevation model. Any added drop-shadow would break the flat, printed-catalogue language."

  imagery:

    info: "Imagery is the system's only chromatic event. The hero is a constellation of iridescent 3D orbs — translucent spheres in magenta, teal, and violet with subsurface scattering and soft cast shadows on the Warm Sand floor. These are content, not decorative chrome: they carry the brand's only color. Product photography uses tight, edge-to-edge crops of raw materials (wood grain, stone, bone, woven fabric) as backgrounds beneath jewelry — no lifestyle context, no models, no hands. The object sits on its own material, like a museum specimen."

  layout:

    info: "Full-bleed Warm Sand canvas, no max-width container. The hero is a viewport-height composition with centered text overlay floating over scattered 3D orbs. Sections stack vertically as Warm Sand bands with 100px gaps — no dividers, no alternating colors, no card grids breaking the page rhythm. Content is positioned through generous side margins (50px+ on mobile, breathing room expanding on desktop) rather than a fixed container width. The product section uses a 2-column or full-bleed alternating grid where each product image bleeds to its column edge with no padding. Navigation is a single transparent bar with logo left and 3–4 links right. The footer is a Linen Cream band — the only tonal shift on the entire page."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #444242"
    - "background: #dacabf"
    - "surface: #efe3dc"
    - "border: #444242 (primary) / #938a83 (secondary)"
    - "muted text: #595552"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "*Create a hero section*: Full-viewport Warm Sand (#dacabf) background. Centered statement copy in Favorit 30px, weight 400, line-height 2.0, color #444242, max-width ~600px, 100px bottom padding. Below the copy, a ghost text link: 'Explore Collections ↓' in Basis 14px, weight 400, letter-spacing 0.066em, color #444242. No background, no border, no shadow."

    - "*Create a product card*: Full-bleed image, 0px radius, no border, no shadow. Product name in Basis 10px, weight 400, letter-spacing 0.099em, color #444242, set on a Linen Cream (#efe3dc) chip at top-left with 25px padding. Card sits on Warm Sand (#dacabf) canvas with 25px gap to neighbors."

    - "*Create the navigation bar*: Transparent background over Warm Sand (#dacabf) canvas. Logo wordmark (Favorit 30px, weight 400, #444242) at far left. 3–4 nav links at far right in Basis 14px, weight 400, letter-spacing 0.066em, color #444242. 50px horizontal padding, 25px vertical padding. No border, no shadow, no background fill."

    - "*Create a footer*: Linen Cream (#efe3dc) background, 50px padding. 2–3 minimal link columns in Basis 10–14px, weight 400, letter-spacing 0.066–0.099em, color #444242. No logo repeat, no social icons, no filled buttons."

    - "*Create a section band*: Full-bleed Warm Sand (#dacabf) background, 100px vertical gap to the next section, 50px horizontal padding. Centered heading in Favorit 30px weight 400 line-height 2.0, color #444242. No dividers, no card containers, no shadows."

  similar_brands:

    - "**Aesop** — Same warm monochromatic restraint, weight 400 typography, and the absence of accent colors — both let material and product photography carry the visual weight"
    - "**Mara Hoffman** — Similar spacious warm-cream canvas, minimal nav, and floating organic imagery against a flat earth-toned field"
    - "**The Elder Statesman** — Luxury brand with weight-400-only typography, wide letter-spacing on small text, and a tonal-neutral palette with no primary action color"
    - "**Toast (toa.st)** — Earth-toned product presentation, generous whitespace, museum-label type tracking, and full-bleed material photography"
    - "**Maison Margiela** — Printed-catalogue aesthetic, text links replacing buttons, and a near-monochromatic warm neutral system with no accent"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-stone-charcoal: #444242;
          --color-linen-cream: #efe3dc;
          --color-warm-sand: #dacabf;
          --color-dust: #938a83;
          --color-mortar: #595552;
        
          /* Typography — Font Families */
          --font-basis: 'Basis', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-favorit: 'Favorit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1;
          --tracking-caption: 0.99px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.92px;
          --text-body-lg: 17px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: 1.12px;
          --text-heading: 30px;
          --leading-heading: 1.3;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-33: 33px;
          --spacing-45: 45px;
          --spacing-50: 50px;
          --spacing-100: 100px;
          --spacing-135: 135px;
        
          /* Layout */
          --section-gap: 100px;
          --card-padding: 135px;
          --element-gap: 20-25px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-warm-sand: #dacabf;
          --surface-linen-cream: #efe3dc;
          --surface-stone-charcoal: #444242;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-stone-charcoal: #444242;
          --color-linen-cream: #efe3dc;
          --color-warm-sand: #dacabf;
          --color-dust: #938a83;
          --color-mortar: #595552;
        
          /* Typography */
          --font-basis: 'Basis', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-favorit: 'Favorit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1;
          --tracking-caption: 0.99px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.92px;
          --text-body-lg: 17px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: 1.12px;
          --text-heading: 30px;
          --leading-heading: 1.3;
        
          /* Spacing */
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-33: 33px;
          --spacing-45: 45px;
          --spacing-50: 50px;
          --spacing-100: 100px;
          --spacing-135: 135px;
        }