V1.0

design system

Foundations, content standards, and components behind all my materials.

color

An editorial palette inspired by '90s Vogue.

ink
#141210
Text, rules, dark sections, footer
accent
#C8102E
Drop caps, eyebrows, key phrases, stats
gloss
#FAFAFA
Page background, headers on ink
ink brush
#5E574D
Secondary text, labels, captions
muted
#8A8378
Struck-through options, inactive tabs
almond
#D9D3C8
Dividers in rows and cells, mono text on ink
cream
#F6F3EE
Secondary panels, body text on ink
placeholder
#F2F2F2
Image wells, UI strings
typography

Didot speaks, Jost explains, and Plex Mono labels.

display
Didot → Bodoni Moda
96 / 1.0 · −1.5%
Page titles, stats; always lowercase
work
84 / 0.9 · −1.5%
Work sections, homepage only
title
72 / 0.85 · −3%
Case study titles
heading
48 / 1.05 · −1%
Sections and footer
thesis with impact
36 / 1.0 · −1%
Opens every study
subheading
32 / 1.1 · −1%
Subsections, role statements
row heading
28 / 1.1
Rows in lists, tables, and term grids
cell heading
24 / 1.15
Table cells, verdicts, and indexes
Body
Jost · 17–19 / 1.55–1.7
Body text everywhere
Small body
14–16 / 1.45–1.5
Notes, descriptions
eyebrow
Jost 600
12 / +18%
Accent, uppercase
eyebrow
Jost 600
11–12 / +16%
Ink brush, uppercase
Label
IBM Plex Mono · 11–12 / +8%
Uppercase, sometimes accent
Label
14–15 / +8%
UI strings
grid and spacing

Twelve columns at 1440, with 80px margins and 32px gutters. Sections breathe at 96px, and everything inside steps down from there.

1
2
3
4
5
6
7
8
9
10
11
12
8
16
24
32
48
64
96
8 to 32 inside components.
48 and 64 between blocks, 96 between sections.
calls to action
ON GLOSS
internal
Dive in →
To portfolio pages
Ink, underline, arrow
external
LinkedIn
Outside the site
Ink, underline, no arrow
hover
linkedin
Accent, underline included
On ink
internal
Dive in →
To portfolio pages
Cream, underline, arrow
external
LinkedIn
Outside the site
Cream, underline, no arrow
hover
LinkedIn
Accent, underline included

content standards (of course!)

headers are editorial
They say what happened, so you don't miss a thing if you skim.
Do
exceeding expectationshow it landed
Don’t
02. ProblemResults
proper nouns keep their case
Product names stay capitalized, save for headers.
Do
MomentsQualtrics Assist
Don’t
weekly job summarydesign assist
sentence case everywhere else
Body, CTAs, and captions read like a person talking.
Do
Read →Dive in →
Don’t
Read MoreClick Here
numbers are real and specific
Deltas say what they’re measured against.
Do
+49.3% vs control151.5M+
Don’t
~50% bettermillions
quotes credit a role
Role attribution keeps focus on the work and respects privacy.
Do
— Senior Product Designer, Company
Don’t
— A coworker

components

Building blocks making up each study.

Case study hero
Eyebrow, counter, title, and a four-part meta row. No hero image by design.
EYEBROW
01 / 05
title
SCOPE
Content, product, model design
COMPANY
In Writing Mode
FOR
You ☺︎
WITH
A team of one
Drop cap opening
The red lead hooks you in.

Lorem ipsum dolor sit amet consecteur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Stat
Red Didot in 96–120pt, with a relevant explanation.
9 → 5
what a way to make a livin'
Role statement
Follows the opening. Red italic for the scope.

I led end-to-end content design for
scope, scope, and more scope.

Quote
The smart quote stays red in gloss and in ink.
Where I come from, a woman met a man, had babies, moved to Dagenham, two up two down, made the dinner, went to bed. That was my image of women and I didn’t want that. I wanted to get that out of my head.
— ALEXANDER MCQUEEN
Guideline anatomy
For guidelines, test plans, and any labeled spec.
Principle
Be a heartbreaker
INSTRUCTION
Rule #1: You gotta have fun.
Do
Be the first to run
Don’t
Get attached
(bonus if you know where this is from!)
Then and now
Strikethrough = cut. + red = added. Plain = kept.
item
Lorem ipsum dolor sit amet
+ item
Consectetur adipiscing elit
item
Sed do eiusmod tempor
Carousel controls
On gloss and on ink. Fills solid on hover.
01 / 02
02 / 02
Figure + caption
Captions say what’s shown in bold + italic.
The end of all things, fin
Up next
Ends every study. Rests above the footer.
NEXT
title
Read →