---
version: alpha
name: Heckler
description: Design system for Heckler — premium commercial mounting and enclosure products for Pro AV, hospitality, retail, and corporate environments.

colors:
  black: "#2F3234"
  white: "#FDFCF8"
  band: "#F4F1EA"
  cta: "#0EBBFF"
  success: "#73D277"
  warning: "#EFC761"
  error: "#F66F51"
  primary: "#2F3234"
  secondary: "#FDFCF8"
  surface: "#FDFCF8"
  on-surface: "#2F3234"

typography:
  headline-display-xl:
    fontFamily: "LL Medium, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: "4.5rem"
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: "-0.02em"
  headline-display-lg:
    fontFamily: "LL Medium, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: "2.5rem"
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: "-0.015em"
  headline-md:
    fontFamily: "LL Medium, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: "1.5rem"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.01em"
  headline-sm:
    fontFamily: "LL Medium, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: "0em"
  body-lg:
    fontFamily: "LL Medium, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: "0em"
  body-md:
    fontFamily: "LL Medium, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: "0em"
  body-sm:
    fontFamily: "LL Medium, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: "0em"
  label-md:
    fontFamily: "LL Medium, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: "1rem"
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: "0em"
  label-sm:
    fontFamily: "LL Medium, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: "0.875rem"
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: "0.06em"
  eyebrow:
    fontFamily: "LL Medium, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: "0.1em"

spacing:
  unit: "24px"
  "0.5u": "12px"
  "1u": "24px"
  "1.5u": "36px"
  "2u": "48px"
  "3u": "72px"
  "6u": "144px"
  "8u": "192px"
  "10u": "240px"

rounded:
  none: "0px"
  sm: "2px"

components:
  button-primary:
    backgroundColor: "{colors.black}"
    textColor: "{colors.white}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: "12px 24px"
    height: "48px"
  button-cta:
    backgroundColor: "{colors.cta}"
    textColor: "{colors.black}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: "12px 24px"
    height: "48px"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.black}"
    border: "1px solid {colors.black}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: "12px 24px"
    height: "48px"
  card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.black}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "24px"
  badge:
    backgroundColor: "{colors.black}"
    textColor: "{colors.white}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.sm}"
    padding: "4px 8px"
    height: "24px"
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.black}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.sm}"
    padding: "4px 8px"
    height: "24px"
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.black}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.sm}"
    padding: "4px 8px"
    height: "24px"
  badge-error:
    backgroundColor: "{colors.white}"
    textColor: "{colors.black}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.sm}"
    padding: "4px 8px"
    height: "24px"
  surface-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "0px"
  surface-banded:
    backgroundColor: "{colors.band}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "0px"
  surface-inverted:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.secondary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "0px"
  input:
    backgroundColor: "{colors.white}"
    textColor: "{colors.black}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "12px 16px"
    height: "48px"

