№ laruemichel-re

La rue Michel & HTC - Les bonnes agences de pub

Cool, structured black-and-white geometry resting on soft, airy white expanses.

Split Studiominimalism editorial monochrome swiss agencylight

La rue Michel & HTC - Les bonnes agences de pub - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

La rue Michel & HTC - Les bonnes agences de pub - full page scroll

La rue Michel & HTC - Les bonnes agences de pub - mobile full page

Palette

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

SwatchHexOKLCHSuggested roleCopy

Hex#d4b44e
OKLCHoklch(77.9% 0.126 92)
RoleDominant
find sites →
Hex#dc9c74
OKLCHoklch(74.6% 0.094 53)
RoleSurface
find sites →
Hex#156499
OKLCHoklch(48.5% 0.111 244)
RoleInk
find sites →
Hex#ac5c9c
OKLCHoklch(59.0% 0.132 335)
RoleAccent
find sites →
Hex#c3bdb1
OKLCHoklch(80.0% 0.018 85)
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	Sample
h1	aktiv-grotesk	68px	700	1.4	Aa Bb Cc
h2	aktiv-grotesk	19px	700	1.21	Aa Bb Cc
h3	aktiv-grotesk	33px	700	1.3	Aa Bb Cc
body	sans-serif	16px	400	1.4	Aa Bb Cc
button	aktiv-grotesk	18px	400	1.4	Aa Bb Cc

Spacing scale

7px

12px

17px

30px

112px

Radius scale

0px

2px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #d4b44e;
  --color-surface: #dc9c74;
  --color-ink: #156499;
  --color-accent: #ac5c9c;
  --color-detail: #c3bdb1;
}

/* CSS variables exposed by source */
:root {
  --secondary-button-font-font-weight: 500;
  --primary-button-font-font-style: normal;
  --secondary-button-font-font-size-value: 1.1;
  --primary-button-padding-y: 1.5em;
  --backgroundOverlayColor: hsla(0,0%,98.04%,1);
  --primary-button-font-font-size: 1rem;
  --primary-button-font-line-height: 1.2em;
  --secondary-button-font-font-family: "aktiv-grotesk";
  --secondary-button-font-text-transform: none;
  --primaryButtonPadding: 1.5em;
  --primary-button-rounded-border-bottom-left-radius: 6.4px;
  --text-highlight-color-on-background: hsla(0,0%,0%,1);
  --secondary-button-rounded-border-bottom-right-radius: 6.4px;
  --primary-button-rounded-border-top-right-radius: 6.4px;
  --secondaryButtonBackgroundColor: hsla(0,0%,0%,1);
  --primary-button-font-font-weight: 500;
  --secondary-button-font-font-style: normal;
  --secondary-button-padding-y: 1.5em;
  --primary-button-padding-x: 2.505em;
  --primaryButtonTextColor: hsla(0,0%,98.04%,1);
  --secondary-button-rounded-border-bottom-left-radius: 6.4px;
  --primaryButtonBackgroundColor: hsla(0,0%,0%,1);
  --primary-button-font-letter-spacing: .02em;
  --secondary-button-padding-x: 2.505em;
  --accent-hsl: 0,0%,86.27%;
  --secondary-button-font-line-height: 1.2em;
  --secondaryButtonTextColor: hsla(0,0%,98.04%,1);
  --primary-button-stroke: 0px;
  --primary-button-font-font-family: "aktiv-grotesk";
  --primary-button-rounded-border-top-left-radius: 6.4px;
  --secondary-button-rounded-border-top-left-radius: 6.4px;
  --secondary-button-stroke: 0px;
  --text-highlight-color: hsla(0,0%,0%,1);
  --secondary-button-font-font-size: 1.1rem;
  --primary-button-font-font-size-value: 1;
  --primary-button-rounded-border-bottom-right-radius: 6.4px;
  --secondary-button-font-letter-spacing: .02em;
  --secondary-button-rounded-border-top-right-radius: 6.4px;
  --primary-button-font-text-transform: none;
  --tertiary-button-font-font-style: normal;
  --tweak-summary-block-background-color: hsla(0,0%,100%,1);
  --tweak-blog-basic-grid-list-meta-color: hsla(0,0%,0%,1);
  --course-item-lesson-name-font-letter-spacing: 0em;
  --content-link-block-title-font-font-weight: 400;
  --product-basic-item-restock-notification-wrap-layout-font-font-style: normal;
  --portfolio-grid-overlay-title-font-font-size-value: 2;
  --menu-block-item-description-font-letter-spacing: 0em;
  --product-basic-item-title-half-layout-font-font-family: "aktiv-grotesk";
  --quote-block-text-font-font-family: "aktiv-grotesk";
  --quote-block-text-font-font-weight: 400;
  --product-basic-item-add-ons-title-half-layout-font-font-weight: 400;
  --tweak-blog-item-title-color: hsla(0,0%,0%,1);
  --portfolio-item-pagination-font-font-size-value: 2;
  --portfolio-hover-static-title-color: hsla(0,0%,100%,1);
  --portfolio-item-pagination-font-font-size: 2rem;
  --product-basic-item-description-font-line-height: 1.3em;
  --course-list-grid-layout-chapter-meta-font-font-style: normal;
  --portfolio-index-background-title-font-letter-spacing: 0em;
  --tweak-product-basic-item-gallery-controls-color: hsla(0,0%,0%,1);
  --product-basic-item-restock-notification-wrap-layout-font-text-transform: none;
}

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 La rue Michel & HTC - Les bonnes agences de pub.
Reference design system (extracted from the live site):
- Palette: #d4b44e, #dc9c74, #156499, #ac5c9c, #c3bdb1
- Typefaces: aktiv-grotesk, sans-serif
- 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/laruemichel-re

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

