Portfolio craft
Design system
This is how I keep travisrea.com consistent—color, type, components, and voice. Not a product design system from my day job; the system that runs this portfolio. If you’re a designer or hiring manager, this is a look at the craft decisions behind the site.
01 · Intent
Calm, confident, human
I wanted a site that feels like a thoughtful portfolio, not a template farm or a dark-mode developer blog. Warm paper, forest green ink (lighter than charcoal), and a quiet Nord blue for focus and links. Enough structure that a hiring manager can scan case studies quickly; enough personality that it still sounds like me.
Hire-signal craft
Real product shots, clear roles, honest impact. No fake metrics or stock-photo theater.
Readable density
Healthcare ops work is dense; the portfolio should be scannable without going sparse or cute.
One system
Home, resume, case studies, and contact share the same shell, type roles, and button language.
02 · Voice & tone
Sound like a sharp colleague
Case studies and the about page are first person—I’m Travis. Concrete over abstract. Gaps stay gaps. Light dry humor only when it earns its place. The site chat is a helper about the work; it doesn’t pretend to be me.
Do
- “Operators rebuilt questions from email.”
- “Leave a message and I’ll reach out.”
- “Read the story →”
- I’m / I’ve / don’t when it fits
- Name the role: plan partners, call center
Don’t
- “Revolutionized the paradigm with synergy.”
- “Your submission has been queued by our API.”
- Seamless · leverage · spearheaded
- Em-dash spam or corporate deck voice
- Invent metrics or employers
03 · Color
Paper, forest, frost
Surfaces stay warm paper so long sessions on case studies don’t feel harsh. Body text is forest green, not pure black—softer on the eye, still high enough contrast for reading. Accent is a Nord-family blue reserved for focus, links, and soft chips—not decoration on every surface.
04 · Typography
Three families, clear jobs
Serif for titles that need a human beat. Sans for body and UI. Mono for meta—section labels, stage legends, form field names. Mixing three faces only works if each has a fixed job.
I design dense healthcare software and ship working prototypes.
Body copy stays conversational and professional—like a sharp colleague, not a brochure.
SECTION LABELS · PIPELINE STAGES · FIELD NAMES
05 · Components
Pieces you see across the site
These aren’t a separate library—they’re the same building blocks used on home, resume, and case studies. A few live samples so you can judge spacing, weight, and contrast in context.
Buttons
Tags & pills
Process cards
Find the opportunity
System gaps, design debt, business pain, broken process.
Spend time with people
Stakeholders and end users—wherever the truth lives.
Make it real
Always prove it—Claude Code into working UI people can try.
Test, then ship
Qual feedback, Maze when useful; safe defaults stay.
Form field
Quote
“I spend more time reconstructing the question than answering it.” – Claims analyst interview (composite)
06 · Layout
Shell, rhythm, radius
One content width, one section pattern, three radii. Hiring managers skim; consistency does more work than clever one-off layouts.
Shell
Max width 1120px, shared gutters for nav, body, and footer so the page doesn’t shift as you move between sections.
Section rhythm
Mono eyebrow → serif title → lead → content. Same beat on home, case studies, and this page.
Radius & elevation
8 / 12 / 20px for controls, cards, and large panels. Soft green-tinted shadows—present, not glassy.
07 · Motion & accessibility
Calm motion, hard focus
Motion is secondary to reading. Scroll reveals are subtle and shut off when someone prefers reduced motion. Focus rings stay obvious—accent blue, never removed for aesthetics.
- Easing: a soft out-curve so UI settles rather than snaps
- Scroll reveal disabled under
prefers-reduced-motion - Focus ring: 3px accent blue, 2px offset
- Skip link on every page; outlines only replaced with
:focus-visible