wireframe.co

A one-person studio site that reads like a well-kept settings panel: a near-white #fcfcfb canvas ruled by faint dashed vertical guides, a three-column layout with a sticky left nav, one narrow 456px content column and a right rail of small live widgets (visitor count, a Mode toggle, Follow on X). Everything is Inter at 13–16px with weight 425–500 and slight negative tracking. The only display moment is a 44px InterDisplay 600 headline whose word "Design" is set in sky blue and recolored by a little floating swatch picker. Credibility comes from lists, not imagery: career rows with app-icon tiles, a three-column client roll, and then a single black testimonial card with a pink-red streak graphic, the one loud surface on the page.

Build on a near-white canvas (#fcfcfb content, #f6f6f4 gutters) with 1px dashed #d4d3d3 vertical guide lines drawn at every column boundary, top to bottom; the visible grid is the decoration. Lay out three columns: a sticky left rail (logo mark, 14px nav links, contact email pinned to the bottom), one narrow content column around 456px, and a right rail of small, quiet widgets right-aligned. Use Inter for everything: body 16/24 at weight 425 with -0.24px tracking, UI and labels 13/20 at 450–500 with -0.065px, section labels 12px #8d8e8e; reserve InterDisplay 600 at 44/44 with -0.66px tracking for the single H1. Ink is #1f1f21, secondary text #4f4f52/#717172, disabled #b3b3b3. Color is rationed: one sky-blue accent (#1d93d2 for links and icon actions; a lighter #5ab4f0-ish tint for one headline word) and nothing else colored except brand logos. Primary button: near-black fill with a subtle top-down gradient, white 13px/500 text, 8px radius, 40px height, 16px side padding; pair it with a borderless accent text link led by a 14px icon. Separate sections with full-column 1px #e8e8e6 hairlines and generous 48–64px vertical space; label each section with a small gray caption rather than a heading. Present proof as lists: icon tiles (48px, 10px radius, white, hairline border, faint shadow) beside two-line rows with right-aligned gray dates, and plain-text name grids. Allow exactly one dark surface per page (a black 10px-radius card with a vivid abstract image) for the strongest quote. Add one or two human touches: a hand-drawn scribble around a label, a time-of-day greeting, a live counter. No hero image, no gradients on backgrounds, no shadows beyond the faintest on tiles and popovers.