CPP Website — Art Direction Options

Authored by: Senior Art Director atom (agency / craft) Date: 2026-07-01 Status: EXPLORATION DECK — atom-grade. For Brian Handrigan to react to. No build; no HTML/Astro touched. Ground truth consumed: CPP-MASTER-BRIEF.md v2 · cpp-information-architecture.md §4.1 Home arc · docs/copy/homepage.md (Shea Long voice) · docs/research/aspirational-brands.md · Palette + Carbon precedent from brief. Supersedes: Any prior draft at this path. Prior file was not atom-authored; treat as scrap.

Brief reading — the real design problem

The stated brief: design a homepage for a mid-market AI consultancy.

The real design problem is this: Shea's copy opens by telling the visitor that the first question CPP asks is NOT about AI. The design's job is to embody that claim before anyone reads a word. Eighty-eight percent of companies already believe they are doing AI. The visitor who lands on this page is not ignorant — they are probably overloaded with AI pitches, and deeply skeptical that this firm is different from the last one. The design has to signal difference before the copy can prove it.

The visual that lives in that tension is not a technology visual. It is an authority visual — the look of someone who has been inside the room where these decisions get made and is telling you something honest, not selling you something exciting.

That is the governing brief for all three directions below. They diverge on how to deliver that authority signal.

Fixed constraints (all three directions)

NO fake stock imagery. Non-negotiable. No handshakes, no smiling diverse-team-at-laptop, no generic conference rooms. The space stock imagery would occupy must be earned by something else — data, type, or authentic visual argument.
McKinsey-grade professionalism. Every element earns its place.
Copper #C06018 as primary accent — strong default, not locked. Each direction states its specific copper usage and whether the palette warrants interrogation.
Authentic imagery alternatives: real client logos (logo rights cleared); typographic data monuments; Nadav Kander-style environmental photography of real infrastructure (not people) if photography appears; abstract chart/data constructs. Named; not generic.

Direction 1 — Carbon Operator

One-line thesis: CPP is a product company with a consulting arm, not a consulting firm with a product brochure — and the design proves it by making the specialist buyer (CFO/CISO/CTO) feel they are looking at production software, not a pitch.

The non-obvious concept

The category default for AI consultancies is: big hero image, dramatic headline, trust badges, team smiles, call to action. This direction rejects the frame entirely. It does not look like an AI consultancy website. It looks like the admin console of an enterprise software product — because CPP's grāmatr-powered products ARE enterprise software. The marketing site and the product surface share a visual DNA. The insight: when the visitor eventually logs into the governance or cost-optimization console, it feels continuous with the marketing site, not like a different world. That continuity IS the brand argument. Most agencies design the marketing site to win the emotional pitch; CPP can design it to win the technical trust.

The load-bearing element: the Carbon scaffolding must be used at product fidelity, not decoratively. A half-hearted imitation of Carbon reads as a tech-company pastiche; a genuine Carbon system reads as the real thing. This only works if the implementation discipline is complete.

Layout / grid

IBM Carbon Design System scaffolding. 16-column grid, max-width 1312px, 32px gutters at desktop. The page is divided into clearly-bounded tile units — each tile has a purpose, a label, and a value. No amorphous full-bleed sections; no cinematic hero photography.

