№ marni-com--en-ca-new-in

Marni

Soft ochre and blush, clean sans-serif, airy composition evokes quiet, sun-drenched afternoons.

Portfolio Gridminimalism editorial fashion ecommercelight

The layout prioritizes a large, evocative image and minimal text, creating a sense of understated luxury. The color palette is soft and muted, with a focus on earthy tones and pastel hues. The overall feeling is one of relaxed sophistication. · fashion editorial, minimalist ecommerce, soft pastel branding, lifestyle photography, muted color palette, luxury fashion, studio photography, calm aesthetic, spring collection

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

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

Reads as: muted · pastel · earthy

SwatchHexOKLCHSuggested roleCopy

Hex#814f3d
OKLCHoklch(48.0% 0.073 41)
RoleDominant
find sites →
Hex#5f3b2b
OKLCHoklch(39.1% 0.057 45)
RoleSurface
find sites →
Hex#f4e3e5
OKLCHoklch(93.0% 0.019 9)
RoleInk
find sites →
Hex#a98057
OKLCHoklch(63.0% 0.076 66)
RoleAccent
find sites →
Hex#c9adb2
OKLCHoklch(77.3% 0.033 6)
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
h2	futura-pt	18px	400	1.2	0.09px	Aa Bb Cc
h3	futura-pt	14px	400	1.43	0.21px	Aa Bb Cc
body	futura-pt	14px	400	1.57	0.3px	Aa Bb Cc
button	futura-pt	14px	400	1.4	0.21px	Aa Bb Cc

Spacing scale

8px

16px

24px

25px

40px

64px

80px

Radius scale

0px

2px

20px

25px

48px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #814f3d;
  --color-surface: #5f3b2b;
  --color-ink: #f4e3e5;
  --color-accent: #a98057;
  --color-detail: #c9adb2;
}

/* CSS variables exposed by source */
:root {
  --fsb-disabled-opacity: .3;
  --fsb-hover-background: #ddd;
  --slide-open: 0;
  --fsb-list-height: 300px;
  --fsb-border: 1px solid #ccc;
  --min-rec-height: 159px;
  --fsb-background: #fff;
  --fsb-arrow-color: currentColor;
  --fsb-list-radius: 3px;
  --fsb-icon-color: currentColor;
  --navContainer-maxHeight: 900px;
  --swiper-navigation-size: 44px;
  --dropdown-close-mobile: 100vh;
  --navContainer-height: 48px;
  --fsb-list-border: 1px solid #ccc;
  --slide-close-mobile: 100vh;
  --fsb-font-size: 1rem;
  --filters-maxHeight: 1000px;
  --fsb-arrow-padding: 8px;
  --fsb-arrow-size: 6px;
  --slide-close: -527px;
  --fsb-padding-right: 8px;
  --fsb-radius: 5px;
  --fsb-list-background: #fff;
  --dropdown-open-mobile: 0;
  --swiper-theme-color: #007aff;
  --slide-open-mobile: 0;
  --fsb-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  --fsb-padding: 8px;
}

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 Marni.
Reference design system (extracted from the live site):
- Palette: #814f3d, #5f3b2b, #f4e3e5, #a98057, #c9adb2
- Typefaces: futura-pt
- Macrostructure: Portfolio Grid
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/marni-com--en-ca-new-in

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

futura-pt

18px

400

1.2

0.09px

Aa Bb Cc

futura-pt

14px

400

1.43

0.21px

Aa Bb Cc

body

futura-pt

14px

400

1.57

0.3px

Aa Bb Cc

button

futura-pt

14px

400

1.4

0.21px

Aa Bb Cc

:root { --color-dominant: #814f3d; --color-surface: #5f3b2b; --color-ink: #f4e3e5; --color-accent: #a98057; --color-detail: #c9adb2; } /* CSS variables exposed by source */ :root { --fsb-disabled-opacity: .3; --fsb-hover-background: #ddd; --slide-open: 0; --fsb-list-height: 300px; --fsb-border: 1px solid #ccc; --min-rec-height: 159px; --fsb-background: #fff; --fsb-arrow-color: currentColor; --fsb-list-radius: 3px; --fsb-icon-color: currentColor; --navContainer-maxHeight: 900px; --swiper-navigation-size: 44px; --dropdown-close-mobile: 100vh; --navContainer-height: 48px; --fsb-list-border: 1px solid #ccc; --slide-close-mobile: 100vh; --fsb-font-size: 1rem; --filters-maxHeight: 1000px; --fsb-arrow-padding: 8px; --fsb-arrow-size: 6px; --slide-close: -527px; --fsb-padding-right: 8px; --fsb-radius: 5px; --fsb-list-background: #fff; --dropdown-open-mobile: 0; --swiper-theme-color: #007aff; --slide-open-mobile: 0; --fsb-shadow: 0 1px 1px rgba(0, 0, 0, .1); --fsb-padding: 8px; }

Build a landing page in the visual style of Marni. Reference design system (extracted from the live site): - Palette: #814f3d, #5f3b2b, #f4e3e5, #a98057, #c9adb2 - Typefaces: futura-pt - Macrostructure: Portfolio Grid 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/marni-com--en-ca-new-in