look_inc___style_reference:
  info: "> White-walled gallery on a press proof. A typographic system of black serif and grotesque sans surrounds large documentary photography on pure white — the interface is the negative space between stories."

  theme: "light"

  info: "Look inc operates as a monochrome editorial gallery — the absence of color is the brand. The interface is a white canvas where serif headlines (Old Standard) and geometric sans (GT America) frame full-bleed project photography, letting the work itself supply all visual interest. Typography is the entire decorative system: a classical serif headline next to a modern grotesque body creates editorial tension that mirrors the agency's positioning as 'a non-traditional agency with roots in journalism.' Components are austere — no cards with shadows, no rounded containers, no accent buttons — just image tiles sitting directly on white with a small caption stack beneath. The grid is the design: equal-weight rectangular tiles arranged in rows, each tile a self-contained editorial spread."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Press Black | `#000000` | `--color-press-black` | Headlines, body text, navigation links, hairline dividers — the single dark mark in the system |"
    info: "| Proof White | `#ffffff` | `--color-proof-white` | Page canvas, tile backgrounds, the only surface tone in the system |"
    info: "| Galley Gray | `#878787` | `--color-galley-gray` | Muted captions, secondary metadata, editorial sub-labels — appears sparingly under project titles |"
    info: "| Rule Line | `#e5e5e5` | `--color-rule-line` | Hairline nav dividers, ultra-subtle structural separators — the faintest non-black non-white mark allowed |"

  tokens___typography:

    old_standard_tt___editorial_headlines_and_sub_labels___a_19th_century_book_serif_that_signals_journalism_heritage__used_at_32px_for_project_titles__21px_for_section_intros__18px_for_compact_serif_captions__the_single_weight_400_is_deliberate__this_is_a_display_serif_meant_to_be_set_large_and_let_breathe__not_bolded_for_emphasis_____font_old_standard_tt:
      - "**Substitute:** EB Garamond, Cormorant Garamond, Playfair Display"
      - "**Weights:** 400"
      - "**Sizes:** 18px, 21px, 32px"
      - "**Line height:** 1.10–1.40"
      - "**Role:** Editorial headlines and sub-labels — a 19th-century book serif that signals journalism heritage. Used at 32px for project titles, 21px for section intros, 18px for compact serif captions. The single weight (400) is deliberate: this is a display serif meant to be set large and let breathe, not bolded for emphasis."

    gt_america___body_copy__navigation__descriptive_text___a_modern_american_grotesque_with_mechanical_precision__the_700_weight_handles_project_subtitle_agency_statements__400_handles_longer_descriptive_paragraphs__its_geometric_neutrality_balances_the_warmth_of_old_standard_without_competing_____font_gt_america:
      - "**Substitute:** Inter, Söhne, Neue Haas Grotesk"
      - "**Weights:** 400, 700"
      - "**Sizes:** 18px, 21px, 23px"
      - "**Line height:** 1.20–1.70"
      - "**Role:** Body copy, navigation, descriptive text — a modern American grotesque with mechanical precision. The 700 weight handles project subtitle/agency statements; 400 handles longer descriptive paragraphs. Its geometric neutrality balances the warmth of Old Standard without competing."

    apple_system___smallest_body_and_link_text___system_stack_fallback_for_the_gt_america_role__providing_a_baseline_reading_experience_at_15px_with_generous_1_65_leading____font_apple_system:
      - "**Substitute:** system-ui, Segoe UI, Helvetica Neue"
      - "**Weights:** 400"
      - "**Sizes:** 15px"
      - "**Line height:** 1.65"
      - "**Role:** Smallest body and link text — system stack fallback for the GT America role, providing a baseline reading experience at 15px with generous 1.65 leading"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body-sm | 15px | 1.65 | — | `--text-body-sm` |"
      info: "| body | 18px | 1.7 | — | `--text-body` |"
      info: "| subheading | 21px | 1.3 | — | `--text-subheading` |"
      info: "| heading | 23px | 1.2 | — | `--text-heading` |"
      info: "| display | 32px | 1.1 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 26 | 26px | `--spacing-26` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| images | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 40-64px"
      - "**Card padding:** 0px"
      - "**Element gap:** 13-19px"

  components:

    project_tile:
      role: "Portfolio case-study entry — the primary content unit"

      info: "Full-bleed image area (no border, no radius) on pure #ffffff, followed by a caption stack: project name in GT America 700 at 18px in #000000, then a single-line description in GT America 400 at 15px in #878787. Zero padding between image and caption. Tile width is grid-driven (1/3 or 1/2 of container), height is dictated by the photograph's aspect ratio."

    editorial_hero:
      role: "Top-of-page brand introduction"

      three_column_header: "left column holds 'Hello, we are' in Old Standard 400 at 32px (#000000); center column holds the Look wordmark/logo; right column holds the agency statement in GT America 400 at 21px (#000000) with 1.30 line-height. Columns align to a shared baseline, separated only by white space — no dividers, no backgrounds."

    nav_link:
      role: "Minimal top navigation anchor"

      text_only_link: "GT America 400 at ~15–18px in #000000, no underline by default, no background, no border. Links are separated by the faint #e5e5e5 hairline running horizontally across the nav strip. Padding: 3px top/bottom, 26px left/right."

    project_caption_block:
      role: "Metadata beneath each project tile"

      two_line_text_block: "line 1 = project/brand name in GT America 700, #000000; line 2 = tagline in GT America 400, #878787, line-height 1.65. No background, no border, no padding — text sits directly beneath the image with 13px top spacing."

    portrait_editorial_card:
      role: "Full-bleed photographic content block"

      info: "A single image at edge-to-edge width of its grid column, no border-radius, no overlay, no text on image. When project title is set inside the image (e.g. 'VICTORIA'S SECRET', 'COSTA BRAZIL'), it uses Old Standard 400 white, large scale, centered — newspaper masthead treatment."

  do_s_and_don_ts:

    do:
      - "Use #000000 for all text — never introduce a chromatic accent or muted body color beyond #878787"
      - "Set headlines in Old Standard at 32px with line-height 1.10 — the tight leading is part of the editorial voice"
      - "Keep all corners at 0px radius — no rounded cards, no rounded buttons, no rounded images"
      - "Let photographs bleed to the full width of their grid column without padding or border"
      - "Separate elements with 13–19px gaps and 40–64px section gaps, never with decorative dividers"
      - "Use GT America 700 for project titles and 400 for descriptors — weight contrast carries hierarchy"
      - "Maintain 0% colorfulness: the photography supplies all color, the UI supplies only black, white, and two grays"

    don_t:
      - "Don't add shadows, elevation, or any z-axis depth to cards or tiles"
      - "Don't use accent colors, brand colors, or chromatic borders — this is an achromatic system by design"
      - "Don't bold the serif — Old Standard is set at 400 only; weight contrast belongs to GT America"
      - "Don't round image corners or add overlay text treatments to most tiles"
      - "Don't introduce card backgrounds, card borders, or card padding — tiles are images on canvas with a caption beneath"
      - "Don't use color for interactive states — rely on underline, weight change, or cursor change only"
      - "Don't break the 0px radius rule with pill buttons, rounded tags, or circular avatars"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#ffffff` | Full-page white background — the single surface tier |"

  elevation:

    info: "No shadows, no elevation, no depth. All content sits flush on the white canvas. The only separation between elements is whitespace and the rare #e5e5e5 hairline. Visual hierarchy is achieved through type scale and image scale, never through z-axis or surface tinting."

  imagery:

    info: "The visual language is documentary photography at editorial scale. Images are full-bleed, edge-to-edge, uncropped, and unfiltered — they look like contact sheets from a photo editor's desk: campaign stills, fashion editorials, aerial product shots, crowd scenes, intimate portraits. The photography is the design system. No illustration, no abstract graphics, no decorative shapes, no iconography beyond a possible wordmark. No image overlays, no duotone treatments, no color grading beyond the photograph's natural production. The density shifts: the page is roughly 60% image to 40% white space and type, with images acting as the pages and typography acting as the margins."

  layout:

    info: "Max-width ~1200px centered container on a pure white canvas. The hero is a three-column editorial header: 'Hello, we are' / logo / agency statement, all on a single horizontal band. Below the hero, the page becomes a portfolio grid: rows of 2–3 equal-width project tiles, each tile a full-bleed photograph with a two-line caption beneath. Tiles align to a strict grid — column widths are consistent, row heights are driven by image aspect ratio. Navigation is a single top bar with two text links ('Look', 'Info') separated by a faint #e5e5e5 hairline. The rhythm is gallery-like: each row of tiles is a spread, each tile is a plate, and the white space between rows is the gutter. The page is scroll-driven with no sticky elements, no sidebar, no modal layers."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #000000"
    - "background: #ffffff"
    - "border / hairline: #e5e5e5"
    - "muted text: #878787"
    - "accent: none (achromatic system)"
    - "primary action: no distinct CTA color"

    info: "Example Component Prompts:"
    - "Create a project tile grid: pure white (#ffffff) background, 0px radius, no border, no shadow. Image fills the tile edge-to-edge with no padding. Caption beneath: project name in GT America 700, 18px, #000000; tagline in GT America 400, 15px, #878787, 1.65 line-height. 13px gap between image and caption."

    - "Create the editorial hero: three columns on white. Left: 'Hello, we are' in Old Standard 400, 32px, #000000, line-height 1.10. Center: wordmark. Right: agency statement in GT America 400, 21px, #000000, line-height 1.30. Columns separated by white space only — no dividers, no backgrounds."

    - "Create a top nav: left link 'Look', right link 'Info', both in GT America 400, 15px, #000000. A single #e5e5e5 hairline border-bottom runs across the full nav width. 26px horizontal padding per link, 3px vertical padding."

    - "Create an overlay-title image block: full-width editorial photograph, no border-radius. White masthead text centered in the image, set in Old Standard 400 at large display scale, tracking normal. No box, no background, no shadow behind the text."

    - "Create a section divider: nothing. Transition between sections is whitespace alone — 40–64px vertical gap, no line, no background change, no ornament."

  typography_philosophy:

    info: "The system pairs a 19th-century book serif (Old Standard) with a 21st-century American grotesque (GT America). The serif is a relic — it signals journalism, print heritage, the weight of editorial history. The sans is a tool — neutral, mechanical, ready for the present. Together they create the 'non-traditional agency' voice: one foot in the archive, one foot in the studio. Both fonts stay at 400 (serif) and 400/700 (sans); neither is set in italic, light, or compressed. The scale is narrow: 15, 18, 21, 23, 32 — a print designer's restraint, not a design system's exuberance."

  similar_brands:

    - "**Pentagram** — Same editorial agency-portfolio grid with full-bleed project photography and minimal serif/sans typography pairing on white"
    - "**Wieden+Kennedy** — Agency-as-gallery approach: monochrome UI frame around documentary campaign photography, no decorative chrome"
    - "**Mast Brothers** — Achromatic portfolio grid with editorial serif headlines and grotesque body text, photography carries all color"
    - "**It's Nice That** — Editorial publication aesthetic — serif display type, sans body, full-bleed project tiles, zero accent color in the UI"
    - "**&Friends** — Creative agency with strict two-typeface editorial system (serif + grotesque) and image-first portfolio grid on white"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-press-black: #000000;
          --color-proof-white: #ffffff;
          --color-galley-gray: #878787;
          --color-rule-line: #e5e5e5;
        
          /* Typography — Font Families */
          --font-old-standard-tt: 'Old Standard TT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-america: 'GT America', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 15px;
          --leading-body-sm: 1.65;
          --text-body: 18px;
          --leading-body: 1.7;
          --text-subheading: 21px;
          --leading-subheading: 1.3;
          --text-heading: 23px;
          --leading-heading: 1.2;
          --text-display: 32px;
          --leading-display: 1.1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-13: 13px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-19: 19px;
          --spacing-26: 26px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 40-64px;
          --card-padding: 0px;
          --element-gap: 13-19px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-press-black: #000000;
          --color-proof-white: #ffffff;
          --color-galley-gray: #878787;
          --color-rule-line: #e5e5e5;
        
          /* Typography */
          --font-old-standard-tt: 'Old Standard TT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-america: 'GT America', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 15px;
          --leading-body-sm: 1.65;
          --text-body: 18px;
          --leading-body: 1.7;
          --text-subheading: 21px;
          --leading-subheading: 1.3;
          --text-heading: 23px;
          --leading-heading: 1.2;
          --text-display: 32px;
          --leading-display: 1.1;
        
          /* Spacing */
          --spacing-13: 13px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-19: 19px;
          --spacing-26: 26px;
        }