extract___style_reference:
  info: "> Editorial monolith on gallery paper"

  theme: "light"

  info: "Extract operates as an editorial gallery space: a white canvas interrupted by one pastel mint wash, a single monumental wordmark, and confident body type. The visual system is almost entirely achromatic — near-black ink on white paper — with #e7feda mint appearing only as section-level atmospheric color, never as a UI accent or button fill. Hierarchy is built through extreme typographic scale contrast (104px display vs 19px body) rather than color, weight, or decoration. Components are flat and thin: hairline borders, ~9px radii, no shadows, no gradients. The navigation is a floating pill that hovers over content, reinforcing the gallery metaphor — visitors walk through curated rooms rather than scrolling a page."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Gallery White | `#ffffff` | `--color-gallery-white` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color |"
    info: "| Ink Black | `#070707` | `--color-ink-black` | Primary text, hairline borders, filled buttons, nav text — the structural linework of the entire system; Dark surface for project cards and editorial spreads — the inverse of the canvas, used to make featured work feel like a framed plate |"
    info: "| Spearmint Wash | `#e7feda` | `--color-spearmint-wash` | Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color |"

  tokens___typography:

    feature_deck___display_and_section_heading_face_used_exclusively_for_monumental_wordmark_treatments__the_104px__extract__lockup_and_44px_subheadings_carry_the_entire_brand_voice_through_scale_alone___no_other_display_serif_or_grotesque_is_needed_____font_feature_deck:
      - "**Substitute:** Bricolage Grotesque Display, Archivo Black, or GT Walsheim Bold"
      - "**Weights:** 400"
      - "**Sizes:** 44px, 104px"
      - "**Line height:** 1.25, 1.50"
      - "**Role:** Display and section-heading face used exclusively for monumental wordmark treatments. The 104px 'Extract' lockup and 44px subheadings carry the entire brand voice through scale alone — no other display serif or grotesque is needed."

    abc_diatype___universal_workhorse___body_copy_18_19px__nav_and_meta_19px__subheadings_21px__and_card_titles_34px__weight_700_is_used_sparingly_for_emphasis_within_body_contexts__the_tight_1_25_line_height_on_larger_sizes_keeps_the_editorial_density_____font_abc_diatype:
      - "**Substitute:** Inter, Manrope, or Söhne"
      - "**Weights:** 400, 700"
      - "**Sizes:** 18px, 19px, 21px, 34px"
      - "**Line height:** 1.25, 1.40, 1.50, 2.00"
      - "**Role:** Universal workhorse — body copy (18-19px), nav and meta (19px), subheadings (21px), and card titles (34px). Weight 700 is used sparingly for emphasis within body contexts. The tight 1.25 line-height on larger sizes keeps the editorial density."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body-sm | 18px | 1.5 | — | `--text-body-sm` |"
      info: "| subheading | 21px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 34px | 1.4 | — | `--text-heading-sm` |"
      info: "| heading | 44px | 1.25 | — | `--text-heading` |"
      info: "| display | 104px | 1.25 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 23 | 23px | `--spacing-23` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 37 | 37px | `--spacing-37` |"
      info: "| 54 | 54px | `--spacing-54` |"
      info: "| 59 | 59px | `--spacing-59` |"
      info: "| 65 | 65px | `--spacing-65` |"
      info: "| 74 | 74px | `--spacing-74` |"
      info: "| 93 | 93px | `--spacing-93` |"
      info: "| 111 | 111px | `--spacing-111` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 9px |"
      info: "| buttons | 5px |"
      info: "| navPill | 9999px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 59px"
      - "**Card padding:** 19px"
      - "**Element gap:** 19px"

  components:

    floating_pill_navigation:
      role: "Persistent site navigation"

      white_pill_shaped_bar_border_radius: "9999px) with thin #070707 border, 1px stroke. Contains 4 text links (Projects, Latest, About us, Contact) in ABC Diatype 19px weight 400, #070707. Floats centered over content with a subtle white fill that occludes the layer beneath. No shadow — separation comes from the border alone."

    display_wordmark:
      role: "Brand identity at hero scale"

      info: "The literal word 'Extract' set in Feature Deck at 104px, #070707, line-height 1.0. Occupies the full content width and bleeds visually off the right edge. This is not a logo lockup — it IS the page. Below it, a serif tagline at 34px (ABC Diatype 400, line-height 1.4) functions as a quiet mission statement."

    editorial_project_card_dark:
      role: "Featured work showcase on light canvas"

