№ loewe-com--eur-en-women-bags-hammock-compact-hammock-bag-in-soft-grained-calfskin-a538h13x23-1769-html

Loewe

Warm ochre leather rests on weathered turquoise, clean sans-serif floats in expansive space.

Photographicminimalism editorial fashion ecommercelight

The image prioritizes a single, evocative visual – a Loewe bag in a boat – establishing a mood through composition and color. The overall feel is understated luxury, relying on the product's inherent aesthetic rather than explicit messaging. · luxury bag editorial, leather goods photography, minimalist fashion, summer campaign, loewe product shot, boat lifestyle, warm color palette

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: earthy · muted · warm

SwatchHexOKLCHSuggested roleCopy

Hex#eee81d
OKLCHoklch(90.7% 0.191 108)
RoleDominant
find sites →
Hex#174d57
OKLCHoklch(39.0% 0.057 212)
RoleSurface
find sites →
Hex#d8985c
OKLCHoklch(73.0% 0.109 63)
RoleInk
find sites →
Hex#4ba497
OKLCHoklch(66.1% 0.088 183)
RoleAccent
find sites →
Hex#c7a282
OKLCHoklch(73.8% 0.062 62)
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	Avus	28px	700	1.4	0	Aa Bb Cc
h2	Loewe	42px	400	1.15	-0.63px	Aa Bb Cc
h3	Avus	12px	400	1.4	0	Aa Bb Cc
body	Avus	14px	400	1.4	0	Aa Bb Cc
button	Avus	14px	400	0	0	Aa Bb Cc

Spacing scale

12px

24px

32px

Radius scale

0px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #eee81d;
  --color-surface: #174d57;
  --color-ink: #d8985c;
  --color-accent: #4ba497;
  --color-detail: #c7a282;
}

