Style Guide

Design tokens, type scale, and reusable components for the portfolio.

Typography
Headings, body text, captions, and utility type.
H1

Heading One

H2

Heading Two

H3

Heading Three

H4

Heading Four

H5
Heading Five
H6
Heading Six
Body

The quick brown fox jumps over the lazy dog. Design decisions affect millions of users and hundreds of millions in revenue.

CaptionSource: Trey Hardin portfolio, 2026
UtilityCATEGORY / SECTION
Buttons
Primary, secondary, and ghost variants.
Primary
Secondary
Ghost
Badges
Small labels for categories and status.
DefaultAccentDesignEngineeringBrand
Inputs
Text fields, textarea, select, checkboxes, and radio buttons.
Accordion
Expandable content panels.

I start by understanding the problem space, then move through research, ideation, and iterative prototyping. Every decision is grounded in user needs and business constraints.

I collaborate directly with engineers from the start — designing in code when possible, building design systems that ship as production components, and ensuring handoff is seamless.

Figma for design, GitHub for version control, and a mix of modern web frameworks. I prefer tools that integrate directly into the development workflow.

Divider
Horizontal rule for content separation.

Content above the divider.


Content below the divider.

Cards
Compound components for case studies and projects.
Case Study

Ecommerce Redesign

Leading a complete redesign of the checkout experience, resulting in a 12% increase in conversion rates.

Project

Design System

Building a scalable component library used across 14 product teams and 3 platforms.