№ clementgrellier-fr

Clément Grellier — Front-end developer

Subtle grey tones and clean, geometric type create a serene, technically refined space.

Split Studiominimalism editorial swiss portfoliolight

Clément Grellier — Front-end developer - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Clément Grellier — Front-end developer - full page scroll

Clément Grellier — Front-end developer - mobile full page

Palette

Click any value to copy. Roles are suggestions, not gospel.

SwatchHexOKLCHSuggested roleCopy

Hex#887f76
OKLCHoklch(60.2% 0.017 67)
RoleDominant
find sites →
Hex#c1bcb7
OKLCHoklch(79.8% 0.009 68)
RoleSurface
find sites →
Hex#47423d
OKLCHoklch(38.2% 0.011 67)
RoleInk
find sites →
Hex#776f6d
OKLCHoklch(54.8% 0.010 34)
RoleAccent
find sites →
Hex#ccc8c4
OKLCHoklch(83.5% 0.007 68)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Amiamie	160px	400	1	-7.992px	Aa Bb Cc
h2	Amiamie	24px	400	1	0	Aa Bb Cc
body	Amiamie	16px	400	1.5	0	Aa Bb Cc

Container

Max content width 1440px

Export

:root {
  --color-dominant: #887f76;
  --color-surface: #c1bcb7;
  --color-ink: #47423d;
  --color-accent: #776f6d;
  --color-detail: #ccc8c4;
}

/* CSS variables exposed by source */
:root {
  --smooth: cubic-bezier(.15,.9,.34,.95);
  --custom: cubic-bezier(.76,0,.24,1);
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Clément Grellier — Front-end developer.
Reference design system (extracted from the live site):
- Palette: #887f76, #c1bcb7, #47423d, #776f6d, #ccc8c4
- Typefaces: Amiamie
- Macrostructure: Split Studio
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/clementgrellier-fr

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Amiamie

160px

400

-7.992px

Aa Bb Cc

Amiamie

24px

400

Aa Bb Cc

body

Amiamie

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #887f76; --color-surface: #c1bcb7; --color-ink: #47423d; --color-accent: #776f6d; --color-detail: #ccc8c4; } /* CSS variables exposed by source */ :root { --smooth: cubic-bezier(.15,.9,.34,.95); --custom: cubic-bezier(.76,0,.24,1); }

Build a landing page in the visual style of Clément Grellier — Front-end developer. Reference design system (extracted from the live site): - Palette: #887f76, #c1bcb7, #47423d, #776f6d, #ccc8c4 - Typefaces: Amiamie - Macrostructure: Split Studio Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/clementgrellier-fr