A Portfolio-Driven Design System

01 / Design character

The system should feel refined, warm, and guided by consistent judgment.

It organizes the tokens, shared components, and case-study patterns used across the portfolio into clear rules, so each screen can keep a steady rhythm while preserving the character of each project. From color and spacing to component boundaries, every adjustment has a reference point to check against.

RefinedWarmStable with character

02 / Design principles

01

Set the character before decoration

Define the tone first: refined, warm, and stable with character. The home page uses cursor tags and sticky notes for character instead of piling on effects.

02

Colors change, the frame holds

Each case study can carry its own tone, but cards, information architecture, and layout stay consistent. The three case-study pages share one pattern and only swap the `tone-xxx` layer.

03

The main actor stays obvious

Purple stays reserved for CTAs and active states instead of large surfaces, so interviewers keep their attention on the work itself.

04

Interaction adds meaning, not spectacle

Motion has a job. Home and About use entrance animation to feel alive; case-study pages stay restrained so the work remains the focus.

05

Density still needs room to breathe

Even dense case-study pages keep a baseline of breathing room, including at least 24px of text padding. Dense information should not feel cramped.

06

Design must be catchable by engineering

Colors, type, and spacing have token names so one change can propagate across the site. The handoff is maintainable specification, not just a static image.

07

Every reachable state deserves design

Hover, active, focus, and disabled states are designed. Unpublished work uses disabled styling so people do not mistake it for a clickable case.

03 / System architecture

Two-layer architecture

Not every repeated-looking layout should become a shared component. The reusable layer holds tokens, stable shells, and contracts; route-local geometry stays close to the story it explains.

Layer 01

Reusable system layer

This includes runtime tokens, UI primitives, navigation, project-card behavior, and case-study shells such as cards, grids, media, section headers, and before / after frames.

Layer 02

Local storytelling layer

Flow diagrams, matrices, connector endpoints, scenario boards, and media crop rules can stay local when their geometry carries the case-study story.