creative_giants___style_reference:
  info: "> oversized editorial poster on cream paper"

  theme: "light"

  info: "Creative Giants reads like an oversized art-book spread rendered in code: a warm off-white canvas, hairline margins, and display type so large it functions as a poster rather than a heading. The whole system runs on negative space and one weight of light (300) — headlines whisper at 64–84px instead of bolding into shouting, and letter-spacing tightens aggressively (-0.04em) as type grows so the words feel chiseled, not spaced. Chromatic color is rationed into small, saturated hits: vivid magenta, deep teal, powder blue, hot pink, mint, and navy appear as card surfaces or accents, never as background floods. Interactive elements are black-on-cream pills with fully rounded (1440px) radii, and the chrome is almost invisible — a single circular logo mark and a 'Menu' button floating in white space. The visual identity is a production studio's contact sheet: one enormous headline, one full-bleed photograph, one quiet line of meta text. Every other page should follow the same economy."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Bone White | `#fffef7` | `--color-bone-white` | Page canvas, card surfaces, text on dark accents — a warm off-white that replaces pure #ffffff and gives the whole system a paper-like, printed feel |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color |"
    info: "| Graphite | `#666666` | `--color-graphite` | Secondary body text, captions, metadata, helper copy — recedes so display type can dominate |"
    info: "| Ash | `#aaaaaa` | `--color-ash` | Input borders, inactive link color, tertiary dividers — soft structural gray that disappears when not needed |"
    info: "| Charcoal Scale | `#4d4c4a` | `--color-charcoal-scale` | Mid-neutral for list borders, subtle elevation on the dark gradient track — warm gray, not blue-gray |"
    info: "| Magenta Bloom | `#8a0467` | `--color-magenta-bloom` | Pink supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Forest Teal | `#03624c` | `--color-forest-teal` | Saturated brand accent for card frames and decorative strokes; pairs with Magenta Bloom for duotone treatments |"
    info: "| Powder Blue | `#a5c8eb` | `--color-powder-blue` | Soft chromatic accent — card backgrounds, wash backgrounds, muted illustration fill; cools the warm canvas without competing |"
    info: "| Candy Pink | `#ffacea` | `--color-candy-pink` | Pastel card surface — high-key, used as one-of-many tints in news/article cards; a softer sibling of Magenta Bloom |"
    info: "| Mint Wash | `#a5ebd6` | `--color-mint-wash` | Pastel card surface — replaces the structural canvas on selected cards; reads as calm, cool, breathable |"
    info: "| Navy Ink | `#101731` | `--color-navy-ink` | Deep accent card surface and inverted text ground; the only dark field the system uses, applied sparingly as a featured block |"
    info: "| Signal Yellow | `#ffd001` | `--color-signal-yellow` | Sporadic high-chroma highlight (badges, tag pills, hover state on cards) — used in trace amounts, never as a primary fill |"

  tokens___typography:

    switzer___single_family_system__weight_300_for_all_display_and_headline_work_12_84px__weight_400_for_body__metadata__and_ui_controls__the_signature_choice_is_using_weight_300_at_64_84px___most_systems_would_bold_to_700_800_here__switzer_at_light_preserves_the_hairline_strokes__making_the_type_feel_airbrushed_onto_the_cream_canvas__tighter_letter_spacing_as_size_grows__0_04em_at_84px___0_018em_at_14px_keeps_the_counters_open_without_looking_spaced_out_____font_switzer:
      - "**Substitute:** Inter (300, 400), Söhne (300, 400), or any geometric humanist sans with a true 300 weight"
      - "**Weights:** 300, 400"
      - "**Sizes:** 12, 14, 16, 18, 20, 34, 54, 64, 84"
      - "**Line height:** 1.00–1.43"
      - "**Letter spacing:** -0.04em at 84px, -0.027em at 64px, -0.023em at 54px, -0.02em at 34px, -0.018em at 20px and below"
      - "**Role:** Single-family system: weight 300 for all display and headline work (12–84px), weight 400 for body, metadata, and UI controls. The signature choice is using weight 300 at 64–84px — most systems would bold to 700–800 here; Switzer at light preserves the hairline strokes, making the type feel airbrushed onto the cream canvas. Tighter letter-spacing as size grows (-0.04em at 84px, -0.018em at 14px) keeps the counters open without looking spaced-out."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.43 | -0.018px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | -0.018px | `--text-body-sm` |"
      info: "| body | 16px | 1.4 | -0.018px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.018px | `--text-subheading` |"
      info: "| heading-sm | 34px | 1.25 | -0.02px | `--text-heading-sm` |"
      info: "| heading | 54px | 1 | -0.023px | `--text-heading` |"
      info: "| display | 84px | 1 | -0.04px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 112 | 112px | `--spacing-112` |"

    border_radius:

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

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px` | `--shadow-subtle` |"

    layout:

      - "**Section gap:** 64px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8px"

  components:

    pill_menu_button:
      role: "Primary navigation trigger in the header"

      info: "Black (#000000) fill, Bone White (#fffef7) text at 16px weight 400, fully rounded at 1440px radius, padding 12px 24px, no border. Sits in the top-right corner with generous whitespace around it — its darkness is the only heavy element on the cream canvas."

    header_lockup:
      role: "Persistent top chrome"

      info: "Two-line eyebrow text (12px, weight 400, all caps, Ink Black) reading 'UNIQUE PUBLIC INTERVENTIONS // IMMERSIVE ACTIVATIONS' to the left of a 32px circular logo mark, Menu button floated right. Zero background — the cream page is the header background. ~16px vertical padding, full-bleed."

    display_poster_headline:
      role: "Hero / section title"

      info: "84px Switzer weight 300, letter-spacing -0.04em, line-height 1.0, color Ink Black. Occupies the full viewport width minus the page margin. Optionally rendered with a vertical Charcoal-to-Black gradient on warm-cream lettering for a sculptural poster effect. Never wraps above 2 lines."

    hero_image_band:
      role: "Full-bleed editorial photography"

      info: "Full-viewport-width image, no border-radius, no shadow. Meta text (location: 12px all-caps) and headline (34px weight 300) sit bottom-left with 32px left padding. Imagery is the hero; UI chrome yields entirely to the photograph."

    section_title_block:
      role: "In-page section openers"

      info: "All-caps eyebrow label (12px, weight 400, Graphite) on a single line, followed by a 34–54px weight 300 statement headline. No background, no rules, no decorations — separation is by whitespace alone (48–64px below the eyebrow, 32px below the headline)."

    project___news_card:
      role: "Card grid items for articles and case studies"

      info: "3-column grid, no card border, no shadow, no radius. Image sits top of card (square or 4:3, sharp corners). Title 18–20px weight 300 in Ink Black sits 16px below the image. Body copy 14px weight 400 in Graphite, 3-line clamp. Optional 1px chromatic accent border (#8a0467 or #03624c) on the image edge for editorial tagging."

    chromatic_accent_card:
      role: "Variant card surface using the brand accent palette"

      info: "Uses one of the pastel or saturated tints (#ffacea, #a5ebd6, #a5c8eb, or #101731) as the card surface. Text inverts: Bone White on Navy Ink, Ink Black on pastels. 0px radius, 24–32px padding. Used as the occasional pop in a card grid; never more than one in a row."

    carousel_arrow_control:
      role: "Next/prev navigation for card carousels"

      info: "32px circular outline button, 1px Ash (#aaaaaa) border, transparent fill, 16px Ink Black chevron icon centered. No background change on hover — only the border darkens to Ink Black. Floats above the card row at the right edge of the section title."

    meta_eyebrow:
      role: "Context labels above headlines"

      info: "12px Switzer weight 400, all caps, letter-spacing 0 (default), color Graphite (#666666). Single line. Used for location, section names, project categories."

    full_bleed_footer:
      role: "Page footer"

      info: "No background fill — same Bone White canvas. Top edge defined by a 1px hairline divider. Multi-column link lists with 14px weight 400 Ink Black text, 8px row-gap. The extreme Charcoal-to-Black linear gradient (rgb(77,76,74) → rgb(0,0,0)) is reserved for any dark footer band variant; never used elsewhere."

    tag___category_pill:
      role: "Small editorial labels and filters"

      info: "8px vertical, 12px horizontal padding, 1440px radius, 12px weight 400 all-caps. Default: Ink Black text, transparent fill, 1px Ash border. Accent variant: Signal Yellow (#ffd001) fill, Ink Black text, no border."

  do_s_and_don_ts:

    do:
      - "Set headlines at weight 300 — never bold a Switzer heading, no matter the size."
      - "Use Bone White (#fffef7) as the only page background. Pure #ffffff breaks the warm paper language."
      - "Apply the 1440px pill radius to every button, tag, and Menu element — sharp corners are reserved for cards and images only."
      - "Push display headlines to 64–84px with -0.04em letter-spacing; the negative tracking is what makes the type feel carved, not printed."
      - "Let full-bleed photographs carry the visual weight. UI chrome should recede — the Menu button and logo are the only non-image elements above the fold."
      - "Use chromatic accents (#8a0467, #03624c, #a5c8eb) as borders, small fills, and single-card highlights — never flood a section with color."
      - "Keep section gaps at 48–64px. The cream canvas is the layout's primary structural tool; rules and dividers are secondary."

    don_t:
      - "Don't bold headlines. The 300 weight is the brand — weight 500+ destroys the airbrushed feel."
      - "Don't use pure #ffffff anywhere. The warm off-white is a signature, not a fallback."
      - "Don't add shadows. The system's 0px box-shadow signature means elevation comes from color and scale, not depth."
      - "Don't round card or image corners. 1440px belongs only to interactive elements; editorial surfaces stay sharp."
      - "Don't fill a CTA with a chromatic color. No action background evidence supports a colored button — all interactive surfaces are black or transparent."
      - "Don't exceed two lines on a display headline. The 84px treatment is for poster statements, not paragraphs."
      - "Don't use #0000ee or default link blue. Inherit Ink Black for all text links; never let browser defaults leak in."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#fffef7` | Page background — warm off-white paper tone |"
    info: "| 1 | Card Tint | `#a5ebd6` | Pastel card variant — replaces canvas on accent cards |"
    info: "| 1 | Card Tint Pink | `#ffacea` | Pastel card variant — high-key highlight |"
    info: "| 1 | Card Tint Blue | `#a5c8eb` | Pastel card variant — cool wash |"
    info: "| 2 | Signal Pop | `#ffd001` | Sporadic yellow accent — badges, hover, single-card highlight |"
    info: "| 3 | Inverted Field | `#101731` | Dark accent surface for featured blocks; text inverts to Bone White |"

  elevation:

    info: "The system has no meaningful elevation. The single detected shadow (rgba(255,255,255,0.2) 0px 0px 0px 1px) is a white 1px inner ring, not a drop shadow — it functions as a hairline highlight on dark elements, not as depth. Separation is built entirely from the warm canvas, whitespace, and the rare dark inverted field. Do not add box-shadows to cards, buttons, or modals."

  imagery:

    editorial_photography_dominates: "full-bleed, sharp-cornered, no overlays or rounded masks. Treatment leans toward documentary and atmospheric — wrinkled hands, public installations, candid human subjects — never staged product shots. Imagery is always presented at large scale (full viewport width or card-filling) so the photograph, not the UI, is the design unit. No illustration, no 3D, no product mockups. Iconography is minimal: a single small circular logo mark, outline-only chevrons on carousel controls, and featherweight 1px-stroke UI icons. Density is image-led, with text serving as a quiet annotation layer below or over the photograph."

  layout:

    full_bleed_page_model: "no max-width container, content runs edge-to-edge with consistent left/right padding (16–32px on mobile, 32px+ on desktop). The hero is a single oversized display headline ('CREATIVE GIANTS' at 84px) taking roughly 40% of the viewport, immediately followed by a full-bleed photograph with bottom-left meta + headline overlay. Section rhythm is monolithic: each new section is introduced by a small all-caps eyebrow + 34–54px weight 300 statement, separated by 48–64px of negative space — no alternating dark/light bands except the single inverted Navy Ink accent card. Content is consistently left-aligned; no centered stacks except the hero display headline. The news/case-study area uses a 3-column card grid with a right-floated arrow control cluster. Navigation is a single top header — no sidebar, no sticky elements beyond the header itself. Overall density is spacious and editorial: every section breathes, and whitespace is the primary structural tool."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #fffef7"
    - "border / divider: #aaaaaa"
    - "secondary text: #666666"
    - "accent: #8a0467 (magenta) and #03624c (teal) — borders and small hits only"
    - "pastel card surface: #a5ebd6, #ffacea, or #a5c8eb"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:

    - "*Hero display headline*: Full-bleed cream (#fffef7) canvas. 'CREATIVE GIANTS' at 84px Switzer weight 300, color #000000, letter-spacing -0.04em, line-height 1.0, left-aligned with 32px left padding. No background, no border. The headline should occupy ~40% of the viewport height."

    - "*Pill Menu button*: 16px Switzer weight 400, color #fffef7 on #000000 fill, 1440px border-radius, padding 12px 24px, no border. Float top-right with 32px margin from edges. Sits alone in the header — no other UI chrome competes."

    - "*Full-bleed image band with overlay*: Edge-to-edge photograph (no border-radius). Bottom-left overlay: 12px Switzer weight 400 all-caps meta in #fffef7 ('BRIGHTON, UNITED KINGDOM'), 32px below it a 34px weight 300 statement headline in #fffef7. 32px padding from the left and bottom edges."

    - "*News / project card*: 3-column grid, no card border, 0px radius. Square image (no radius) sits at top. 16px below: 20px Switzer weight 300 title in #000000. 8px below: 14px weight 400 description in #666666, 3-line clamp. 48px column gap, no row gap (single row)."

    - "*Pastel accent card*: One card in the grid swaps to surface #a5ebd6 with 24px padding around its content, text in #000000 at 20px weight 300. The remaining two cards stay on the cream canvas. This is the system's only color-rupture moment."

  similar_brands:

    - "**Pentagram** — Same oversized editorial display headlines, weight-light typography, full-bleed project photography, and minimal navigation chrome on a neutral canvas."
    - "**Locomotive (locomotive.ca)** — Same 'studio portfolio as art book' treatment — cream canvas, large weight-300 sans-serif statements, sharp-cornered full-bleed imagery, and pill-shaped controls."
    - "**Resn** — Same full-bleed experimental photography and whisper-weight display type; both agencies treat the homepage as a single oversized canvas rather than a dashboard."
    - "**B-Reel** — Same single-line display headline, edge-to-edge video/photo hero, and a cream/near-white canvas with rationed chromatic accents."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-bone-white: #fffef7;
          --color-ink-black: #000000;
          --color-graphite: #666666;
          --color-ash: #aaaaaa;
          --color-charcoal-scale: #4d4c4a;
          --color-magenta-bloom: #8a0467;
          --color-forest-teal: #03624c;
          --color-powder-blue: #a5c8eb;
          --color-candy-pink: #ffacea;
          --color-mint-wash: #a5ebd6;
          --color-navy-ink: #101731;
          --color-signal-yellow: #ffd001;
        
          /* Typography — Font Families */
          --font-switzer: 'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.43;
          --tracking-caption: -0.018px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.018px;
          --text-body: 16px;
          --leading-body: 1.4;
          --tracking-body: -0.018px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.018px;
          --text-heading-sm: 34px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.02px;
          --text-heading: 54px;
          --leading-heading: 1;
          --tracking-heading: -0.023px;
          --text-display: 84px;
          --leading-display: 1;
          --tracking-display: -0.04px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-112: 112px;
        
          /* Layout */
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-full: 1440px;
          --radius-full-2: 1600px;
        
          /* Named Radii */
          --radius-tags: 1440px;
          --radius-cards: 0px;
          --radius-pills: 1440px;
          --radius-images: 0px;
          --radius-buttons: 1440px;
        
          /* Shadows */
          --shadow-subtle: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px;
        
          /* Surfaces */
          --surface-canvas: #fffef7;
          --surface-card-tint: #a5ebd6;
          --surface-card-tint-pink: #ffacea;
          --surface-card-tint-blue: #a5c8eb;
          --surface-signal-pop: #ffd001;
          --surface-inverted-field: #101731;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-bone-white: #fffef7;
          --color-ink-black: #000000;
          --color-graphite: #666666;
          --color-ash: #aaaaaa;
          --color-charcoal-scale: #4d4c4a;
          --color-magenta-bloom: #8a0467;
          --color-forest-teal: #03624c;
          --color-powder-blue: #a5c8eb;
          --color-candy-pink: #ffacea;
          --color-mint-wash: #a5ebd6;
          --color-navy-ink: #101731;
          --color-signal-yellow: #ffd001;
        
          /* Typography */
          --font-switzer: 'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.43;
          --tracking-caption: -0.018px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.018px;
          --text-body: 16px;
          --leading-body: 1.4;
          --tracking-body: -0.018px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.018px;
          --text-heading-sm: 34px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.02px;
          --text-heading: 54px;
          --leading-heading: 1;
          --tracking-heading: -0.023px;
          --text-display: 84px;
          --leading-display: 1;
          --tracking-display: -0.04px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-112: 112px;
        
          /* Border Radius */
          --radius-full: 1440px;
          --radius-full-2: 1600px;
        
          /* Shadows */
          --shadow-subtle: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px;
        }