Capital One
Seven years across enterprise design and strategy
Senior Manager · Principal Strategist · 2015 to 2022
§00 · About this page
Colophon.
Type, color, components, motion. A few notes on the visual system this site is built from. The page itself is rendered with the same React primitives it documents, so anything that changes here propagates everywhere else.
§01 · Type
Fraunces for display, Inter for body. Both variable, both served via next/font.
Display · Fraunces
clamp(3rem, 9vw, 7.5rem)
A magazine that occasionally surprises.
H1 · Fraunces
clamp(2.25rem, 5vw, 4.5rem)
Considered, opinionated, hand-built.
H2 · Fraunces
clamp(1.75rem, 3vw, 2.75rem)
What I did. What changed because of it.
H3 · Inter Medium
1.25rem · 500
Section heading inside a case study
Eyebrow · Inter
0.75rem · uppercase · tracking-[0.2em]
Director of Product Design · Koalafi
Lede · Inter
1.25rem · ink-soft
The first paragraph of a case study. A little larger, a little looser. Sets the tone before the dense detail starts.
Body · Inter
1rem · ink-soft
The default reading size. When I joined Koalafi, the design team was three people supporting a product that had grown faster than the org around it. The first ninety days were less about design and more about figuring out which of the things on fire were actually fires, and which were people pointing at smoke.
Small · Inter
0.875rem · muted
Captions, footnotes, metadata.
§02 · Color
Warm neutrals, ink rather than pure black, one bold accent in Moss, with Clay as a supporting warm.
Neutrals
Bg
#FAF7F1
Bg alt
#F1EBE0
Divider
#E5DCCC
Muted
#8A827A
Ink soft
#3D3833
Ink
#141210
Palette
Moss
#44563D
Clay
#A8654A
§03 · Components
The few primitives the site is built from. Restrained. Bold lives in type and color, not in chrome.
Links
Inline text with a link inside it reads as part of the prose.
Buttons
§04 · Work card
How a project lists on the homepage. Sample projects below; the real ones live on the homepage.
Dave
Building product verticals at consumer fintech scale
Head of Product Design Verticals · 2022 to 2023
§05 · Case study hero
The hero block on each case study page. Some will be image-led, some all-type, depending on the project.
teaser image · 16 : 9 · optional
Case study · Koalafi · 2023 to present
Reframing lease-to-own as a respected product.
The first ninety days were less about design and more about figuring out which of the things on fire were actually fires.
- Role
- Director, Head of Product Design
- Team
- TBD
- Dates
- 2023 to present
- Angle
- Impact + team
§06 · Motion
Short. Snappy. Eased. No bounce, no springs, no decorative motion. One or two moments of obvious craft per case study, not throughout.
2.4s · ease-in-out · infinite. The shape of the curve, not the speed.
- Hovers: 150 to 200ms, ease-out. Hover any link or work card above to see the cadence.
- Page transitions: 300 to 400ms, ease-in-out. Direction-aware (forward vs back).
- Reveals on scroll: sparse. One per page maximum, on hero content only.
- Type: static. No animated headlines. The type carries the personality.