numbered___style_reference:
  info: "> fashion editorial on black velvet. A near-black runway where a single face fills the frame and the only marks are white ink and a whispered bronze thread."

  theme: "dark"

  info: "Numbered operates as a fashion-editorial canvas: a deep ink-black void that lets full-bleed portrait photography and oversized typography do all the work. The interface is almost invisible — no buttons, no cards, no grids — just hairline white type floating over imagery and near-black panels. A single warm bronze tone (#bc9873) surfaces occasionally as a material accent against the monochrome severity, echoing the golden-hour skin tones in the photography. Whitespace is treated as a luxury material: sections are separated by 80–120px vertical gaps, content is anchored to wide left/right gutters of ~119–238px, and links are underlined plain text rather than interactive widgets. The system reads as a magazine spread, not a product UI."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#111111` | `--color-ink-black` | Primary canvas — full-page background, hero panels, footer. The dominant surface everything else floats over |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | All text, hairline borders, nav links, section labels. The only ink on the page; used at 100% opacity on dark surfaces and as a border-only accent on imagery |"
    info: "| Smoke | `#4f4f4f` | `--color-smoke` | Subtle hairline borders on navigation elements — recedes against the ink black, visible only on close inspection |"
    info: "| Bronze Veil | `#bc9873` | `--color-bronze-veil` | Orange wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color |"

  tokens___typography:

    aktiv_web_custom___substitute__inter_tight_or_s_hne___primary_workhorse___nav_labels_at_12_13px_weight_400__tracked__body_and_section_headings_at_25px_weight_400__line_height_1_2__mid_page_editorial_statements_at_54px_weight_400__line_height_1_2__and_the__cases___studies__two_line_heading_at__74px__the_signature_choice__weight_400_for_54_74px_display_sizes___no_bold_display__no_uppercase_shouting__headlines_read_as_confident_paragraphs__not_banners_____font_aktiv_web_custom_substitute_inter_tight_or_shne:
      - "**Substitute:** Inter Tight or Söhne"
      - "**Weights:** 400, 700"
      - "**Sizes:** 12, 13, 15, 25, 54, 74"
      - "**Line height:** 1.0, 1.2, 1.5, 2.0"
      - "**Role:** Primary workhorse — nav labels at 12–13px (weight 400, tracked), body and section headings at 25px (weight 400, line-height 1.2), mid-page editorial statements at 54px (weight 400, line-height 1.2), and the 'CASES / STUDIES' two-line heading at ~74px. The signature choice: weight 400 for 54–74px display sizes — no bold display, no uppercase shouting. Headlines read as confident paragraphs, not banners."

    editorial_display_serif_not_captured_in_data___visible_in_hero_wordmark___the__numbered__wordmark_uses_a_high_contrast_transitional_old_style_serif_with_sharp_terminals___the_only_non_sans_element_in_the_system__this_single_serif_mark_is_the_brand_s_typographic_signature__it_appears_once_per_page_as_a_hero_anchor_and_nowhere_else__suggested_substitutes__pp_editorial_new__gt_sectra__or_canela_____font_editorial_display_serif_not_captured_in_data_visible_in_hero_wordmark:
      - "**Substitute:** PP Editorial New or GT Sectra"
      - "**Weights:** 400"
      - "**Sizes:** viewport-scale, est. 200–300px"
      - "**Line height:** 1.0"
      - "**Role:** The 'Numbered' wordmark uses a high-contrast transitional/old-style serif with sharp terminals — the only non-sans element in the system. This single serif mark is the brand's typographic signature; it appears once per page as a hero anchor and nowhere else. Suggested substitutes: PP Editorial New, GT Sectra, or Canela."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | — | `--text-caption` |"
      info: "| body | 15px | 1.5 | — | `--text-body` |"
      info: "| subheading | 25px | 1.2 | — | `--text-subheading` |"
      info: "| heading | 54px | 1.2 | — | `--text-heading` |"
      info: "| display | 74px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 35 | 35px | `--spacing-35` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 59 | 59px | `--spacing-59` |"
      info: "| 79 | 79px | `--spacing-79` |"
      info: "| 119 | 119px | `--spacing-119` |"
      info: "| 178 | 178px | `--spacing-178` |"
      info: "| 238 | 238px | `--spacing-238` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 0px (no cards) |"
      info: "| images | 0px (photography is edge-to-edge, never rounded) |"
      info: "| buttons | 0px (no buttons) |"

    layout:

      - "**Section gap:** 99px"
      - "**Element gap:** 20-35px"

  components:

    hero_wordmark:
      role: "Brand anchor overlaid on full-bleed editorial photography"

      info: "The serif 'Numbered' wordmark rendered at viewport-bleed scale (est. 200–300px), white #ffffff, 0px radius, no background — sits directly on the photograph. Anchors the page; appears once."

    centered_nav_link:
      role: "Minimal top-center navigation"

      info: "Single 'CONTACT' label at 12–13px aktiv-web weight 400, white #ffffff, tracked uppercase, positioned absolute top-center of the viewport. No logo in nav, no menu items, no hamburger. This is the entire navigation."

    editorial_headline_block:
      role: "Primary page statement on dark panels"

      info: "54–74px aktiv-web weight 400, white #ffffff, line-height 1.0–1.2, left-aligned with ~238px left gutter. No bold weight, no color accent — just large quiet type. The 'CASES / STUDIES' heading stacks on two lines as a signature device."

    underlined_text_link:
      role: "All interactive navigation within content"

      info: "12–13px aktiv-web weight 400, white #ffffff, 1px white underline, 3px padding-bottom for the underline offset. Examples: 'ABOUT US', 'VIEW ALL', 'CONTACT'. No buttons, no pills, no filled rectangles — the underline IS the affordance."

    full_bleed_case_study_image:
      role: "Project showcase panel"

      info: "Edge-to-edge photography, 0px radius, no border, no overlay. Project metadata ('COTERIE / REDEFINING DIAPERS FOR MODERN PARENTS') sits as small white text top-left in two lines, 12–13px uppercase tracked."

    description_caption:
      role: "Subtitle under hero wordmark"

      info: "15px aktiv-web weight 400, white #ffffff, line-height 1.5, centered. Example: 'Design, Content Production & Technology — Amsterdam, Paris & New York'. Quiet functional text beneath the display mark."

    bronze_accent_panel:
      role: "Warm secondary surface for tonal break"

