# Travis Rea portfolio — design system

> Machine-readable design system for [travisrea.com](https://travisrea.com).  
> Human-readable UI: [https://travisrea.com/system](https://travisrea.com/system)  
> Source tokens: `assets/css/main.css` (`:root`)

**Version:** 2026-07 portfolio redesign  
**Owner:** Travis Rea  
**Intent:** Zen-inspired paper canvas + Nord blue accent; lighter forest green ink (not charcoal). Calm, confident, human. Hire-signal craft without looking like a template.

---

## Voice & tone

### Who is speaking
First person as **Travis** on portfolio pages, resume, contact, case studies.  
The **chat widget** is a site assistant (not Travis); it speaks about him in third person.

### Principles
1. **Human first** — sound like a sharp colleague, not a corporate deck or an LLM.
2. **Concrete over abstract** — “operators rebuilt questions from email” beats “optimized workflows.”
3. **Honest gaps** — missing evidence stays a gap; never invent metrics or employers.
4. **Warm dry humor** — light, rare; no mean jokes, politics, or forced wit.
5. **Short sentences mixed with longer ones** — conversational, still professional.
6. **Contractions** — I’m, I’ve, don’t, won’t when it fits.

### Words we prefer
| Prefer | Avoid |
|--------|--------|
| I designed / I shipped | Leveraged, spearheaded, facilitated synergies |
| Plan partners, provider offices, call center | Stakeholders (alone), users (when you know the role) |
| Gaps stay gaps | Seamless, end-to-end transformation |
| Working prototypes | Ideation decks, slideware |
| Human-in-the-loop | Black-box AI, magic |
| Dense ops tools | Complex solutions |

### Do / don’t examples
**Do:** “Operators used to rebuild the same claim questions out of email and chat.”  
**Don’t:** “We revolutionized the claims inquiry paradigm with AI-powered synergy.”

**Do:** “Leave a message and I’ll reach out.”  
**Don’t:** “Your submission has been queued for processing by our contact API.”

**Do:** “Read the story →”  
**Don’t:** “Learn more about our innovative case study methodology.”

### Case study structure (default)
1. Lead in plain language (problem → outcome hint)  
2. CaseMeta (role, team, when, impact)  
3. Problem with scenes + quotes when real  
4. Research block  
5. What I owned  
6. Approach (hypothesis / goal)  
7. Results  
8. Why this still matters  

### Contact form voice
- Leave a message; I’ll reach out.  
- Success: “Got it — thanks / I’ll take a look and reach out soon.”  
- No “reply-to” or vendor-API jargon.

---

## Color

### Surfaces
| Token | Value | Use |
|-------|-------|-----|
| `--bg` | `#f2f0e3` | Page canvas (paper) |
| `--bg-elevated` | `#faf8f0` | Cards, panels |
| `--bg-muted` | `#e8e5d6` | Muted fills, stage dots |

### Ink (forest green, not black)
| Token | Value | Use |
|-------|-------|-----|
| `--ink` | `#2f4f3e` | Primary text, primary buttons |
| `--ink-soft` | `#4a6b58` | Body secondary |
| `--muted` | `#6d8a79` | Hints, captions |
| `--faint` | `#9aafa3` | Disabled / faint labels |

### Lines
| Token | Value |
|-------|-------|
| `--line` | `rgba(47, 79, 62, 0.12)` |
| `--line-strong` | `rgba(47, 79, 62, 0.18)` |

### Accent (Nord frost blue)
| Token | Value | Use |
|-------|-------|-----|
| `--accent` | `#5e81ac` | Links hover, focus rings, accents |
| `--accent-soft` | `#e5eef6` | Soft chips, selection bg |
| `--accent-text` | `#3d5a80` | Text on soft accent |

### Semantic tags
| Token | Fill | Text |
|-------|------|------|
| Sage | `--sage` `#e5efe8` | `--sage-text` `#3d6b52` |
| Sand | `--sand` `#f5edd4` | `--sand-text` `#7a5a20` |
| Rose/frost | `--rose` `#e5eef6` | `--rose-text` `#3d5a80` |

### Selection
```css
::selection {
  background: var(--accent-soft);
  color: var(--accent-text);
}
```

---

## Typography

| Role | Family | Token |
|------|--------|-------|
| Display / titles | Instrument Serif | `--font-serif` |
| UI / body | Manrope | `--font-sans` |
| Labels / code | IBM Plex Mono | `--font-mono` |

### Scale (site defaults)
- Base: `16px`, line-height `1.6`
- Section title: serif, clamp-based large display
- Section label: mono, uppercase, tracked, small
- Body: Manrope 400/500/600/700
- Avoid pure black body text; use `--ink`

### Hierarchy rules
1. Serif for emotional/display titles  
2. Mono for meta labels (section eyebrows, stage legends, form field labels)  
3. Sans for everything interactive and long-form body  

---

## Layout & spacing

| Token | Value | Use |
|-------|-------|-----|
| `--max` | `1120px` | Content max width (`.site-shell`) |
| `--radius-sm` | `8px` | Small controls |
| `--radius` | `12px` | Default cards/inputs |
| `--radius-lg` | `20px` | Large panels |
| `--section-eyebrow-to-title` | `0.75rem` | Label → title |
| `--section-title-to-content` | `1rem` | Title → lead |
| `--section-lead-to-content` | `2.5rem` | Lead → content block |
| `--ease` | `cubic-bezier(0.16, 1, 0.3, 1)` | Motion |
| `--shadow-soft` | soft green-tinted elevation | Cards |

### Shell
`.site-shell` — horizontal padding + `width: min(100% - gutters, var(--max))` centered.

### Section pattern
```
.section-label   (mono eyebrow)
.section-title   (serif h1/h2)
.section-lead    (ink-soft intro)
content…
```

---

## Components

### Buttons
- `.btn` base  
- `.btn-primary` — ink fill, paper text  
- `.btn-secondary` — outline / elevated  

### Tags & pills
- `.tag` / `.tag-impact` / `.tag-ai` — case study chips  
- `.pill` / `.pill-core` — skills  

### Cards
- Work cards, skill cards, process steps, contact cards  
- Border `var(--line)`, radius `var(--radius-lg)`, soft shadow  

### Case studies
- `.case-shot` figures with figcaptions  
- `.case-quote` for research quotes  
- `.case-meta` dl for role/team/when/impact  
- CRT treatment (`.case-crt`) only for legacy modernization hero — transparent PNG, no black plate  


### Forms (contact)
- Mono uppercase labels  
- Elevated inputs, accent focus ring  
- Errors: soft rose background + `#9a3f32` text  
- Honeypot field off-screen  

### Chat widget
Separate stylesheet: `assets/css/chat-widget.css` — same tokens, denser chrome.

### Navigation
- Desktop links + mobile drawer  
- `.nav-cta` solid ink pill → `/contact`  

---

## Motion & accessibility

- Reveal on scroll (`.reveal`) unless `prefers-reduced-motion`  
- Focus visible: `3px solid var(--accent)` offset 2px  
- Skip link present  
- Never remove outlines globally without `:focus-visible` replacement  
- Reduced motion: kill transitions/animations; force reveal visible  

---

## Content surfaces for LLMs

| URL | Purpose |
|-----|---------|
| https://travisrea.com/llms.txt | Site index for AI crawlers |
| https://travisrea.com/resume.md | ATS resume |
| https://travisrea.com/design-system.md | This file |
| https://travisrea.com/system | Visual design system |

When generating copy for this portfolio, follow **Voice & tone** above. When generating UI, use the **CSS tokens** listed—do not invent a new palette or swap serif/sans roles.

---

## Anti-patterns

- Dark charcoal/black as primary ink  
- Generic purple AI gradients  
- Em-dash spam and “As an AI…” phrasing  
- Fake progressive stage theater without real pipeline stages  
- Stock corporate photography as the only product proof  
- Claiming the Ayin marketing site (not owned / superseded)  

---

## Changelog (design system page)

- **2026-07:** Initial system page + markdown export for portfolio redesign (paper + Nord + forest ink, voice rules, case structure).