Design process for a portfolio redesign — wireframe, type scale, colour tokens with defined roles, a project card component in three states, and the composed hero.

The point of the file is the reasoning, not the screens. Every element is linked to a named style rather than a one-off value, so a change to the type scale propagates rather than needing to be chased. Colours are defined by role — base, surface, primary text, secondary text, and two accents with one job each — which is what stops a palette drifting as a project grows.

The final frame carries a written rationale for what changed between wireframe and hero: why the availability pill moved, why the headline holds a fixed measure, why chips wrap rather than shrink at narrow widths, and why only one button is filled.