corner image

Style Guide

A small reusable system for the portfolio: tokens, components, layout rules, and interaction patterns.

v1

Why it exists

I organized the portfolio into a lightweight interface system so the same visual decisions can repeat with more intention.

The goal is not to turn the site into a large product library. It is to document the reusable parts that already shape the portfolio: quiet navigation, restrained cards, direct labels, modal storytelling, and small motion details.

Color Tokens

Neutral by default, with project color living inside the work itself.

Text Primary #000000
Text Muted rgba(0,0,0,.46)
Line Soft rgba(0,0,0,.16)
Paper #ffffff

Typography

Space Grotesk carries the site voice. DM Mono is reserved for labels, counts, and system notes.

Section title

Work

Statement

Interfaces should feel alive through layout, motion, and small useful details.

Mono label

SELECTED WORK / 04

Components

Reusable pieces from the live portfolio, shown with the same spacing and interaction logic.

Tag / Pill

Metadata
UI/UX Front-end Motion

ProjectCard

Work grid

Case Study Layout

The modal pattern pairs a fixed project summary with a scrollable story area.

Funfetti Events illustrated celebration scene

The approach

Organize the story around customer goals: understand services, browse setups, estimate needs, and contact the business.

System Notes

Reusable decisions behind the interface.

Spacing
Large page padding, compact component gaps, and open space around work previews.
Radius
Mostly square and low-radius surfaces so the site stays direct and portfolio-like.
Motion
Navigation text rolls, cards lift slightly, modals fade/slide, and fullscreen layout transitions smoothly.