photography:
  role: "Photography is a primary communication medium for Heckler. The brand is intentionally restrained in copy, color, and typographic expression, so imagery carries a disproportionate share of the communicative work. Pictures must convey product quality and precision, real-world usability, architectural and environmental integration, and emotional tone — calm, confident, modern, collaborative — without explanatory text."
  aesthetic: "Kinfolk and Wallpaper* editorial photography, adapted for Heckler's Pro AV context"

  lens:
    primaryRange: "35mm – 50mm full-frame equivalent (40–45mm preferred neutral zone)"
    secondaryRange: "75mm – 100mm for portraiture and compression"
    controlled: "28mm only when spatial context is critical and distortion is managed"
    prohibited:
      - "Wider than 28mm (perspective distortion)"
      - "135mm and longer (over-compression, lost environmental context)"

  aperture:
    typical: "f/2.0 – f/4.0"
    productClarity: "f/4.0 – f/8.0"

  depthOfField: "Moderate shallow depth. Avoid extreme bokeh. The environment must remain legible."

  camera:
    distance: "Stand farther back than typical lifestyle photography. Frame using natural perspective, not lens distortion."
    heightAFF: "42 – 52 inches"
    eyeLine: "Eye-level or slightly below seated eye-line"
    angle: "Predominantly orthogonal (straight-on). Minimal tilt or dramatic perspective."
    horizon: "Near seated eye level or table height. Avoid high ceiling perspectives."
    perspective: "Architecturally accurate. Vertical lines must remain parallel. No keystoning. No barrel distortion."

  framing:
    aspectRatio: "3:2 default"
    safeMargins: "Primary subject within center 70–80% of frame; ≥10% margin from edges; faces no closer than 15% to any frame edge."
    composition: "Balanced negative space. Subject not always centered, but composition feels deliberate and calm."

  light:
    primary: "Natural window light"
    quality: "Soft, diffused, directional but subtle"
    modifiers:
      - "Sheer curtains"
      - "Diffusion panels"
      - "White-wall bounce"
      - "Reflectors"
    shadows: "Soft edge definition. No harsh shadow lines."
    artificial: "Continuous light over strobe. Large soft sources. Match daylight color temperature 5000K–5600K."
    keyToAmbientRatio: "1:1 to 1.5:1. Even exposure across the scene; no spotlighting."

  color:
    palette: "Muted, desaturated, warm-neutral bias. Never vibrant or saturated."
    whiteBalance: "Slightly warm, ~5200K – 6000K depending on environment"
    contrast: "Low to moderate"
    blacks: "Lifted slightly; never crushed"
    highlights: "No clipping; preserve texture in whites"

  captureMedium:
    note: "Default Heckler photography is digital. Film simulation is an OPTIONAL treatment for hero, editorial, and brand-narrative imagery — not the default for catalog or technical shots. When invoked, it layers on top of the existing optical specs (lens, aperture, light, color) without replacing them."
    defaultDigital: "High-end full-frame digital (Sony A7R / Canon R5 / Hasselblad X2D class). Clean files, neutral processing, preserved highlights."
    filmSimulation:
      stockDefault: "Kodak Portra 400 — the Kinfolk/Wallpaper* editorial signature. Warm flattering skin tones, slightly desaturated greens, muted earth tones, gentle highlight rolloff."
      stockAlternates:
        - "Kodak Portra 800 — same family, slightly more grain, lower light situations"
        - "Fuji Pro 400H — softer pastel palette, muted greens and pinks (rare, since discontinued)"
      cameraBodyPairings:
        mediumFormat: "Hasselblad 500CM with Zeiss Planar 80mm f/2.8 — editorial standard, 6×6 square negative cropped to 3:2"
        thirtyFiveMM: "Leica M6 with Summicron-M 35mm f/2.0 or 50mm f/2.0 — rangefinder feel, more documentary"
      grain: "Subtle organic silver-halide grain — fine structure, visible across midtones and shadows but never heavy or grungy. Must read as the natural texture of the medium, not an applied filter."
      tonalResponse:
        highlightRolloff: "Soft, gentle — bright window light and bright displays bloom softly to white with no harsh digital clipping"
        shadowToe: "Lifted shadows with a gentle warm toe; blacks are dark but not crushed; subtle warm color in deepest values"
        microContrast: "Slightly softer than digital — fine details (fabric weave, wood grain, hair) clearly resolved but with film's organic softness, not razor-sharp edge contrast"
      colorScience: "Portra 400 character: warm flattering skin, desaturated greens, muted earths, preserved highlight detail. Reads warm without yellow cast."
      halation: "Subtle warm orange glow only at the brightest highlights (display edges, brightest window edges). Use sparingly — heavy halation reads as fake filter."
      vignetting: "Very slight natural lens vignetting toward the corners is welcome. No heavy vignettes."
    whenToUse:
      - "Hero brand imagery, web heroes, campaign moments, About / Brand pages"
      - "Editorial features, blog header art, case-study openers"
      - "Print collateral where a more emotional, crafted feel is appropriate"
    whenNotToUse:
      - "Product catalog, PDP gallery shots, spec drawings"
      - "Cutout / studio cyc product photography"
      - "Technical / installation reference imagery"
      - "Any context where literal pixel sharpness matters more than mood"
    promptInsertion: "Place the capture-medium block early in the prompt, after the scene type and before the structural product description. State the stock and camera body explicitly (do not just say 'film look'). Include grain quality, tonal response, and halation as separate clauses."
    filmSpecificNegatives:
      - "no digital noise (the grain must read as organic silver-halide film grain, not pixel noise)"
      - "no heavy or grungy grain"
      - "no vintage yellow color cast"
      - "no faux Instagram or VSCO filter look"
      - "no clipped highlights"
      - "no crushed blacks"
      - "no Lomo cross-process color shift"
      - "no fake light leaks or scratches"
      - "no fake Polaroid or film-frame border"
      - "no oversaturated color"

  composition:
    principles:
      - "Minimalism and editorial restraint"
      - "Generous, intentional negative space"
      - "Clean lines parallel to frame edges"
      - "Balanced asymmetry over centered symmetry"
      - "No clutter around the subject"

  environments: "Real but curated spaces. Minimal modern interiors. Natural materials (wood, linen, stone). Professional environments reflecting active use — meeting rooms, collaboration spaces, work areas."

  surfaces:
    preferred:
      - "White oak (subtle grain)"
      - "Concrete"
      - "Matte black metal (soft highlights, not glossy)"
      - "Natural stone"
      - "Linen"
      - "Felt (matte, light-absorbing)"
      - "Powder coat (fine texture, low sheen)"
    avoid:
      - "Glossy or high-shine finishes"
      - "Plastic-rendered surfaces"
      - "Pure white infinity backgrounds"
      - "Overly reflective backgrounds"

  devices:
    rule: "All technology must be current-generation. Lean Apple computers and devices where appropriate. Maintain ecosystem consistency within any scene."
    avoid:
      - "Mixed or dated device generations"
      - "Technology featured as clutter"

  cables: "Minimal, intentional, realistic. Cleanly routed and short. No excess slack, no tangles, no unrealistic concealment."

  humans:
    behavior:
      - "Comfortable, relaxed, naturally engaged"
      - "Subtle expressions of positivity (light smiles, attentive focus)"
      - "Good listening posture (slight forward lean, eye contact)"
      - "Collaboration: orientation toward others, shared focus"
      - "Gesturing, interacting with tools or displays"
      - "Energy without exaggeration — alert, present, not performative"
    candidness:
      - "Treat the frame as a documentary still, not a posed group portrait — people should look caught mid-action, not arranged"
      - "Off-axis gazes are good: people look at each other, at their laptops, at the display — never at the camera"
      - "Mixed body language across subjects (one leaning back, one leaning in, one mid-sentence) — avoid synchronized posture"
      - "Asymmetric framing of people is welcome: heads cropped at the edge, a shoulder partially out of frame, a hand entering from off-screen"
      - "Subtle imperfections (loose hair, a sleeve pushed up, an open notebook with handwriting) read as real and add credibility"
    avoid:
      - "Posed or staged interactions"
      - "Stiff or disengaged subjects"
      - "Exaggerated or theatrical motion"
      - "Stock-photo cues: everyone smiling at the camera, theatrical pointing, perfectly arranged hands, mannequin-like spacing"
    wardrobe:
      preferred: "Business casual: polo shirts, casual button-downs, denim acceptable. Muted tones, natural fabrics, well-fitted, no prominent logos or patterns."
      avoid: "Formal business suits (rare). Overly trendy or distracting wardrobe choices."
    proportion: "Realistic hand and body proportions. Seated eye-line aligns with camera at ~44–48 inches AFF."

  props: "Sparse and intentional. Every object must justify its presence. Reinforce collaboration (notebooks, laptops, pens) without clutter."

  motion:
    tone: "Quiet, contemplative, confident, purposeful. Subtle sense of momentum — work is happening, not staged."
    action: "Subtle gestures only. Natural interaction with space and tools. No exaggerated or artificial energy."

  productPositioning:
    note: "Reflect real-world AV best practices and ergonomic viewing. Align components to clean horizontal and vertical datum lines."
    cameraMountAFF: "44 – 48 inches; aligned with seated eye-line"
    primaryDisplayBottomEdgeAFF: "44 – 48 inches; level, orthogonal mounting"
    videoBar: "Directly below the display; 0 – 2 inches gap maximum; centered horizontally"
    credenzaTopAFF: "~36 inches"
    credenzaRule: "When present, should be the only furniture on or near the wall. Almost always paired with one or more primary displays above."
    frameworkStandardShelfAFF: "~40 inches"
    frameworkShortLegAFF: "~31 inches"
    frameworkRule: "When present, should be the only furniture on or near the wall. Almost always with one or more primary displays."
    spacing: "Consistent spacing between components. No floating or misaligned elements."

  displaySizing:
    default: "65 – 75 inches (most rooms)"
    smallMeetingRoom: "55 – 65 inches"
    largeConferenceRoom: "85 – 110 inches"
    desktopMonitor: "27 inches, modern slim-bezel"
    rule: "Match size to room scale and viewing distance. No undersized in large rooms, no oversized in small rooms."

  heroShot:
    definition: "Primary marketing image — product central, grounded in a real environment."
    environment: "Always in-location; never pure studio isolation."
    cameraPosition: "Lower camera heights encouraged (including near floor level). Slight upward perspective acceptable. Controlled geometry, no distortion."
    composition: "Product dominant in frame. Clean separation from background via depth, light, or framing. Strong silhouette and readable form. Negative space elevates perceived value."
    lighting: "Natural or natural-mimicking only. Subtle highlight shaping defines edges and materials. No dramatic high-contrast commercial lighting."
    humans: "Optional. If included, secondary to product; reinforce scale and use; same behavioral rules."
    lens: "35–50mm for environmental hero. 50–85mm for tighter product emphasis. No ultra-wide."
    intent: "Convey stability, quality, and integration. Product should feel inevitable in the environment, not inserted."

  screenContent:
    largeDisplays:
      defaultScenario: "Video meeting in progress"
      participants: "One or two remote participants, friendly and attentive, seated in a modern meeting room. Occasionally with a notebook computer in front of them — not always."
      ui: "No visible UI. No Zoom/Teams controls, buttons, overlays, or name tags. Clean full-bleed image of participants only."
      avoid:
        - "Laptop-webcam perspective (don't make it feel like a Zoom/Teams laptop call)"
        - "Work-from-home environments (rare exceptions only)"
        - "Tiled grid layouts; if two participants are shown, place them in the same room a natural distance apart"
    secondaryDisplays:
      content: "Architectural concepts, product design sketches, photography, creative work."
      avoid:
        - "Corporate slide decks"
        - "Dense tables or spreadsheets"
        - "Charts or analytical visuals"
    laptops:
      content: "Modern knowledge work — design tools, creative software, clean document interfaces."
      tone: "Minimal, supportive, never dominant."
    touchControllers:
      style: "Generic, platform-neutral. Visually inspired by Zoom Rooms and Microsoft Teams Rooms."
      ui: "Clean buttons, neutral palette, minimal readable text."
      avoid: "Brand-specific UI elements or logos. Dense interfaces."
    roomSchedulers:
      placement: "Default expectation on all meeting rooms. Mounted on mullions where architecture allows; on adjacent drywall otherwise."
      placementRuleStrict: "Only on the OUTSIDE of meeting rooms, facing outward into the general office space. Never on the interior side of a meeting room."
      hardware: "Heckler-style scheduler mounts most often. Dedicated devices from Logitech, Neat, and similar manufacturers are acceptable and encouraged."
      ui: "Generic, platform-neutral, simplified. Reflects the actual room state — In Use when occupied, Available when empty."
      details: "Optional simplified meeting time blocks; generic non-branded room name. Muted, refined color cues (green Available, red In-Use)."
    rendering:
      brightness: "Realistic relative to environment. Legible but never self-illuminating or overexposed."
      reflections: "Soft and physically plausible (light sources, windows, room shapes). Add realism without competing with content. Matte or low-glare appearances are encouraged."
      avoid:
        - "Glowing or overexposed screens"
        - "Mirror-like reflections"
        - "High-contrast glare or hotspots"
        - "Reflections that reduce screen legibility"
        - "Blown-out highlights or crushed UI darks"

  materials:
    powderCoat: "Fine texture, low sheen"
    metal: "Soft highlights, never glossy"
    felt: "Matte, light-absorbing"
    wood: "White oak, subtle grain"
    textiles:
      primary: "Heckler frequently uses Maharam Metaphor textiles."
      reference: "Reference Maharam's official materials to capture weave patterns, color depth, and surface texture accurately. Use high-resolution textile references to avoid generic AI fabric appearance."
    avoid:
      - "Plastic-like rendering"
      - "Overly glossy finishes"
      - "Unrealistic reflections"
      - "Generic AI fabric texture in place of actual Maharam weave"

  productAccuracy:
    hierarchyOfTruth:
      - "1. Real-world product dimensions, spec drawings, and installation guides"
      - "2. Architectural realism and human ergonomics"
      - "3. Brand aesthetic and composition"
    note: "When conflicts arise, accuracy and credibility outrank stylistic preference."
    geometryAndScale:
      - "Reference multiple images of each Heckler product from different angles"
      - "Review dimensioned spec drawings (typically located near the bottom of product web pages)"
      - "Use these references to lock proportions, material thicknesses, and structural relationships"
    dimensionalFidelity:
      rule: "Heckler products must be rendered at their true physical dimensions and proportions. Do not shrink, compress, or thin a product to make it visually 'fit' the composition."
      includeInPrompt: "Always state the product's W × H × D dimensions explicitly in the prompt and call out the resulting visible proportion (e.g. 'a wide horizontal rectangle, ~2:1 width-to-height')."
      verifyAgainstHumans: "Cross-check the rendered product scale against people in the frame — a seated person's shoulder is ~50–54 inches AFF, a standing person's eye is ~62–66 inches AFF. The product's vertical extent in the frame should be consistent with its real-world height relative to those references."
    partialOcclusionIsRealistic:
      rule: "Partial occlusion of Heckler products by foreground furniture (chair backs, table edges, plants, people, monitor arms) is desirable, not a problem to avoid."
      reason: "AI models tend to shrink or unrealistically clear the foreground around the hero product to make it fully visible. This produces the staged, empty-showroom look we explicitly reject. Real installed environments always have furniture and people partly in front of fixtures."
      directive: "Compose the frame so that conference-room furniture (chairs, the near edge of the table, a person's back or shoulder, a laptop screen) naturally crosses in front of the lower portion of the Heckler product. The product remains the hero by virtue of its position, scale, and lighting — not by being unrealistically isolated."
      examples:
        - "A conference table's far edge cuts across the lower 1/4 of a wall-mounted credenza"
        - "A chair back partially overlaps the corner of an enclosure"
        - "A standing person's shoulder partially obscures one side of the product"
    installationRealism:
      - "Review product user guides for mounting positions and real-world install conditions"
      - "Products must read as installed — not floating or loosely staged"
    deviceMountingAccuracy:
      - "Video bars are frequently mounted directly to Heckler products — reference the actual mounting brackets and accessories"
      - "Devices must appear physically attached and supported correctly, not magically suspended"
    deviceRealism:
      referenceBrands:
        - "Logitech"
        - "Neat"
        - "Huddly"
        - "Shure"
      use: "Reference these brands for scale, form factors, and mounting expectations."
      logos: "Do not depict brand logos. EXCEPTION: Apple devices may show subtle, accurate branding."
    furnitureErgonomics:
      - "Tables positioned logically relative to displays and cameras"
      - "Chairs and people oriented for comfortable viewing"
      - "No neck-strain angles or unrealistic seating positions"

  roomTypologies:
    twoPersonHuddle:
      display: "55 – 65 inches"
      lens: "35mm"
      people: 2
      behavior: "Collaborative, seated, engaged"
      screen: "Single remote participant, or 2 in same room"
    smallMeeting:
      display: "65 – 75 inches"
      lens: "35 – 50mm"
      people: "3 – 5"
      screen: "Meeting in progress"
    boardroom:
      display: "75 – 110 inches"
      lens: "35mm, slightly pulled back"
      people: "5 – 8 visible"
      screen: "Meeting or secondary creative content"
    openCollaboration:
      display: "Optional"
      lens: "35mm"
      behavior: "Casual collaboration, standing or seated"
    lectureTraining:
      display: "Large format"
      lens: "35 – 50mm"
      behavior: "Presenter + audience"
    focusDesk:
      display: "27-inch desktop monitor"
      lens: "50mm"
      people: 1
      screen: "Productivity or design work"

  cheatSheet:
    default: "Lens 35mm, f/2.8, ISO low, WB ~5400K"
    portrait: "Lens 85mm, f/2.0 – f/2.8"
    productStillLife: "Lens 50 – 100mm, f/4.0 – f/8.0"

  continuity:
    - "Consistent lighting direction and time of day across a multi-image set"
    - "Furniture and layout consistent"
    - "Wardrobe continuity across shots"
    - "Screen participants consistent across shots"

  failureModes:
    - "Display mounted too high"
    - "Camera positioned too high"
    - "Overly bright or glowing screens"
    - "People over-acting or posing"
    - "Mixed or outdated technology"
    - "Unrealistic cable routing"
    - "Over-styled or cluttered interiors"
    - "Heckler product rendered shorter, thinner, or smaller than its true spec dimensions (typically because the AI is trying to keep it fully unobscured)"
    - "Empty-showroom staging: foreground unnaturally cleared so the product is fully visible"
    - "All subjects facing camera or smiling on cue — reads as stock photography"

  promptModuleStructure:
    - "[Scene type] — what room, what activity"
    - "[Lens + framing] — focal length, aperture, height, aspect ratio, safe framing"
    - "[Lighting] — source, quality, color temperature, ratio"
    - "[People behavior] — count, posture, attire, engagement"
    - "[Device rules] — current-gen, Apple, mounting heights, sizing, cable handling"
    - "[Screen content rules] — what's on each display, no UI, no logos"
    - "[Negative block] — explicit prohibitions"

  negativePromptBlock:
    - "no clutter"
    - "no excessive cables"
    - "no ultra-wide distortion"
    - "no dramatic lighting"
    - "no UI overlays"
    - "no brand logos (Apple branding may appear subtly when present)"
    - "no unrealistic reflections"
    - "no glowing or overexposed screens"
    - "no warped geometry"
    - "no floating objects"
    - "no AI artifacts"
    - "do not shrink, compress, or thin the Heckler product to fit the composition — render at true physical dimensions"
    - "no empty-showroom staging — partial occlusion of the product by chairs, tables, or people is desirable, not a problem to fix"
    - "no stock-photo posing — everyone facing camera, synchronized smiles, theatrical pointing"
    - "no waxy or plastic textures"
    - "no harsh shadows"
    - "no oversaturated color"
    - "no posed or staged interaction"
    - "no formal suits"
    - "no dated technology"
    - "no generic AI fabric texture (use Maharam reference)"
    - "no floating or unmounted devices (must be physically supported)"
    - "no neck-strain seating angles"
    - "no room schedulers on the interior side of meeting rooms"

  aiPromptTemplate: |
    Photorealistic editorial photography of [SCENE TYPE] in the style of Kinfolk and
    Wallpaper* magazines. Shot on a [35mm | 50mm] full-frame lens at [f/2.8 | f/4],
    orthogonal straight-on composition, eye-level perspective at ~46 inches AFF, 3:2
    aspect ratio, safe framing with generous edge margins. Soft natural window light,
    diffused daylight, no harsh shadows, ~5400K white balance, key-to-ambient ratio
    ~1.2:1. [N] people in business casual attire (polo shirts, casual button-downs,
    denim), relaxed and naturally engaged, subtle smiles, attentive listening posture,
    collaborative body language, gesturing toward a shared display. Current-generation
    Apple hardware throughout; modern slim-bezel display sized appropriately for the
    room with video bar mounted 0–2 inches below, centered, display bottom edge ~46
    inches AFF; minimal cleanly-routed cables; integrated room scheduler on the mullion
    showing platform-neutral "In Use" or "Available" state. Primary display shows a
    video meeting with one or two remote participants seated naturally in a modern
    meeting room, no UI overlays, no platform logos, screen brightness balanced to
    ambient room light, soft plausible reflections only, matte or low-glare appearance
    preferred. Minimal modern interior with white oak and matte black metal surfaces,
    natural stone or concrete accents, muted desaturated warm-neutral color palette,
    lifted blacks, preserved highlight detail, architecturally accurate perspective
    with parallel verticals, true-to-life materials. Negative: no clutter, no excessive
    cables, no ultra-wide distortion, no dramatic lighting, no UI overlays, no brand
    logos, no unrealistic reflections, no glowing or overexposed screens, no warped
    geometry, no floating objects, no AI artifacts, no waxy or plastic textures, no
    harsh shadows, no oversaturated color, no posed or staged interaction, no formal
    suits, no dated technology, no generic AI fabric texture, no floating or unmounted
    devices, no neck-strain seating angles, no room schedulers on the interior side of
    meeting rooms. Apple subtle branding acceptable; all other brand logos excluded.
    High photorealism.
