stuart.re

A product designer's one-page portfolio built as a quiet white gallery wall: everything the page itself owns is neutral (white ground, black ink, mid-gray secondary text, Inter at 15px/-0.25px), so the only color on screen comes from the work. Each project is a three-column row: a light-gray year range hanging in a left gutter, a stack of large 12px-radius media frames in the center, and a sticky right rail with an app-icon tile, company name, role in gray, a two-line blurb and a tiny sky-blue "Open" pill. A dark floating dock of company logos is pinned to the left edge like a macOS Dock, and a handwritten signature floats off to the right of the intro. The result reads like a product changelog of a career: calm, dense with real UI, and confident enough to let Raycast's red streaks, Attio's painted landscape and Mora's grid-construction logo do all the talking.

Design a single-column portfolio or case-study page on pure white (#ffffff) with near-black ink (#000000 for type and the primary button, #15080d for dark chrome). Keep the page itself colorless: secondary text in mid-gray (#6b6b6b-ish), tertiary labels like dates in light gray (#b6b8b9), hairlines in #d3d4d4. Let the showcased work supply all the color.

Type: Inter throughout. Body 15px/20px weight 400 with -0.25px tracking; names and section labels 20px semibold with slight negative tracking; intro tagline ~20px medium in gray, two short lines; small labels 13px/600. No display sizes — hierarchy comes from weight and gray value, not scale.

Layout: a three-track grid — a narrow left gutter (~120px) for right-aligned metadata like years, a wide center column (~850px) for media, and a ~240px right rail for an icon tile, title, role in gray, a two-line description and one small link. Put a floating vertical dock (64px wide, #15080d-ish fill, 16px radius, soft 0 10px 30px shadow) fixed at the left edge as a jump index of white monochrome logos.

Shapes: radius scale 6px (pills, small tiles), 10px (buttons), 12px (media frames, icon tiles), 32px reserved for rare large surfaces. Media frames stack with an 8px gap and no border or shadow.

Controls: primary button solid black, white 13–14px medium text, 8px 16px padding, 10px radius; secondary as a light-gray fill (#f2f2f2) with a 1px #e5e5e5 border and gray text. Outbound links are tiny tinted pills — pale sky fill (#e0f2fe-ish) with saturated blue (#0a8fd6-ish) 13px/600 text and a northeast arrow; that blue is the only UI hue, so use it for nothing else.

Personal touches: a halftone or duotone avatar in a 64px circle, a thin handwritten signature floated loose in the intro's white space. Present product screenshots on textured, painterly backgrounds rather than flat gradients or device frames. Spacing is generous between projects (~120px) and tight within one.