Scott Wittrock

# Scott Wittrock

**Tagline:** Product builder.

Scott Wittrock is a product builder. Across about a decade he has shipped
products — from computer vision to LLMs to agents — for consumers, enterprises,
and developers. He works at Customer.io, where the team is building an engagement
platform for the next generation of builders — increasingly, agentic ones. The
personal brand spans two properties that share one visual identity and one point
of view: **scottwittrock.com**, the professional home and the record of the work,
and **headforproduct.com**, the publication where the thinking gets published
regularly.

Both wear the same skin — a cool off-white page, ink text, and a single deep
teal doing the accent work — and both carry one idea: *the core of most products
is data, and it's personal; people hand it over in trust. The craft is building
the surfaces where people and data meet — and the systems underneath them.*

## Personality

Confident about the thinking, modest about the self. Certain about ideas,
generous about people, quiet about credit. A respected colleague thinking out
loud — never a keynote, never a brand talking to a market. The test for anything
that ships: would a smart, senior peer nod, or wince? Write for the nod.

## Identity — builder, first and loudest

**Builder is the core identity on both sites.** It keeps the brand grounded and
human, and it's the guard against sounding like a philosopher rather than a
maker. The old builder / leader split is retired as the framing device.

**Core vs. surface** is the organizing idea *for the work* — the invisible data
held in trust, and the visible craft on top. It threads the résumé (see below);
it does not carry the front door. The hero stays purely builder.

## Two-front architecture

Two sites doing two different jobs, deliberately kept separate so each stays
honest, connected by an identical visual brand. Builder is the core identity on
both; what differs is the question each answers.

- **scottwittrock.com** — Personal HQ / the record. Answers **"What have I
  built?"** A plain builder hero (no surfaces list, no data thesis — those live
  below). Then the arc of the work, the "Building" list, the résumé, and contact.
  The surfaces thread runs as **résumé subtext**. Concrete, scannable,
  proof-first — thesis on top, proof underneath, keyword-visible. Links out to
  the writing; doesn't host the essays.
- **headforproduct.com** — The publication. Answers **"How do I think — and where
  is this going?"** Leads with the publication masthead, essays, the three
  pillars, subscribe, and the reading experience. Exploratory, example-led,
  through building. Doesn't carry the résumé.

Rule of thumb: two publications from the same press. Same press = same tokens,
mark, labels, teal accent, and light/dark behavior. Different masthead = the
wordmark and the emphasis. A visitor moving between the two should feel one
person, one press.

## The hero — builder only

The hero says one thing: *this person builds.* No surfaces list, no data thesis,
no channel keywords. Those live below.

> # Scott Wittrock
> ## Product builder.
> *A decade shipping products — computer vision to LLMs to agents — for
> consumers, enterprises, and developers.*

- **Drop "using AI."** In 2026 that's wallpaper, not a differentiator. *"computer
  vision to LLMs to agents"* proves a decade of AI *and* carries better keywords.
- Keep **"product"** and (somewhere crawlable) **"product manager"** so recruiter
  search still resolves — put it in the meta description if not the line.
- The hero is short on purpose. Depth is the next scroll.

## Résumé subtext — the surfaces thread

Sitting directly above/around the work history, this is what turns a varied
ten-year history into one deepening practice.

> Different companies, one problem. The core of most products is data — and it's
> personal, whether it belongs to a person, a company, or a catalog. People hand
> it over in trust. My craft is building the surfaces where people and data meet,
> and the systems underneath them.

**The surface strip:**

| | |
| --- | --- |
| **Messaging** | email · SMS · push · in-app · WhatsApp · Slack |
| **Conversational & agentic** | chat · assistants · MCP · agents |
| **Visual** | visual search · AR |
| **Developer** | API · SDK · CLI |

*Why these four:* mobile and web were cut deliberately — table stakes, no signal
of range. Mobile still lives in the arc and is implied by **SDK**. The grouped
labels show systems-thinking; the individual terms carry the SEO. *"…where people
and data meet"* runs both directions — visual search and APIs are people reaching
*into* data; messaging and push are data reaching *out* to people. *"…and the
systems underneath them"* is the anti-"UI PM" signal — non-negotiable.

## Positioning guardrails

- **Builder first.** Lead with making, not managing.
- **Ownable claim:** *a decade on the same problem — making the core of a product
  reachable, across changing surfaces.*
- **Data + surfaces** is the throughline; use it to tie disparate work together.
- **Range is a feature:** consumer, enterprise, *and* developer. Say it
  explicitly; never let the brand read consumer-only.
- **Trust is the undertone, not a section.** Transparency, compliance, and
  security are what honoring personal data requires — believed, not bulleted.