bc9873_background__no_border__0px_radius__used_as_a_full_width_band__no_text_sits_on_this_surface___it_functions_as_a_color_only_breath_between_black_sections__echoing_the_photography_s_palette:

  do_s_and_don_ts:

    do:
      - "Use #111111 as the default canvas for every section that isn't full-bleed photography"
      - "Set body type at 15px aktiv-web weight 400, line-height 1.5"
      - "Set display/headline type at 54–74px aktiv-web weight 400 — never bold, never uppercase"
      - "Anchor content with 119–238px left/right page gutters"
      - "Render navigation links as underlined 12–13px white text — no buttons, no pills"
      - "Use #bc9873 only as a full-bleed accent surface, never for text or interactive elements"
      - "Let photography bleed to all four viewport edges with 0px radius"

    don_t:
      - "Don't add cards, rounded corners, or shadows — this system is flat and edge-to-edge"
      - "Don't use color for interactive states — white-on-black underline text is the only affordance"
      - "Don't bold the display sizes — weight 400 at 74px is the signature, weight 700 would break it"
      - "Don't place text on #bc9873 — the bronze surface is decorative only, not a text background"
      - "Don't center body content — everything left-aligns to a wide left gutter"
      - "Don't add a second typeface beyond the serif wordmark and aktiv-web — the system is deliberately bilingual: one display serif used once, one sans used everywhere else"
      - "Don't use more than one white opacity level — text and borders are #ffffff at 100%, no grays for type"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Ink Black Canvas | `#111111` | Primary page background, all text panels, hero sections over flat color |"
    info: "| 1 | Bronze Accent Band | `#bc9873` | Full-bleed warm surface for tonal break between black sections |"
    info: "| 2 | Photographic Surface | `#000000` | Full-bleed editorial photography replaces the black canvas on hero and case study panels |"

  elevation:

    info: "The system is deliberately shadowless. All surfaces are flat and edge-to-edge. Depth is created only by the contrast between full-bleed photography and flat ink-black panels — not by box-shadows. The absence of elevation is a signature: this is a magazine spread, not a software interface."

  imagery:

    info: "The site is image-dominant in a single specific way: full-bleed editorial portrait photography occupies the entire viewport on hero and case study panels. Treatment is tight close-ups of faces — cropped at forehead and chin, no lifestyle context, no product staging. Color treatment is warm golden-hour naturalism with rich skin tones, soft shadows, and organic textures (knit fabrics, hair, jewelry). Photography is never contained or rounded — it bleeds to all four viewport edges with raw unframed edges. No illustrations, no icons, no product screenshots, no abstract graphics. Icons, if present, would be invisible against the editorial minimalism."

  layout:

    info: "Full-bleed page model with no max-width container. Each section occupies the full viewport: a photograph fills the screen with the serif wordmark overlaid, then cuts to a flat #111111 panel with a left-anchored editorial headline and small underlined link below it, then another full-bleed photograph. Navigation is a single absolute-positioned 'CONTACT' link top-center — no bar, no logo. Content is left-aligned to a ~238px gutter, never centered. Section rhythm: photograph → black panel → black panel with stacked heading → photograph → bronze band. Vertical spacing between sections is generous (80–120px). The grid is effectively a single column — no multi-column card grids, no feature matrices, no pricing tables. Density is extremely low: 3–4 elements per viewport at most."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #ffffff"
    - "background: #111111"
    - "border: #ffffff (hairline, 1px)"
    - "accent: #bc9873 (surface only, never text)"
    - "muted border: #4f4f4f"
    - "primary action: no distinct CTA color"

    info: "Example Component Prompts:"

    - "**Hero Panel**: Full-bleed photograph filling the viewport. Overlay a serif wordmark in #ffffff at ~240px, centered, on top of the image. Position a 'CONTACT' label at 12px aktiv-web weight 400, #ffffff, uppercase, letter-spacing tracked, absolute top-center of the viewport with 20px top padding. Below the wordmark, add a 15px #ffffff caption in aktiv-web weight 400, centered, reading as quiet subtitle text."

    - "**Editorial Statement Section**: Background #111111, full-width. Left-aligned headline at 74px aktiv-web weight 400, #ffffff, line-height 1.0, with 238px left margin. Below it, a 12px 'ABOUT US' link in #ffffff with 1px white underline, same 238px left margin. Section padding-top 99px, padding-bottom 99px."

    - "**Full-Bleed Case Study**: Full-viewport photograph, 0px radius, edge-to-edge. Top-left corner: 12px uppercase tracked text in #ffffff reading as project name on line one and tagline on line two. No other overlay elements."

    - "**Bronze Accent Band**: Full-width #bc9873 background, 0px radius, height ~60vh. No text, no images, no interactive elements — decorative warm surface that breaks the black sequence."

    - "**Two-Line Stacked Heading**: 74px aktiv-web weight 400, #ffffff, line-height 1.0, left-aligned with 238px left gutter. Two short words stacked vertically, each on its own line (e.g., 'CASES' / 'STUDIES'). A 'VIEW ALL' underlined link at 12px positioned to the right of the second line."

  similar_brands:

    - "**Bureau Cool** — Same editorial-agency language — full-bleed photography, single oversized display type, near-zero UI chrome, black canvas as default"
    - "**Locomotive** — Same fashion-editorial restraint — dark backgrounds, large quiet type at regular weight, underlined text links as the only affordance, photography bleeding to viewport edges"
    - "**Hugues Cluzet portfolio sites (e.g., Breed)** — Same typographic bravery — weight 400 at 70+px, generous negative space, warm accent tones borrowed from photography, no cards or grids"
    - "**Resn** — Same creative-agency-as-art-object positioning — full-viewport imagery, minimal nav (often a single word), type that breathes rather than fills"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #111111;
          --color-paper-white: #ffffff;
          --color-smoke: #4f4f4f;
          --color-bronze-veil: #bc9873;
        
          /* Typography — Font Families */
          --font-aktiv-web-custom-substitute-inter-tight-or-shne: 'aktiv-web (custom) / substitute: Inter Tight or Söhne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-editorial-display-serif-not-captured-in-data-visible-in-hero-wordmark: 'Editorial display serif (not captured in data — visible in hero wordmark)', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body: 15px;
          --leading-body: 1.5;
          --text-subheading: 25px;
          --leading-subheading: 1.2;
          --text-heading: 54px;
          --leading-heading: 1.2;
          --text-display: 74px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-6: 6px;
          --spacing-35: 35px;
          --spacing-40: 40px;
          --spacing-59: 59px;
          --spacing-79: 79px;
          --spacing-119: 119px;
          --spacing-178: 178px;
          --spacing-238: 238px;
        
          /* Layout */
          --section-gap: 99px;
          --element-gap: 20-35px;
        
          /* Named Radii */
          --radius-cards: 0px (no cards);
          --radius-images: 0px (photography is edge-to-edge, never rounded);
          --radius-buttons: 0px (no buttons);
        
          /* Surfaces */
          --surface-ink-black-canvas: #111111;
          --surface-bronze-accent-band: #bc9873;
          --surface-photographic-surface: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #111111;
          --color-paper-white: #ffffff;
          --color-smoke: #4f4f4f;
          --color-bronze-veil: #bc9873;
        
          /* Typography */
          --font-aktiv-web-custom-substitute-inter-tight-or-shne: 'aktiv-web (custom) / substitute: Inter Tight or Söhne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-editorial-display-serif-not-captured-in-data-visible-in-hero-wordmark: 'Editorial display serif (not captured in data — visible in hero wordmark)', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body: 15px;
          --leading-body: 1.5;
          --text-subheading: 25px;
          --leading-subheading: 1.2;
          --text-heading: 54px;
          --leading-heading: 1.2;
          --text-display: 74px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-35: 35px;
          --spacing-40: 40px;
          --spacing-59: 59px;
          --spacing-79: 79px;
          --spacing-119: 119px;
          --spacing-178: 178px;
          --spacing-238: 238px;
        }