---

# Heckler Design System

## Overview

Heckler is a product design company building premium commercial mounting and enclosure products for Pro AV, hospitality, retail, and corporate environments. The visual system reflects the product philosophy: confident, precise, understated.

This design system extends the Heckler brand into digital surfaces — websites, applications, marketing collateral, internal tools. It is in service of the brand strategy (see §Brand Strategy for the canonical "three fits" — *it fits together / it fits your devices / it fits your workspace*), not a parallel framework. The brand-strategy meanings are not reinterpreted here.

Three working principles guide implementation:

- **Composition is structural.** Tokens resolve to a single 24px unit grid derived from body line-height; nothing is arbitrary.
- **Layouts adapt to content.** Dense spec tables, expansive product photography, and terse PDP content share the same scaffold.
- **Restraint reads as confidence.** Generous white space, monochrome by default, color used only where it does work.

The audience is professional: distributors, Pro AV integrators, and business end users. The system trusts them. No exclamation points, no superlatives, no decorative flourish.

## Brand Strategy

Heckler designs **hardware that fits.** We spend time with the people using our products in order to really listen to and understand their needs — and we make hardware that fits those needs.

**It fits together.** Components compose as a system. Similar materials, well-built, designed to live alongside one another. A Heckler product is recognizable next to another Heckler product.

