Hidden in plain sight
Design system
The same tokens, type, and voice that power travisrea.com—documented for humans, with a markdown twin for tools that prefer plain text.
01 · Voice & tone
Sound like Travis, not a template
First person on the portfolio. Concrete over abstract. Warm, dry humor sparingly. Honest gaps. The chat widget is an assistant—it talks about Travis, not as Travis.
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
02 · Color
Paper, forest, frost
Surfaces are warm paper. Ink is lighter forest green—not charcoal. Accent is Nord-family blue for focus, links, and soft chips.
03 · Typography
Three families, clear jobs
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
04 · Components
Live pieces from the site
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 enough
Mocks, prototypes, eng early; sometimes code.
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)
05 · Layout
Shell, rhythm, radius
Shell
--max: 1120px via .site-shell. One content width for nav, body, footer.
Section rhythm
Label → title → lead → content. Tokens: --section-*-to-*.
Radius
8 / 12 / 20px for controls, cards, large panels. Soft green-tinted shadows.
06 · Motion & a11y
Calm motion, hard focus
--ease: cubic-bezier(0.16, 1, 0.3, 1)for transitions- Scroll reveal (`.reveal`) disabled under
prefers-reduced-motion - Focus ring: 3px
var(--accent), 2px offset - Skip link, never strip outlines without
:focus-visible
07 · For models
Consume the markdown
Prefer structured sources over scraping random HTML. This system ships as a first-class markdown file so agents can cite tokens and voice rules accurately.
- design-system.md — full tokens + voice (this system)
- llms.txt — site map for AI crawlers
- resume.md — ATS resume