Alex Priest Design System

The visual language of alexpriest.com. Signifier for reading, Montreuil for wayfinding, Flexoki for color. Quiet authority through craft.

"Would this appear in a well-typeset book?"

Color Palette

Surfaces

--bg#FFFCF0Paper
--bg-2#F2F0E5Recessed surface
--ui#E6E4D9Borders, dividers
--ui-2#DAD8CEStronger borders
--ui-3#CECDC3Strongest borders

Text

--text#100F0FHeadings, links, strong
--text-2#6F6E69Body prose, dates, meta
--text-3#B7B5ACDecorative, disabled

Accent

--accent#BC5215Interactive only
--accent-2#24837BSecondary accent

Syntax Highlighting (Flexoki)

red orange yellow green cyan blue purple magenta

Text Selection

Select this text to see the custom selection colors. Light mode uses a warm cream (#E5DFD0), dark mode uses a warm charcoal (#3D3730). Both keep text color as --text.

Typography

Homepage Nameplate

Alex Priest

Signifier 2.5rem / 400 / -0.02em

Article H1

The decisions that shape everything

Signifier 2rem / 400 / -0.01em / letterpress shadow

H2 (Prose Section Heading)

The pattern behind clarity

Signifier 1.2rem / 400 / -0.01em / letterpress shadow

H3 (Prose Subsection)

A Framework for Focus

Montreuil 0.75rem / 600 / uppercase / 0.08em / letterpress shadow

Body Prose

I create clarity from chaos for startup founders. I've spent 15 years in the room for the hardest decisions at companies like Uber, where I was employee #35. Now I advise a handful of founders at a time on the decisions that shape theirs.

Signifier 1rem (15px) / 400 / text-2 / line-height 1.6

Lede Paragraph (First paragraph of article)

Every founder reaches a moment where the path forward isn't clear. The market shifts, the team fractures, the board asks questions that don't have clean answers. This is where the real work begins.

Signifier 1.1rem / 400 / --text / line-height 1.55

Intro First Paragraph (Homepage)

I create clarity from chaos for startup founders.

Signifier 1.1rem / 400 / --text / line-height 1.55

Intro Body (Homepage)

I also make vermouth. Long story.

Signifier 1.05rem / 400 / --text-2 / line-height 1.6

Pull Quote — Light Italic

The right question, asked at the right time, is worth more than a hundred answers.

Signifier Light Italic 1.35rem / 340 / letterpress shadow / hanging quote in --text-2 @ 0.5 opacity

Pull Quote — Centered

Clarity isn't a destination. It's a practice.

Signifier Italic 1.25rem / 400 / --text / centered

Section Label

Recent writing

Montreuil 0.7rem / 600 / uppercase / 0.05em / no background or border

Nav Name (Interior)

Alex Priest

Signifier 1.1rem / 400 / hover: accent color + wght 500

Post List Title

The decisions that shape everything

Signifier 1rem / 400 / hover: accent + wght 500

Post Date

Jan 21, 2026

Montreuil 0.8rem / 400 / tabular-nums

Article Meta Date

January 21, 2026

Montreuil 0.85rem / 400 / tabular-nums / 0.02em

Drop Cap

Every founder reaches a moment where the path forward isn't clear. The market shifts, the team fractures, the board asks questions that don't have clean answers.

Signifier 3.5rem / wght 450 / --text / float left / disabled on mobile

Inline Code

Use --accent for interactive elements only.

SF Mono 0.85em / code-bg / 3px radius / 1px border

Footer Nav

writing · books · about

Montreuil 0.9rem / 400 / dots in accent @ 0.4 opacity

Footer Colophon

© 2026

Montreuil 0.75rem / 400 / --text-3

Strong

The skill is in knowing which question to ask first.

weight 500 / --text (not 700 — too heavy for Signifier)

Emphasis

Most founders think their problem is information.

font-style: italic

Spacing Tokens

--space-xs
0.25rem
--space-sm
0.5rem
--space-md
1rem
--space-lg
1.5rem
--space-xl
3rem
--content-width
42rem

Atmospheric Layers

Five layers create the paper feel. All are visible on this page right now.

Layer 0 — Vignette

Radial gradient on body::before. Subtle edge darkening — look at the corners of your viewport.

z-index: 0 / fixed / transparent center → hsl(40deg 20% 50% / 0.25) edges

Layer 1 — Paper Grain

SVG feTurbulence noise, warm-tinted via feComponentTransfer. Visible across the entire page as a subtle texture.

z-index: 1 / fixed / fractalNoise 1.1 / 5 octaves / darken (light) or lighten (dark) / parallax on scroll

Layer 2 — Content

All content sits at z-index 2, above the grain. Text renders cleanly without grain interference.

z-index: 2 / .site-wrapper

Layer 3 — Crop Marks

Four corner brackets at viewport edges — print registration detail. Desktop only (hidden ≤768px).

z-index: 99 / fixed / 18px / --text-2 @ 0.35 opacity

Layer 4 — Letterpress Shadows

This heading has letterpress treatment.

text-shadow: highlight below + dark above / zero blur / sharp edges like pressed type

The Rules

Always

  • Let typography do the work — size, weight, family, spacing
  • Use accent for interaction only — links, active states, progress
  • Preserve the atmospheric layers — grain, vignette, marks, letterpress
  • Respect the 42rem reading column
  • Test in both light and dark modes
  • Honor reduced motion preferences

Never

  • Add background color to text elements for hierarchy
  • Add box-shadow to text elements
  • Introduce non-Flexoki colors
  • Use Signifier for UI elements
  • Use Montreuil for body text
  • Animate without purpose
  • Use border-radius greater than 8px

I create clarity from chaos for startup founders. I've spent 15 years in the room for the hardest decisions at companies like Uber, where I was employee #35. Now I advise a handful of founders at a time on the decisions that shape theirs.

I also make vermouth. Long story.

Browse my writing, see what I'm reading or watching, check out what I'm up to now, or learn more about me. If you're a founder and want to talk, start here.

All posts →

About

I create clarity from chaos for startup founders. I've spent fifteen years in the room for the hardest decisions at companies like Uber, where I was employee #35, and CloudKitchens, where I led design through a period of intense growth. Now I advise a handful of founders at a time on the decisions that shape their companies.

The work I do isn't about having the right answers — it's about asking the right questions at the right time. Most founders are solving the wrong problem with perfect precision. I help them find the real problem.

What I believe

Speed of decision matters more than quality of decision. Reversible decisions should be made fast. The best founders develop an instinct for separating the two.

Design is how it works, not how it looks. Every pixel should earn its place the way good prose earns its sentences: by being necessary.

Background

Before advising, I spent a decade and a half building products at companies ranging from five people to fifty thousand. I've shipped consumer products used by hundreds of millions and enterprise tools used by dozens. The common thread: making complex decisions clear.

I also make vermouth. Long story.

Get in touch

If you're a founder working through hard decisions, I'd love to talk. I take on a small number of advisory relationships at a time — enough to go deep, not so many that I'm spread thin.

The best way to reach me is by email. I read everything and respond to most things.

The decisions that shape everything

January 21, 2026

Every founder reaches a moment where the path forward isn't clear. The market shifts, the team fractures, the board asks questions that don't have clean answers. This is where the real work begins — not in the building, but in the deciding.

I've spent fifteen years watching this moment arrive. At Uber, it came early and often — every week brought a decision that could have ended the company. The skill isn't in having the right answer. It's in knowing which question to ask first.

Most founders think their problem is information — they need more data, more advisors, more frameworks. But the founders who break through fastest are the ones who realize their problem is attention. They're solving the wrong problem with perfect precision.

The pattern behind clarity

There's a pattern I've seen repeated across dozens of companies, from Series A to pre-IPO. The best decision-makers share three traits: they separate signal from noise instinctively, they're comfortable with incomplete information, and they understand that speed of decision often matters more than quality of decision.

The best founders don't avoid hard decisions. They develop an instinct for which hard decisions matter and which are distractions dressed up as urgency.

This isn't recklessness. It's the recognition that in a startup, time is the only non-renewable resource. Every day spent deliberating is a day your competitor spends executing. The cost of a wrong decision made quickly1 is almost always less than the cost of a right decision made too late.

A framework for focus

When I sit down with a founder, we start with a simple exercise. I ask them to list every decision on their plate. Then we sort:

  • Decisions that are reversible — make them fast, move on
  • Decisions that are irreversible — these deserve deliberation
  • Decisions that feel urgent but aren't — these are the traps
    • Board pressure that's really about optics
    • Competitor moves that don't affect your strategy
    • Team requests that solve symptoms, not causes

The third category is where most founders lose their time. Learning to identify and dismiss false urgency is perhaps the most valuable skill a founder can develop.

The right question, asked at the right time, is worth more than a hundred answers.


When speed becomes strategy

There's a counterintuitive truth about decision-making: the companies that move fastest aren't the ones with the most information. They're the ones with the clearest decision-making framework.

  1. Define the decision clearly — what exactly are you choosing between?
  2. Set a deadline — decisions expand to fill the time available
  3. Identify the minimum information needed — not all, just enough
  4. Make the call and commit fully
  5. Set a review date — you can always course-correct

Here's how the fastest-growing companies I've worked with handle their decision cadence compared to industry averages:

Decision Type Industry Average Top Performers
Hiring (senior) 4–6 weeks 2 weeks
Product pivot 3–6 months 2–4 weeks
Market expansion 6–12 months 6–8 weeks
Pricing changes 2–3 months 1–2 weeks

The theme detection code that powers this site's dark mode is a good example of a decisive, reversible implementation:

const theme = localStorage.getItem('theme') ||
  (window.matchMedia('(prefers-color-scheme: dark)')
    .matches ? 'dark' : 'light');

// Apply immediately — no flash of wrong theme
document.documentElement.setAttribute('data-theme', theme);

Simple. Reversible. Ships in five minutes. That's the mindset.

A warm afternoon by the pool
A warm afternoon on the coast. The kind of light that makes everything look like a memory.

The practice

What changes when you internalize this? Everything. The weekly leadership meeting shrinks from two hours to forty-five minutes. The Slack threads stop spiraling. The board meetings become conversations instead of presentations.

On compound clarity

There's something beautiful about watching a founder develop this muscle. The decisions get faster, but they also get better. Not because the founder is smarter — because they've learned to focus their intelligence on the decisions that actually matter.

Clarity isn't a destination. It's a practice — one that compounds over time, like interest.

Finding the signal

The founders I work with now come to me not because I have answers they don't. They come because having someone in the room who's seen the pattern before2 — who can say "this is the decision that matters, and this one can wait" — saves them the most precious thing they have: time spent on the wrong problem.

A note on intuition

Intuition isn't magic. It's pattern recognition compressed into instinct. The more decisions you make, the faster your pattern.match() runs. The key is making those decisions consciously enough to learn from them.


If you're a founder wrestling with decisions that feel impossible, I'd love to talk. Not to give you answers — to help you find the right questions. That's where clarity lives.

Footnotes

  1. Jeff Bezos popularized this as "Type 1 vs Type 2 decisions" in his 2016 letter to shareholders. Type 2 (reversible) decisions should be made quickly by individuals or small groups.
  2. This is sometimes called "earned intuition" — the ability to recognize patterns from experience that would take a first-time founder months to identify on their own.

Component Gallery

Every component in isolation. Hover to see interactive states.

Navigation

Homepage — Nameplate

Alex Priest

Interior — Breadcrumb

Section Labels

Montreuil 0.7rem, weight 600, uppercase. No background, border, or box-shadow. Pure typographic marker — the typeface shift from Signifier creates sufficient distinction.

Post List

Interactive — hover any item

Hover: bg shifts to --bg-2, title + date turn accent, 4px left indent, title weight 500.

Article Header

The decisions that shape everything

January 21, 2026

H1 in Signifier 2rem with letterpress shadow. Meta date in Montreuil 0.85rem, tabular-nums. Separated by border-bottom 1px solid --ui.

Blockquote

The best founders don't avoid hard decisions. They develop an instinct for which hard decisions matter and which are distractions dressed up as urgency.

Indented italic with thin --ui left rule. No background, no box-shadow, no border-radius.

Pull Quotes

Light Variant — Hanging Quote

The right question, asked at the right time, is worth more than a hundred answers.

Centered Variant

Clarity isn't a destination. It's a practice.

Light: Signifier 1.35rem / weight 340 / letterpress shadow / hanging open-quote in --text-2 @ 0.5 opacity.
Centered: Signifier 1.25rem / weight 400 italic / --text / centered.

Section Break (Dinkus)

...the end of one thought.


The beginning of another...

Three spaced asterisks (*   *   *). Signifier italic, --text-3, 1rem, letter-spacing 0.3em, opacity 0.65.

Code

Inline Code

Use --accent for interactive elements. The font-variation-settings property controls weight.

Code Block

const theme = 'light';
// Apply theme
document.setAttribute('data-theme', theme);

Inline: SF Mono 0.85em, code-bg, 3px radius, 1px border.
Block: code-bg, padding --space-md, 4px radius, 1px border, Flexoki syntax colors.

Lists

Unordered + Nested

  • Reversible decisions — make fast
  • Irreversible decisions — deliberate
    • Board composition changes
    • Major acquisitions
  • False urgency — dismiss

Ordered

  1. Define the decision clearly
  2. Set a deadline
  3. Identify minimum information needed
  4. Make the call and commit

Padding-left 1.25em. Nested lists use → markers in --text-3. Li margin-bottom 0.35em.

Table

ElementFontSize
BodySignifier1rem
H3Montreuil0.75rem
FooterMontreuil0.9rem

Width 100%, border-collapse. Th: weight 600, --text. Td: border-bottom 1px solid --ui. No background colors. Font-size 0.9rem.

Image & Figure

A warm afternoon by the pool
A warm afternoon on the coast. The kind of light that makes everything look like a memory.

Images: 3px radius, 1px border --ui, warm sepia filter, layered shadow. Caption: 0.85rem, italic, --text-2, centered.

Links

Internal Link — Persistent underline

Read about the pattern behind clarity in the latest post.

External Link — Arrow indicator

As Jeff Bezos wrote in his 2016 shareholder letter.

Internal: --text color, persistent subtle accent underline (40% opacity), intensifies to full accent on hover.
External: ↗ indicator in accent at 60% via color-mix, underline stops before arrow.

Footer

Simple rule separator — 1px border-top --ui. No background box. Nav in Montreuil 0.9rem, dots in accent @ 0.4 opacity. Colophon: Montreuil 0.75rem, --text-3.

Theme Toggle

Default
Hover

Fixed bottom-right. 44px circle, --bg background, --ui border. Hover: color --text, scale(1.05). Sun/moon swap on theme change. Press "d" to toggle.

Toast Notification

Link copied

Fixed bottom-center. Paper-toned note — --bg background, --ui border, warm shadow. Serif italic. Slides up with 0.3s spring ease. Shows on heading click and share actions.

Scroll Progress Bar

Fixed top, full width, 2px height, --accent background. Uses animation-timeline: scroll() where supported, JS fallback otherwise. Visible on article pages.

Design System

Loading documentation...

Style Guide

This guide is inspired by—and owes a tremendous debt to—Robin Sloan's style guide. His colophon convinced me every writer should keep one of these. Most of these rules started as his; I've adapted them to my own preferences and added a few of my own.

Capitalization

  • Sentence case for titles and headings. "A few thoughts on writing well," not "A Few Thoughts on Writing Well."
  • Phrases following a colon are not capitalized, even full sentences: that's just how I like it.
  • Spell out acronyms on first use, unless universally known (NASA, URL, API).

Punctuation

  • Oxford comma, always. Without it, you risk inviting the strippers, JFK and Stalin.
  • Em dashes without spaces—like this—for parenthetical asides and abrupt shifts.
  • Ellipses: write ... and let the site render … (Unicode ellipsis).
  • Smart quotes: let the site replace straight quotes with curly quotes automatically.
  • When a sentence ends in an italicized phrase followed by punctuation, italicize the punctuation, too!
  • Punctuation goes inside quotation marks for complete, standalone sentences. Otherwise it goes outside, in the UK style.

Titles & names

  • Italicize titles of books, films, albums, periodicals, and TV shows.
  • Plain text (with quotes if needed) for shorter works: songs, articles, episodes.
  • "The" belongs to you, not the brand. Write "the Atlantic," not "The Atlantic"—claim the article for your own sentence.

Numbers & dates

  • Spell out ten and below. Digits for 11 and up.
  • Always digits for stats, data, and measurements. 50%, not fifty percent.
  • Full dates in prose: "January 15" with the year only when it's not obviously the current one. Shorthand is fine for navigation.
  • YYYY-MM-DD for file organization and sorting.

Compound words & spelling

  • Hyphenate compound modifiers before a noun ("side-by-side comparison") but not after ("they stood side by side"). This is the general rule—apply it everywhere.
  • Email, but e-book. Website, but web page. Home page. Home screen.
  • Plugin. Codebase. Codename.
  • Coworker, not co-worker.
  • Reread, rewatch, redownload.
  • Signup form, but "sign up": you sign up with the signup form.
  • James's, not James'. Add 's to everything—it matches how you say it.

Voice & grammar

  • Contractions are welcome. Write like you talk.
  • Self-driving cars, not robotaxis.

Links & references

  • Descriptive link text woven into prose. Rarely "click here."
  • Ampersands (&) in UI, labels, and headers. "And" in prose.