**It fits your devices.** Heckler hardware connects with the digital devices you already use — Apple computers, Logitech and Neat video bars, displays, schedulers. We do not ask you to change your stack to use our products.

**It fits your workspace.** Whether you're working from a meeting room, classroom, conference room, hotel, retail floor, or restaurant, there's a Heckler product that fits. The range is built for the variety of real workspaces, not a single archetype.

**We talk to** people who care about the quality of the products they bring into their lives, families, and businesses — and to AV professionals who handle technology professionally.

**We are a personal enabler.** Heckler is complementary, not the central focus. The technology you choose stays at the center; we make it work in the space.

**Our purpose** is to create considered hardware that fits your work-life — by listening to people, staying updated on tech, and moving fast — to make people's work-life more delightful.

## Tagline

**Hardware that fits.**

The canonical product tagline. Set in LL Medium, weight 600, with the same x-height as the wordmark when locked up together. The period is intentional and always present. Do not alter the wording, drop the period, swap to a synonym, or pair with a different tagline.

## Pictogram

The Heckler pictogram is a simple play on the words "h fits" — an `H` combined with a small simplified figure, drawn in the same proportions as LL Medium. The pictogram and the wordmark are equally weighted brand marks; choose by context, not preference. When in doubt, lead with the wordmark.

**Three documented sizes:**

- **Sized up** — large primary placements where the pictogram leads (covers, signage, hero moments). Use the standard pictogram artwork.
- **Original** — default size for in-line use, paired with the wordmark or set within editorial layouts.
- **Favicon-optimized** — a simplified variant drawn for small type-like rendering (favicons, app icons, ≤24px contexts). Use only where the original-size pictogram becomes illegible. Do not scale the standard pictogram down to favicon sizes.

The pictogram is for contexts where space, scale, or convention favors a mark over a name (favicons, app icons, social avatars, dense product labels). The wordmark is the default for headers, lockups with the tagline, and most editorial use.

## Colors

**Heckler is a monochrome brand. Color is added only for functional reasons.** The physical products are represented with colors that have a tint mimicking real-life materials; the digital surfaces follow the same restraint. Most layouts use only `{colors.black}` and `{colors.white}` — a warm-white background paired with a near-black foreground. CTA Blue is reserved for interactive elements only; it never appears as decoration, surface fill, or accent stripe. The status colors (success, warning, error) exist for digital-surface user feedback; their physical-product analogs use the same palette to stand in for material tints.

**Core**

