Style Guide

The design system behind this site.

Every site I build comes with a living style guide like this one. It is a plain record of the colors, type, spacing, and patterns that make up your brand, and it stays up to date as the site evolves.

Colors

A restrained palette: deep navy as the foundation, warm gold for accent, and a full text scale tuned for WCAG AA contrast on both light and dark surfaces.

Brand

Navy 900#0A1F44

Navy 950#05102A

Navy 700#1B3C7E

Gold 500#BE9018

Gold 400#DDB13D

Gold 300#EBCD6D

Surfaces

Paper#FFFFFF

Cream#FBF7EE

Mist#F1F4FA

Text

Text#10172A · 17.2:1 AAA

Text muted#4A5463 · 7.4:1 AAA

Text soft#64707E · 4.8:1 AA

Typography

Playfair Display for display headings, Inter for body and UI. Fluid type scale using clamp() for responsive sizing.

Display · Playfair Display, 700

A website you can rely on.

H2 · Playfair Display, 600

Common questions, answered straight.

H3 · Playfair Display, 600

I handle the whole website.

Body · Inter, 400

Every site is custom-coded from scratch. No WordPress, no page builders, no AI templates. Every site loads fast, scores high on Google PageSpeed, and stays secure because there is nothing to patch.

UI label · Inter, 700

Section label example

Buttons

Minimum 44Ã, 44px target, visible focus ring, and verified WCAG AA contrast on every state. Rule of thumb: hover darkens primary buttons, inverts outline buttons, and never reduces contrast.

Primary (default call-to-action)

Navy background, white text. On hover: deeper navy, text stays white. Used on all "Start a Conversation" CTAs on light sections.

Default Hover Default (large)

Gold (on dark surfaces)

Gold background, navy text. On hover: lighter gold, navy text stays. Used inside navy hero sections and CTA bands. Text is always navy, never white; white on gold fails contrast.

Default Hover

Outline (dark)

Transparent background with navy border and navy text. On hover: navy fills in, text flips to white. Used as a secondary CTA on light sections.

Default Hover

Outline; light (on dark)

Transparent with a white border. On hover: subtle white tint fills in, text stays white. Used inside hero and CTA bands.

Default Hover

Ghost (tertiary)

No background or border. Used inline for low-emphasis links that still need a click target.

Default Hover

Contrast rules

Text vs. background: always 4.5:1 or better (AA normal text); 3:1 minimum on large display text.
Hover states never reduce contrast below the default state.
Navy buttons in the global nav must NOT inherit the nav-link hover background; nav-link hover is scoped to a:not(.btn).
Gold buttons always pair with navy (not white) text. Navy buttons always pair with white text.
Focus state is an outlined gold ring with 3px offset on every button.

Components

A sample of the components that show up across the site.

Card

Default surface with subtle hover elevation.

Form input

Badge

WCAG AA Mobile-first

Spacing & layout

Spacing uses a rem-based scale, and section padding is fluid: clamp(4.5rem, 8vw, 7rem). Maximum content widths: 1200px (wide), 780px (narrow), 68ch (prose).

Accessibility

Visible focus rings using the gold accent, skip link that appears on focus, semantic landmarks, reduced-motion respected. See our accessibility statement for full detail.

Want this for your brand?

Every site ships with its own style guide.

Documented colors, type, spacing, and components, so when you hire someone to design a flyer or a truck wrap, they have a clear reference.

Start a Conversation See What's Included