Style guide

Internal reference — not linked in nav.

Hero lockup

Same treatment used on the homepage intro block.

Nick Bartlett

Notes on building, ownership, AI, and the messy middle of making something real.

I build products from zero. I've done it enough times to have patterns worth writing down before hindsight smooths them out.

Not advice. Not thought leadership. Just the decisions, the patterns, and the mistakes.

Open lorem draft preview →

End mark (final glyph)

Colors

Backgrounds

Cream
#F8F4EC

Dark bg
#1C1917

Dark surface
#252220

White (ref)
#FFFFFF

Text

Ink
#523F31

Ink light
#523F31

Ink muted
#9A7E68

Dark text
#F5F0EB

Accents

Pear green
#67864F

Pear green light
#67864F

Pear gold
#C39264

Pear gold light
#D5A97C

Typography

h1 — Fraunces Bold

The quick brown pear

h2 — Fraunces Semibold

Sections earn their headers

h3 — Fraunces Semibold

Subsection heading

Tagline — Fraunces Light, pear-gold

Notes on building, ownership, AI, and the messy middle.

Body — Outfit 17px

I build products from zero. Short sentences when it matters. A long, detailed explanation followed by a short declarative line. That's the rhythm.

Secondary — Outfit, ink-light

The gap isn't desire. It's friction. Remove the friction and you unlock behavior that didn't exist before.

Muted — Outfit, ink-muted

Last updated: March 2026 · 4 min read · building

Links

Inline links look like this gold-underlined style and shift to green on hover. Navigation links use the muted-to-ink pattern.

Accent elements

Gold accent bar

Used above section h2s in prose and on the homepage.

Section heading example

Left-border accent

Used for thesis statements and callout paragraphs.

Not advice. Not thought leadership. Just the decisions, the patterns, and the mistakes — written down while they're still fresh.

Selection highlight

Select any text on this page to see the warm gold highlight.

Prose content

Blog heading with accent bar

This is how body copy renders inside .prose-blog. Links look like this with gold underlines. The line height is 1.75 and the font size is 17px. Bold text and italic text work as expected.

Second paragraph. Short sentences hit harder. A long explanatory passage that builds context and layers detail, followed by a one-liner. That's the rhythm.

Subheading

Subheadings use Fraunces at text-xl. They don't get the gold accent bar — only h2s do. Inline code gets a subtle background.

Blockquotes use a 3px gold left border. Not italic. The quote should feel like a pull from the text, not a decorative aside.

Pull quotes are larger, in Fraunces, with a gold left border.

// Code blocks get rounded corners and a subtle border
const greeting = "Hello from Pearspective";
console.log(greeting);
  • Unordered list item one
  • Second item — lists use the default prose styling
  • Third item with an inline link
  1. Ordered list item one
  2. Second item
  3. Third item

Blog components

Callout — note

Callout — tip

Callout — warning

CodeDemo

Example component
const x = 42;

Preview renders here.

Current threads

Essays I'm actively working through.

  • Elegy for coding

    What AI is changing about the craft of programming, and what it quietly takes with it.

  • Ownership is the job

    Why founder-level energy without founder-level ownership is usually a bad trade.

Dark mode reference

Toggle dark mode with the header button to compare treatments.

Light mode

Ink on cream

Ink-light secondary

Ink-muted meta

Pear green accent

Pear gold accent

Dark mode

Near-white heading

Dark-text body

Dark-muted secondary

Pear green light

Pear gold light

Spacing

Content max-width: max-w-2xl (672px)

Body font size: 17px / line-height 1.75

Page top padding: pt-14 sm:pt-20

Section bottom: pb-12 sm:pb-14 (intro), pb-16 (content)

Footer: mt-12 py-10