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)

Dark (derived complement — the registry defines light only)

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.

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.