Portfolio design system
Every color, type style, spacing value, and component used to build the site, documented in one place so future changes stay consistent.
Source: the live portfolio
Color tokens
Nine tokens drive every color on the site. Swatches follow the theme toggle above: use it to compare both.
dark #000000
dark #0B120E
dark #111A14
dark rgba(232,255,241,.3)
dark #E8FFF1
dark #7FA08B
dark #39FF88
dark 15% alpha
dark #7E91A0
Typography
Three families, each with a fixed job, never mixed.
Bricolage Grotesque
Archivo
JetBrains Mono
Font size scale
| Size | Family | Used for |
|---|---|---|
| 2.6rem – 5.4rem (clamp) | Display | Hero title |
| 2rem – 2.75rem (clamp) | Display | Case study title |
| 1.7rem – 2.5rem (clamp) | Display | Section heading (h2) |
| 1.3rem (clamp top) | Body | Hero pitch |
| 1.15rem | Display | Card, timeline & process title (h3) |
| 1rem | Body | Base body text · metric numbers (mono) |
| .95rem | Mono | Contact link · logo |
| .9rem | Body / Mono | Card, process & timeline descriptions · cm-meta value |
| .85rem | Mono | Button label · nav links · marquee · screenshot caption |
| .75rem | Mono | Timeline period · status pill · role label · clock · footer |
| .7rem | Mono | Eyebrow · metric label · chip · tag · side rail |
Line height
| Value | Used for |
|---|---|
| 1 | Tight display headings: hero title, contact panel heading |
| 1.6 | Reading text: base body copy, card & timeline paragraphs |
| 1.9 | Boot-log terminal sequence (deliberately airy) |
Spacing scale
An 8pt scale. Every padding, margin, and gap in the site is one of these eleven values.
Buttons
Hover the button.
Chip
Used for the case-study tag overlay on card covers and modal covers.
Badge
The "Open to new opportunities" status pill in the hero. The dot pulses on a loop.
Link
Used for the contact section. Underline turns accent-colored on hover.
Tag
Used in the tech-stack row under each Recent work card.
Card
Used for the four Recent work entries. Cover uses a dotted texture over a diagonal gradient; hover lifts the card and scales the cover.
Multichannel campaigns
Designed the workflow builder that lets reps launch outreach across channels from a single campaign.
List row with arrow
Used for "How I work" and "Experience". On hover the body slides right 16px and a left-pointing arrow nudges in a loop for as long as the row is hovered.
Discovery & research
User interviews and a heuristic audit before the first mockup.
Architecture & flows
Journey mapping and low-fidelity wireframes to validate structure.
Cursor-follow glow
The same effect on the hero, contact panel, playground, and modal cover: a 280px radial gradient centered on the cursor, blended with multiply (light theme) or screen/soft-light (dark theme, for visibility against near-black). Move your cursor over the panel.
Move your cursor here
Same panel used for the Playground tool grid and the contact block.
Tool tile
Used inside the Playground panel: icon, name, border lift on hover.
Case study modal
Cover (dotted texture, tag), a macOS-style wireframe frame for screenshots, and a quote block with a left accent rule.
Reps stopped juggling five tabs to build one sequence.Illustrative outcome
Motion reference
Every named animation on the site, with its timing. All respect prefers-reduced-motion.
| Effect | Where | Timing |
|---|---|---|
| Cursor-follow glow | Hero, contact, playground, modal cover | 280px radius (220px on hero) · opacity .3s ease |
| Modal iris reveal | Case study open | clip-path circle · 2s cubic-bezier(.16,1,.3,1), from click point |
| Ring flash | Case study open | border grows to 300vmax, fades · 2s |
| Arrow nudge loop | Process & timeline rows, on hover | 1.1s ease-in-out infinite |
| Terminal caret blink | Hero title, boot log | 1s step-end infinite |
| Marquee scroll | Skills ticker | 32s linear infinite |
| Status dot pulse | "Open to new opportunities" pill | 2.4s ease-in-out infinite |
| Custom cursor | Whole page (desktop, fine pointer) | dot + ring, scale/color shift near interactive elements |
Icons
Hand-drawn inline SVGs, 2px stroke, round caps, no icon library.