- `{colors.black}` (#2F3234) — primary text, primary surfaces in inverted contexts, structural lines.
- `{colors.white}` (#FDFCF8) — page surfaces. Warm, never pure white. Pure #FFFFFF is off-brand.
- `{colors.band}` (#F4F1EA) — warm-gray band. Subtle section emphasis on warm-white pages without the visual weight of going inverted.
- `{colors.cta}` (#0EBBFF) — links, primary CTAs, interactive highlights. Used sparingly.

**Surface modes**

There are exactly three named surface modes. Pick one per section; do not invent variants.

- `{components.surface-default}` — `{colors.white}` background with `{colors.black}` text. The page surface. Almost everything sits on this.
- `{components.surface-banded}` — `{colors.band}` background with `{colors.black}` text. Subtle section emphasis on warm-white pages. Use to mark a section without inverting it.
- `{components.surface-inverted}` — `{colors.black}` background with `{colors.white}` text. Strong section emphasis. Used sparingly — typically once per page.

**System / Status**

- `{colors.success}` (#73D277) — confirmations, in-stock states.
- `{colors.warning}` (#EFC761) — cautionary states.
- `{colors.error}` (#F66F51) — errors and destructive actions.

Hierarchy is achieved through opacity, not tinted color: secondary text at 0.5 opacity, eyebrow labels at 0.4. Heckler uses no gradients, no color washes, and no tinted surface variants.

## Typography

The primary typeface is **LL Medium** (licensed). When unavailable, the design holds on the system stack: `system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif`.

**Display sizes** (`{typography.headline-display-xl}`, `{typography.headline-display-lg}`) carry tight negative tracking — between -0.015em and -0.02em. They are weighted at 600 (semibold). On responsive layouts these scale fluidly between mobile and desktop; the token values represent the desktop ceiling.

**Body sizes** (`{typography.body-lg}`, `{typography.body-md}`, `{typography.body-sm}`) sit at weight 400. **Body line-height is locked to 1.3** across every size. This is non-negotiable — it is tight enough to feel composed and loose enough to remain legible at long form. Body text never goes higher than 1.3.

**Labels and eyebrows** (`{typography.label-sm}`, `{typography.eyebrow}`) are the only places positive tracking appears: 0.06em on small uppercase labels, 0.1em on eyebrows. They are uppercase by convention and rendered at reduced opacity (0.4–0.5) when used as section meta.

Italics appear only in editorial prose — never in UI. Body copy maintains a maximum line length of 72 characters.

### Type usage principles

**Use the smallest number of type sizes per application — typically three.** The system defines many roles (display, headline, body, label, eyebrow); any one layout should pull from a few of them. Restraint reads as confidence. Reaching for an additional size usually signals a hierarchy problem to be solved structurally, not by adding a new size.

**Use bold sparsely.** Either something is bold, or it isn't. Don't sprinkle bold weight to "emphasize" mid-paragraph — restructure the sentence or split the paragraph instead.

**Display type is a deliberate brand expression — use it confidently and large.** Heckler likes big words. When the layout calls for a hero headline, lean into scale rather than shrink toward safe.

## Iconography

The system uses two complementary icon tools, each with a clearly defined role.

### Editorial — LL Medium stylistic set

A custom OpenType stylistic set extends LL Medium with Heckler-specific glyphs — directional arrows (`←` `↑` `→` `↓`), arithmetic (`×`), structural marks (`≡`), and interaction icons (search, hand, devices). Because they're delivered through the typeface, they share LL Medium's proportions, weight, and metrics, and they sit inline with text without visual disturbance.

**When to use:** in body copy, UI labels, and editorial layouts where an icon clarifies meaning ("Go `→` hecklerdesign.com," "Enter the `🔍` search term"). Always typed via the stylistic set so the icon matches surrounding text exactly.

### Branded — Heckler Icons

For UI iconography the editorial set does not cover — the brand mark, social platforms, process indicators, and the handful of UI primitives the brand uses today — the system uses **Heckler Icons**, a dedicated icon font commissioned for the brand. Current version: 1.7. The set is intentionally small and curated; new icons are added by extending the font, not by reaching for a third-party library.

Glyphs are referenced by curated kebab-case names (`arrow-right`, `social-distance`, `heckler-glyph`). The curated names are the source of truth for editorial reference and for any picker UI built against the font; the underlying Unicode codepoints are an implementation detail.

**When to use:** any digital surface where the editorial stylistic set will not do — branded process diagrams (`designed` → `manufactured` → `assembled` → `shipped`), social link rows, dense product UI, navigation chrome.

The two systems are complementary. Do not duplicate icons across both: an inline arrow in body copy uses the LL Medium stylistic set; a branded social row in a footer uses Heckler Icons.

### Library discipline

Do not introduce off-brand icon libraries (Material, Feather, Heroicons) into Heckler surfaces. The stylistic set covers editorial inline use; Heckler Icons covers branded UI. If a needed icon falls into neither, extend Heckler Icons through the brand process — never reach for a foreign system.

## Layout

### Spacing derivation

**All spacing derives from the line-height of body copy.** The 24px unit is the body line-height (≈ body-lg × 1.3) rounded to the nearest pixel; every spacing token is a multiple of that unit. **Margins are 1.5 units** of this measure (36px); **gutters are 1 unit** (24px). Smaller multiples (`0.5u`, `1u`) separate related items inside a group; larger multiples (`3u`, `6u`, `10u`) separate sections from one another. The pattern: small multiples between related items, larger multiples between sections.

This single derivation — body line-height → unit → spacing scale — is what keeps the system coherent. Adding a new spacing value means defining its multiple of the body unit, not picking a pixel value off a designer's intuition.

### Spatial application

All spatial values resolve to `{spacing.unit}` (24px = `1u`). Page margins use `{spacing.1.5u}` (36px); column gutters use `{spacing.1u}` (24px). Section-to-section padding sits at `{spacing.3u}` (72px) for standard layouts; `{spacing.6u}` (144px) for marketing layouts that need stronger section separation. The non-linear jump from `3u` to `6u` is deliberate — the brand discipline is to escalate section separation in larger steps, not gradual ones.

Layouts are predominantly left-aligned. Centered alignment is reserved for empty states, hero CTAs, and isolated focal moments. Asymmetry is welcomed when it serves the content; symmetry is not a goal in itself.

The grid is 12 columns at desktop, collapsing to single-column flow on mobile. Common compositions: 2-up product cards, 3-up feature blocks, 4-up marketing tile rows, 50/50 image-and-copy feature rows.

### Grid system (Grid v1)

Heckler patterns lock to a **named 12-column CSS Grid declared once at the site root** and inherited by every pattern via subgrid alignment. Pattern markup contains zero literal pixel values for layout — only design intent expressed through span utilities and spacing tokens.

**Tokens.** Declared in `theme.json` under `settings.custom.grid` and exposed as CSS custom properties:

- `--wp--custom--grid--columns` = `12`
- `--wp--custom--grid--gutter` = `clamp(16px, 2vw, 32px)` (column gap)
- `--wp--custom--grid--margin` = `clamp(20px, 4vw, 64px)` (outer page margin)
- `--wp--custom--grid--content-max` = `1600px` (cap on the 12-col content area)

**Wide-viewport behavior.** The 12-column content area caps at `--wp--custom--grid--content-max` (1600px). On viewports wider than that, the columns hold their max width and the two margin tracks expand to absorb the extra space — content stays centered, page never feels infinitely wide. This matches the existing `wideSize: 1600px` contract in `theme.json` and aligns the new grid system with the legacy `is-layout-constrained` patterns.

**Track structure.**

```
full-start  wide-start                              wide-end  full-end
|  margin   |   1   2   3   4   5   6   7   8   9  10  11  12   |  margin
|<--------->|<------------ 12 columns ------------>|<------------>|
                          gutter between each
```

**Pattern API.** Patterns place blocks via these classes (defined in `assets/css/grid.css`); never write raw `grid-column` declarations or percentage widths.

| Class | Effect |
| --- | --- |
| `.hk-span-full` | Full-bleed: `full-start` → `full-end` |
| `.hk-span-wide` | 12-col content area: `wide-start` → `wide-end` |
| `.hk-span-prose` | Centered narrow editorial prose (cols 3 → 11) |
| `.hk-span-N` | N-column span inside a subgrid row (`N` = 1..12) |
| `.hk-grid-row` | Inner subgrid that inherits the parent grid lines |
| `.hk-container` | Opts the pattern into container queries (`container-type: inline-size`) |

**Subgrid usage.** A pattern's outer wrapper carries `.hk-span-wide` (or `.hk-span-full`). Inside, a `wp:group` with `.hk-grid-row` becomes a subgrid; its children declare `.hk-span-N` to land on parent grid lines. This means image+text splits, feature card rows, and column layouts all share the *same* column lines as the rest of the page — no ad-hoc column widths.

**Container queries over media queries.** Patterns query their own rendered width via `@container (inline-size < 720px) {}` rather than the viewport. A pattern dropped into a narrower context (sidebar, modal, half-width region) lays out correctly without knowing the viewport size.

**The "no literal pixels" rule.** Pattern PHP files must not contain literal pixel values, raw `clamp()` declarations, or percentage widths for layout. Everything goes through tokens (`var:preset|spacing|Xu` for vertical rhythm, `var(--hk-grid-gutter)` / `var(--hk-grid-margin)` for grid math) and span utility classes. Lint enforcement is planned for Phase 4.

**Always on.** The grid is declared unconditionally on `.entry-content` — there is no opt-in body class, no dual-mode CSS, no compatibility shims for legacy markup. Patterns are authored grid-native: classNames carry layout intent, vertical rhythm uses spacing tokens, and horizontal placement always goes through `.hk-span-*`. Headers, footers, and any other layout that needs the grid declares it locally on its own root.

**Phase rollout.**

1. **Phase 1 — Foundation.** Grid declared, tokens published, debug overlay shipped.
2. **Phase 2 — Pilot.** Section Divider + Image + Text Split × 2 authored grid-native.
3. **Phase 3 — Legacy conversion.** Convert the remaining patterns (`page-hero`, `cta-footer`, `feature-key`, `feature-group`, `feature-list-dark`, `section-faq`, `section-testimonial`, `section-three-testimonials`) to grid-native, dropping `align: full` / `layout: constrained 1600px` / `clamp(...)` horizontal padding / `width: 50%` from every pattern's markup.
4. **Phase 4 — Enforcement.** Add CI lint that scans `themes/heckler/patterns/*.php` and rejects literal pixels, raw `clamp()`, `align: full`, `layout: constrained`, and percentage widths.

**Debug overlay.** Logged-in editors see a "Grid Debug: off / on" node in the WP admin bar. Clicking it toggles `body.has-hk-grid-debug`, which renders the 12 columns as semi-transparent CTA-blue bands overlaid on the page. State persists in `localStorage`. Production users without `edit_posts` capability never load any of the debug code.

## Elevation & Depth

Heckler uses essentially no elevation. There are no drop shadows on buttons, no glows on focus states, no layered surface effects. The single permitted shadow is a subtle product-card lift — 1–2px Y offset at low opacity — used only when content cards must visually detach from a busy background.

Depth is communicated through space and weight, not light. A card stands out because it has room around it, not because it has a shadow under it.

### Section & table separation

**Do not use long horizontal hairlines** (1px rules running across a section or full page width on warm-white surfaces) to divide page sections, subsections, table rows, or table headers. Hairlines on warm white read fragile and dated.

Separate sections with **whitespace** — generous section padding (`{spacing.3u}` to `{spacing.6u}`) is the primary tool. Where a stronger visual break is needed, use a **subtle banded fill** — alternate one section onto `{components.surface-banded}` (`{colors.band}`, #F4F1EA), or invert a single section to `{components.surface-inverted}` (`{colors.black}` background) for emphasis.

For tables, communicate row separation with padding and, where alternation is genuinely useful, a subtle `{colors.band}` (#F4F1EA) zebra fill on every other row. Header rows are distinguished by typography (`{typography.label-sm}`, uppercase) and weight, not by an underline rule.

**Component-level borders — buttons, badges, inputs — are exempt from this rule.** A 1px outline on an interactive element is structural, not decorative.

## Shapes

Corners are square or near-square. `{rounded.none}` is the default for cards, surfaces, dividers, and most components. `{rounded.sm}` (2px) is the maximum permitted radius and is reserved for buttons, inputs, and badges where a minimal softening reads as intentional rather than rounded.

No pill shapes. No circular avatars in primary UI (circles are reserved for color swatches and the optional iconography grid). No organic curves, no decorative shape vocabulary.

## Photography

### Role of photography in the brand

Photography is a primary communication medium for Heckler. The brand is intentionally restrained — copy is matter-of-fact, typography understated, color minimal — so imagery carries a disproportionate share of the communicative work. Pictures must convey product quality and precision, real-world usability, architectural and environmental integration, and emotional tone (calm, confident, modern, collaborative). A viewer should grasp what the product is, how it is used, and why it matters without reading.

The visual reference is **Kinfolk** and **Wallpaper\*** editorial photography, adapted to Heckler's professional Pro AV context. Restraint, realism, and intentional composition. Technical choices should disappear in service of a calm, confident image.

### Optical specification

- **Primary lens range:** 35mm – 50mm full-frame equivalent. The 40–45mm neutral zone is preferred.
- **Secondary range:** 75mm – 100mm for portraiture and compression.
- **Controlled use:** 28mm only when spatial context is critical and distortion is managed.
- **Prohibited:** wider than 28mm (perspective distortion); 135mm and longer (over-compression, lost environmental context).
- **Aperture:** f/2.0 – f/4.0 typical; f/4.0 – f/8.0 for product clarity and depth.
- **Depth of field:** moderate shallow. Avoid extreme bokeh. The environment must remain legible.

### Camera positioning and perspective

Stand farther back than typical lifestyle photography. Frame using natural perspective, not lens distortion. Camera height **42–52 inches AFF** is typical, sitting at or just below seated eye-line. Compositions are predominantly **orthogonal — straight-on, with minimal tilt or dramatic angle.** Vertical lines must remain parallel. No keystoning. No barrel distortion. Architecturally accurate perspective at all times.

Frame with **balanced negative space**. The subject is not always centered, but every composition feels deliberate and calm.

### Lighting

Natural window light is the primary source. Quality is **soft, diffused, and directional but subtle.** Modifiers — sheer curtains, diffusion panels, white-wall bounce, reflectors — produce shadows with soft edge definition. Harsh shadow lines are off-brand.

When artificial light is required, use continuous sources over strobe and large soft modifiers. Match daylight color temperature (5000K–5600K). Maintain a **key-to-ambient ratio of 1:1 to 1.5:1**. Even exposure across the scene; no spotlighting.

### Color and tone

The palette is **muted, desaturated, warm-neutral.** Never vibrant, never punchy.

- **White balance:** slightly warm, ~5200K – 6000K depending on environment.
- **Contrast:** low to moderate.
- **Blacks:** lifted slightly. Never crushed.
- **Highlights:** never clipped. Preserve texture in whites.

### Capture medium and film simulation

Default Heckler photography is **digital** — high-end full-frame bodies (Sony A7R, Canon R5, Hasselblad X2D class), neutral processing, preserved highlights. This is correct for product catalog, PDP gallery shots, spec imagery, studio cutouts, and technical/installation reference photography, where literal pixel sharpness matters.

For **hero, editorial, and brand-narrative imagery**, an optional **film-simulation treatment** is available. It layers on top of the existing optical specs (lens, aperture, light, color) without replacing them — the composition rules are unchanged, only the capture medium changes.

**Default film stock: Kodak Portra 400.** This is the Kinfolk and Wallpaper\* editorial signature — warm flattering skin tones, slightly desaturated greens, muted earth tones, gentle highlight rolloff. Alternates: *Portra 800* (slightly more grain, low-light situations); *Fuji Pro 400H* (softer pastel palette, rare since discontinued).

**Camera body pairings:**

- **Medium format (editorial standard):** Hasselblad 500CM with Zeiss Planar 80mm f/2.8, 6×6 square negative cropped to 3:2.
- **35mm rangefinder (more documentary):** Leica M6 with Summicron-M 35mm or 50mm f/2.0.

**Film characteristics to specify in the prompt** (treat each as a separate clause — vague "film look" language alone won't render):

- **Grain.** Subtle organic silver-halide grain. Fine structure, visible across midtones and shadows, never heavy or grungy. Must read as the natural texture of the medium, not an applied filter.
- **Highlight rolloff.** Soft and gentle. Bright window light and bright displays bloom softly to white with no harsh digital clipping.
- **Shadow toe.** Lifted shadows with a gentle warm toe. Blacks are dark but not crushed; deepest values carry subtle warmth.
- **Micro-contrast.** Slightly softer than digital — fine details (fabric weave, wood grain, hair) are clearly resolved but with film's organic softness, not razor-sharp edge contrast.
- **Color science.** Portra 400 character: warm flattering skin, desaturated greens, muted earths, preserved highlight detail. Reads warm without yellow cast.
- **Halation.** Subtle warm orange glow only at the brightest highlights (display edges, brightest window edges). Use sparingly — heavy halation reads as fake filter.
- **Vignetting.** Very slight natural lens vignetting toward the corners is welcome. No heavy vignettes.

**Use it for:** hero brand imagery, web heroes, campaign moments, About / Brand pages, editorial features, blog header art, case-study openers, print collateral where an emotional crafted feel is appropriate.

**Don't use it for:** product catalog, PDP gallery shots, spec drawings, cutout / studio cyc product photography, technical or installation reference imagery, or any context where literal pixel sharpness matters more than mood.

**Prompt insertion order.** Place the capture-medium block **early** in the prompt, after the scene type and before the structural product description. State the stock and camera body explicitly — do not just say *"film look"*. Include grain quality, tonal response, and halation as separate clauses.

**Film-specific negatives** (always include when requesting a film simulation):

> no digital noise (the grain must read as organic silver-halide film grain, not pixel noise), no heavy or grungy grain, no vintage yellow color cast, no faux Instagram or VSCO filter look, no clipped highlights, no crushed blacks, no Lomo cross-process color shift, no fake light leaks or scratches, no fake Polaroid or film-frame border, no oversaturated color

### Composition

Minimalism and editorial restraint are the throughline. Use generous negative space to create calm and hierarchy. Clean lines parallel the frame edges. **Balanced asymmetry** is preferred over centered symmetry. The subject is uncluttered.

**Aspect ratio:** 3:2 default. **Safe framing:** keep the primary subject within the center 70–80% of frame; maintain ≥10% edge margin for critical elements; faces should sit no closer than ~15% to any frame edge. Pull back slightly to ensure key subjects are not near the edges — images must survive responsive crops on web, mobile, and thumbnails.

### Subjects, environments, and styling

**Environments** are real but curated. Minimal modern interiors. Natural materials — wood, linen, stone. Professional spaces that reflect active use: meeting rooms, collaboration spaces, work areas.

**Objects** are functional and well-designed. Visual noise is removed. Technology is integrated, never featured as clutter.

**All depicted technology must be current-generation.** Lean Apple computers and devices where appropriate. Maintain ecosystem consistency within any scene — never mix dated and modern hardware.

**Cables** are minimal, intentional, and realistic. Visible cabling is cleanly routed and short. No excess slack, no tangles, no unrealistic concealment.

**Human subjects** are comfortable, relaxed, and naturally engaged. Subtle positivity — light smiles, attentive focus. Body language indicates good listening (slight forward lean, eye contact), collaboration (orientation toward others, shared focus), participation (gesturing, interacting with tools or displays), and proactivity (engaged posture, readiness). Energy without exaggeration — alert and present, not performative. Avoid posed or staged interactions.

**Wardrobe:** business casual. Polo shirts, casual button-downs, denim are acceptable. Muted tones, natural fabrics, well-fitted, no prominent logos or patterns. Formal business suits are rare. Avoid trendy or distracting choices.

**Props** are sparse and intentional. Every object must justify its presence. Notebooks, laptops, pens reinforce collaboration without clutter.

### Motion and narrative

Tone is **quiet, contemplative, confident, purposeful.** A subtle sense of momentum — work is happening, not staged. Subtle gestures only. Natural interaction with space and tools. No exaggerated motion, no theatrical energy.

### Product positioning (Heckler-specific)

All AV components reflect real-world AV best practices and ergonomic viewing. Align elements to clean horizontal and vertical datum lines.

| Element | Specification |
|---------|---------------|
| Camera (video meeting) | 44 – 48 inches AFF; aligned with seated eye-line |
| Primary display bottom edge | 44 – 48 inches AFF; level, orthogonal mounting |
| Video bar | Directly below the display; 0 – 2 inches gap maximum; centered horizontally |
| Heckler Credenza top surface | ~36 inches AFF |
| Heckler Framework standard shelf | ~40 inches AFF |
| Heckler Framework short-leg | ~31 inches AFF |

When a Credenza or Framework appears, **it should be the only furniture on or near the wall** — no competing cabinets, shelves, or visual clutter. Both are almost always paired with one or more primary displays above.

Maintain consistent spacing between components. No floating or misaligned elements. Devices must feel intentionally installed, not staged.

### Display sizing

| Context | Display size |
|---------|--------------|
| Default (most rooms) | 65 – 75 inches |
| Small meeting / huddle | 55 – 65 inches |
| Large conference / boardroom | 85 – 110 inches |
| Desktop monitor | 27 inches, modern slim-bezel |

Size to room scale and viewing distance. No undersized displays in large rooms; no oversized displays in small rooms.

### Hero product shots

Hero shots are primary marketing images: product central, grounded in a real environment. Always **in-location**, never pure studio isolation. The background supports the product; never competes.

- **Camera:** lower heights encouraged, including near floor level. Slight upward perspective acceptable to enhance presence and stature. Controlled geometry — no distortion.
- **Composition:** product dominant. Clean separation from background via depth, light, or framing. Strong silhouette, readable form. Negative space elevates perceived value.
- **Lighting:** natural or natural-mimicking only. Subtle highlight shaping defines edges and materials. No dramatic, high-contrast commercial lighting.
- **Humans (optional):** secondary to product. Reinforce scale and use. Same behavioral rules.
- **Lens:** 35–50mm for environmental hero; 50–85mm for tighter product emphasis. No ultra-wide.

The product should feel **inevitable** in the environment — not inserted.

### Screen content rendering ("painting" the screens)

Screens must be believable, on-brand, and supportive — never UI clutter, never platform-biased.

**Large primary displays.** Default scenario: a video meeting in progress. Show one or two remote participants, friendly and attentive, seated in a modern meeting room. Occasionally with a notebook computer in front of them — not always. Render full-bleed video of the participants only — **no visible UI, no Zoom/Teams controls, buttons, overlays, or name tags.** Avoid laptop-webcam perspective (the image must not feel like a Zoom/Teams laptop call). Avoid work-from-home environments (rare exceptions only) and tiled grid layouts; if two participants are shown, place them in the same room a natural distance apart.

**Secondary displays.** Show visually engaging content: architectural concepts, product design sketches, photography, creative work. Avoid corporate slide decks, dense tables, spreadsheets, or analytical charts.

**Laptop and desktop screens.** Modern knowledge work — design tools, creative software, clean document interfaces. Minimal and supportive of the scene; never dominant.

**Touch controllers.** Generic, platform-neutral. Visually inspired by Zoom Rooms and Microsoft Teams Rooms. Clean buttons, neutral palette, minimal readable text. **No brand-specific UI or logos.** No dense interfaces.

**Room schedulers.** Default expectation on all meeting rooms. **Strict placement rule: only on the *outside* of the meeting room, facing outward into the general office space. Never on the interior side.** Mounted on mullions where architecture allows; on adjacent drywall otherwise. Heckler-style scheduler mounts most often; dedicated devices from Logitech, Neat, and similar manufacturers are acceptable and encouraged. UI is generic, platform-neutral, simplified, and reflects the actual room state — "In Use" when occupied, "Available" when empty. Optional: simplified meeting time blocks, generic non-branded room name. Muted, refined color cues (green Available, red In-Use).

**Rendering rules.** Brightness is realistic relative to environment — legible but never self-illuminating or overexposed. Acknowledge that displays use glass surfaces and produce subtle reflections — soft and physically plausible (light sources, windows, room shapes). Reflections add realism without competing with content. **Matte or low-glare appearances are encouraged.** Balance reflection intensity with screen brightness to preserve legibility.

Avoid: glowing or overexposed screens, mirror-like reflections, high-contrast glare or hotspots, reflections that reduce legibility, blown-out highlights, crushed UI darks. When in doubt, slightly understate screen brightness. Display and environment must belong to the same lighting world.

### Material and finish fidelity

- **Powder coat:** fine texture, low sheen.
- **Metal:** soft highlights, never glossy.
- **Felt:** matte, light-absorbing.
- **Wood:** white oak, subtle grain.

**Textile accuracy.** Heckler frequently uses **Maharam Metaphor** textiles. AI generations and prop-styled captures must reference Maharam's official materials to capture weave pattern, color depth, and surface texture accurately. **Use a high-resolution textile reference image whenever fabric is depicted** — generic AI fabric texture is off-brand and reads as fake.

Avoid plastic-like rendering, overly glossy finishes, and unrealistic reflections.

### Product accuracy and reference requirements

Visual accuracy and credibility outrank stylistic preference. When a conflict arises in capture or generation, prioritize in this order:

1. **Real-world product dimensions, spec drawings, and installation guides.**
2. **Architectural realism and human ergonomics.**
3. **Brand aesthetic and composition.**

**Product geometry and scale.**
- Reference multiple images of each Heckler product from different angles.
- Review the dimensioned spec drawings (typically near the bottom of each product web page).
- Use these references to lock proportions, material thicknesses, and structural relationships. The model's prior is not authoritative.

**Dimensional fidelity (anti-shrinkage rule).** Heckler products must be rendered at their true physical dimensions and proportions. Do not let the model shrink, compress, or thin the product to make it visually "fit" the composition or to keep it fully unobscured.

- Always state the product's **W × H × D dimensions explicitly** in the prompt, and call out the resulting visible proportion (e.g. *"a wide horizontal rectangle, ~2:1 width-to-height"*).
- Cross-check the rendered scale against people in the frame: a seated shoulder sits at ~50–54 inches AFF, a standing eye-line at ~62–66 inches AFF. The product's vertical extent in the frame must be consistent with its real-world height relative to those landmarks.
- If the rendered product looks shorter, thinner, or smaller than spec, re-roll. Don't accept it.

**Partial occlusion is realistic and desirable.** AI models will instinctively shrink the hero product or clear its foreground to keep it fully visible. This produces the empty-showroom look we explicitly reject. Real installed environments *always* have furniture, people, and accessories partly in front of fixtures.

- Compose the frame so conference-room furniture — the near edge of the table, a chair back, a person's shoulder, a laptop, a monitor arm — naturally crosses in front of the lower portion of the Heckler product.
- The product remains the hero through **position, scale, and lighting**, not through artificial isolation.
- Examples of good occlusion: a conference table's far edge cuts across the lower quarter of a wall-mounted credenza; a chair back overlaps a corner; a standing figure's shoulder partially obscures one side of the product.
- State this directive explicitly in every prompt — the model needs to be told that occlusion is a feature, not a bug.

**Installation realism.**
- Review the product user guide for the actual mounting position and install conditions.
- Products must read as **installed** — never floating, loosely staged, or implausibly attached.

**Device mounting accuracy.**
- Video bars are frequently mounted directly to Heckler products. Reference the actual mounting brackets and accessories.
- Every device must appear physically attached and supported correctly. No magical suspension.

**Device realism (third-party hardware).**
- Reference Logitech, Neat, Huddly, and Shure for scale, form factors, and mounting expectations.
- **Do not depict brand logos.** *Exception:* Apple devices may show subtle, accurate branding (e.g. the Apple mark on a MacBook lid).

**Furniture positioning and ergonomics.**
- Tables positioned logically relative to displays and cameras.
- Chairs and people oriented for comfortable viewing.
- No neck-strain angles. No unrealistic seating positions.

### Continuity across multi-image sets

When generating or capturing a set of images intended to live together: maintain consistent lighting direction and time of day; keep furniture and layout consistent; maintain wardrobe continuity; keep screen participants consistent across shots.

### Common failure modes (avoid)

- Display mounted too high
- Camera positioned too high
- Overly bright or glowing screens
- People over-acting or posing
- Mixed or outdated technology
- Unrealistic cable routing
- Over-styled or cluttered interiors
- **Heckler product rendered shorter, thinner, or smaller than its true spec dimensions** — typically the AI is trying to keep the product fully unobscured. Re-roll with explicit dimensions and an explicit "partial occlusion is desirable" directive
- **Empty-showroom staging** — foreground unnaturally cleared so the product is fully visible
- **Stock-photo cues** — all subjects facing camera, synchronized smiles, theatrical gestures, mannequin-like spacing

### AI image generation

When generating imagery with Nano Banana Pro or comparable models, build prompts as a structured composition rather than freeform paragraphs. The modular structure enforces completeness and makes prompts editable and repeatable. The leading **Photorealism** anchor and the trailing negative block are intentional — they materially reduce the AI-rendered look.

**Prompt module structure:**

1. **[Scene type]** — what room, what activity
2. **[Lens + framing]** — focal length, aperture, height, aspect ratio, safe framing
3. **[Lighting]** — source, quality, color temperature, ratio
4. **[People behavior]** — count, posture, attire, engagement
5. **[Device rules]** — current-gen, Apple, mounting heights, sizing, cable handling
6. **[Screen content rules]** — what's on each display, no UI, no logos
7. **[Negative block]** — explicit prohibitions

**Standard negative prompt block (always include):**

> no clutter, no excessive cables, no ultra-wide distortion, no dramatic lighting, no UI overlays, no brand logos (Apple subtle branding allowed), no unrealistic reflections, no glowing or overexposed screens, no warped geometry, no floating objects, no AI artifacts, no waxy or plastic textures, no harsh shadows, no oversaturated color, no posed or staged interaction, no formal suits, no dated technology, no generic AI fabric texture (use a Maharam reference), no floating or unmounted devices, no neck-strain seating angles, no room schedulers on the interior side of meeting rooms, **do not shrink, compress, or thin the Heckler product to fit the composition — render at true physical dimensions**, no empty-showroom staging (partial occlusion of the product by chairs, tables, or people is desirable), no stock-photo posing (everyone facing camera, synchronized smiles, theatrical pointing)

**Reusable prompt template:**

```
Photorealistic editorial photography of [SCENE TYPE] in the style of Kinfolk and
Wallpaper* magazines. Shot on a [35mm | 50mm] full-frame lens at [f/2.8 | f/4],
orthogonal straight-on composition, eye-level perspective at ~46 inches AFF, 3:2
aspect ratio, safe framing with generous edge margins. Soft natural window light,
diffused daylight, no harsh shadows, ~5400K white balance, key-to-ambient ratio
~1.2:1. [N] people in business casual attire (polo shirts, casual button-downs,
denim), relaxed and naturally engaged, subtle smiles, attentive listening posture,
collaborative body language, gesturing toward a shared display. Current-generation
Apple hardware throughout; modern slim-bezel display sized appropriately for the
room with video bar mounted 0–2 inches below, centered, display bottom edge ~46
inches AFF; minimal cleanly-routed cables; integrated room scheduler on the
mullion showing platform-neutral "In Use" or "Available" state. Primary display
shows a video meeting with one or two remote participants seated naturally in a
modern meeting room, no UI overlays, no platform logos, screen brightness
balanced to ambient room light, soft plausible reflections only, matte or
low-glare appearance preferred. Minimal modern interior with white oak and matte
black metal surfaces, natural stone or concrete accents, muted desaturated
warm-neutral color palette, lifted blacks, preserved highlight detail,
architecturally accurate perspective with parallel verticals, true-to-life
materials. Negative: no clutter, no excessive cables, no ultra-wide distortion,
no dramatic lighting, no UI overlays, no brand logos, no unrealistic reflections,
no glowing or overexposed screens, no warped geometry, no floating objects, no
AI artifacts, no waxy or plastic textures, no harsh shadows, no oversaturated
color, no posed or staged interaction, no formal suits, no dated technology.
High photorealism.
```

**Iteration strategy:** start broad with style anchors (Kinfolk, Wallpaper\*), refine lens and composition, then adjust human behavior and props last. Iterate toward less, not more, visual complexity. For accurate product geometry, **always pass a SKU reference image** — never rely on the model's prior for any product appearing in customer-facing assets.

### Room typology recipes

| Typology | Display | Lens | People | Screen content |
|----------|---------|------|--------|----------------|
| 2-person huddle | 55 – 65" | 35mm | 2 | Single remote participant, or 2 in same room |
| 4–6 person meeting | 65 – 75" | 35 – 50mm | 3 – 5 | Meeting in progress |
| Boardroom (8–12) | 75 – 110" | 35mm, slightly pulled back | 5 – 8 | Meeting or secondary creative content |
| Open collaboration | optional | 35mm | varies | n/a or casual content |
| Lecture / training (Framework) | large format | 35 – 50mm | presenter + audience | Presentation content |
| Focus desk / touchdown | 27" desktop | 50mm | 1 | Productivity or design work |

### Practical capture cheat sheet

| Setup | Lens | Aperture | Notes |
|-------|------|----------|-------|
| Default | 35mm | f/2.8 | ISO low; WB ~5400K |
| Portrait | 85mm | f/2.0 – f/2.8 | — |
| Product / still life | 50 – 100mm | f/4.0 – f/8.0 | — |

## Components

The core set:

- **`{components.button-primary}`** — Black fill, warm-white text. The default action. **WP block:** plain `core/button` with no style applied — theme.json's `elements.button` provides the styling (2px border-radius, 16px / 600, 12/24px padding, 1px solid transparent border).
- **`{components.button-cta}`** — CTA Blue fill, black text. Used for the primary conversion action on a page (Add to Cart, Request Quote, Contact Sales). One per page, ideally. **WP block:** `core/button` with the `is-style-hk-cta` block style applied.
- **`{components.button-ghost}`** — Transparent fill with a 1px black border, black text. The button picks up the underlying surface (warm-white default, banded fill, or any other light surface) — surface-agnostic by design. Secondary actions on light surfaces. Hover inverts to black fill with warm-white text — that's where ghost picks up a visible fill. **WP block:** `core/button` with the `is-style-hk-ghost` block style applied.

For secondary actions on **dark surfaces** (e.g. inside a `surface-inverted` section or CTA banner), use WP core's `is-style-outline` with `textColor: white`. The border inherits from `currentColor` and tracks the text color, rendering as a 1px white outline on dark bg. This is distinct from `button-ghost` (which assumes a light surface).

All button mechanics — 48px target height (via 16px font + 12px top/bottom padding + 1.3 line-height), 2px corner radius, 600 weight, 1px solid border (transparent on filled, black on ghost) — derive from `theme.json` `elements.button`. Pattern authors and editors should never override these inline; pick a block style or stick with the default.
- **`{components.card}`** — Square-cornered content container. Padded with `{spacing.1u}`. Used for product tiles, blog excerpts, feature blocks.
- **`{components.badge}`** — Small status or category indicator. Uses `{typography.eyebrow}` for label rendering. Status variants exist for success and warning (filled with their respective colors); the error variant is rendered as warm-white surface with a 1px `{colors.error}` border and black text — color does the signaling work via outline rather than fill, preserving WCAG AA contrast.
- **`{components.input}`** — Form text input. Square corners, warm-white surface, black 1px border.
- **`{components.surface-default}`** — Warm-white page surface. The default mode for almost everything.
- **`{components.surface-banded}`** — Warm-gray (`{colors.band}`, #F4F1EA) section background. Subtle emphasis on warm-white pages — use to mark a section without inverting it.
- **`{components.surface-inverted}`** — Warm-near-black section background with warm-white text. Strong emphasis. Used sparingly — typically once per page.

All components inherit from the token layer. No component should hard-code a value that exists as a token.

## Do's and Don'ts

**Do**

- Lead with monochrome. Add CTA Blue only where a user needs to act.
- Use the spacing tokens. Every gap, padding, and margin should resolve to a multiple of `{spacing.unit}`.
- Lock body line-height at 1.3. Always.
- Use opacity (0.4, 0.5) for type hierarchy.
- Trust white space. Sections should breathe.
- Refer to the company as "Heckler" — capital H — in all copy. Never lowercase.

**Don't**

- Don't use CTA Blue as decoration, accent, or surface fill.
- Don't use pure white (#FFFFFF). The brand white is warm: `{colors.white}` (#FDFCF8).
- Don't add gradients, glows, or decorative shadows.
- Don't introduce arbitrary spacing values outside the token grid.
- Don't set body line-height higher than 1.3.
- Don't use rounded corners beyond `{rounded.sm}` (2px).
- Don't use exclamation points or superlatives in copy.
- Don't write "heckler" in lowercase as a company reference.
- Don't use long horizontal hairlines to separate sections, subsections, or table rows on warm-white backgrounds. Use whitespace or a subtle toned band instead. (Borders on buttons, badges, and inputs are fine.)