co_projects___style_reference:
  info: "> black geometric sculpture on white void. Massive circular forms carved from a pure white gallery wall, where the only type is whisper-weight 400 and the only accent is the void between things."

  theme: "light"

  info: "Co Projects operates as a geometric art gallery translated into web form: a pure white void interrupted by massive black circular forms, a single hairline gray for structural rules, and two weight-400 typefaces doing all the communication. The system rejects almost every contemporary UI convention — no shadows, no gradients, no color, no rounded rectangles, no bold weights, no icons. What remains is raw figure/ground contrast at architectural scale: tiny 16px nav labels float in the corners while 60px display text and viewport-spanning black rings dominate the canvas. Spacing is museum-generous, with 139–208px gaps between major elements creating room to breathe that most product interfaces would call wasteful. The visual language trusts that shape, scale, and negative space carry the brand harder than any color system could."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, background of all surfaces, inner counter of the ring forms — the negative space that gives the black marks their mass |"
    info: "| Graphite Ink | `#000000` | `--color-graphite-ink` | Primary mark fill, text, and the large circular ring forms. The sole chromatic-payload element in the system |"
    info: "| Fog Hairline | `#e5e7eb` | `--color-fog-hairline` | Hairline borders, structural dividers, and subtle separator rules at 1px. The only gray in the palette and it never fills — it only divides |"

  tokens___typography:

    alpha___primary_face_for_nav__body__and_display__used_at_16px_for_navigation_labels_and_links_lineheight_1_50__29px_for_mid_scale_headings__and_60px_for_the_display_headline_lineheight_1_00___headline_sits_tight_on_its_baseline__the_signature_move_is_running_60px_display_text_at_weight_400__which_reads_as_architectural_line_drawing_rather_than_shouted_headline____font_alpha:
      - "**Substitute:** Inter, Söhne, GT America"
      - "**Weights:** 400"
      - "**Sizes:** 16px, 29px, 60px"
      - "**Line height:** 1.00, 1.10, 1.50"
      - "**Role:** Primary face for nav, body, and display. Used at 16px for navigation labels and links (lineHeight 1.50), 29px for mid-scale headings, and 60px for the display headline (lineHeight 1.00 — headline sits tight on its baseline). The signature move is running 60px display text at weight 400, which reads as architectural line-drawing rather than shouted headline"

    takt___secondary_face_for_body_copy_and_36px_subheadings__tight_lineheight_1_10_1_11_at_all_sizes_gives_it_a_compact__editorial_block_feel___runs_in_long_stacked_paragraphs_where_alpha_would_feel_too_austere__weight_400_is_the_only_weight_in_the_entire_system____font_takt:
      - "**Substitute:** Söhne, Neue Haas Grotesk, Helvetica Now"
      - "**Weights:** 400"
      - "**Sizes:** 16px, 36px"
      - "**Line height:** 1.10, 1.11"
      - "**Role:** Secondary face for body copy and 36px subheadings. Tight lineHeight (1.10–1.11) at all sizes gives it a compact, editorial-block feel — runs in long stacked paragraphs where Alpha would feel too austere. Weight 400 is the ONLY weight in the entire system"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| heading-sm | 29px | 1.1 | — | `--text-heading-sm` |"
      info: "| heading | 36px | 1.1 | — | `--text-heading` |"
      info: "| display | 60px | 1 | — | `--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: "| 32 | 32px | `--spacing-32` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 208 | 208px | `--spacing-208` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| shapes | 50% |"
      info: "| buttons | 0px |"

    layout:

      - "**Card padding:** 32px"
      - "**Element gap:** 8px"

  components:

    sparse_top_navigation:
      role: "Primary site navigation"

      info: "Three text links absolutely positioned across the top edge: brand mark at far left, primary nav item in the center-left, and a secondary link at far right. Uses Alpha at 16px / weight 400, color #000000, sitting on the bare #ffffff canvas with no background, no border, no padding. The nav occupies less than 2% of the viewport vertically — deliberately negligible so the hero geometry dominates."

    geometric_ring_hero:
      role: "Brand-defining visual composition"

      info: "Two massive black ring/donut forms rendered in #000000 fill, each approximately 60-70% of viewport height in diameter, with stroke width roughly 25-30% of the outer radius. The inner counter reveals #ffffff. Positioned to dominate the full viewport width, with the rings partially cropped at the page edges. No border-radius because the geometry is already circular — the shape IS the radius. This component is the brand identity rendered at architectural scale."

    display_headline_block:
      role: "Primary text statement on hero"

      info: "Alpha font at 60px / weight 400 / lineHeight 1.00, color #000000. The tight lineHeight makes multi-line headlines stack as a solid rectangular mass rather than airy text. No letter-spacing manipulation — sits at default tracking. Positioned with generous margin (139-208px from viewport edges) to feel placed rather than centered."

    subhead_text_block:
      role: "Secondary descriptive copy"

      info: "Takt font at 36px / weight 400 / lineHeight 1.11, color #000000. Runs as stacked paragraph blocks under display headlines. The tight 1.11 lineHeight creates a dense editorial column. Left-aligned with no decorative treatment — the type itself is the visual element."

    hairline_divider:
      role: "Structural section separator"

      info: "1px solid #e5e7eb rule spanning the full content width or the full viewport. The only use of the gray tone in the system. No padding, no margin above/below except to define section rhythm. Functions as the only architectural detail in an otherwise bare composition."

    text_link_nav_item:
      role: "Inline navigation element"

      info: "Alpha or Takt at 16px / weight 400, color #000000, no underline, no background, no padding. Inline with surrounding text or spaced across the top bar. Hover state is the only interactive feedback and it should stay minimal — a subtle color shift or underline appearance, never a fill or transform."

    body_paragraph:
      role: "Long-form descriptive text"

      info: "Takt at 16px / weight 400 / lineHeight 1.50, color #000000. Runs in single-column blocks with no max-width constraint beyond the content flow. Generous paragraph spacing (32px column-gap) between blocks. The 1.50 lineHeight on Takt is the most relaxed setting in the type system, creating readable editorial rhythm."

    image_placeholder_counter:
      role: "Visual break / negative space element"

      info: "The white inner circle of a ring form, or a standalone white circular cutout within a black field. Functions as a 'hole' in the composition that draws the eye and gives the black geometry its meaning. Pure #ffffff — no border, no shadow, no texture."

  do_s_and_don_ts:

    do:
      - "Use only the three palette colors: #ffffff for canvas, #000000 for ink and geometric fills, #e5e7eb exclusively for 1px hairline dividers"
      - "Set all type to weight 400 — never bold, never medium, never light. The system has exactly one weight and that constraint is the brand"
      - "Apply 139-208px vertical margins between major sections to maintain gallery-scale breathing room"
      - "Let geometric ring/circle forms occupy 50-70% of the viewport to create the architectural scale contrast with 16px nav text"
      - "Use Alpha at 60px / lineHeight 1.00 for display headlines and Takt at 36px / lineHeight 1.11 for subhead blocks"
      - "Position navigation as three sparse text labels at the top corners — no bar, no background, no border"
      - "Set border-radius to 0 on all rectangular elements; reserve all rounding for intentional circular geometry"

    don_t:
      - "Never add a shadow, blur, or elevation effect — the system is completely flat and any depth cue breaks the figure/ground purity"
      - "Never introduce a color outside the three achromatic tokens — no accent hues, no tinted grays, no hover-state colors beyond opacity shifts"
      - "Never use a font weight other than 400 — no 500, 600, 700, or 800 under any circumstance"
      - "Never apply border-radius to buttons, cards, tags, or inputs — rectangular means sharp corners, always"
      - "Never constrain the hero composition to a max-width container — let the geometric forms run full-bleed and crop at viewport edges"
      - "Never add icons, illustrations, photography, or decorative graphics — the circle/ring IS the imagery"
      - "Never use letter-spacing adjustment — all type sits at default tracking, the custom typefaces are already tuned"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | The default white background filling the entire viewport |"
    info: "| 1 | Divider Rule | `#e5e7eb` | Hairline structural separator — separates sections, frames regions, and provides the only non-ink/non-paper tone in the system |"
    info: "| 2 | Ink Mark | `#000000` | Full-bleed black geometric mass — the ring forms, text glyphs, and nav labels sit on this layer |"

  elevation:

    info: "The system is deliberately elevation-free. No element casts a shadow, no surface lifts above another, no overlay dims the page beneath. Depth is implied exclusively through scale and figure/ground — a massive black ring reads as forward even though it sits flush on the same z-plane as the white canvas. Adding shadow would collapse the architectural purity that defines the aesthetic."

  imagery:

    info: "The visual language is zero photography, zero illustration, zero product screenshots, zero icons. Imagery consists exclusively of geometric forms — large black rings/donuts, full circles, and the white negative-space counters within them. These circular forms operate as both brand mark and content placeholder: they can represent a project, a concept, a link target, or simply structural punctuation. No gradients, no textures, no duotones, no masking. The circle is the only visual vocabulary."

  layout:

    info: "Full-bleed, unconstrained layout with no max-width container and no centered grid system. The hero occupies the entire first viewport with massive black ring forms cropped at the page edges, and the navigation is a row of three absolutely-positioned 16px text links at the top corners. Below the hero, content sections stack vertically with 139-208px vertical gaps, separated only by #e5e7eb 1px hairlines. Each section is a single full-width band — no column splits, no card grids, no sidebar. The page reads as a sequence of horizontal gallery rooms, each with one geometric or typographic statement, connected by hairline rules and vast white space. Navigation is minimal top-bar text only — no sticky header, no hamburger, no footer chrome."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #000000"
    - "background: #ffffff"
    - "border: #e5e7eb (1px hairline only)"
    - "accent: #000000 (black is the accent in a monochrome system)"
    - "primary action: no distinct CTA color"

    info: "Example Component Prompts:"

    - "Create a full-bleed hero section: #ffffff background, no max-width constraint. A massive black ring (#000000 fill, outer diameter ~70% viewport height, inner counter ~40% diameter revealing #ffffff) positioned to crop at both left and right viewport edges. Display headline in Alpha at 60px / weight 400 / lineHeight 1.00, color #000000, positioned 139px from top edge."

    - "Create a sparse top navigation: three text links in Alpha at 16px / weight 400 / lineHeight 1.50, color #000000. First link at top-left (0px, 0px), second at top-center, third at top-right. No background, no border, no padding, no underline. Sits as floating text on bare white canvas."

    - "Create a subhead text block: Takt font at 36px / weight 400 / lineHeight 1.11, color #000000. Left-aligned paragraph block, no max-width constraint beyond natural reading flow, 32px gap above and below to neighboring elements."

    - "Create a section divider: a single 1px solid #e5e7eb rule spanning the full viewport width, with 96-139px vertical margin above and below. No other styling — the hairline is the entire component."

    - "Create a body paragraph: Takt at 16px / weight 400 / lineHeight 1.50, color #000000. Single-column block, left-aligned, 32px column-gap between successive paragraphs. No border, no background, no indent."

  similar_brands:

    - "**Bureau Cool** — Same radical achromatic palette, custom type at single weight, and architectural-scale geometric forms on pure white canvas"
    - "**Pentagram (minimal project pages)** — Identical commitment to white space, hairline rules, and letting a single typographic or geometric gesture carry the entire page"
    - "**Studio Dumbar (editorial case studies)** — Same weight-400-only typography and the discipline of using scale and negative space where other studios would add color or imagery"
    - "**Andu Mtx** — Near-identical black-on-white brutalist approach with massive geometric shapes and whisper-weight type at huge sizes"
    - "**Vercel (brand site, not product)** — Same full-bleed layout philosophy and trust in monochrome + scale over decoration, though Vercel allows itself subtle gradients"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-paper-white: #ffffff;
          --color-graphite-ink: #000000;
          --color-fog-hairline: #e5e7eb;
        
          /* Typography — Font Families */
          --font-alpha: 'Alpha', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-takt: 'Takt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 16px;
          --leading-body: 1.5;
          --text-heading-sm: 29px;
          --leading-heading-sm: 1.1;
          --text-heading: 36px;
          --leading-heading: 1.1;
          --text-display: 60px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-32: 32px;
          --spacing-96: 96px;
          --spacing-208: 208px;
        
          /* Layout */
          --card-padding: 32px;
          --element-gap: 8px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-shapes: 50%;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-divider-rule: #e5e7eb;
          --surface-ink-mark: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-paper-white: #ffffff;
          --color-graphite-ink: #000000;
          --color-fog-hairline: #e5e7eb;
        
          /* Typography */
          --font-alpha: 'Alpha', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-takt: 'Takt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 16px;
          --leading-body: 1.5;
          --text-heading-sm: 29px;
          --leading-heading-sm: 1.1;
          --text-heading: 36px;
          --leading-heading: 1.1;
          --text-display: 60px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-32: 32px;
          --spacing-96: 96px;
          --spacing-208: 208px;
        }