Home

Style Guide

Every font, text style, color, button and spacing step the new pages use, drawn with the site’s own live styles. The gray line under each name is measured as you view it, so it changes with the screen size.

Fonts

Headlines

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ! ? . , “ ” ’

Instrument Sans SemiBold 600

Instrument Sans Medium 500

Instrument Sans Regular 400

Approved exception (Markup #63): lines 2 and 3 of the About H1.

Body

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ! ? . , “ ” ’

Inter Regular 400

Inter Medium 500

Inter SemiBold 600

Inter Bold 700

Colors

Cobalt BluePrimary buttons, blue subheads, tags
InkText on white, secondary button stroke
BlackBlack sections, header, footer
WhiteWhite sections, text on black
Gray InkLedes and card text on white
Light GrayLedes and body text on black
Mid GraySmall text and eyebrows on black
Sky BlueRotating role line in the Home hero
Line GrayDivider lines
TintTint sections (Pitch the Big Idea, FAQ, Let’s Schedule Something!)
MistWork Side section on About
Cobalt DeepHover color on blue tags and Site Map links

Headings

H1Page Hero

What I Do.

H1Case Study Hero

Turning an Email Campaign Into an Entire Customer Experience

H1Hero H1, Long HeadlineApproved second H1 size (Markup #81–#84). Home’s size rule: clamp(2rem, 1.5rem + 2vw, 3.1rem), about 32px on phones up to 49.6px on desktop.

You Could Hire a Different Creative Director.

H1About HeroLines 2 and 3 use Instrument Sans Regular 400: approved exception (Markup #63).

Designer by Trade. Collector by Nature. Rookie’s Favorite Human.*

H1Legal Page Title

Privacy

H1Résumé Name

Parker Lee

H2Section Heading
H3Card Title

Brand

H3Question
What creative services do you offer?
H3Blue Subhead

See a Time You Like? It’s Yours.

H4Small Title

Production & Martech Manager

NUMBig Stat Number
15

Paragraphs

P1Lede

Pssst. Here’s the good stuff! Websites, logos, photography, and some seriously clever automations. A little bit of everything, with plenty of creative problem-solving along the way.

P1Pull Quote

Bales asked for another round of emails, but the bigger problem was everything happening between orders. I led a customer-experience overhaul that connected research, website design, sales tools, and automation, giving customers clearer answers and the sales team better reasons to follow up.

P2Body

I found the real brief by walking the plant with my DSLR and following a customer’s part through intake, coating, and shipping. Conversations with sales, shipping, and company leadership exposed the gaps: buyers struggled to compare coatings, wanted updates on their parts, and needed help knowing when to return. I mapped the current and proposed journeys in FigJam, turning disconnected frustrations into a plan the client and our team could work through together.

P3Review Quote
Carrie CeresaSr. Art DirectorRed Caffeine

I had the pleasure of working with Parker Lee at Red Caffeine for four years, and he is one of those rare creative professionals who combines his love for technology and design with reliability, kindness, and a genuine commitment to his team.

P3Stat Text

Improved search rankings through SEO, site optimization, and better usability.

P4Card Text

More Than a Logo. Built to Last.

P5Small Text
  • Websites, logos, and campaigns, from bakeries to B2B + a few billion-dollar brands.

Labels

LABELEyebrow
LABELEyebrow, Blue

A LITTLE ABOUT ME

LABELBlue Tag
LABELBreadcrumb
LABELBlue Card Line

More Than a Logo. Built to Last.

Buttons

One shape, font and size. Color, and stroke or fill, can change.

BUTTONSecondary, Stroke
BUTTONPrimary, Fill
BUTTONPrimary, White Fill
BUTTONSecondary, Stroke

Filter Chips

CHIPOn
CHIPOff

Form Fields

FIELDText Field
FIELDMessage Box

Spacing

The spacing steps and page width the new pages are built on. Bars are drawn at their live size.

S1
S2
S3
S4
S5
S6
S7
S8
Section Top and Bottom
Side Margin
Page Width