halfhelix___style_reference:
  info: "> Gallery wall on white marble — restrained, text-led, photographic"

  theme: "light"

  info: "Domaine operates as a luxury editorial canvas: near-total achromatic palette, one neutral grotesque typeface at weight 400 only, and display-sized headlines that dominate the viewport. The interface recedes so that full-bleed lifestyle and product photography can carry the brand — every UI element is a quiet frame for the image, never a competing surface. Typography is the primary interface: massive stacked words ('Strategy / Creative / Technology / Marketing'), tight tracking, and line-heights approaching 1.0 create a magazine-spread density. Components are minimal and text-driven — ghost links, thin underline rules, 3px corners, no shadows, no filled color buttons. The single chromatic accent (#2749ff) appears so rarely it functions more as a hyperlink convention than a brand color."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, inverse text on dark blocks |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, primary borders, hairline rules, icon strokes, logo |"
    info: "| Carbon | `#262626` | `--color-carbon` | Dark surface blocks, inverse badges, input fields on dark |"
    info: "| Graphite | `#484a4c` | `--color-graphite` | Footer borders, subtle dark dividers, secondary dark UI |"
    info: "| Steel | `#686c6d` | `--color-steel` | Secondary body text, muted captions, low-emphasis borders |"
    info: "| Fog | `#a5a7a8` | `--color-fog` | Disabled borders, lowest-emphasis outlines |"
    info: "| Ash | `#dbdbdb` | `--color-ash` | Light dividers, icon borders, subtle field separators |"
    info: "| Mist | `#ededed` | `--color-mist` | Soft surface wash behind cards and tags, ghost link fill, badge background |"
    info: "| Smoke | `#808080` | `--color-smoke` | Mid-tone surface for secondary panels, muted button fills |"
    info: "| Signal Blue | `#2749ff` | `--color-signal-blue` | Violet wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color |"

  tokens___typography:

    suisse_intl___suisse_intl___detected_in_extracted_data_but_not_described_by_ai____font_suisse_intl:
      - "**Weights:** 400"
      - "**Sizes:** 12px, 13px, 14px, 16px, 18px, 24px, 32px, 40px, 48px"
      - "**Line height:** 1, 1.1, 1.2"
      - "**Letter spacing:** -0.04, -0.02, -0.01"
      - "**Role:** Suisse Intl — detected in extracted data but not described by AI"

    suisse_int_l___sole_typeface_across_every_context___navigation__body__display_headlines__buttons__badges__inputs__the_brand_carries_a_single_weight_400_and_a_single_letterform_language__creating_typographic_unity_without_hierarchy_through_weight__the_tight_line_heights_1_00_1_20_and_negative_tracking_across_all_sizes_make_text_feel_architectural_rather_than_comfortable_____font_suisse_intl:
      - "**Substitute:** Inter, Helvetica Neue, Neue Haas Grotesk"
      - "**Weights:** 400"
      - "**Sizes:**"
      - "**Line height:** 1.00 (display), 1.10 (headings), 1.20 (body)"
      - "**Letter spacing:** -0.04em at 48px display, -0.02em at 24–40px headings, -0.01em at 14–18px body"
      - "**Role:** Sole typeface across every context — navigation, body, display headlines, buttons, badges, inputs. The brand carries a single weight (400) and a single letterform language, creating typographic unity without hierarchy through weight. The tight line-heights (1.00–1.20) and negative tracking across all sizes make text feel architectural rather than comfortable."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | -0.12px | `--text-caption` |"
      info: "| body | 14px | 1.2 | -0.14px | `--text-body` |"
      info: "| body-md | 16px | 1.2 | -0.16px | `--text-body-md` |"
      info: "| subheading | 18px | 1.2 | -0.18px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.1 | -0.48px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.1 | -0.64px | `--text-heading` |"
      info: "| heading-lg | 40px | 1.1 | -0.8px | `--text-heading-lg` |"
      info: "| display | 48px | 1 | -1.92px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 29 | 29px | `--spacing-29` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 3px |"
      info: "| pills | 1440px |"
      info: "| badges | 3px |"
      info: "| inputs | 3px |"
      info: "| buttons | 3px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 60px"
      - "**Card padding:** 15px"
      - "**Element gap:** 5px"

  components:

    minimal_top_navigation:
      role: "Primary site navigation"

      info: "White background, 0 border. Logo flush-left in Ink Black at 14px. Centered nav links (Work, Services, Insights, Partners, Contact) at 14px weight 400 Ink Black with tight 5–10px row gaps. Right-aligned utility icons (bell, chat) at 16px. No background fill, no border, no shadow. Padding 12px vertical."

    underline_text_link:
      role: "Inline navigation and content links"

      info: "Ink Black 14–18px, 1px solid Ink Black bottom border applied directly to the text baseline. No background. 3px corner radius does not apply. The underline is the entire visual treatment — no color shift on hover, no fill change."

    ghost_link_pill:
      role: "Secondary call-to-action"

      info: "Mist (#ededed) background fill, 3px radius, 10px vertical / 15px horizontal padding, 14px Suisse Int'l weight 400 Ink Black. No border. Appears as a subdued alternative to text links — used for actions like 'About Our Services' and search affordances."

    full_bleed_hero_frame:
      role: "Opening viewport"

      info: "Edge-to-edge photographic background covering the entire viewport. Headline overlays bottom-left in white at 40–48px display weight, tracking -0.04em, line-height 1.0. Small brand tag in 12px white above the headline. No gradient overlay — the image provides its own contrast."

    project_card_editorial_grid:
      role: "Portfolio tile"

      info: "No visible card chrome. Tall image at native aspect (roughly 3:4) with no border and no radius. Brand name overlaid top-left in white at 18–24px, weight 400, tracking -0.02em. Caption sits in a 3-column grid below the image at 12–13px secondary text color."

    stat_block_row:
      role: "Quantitative proof points"

      info: "Inline horizontal arrangement. Large number at 24–32px Ink Black weight 400, descriptor at 12–14px Steel (#686c6d). 3px or 5px gap between number and label. No dividers between stat groups, no background."

    service_word_stack:
      role: "Service taxonomy display"

      info: "Vertically stacked words (Strategy / Creative / Technology / Marketing) at 40–48px display, weight 400, line-height 1.0, Ink Black, letter-spacing -0.04em. Each word on its own line. Section label 'SERVICES' above in 12px tracking-out or small-caps style. No decoration, no icons — typography alone carries the hierarchy."

    stats_inline_annotation:
      role: "Supporting data labels"

      info: "12–13px text in Steel (#686c6d), 3–5px from the metric value it describes. Used to qualify portfolio numbers and service descriptions."

    cookie_consent_panel:
      role: "Privacy dialog"

      info: "Fixed bottom-right, semi-transparent dark overlay (~rgba(0,0,0,0.55)) with white text and 3px radius. Three buttons: 'Accept All' (Ink Black fill, white text), 'Accept Selection' (outlined white border, white text), 'Reject All' (outlined white border, white text). 10px 15px button padding, 3px radius."

    dark_featured_block:
      role: "Highlighted partner callout"

      info: "Carbon (#262626) background, white text. Small green certification badge or status icon top-left at 12px. Body copy in 14px white. This is the only block where the palette inverts — used sparingly for high-priority partner or partner-program content."

    search_field_header:
      role: "Quick content search"

      info: "No visible border. White background, 14px placeholder text in Steel. Magnifying-glass icon at 14px Ink Black. Inline with the navigation row, roughly 280px wide. 3px corner radius only if a background fill is applied."

    notification_badge:
      role: "Status indicator"

      info: "Mist (#ededed) or Carbon (#262626) background, 12px Ink Black or white text, 3px radius, 3–5px vertical padding. Appears as a small pill adjacent to utility icons."

    input_field:
      role: "Form input"

      info: "No border. 1px bottom border in Ash (#dbdbdb) or no rule at all. 14px Ink Black text, 1.2 line-height. Placeholder in Steel. 3px radius if the field uses a fill. Generous internal padding (10–15px vertical)."

  do_s_and_don_ts:

    do:
      - "Use Suisse Int'l at weight 400 exclusively — never introduce bold, semibold, or italic variants to create hierarchy; use size and tracking instead"
      - "Set display headlines at 40–48px with line-height 1.0 and letter-spacing -0.04em"
      - "Anchor every interactive element with a 1px Ink Black underline; do not add colored fills to indicate clickability"
      - "Keep corner radii at 3px for all rectangles; use 1440px only for full-pill elements like round tags"
      - "Let photography fill the viewport edge-to-edge with no border, shadow, or radius"
      - "Maintain an achromatic palette: black, white, and the five-step gray scale (#262626 → #dbdbdb) for all UI surfaces"
      - "Use the Mist (#ededed) fill for ghost elements that need subtle separation from white without introducing contrast"

    don_t:
      - "Do not add box-shadows to cards, buttons, or images — the system is deliberately shadowless"
      - "Do not introduce additional accent colors beyond Signal Blue (#2749ff), and use it sparingly"
      - "Do not use bold or semibold font weights — weight 400 across the entire typographic system is the signature"
      - "Do not add colored fill backgrounds to buttons; the system uses ghost (Mist fill) and text-link patterns only"
      - "Do not round corners beyond 3px on rectangles — sharp or near-sharp geometry defines the brand"
      - "Do not apply gradients, glows, or decorative color washes to surfaces or text"
      - "Do not increase line-height above 1.2 for body text or above 1.1 for headings — tight leading is a core visual identifier"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#ffffff` | Page background, default card surface |"
    info: "| 2 | Mist Wash | `#ededed` | Subtle elevated card, badge pill, ghost link fill |"
    info: "| 3 | Ash Line | `#dbdbdb` | Hairline dividers, low-contrast separators |"
    info: "| 4 | Smoke Panel | `#808080` | Mid-tone overlay, muted secondary surface |"
    info: "| 5 | Carbon Block | `#262626` | Dark inverse surface for featured blocks and badges |"

  elevation:

    info: "The design is intentionally shadowless. All separation between elements is achieved through typographic hierarchy, 1px borders in Ash or Ink Black, and subtle Mist (#ededed) surface fills — never through drop shadows, blur, or stacking effects. This creates the flat editorial-gallery feel where photographs appear printed onto the page rather than floating above it."

  imagery:

    info: "Full-bleed editorial photography dominates the visual language. Imagery is high-quality lifestyle and product photography: extreme close-ups of watches on skin, hands holding objects, furniture details, fashion in nature. All images are sharp, high-resolution, and unframed — they bleed to the viewport edges with no border, radius, or padding. The photographic style is warm-toned, naturally lit, and intimate. There is no illustration, no abstract graphics, and no iconography beyond simple line-based UI icons. The images function as the primary content and emotional carrier; UI is purely structural."

  layout:

    info: "Editorial, magazine-inspired layout with three core patterns. The hero is a full-viewport image with headline overlaid in the bottom-left corner, no gradient or scrim. Below, a three-column grid presents portfolio work as equally-weighted image tiles with overlaid brand names — the grid is uniform with no varying tile sizes. The services section uses a two-column asymmetric split: left column holds the vertically stacked display words and section label, right column holds a single paragraph of body copy and a small image collage. Vertical rhythm is consistent at roughly 60px between sections. Navigation is a single minimal row at the top — no sticky behavior visible, no sidebar, no mega-menu. Content is centered within a max-width of 1440px but frequently breaks to full-bleed for hero and image sections."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #000000 (primary), #686c6d (secondary)"
    - "background: #ffffff (canvas), #ededed (soft surface), #262626 (dark block)"
    - "border: #000000 (strong), #dbdbdb (light), #ededed (subtle)"
    - "accent: #2749ff (rare link/hover accent only)"
    - "primary action: no distinct CTA color"

  example_component_prompts:
    - "**Full-bleed hero section**: Viewport-height photographic background with no overlay. Headline at 48px Suisse Int'l weight 400, white, letter-spacing -1.92px, line-height 1.0, positioned bottom-left with 40px padding. Small 12px white tag above headline."

    - "**Service word stack**: Left column. Small 12px 'SERVICES' label in #686c6d above. Then four words stacked vertically: 'Strategy', 'Creative', 'Technology', 'Marketing' — each at 48px Suisse Int'l weight 400, #000000, line-height 1.0, letter-spacing -1.92px. No decoration between words."

    - "**Project portfolio card**: Tall image (3:4 aspect) filling its grid cell, no border, no radius. Brand name overlaid top-left in white at 18px Suisse Int'l weight 400, letter-spacing -0.36px. Caption row below image: 13px #686c6d text."

    - "**Ghost link button**: 14px Suisse Int'l weight 400, #000000 text, #ededed background fill, 3px corner radius, 10px vertical and 15px horizontal padding. No border. Used for secondary navigation like 'About Our Services'."

    - "**Stat annotation row**: Inline group — large number at 24px #000000, then 3px gap, then descriptor at 13px #686c6d. Example: '750+ Shopify sites launched'. No dividers, no background, no card wrapping."

  similar_brands:

    - "**Pentagram** — Same editorial gallery approach — massive type, achromatic palette, full-bleed photography, and zero reliance on colored UI to carry the brand"
    - "**Locomotive** — Shared Swiss-typographic discipline with tight tracking, single-weight headlines, and minimal interface chrome that lets imagery lead"
    - "**Hugo & Marie** — Agency sites that treat the portfolio as a printed magazine — high-contrast photography, stacked display words, and ghost-text link patterns"
    - "**Bureau Cool** — Achromatic luxury aesthetic with one neutral grotesque, 3px radii, and an editorial rhythm of image-then-statement"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-pure-white: #ffffff;
          --color-ink-black: #000000;
          --color-carbon: #262626;
          --color-graphite: #484a4c;
          --color-steel: #686c6d;
          --color-fog: #a5a7a8;
          --color-ash: #dbdbdb;
          --color-mist: #ededed;
          --color-smoke: #808080;
          --color-signal-blue: #2749ff;
        
          /* Typography — Font Families */
          --font-suisse-intl: 'Suisse Intl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: -0.12px;
          --text-body: 14px;
          --leading-body: 1.2;
          --tracking-body: -0.14px;
          --text-body-md: 16px;
          --leading-body-md: 1.2;
          --tracking-body-md: -0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.1;
          --tracking-heading-sm: -0.48px;
          --text-heading: 32px;
          --leading-heading: 1.1;
          --tracking-heading: -0.64px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.8px;
          --text-display: 48px;
          --leading-display: 1;
          --tracking-display: -1.92px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-29: 29px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 60px;
          --card-padding: 15px;
          --element-gap: 5px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-full: 1440px;
        
          /* Named Radii */
          --radius-cards: 3px;
          --radius-pills: 1440px;
          --radius-badges: 3px;
          --radius-inputs: 3px;
          --radius-buttons: 3px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-mist-wash: #ededed;
          --surface-ash-line: #dbdbdb;
          --surface-smoke-panel: #808080;
          --surface-carbon-block: #262626;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-pure-white: #ffffff;
          --color-ink-black: #000000;
          --color-carbon: #262626;
          --color-graphite: #484a4c;
          --color-steel: #686c6d;
          --color-fog: #a5a7a8;
          --color-ash: #dbdbdb;
          --color-mist: #ededed;
          --color-smoke: #808080;
          --color-signal-blue: #2749ff;
        
          /* Typography */
          --font-suisse-intl: 'Suisse Intl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: -0.12px;
          --text-body: 14px;
          --leading-body: 1.2;
          --tracking-body: -0.14px;
          --text-body-md: 16px;
          --leading-body-md: 1.2;
          --tracking-body-md: -0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.1;
          --tracking-heading-sm: -0.48px;
          --text-heading: 32px;
          --leading-heading: 1.1;
          --tracking-heading: -0.64px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.8px;
          --text-display: 48px;
          --leading-display: 1;
          --tracking-display: -1.92px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-29: 29px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-full: 1440px;
        }