Navigation: Fixed 48px black bar (#161616). IBM Plex Sans Regular 14px labels. Copper #C06018 on the active state only — everywhere else neutral. The Sprint ($3,500) surfaces as a filled copper button, not a ghost.

Page structure: The 6 homepage sections map to Carbon panel rows. Each panel has a 1px #E0E0E0 separator, not dramatic whitespace. Section headers are Carbon labels (IBM Plex Sans Semibold 12px, letter-spaced 0.16em, all caps), not dramatic display type.

Typography

IBM Plex Sans throughout — Regular for body, Semibold for section labels, Bold for H1/H2. Carbon Gray 100 (#161616) on white or Gray 10 (#F4F4F4) backgrounds.

IBM Plex Mono for all numeric/stat elements: "88%", "80%", "$3,500", "40%". The mono font for numbers is not decorative — it signals that these are data points in a system, not marketing claims. This is the typographic argument: the stats are treated as data, not as copywriting. Mono tracking set at 0 (do not open-track monospaced display — the equidistant character width is the point).

H1 size: 48px / 56px line-height. Not the oversized hero typography of the editorial direction. Carbon does not shout; it states.

Body: 16px / 24px. Carbon paragraph spacing rules (24px between paragraphs). IBM Plex Sans Regular — NOT light weight; Regular at 16px on screen holds at 72dpi without thinning.

Copper palette usage

Carbon blue (#0F62FE) replaced with CPP copper (#C06018). All other Carbon tokens held. This creates cognitive continuity for anyone who has seen a Carbon product (IBM Cloud, Red Hat, dozens of enterprise tools) while substituting CPP's brand color at the exact points where Carbon normally signals primary action. Copper reads decisively in this context because it is replacing a blue — the viewer's eye reads it as "primary" via position rather than cultural association.

Risk: In Carbon's primarily neutral/cool system, warm copper creates a deliberate temperature break. This is the system's personality. Worth testing whether #A8520F (hover) reads as "construction" in this context; likely not, because the system context overrides.

Would I change the palette? Not in this direction. The swap works precisely because Carbon's system context frames copper as a technical accent color, not a warmth play.

Motion stance: NONE

Carbon does not animate. The product-surface argument breaks down the moment you add scroll-triggered animations or hero video. A governance console does not pulse in at you. Static is the product posture. Any motion is a signal that this is a marketing site pretending to be a product — which is the opposite of the bet this direction makes.

Anti-stock alternative

Copper-tinted data table fragments placed as background elements in the hero — the kind of structured data grid that would appear inside the governance console (audit log rows, token attribution rows). They are blurred to 40% opacity — not readable, but recognizable as information. The visual message: we work in data, not imagery.

ASCII wireframe — INTERRUPT hero (§1)

┌────────────────────────────────────────────────────────────────────────┐
│  [◈ CPP]  Advisory   Cost Optim.   Governance   Dev OS   [Start ▶]    │
│  ─────────────────────────────────────────────────────────────────────  │
├────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  ┌──────────────────────────────────────────┐  ┌─────────────────────┐ │
│  │  INSIGHT                                 │  │  AI Opportunity     │ │
│  │                                          │  │  Sprint             │ │
│  │  The first question we ask               │  │                     │ │
│  │  is not about AI.                        │  │  One day.           │ │
│  │  It is about your operation.             │  │  Specific outputs.  │ │
│  │                                          │  │  $3,500.            │ │
│  │  ── ── ── ── ── ── ── ── ── ── ── ──     │  │                     │ │
│  │                                          │  │  [Book the Sprint ▶]│ │
│  │  88%    companies using AI in ≥1 fn      │  │                     │ │
│  │  [IBM Plex Mono, copper rule below]      │  │  Scheduling: 2–3 wk │ │
│  │  80%+   report no material earnings ∆   │  └─────────────────────┘ │
│  │                                          │                          │
│  │  → McKinsey "State of AI" Nov 2025       │  ┌─────────────────────┐ │
│  └──────────────────────────────────────────┘  │  NEXT                │ │
│                                                  │  Phase 1 → Strategy │ │
│  [1px #E0E0E0 separator]                         │  Phase 2 → Readiness│ │
│                                                  │  Phase 3 → Execution│ │
│                                                  └─────────────────────┘ │
└────────────────────────────────────────────────────────────────────────┘

Notes on this wireframe: Two-column layout above the fold. Left panel: the headline + two stat data points, each rendered in IBM Plex Mono at 32px with a copper rule beneath each percentage. Source citation in 12px Regular below — the citation itself is proof of rigor. Right panel: two Carbon tiles (Sprint CTA + process preview). The tiles share the same gray-10 background and 1px border as the Carbon spec. No hero photography; the page composition IS the hero.

Client logo bar (§3 Proof section)

Horizontal grid of 10 logos, 5 per row, rendered in Carbon Gray 60 (#6F6F6F). No color. No hover state. Industry label beneath each logo in Carbon 12px caps: AUTOMOTIVE · EDUCATION · TELECOM · PACKAGING · HOSPITALITY · HEALTHCARE · MARKETING · RESEARCH. Logos are not oversized; they sit at 40px height in a 120px tile. The visual message: these are real clients whose logos anchor real industries, not a lifestyle brand reference.

Pros / cons

Pros:

Product–marketing continuity is unique in the category. No AI consultancy looks like this.
Specialist buyers (CFO/CISO/CTO) immediately feel they are evaluating a product, not a vendor pitch.
Scales perfectly to the product pages — the same Carbon system governs homepage and governance-console marketing page.
Carbon is a mature, verified system with extensive accessibility compliance baked in. Lowers front-end cost.

Cons:

Cold. ICP-A (CEO/COO arriving with a narrative need) may not feel invited. The Carbon system signals "I already know what I need" — which the generalist executive does not.
Risk of looking like an IBM derivative. Carbon is IBM. If visitors have IBM associations (expensive, bureaucratic, slow-moving), this direction inherits them.
Copper in Carbon context is unusual; no established precedent. Could feel arbitrary to a design-literate client.

ICP this direction optimizes for: ICP-B (CFO), ICP-C (CISO), ICP-D (CTO). The specialist buyer who arrives product-ready. Strong conversion for direct-response entry points. Weaker for the generalist CEO who needs the narrative.

Direction 2 — Research Register

One-line thesis: CPP's authority is the operator experience Shea Long and Mike Burns have accumulated across decades and multiple executive chairs — the design makes that authority visible by looking like the output of people who understand problems deeply, not agencies that design for them.

The non-obvious concept

The category default for "authority" is the big consultant aesthetic: dark backgrounds, futuristic typography, glowing gradients signaling innovation. This direction rejects it in the opposite direction. The insight: the aspirational brand list names McKinsey QuantumBlack and Thoughtworks as references not for their visual style but for their register — "the adults in the room." The adults in the room do not use glowing gradients. They publish research. The visual equivalent of a well-sourced research report is not a consultant's website — it is a researcher's publication. CPP should look like it has already done the thinking, not like it is about to do a demo.

The governing image: a premium research annual — McKinsey Quarterly, Deloitte Review, a Harvard Business Review special edition. Clean, editorial, generous margins, statistics that anchor paragraphs rather than float as hero callouts, bylines that carry weight. The 88%/80% gap is typeset like a finding, not a marketing headline.

This is the most durable direction — editorial conventions are structurally stable across decades. It does not date.

Layout / grid

Departure from Carbon. This direction proposes a distinct typographic system for the marketing site, reserving Carbon for product/dashboard surfaces. The argument: Carbon's information density and functional aesthetic signal "software product." The marketing site's job is to build trust with the generalist executive who needs a narrative, not to confirm product competence. Two different jobs; two different visual registers.

12-column editorial grid, max-width 1200px, 48px gutters. Sections are separated by generous whitespace (80px+) and thin 1px copper rules — not hairline grays. Two-column body layout on most sections (narrower than full-width for reading comfort): primary column 7/12, secondary column 4/12. This creates the rhythm of a long-form article with a sidebar — familiar to any executive who reads research.

Navigation: Sticky top bar, white background with 1px copper bottom rule. CPP logotype in Neue Haas Grotesk Medium 16px. Nav labels in Neue Haas Grotesk Regular 14px, generous tracking (0.06em). No buttons in the nav except the Sprint — which appears as a copper-filled pill, 12px Neue Haas Grotesk Medium.

Typography

Complete departure from IBM Plex for this direction. Neue Haas Grotesk (or Aktiv Grotesk as a licensed alternative) as the house grotesque — the 20th-century Swiss editorial standard. This is not a trendy choice; it is the historically durable grotesque that underpins the McKinsey Quarterly aesthetic.

Display (H1): Neue Haas Grotesk Display 75 Bold, 64px / 72px line-height, -0.02em letter-spacing. Optically tight. At this weight and size, the letter-spacing should be set slightly negative to compensate for perceived looseness at display scale — Bringhurst's principle of optical sizing rather than point sizing.
Section headers (H2): Neue Haas Grotesk Text 65 Medium, 32px / 40px.
Body: Neue Haas Grotesk Text 55 Regular, 17px / 28px. (17px rather than 16px is deliberate — at 1200px max-width with 7/12 column measure, 17px with 28px leading hits the 45–75 character line-length target from Bringhurst §2.1.)
Stat callouts: Same Neue Haas Grotesk Bold but at 80px for the big numbers. Copper color. The stat is typographic object, not infographic.
Source citations: Neue Haas Grotesk 45 Light, 12px, Carbon Gray 50 — a studied understatement that reads as academic rigor, not legal boilerplate.

The typographic argument: Neue Haas Grotesk at this weight distribution feels different from "AI startup" Helvetica or "enterprise product" IBM Plex — it is the typeface of serious editorial work. The reader's peripheral vision places CPP in the research authority register before they read a word.

Copper palette usage

Sparse. Copper appears at: the thin horizontal rules that divide sections, the CTA button fills, the large display numerics (88%, 80%), and the copper logotype accents. Everywhere else: black text on white, with generous gray used for secondary content zones.

The restraint is the argument. A copper-saturated direction looks like a brand built around the color. A copper-spare direction looks like a brand that has something to say and chose a color to say it with. Paul Rand's principle: the logo serves the idea, the color serves the system. Copper in this direction functions like a signature on a letter — appears at the right moment, carries weight, does not decorate.

Would I change the palette? Worth testing #5C4A32 (a darker, ink-adjacent copper-brown) as an alternative display-numeral color — it reads as less orange and more authoritative for the research register. Not a recommendation to change; a flag for Brian's reaction.

Motion stance: RESTRAINED-PURPOSEFUL

The statistics (88%, 80%, 84%, 40%, 74%) count up from 0 when they scroll into the viewport. One motion behavior, applied consistently. Duration: 1.2 seconds with ease-out timing. No other animation anywhere on the page. The rationale: in a research-register design, motion signals that the numbers matter — they are being revealed, not decorating. Static statistics in an editorial design are inert. A brief count-up cues the reader to read the stat carefully, which is what we want. More motion would undermine the authority signal; less motion would waste the stat's weight.

Anti-stock alternative

No photography except where it serves a specific function. Two options per direction: (a) authentic photography of infrastructure — a fiber conduit, a server rack, a refinery control room, a hospital corridor at 5am — lit in the manner of Nadav Kander's environmental work (scale + vulnerability; nothing glamorized). NOT people. NOT handshakes. The environment is the protagonist. (b) Typography alone — the headline and the stat are large enough to fill the viewport at a credible visual density. Trust the copy.

The client logo bar is the only "proof imagery" in the traditional sense — 10 real logos are enough.

ASCII wireframe — INTERRUPT hero (§1)

┌────────────────────────────────────────────────────────────────────────┐
│  [CPP · Covington Place Partners]        Advisory  Products  [Sprint→] │
│  ────────────────────────────────────────────────── 1px copper rule ───│
│                                                                         │
│  ┌─────────────────────────────────────────────────────────┐           │
│  │                                                         │           │
│  │  The first question we ask is not about AI.            │  ┌──────┐ │
│  │  It is about your operation.                           │  │      │ │
│  │                                                         │  │  88% │ │
│  │  [Neue Haas Grotesk Display Bold, 64px, black]         │  │  of  │ │
│  │  [Max measure ~38 chars; line break after "AI."]       │  │comps │ │
│  │                                                         │  │use AI│ │
│  │  ────────────────────────── 1px copper rule ──────────  │  │      │ │
│  │                                                         │  │ 80%+ │ │
│  │  Covington Place Partners modernizes how mid-market     │  │  no  │ │
│  │  companies work. We build the operational changes       │  │  ROI │ │
│  │  that actually hold — and we use AI to build them.     │  │      │ │
│  │  [17px / 28px, 7/12 column width]                      │  │[Mono │ │
│  │                                                         │  │ 80px]│ │
│  │  → Start with the AI Opportunity Sprint — $3,500       │  └──────┘ │
│  │    [Copper filled pill, Neue Haas Grotesk Med 14px]    │           │
│  │                                                         │           │
│  │  McKinsey "State of AI" Nov 2025, p. 3–4               │           │
│  │  [12px Light Gray — visible citation in the hero]      │           │
│  └─────────────────────────────────────────────────────────┘           │
│                                                                         │
│  [80px whitespace]                                                      │
│  1px copper rule                                                        │
│  [Next section: THE PROCESS GUARANTEE]                                  │
└────────────────────────────────────────────────────────────────────────┘

Notes: The display stat column on the right is the editorial device that makes this different from a standard consulting homepage. The large mono numerics (80px, copper, right column) are typographic objects — they appear in the peripheral vision before the headline is read, anchoring the visitor in data before they absorb the narrative. The citation in 12px Light below the CTA is a deliberate authority move: most marketing sites hide or omit citations; CPP's research register requires them visible.

Client logo bar (§3 Proof section)

Single horizontal row at desktop (10 logos / 5-per-row grid at tablet). Logos rendered in a unified grayscale treatment — not color, not overly lightened. Below each logo: the industry vertical in Neue Haas Grotesk 45 Light 10px, letter-spaced 0.12em, all-caps. Industry breadth is the argument.

At the section header: "A client roster that spans eight industries" (from Shea's copy) appears as a section label in 12px caps + letter-spacing, copper — the same treatment used for H2 labels throughout the system. The section label is not a headline; it is a claim, and it reads like one.

Pros / cons

Pros:

The most durable direction — editorial conventions do not date. This site looks as credible in 2029 as in 2026.
Serves ICP-A (CEO/COO) best: the generalist executive who needs to trust CPP before they will act.
The research-report aesthetic positions CPP in the authority tier (McKinsey, Thoughtworks) rather than the vendor tier. The competitive differentiation is visual, not just verbal.
Neue Haas Grotesk is widely available and well-hinted for screen; lower production risk than custom typefaces.
Motion is minimal — lowest motion-production cost of the three directions.

Cons:

Softer signal to specialist buyers (CFO/CISO/CTO) who may want the product-forward confidence of the Carbon direction.
Two typographic systems on the same site (Neue Haas Grotesk marketing + IBM Plex product) creates a potential coherence question. Requires explicit system documentation so handoff to development is unambiguous.
"Research report" aesthetic risks reading as passive/academic if copy is not as strong as Shea's current draft. This direction is maximally dependent on copy quality. It provides no visual scaffold if the words underperform.

ICP this direction optimizes for: ICP-A (CEO/COO generalist) primarily. Strong for organic search visitors landing on the blog/insights section. Mid-range for ICP-B/C/D — works, but does not immediately feel like the product surface they will use.

Direction 3 — The Gap Argument

One-line thesis: The 8-point delta between "88% use AI" and "80% get no ROI" is not a statistic — it is the client's situation, rendered as a visual space CPP exists to close. The design makes the gap visible, then positions CPP as the crossing.

The non-obvious concept

Every other AI consultancy website puts the statistic in a text box. This direction asks a different question: what if the design IS the statistic? The expected move for data-forward design is an infographic — a bar chart, a pie chart, a colored number. The non-obvious move is to make the gap itself the compositional logic of the hero. The space between 88% and 80% is not illustrated; it IS the layout. The hero is a data object, not a design-with-data object.

The load-bearing property: the gap must register visually BEFORE the visitor reads the headline. If they read the headline first, the concept has not landed. The art direction discipline is that the visual gap (the empty space between two large numbers) must be the first thing the eye goes to. Everything else in the composition — headline position, CTA placement, copyright side-rail — must be subordinated to making the gap readable at peripheral vision distance.

The flexible property: the exact graphic treatment of the gap (bar/axis/white space/heatmap) is not load-bearing; any treatment that makes the empty space between two numbers legible at distance will work. The concept is the gap, not the chart type.

Layout / grid

Unconventional but rigorous. The hero is not a left-right two-column layout. It is a top-anchored typographic composition where the vertical axis IS the data axis. Large display number ("88") sits at the upper quarter; large display number ("80") sits in the middle zone; the space between them — roughly 20vh of screen — contains only the headline, set small (24px) within the gap. The CTA lives below "80."

The visitor's eye path: 88% (top) → gap/headline → 80% (middle) → CTA (below). They read the data structure before they read the copy. The copy is nested inside the visual argument, not separate from it.

Below the hero, the page returns to a standard grid: 12-column, max-width 1280px, 40px gutters. The hero's unusual layout is contained to one viewport height — the rest of the page is orthodox. This is the editorial subtraction move: use the unconventional layout exactly once, where it carries meaning; then stop.

Navigation: Fixed top bar, near-black (#1A1A24), light type. CPP logotype in IBM Plex Mono — the mono choice for the logotype, unique to this direction, signals code-and-data as the DNA without being gratuitous. Sprint CTA in copper, filled, rounded 4px.

Typography

Hybrid system: IBM Plex Mono for all numeric elements (the data register) + Haas Unica or Aktiv Grotesk Condensed for display headlines (the command register).

IBM Plex Mono for: all percentage figures (88%, 80%, 40%, etc.), product names appearing in code context (AI Cost Optimization rendered as a system label), the source citation footer, and any measurement/price element ($3,500 appears in Mono, not Sans).

Aktiv Grotesk Condensed (or Neue Haas Grotesk Condensed as alternative) for: the hero headline, section display headers, pull-quote treatment. Condensed grotesque at large sizes reads as precision + compression — it is the Müller-Brockmann Swiss-grid instinct applied to web typography. At 80px+ with tight line-height (0.95em), it achieves the visual density of a broadsheet masthead.

The two faces working together: Mono is the evidence; Condensed Grotesque is the interpretation. "88%" (Mono, copper, 120px) + "The first question we ask is not about AI" (Condensed, white/near-black, 28px, nested inside the gap) enacts the brief's own logic: data precedes narrative; the question comes after the evidence.

This is a more unusual typographic combination than Directions 1 or 2, and therefore a higher production-risk choice. The optical relationship between the Mono percentage and the Condensed headline must be precise: if the headline is set too large it competes with the number; if too small it reads as a caption. The target is: headline text feels like the label on a chart axis — present but hierarchically subordinate.

Copper palette usage

Copper is used ONLY for data-positive elements: the large percentage figures, the CTA buttons, and the copper rule that appears to visually separate "88%" from "80%" (the rule IS the gap — a thin copper horizontal line between the two numbers that the eye reads as the axis). Nowhere else. Background is near-black in the hero (#1A1A24); the rest of the page is white with near-black text.

The data-viz convention: copper at 88% on a dark background reads as "signal" — the brain associates it with highlighted/important chart data. The empty space between 88 and 80 has NO color, which is the point. The gap is uncolored. CPP lives where the color goes.

Would I change the palette? This direction has the highest palette risk. In data visualization, orange/copper conventionally maps to "caution" or "secondary category" in many chart systems. If the visitor's data-brain reads copper as "warning," the semantic is wrong — we want "primary/important," not "caution." Recommend testing the hero with copper AND with a steely blue-green alternative to determine which reads as "data-primary" rather than "data-warning" in user testing. This is the one direction where the palette is genuinely interrogated, not just applied.

Motion stance: MOTION-AS-ARGUMENT

Motion is not decoration here — it IS the argument. On page load:

The "88%" appears first, fully formed, at top — immediate.
A copper horizontal rule draws across the screen (left to right, 0.4 seconds, ease-out).
The headline ("The first question we ask…") fades in inside the gap zone (0.3s delay).
The "80%" appears below the rule (0.6s after load).
The CTA fades in at 1.0s.

Total sequence: 1.0–1.4 seconds. The argument: the visitor watches 88% appear, then sees a line drawn, then sees 80% below it. The gap registers as a visual structure before they read a word. This is motion-as-argument because removing the motion collapses the argument: without the sequence, two large numbers on a screen are just two large numbers. With the sequence, they are a revealed finding.

Prerequisite: This motion requires JavaScript to execute correctly and must degrade gracefully to static state (all elements visible, no animation) for reduced-motion prefers settings and for any visitor where JS does not execute. Static state must still be legible.

On further scroll: Impact×Effort matrix in §5 (The Signature Artifact) draws its axes and populates quadrants on scroll-into-view. This is the one additional motion element beyond the hero. Nothing else animates.

Anti-stock alternative

No photography anywhere. The visual argument is the data. The only visual elements beyond type are:

The copper horizontal rule
The client logo bar
Product interface fragments (blurred governance audit log) as an inset in the §4 product cards

This is the direction that carries Dieter Rams most seriously. Less, but better. Every element does a job or it is not there.

ASCII wireframe — INTERRUPT hero (§1)

┌────────────────────────────────────────────────────────────────────────┐
│  [◈ CPP]  [IBM Plex Mono logotype]    Advisory  Products  [Sprint →]  │
│  Background: near-black #1A1A24                                         │
├────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│                                                                         │
│   88%                                                                   │
│   [IBM Plex Mono Bold, 120px, copper #C06018]                          │
│   of organizations use AI in at least one function.                    │
│   [IBM Plex Mono Regular, 18px, Gray 30]                               │
│                                                                         │
│   ─────────────────────────────────────── [1px copper rule, full-width]│
│                                                                         │
│   The first question we ask is not about AI.                           │
│   It is about your operation.                                          │
│   [Aktiv Grotesk Condensed Bold, 28px, white — set INSIDE the gap]    │
│                                                                         │
│   ─────────────────────────────────────── [1px copper rule, full-width]│
│                                                                         │
│   80%                                                                   │
│   [IBM Plex Mono Bold, 120px, white]                                   │
│   report no material contribution to earnings.                         │
│   [IBM Plex Mono Regular, 18px, Gray 50]                               │
│                                                                         │
│   [Start with the AI Opportunity Sprint — $3,500 ▶]                   │
│   [Copper filled, Aktiv Grotesk Condensed 14px, 48px height]          │
│                                                                         │
│   McKinsey "State of AI" Nov 2025                                      │
│   [IBM Plex Mono 11px, Gray 60 — visible citation]                    │
│                                                                         │
└────────────────────────────────────────────────────────────────────────┘

Notes: The two horizontal rules are compositional, not decorative — they frame the gap as a bounded zone that the headline occupies. The "80%" is white rather than copper because: (a) contrast against the dark background; (b) the visitor's brain should read 80% as the "lower" number — the problem — and white (neutral) vs. copper (signal) enacts that hierarchy without explanation. The gap between the two rules should measure approximately 18-22vh — enough that the visitor's eye registers it as significant empty space, not a normal paragraph gap.

Client logo bar (§3 Proof section)

Horizontal ticker-style on the dark-background hero transition zone (between §1 and §2). White logos, single row, subtle left-scroll motion (3px/s, loops). Each logo followed by a light vertical separator and a two-word industry label in IBM Plex Mono 10px. The ticker signals breadth without demanding dwell time; the visitor registers "many industries" in passing.

At wider breakpoints (>1440px), the ticker can become a static two-row 5×2 grid with the same mono industry labels. The ticker is a mobile-first solution that scales.

Pros / cons

Pros:

The most distinctive of the three — no AI consultancy looks like this. High category differentiation.
The gap-as-argument concept is specific to CPP's exact brief (the 88%/80% stats are the core insight). It cannot be copied without copying the brief.
Data-literate specialist buyers (CISO who reads audit logs all day, CTO who lives in dashboards) will feel immediately oriented.
The motion sequence is a genuine argument delivery mechanism — it forces the data finding into the visitor's consciousness before the copy has to.

Cons:

Highest production complexity. The motion sequence requires careful implementation and graceful degradation.
Palette risk is real (copper-as-warning in data-viz conventions; see palette section above). Requires user testing to confirm.
ICP-A (CEO/COO) arriving with a narrative need may feel this is too data-abstract and not enough human story. The gap is impersonal by design; the operator credibility (Shea and Mike's backgrounds) must land powerfully in §3 to compensate.
Reduced-motion users receive a static state that must still carry the argument. Static 88%/rule/80%/rule/headline composition works, but the impact is lower than the animated sequence.

ICP this direction optimizes for: ICP-D (CTO/data-literate technical buyer) and skeptical ICP-C (CISO who needs to see evidence, not narrative). Works for ICP-B (CFO) who reads numbers instinctively. Weakest for ICP-A (CEO/COO who came for the narrative).

Recommendation

For the marketing homepage: Direction 2 — Research Register

The marketing site's primary conversion job is to move ICP-A (CEO/COO) from "I've heard this before" to "I want one concrete next step." The Research Register direction is the only one that makes the generalist executive feel seen — it reads at the altitude of McKinsey Quarterly, which is the peer altitude Shea and Mike actually occupy as former executive operators. Directions 1 and 3 both optimize for the specialist buyer who arrives product-ready; those buyers will convert regardless of visual direction because they have a specific job to do. The CEO who might walk away without booking a Sprint is the conversion risk, and Direction 2 holds that visitor longest.

Direction 2 is also the most durable. The CPP brand is early-stage; the design system should last five years without redesign. Editorial conventions are structurally stable; data-viz and enterprise-product aesthetics cycle.

For product/dashboard surfaces: Direction 1 — Carbon Operator

The grāmatr dashboard precedent is already set in Carbon. The product pages (/products/ai-cost-optimization/, /ai-governance-audit/, /ai-development-os/) should adopt the Carbon Operator system. This creates the visual transition Shea's copy promises: "We build the operational changes that actually hold" lands harder when the advisory site (Direction 2, editorial) hands off to a product page that looks like the console the client will actually use.

The hybrid

Home + Services + About + Insights: Direction 2. Product pages + Sprint page (/start/): Direction 1 (Carbon, with copper accent swap). §5 of the homepage (The Signature Artifact — Impact×Effort matrix): borrow Direction 3's data-viz grammar for the matrix rendering. The matrix is a natural home for the data-argument visual language without committing the entire homepage to it.

Borrowable from Direction 3 regardless of chosen direction

The copper rule between statistics (Direction 3's horizontal rule between 88% and 80%) can be adapted into Direction 2's editorial system as an inline stat separator. The motion-on-scroll count-up for stats is low-cost and fits within Direction 2's restrained-purposeful motion stance. The client logo ticker (Direction 3's dark-zone ticker) is also appropriate if the Proof section has a dark-background treatment.

Copper palette focus-group risk

Honest read: Copper #C06018 is a genuinely unusual choice for a software-adjacent professional services firm, and it carries three risks worth naming directly:

Trades and manufacturing associations. Copper (the metal) is most strongly culturally associated with plumbing, electrical, and industrial manufacturing. In Directions 1 and 2, the surrounding context (Carbon system, editorial authority) overrides this association because the visual system says "technology" or "authority" before the color says anything. In Direction 3, copper is used as a data color against a dark background — there it reads closer to "signal/alert" than "brand" and the industrial association is minimized.
Financial services overlap. Copper/gold-adjacent colors are also associated with premium financial services and wealth management. For a firm selling AI governance and FinOps to CFOs and CISOs, this association is ambiguous — could signal "premium and trustworthy" or "expensive and traditional." CPP's price transparency ($3,500 Sprint published) should be the counter-signal; the design should not try to look expensive.
Warmth in a cool-dominant category. AI and enterprise software are predominantly cool-palette (blues, teals, neutrals). Copper reads warm. This is both the differentiator (genuine visual distinctiveness from the category) and the risk (the category default exists because it tests well with technical buyers). If Brian's forthcoming client research shows the ICP-B/C/D buyers are put off by warmth signals, consider whether #5C7A6A (a muted sage) or a dark copper-grey hybrid could achieve visual distinction without the warmth liability.

Net verdict: Copper is worth defending at the current stage. It is distinctive without being illegible, and CPP's copy voice (direct, non-hype) provides enough tonal correction against the warmth associations. Revisit after the first round of qualified prospect feedback. This is a flag, not a recommendation to change.

Two files needed to move to a real mockup

1. docs/design-system/design-tokens.json — Should contain: color tokens (all palette values, named by semantic role: --color-accent-primary, --color-accent-hover, --color-accent-soft, --color-neutral-slate, --color-bg-page, --color-bg-surface); type scale tokens (size, line-height, weight, tracking per H1–H5, body, label, mono-label, caption); spacing tokens (4px base unit, named by usage: --space-section-gap, --space-paragraph-gap, --space-tile-padding); motion tokens (duration, easing functions, reduced-motion override flag). Token scope must specify which tokens apply to marketing surfaces only, product surfaces only, or both — because Direction 2 (marketing) and Direction 1 (product) use different typeface stacks.

2. docs/design-system/visual-identity.md — Should contain: the governing concept for each surface (marketing vs. product), the typeface decision and rationale (Neue Haas Grotesk for marketing, IBM Plex for product, and why each was chosen rather than unified), the copper-palette usage map (where copper appears, what it signals in each context, and what it never does — e.g., copper is never used for error states), the image-prohibition list (no stock, no people in posed commercial contexts), the approved authentic imagery alternatives with commissioning brief, the client logo treatment spec (grayscale, minimum clear space, max-height), and the stat-citation format spec (inline source citation visible in body, not footnote-only — this is a brand decision, not just a legal one). This document is the generative brief a designer can extend to any new page without consulting the AD.

Appendix: Gate-level decisions per direction

Gate	Direction 1 — Carbon Operator	Direction 2 — Research Register	Direction 3 — Gap Argument
G1 Concept specificity	Product-site-as-marketing-site — non-obvious for a consultancy	Research-annual authority — non-obvious in a tech-adjacent category	Gap IS the layout — non-obvious; data usually decorates, here it composes
G2 System coherence	Carbon is a fully specified generative system; extends without consultation	Editorial broadsheet logic extends to any page format without style guide	Data-viz grammar is the generative logic; weaker — harder to extend to copy-heavy pages without jarring
G3 Typographic interpretation	IBM Plex Mono for data numerics is the load-bearing move; if data loses Mono, the product-register argument breaks	Neue Haas Grotesk at -0.02em display + 17px/28px body is a specific optical argument; not default size/leading	Condensed grotesque at 28px inside the gap zone is typographic image — the text block reads as a visual element within the gap, not just a headline
G5 Restraint	Static Carbon removes all decorative motion; risk is density-as-clutter if tile count exceeds 4 above fold	One copper rule in hero; nothing animated except stat count-up; strong restraint discipline	Dark hero limited to three elements (number/rule/number); risk is over-designing the gap treatment
G7 Brand subordination	Carbon is IBM's system; the AD's personal aesthetic is fully subordinated to the brand's product-identity claim	No personal aesthetic visible; pure editorial convention in service of operator-authority claim	Data-viz language is a convention, not a personal aesthetic; subordination is clean