aktiv-grotesk

68px

700

1.4

Aa Bb Cc

aktiv-grotesk

19px

700

1.21

Aa Bb Cc

aktiv-grotesk

33px

700

1.3

Aa Bb Cc

body

sans-serif

16px

400

1.4

Aa Bb Cc

button

aktiv-grotesk

18px

400

1.4

Aa Bb Cc

:root { --color-dominant: #d4b44e; --color-surface: #dc9c74; --color-ink: #156499; --color-accent: #ac5c9c; --color-detail: #c3bdb1; } /* CSS variables exposed by source */ :root { --secondary-button-font-font-weight: 500; --primary-button-font-font-style: normal; --secondary-button-font-font-size-value: 1.1; --primary-button-padding-y: 1.5em; --backgroundOverlayColor: hsla(0,0%,98.04%,1); --primary-button-font-font-size: 1rem; --primary-button-font-line-height: 1.2em; --secondary-button-font-font-family: "aktiv-grotesk"; --secondary-button-font-text-transform: none; --primaryButtonPadding: 1.5em; --primary-button-rounded-border-bottom-left-radius: 6.4px; --text-highlight-color-on-background: hsla(0,0%,0%,1); --secondary-button-rounded-border-bottom-right-radius: 6.4px; --primary-button-rounded-border-top-right-radius: 6.4px; --secondaryButtonBackgroundColor: hsla(0,0%,0%,1); --primary-button-font-font-weight: 500; --secondary-button-font-font-style: normal; --secondary-button-padding-y: 1.5em; --primary-button-padding-x: 2.505em; --primaryButtonTextColor: hsla(0,0%,98.04%,1); --secondary-button-rounded-border-bottom-left-radius: 6.4px; --primaryButtonBackgroundColor: hsla(0,0%,0%,1); --primary-button-font-letter-spacing: .02em; --secondary-button-padding-x: 2.505em; --accent-hsl: 0,0%,86.27%; --secondary-button-font-line-height: 1.2em; --secondaryButtonTextColor: hsla(0,0%,98.04%,1); --primary-button-stroke: 0px; --primary-button-font-font-family: "aktiv-grotesk"; --primary-button-rounded-border-top-left-radius: 6.4px; --secondary-button-rounded-border-top-left-radius: 6.4px; --secondary-button-stroke: 0px; --text-highlight-color: hsla(0,0%,0%,1); --secondary-button-font-font-size: 1.1rem; --primary-button-font-font-size-value: 1; --primary-button-rounded-border-bottom-right-radius: 6.4px; --secondary-button-font-letter-spacing: .02em; --secondary-button-rounded-border-top-right-radius: 6.4px; --primary-button-font-text-transform: none; --tertiary-button-font-font-style: normal; --tweak-summary-block-background-color: hsla(0,0%,100%,1); --tweak-blog-basic-grid-list-meta-color: hsla(0,0%,0%,1); --course-item-lesson-name-font-letter-spacing: 0em; --content-link-block-title-font-font-weight: 400; --product-basic-item-restock-notification-wrap-layout-font-font-style: normal; --portfolio-grid-overlay-title-font-font-size-value: 2; --menu-block-item-description-font-letter-spacing: 0em; --product-basic-item-title-half-layout-font-font-family: "aktiv-grotesk"; --quote-block-text-font-font-family: "aktiv-grotesk"; --quote-block-text-font-font-weight: 400; --product-basic-item-add-ons-title-half-layout-font-font-weight: 400; --tweak-blog-item-title-color: hsla(0,0%,0%,1); --portfolio-item-pagination-font-font-size-value: 2; --portfolio-hover-static-title-color: hsla(0,0%,100%,1); --portfolio-item-pagination-font-font-size: 2rem; --product-basic-item-description-font-line-height: 1.3em; --course-list-grid-layout-chapter-meta-font-font-style: normal; --portfolio-index-background-title-font-letter-spacing: 0em; --tweak-product-basic-item-gallery-controls-color: hsla(0,0%,0%,1); --product-basic-item-restock-notification-wrap-layout-font-text-transform: none; }

Build a landing page in the visual style of La rue Michel & HTC - Les bonnes agences de pub. Reference design system (extracted from the live site): - Palette: #d4b44e, #dc9c74, #156499, #ac5c9c, #c3bdb1 - Typefaces: aktiv-grotesk, sans-serif - 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/laruemichel-re