turbodesign.co

A studio homepage that is almost nothing but work. The screen splits roughly 29/71: a fixed near-black (#0b0b0f) left rail holds the entire pitch (wordmark, a three-line 48px headline, one sentence, two pills, a client logo grid and a live Brooklyn clock), and it never moves while the right column scrolls through one full-width case tile after another. The studio itself stays strictly monochrome — white type, gray logos, a white pill — so every bit of color on the page comes from the client work: product UI set on sky photos, plaster walls, green velvet or plain #fbfbfa panels. The rail reads like a business card pinned beside a portfolio wall. There is no nav, no section heading and no copy between tiles.

Build a dark, monochrome shell that gets out of the way of full-color imagery. Page background #0b0b0f. Primary text #ffffff, secondary text ~#a0a3a6, tertiary and logos ~#4d5253 to #6b6f72. The chrome carries no brand hue. White is the accent, and all color comes from content imagery. If you need a single chromatic accent, use a clear sky blue (#3e96e2), and only inside the content.

Layout: a two-column split with a fixed left rail about 29% wide (~420px at 1440) and 24px outer padding, next to a scrolling right column of full-width media tiles. The rail holds, top to bottom: the wordmark, the headline, one supporting sentence, the CTA pair, then pinned to the bottom a mono eyebrow, a gray logo grid and a small location or time line. Skip the top nav; the wordmark is the header.

Type: one neo-grotesk (Neue Montreal, or substitute Inter Display or Switzer). Display 48px/1.1, weight 400, letter-spacing −0.03em. Body 20px/1.2, weight 500, in a softer gray. Card titles 24px/1.3, −0.64px. Labels in Geist Mono 13px uppercase with ~0.08em tracking, dim gray, used sparingly as eyebrows only.

Components: 40px-tall pills with a 100px radius and 16–18px horizontal padding, 16px text. The primary is a solid #ffffff fill with #000000 text. The secondary is a tonal charcoal fill (~#1c1c21) with white text. Neither has a border or icon. Media tiles use an 8px radius, a 16px gap between them, and height around 0.68× their width. Put UI on photographic or softly textured backdrops, or center it on a flat #fbfbfa panel. The larger 30–32px radius is only for device frames and inset cards inside tiles.

Restraint rules: no section headings, no dividers, no shadows on the chrome, and no gradients except those in the imagery. Motion is the scroll itself, plus one live element (a ticking clock) to show the page is alive.