/* CSS variables exposed by source */
:root {
  --scroll-width: 7px;
  --lw-color-white-500: #FFFFFF80;
  --lw-motion-delay-50: 50ms;
  --lw-motion-duration-0: 0;
  --lw-motion-easing-ease-in: cubic-bezier(0.42,0.00,1.00,1.00);
  --lw-color-text-primary: #000000;
  --lw-color-border-primary: #000000;
  --lw-spacing-100: 4px;
  --lw-color-text-inverse-secondary: #FFFFFF80;
  --lw-spacing-400: 16px;
  --lw-color-black: #000000;
  --lw-color-border-secondary: #00000073;
  --lw-color-border-tertiary: #0000001A;
  --lw-motion-easing-ease-in-out: cubic-bezier(0.42,0.00,0.58,1.00);
  --lw-color-background-overlay: #0000004D;
  --lw-color-utility-negative: #AE3433;
  --lw-spacing-200: 8px;
  --lw-motion-duration-100: 100ms;
  --lw-color-border-error: #AE3433;
  --lw-motion-delay-200: 200ms;
  --lw-motion-delay-0: 0ms;
  --lw-color-background-primary: #FFFFFF;
  --lw-color-background-accent: #F2CA56;
  --lw-motion-duration-200: 200ms;
  --lw-spacing-600: 24px;
  --lw-color-red: #AE3433;
  --lw-motion-easing-ease-out-soft: cubic-bezier(0.20,0.00,0.00,1.00);
  --lw-color-text-inverse: #FFFFFF;
  --lw-color-grey-400: #00000073;
  --lw-spacing-300: 12px;
  --lw-spacing-2000: 80px;
  --lw-spacing-4000: 160px;
  --lw-color-icon-inverse: #FFFFFF;
  --lw-spacing-0: 0;
  --lw-color-icon-error: #AE3433;
  --lw-motion-duration-700: 700ms;
  --lw-border-width-200: 2px;
  --lw-color-white: #FFFFFF;
  --lw-motion-duration-500: 500ms;
  --lw-motion-duration-300: 300ms;
  --lw-spacing-800: 32px;
  --lw-color-green: #56923B;
  --lw-border-width-150: 1.5px;
  --lw-color-background-subtle: #F8F8F8;
  --lw-color-text-error: #AE3433;
  --lw-motion-easing-ease-in-spring: cubic-bezier(0.00,0.00,0.30,1.00);
  --lw-border-radius-0: 0;
  --lw-motion-delay-600: 600ms;
  --lw-motion-duration-400: 400ms;
  --lw-spacing-1200: 48px;
  --lw-color-icon-secondary: #00000094;
  --lw-color-grey-100: #F8F8F8;
  --lw-motion-easing-ease-out: cubic-bezier(0.00,0.00,0.58,1.00);
  --lw-color-yellow: #F2CA56;
  --lw-color-product-image-background: linear-gradient(to right, #f6f6f6, #ebebeb);
  --lw-color-utility-error: #AE3433;
  --lw-motion-delay-100: 100ms;
  --lw-motion-delay-400: 400ms;
  --lw-color-grey-200: #0000001A;
  --lw-motion-delay-300: 300ms;
}

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 Loewe.
Reference design system (extracted from the live site):
- Palette: #eee81d, #174d57, #d8985c, #4ba497, #c7a282
- Typefaces: Avus, Loewe
- Macrostructure: Photographic
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/loewe-com--eur-en-women-bags-hammock-compact-hammock-bag-in-soft-grained-calfskin-a538h13x23-1769-html

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Avus

28px

700

1.4

Aa Bb Cc

Loewe

42px

400

1.15

-0.63px

Aa Bb Cc

Avus

12px

400

1.4

Aa Bb Cc

body

Avus

14px

400

1.4

Aa Bb Cc

button

Avus

14px

400

Aa Bb Cc

:root { --color-dominant: #eee81d; --color-surface: #174d57; --color-ink: #d8985c; --color-accent: #4ba497; --color-detail: #c7a282; } /* CSS variables exposed by source */ :root { --scroll-width: 7px; --lw-color-white-500: #FFFFFF80; --lw-motion-delay-50: 50ms; --lw-motion-duration-0: 0; --lw-motion-easing-ease-in: cubic-bezier(0.42,0.00,1.00,1.00); --lw-color-text-primary: #000000; --lw-color-border-primary: #000000; --lw-spacing-100: 4px; --lw-color-text-inverse-secondary: #FFFFFF80; --lw-spacing-400: 16px; --lw-color-black: #000000; --lw-color-border-secondary: #00000073; --lw-color-border-tertiary: #0000001A; --lw-motion-easing-ease-in-out: cubic-bezier(0.42,0.00,0.58,1.00); --lw-color-background-overlay: #0000004D; --lw-color-utility-negative: #AE3433; --lw-spacing-200: 8px; --lw-motion-duration-100: 100ms; --lw-color-border-error: #AE3433; --lw-motion-delay-200: 200ms; --lw-motion-delay-0: 0ms; --lw-color-background-primary: #FFFFFF; --lw-color-background-accent: #F2CA56; --lw-motion-duration-200: 200ms; --lw-spacing-600: 24px; --lw-color-red: #AE3433; --lw-motion-easing-ease-out-soft: cubic-bezier(0.20,0.00,0.00,1.00); --lw-color-text-inverse: #FFFFFF; --lw-color-grey-400: #00000073; --lw-spacing-300: 12px; --lw-spacing-2000: 80px; --lw-spacing-4000: 160px; --lw-color-icon-inverse: #FFFFFF; --lw-spacing-0: 0; --lw-color-icon-error: #AE3433; --lw-motion-duration-700: 700ms; --lw-border-width-200: 2px; --lw-color-white: #FFFFFF; --lw-motion-duration-500: 500ms; --lw-motion-duration-300: 300ms; --lw-spacing-800: 32px; --lw-color-green: #56923B; --lw-border-width-150: 1.5px; --lw-color-background-subtle: #F8F8F8; --lw-color-text-error: #AE3433; --lw-motion-easing-ease-in-spring: cubic-bezier(0.00,0.00,0.30,1.00); --lw-border-radius-0: 0; --lw-motion-delay-600: 600ms; --lw-motion-duration-400: 400ms; --lw-spacing-1200: 48px; --lw-color-icon-secondary: #00000094; --lw-color-grey-100: #F8F8F8; --lw-motion-easing-ease-out: cubic-bezier(0.00,0.00,0.58,1.00); --lw-color-yellow: #F2CA56; --lw-color-product-image-background: linear-gradient(to right, #f6f6f6, #ebebeb); --lw-color-utility-error: #AE3433; --lw-motion-delay-100: 100ms; --lw-motion-delay-400: 400ms; --lw-color-grey-200: #0000001A; --lw-motion-delay-300: 300ms; }

Build a landing page in the visual style of Loewe. Reference design system (extracted from the live site): - Palette: #eee81d, #174d57, #d8985c, #4ba497, #c7a282 - Typefaces: Avus, Loewe - Macrostructure: Photographic 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/loewe-com--eur-en-women-bags-hammock-compact-hammock-bag-in-soft-grained-calfskin-a538h13x23-1769-html