studio_gruhl___style_reference:
  info: "> matte-black gallery manifesto"

  theme: "dark"

  info: "Studio Gruhl runs on a dark, text-first portfolio language: massive GreedStandard type bleeds edge-to-edge while UI chrome recedes into matte black surfaces. The interface is essentially achromatic — white text, charcoal surfaces, and a muted ash gray — so that case-study video and imagery carry all the chromatic weight. Components are minimal and compact: pill-shaped navigation at 9999px, a 12px radius as the universal workhorse for cards and buttons, and almost no decorative chrome. The work IS the decoration; the framework simply provides a quiet, full-bleed stage."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Bright White | `#ffffff` | `--color-bright-white` | Primary text, hairline borders, nav dividers, icon strokes — white doubles as the divider system in this monochrome dark UI |"
    info: "| Carbon | `#2e2e30` | `--color-carbon` | Page canvas, card surfaces, neutral filled button background — the dominant surface for the entire dark experience |"
    info: "| Obsidian | `#18181b` | `--color-obsidian` | Nav bar surface, deeper layered cards, footer base — sits one step below Carbon to create a subtle depth read |"
    info: "| Ash | `#969696` | `--color-ash` | Muted body text, caption copy, low-emphasis dividers — never used for headings, always for secondary information |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Deep border accent on certain buttons and nav edges, used sparingly for a near-invisible structural line |"
    info: "| Lime Cream | `#eef0b1` | `--color-lime-cream` | Yellow wash for highlight backgrounds, decorative bands, and soft emphasis behind content. |"

  tokens___typography:

    greedstandard___sole_display_and_ui_typeface__at_80px___weight_700___line_height_1_00_it_becomes_the_manifesto_headline___the_entire_brand_reads_off_this_single_oversized_moment__at_15_16px___weight_400_it_carries_navigation__card_metadata__and_body__the_10px_size_handles_micro_labels_and_index_marks_____font_greedstandard:
      - "**Substitute:** Archivo (Google Fonts) for the grotesque DNA; pair with Anton if pure condensed display is needed for the 80px moments"
      - "**Weights:** 400, 700"
      - "**Sizes:** 10px, 15px, 16px, 80px"
      - "**Line height:** 1.00, 1.15, 1.20"
      - "**Role:** Sole display and UI typeface. At 80px / weight 700 / line-height 1.00 it becomes the manifesto headline — the entire brand reads off this single oversized moment. At 15-16px / weight 400 it carries navigation, card metadata, and body. The 10px size handles micro labels and index marks."

    arial___system_fallback_for_tiny_ui_labels_and_icon_adjacent_text___appears_in_only_a_handful_of_minor_contexts____font_arial:
      - "**Weights:** 400"
      - "**Sizes:** 13px"
      - "**Line height:** 1.20"
      - "**Role:** System fallback for tiny UI labels and icon-adjacent text — appears in only a handful of minor contexts"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.15 | — | `--text-caption` |"
      info: "| body-sm | 15px | 1.15 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.15 | — | `--text-body` |"
      info: "| body-lg | 80px | 1.15 | — | `--text-body-lg` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 29 | 29px | `--spacing-29` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 59 | 59px | `--spacing-59` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 12px |"
      info: "| icons | 9px |"
      info: "| panels | 40px |"
      info: "| buttons | 12px |"
      info: "| nav-pills | 9999px |"

    layout:

      - "**Section gap:** 120px"
      - "**Card padding:** 16px"
      - "**Element gap:** 10px"

  components:

    pill_navigation_button:
      role: "Top-bar nav links"

      info: "9999px border-radius pill, 9px horizontal padding, white 1px border on Carbon (#2e2e30) fill, 15px GreedStandard 400 text in white. The nav bar itself is an Obsidian (#18181b) pill container holding the hamburger, monogram, and contact icon in a single horizontal cluster."

    neutral_filled_button:
      role: "Primary action when no chromatic accent is available"

      info: "12px border-radius, Carbon (#2e2e30) fill, 1px Pure Black (#000000) border, 6-8px vertical / 16px horizontal padding, 15px GreedStandard 400 white text. Used for in-content actions like 'More About Us' — reads as a pressed surface, not a colored CTA."

    ghost_white_button:
      role: "Secondary action or outlined link"

      info: "12px border-radius, transparent fill, 1px Bright White (#ffffff) border, 6-8px vertical / 16px horizontal padding, 15px GreedStandard 400 white text. The 'More About Us' treatment often appears as this ghost variant."

    manifesto_display_headline:
      role: "Brand-defining oversized type block"

      info: "80px GreedStandard weight 700, line-height 1.00, all-caps, Bright White (#ffffff) on Carbon canvas. Fills roughly 60% of viewport width and runs 3-4 lines. The signature element of the brand — every page should have at least one such moment."

    top_navigation_bar:
      role: "Sticky minimal header"

      info: "Centered horizontal pill, Obsidian (#18181b) fill, 9999px radius, 10px vertical padding, contains hamburger icon (left), S monogram (center), email icon (right). Sits 24px from the top edge, floating above all content."

    full_bleed_video_hero:
      role: "Case study opener"

      info: "Edge-to-edge video block filling ~80% of viewport height with 12px corner radius. Bare playback controls (pause bottom-left, volume + fullscreen bottom-right) in thin white line icons. No title overlay on the video itself — copy lives in the adjacent manifesto block."

    project_case_study_card:
      role: "Grid item for case study index"

      info: "Carbon (#2e2e30) surface, 12px border-radius, 16px padding, optional 1px white border at low opacity. Image or video fills the card body; project name and category metadata below in 15px GreedStandard 400 white / Ash (#969696). No elevation, no shadow."

    floating_info_card:
      role: "Project title overlay on showcase media"

      info: "Obsidian (#18181b) surface, 12px border-radius, ~16px padding, 24-29px horizontal padding. Contains a 40-48px square icon tile on the left (9px radius), project name in 15px GreedStandard 700 white, one-line description in 13px Ash, and a thin white arrow icon on the right. Anchored near the bottom-center of full-bleed media."

    stacked_panel_showcase:
      role: "Multi-frame case study progression"

      info: "Five to six vertical panels of equal width filling the viewport, each a slightly different shade of a single color family (e.g. variations of indigo/purple). Panels are separated by the canvas color, not by borders. Used to show screen sequences or process stages within a single project."

    icon_tile:
      role: "Project category or app icon container"

      info: "40-48px square, 9px border-radius, white or Carbon fill, 1px border. Contains a thin line glyph (e.g. the 4-petal cross) at ~50% scale. Pairs with Floating Info Cards as the left-side thumbnail."

    footer_link_bar:
      role: "Minimal site footer"

      info: "Carbon canvas, no container. 15px GreedStandard 400 Ash (#969696) text with 29px horizontal padding between links. 1px white or near-black top border. No logo, no social icons, no copyright walls."

    tag_label_pill:
      role: "Project category metadata"

      info: "9999px radius, 6-8px vertical / 12px horizontal padding, 1px white border, 10-13px GreedStandard 400 white text. Always inline with other metadata, never standalone."

  do_s_and_don_ts:

    do:
      - "Use GreedStandard at 80px / weight 700 / line-height 1.00 for the one manifesto headline moment on every page — it is the brand's only typographic anchor"
      - "Build every screen on the Carbon (#2e2e30) canvas; Obsidian (#18181b) only for sticky nav and deep layers, Lime Cream (#eef0b1) only for rare inverted sections"
      - "Use 12px border-radius for all functional surfaces (cards, buttons, tiles) and reserve 9999px exclusively for nav pills and inline tags"
      - "Default to 15-16px GreedStandard 400 for body, nav, and card text — never reach for Arial unless a system-fallback is rendering"
      - "Let case study video and imagery run full-bleed with raw edges; contain the work only in floating info cards, not in rounded image frames"
      - "Communicate depth with surface color shifts (Carbon → Obsidian → Lime Cream) and 1px white borders — never with box-shadow"
      - "Keep secondary copy in Ash (#969696); reserve Bright White for headings, active states, and primary metadata"

    don_t:
      - "Never introduce a chromatic CTA color — the system has no accent button; actions are neutral filled (#2e2e30) or ghost white outlined"
      - "Never use box-shadow, drop-shadow, or blur on any component — the design is intentionally flat with surface-only elevation"
      - "Never apply gradients to UI chrome or functional components — gradients are reserved for content media and belong inside the video/image, not the frame"
      - "Never break the 12px radius convention for cards or buttons; only nav pills (9999px), icons (9px), and rare showcase panels (40px) deviate"
      - "Never use a light or white page background for the main canvas — Carbon is the only acceptable base; Lime Cream is a rare full-bleed inversion, not a background"
      - "Never replace GreedStandard with a system font for display moments — the custom face at 80px is what makes the manifesto read as Studio Gruhl"
      - "Never add multi-column dashboard layouts or sidebar navigation — the structure is single-column full-bleed scroll with a centered pill nav"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Carbon Canvas | `#2e2e30` | Default page background — every section sits on this unless explicitly inverted |"
    info: "| 1 | Obsidian Layer | `#18181b` | Sticky nav, deeper cards, and structural zones that need to feel pressed-in from the canvas |"
    info: "| 2 | Lime Cream Inversion | `#eef0b1` | Full-bleed section accent — rare moments where the entire band flips to a pale lime wash for typographic contrast |"
    info: "| 3 | Bright White Pop | `#ffffff` | Highest elevation — used for inline chips, floating info cards, or micro-elements that need to cut through the dark surface |"

  elevation:

    info: "Zero-shadow design. The system communicates depth through surface color shifts alone (Carbon → Obsidian → Lime Cream → White) — no drop shadows, no glow, no blur. A card sitting on the canvas is distinguished only by its 12px radius and a 1px white or near-black border. Components appear stamped onto the surface, not floating above it. This flatness is the design: the visual energy comes from the work and the type, not from layered UI chrome."

  imagery:

    info: "Full-bleed video and photography dominate — case studies open with edge-to-edge loops (e.g. the Nike swoosh on warm amber gradient) that fill 80-100% of viewport height. Imagery is always raw-edged or masked with the canvas; no rounded photo treatments, no contained thumbnails. The hero is a video player with minimal chrome (pause, mute, fullscreen icons at corners). Photography within cards tends to be tight product or motion crops on neutral backgrounds. Iconography is minimal: a stylized S monogram for the wordmark, a 4-petal cross glyph for project categories, and thin line icons for nav controls. The interface contains no decorative illustration — the case study media is the only visual content."

  layout:

    info: "Full-bleed portfolio structure with zero page max-width. The page is a vertical scroll of single-screen sections, each taking up most of the viewport. The hero is a full-bleed video with a floating pill nav anchored top-center. Below, a manifesto block runs massive left-aligned type against the dark canvas with extreme negative space. Case studies appear as full-bleed image or video bands, often with a floating info card overlaid near the bottom edge. Some case studies use a stacked vertical panel layout (5-6 columns of slightly different shades) to show sequence or progress. Navigation is a single horizontal pill at the top — no sidebar, no mega-menu. Density is intentionally sparse between work, but each work piece is presented at maximum scale with no surrounding scaffolding."

  agent_prompt_guide:

    info: "Quick Color Reference"
    - "text: #ffffff (Bright White)"
    - "background: #2e2e30 (Carbon)"
    - "nav surface: #18181b (Obsidian)"
    - "muted text / border: #969696 (Ash)"
    - "accent surface: #eef0b1 (Lime Cream, rare inversion only)"
    - "primary action: #2e2e30 (filled action)"

    info: "3-5 Example Component Prompts"

    - "Build the top navigation bar: an Obsidian (#18181b) pill with 9999px radius, centered horizontally, 10px vertical padding. Inside it, three elements evenly spaced — a hamburger icon on the left, an S monogram in the center, an email icon on the right, all rendered in thin white 1px strokes."

    - "Build the manifesto headline block: a Carbon (#2e2e30) full-bleed section with no max-width. Headline in 80px GreedStandard weight 700, line-height 1.00, all-caps, white (#ffffff), left-aligned, occupying ~60% of viewport width across 3-4 lines. Below, a ghost white button (12px radius, 1px white border, transparent fill, 15px GreedStandard 400 white text, 8px 16px padding) labeled 'More About Us'."

    - "Build a floating info card: a 16px-padded Obsidian (#18181b) surface, 12px border-radius, ~420px wide. On the left, a 48px square icon tile (9px radius, white fill, thin 4-petal glyph inside). Center, a two-line stack: 'PERFORMULA' in 15px GreedStandard 700 white, then 'A new brand design system for the nutrition start-up' in 13px Ash (#969696). On the right, a thin white right-arrow icon."

    - "Build a full-bleed video hero: edge-to-edge, ~80vh, 12px corner radius. Carbon (#2e2e30) base with video content filling. Bottom-left: pause icon in thin white stroke. Bottom-right: volume and fullscreen icons, same style. No title, no overlay text."

    - "Build the stacked panel showcase: six vertical columns of equal width filling the viewport on Carbon (#2e2e30) canvas, each panel a different shade of indigo-purple (from #3a3a5c to #5c5c8a, evenly graduated left to right). Panels are separated only by 1-2px gaps of the canvas color, not by borders. No content inside the panels — the color variation IS the content."

  similar_brands:

    - "**Pentagram** — Same text-first, monochromatic dark canvas approach where the work and oversized typography carry all the visual energy"
    - "**Studio Dumbar** — Identical philosophy of letting case study color and media dominate while UI chrome stays restrained and achromatic"
    - "**&Walsh** — Full-bleed dark portfolio with massive display type and zero decorative UI scaffolding around the work"
    - "**Koto** — Brand studio aesthetic with compact UI, minimal chromatic accents, and oversized custom display type as the identity anchor"
    - "**Mast Studio** — Creative studio that pairs dark surfaces with single large display type and floats minimal info cards over full-bleed case study media"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-bright-white: #ffffff;
          --color-carbon: #2e2e30;
          --color-obsidian: #18181b;
          --color-ash: #969696;
          --color-pure-black: #000000;
          --color-lime-cream: #eef0b1;
        
          /* Typography — Font Families */
          --font-greedstandard: 'GreedStandard', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.15;
          --text-body-sm: 15px;
          --leading-body-sm: 1.15;
          --text-body: 16px;
          --leading-body: 1.15;
          --text-body-lg: 80px;
          --leading-body-lg: 1.15;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-29: 29px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-59: 59px;
          --spacing-120: 120px;
        
          /* Layout */
          --section-gap: 120px;
          --card-padding: 16px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-lg: 9px;
          --radius-xl: 12px;
          --radius-3xl: 40px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-cards: 12px;
          --radius-icons: 9px;
          --radius-panels: 40px;
          --radius-buttons: 12px;
          --radius-nav-pills: 9999px;
        
          /* Surfaces */
          --surface-carbon-canvas: #2e2e30;
          --surface-obsidian-layer: #18181b;
          --surface-lime-cream-inversion: #eef0b1;
          --surface-bright-white-pop: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-bright-white: #ffffff;
          --color-carbon: #2e2e30;
          --color-obsidian: #18181b;
          --color-ash: #969696;
          --color-pure-black: #000000;
          --color-lime-cream: #eef0b1;
        
          /* Typography */
          --font-greedstandard: 'GreedStandard', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.15;
          --text-body-sm: 15px;
          --leading-body-sm: 1.15;
          --text-body: 16px;
          --leading-body: 1.15;
          --text-body-lg: 80px;
          --leading-body-lg: 1.15;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-29: 29px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-59: 59px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-lg: 9px;
          --radius-xl: 12px;
          --radius-3xl: 40px;
          --radius-full: 9999px;
        }