- **AI = enabler, defined dose.** Present via the arc ("computer vision to LLMs
  to agents"), never the identity. Drop the "AI PM" label.
- **Data ≠ data science.** Keep "surfaces" as loud as "data" so the brand isn't
  miscategorized as an analytics PM.
- **It's fine to say I work at Customer.io** — roughly 20–30% of posts might
  mention it. Keep confidential product specifics out, frame personal projects
  clearly as personal-time work, and always delineate which hat is on: the
  personal builder or the day job.

## At a glance

- **Category:** Product builder · writing on the data and surfaces behind good
  products
- **Audience:** HQ — recruiters, hiring managers, people you DM the link to;
  Publication — readers, peers, subscribers, the wider product world, and
  Customer.io's own leadership (the writing doubles as quiet internal marketing)
- **Feeling to leave behind:** "One person, one press — and I want to read more."
- **Three words:** Builder, considered, credible
- **Not:** Bragging, prescriptive, buzzword-y, self-important
- **Thesis:** A decade on the same problem — building the surfaces where people
  and data meet, and the systems underneath them.

# Scott Wittrock — Look

Cool off-white base, ink text, a single **deep teal** as the one brand color.
Sans-first type with one serif accent face. Ships light and dark. Clean,
confident, credible — a senior operator's brand, not a launch page. Colors are
the source of truth pulled from the Brand Registry; type, layout, and components
are defined here and shared across both sites.

## Color

Teal is the one brand color. It's a scalpel, not a paint roller — primary
actions, links, one emphasis moment, the dot, hover states. If teal covers more
than ~10% of a screen, pull it back.

**Light (canonical — from the registry)**

| Token | Name | Hex | Role |
| --- | --- | --- | --- |
| `--pop` | Deep Teal | `#0b7492` | The accent — primary buttons, links, key emphasis |
| `--popd` | Teal Deep | `#085d75` | Accent hover / pressed |
| `--ink` | Ink | `#101828` | Headlines and body text |
| `--soft` | Slate | `#797c83` | Secondary text, captions |
| `--paper` | Cool Mist | `#f2f4f7` | Page background |
| `--card` | Paper | `#ffffff` | Cards, panels, surfaces |
| `--line` | Hairline | `#e4e7ec` | Dividers, input borders |
| `--highlight` | Notepad | `#fffbe8` | Callouts / highlighted resources — sparingly |
| `--faint` | *(derived)* | `#9aa1ab` | Fine metadata / captions — a lighter Slate |

**Dark (derived complement — the registry defines light only)**

| Token | Hex | Role |
| --- | --- | --- |
| `--pop` | `#2ea8c9` | Accent, brightened to hold contrast on dark |
| `--popd` | `#4fbcd9` | Accent, lighter state |
| `--ink` | `#eef1f5` | Primary text |
| `--soft` | `#98a0ab` | Secondary text |
| `--paper` | `#0d1017` | Page background (cool near-black, tuned to the Ink hue) |
| `--card` | `#161b24` | Surfaces |
| `--line` | `#262d38` | Hairlines |
| `--highlight` | `#26261a` | Callout wash (muted) |
| `--faint` | `#6a7078` | Fine metadata |

**Rules**

- Teal is the one brand color — one primary action per view. Never introduce a
  second bright hue to compete with it.
- Text is Ink on a cool off-white, never pure black on pure white.
- The **Notepad** cream highlights a single resource or callout — a highlighter
  over one line, not a wall of yellow.
- Always declare `color-scheme: light dark` so browsers don't auto-invert and
  break contrast.

## Typography

Sans-first, with one serif accent face used only for emphasis. Three roles,
three families — all Google Fonts. Sans carries the information; serif carries
the feeling.

| Role | Family | Weights | Where |
| --- | --- | --- | --- |
| Display / structure | **Space Grotesk** | 500, 600 | Headlines, section labels, wordmark, card titles, meta |
| Body | **Inter** | 400, 500 | Lede, prose, lists, nav |
| Accent | **Fraunces** *(italic)* | 400 italic | The one emphasized word; pull-quotes; drop-cap; writing metadata |

**Type scale (fluid)**

- **Hero H1** — `clamp(36px, 6–7vw, 68–80px)`, Space Grotesk 600, line-height
  ~1.03, −0.03em, max ~16ch
- **Article H1** — `clamp(32px, 5vw, 52px)`, line-height 1.06, −0.03em
- **Featured essay H2** — `clamp(24px, 3.6vw, 34px)`, Space Grotesk 600, −0.02em
- **Lede** — `clamp(16.5px, 2vw, 19px)`, Inter, `--soft`, line-height 1.6,
  max ~52ch
- **Prose body (reading)** — `18.5px`, Inter, line-height 1.72, measure ~680px
- **Pull-quote** — `clamp(22px, 3vw, 30px)`, Fraunces italic, line-height 1.34,
  teal left-border
- **Section label** — `12.5px`, Space Grotesk 500, UPPERCASE, letter-spacing
  0.14em, `--faint`
- **Essay index title** — `19px`, Space Grotesk / Inter 600, −0.01em
- **Drop-cap** — `3.4em`, Fraunces, teal, first paragraph of an essay

Fraunces only ever appears italic, only in teal (or as a quiet pull-quote),
never more than a word or a single line. Headlines tight and short-measure; body
long-measure and airy.

## Logo & mark

A final mark is TBD — leave a simple placeholder in the build. Until it exists,
the **teal dot + wordmark** stands in as the identity: "Head for Product" (the
publication) and "Scott Wittrock" (HQ), each set in Space Grotesk beside a filled
deep-teal dot. Drop in the real mark once it exists.

## Signature elements

These are the brand. Keep only these and it still reads as the system.

1. **All-caps section label + teal rule** — Space Grotesk, 12.5px, UPPERCASE,
   0.14em tracking, `--faint`, preceded by a `22px × 2px` deep-teal bar.
2. **The teal dot** — a filled deep-teal circle, `9px` beside a wordmark, `7px`
   as a status/motif marker (the "now" line, About list, footer). Always round,
   filled, never outlined.
3. **The accent word** — one word per headline in Fraunces italic, teal
   (*choosing*, *come along*). Choose the word that carries the meaning.

Supporting components:

- **Cards / featured blocks** — `--card` on `--paper`, 1px `--line`, 16px radius,
  ~26–34px padding. Hover: lift `translateY(-3px)`, border → teal, soft shadow,
  a `Read →` affordance that nudges right.
- **The reading experience** *(the publication's crown jewel)* — measure ~680px,
  18.5px body at 1.72 line-height, a Fraunces teal drop-cap on the first
  paragraph, teal-bordered Fraunces pull-quotes.
- **Subscribe** — pill-shaped inputs, teal filled button, low-key helper note
  ("A new essay every few weeks. No noise.").
- **The "now" pill** — rounded-full status chip with a 7px teal dot and small
  `--soft` text.

## Space & layout

- **Containers:** 940px for standard pages; **680px for prose**. Side padding
  32px.
- **Vertical rhythm:** major sections `padding: 48–52px 0`, a 1px `--line` top
  border, 40px top margin. The hairline is the only divider; whitespace does the
  rest.
- **Nav:** sticky, translucent `--paper` (~85%) with 12px backdrop blur and a
  bottom hairline. Wordmark left, links right; secondary links may hide under
  600px, Subscribe stays.
- Whitespace is the primary material. When in doubt, add space, not decoration.

## Motion

Minimal — motion confirms, it doesn't perform.

- **Load:** soft rise-and-fade on hero elements (`translateY(9px)`→0, opacity
  0→1), 0.7s ease-out, staggered 0.04 / 0.12 / 0.22 / 0.32s.
- **Hover:** 0.16–0.2s on cards, links, arrows.
- **View change:** ~0.4s opacity fade, scroll to top.
- All wrapped in `@media (prefers-reduced-motion: reduce)`. No parallax, no
  scroll-jacking, no ambient loops, no heavy drop shadows or gradients.

## Accessibility & quality floor

- Keyboard focus shows a 2px teal outline at 3px offset; interactive cards
  operable with Enter/Space.
- Contrast: Ink on Cool Mist and teal on white clear AA; the dark accent is
  brightened to hold.
- Responsive to small phones; grids collapse gracefully.
- Theme follows the device; test dark on an actual phone (the ink-on-dark
  problem only shows there).

## Do / Don't

- **Do** let deep teal and clear hierarchy carry the design; keep type legible
  and long-form readable; use the label + rule for every beat; state numbers
  plainly; keep the Notepad cream to a single highlighted line.
- **Don't** stack a second accent color, gradients, or heavy drop shadows; use
  pure white/black; reach for Fraunces beyond a word or a line; add decorative
  icon sets.

# Scott Wittrock — Voice

The one rule: **confident about the thinking, modest about the self.** Be certain
about ideas, generous about people, quiet about credit. The test for any
sentence — would a smart, senior peer nod, or wince? Write for the nod. Warm and
conversational, a respected colleague and not a keynote.

## Lead with these five attributes

1. **Judgment over activity** — show what you *chose*, not just what you did.
2. **Taste & curation** — say what you left out and why; selection is the story.
3. **Restraint** — confident writing is short; cut the intensifiers.
4. **Evidence over volume** — numbers as quiet facts in context, never a
   scoreboard.
5. **Thinking in the open** — show the *how*, the bet, the tension, the
   uncertainty.

## The stance

Always "here's how I'm thinking about it." Never "here's how you do it."
First-person, exploratory, anti-prescriptive. Offer a lens, not a lecture. Prefer
open questions to declarations; end pieces with a real question you're still
sitting with.

## Vocabulary

- **Reach for:** chose, argued for, treated, scoped, left out, bet on, noticed,
  decided, shaped, owned, learned, came to believe, cared about.
- **Avoid:** spearheaded, leveraged, synergized, revolutionized, world-class,
  industry-leading, proven track record, passionate, results-driven, thought
  leader, game-changing, best-in-class, rockstar, ninja, guru.
- **Handle with care (one per page, usually cut):** successfully, significantly,
  seamlessly, robust, scalable, impactful.

## Numbers, the calm way

State the figure once, in a sentence, doing a job. No "+" inflation (7,800, not
7,800+). Spell small numbers out in prose where it reads calmer ("sixty
retailers"); use digits for the ones meant to register ("$70M"). "Roughly /
about / around" is a strength, not a hedge.

## The one-liner (bio / meta description)

> Product builder. A decade building the surfaces where people and data meet —
> computer vision to LLMs to agents — across consumer, enterprise, and developer
> products.

## The longer "why" (About copy)

> I'm a product builder. For about a decade I've worked on the same problem under
> different names — from computer vision and visual search to language models and
> agents. The core of most products is data, and it's personal; people hand it
> over in trust. My craft is building the surfaces where people and data meet —
> visual, messaging, developer, conversational — and the systems underneath them.
> At Customer.io that's developer experience and the MCP server, building for the
> people (and increasingly the agents) who build on top of you.

## Six gut checks

1. Nod or wince?
2. Decision or activity?
3. Could I cut a word?
4. Is the number informing or bragging?
5. Did I leave a door open?
6. Does it sound like me talking to a colleague — or a brand talking to a market?

## Before / after

- **Bragging →** ✅ "I argued for building the MCP server as a first-class
  surface. It's become part of how 7,800 teams work." ❌ "Spearheaded the
  industry-leading MCP server driving 300% adoption."
- **Résumé →** ✅ "A decade shipping products — computer vision to LLMs to
  agents. The same problem each time: making the core of a product reachable." ❌
  "Expert AI product leader with a decade of proven success."
- **DX →** ✅ "I treated developer experience as one surface, not three tickets.
  Integration got roughly three times faster." ❌ "Revolutionized DX, achieving a
  3x improvement."
- **Positioning →** ✅ "I build the surfaces where people and data meet — and the
  systems underneath them." ❌ "Passionate, results-driven PM who exceeds
  expectations."

## The editorial system (headforproduct.com)

The writing *is* the brand. The site is a clean vessel; the point of view and the
cadence do the work.

**Three pillars (the spine)**

1. **The data underneath** — the personal core that decides whether a product
   works, and the trust that honoring it requires.
2. **Surfaces** — how people and data meet: visual, messaging, developer,
   conversational, and increasingly agentic. (The "connected product" idea lives
   here.)
3. **Building in the open** — the experiments, and what making things teaches.

**Cadence**

- **Anchor essay:** one every ~4–6 weeks (long-form, evergreen).
- **Field notes:** shorter, roughly weekly, keeping the rhythm alive between
  anchors.
- Optional public rhythm: Tuesday essay / Thursday note.
- **Canonical on your own domain first**, then syndicate to LinkedIn. Own the SEO
  and the archive.
- **Subscribe from day one** — a writing brand compounds through an email list.

**Runway of titles** (re-filed under the three pillars)

- *Anchor* — When something else acts on your data (**the flagship**; the data
  underneath) — as agents become a surface, the trust burden goes up, not down.
- *Anchor* — The connected product: one capability, three front doors (surfaces).
- *Anchor* — Developer experience is a matter of taste (surfaces).
- *Anchor* — What building a freemium SaaS taught me about conversion (building in
  the open).
- *Anchor* — Shape Up vs. shipping fast is a false binary (building in the open).
- *Anchor* — More pictures, not more masterpieces (building in the open; taste &
  curation as a sub-theme now, no longer the flagship).
- *Field note* — Giving an AI agent a front door (surfaces).
- *Field note* — Shipping from a phone: my cloud dev setup.
- *Field note* — PM-to-engineer ratios are contextual, not gospel.