070707_background__9_3px_border_radius__no_shadow__contains_a_full_bleed_image_or_typographic_spread_e_g__a_large_white_serif___or_a_magazine_cover__padding_is_internal_to_the_media__the_card_itself_is_flush__width_adapts_to_a_2_column_or_3_column_grid:

    news_article_card:
      role: "Editorial/blog entry on mint section"

      info: "Transparent background on #e7feda canvas. Top: 9.3px-radius image (16:10 or similar editorial ratio). Title in ABC Diatype 19px weight 700, #070707. Body excerpt in ABC Diatype 18px weight 400, #070707, line-height 1.5. No border, no shadow — separation is purely typographic and spatial."

    hairline_section_divider:
      role: "Vertical separation between content zones"

      info: "1px solid #070707 line spanning the content width. Used between the project grid and the 'Recent projects' heading, and below the news section. No gaps above/below — the line touches adjacent content, creating a sharp editorial break."

    ghost_text_link:
      role: "Inline navigation ('View all', project titles)"

      info: "ABC Diatype 19px weight 400, #070707, with a 1px underline offset 4px from baseline. Underline is the only hover affordance — no color change, no background. Treated as editorial annotation, not a UI button."

    outlined_input_field:
      role: "Form input for contact/newsletter"

      info: "White background, 4.6px border-radius, 1px #070707 border. Padding 9px vertical, 19px horizontal. Placeholder and value in ABC Diatype 19px weight 400. No focus ring color change — the existing border simply thickens to 2px on focus."

    hero_image_plate:
      role: "Full-bleed editorial photography"

      info: "Large photographic image (warm amber/orange tones) with 9.3px border-radius. Sits below the wordmark and overlaps the floating nav. No caption, no border, no shadow — the image is the content."

    section_header:
      role: "Introductory heading for content blocks"

      info: "ABC Diatype 34px weight 400, #070707, left-aligned. Paired with a right-aligned 'View all' ghost link on the same baseline. Vertical margin 59px top, 19px bottom. On the mint section, text remains #070707 — the mint is the background, not an accent."

    footer:
      role: "Site closure"

      info: "Background transitions to #e7feda mint. Contains repeated floating pill nav, small print links, and studio metadata. ABC Diatype 18-19px, #070707 throughout. Maintains the same typographic system as body content — no distinct footer face."

  do_s_and_don_ts:

    do:
      - "Use #070707 for all text, borders, and filled UI controls — it is the only structural color in the system"
      - "Reserve #e7feda mint for full section backgrounds, never for buttons, icons, tags, or text"
      - "Set the display wordmark at 104px in Feature Deck with no letter-spacing adjustment — let the natural metrics carry the impact"
      - "Use 9.3px border-radius for all cards, images, and content containers; 4.6px for inputs and small controls; 9999px only for the floating nav pill"
      - "Maintain 1px hairline #070707 borders for all separation — never use shadows to lift elements off the canvas"
      - "Pair Feature Deck 44px section heads with ABC Diatype 19px body — the scale jump is the hierarchy, not weight or color"
      - "Keep the floating nav centered, persistent, and visually identical on every screen — it is the only persistent chrome"

    don_t:
      - "Do not introduce a second accent color — the system is built on the tension between black, white, and one mint wash"
      - "Do not apply the mint #e7feda to buttons, links, icons, or hover states — it is atmospheric only"
      - "Do not add drop shadows, inner glows, or any elevation effects — flatness is the signature"
      - "Do not use Feature Deck for body copy or sub-100px text — it is display-only and loses legibility below 44px"
      - "Do not use colored backgrounds inside cards on the mint section — let the section color be the unifying field"
      - "Do not center body text — only the display wordmark and nav are centered; all editorial copy is left-aligned"
      - "Do not use border-radius values outside the 4.6px / 9.3px / 9999px scale — the system is intentionally tight"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Default page background, card surfaces on light sections, button fills inside dark panels |"
    info: "| 1 | Mint Zone | `#e7feda` | Atmospheric section background (newsworthy blocks, footer) — marks editorial content zones |"
    info: "| 2 | Ink Panel | `#070707` | Inverted surface for featured project cards — makes editorial spreads feel framed and elevated without using shadow |"

  elevation:

    info: "The design system intentionally avoids drop shadows entirely. Elevation and separation are achieved through three mechanisms only: (1) a 1px #070707 hairline border, (2) a #070707 filled surface on a #ffffff canvas, and (3) a 1px thickness increase on the existing border for focus/active states. This flatness reinforces the editorial gallery metaphor — paper on paper, not cards floating in space."

  imagery:

    info: "Editorial photography dominates the visual language. Images are treated as full-bleed plates rather than illustrations — warm-toned, human, often featuring people in staged-but-natural moments (a young man in amber light, a woman in a studio, a hand holding a printed calendar). All images share a 9.3px border-radius, giving them a consistent subtle framing. There is no use of stock photography aesthetic, no illustrations, no abstract graphics, and no icon system beyond simple text links. The warm amber/orange of the hero photo creates a color contrast against the otherwise near-monochrome palette and the cool mint sections, acting as a third emotional register without becoming a design token."

  layout:

    info: "Content is centered with a max-width of ~1200px and generous side margins (54-59px). The hero breaks this pattern by allowing the 104px wordmark to bleed across the full content width, establishing a typographic-first opening. Below the hero, the layout settles into a strict editorial grid: a 2-column project showcase on a light gray band, then a 'Recent projects' heading with a 3-column news card grid on a mint background, then footer. Sections are separated by 1px hairline dividers, not by background color changes alone — the mint section is the only true color zone. Navigation is a floating centered pill that persists across all sections, visually breaking the vertical flow. The overall rhythm is spacious and gallery-like: large breathing gaps between sections, no decorative ornament, no overlapping elements."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #070707"
    - "background: #ffffff"
    - "border: #070707 (1px)"
    - "accent: #e7feda (section background only)"
    - "primary action: no distinct CTA color"

    info: "Example Component Prompts:"
    - "Build a floating pill navigation: 1px #070707 border, white background, border-radius 9999px, padding 9px 14px. Links set in ABC Diatype 19px weight 400, #070707, separated by 19px gaps. No shadow, centered horizontally."
    - "Build a hero section: #ffffff background. Display wordmark 'Extract' in Feature Deck 104px weight 400, #070707, line-height 1.0, bleeding to the right edge. Below: ABC Diatype 34px serif tagline in #070707. Full-bleed editorial photograph with 9.3px border-radius beneath."
    - "Build a news article card on a #e7feda section: transparent background, 9.3px-radius image at top, title in ABC Diatype 19px weight 700 #070707, body in ABC Diatype 18px weight 400 #070707 line-height 1.5. No border, no shadow."
    - "Build a dark project card: #070707 background, 9.3px border-radius, full-bleed media inside (typographic spread or photograph), no internal padding, no border, no shadow."
    - "Build a section header: ABC Diatype 34px weight 400 #070707 left-aligned, paired with a right-aligned 'View all' ghost link (ABC Diatype 19px #070707, 1px underline). 59px top margin, 19px bottom margin."

  similar_brands:

    - "**Pentagram** — Same editorial gallery approach — minimal UI chrome, oversized typographic statements, and content-as-artwork project showcases on a restrained palette"
    - "**Manual (manualcreative.com)** — Shared design-studio discipline: near-monochrome canvas, one pastel section color, serif/sans type pairing, and flat hairlined cards with no shadows"
    - "**Locomotive (locomotive.ca)** — Both treat the homepage as a typographic poster first and a portfolio second — full-bleed wordmark hero followed by curated image grids"
    - "**DIA Studio** — Identical floating-pill navigation pattern, generous whitespace, and the discipline of letting a single pastel hue mark a content zone"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-gallery-white: #ffffff;
          --color-ink-black: #070707;
          --color-spearmint-wash: #e7feda;
        
          /* Typography — Font Families */
          --font-feature-deck: 'Feature Deck', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-diatype: 'ABC Diatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 18px;
          --leading-body-sm: 1.5;
          --text-subheading: 21px;
          --leading-subheading: 1.4;
          --text-heading-sm: 34px;
          --leading-heading-sm: 1.4;
          --text-heading: 44px;
          --leading-heading: 1.25;
          --text-display: 104px;
          --leading-display: 1.25;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-9: 9px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-19: 19px;
          --spacing-23: 23px;
          --spacing-25: 25px;
          --spacing-28: 28px;
          --spacing-37: 37px;
          --spacing-54: 54px;
          --spacing-59: 59px;
          --spacing-65: 65px;
          --spacing-74: 74px;
          --spacing-93: 93px;
          --spacing-111: 111px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 59px;
          --card-padding: 19px;
          --element-gap: 19px;
        
          /* Border Radius */
          --radius-md: 4.63636px;
          --radius-lg: 9.27273px;
        
          /* Named Radii */
          --radius-cards: 9px;
          --radius-buttons: 5px;
          --radius-navpill: 9999px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-mint-zone: #e7feda;
          --surface-ink-panel: #070707;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-gallery-white: #ffffff;
          --color-ink-black: #070707;
          --color-spearmint-wash: #e7feda;
        
          /* Typography */
          --font-feature-deck: 'Feature Deck', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-diatype: 'ABC Diatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 18px;
          --leading-body-sm: 1.5;
          --text-subheading: 21px;
          --leading-subheading: 1.4;
          --text-heading-sm: 34px;
          --leading-heading-sm: 1.4;
          --text-heading: 44px;
          --leading-heading: 1.25;
          --text-display: 104px;
          --leading-display: 1.25;
        
          /* Spacing */
          --spacing-9: 9px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-19: 19px;
          --spacing-23: 23px;
          --spacing-25: 25px;
          --spacing-28: 28px;
          --spacing-37: 37px;
          --spacing-54: 54px;
          --spacing-59: 59px;
          --spacing-65: 65px;
          --spacing-74: 74px;
          --spacing-93: 93px;
          --spacing-111: 111px;
        
          /* Border Radius */
          --radius-md: 4.63636px;
          --radius-lg: 9.27273px;
        }