robin-noguier.com — design breakdown

Design & Studios · Elegant

Product designer portfolio praised for its transitions. Delicate portfolio transitions, image distortion effects, refined case-study flow. This page breaks down the measurable design decisions behind the site — the extracted color palette, typography, tone of voice — and generates a complete vibe-coding prompt that recreates the same design language in Lovable, Cursor or v0.

Screenshot of the robin-noguier.com homepage — Design & Studios web design example

The robin-noguier.com front page as captured for the Norrly library.

Color palette

The dominant colors extracted from the live site:

#181818#f0f0f0#784848#303048#a8a8a8

Typography & voice

Heading fonteksell_rm_large

Body fontsilka_rm

Hero headline“Fun”

CategoryDesign & Studios

Voice: polished and sophisticated. Hero headline: “Fun”

What robin-noguier.com does well

Refined spacing, subtle shadows and considered type pairings signal premium quality.

Apply it to your own project

Upgrade perceived quality with type pairing (serif display + clean sans) before touching layout.

The vibe-coding prompt

Norrly generates a complete founding prompt from the measured values above — theme, exact hex colors, type scale, button geometry, section structure, motion rules and hard constraints. Paste it into Lovable, Cursor, v0 or Bolt to start from robin-noguier.com's design language instead of AI defaults. A preview:

You are a world-class web designer + frontend engineer. Build an original single-page landing page in the exact design language of robin-noguier.com (design & studios — Product designer portfolio praised for its transitions.) Do NOT clone their content or logo; recreate the FEEL. Every token below was measured from the live site — follow them precisely, they are the product.

Stack: React + Tailwind CSS (works in Lovable, v0, Bolt or Cursor as-is). Single page, production quality, fully responsive.

━━━ 1. DESIGN SPEC (measured tokens — the source of truth) ━━━

THEME & MOOD
- Dark theme: the page lives on #0d0d0d; light text; contrast and glow create hierarchy.
- Personality: delicate portfolio transitions, image distortion effects, refined case-study flow. In two words: Elegant.
- Reference anchor: think “robin-noguier.com” — delicate portfolio transitions. Combine this reference with the exact values below (reference alone is vague, values alone lack character).

COLORS
- Page background: #0d0d0d
- Body text: #ffffff
- Accent (CTAs, links, ONE highlight per viewport — nothing else): #784848
- Full measured palette: #181818, #f0f0f0, #784848, #303048, #a8a8a8

Get the full prompt in the library →

The library includes a 15-second scroll recording, three screenshots, the full measured token set and the complete prompt for robin-noguier.com and 350+ more sites. 5 sites are free to explore.