Jim Birch · Design System

The style guide

A coastal-editorial system — the Cape in sea glass and slate. Warm in voice, refined in proof. Every value below is pulled live from the system's own stylesheet.

Cape Cod · Massachusetts — JB maker's seal
Color

A cool sea-glass palette.

Cool grey neutrals, deep-sea ink darks, and a tonal blue-green accent family. Tap any swatch to copy its variable.

Neutrals — cool coastal greys
Cloud
--paper
#F4F6F6
Fog
--paper-2
#E7ECEC
Line
--line
#C2CDCC
Muted
--muted
#5A6A6E
Text
--text
#233136
Darks — deep sea
Ink
Deep sea
--ink
#15333B
Soft
Ink-soft
--ink-soft
#3A5A66
Accents — the coastal family (door color-coding)
Professional
Night Harbor
--harbor
#1C3A5E
AI Services · CTAs
Tide
--tide
#4E7C8C
Rentals
Seafoam
--seafoam
#6FA493
Highlights & CTA hover
CTA hover
Tide-deep
--tide-deep
#3E6675
Sea glass
--sea-glass
#9BD3CB
Foam
--foam
#CDE7E2
On-dark accents — for use on --ink sections
Heading
On-ink heading
--on-ink-heading
#CDE7E2
Body
On-ink body
--on-ink-body
#C9D6D2
Harbor
Harbor on-ink
--harbor-on-ink
#7FA8C9
Seafoam
Seafoam on-ink
--seafoam-on-ink
#9DC4B4
Typography

DM Serif Display, paired with Hanken Grotesk.

A high-contrast didone serif for display (single weight, 400 + italic) over a clean grotesque for body and UI. Size carries hierarchy — never faux-bold the serif.

Type scale
Display--fs-display
clamp 44–80px · 400
I build useful things.
H1 · page title--fs-h1
clamp 36–56px · 400
Engineer by trade.
H2 · section--fs-h2
clamp 28–40px · 400
What can I help you with?
H3 · card--fs-h3
clamp 21–26px · 400
Engineering & web
Lead--fs-lead
clamp 18–22px · Hanken 400
A warm, plain-spoken paragraph that introduces a section without hype.
Body--fs-body
17px · Hanken 400 · lh 1.65
For two decades I've built websites and systems for organizations large and small — always bridging the gap between technical work and real business goals.
Eyebrow--fs-eyebrow
13px · 600 · tracked caps
West Dennis · Cape Cod, MA
The signature device — italic emphasis in tide
Practical AI for Cape Cod businesses.
Spacing

An 8px base scale.

Generous, consistent rhythm. Tokens --space-1 through --space-10.

--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-5 · 24px
--space-6 · 32px
--space-7 · 48px
--space-8 · 64px
--space-9 · 96px
--space-10 · 128px
Radii

Soft, rounded corners.

16px is the default card radius; pills for buttons and chips.

--radius-sm8px
--radius-md12px
--radius-lg16px
--radius-xl24px
--radius-pill999px
Elevation

Soft, long, deep-sea shadows.

Low-opacity ink-tinted shadows over wide blur radii — never hard drops. Hover presses elements down, not up.

--shadow-smsubtle lift
--shadow-mdcards (default)
--shadow-lgraised / focal
--shadow-ctatide CTA
Motion

Gentle, never bouncy.

Hover any card to see the easing. Reveals fade up on scroll; press states settle 1–2px down.

Ease-out
--ease-out · cubic-bezier(.22,.61,.36,1)
Ease-soft
--ease-soft · cubic-bezier(.4,0,.2,1)
Durations
--dur-fast160ms · hovers
--dur-base280ms · transitions
--dur-slow560ms · reveals
Components · Buttons

Tide pill, ink ghost.

Primary actions are a tide pill with a soft shadow; ghost buttons are an ink outline that fills on hover.

See how it works My work Hover to see the press-down state.
On dark
Book a call Read more
Components · Chips & cards

Credentials, tags, and surfaces.

Chips
Director of Build Engineering Drupal CMS Committer International speaker Airbnb Superhost Cape Cod washashore
Cards & door color-coding
Professional

Engineering & web

Night Harbor accent — the engineering door.

AI Services

Practical AI help

Tide accent — the local-AI door.

Rentals

Stay on the Cape

Seafoam accent — the rentals door.

Motifs

The coastal texture.

Recurring marks that keep the cool palette human, not corporate.

Maker's seal Maker's seal
Depth-sounding contours
Wave divider
Paper grain (≈4%)
Iconography

Phosphor, regular weight.

Sparse, line-weight icons sized to the text and tinted with the section accent. Brand marks (WordPress) come from local SVGs masked to currentColor.

ph-compass
ph-sparkle
ph-house-line
ph-anchor
ph-arrow-right
ph-check-circle
ph-map-pin
ph-umbrella
ph-envelope
ph-rss-simple
ph-medal-fill
ph-github-logo
ph-linkedin-logo
ph-drop
ph-list
ph-arrow-up-right
Voice & tone

Warm, plain-spoken, no hype.

First person, sentence case, no emoji. The throughline echoes everywhere: bridging technology and real business goals.

Do

Speak like a knowledgeable neighbor. Lead with the outcome."Win back the hours you spend on busywork."

Don't

Reach for jargon, buzzwords, or breathless hype."Leverage AI-powered synergies to 10× your funnel."

Do

Be honest about limits — it builds trust."I'll tell you when AI isn't the answer."

Don't

Use ALL CAPS for emphasis (reserve tracked caps for eyebrows) or pile on exclamation points."BOOK NOW!!!"

Copied