aevi_wellness___style_reference:
  info: "> Nordic apothecary, weightless type. A muted slate-blue accent interrupts an otherwise achromatic, light-as-air editorial layout where product photography overlaps hairline-bordered cards on warm white."

  theme: "light"

  info: "Aevi Wellness reads like a Nordic editorial spread translated into e-commerce: generous product photography overlapping a warm off-white canvas, whisper-weight typography that gives headlines room to breathe, and a single muted slate-blue accent that appears only where the brand needs to signal action or section shift. The palette is almost entirely achromatic — warm near-black text (#231f20), pure white surfaces, and a powder-blue band (#d5e0ea) that structures the page into editorial chapters. Components are barely-there: ultra-thin hairline borders, 2px corner radii on most elements, and 60px pill buttons for primary actions. The overall feel is clinical-luxury — the products themselves are the visual subject, and the interface stays out of their way."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Powder Blue | `#d5e0ea` | `--color-powder-blue` | Section bands, card borders, decorative dividers — the brand's secondary canvas, used to segment the page into editorial chapters without introducing contrast |"
    info: "| Slate Bloom | `#a3bfdb` | `--color-slate-bloom` | Primary action buttons, active states — the single chromatic accent; its low saturation keeps it feeling clinical rather than commercial |"
    info: "| Warm Ink | `#231f20` | `--color-warm-ink` | Primary text, hairline borders, card outlines, icon strokes — near-black with a warm undertone that softens the high-contrast text against white |"
    info: "| True Black | `#000000` | `--color-true-black` | Icon fills, occasional heavy borders — used sparingly for graphical weight when maximum contrast is needed |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page background, card surfaces, text on dark blocks — the dominant canvas, never off-white or cream |"
    info: "| Mist Gray | `#5f6368` | `--color-mist-gray` | Muted helper text, secondary metadata, low-priority labels — only when a softer reading level is needed without leaving the achromatic palette |"

  tokens___typography:

    primary_font___primary_font___detected_in_extracted_data_but_not_described_by_ai____font_primary_font:
      - "**Weights:** 300"
      - "**Sizes:** 10px, 12px, 14px, 16px"
      - "**Line height:** 1.29, 1.3, 1.31, 1.33"
      - "**Role:** Primary Font — detected in extracted data but not described by AI"

    primary_sans_custom__serif_influenced_grotesque___body_text__button_labels__badge_text__list_items__card_metadata_at_weight_300___the_light_weight_is_anti_convention_for_utility_text_and_signals_editorial_restraint____font_primary_sans_custom_serif_influenced_grotesque:
      - "**Substitute:** Inter, Söhne, General Sans"
      - "**Weights:** 300"
      - "**Sizes:**"
      - "**Line height:** 1.29–1.33"
      - "**Letter spacing:** normal"
      - "**Role:** Body text, button labels, badge text, list items, card metadata at weight 300 — the light weight is anti-convention for utility text and signals editorial restraint"

    tertiary_sans___emphasized_body_copy__card_descriptions___weight_500_lifts_importance_without_breaking_the_light_typographic_system____font_tertiary_sans:
      - "**Substitute:** Inter, Söhne"
      - "**Weights:** 500"
      - "**Sizes:**"
      - "**Line height:** 1.29"
      - "**Role:** Emphasized body copy, card descriptions — weight 500 lifts importance without breaking the light-typographic system"

    display_sans___all_headlines_and_section_titles_at_weight_300_with_extremely_tight_leading___the_whisper_weight_headlines_create_authority_through_restraint__not_volume____font_display_sans:
      - "**Substitute:** Inter, Söhne, Neue Haas Grotesk"
      - "**Weights:** 300"
      - "**Sizes:**"
      - "**Line height:** 1.08–1.11"
      - "**Letter spacing:** normal"
      - "**Role:** All headlines and section titles at weight 300 with extremely tight leading — the whisper-weight headlines create authority through restraint, not volume"

    tertiary_font___tertiary_font___detected_in_extracted_data_but_not_described_by_ai____font_tertiary_font:
      - "**Weights:** 500"
      - "**Sizes:** 14px"
      - "**Line height:** 1.29"
      - "**Role:** Tertiary Font — detected in extracted data but not described by AI"

    button_font___button_font___detected_in_extracted_data_but_not_described_by_ai____font_button_font:
      - "**Weights:** 500"
      - "**Sizes:** 14px"
      - "**Line height:** 1.21, 2.71"
      - "**Role:** Button Font — detected in extracted data but not described by AI"

    heading_font___heading_font___detected_in_extracted_data_but_not_described_by_ai____font_heading_font:
      - "**Weights:** 300"
      - "**Sizes:** 24px, 28px, 36px, 42px, 54px"
      - "**Line height:** 1.08, 1.09, 1.1, 1.11"
      - "**Role:** Heading Font — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.29 | — | `--text-caption` |"
      info: "| body | 14px | 1.31 | — | `--text-body` |"
      info: "| body-lg | 16px | 1.33 | — | `--text-body-lg` |"
      info: "| heading-sm | 24px | 1.11 | — | `--text-heading-sm` |"
      info: "| heading | 28px | 1.1 | — | `--text-heading` |"
      info: "| heading-lg | 36px | 1.09 | — | `--text-heading-lg` |"
      info: "| heading-xl | 42px | 1.08 | — | `--text-heading-xl` |"
      info: "| display | 54px | 1.08 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 2px |"
      info: "| pills | 60px |"
      info: "| inputs | 2px |"
      info: "| buttons | 2px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 48px"
      - "**Card padding:** 16px"
      - "**Element gap:** 8px"

  components:

    primary_pill_button:
      role: "Main call-to-action (e.g., 'Create Your Routine')"

      info: "Filled background #a3bfdb, white text at 14px weight 500, 60px border-radius, 16px horizontal padding and 12px vertical padding. No shadow. The pill shape is the only soft radius in the system — everything else is sharp."

    ghost___outlined_button:
      role: "Secondary actions, filter triggers"

      info: "Transparent background, 1px border in #d5e0ea, text in #231f20, 2px radius, 16px horizontal and 8–12px vertical padding. Sits quietly next to the primary pill without competing."

    editorial_section_card:
      role: "Content blocks for features, product categories, reviews"

      info: "White background (#ffffff), 1px hairline border in #231f20, 2px radius, 16px internal padding. No shadow, no elevation — the border alone defines the surface. Often overlaps with photography behind it."

    product_hero_banner:
      role: "Full-bleed hero on landing and category pages"

      info: "Full-viewport-width background image (product photography), overlaid with a large display headline (54px, weight 300) and a primary pill CTA. The brand wordmark is set at display size as a decorative overlay, not a heading."

    press_logo_strip:
      role: "Social proof band of media mentions"

      info: "Sits on a #d5e0ea background band, logos rendered in #231f20 at uniform height, evenly spaced across the full width. No card containers — the band itself is the container."

    testimonial_block:
      role: "Customer reviews carousel"

