ssense___style_reference:
  info: "> White gallery wall with editorial serifs. A high-fashion magazine spread rendered as a single-page web experience — where the only color is photography and the only weight is restraint."

  theme: "light"

  info: "SSENSE operates as a digital fashion editorial: pristine white canvas, razor-thin sans-serif navigation, and oversized serif headlines that behave like magazine cover titles rather than web UI. The visual system is deliberately monochrome — no accent colors, no filled CTAs, no decorative gradients — letting editorial photography and typography do all the expressive work. Hierarchy is achieved through extreme scale contrast (95px display down to 11px meta labels) and tight negative letter-spacing on serif faces that pulls letterforms into elegant, compressed shapes. Components are minimal and ghost-like: outlined buttons, hairline borders, near-invisible dividers. The site reads less like a store and more like a curated print publication that happens to sell things."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Primary text, navigation links, logo wordmark, footer links, SVG icon strokes — the anchor color of the entire system |"
    info: "| Graphite | `#333333` | `--color-graphite` | Body text and headings — slightly softer than pure black for long-form editorial readability at large sizes |"
    info: "| Silver | `#979797` | `--color-silver` | Hairline borders, dividers, inactive UI separators, secondary meta labels |"
    info: "| Ash | `#888888` | `--color-ash` | Muted helper text, list items, tertiary metadata, subdued navigation states |"
    info: "| Marble | `#f4f4f4` | `--color-marble` | Page canvas background, subtle section differentiation, footer surface — barely warmer than pure white |"
    info: "| Paper | `#ffffff` | `--color-paper` | Card surfaces, hero background, product tiles, elevated content panels |"
    info: "| Mist | `#e8e8e8` | `--color-mist` | Alternative surface tint, subtle alternating bands, ghost button hover backgrounds |"

  tokens___typography:

    jha_times_now___editorial_display_and_subhead_serif___the_voice_of_the_brand__used_at_56px_for_hero_editorial_titles_with_extreme_tight_tracking__0_04em_and_1_07_line_height__creating_a_compressed_magazine_cover_effect__weight_100_is_a_near_hairline_whisper_that_feels_anti_commerce__substitute__playfair_display__gt_sectra__or_canela_for_a_similar_high_contrast_transitional_serif_____font_jha_times_now:
      - "**Substitute:** Playfair Display, GT Sectra, Canela"
      - "**Weights:** 100, 400"
      - "**Sizes:** 15px, 20px, 56px"
      - "**Line height:** 1.07, 1.20, 1.30, 2.00"
      - "**Letter spacing:** -0.0400em at 56px, -0.0030em at 20px, -0.0020em at 15px"
      - "**Role:** Editorial display and subhead serif — the voice of the brand. Used at 56px for hero editorial titles with extreme tight tracking (-0.04em) and 1.07 line-height, creating a compressed magazine-cover effect. Weight 100 is a near-hairline whisper that feels anti-commerce. Substitute: Playfair Display, GT Sectra, or Canela for a similar high-contrast transitional serif."

    favorit_ssense_inter___primary_ui_and_content_sans_serif___used_for_navigation__body_text__editorial_descriptions__and_the_largest_display_sizes_95px__the_letter_spacing_scales_aggressively_tighter_as_size_increases___0_047em_at_95px_pulls_the_giant_wordforms_into_a_dense_architectural_block__while__0_004em_at_14px_keeps_body_text_natural__this_negative_tracking_at_scale_pattern_is_the_signature__substitute__inter__s_hne__or_neue_haas_grotesk_____font_favorit_ssense_inter:
      - "**Substitute:** Inter, Söhne, Neue Haas Grotesk"
      - "**Weights:** 100, 400"
      - "**Sizes:** 11px"
      - "**Line height:** 0.99, 1.16, 1.19, 1.26, 1.37"
      - "**Letter spacing:** -0.0470em at 95px, -0.0330em at 38px, -0.0180em at 29px, -0.0130em at 19px, -0.0040em at 14px"
      - "**Role:** Primary UI and content sans-serif — used for navigation, body text, editorial descriptions, and the largest display sizes (95px). The letter-spacing scales aggressively tighter as size increases: -0.047em at 95px pulls the giant wordforms into a dense architectural block, while -0.004em at 14px keeps body text natural. This negative-tracking-at-scale pattern is the signature. Substitute: Inter, Söhne, or Neue Haas Grotesk."

    ssense_fonts_micro_tag___bold_micro_label_for_category_tags_and_merchandising_markers___the_one_place_weight_700_appears_in_the_entire_system__always_uppercase__always_11px__always_tight_line_height_____font_ssense_fonts_micro_tag:
      - "**Substitute:** Inter Bold, Söhne Bold"
      - "**Weights:** 700"
      - "**Sizes:** 11px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** normal"
      - "**Role:** Bold micro-label for category tags and merchandising markers — the one place weight 700 appears in the entire system. Always uppercase, always 11px, always tight line-height."

    favorit_ssense_inter1___favorit_ssense_inter1___detected_in_extracted_data_but_not_described_by_ai____font_favorit_ssense_inter1:
      - "**Weights:** 100, 400"
      - "**Sizes:** 14px, 19px, 29px, 38px, 95px"
      - "**Line height:** 0.99, 1.16, 1.19, 1.26, 1.37"
      - "**Letter spacing:** -0.047, -0.033, -0.018, -0.013, -0.004"
      - "**Role:** Favorit SSENSE Inter1 — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.37 | -0.056px | `--text-body-sm` |"
      info: "| subheading | 20px | 1.2 | -0.06px | `--text-subheading` |"
      info: "| heading-sm | 29px | 1.19 | -0.522px | `--text-heading-sm` |"
      info: "| heading | 38px | 1.16 | -1.254px | `--text-heading` |"
      info: "| heading-lg | 56px | 1.07 | -2.24px | `--text-heading-lg` |"
      info: "| display | 95px | 0.99 | -4.465px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 31 | 31px | `--spacing-31` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 55 | 55px | `--spacing-55` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 105 | 105px | `--spacing-105` |"
      info: "| 119 | 119px | `--spacing-119` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 64px"
      - "**Card padding:** 20px"
      - "**Element gap:** 10-20px"

  components:

    ghost_outlined_button:
      role: "Primary call-to-action on editorial banners (e.g. 'View Editorial')"

      info: "1px solid #000000 border, no fill, transparent background, #000000 text. Padding approximately 10px 20px. No border-radius — completely sharp corners. Text in Favorit SSENSE Inter at 11px weight 400, uppercase, letter-spacing normal. On hover: fill becomes #000000, text inverts to #ffffff. This is the only interactive element style in the system."

    top_navigation_bar:
      role: "Primary site navigation across all pages"

      info: "White (#ffffff) background, no border, no shadow. Left-aligned category links (MENSWEAR, WOMENSWEAR, EVERYTHING ELSE, SALE, SEARCH) in Favorit SSENSE Inter 11px weight 400, uppercase, #000000. Centered logo wordmark 'SSENSE' in larger weight. Right-aligned utility links (ENGLISH, LOGIN, WISHLIST, BAG). All text tracking normal, all elements vertically centered with ~20px horizontal padding."

    editorial_hero_block:
      role: "Landing page hero section combining headline + editorial photography"

      two_column_layout: "left column holds serif headline (JHA Times Now, 56px, weight 400, #333333) stacked over sans-serif editorial description (Favorit SSENSE Inter, 19-20px, weight 400, #333333), with ghost outlined button below. Right column holds a full-bleed editorial photograph. No card container, no background fill, no dividers — content floats directly on the #ffffff canvas. Gap between columns approximately 40-55px."

    editorial_card_grid_item:
      role: "Content tiles in the secondary editorial grid below the hero"

      info: "Three-column grid of editorial content cards. Each card: top is a landscape photograph with no border-radius, no padding around image. Below image: 'RECENT' micro-label in ssense-fonts weight 700, 11px, uppercase, #000000. Then a headline in Favorit SSENSE Inter 14-19px, weight 400, #000000. Then a metadata line (category + date) in 11px weight 400, #888888. No card background, no border, no shadow — the photograph is the visual anchor."

    product_feature_card:
      role: "Featured product placement with dark moody photography"

      info: "Two-column product feature layout. Each column contains a product photograph on a gradient background (dark teal-to-gray), sharp corners, no border. Below: 'Featured' label in 11px weight 400, then 'NEW ARRIVALS' in Favorit SSENSE Inter ~19px weight 400. The dark photographic backgrounds create tonal contrast against the white page without any colored UI elements."

    promotional_banner_strip:
      role: "Site-wide announcement bar at the very top"

      info: "Full-width horizontal strip at the top of the page. Very light background, thin bottom border. Centered text in Favorit SSENSE Inter 11px weight 400, #000000. A small close (×) icon in the far right corner. No padding drama — sits as a single-line 30-40px tall band."

    header_logo_mark:
      role: "Brand wordmark centered in navigation"

      info: "Text-only 'SSENSE' wordmark in Favorit SSENSE Inter, approximately 19-20px, weight 400, #000000, centered in the top navigation bar. No symbol, no tagline — the wordmark IS the logo. Functions as a home link."

    micro_category_label:
      role: "Metadata and category tagging on editorial content"

      info: "ssense-fonts family at weight 700, 11px, #000000, uppercase. Always precedes an editorial headline. Sets a typographic rhythm: bold tag → regular headline → muted meta. Letter-spacing normal, line-height 1.0 — sits tight against the line below."

    meta_description_line:
      role: "Secondary descriptive text under editorial headlines"

      info: "Favorit SSENSE Inter 14-15px, weight 400, #888888. Pairs with the black headline above to create a two-tone label hierarchy. The 3:1 contrast between #000000 headline and #888888 meta is the system's only typographic color gradient."

    editorial_paragraph_block:
      role: "Long-form editorial body text in hero sections"

      info: "JHA Times Now serif, 20px, weight 100 (hairline), #333333, line-height 1.30. The ultra-light serif weight for body copy is a signature anti-pattern — most luxury sites use regular or medium for body. This creates a whisper-thin text quality that feels typeset, not typed. No maximum width constraint visible — text flows within its column."

  do_s_and_don_ts:

    do:
      - "Use only the seven neutral colors — no accent colors, no brand colors, no fills on interactive elements"
      - "Set display headlines at 56-95px with letter-spacing of -0.033em to -0.047em for compressed editorial weight"
      - "Use weight 100 (hairline) for serif body text at 20px — the thinness is the signature"
      - "Keep all component corners at 0px radius — SSENSE is a sharp-edged system"
      - "Use the Ghost Outlined Button (1px #000000 border, transparent fill) for all calls to action"
      - "Maintain 64px vertical gaps between major sections and 10-20px gaps between related elements"
      - "Pair serif editorial headlines (JHA Times Now) with sans-serif body text (Favorit SSENSE Inter) — the contrast is the system"

    don_t:
      - "Never add a colored CTA button — the system has no primary action color"
      - "Never use border-radius above 0px on any UI element"
      - "Never use a sans-serif font for editorial display headlines above 38px"
      - "Never use letter-spacing above normal on any element — tracking is always negative or zero"
      - "Never place content on anything other than #ffffff or #f4f4f4 surfaces"
      - "Never use drop shadows or elevation effects — the system is flat"
      - "Never use bold weights (600-700) for anything other than the 11px micro-tag label"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f4f4f4` | Page background — the warm-white gallery wall |"
    info: "| 1 | Card Surface | `#ffffff` | Elevated content areas, hero backgrounds, product tiles |"
    info: "| 2 | Alt Band | `#e8e8e8` | Subtle section alternation, ghost hover states |"

  elevation:

    info: "SSENSE is a completely flat design system. No drop shadows, no box-shadows, no elevation effects of any kind. Visual separation is achieved exclusively through whitespace, the natural contrast between #ffffff and #f4f4f4 surfaces, and 1px hairline borders in #979797. The flatness reinforces the editorial print-magazine metaphor — like ink on paper, not digital UI."

  imagery:

    info: "Photography is the sole source of color and visual energy in this system. Editorial fashion photography dominates: full-bleed or near-full-bleed landscape and portrait crops of models in designer clothing, product photography on gradient backgrounds (dark teal-to-gray studio shots), and environmental lifestyle imagery. Images have sharp corners with no border-radius, no overlays, no duotone treatment — they appear as raw photographic prints placed on the white page. No illustrations, no icons (except the × close button and minimal UI markers), no 3D renders, no abstract graphics. The images do all the emotional and chromatic work that a typical e-commerce site would delegate to color and decoration."

  agent_prompt_guide:

  quick_color_reference:
    - "text (primary): #000000"
    - "text (body/editorial): #333333"
    - "text (muted/meta): #888888"
    - "background (canvas): #f4f4f4"
    - "background (card): #ffffff"
    - "border (hairline): #979797"
    - "primary action: no distinct CTA color"

  3_5_example_component_prompts:
    - "**Editorial Hero Section**: White (#ffffff) background, no card container. Left column: headline in JHA Times Now 56px weight 400, #333333, letter-spacing -0.04em, line-height 1.07. Below: body text in JHA Times Now 20px weight 100, #333333. Below: Ghost Outlined Button (1px solid #000000, no fill, 10px 20px padding, 11px Favorit SSENSE Inter text). Right column: full-bleed editorial photograph, sharp corners. Column gap: 40px."

    - "**Editorial Grid Card**: No background, no border, no shadow. Top: landscape editorial photograph, sharp corners. Below image: 'RECENT' in ssense-fonts 11px weight 700 #000000. Below: headline in Favorit SSENSE Inter 19px weight 400, #000000, letter-spacing -0.013em. Below: meta line 'Category | Date' in Favorit SSENSE Inter 11px weight 400, #888888."

    - "**Top Navigation Bar**: White (#ffffff) background, no border, no shadow, ~50px height. Left: category links in Favorit SSENSE Inter 11px weight 400 uppercase #000000, 20px horizontal spacing. Center: 'SSENSE' wordmark in Favorit SSENSE Inter 19px weight 400. Right: utility links (ENGLISH, LOGIN, etc.) same style as left."

    - "**Ghost Outlined Button**: Transparent background, 1px solid #000000 border, 0px radius. Padding 10px vertical, 20px horizontal. Text: Favorit SSENSE Inter 11px weight 400, uppercase, #000000, letter-spacing normal. On hover: background #000000, text #ffffff."

    - "**Promotional Banner**: Full-width, #f4f4f4 background, 1px solid #979797 bottom border, 35px height. Centered text in Favorit SSENSE Inter 11px weight 400 #000000. Right-aligned × close icon in #000000."

  similar_brands:

    - "**Mr Porter** — Same editorial-magazine approach to luxury e-commerce — large serif display type, monochrome palette, photography as the sole color source, sharp-cornered ghost buttons, and generous whitespace between editorial sections"
    - "**The Row** — Identical restraint philosophy — pure white canvas, no accent colors, hairline-thin sans-serif navigation, serif editorial headlines, and an absolute refusal to use UI decoration that would distract from the product"
    - "**COS** — Same ultra-minimal monochrome system with oversized sans-serif display type, negative letter-spacing on large text, completely flat surfaces with no shadows, and sharp 0px corners on all components"
    - "**Aesop** — Shares the warm-white (#f4f4f4) canvas, deep typographic contrast between display and body sizes, and a near-total absence of color — both treat photography and typography as the entire visual language"
    - "**Net-a-Porter** — Same luxury editorial e-commerce model — large-scale editorial headlines, monochrome navigation, content-card grids with image-dominant cards, and a flat no-elevation component system"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #000000;
          --color-graphite: #333333;
          --color-silver: #979797;
          --color-ash: #888888;
          --color-marble: #f4f4f4;
          --color-paper: #ffffff;
          --color-mist: #e8e8e8;
        
          /* Typography — Font Families */
          --font-jha-times-now: 'JHA Times Now', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-favorit-ssense-inter: 'Favorit SSENSE Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ssense-fonts-micro-tag: 'ssense-fonts (micro-tag)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-favorit-ssense-inter1: 'Favorit SSENSE Inter1', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1;
          --text-body-sm: 14px;
          --leading-body-sm: 1.37;
          --tracking-body-sm: -0.056px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.06px;
          --text-heading-sm: 29px;
          --leading-heading-sm: 1.19;
          --tracking-heading-sm: -0.522px;
          --text-heading: 38px;
          --leading-heading: 1.16;
          --tracking-heading: -1.254px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1.07;
          --tracking-heading-lg: -2.24px;
          --text-display: 95px;
          --leading-display: 0.99;
          --tracking-display: -4.465px;
        
          /* Typography — Weights */
          --font-weight-thin: 100;
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-31: 31px;
          --spacing-40: 40px;
          --spacing-55: 55px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-105: 105px;
          --spacing-119: 119px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 64px;
          --card-padding: 20px;
          --element-gap: 10-20px;
        
          /* Border Radius */
          --radius-lg: 10px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-links: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas: #f4f4f4;
          --surface-card-surface: #ffffff;
          --surface-alt-band: #e8e8e8;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #000000;
          --color-graphite: #333333;
          --color-silver: #979797;
          --color-ash: #888888;
          --color-marble: #f4f4f4;
          --color-paper: #ffffff;
          --color-mist: #e8e8e8;
        
          /* Typography */
          --font-jha-times-now: 'JHA Times Now', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-favorit-ssense-inter: 'Favorit SSENSE Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ssense-fonts-micro-tag: 'ssense-fonts (micro-tag)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-favorit-ssense-inter1: 'Favorit SSENSE Inter1', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1;
          --text-body-sm: 14px;
          --leading-body-sm: 1.37;
          --tracking-body-sm: -0.056px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.06px;
          --text-heading-sm: 29px;
          --leading-heading-sm: 1.19;
          --tracking-heading-sm: -0.522px;
          --text-heading: 38px;
          --leading-heading: 1.16;
          --tracking-heading: -1.254px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1.07;
          --tracking-heading-lg: -2.24px;
          --text-display: 95px;
          --leading-display: 0.99;
          --tracking-display: -4.465px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-31: 31px;
          --spacing-40: 40px;
          --spacing-55: 55px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-105: 105px;
          --spacing-119: 119px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-lg: 10px;
        }