# stuart.re

Source: https://stuart.re/
Captured: 2026-10-09
Tags: portfolio, landing, light, both, minimal, swiss, calm, confident, premium, technical
Colors: #ffffff, #15080d, #520d13, #3b2d2e, #d3d4d4, #998f90, #b6b8b9, #970e19
Type (body): Inter · 15px/20px · 400 · tracking -0.25px — "Your shortcut to everything. Extend your Mac beyond its limits."
Type (small): Inter · 13px/19.5px · 600 — "Open"
Type (button): sans-serif · 12px/normal · 400 — "Get in touch"
Button: "Get in touch" — fill #000000, text #ffffff, radius 10px, border 0px, padding 8px 16px, height 39px, type 12px/400
Radii: 6px (47), 12px (16), 8px (8), 10px (7), 32px (3)

## Images

- Hero (desktop): https://media.lvly.design/library/stuart-re/hero.webp?v=dac1fc2a
- Page crop (mid-1): https://media.lvly.design/library/stuart-re/mid-1.webp?v=829b072c
- Page crop (mid-2): https://media.lvly.design/library/stuart-re/mid-2.webp?v=3d0db2cf
- Hero (mobile): https://media.lvly.design/library/stuart-re/mobile-hero.webp?v=5a678821
- Full page (desktop): https://media.lvly.design/library/stuart-re/full.jpg?v=e484c9e9
- Full page (mobile): https://media.lvly.design/library/stuart-re/mobile-full.jpg?v=3e510b80
- Clip preview (mp4): https://media.lvly.design/library/stuart-re/video-4tlu9n.preview.mp4?v=7841f507

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.

## Steal-worthy details

- Fixed vertical dock of client logos down the left edge: a 64px-wide near-black (#15080d-ish) capsule with ~16px radius, white glyphs stacked at ~56px intervals and a soft drop shadow; it doubles as a jump-to-project index that never leaves the screen
- Year labels set in a dedicated left gutter, right-aligned in light gray (#b6b8b9-ish) at body size, aligned to the top edge of each project's first frame — a timeline without drawing a single line
- Project metadata in a right rail beside the media: 48px white icon tile with a hairline border and 12px radius, 20px semibold name, gray role line, two-line blurb, then a small pale-blue "Open ↗" pill — the same stack repeated for every project, like an App Store listing
- Tiny tinted link pill instead of a button: pale sky fill with saturated blue 13px/600 text and a northeast arrow, ~6px radius, the only blue on the whole page so every outbound link is findable at a glance
- Paired CTAs in deliberately unequal weight: solid black "Get in touch" (10px radius, 39px tall) beside a light-gray filled "Follow on X" with a hairline border and gray text
- Handwritten signature floated loose at the right end of the intro, a thin gray scrawl that adds a human mark without a single extra word
- Duotone halftone avatar: the profile photo rendered as a blue dot-screen inside a 64px circle, so even the headshot looks designed rather than snapped
- Product UI shown on painted, impressionist landscapes rather than gradients or device mockups — a crisp light SaaS window floating over a textured oil-paint field makes flat UI feel precious
- Media frames stacked with an 8px gap at a single 12px radius, several per project, so one project scrolls like a short slideshow before the next year label arrives

## Style recipe

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.