d5e0ea_background__5_star_row_in_231f20_above_body_text_at_14px_weight_300__quoted_review_text_centered__product_name_and_reviewer_attribution_in_small_caps_below_at_10_12px__2px_radius_container:

    hairline_divider:
      role: "Structural separation between content blocks"

      info: "1px line in #d5e0ea or #231f20, full-width or section-width. Used more often than spacing alone to define page structure."

    product_category_card:
      role: "Grid cards linking to product categories (Bestsellers, New, Face Care)"

      info: "Full-bleed photography with a category label overlaid in the bottom-left corner at 14px weight 300 white text. No border, no padding, no shadow — pure image with typographic caption."

    header_navigation:
      role: "Top-level site navigation"

      info: "Transparent or white background, logo left, nav links center or right in 14px weight 300, no background fill on active state — active state indicated by underline in #a3bfdb or color shift to #231f20."

    badge___tag:
      role: "Product tags, labels, status indicators"

      info: "1px border in #d5e0ea, background #ffffff or #d5e0ea, 2px radius, 6–8px vertical padding, text 10–12px weight 300 in #231f20. Minimal footprint."

    input_field:
      role: "Email capture, search, form fields"

      info: "1px bottom border in #231f20 (no side or top borders), transparent background, placeholder text 14px weight 300, focus state darkens the border to #000000. No fill, no box."

    icon:
      role: "Utility and decorative icons"

      info: "Stroke-based, 1px weight, #231f20 fill, 16–20px size. Minimal, clinical — no rounded ends, no filled variants. Icons never carry color."

  do_s_and_don_ts:

    do:
      - "Use #a3bfdb exclusively for the primary action button — never as a decorative fill, text color, or large background area"
      - "Set all headlines at weight 300 with line-height between 1.08 and 1.11; never bold a heading"
      - "Use the 60px radius only for the primary pill button; all other elements (cards, inputs, ghost buttons) use 2px"
      - "Build section separation with #d5e0ea background bands and 1px #231f20 hairlines, not with shadows or large margins"
      - "Let product photography fill its container edge-to-edge; do not pad or frame product images with whitespace"
      - "Keep the palette 95%+ achromatic; any chromatic use must be functional (action, active state) — decorative color dilutes the editorial tone"
      - "Use 4px as the base spacing unit and snap all gaps to multiples of 4 (4, 8, 16, 24, 32, 48)"

    don_t:
      - "Do not introduce a second accent color — the system is built on a single muted blue against achromatic neutrals"
      - "Do not apply shadows, glows, or blur to any element; the elevation philosophy is hairline borders only"
      - "Do not use border-radius larger than 2px on anything except the primary pill button (60px)"
      - "Do not set headings at weight 400 or above; weight 300 is the system voice and any heavier weight breaks the editorial register"
      - "Do not use vibrant or saturated colors for icons, links, or hover states — keep all interactive chrome in the existing palette"
      - "Do not pad product photography with large gutters or contained frames; images should bleed"
      - "Do not use colored or filled backgrounds for cards; the card surface is always #ffffff with a 1px border"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper White | `#ffffff` | Base page canvas, card surfaces, product image backgrounds |"
    info: "| 1 | Powder Blue Band | `#d5e0ea` | Section dividers, press strip, testimonial background — editorial chapter break |"
    info: "| 2 | Slate Bloom | `#a3bfdb` | Primary action surface, occasional highlight wash — the only chromatic surface |"
    info: "| 3 | Warm Ink | `#231f20` | Inverted dark surface for text-heavy or closing sections |"

  elevation:

    info: "The design intentionally avoids shadows, glows, and blur effects entirely. All elevation is communicated through 1px hairline borders in #231f20 or #d5e0ea, through the #d5e0ea background band that separates editorial chapters, and through photography that bleeds beyond its logical container to create depth. The absence of shadow is a deliberate Nordic-apothecary choice — surfaces feel printed rather than digital."

  imagery:

    info: "Photography is the dominant visual medium. Product shots are tightly cropped, often with overlapping bottles and dropper applicators creating editorial collage compositions. Lifestyle portraits are natural-light, intimate close-ups (faces, hands applying product), always desaturated or black-and-white in the editorial sections. Press imagery uses a grainy, high-contrast treatment. No illustration, no 3D renders, no abstract graphics — every image is photographic. Imagery is full-bleed and overlapping rather than contained in cards, and labels float over the bottom corner of the image in plain white type. The object is always the subject; there is no lifestyle staging or environmental context."

  layout:

    info: "Max-width ~1200px centered, but hero and section bands break out to full-bleed. The page reads as a sequence of full-width editorial chapters: a full-bleed product hero with overlaid wordmark, a press logo strip on a #d5e0ea band, a split editorial section (image left, text right with framed photography), a testimonial carousel on a #d5e0ea band, and a 3-column product category grid. Sections alternate between white and powder-blue to create rhythm. The navigation is a minimal top bar. Section gaps are 48px but feel larger because of the band-to-band color contrast. The layout is text-left/image-right in editorial sections and centered-stacked in product grids."

  agent_prompt_guide:

    info: "Quick Color Reference"
    - "text: #231f20"
    - "background: #ffffff"
    - "border: #231f20 (hairline) or #d5e0ea (soft)"
    - "accent: #d5e0ea (section bands, ghost button borders)"
    - "primary action: #a3bfdb (filled action)"

    info: "Example Component Prompts"
    - "Create a Primary Action Button: #a3bfdb background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."
    - "Create an editorial card: background #ffffff, 1px border in #231f20, 2px radius, padding 16px. Body text at 16px weight 300 in #231f20."
    - "Create a testimonial block: background #d5e0ea, padding 32px, centered text at 14px weight 300 in #231f20, 5-star row above in #231f20, attribution below in 10px small caps."
    - "Create a press logo strip: background #d5e0ea, logos evenly spaced, rendered in #231f20 at uniform height, padding 24px vertical."

  typography_voice:

    info: "The most distinctive typographic choice is the exclusive use of weight 300 across the entire system — from body copy to the 54px display headlines. This whisper weight is uncommon in beauty/ecommerce, where most brands default to 500–700 for authority. Here, weight 300 signals clinical confidence: the products speak, the type stays out of the way. Line-heights are notably tight on display (1.08–1.11) and comfortable on body (1.29–1.33), creating a clear contrast between editorial headers and readable utility text. No italic, no decorative serifs in the system itself; serif italics appear only in partner logos and editorial content."

  similar_brands:

    - "**Tata Harper** — Same editorial-meets-clinical beauty language: hairline borders, light typography, generous product photography, nearly monochrome with one soft accent"
    - "**Noble Panacea** — Similar ultra-minimal skincare aesthetic with whisper-weight headlines, full-bleed product photography, and an almost entirely achromatic palette"
    - "**Lesse** — Same Nordic apothecary mood — sparse layout, product-forward imagery, thin sans-serif at light weights, subtle blue-gray accents on white"
    - "**Sigil Scent** — Shared editorial restraint: weight 300 type, hairline dividers, near-monochrome palette with a single dusty accent, photography that overlaps layout edges"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-powder-blue: #d5e0ea;
          --color-slate-bloom: #a3bfdb;
          --color-warm-ink: #231f20;
          --color-true-black: #000000;
          --color-paper-white: #ffffff;
          --color-mist-gray: #5f6368;
        
          /* Typography — Font Families */
          --font-primary-font: 'Primary Font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-primary-sans-custom-serif-influenced-grotesque: 'Primary Sans (custom, serif-influenced grotesque)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-tertiary-sans: 'Tertiary Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-display-sans: 'Display Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-tertiary-font: 'Tertiary Font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-button-font: 'Button Font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-heading-font: 'Heading Font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.29;
          --text-body: 14px;
          --leading-body: 1.31;
          --text-body-lg: 16px;
          --leading-body-lg: 1.33;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.11;
          --text-heading: 28px;
          --leading-heading: 1.1;
          --text-heading-lg: 36px;
          --leading-heading-lg: 1.09;
          --text-heading-xl: 42px;
          --leading-heading-xl: 1.08;
          --text-display: 54px;
          --leading-display: 1.08;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-full: 60px;
        
          /* Named Radii */
          --radius-cards: 2px;
          --radius-pills: 60px;
          --radius-inputs: 2px;
          --radius-buttons: 2px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-powder-blue-band: #d5e0ea;
          --surface-slate-bloom: #a3bfdb;
          --surface-warm-ink: #231f20;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-powder-blue: #d5e0ea;
          --color-slate-bloom: #a3bfdb;
          --color-warm-ink: #231f20;
          --color-true-black: #000000;
          --color-paper-white: #ffffff;
          --color-mist-gray: #5f6368;
        
          /* Typography */
          --font-primary-font: 'Primary Font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-primary-sans-custom-serif-influenced-grotesque: 'Primary Sans (custom, serif-influenced grotesque)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-tertiary-sans: 'Tertiary Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-display-sans: 'Display Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-tertiary-font: 'Tertiary Font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-button-font: 'Button Font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-heading-font: 'Heading Font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.29;
          --text-body: 14px;
          --leading-body: 1.31;
          --text-body-lg: 16px;
          --leading-body-lg: 1.33;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.11;
          --text-heading: 28px;
          --leading-heading: 1.1;
          --text-heading-lg: 36px;
          --leading-heading-lg: 1.09;
          --text-heading-xl: 42px;
          --leading-heading-xl: 1.08;
          --text-display: 54px;
          --leading-display: 1.08;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-full: 60px;
        }