# turbodesign.co

Source: https://turbodesign.co/
Captured: 2026-09-23
Tags: agency, landing, dark, both, minimal, swiss, confident, premium, serious, technical
Colors: #fbfbfa, #0b0b0f, #9fbeea, #e6d4c3, #2f373a, #3e96e2, #d7ad9b, #4d5253
Type (h1): Neue Montreal Medium · 48px/52.8px · 400 · tracking -1.44px — "Users have higher expectations than ever"
Type (h2): Neue Montreal Medium · 24px/31.2px · 400 · tracking -0.64px — "Client Name"
Type (body): Neue Montreal Medium · 20px/24px · 500 — "Startups trust us for embedded product design for AI-native products."
Type (small): Geist Mono · 13px/26px · 500 — "TRUSTED BY VENTURE-BACKED STARTUPS"
Type (button): sans-serif · 12px/normal · 400 — "Start a project Let's chat"
Button: "Start a projectLet's chat" — fill #ffffff, text #000000, radius 100px, border 0px, padding 0px 36px, height 40px, type 12px/400
Radii: 8px (35), 32px (5), 30px (4), 100px (3), 29px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/turbodesign-co/hero.webp?v=94aa0889
- Page crop (mid-1): https://media.lvly.design/library/turbodesign-co/mid-1.webp?v=2bd0b7df
- Page crop (mid-2): https://media.lvly.design/library/turbodesign-co/mid-2.webp?v=9df8ae67
- Hero (mobile): https://media.lvly.design/library/turbodesign-co/mobile-hero.webp?v=1a689a26
- Full page (desktop): https://media.lvly.design/library/turbodesign-co/full.jpg?v=19818bbb
- Full page (mobile): https://media.lvly.design/library/turbodesign-co/mobile-full.jpg?v=46b230d3
- Clip preview (mp4): https://media.lvly.design/library/turbodesign-co/video-q6q97t.preview.mp4?v=b8a1d372

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.

## Steal-worthy details

- Sticky pitch rail: the headline, CTAs, social proof and location sit in a fixed ~420px column while only the work scrolls beside it, so the offer is on screen at every scroll depth and the work never has to share space with text
- Navless header: the wordmark is the only thing up top. There are no links and no menu, and the two hero pills do the navigating
- Live local clock as the footer line: "Brooklyn, NY / Tuesday, September 22 at 11:27:47 PM EST" ticks in muted gray at the foot of the rail. It says "real studio, real time zone" without an About section
- Monospace eyebrow over the logos: Geist Mono 13px, uppercase, wide letterspacing, dim gray. It is the only mono text on the page, and that makes it read as a label rather than copy
- A 2×3 client logo grid knocked back to one mid-gray (around #4d5253–#6b6f72). It is quiet enough to sit permanently in view without competing with the headline
- CTA pair as solid plus tonal pills: a white "Start a project" with black text beside a barely lifted charcoal "About", both 40px tall with a 100px radius. The hierarchy comes from fill alone, with no border and no arrow
- Case tiles as staged canvases: each project is a full-width 8px-radius tile about 610px tall, with a ~16px dark gutter between tiles. The product UI floats on a photographic backdrop (sky, a textured wall, a velvet drape) or sits centered on a flat #fbfbfa panel, so the screenshots look art-directed rather than dumped in
- Phone triptychs on a flat white panel: three states of one flow side by side (light, tinted and dark variants of the same chat screen). One tile shows range and system thinking without a caption
- Headline set in Neue Montreal at 48px/1.1, weight 400, tracking −1.44px (−0.03em), in white on near-black. It is regular weight, not bold, and the tight tracking alone gives it presence

## Style recipe

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.