Porter Fairbourne — Style Guide

01 — Foundations

Color

Mostly grayscale on warm off-white. The amber accent is rare on purpose — use it for one thing per view: a hover state, a single mark, a callout.

Background --bg · #fafaf7

Ink (primary text) --ink · #161513

Ink 2 (body text) --ink-2 · #3d3a36

Muted (labels, captions) --muted · #8a847d

Rule (borders, dividers) --rule · #e8e4dd

Accent (hover, marks) --accent · #b45309

Spacing

4px base scale. Most components use s-3 through s-7. Section gaps use s-8 or s-9.

--s-1

--s-2

--s-3

--s-4

--s-5

--s-6

--s-7

--s-8

--s-9

02 — Typography

Three families. Instrument Serif for display headings — adds warmth and editorial personality. Geist for prose and UI — modern, neutral, highly legible. JetBrains Mono for system text — labels, dates, metadata, tech tags.

Display · Instrument Serif · 72/0.95

Build things.

H1 · Instrument Serif · 52/1.0

Selected work

H2 · Instrument Serif · 36/1.1

Ember — Product data infrastructure

H3 · Geist Semibold · 20/1.3

Section heading in sans

Italic serif · 18 · for taglines, role titles

A PIM and data enrichment platform for industrial supply chains.

Body · Geist · 15/1.6

Body copy for descriptions, case studies, and prose. Lean toward paragraphs of 2–4 sentences. Maximum reading width is 720px.

Small · Geist · 13.5/1.55

Used for project descriptions, footnotes, and secondary copy.

Caption · JetBrains Mono · 11.5

2025 · Co-Founder · Salt Lake City, UT

Label · JetBrains Mono · 11 · UPPER · tracked

SELECTED WORK

03 — Components

Section label

Page anchor. Use sparingly — one per major section. The trailing rule pulls the eye across.

01 — Foundations

Buttons

Pill buttons. Outlined for secondary actions, solid for primary CTAs. Mono label gives them a technical feel.

Read case study Get in touch → View on GitHub

Links

Inline links blend in until hovered, then go amber with an underline. Arrow links signal "go somewhere" — the arrow drifts on hover.

Inline: I lead product and sales at Ember, a PIM platform for B2B supply chains. See all projects

Project card

List-style cards over grid-style cards. Year on the left, title in serif, mono tags below. Hover slides the card right and shifts the title to amber.

2025 →

Ember

AI-native PIM platform automating SKU onboarding and chargeback prevention for industrial supply chains.

Next.js Supabase Claude API Firecrawl

↗

2025

Yoodlize FB automation

Multi-account Facebook Marketplace cross-listing and auto-reply agent stack running on a persistent Mac mini.

MindStudio Skyvern n8n

↗

Image frame

Hairline border, soft elevated background, slight border-radius. Use for screenshots and product shots inside case studies.

project screenshot · 16:10

04 — Layout

Widths

--max-w 1040px · page container
--max-w-read 720px · prose blocks, case-study text
side padding 48px desktop · 24px mobile

Rhythm

Page top padding: --s-9 (96)
Between sections: --s-9 (96)
Inside a section: --s-5 to --s-6
Between paragraphs: --s-4 (16)

05 — Principles

A few rules I'm holding myself to.

1 · One accent, used rarely

Amber appears at most once per screen. The period after the name. A hover state. A single mark. If everything's accented, nothing is.

2 · Serif for warmth, mono for system, sans for prose

Don't mix roles. Don't put body copy in serif. Don't put dates in sans. Each font signals what kind of information it is.

3 · Whitespace > dividers

If something needs separation, try more space first. Lines and borders are a last resort. The eye finds rhythm in whitespace.

4 · Asymmetric grids, right-aligned metadata

Dates, years, locations float to the right. Titles and content anchor left. The eye sweeps and lands without working.

5 · Hover is where personality lives

Resting states are quiet. Hover states do the work — color shift, a small slide, the arrow drifting. Reward the cursor.

06 — Tokens (paste into :root)

/* Drop into your global stylesheet */
:root {
  /* color */
  --bg:        #fafaf7;
  --bg-elev:   #ffffff;
  --ink:       #161513;
  --ink-2:     #3d3a36;
  --muted:     #8a847d;
  --rule:      #e8e4dd;
  --accent:    #b45309;
  --accent-soft: #fef3c7;

  /* type */
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans:  'Geist', -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* spacing (4px base) */
  --s-1: 4px;   --s-2: 8px;
  --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;
  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* layout */
  --max-w:      1040px;
  --max-w-read: 720px;
  --radius-pill: 999px;
  --radius-card: 4px;
}

/* Google Fonts link to add to <head> */
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Style guide.