Style guide
Internal reference — not linked in nav.
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.
End mark (final glyph)
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
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
Inline links look like this gold-underlined style and shift to green on hover. Navigation links use the muted-to-ink pattern.
Gold accent bar
Used above section h2s in prose and on the homepage.
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.
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
- Ordered list item one
- Second item
- Third item
Callout — note
Callout — tip
Callout — warning
CodeDemo
const x = 42; Preview renders here.
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.
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
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