№ buly1803-com--pages-product

Buly1803

Dusty rose and aged gold, elegant script whispers across airy, generous white space.

Portfolio Gridminimalism editorial vintage fashion ecommercelight

The hero image is a carefully arranged still life of the product, presented with a soft, muted color palette and ample negative space. Typography is minimal, allowing the product and its presentation to take center stage. The overall feel is sophisticated and understated. · luxury soap, vintage beauty, artful product, minimalist ecommerce, editorial product, soft lighting, muted tones, buly 1803, beauty still life

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

SwatchHexOKLCHSuggested roleCopy

Hex#976336
OKLCHoklch(54.6% 0.091 60)
RoleDominant
find sites →
Hex#74412a
OKLCHoklch(43.2% 0.079 44)
RoleSurface
find sites →
Hex#f2bdba
OKLCHoklch(84.5% 0.061 22)
RoleInk
find sites →
Hex#a5775f
OKLCHoklch(60.9% 0.068 49)
RoleAccent
find sites →
Hex#c4a49c
OKLCHoklch(74.5% 0.040 34)
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	Officine Universelle	60px	400	1	0.6px	Aa Bb Cc
h2	Officine Universelle	24px	400	0.88	2.4px	Aa Bb Cc
h3	Officine Universelle	24px	400	1	0.6px	Aa Bb Cc
body	Caslon Universelle	16px	400	1.13	0.6px	Aa Bb Cc
caption	Ari Clean	11px	400	1.2	0.7px	Aa Bb Cc
button	Ari Clean	9px	400	1.2	1px	Aa Bb Cc

Spacing scale

5px

8px

10px

16px

20px

24px

30px

32px

35px

36px

40px

45px

52px

60px

64px

70px

Radius scale

0px

3px

4px

30px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #976336;
  --color-surface: #74412a;
  --color-ink: #f2bdba;
  --color-accent: #a5775f;
  --color-detail: #c4a49c;
}

/* CSS variables exposed by source */
:root {
  --color-base-background-2: 243, 243, 243;
  --text-3xs: 0.8rem;
  --color-red-text: #BF0000;
  --spacing-4xl: 12.8rem;
  --spacing-2xl: 8rem;
  --spacing-sections-desktop: 0px;
  --spacing-m: 3.2rem;
  --font-body-family: 'Caslon Universelle', 'Times New Roman', serif;
  --color-white: #F6F6F6;
  --text-s: 1.4rem;
  --color-base-text: 18, 18, 18;
  --text-2xs: 0.9rem;
  --spacing-4xs: 0.2rem;
  --color-ultra-light-grey: #EDEDEB;
  --spacing-sections-mobile: 0px;
  --color-button: 18, 18, 18;
  --text-xl: 3.2rem;
  --color-error-text: 0, 82, 180;
  --font-body-weight-bold: '700';
  --font-heading-scale: 1.0;
  --color-border-light: #DDDDDD;
  --spacing-l: 4.8rem;
  --color-base-accent-2: 51, 79, 180;
  --text-boxes-border-width: 0px;
  --font-header: 'Officine Universelle', 'Garamond', serif;
  --color-icon: rgb(18, 18, 18);
  --text-boxes-radius: 0px;
  --color-dark-grey: #444444;
  --font-body-style: 'normal';
  --font-body-weight: '400';
  --text-boxes-shadow-horizontal-offset: 0px;
  --color-brand-2: #0D4225;
  --color-error: rgb(0, 82, 180);
  --color-border: #DDDDDD;
  --spacing-s: 2.4rem;
  --color-foreground: 18, 18, 18;
  --font-body-scale: 1.0;
  --text-boxes-shadow-opacity: 0.0;
  --font-paragraph: 'Caslon Universelle', 'Times New Roman', serif;
  --color-brand-1: #C1171A;
  --color-link: 18, 18, 18;
  --color-badge-border: 18, 18, 18;
  --color-card-hover: 18, 18, 18;
  --text-2xl: 4.8rem;
  --color-bg: rgb(255, 255, 255);
  --spacing-base: 2rem;
  --spacing-xl: 6.4rem;
  --spacing-3xs: 0.4rem;
  --text-l: 2.4rem;
  --spacing-3xl: 9.6rem;
  --color-grey: #888888;
  --color-base-outline-button-labels: 18, 18, 18;
  --spacing-xs: 1.6rem;
  --color-background: 255, 255, 255;
  --color-base-accent-1: 18, 18, 18;
  --color-badge-background: 255, 255, 255;
  --color-button-text: 255, 255, 255;
  --color-light-grey: #E7E7E7;
  --color-base-solid-button-labels: 255, 255, 255;
  --text-4xs: 0.7rem;
}

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 Buly1803.
Reference design system (extracted from the live site):
- Palette: #976336, #74412a, #f2bdba, #a5775f, #c4a49c
- Typefaces: Officine Universelle, Caslon Universelle, Ari Clean
- 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/buly1803-com--pages-product

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Officine Universelle

60px

400

0.6px

Aa Bb Cc

Officine Universelle

24px

400

0.88

2.4px

Aa Bb Cc

Officine Universelle

24px

400

0.6px

Aa Bb Cc

body

Caslon Universelle

16px

400

1.13

0.6px

Aa Bb Cc

caption

Ari Clean

11px

400

1.2

0.7px

Aa Bb Cc

button

Ari Clean

9px

400

1.2

1px

Aa Bb Cc

:root { --color-dominant: #976336; --color-surface: #74412a; --color-ink: #f2bdba; --color-accent: #a5775f; --color-detail: #c4a49c; } /* CSS variables exposed by source */ :root { --color-base-background-2: 243, 243, 243; --text-3xs: 0.8rem; --color-red-text: #BF0000; --spacing-4xl: 12.8rem; --spacing-2xl: 8rem; --spacing-sections-desktop: 0px; --spacing-m: 3.2rem; --font-body-family: 'Caslon Universelle', 'Times New Roman', serif; --color-white: #F6F6F6; --text-s: 1.4rem; --color-base-text: 18, 18, 18; --text-2xs: 0.9rem; --spacing-4xs: 0.2rem; --color-ultra-light-grey: #EDEDEB; --spacing-sections-mobile: 0px; --color-button: 18, 18, 18; --text-xl: 3.2rem; --color-error-text: 0, 82, 180; --font-body-weight-bold: '700'; --font-heading-scale: 1.0; --color-border-light: #DDDDDD; --spacing-l: 4.8rem; --color-base-accent-2: 51, 79, 180; --text-boxes-border-width: 0px; --font-header: 'Officine Universelle', 'Garamond', serif; --color-icon: rgb(18, 18, 18); --text-boxes-radius: 0px; --color-dark-grey: #444444; --font-body-style: 'normal'; --font-body-weight: '400'; --text-boxes-shadow-horizontal-offset: 0px; --color-brand-2: #0D4225; --color-error: rgb(0, 82, 180); --color-border: #DDDDDD; --spacing-s: 2.4rem; --color-foreground: 18, 18, 18; --font-body-scale: 1.0; --text-boxes-shadow-opacity: 0.0; --font-paragraph: 'Caslon Universelle', 'Times New Roman', serif; --color-brand-1: #C1171A; --color-link: 18, 18, 18; --color-badge-border: 18, 18, 18; --color-card-hover: 18, 18, 18; --text-2xl: 4.8rem; --color-bg: rgb(255, 255, 255); --spacing-base: 2rem; --spacing-xl: 6.4rem; --spacing-3xs: 0.4rem; --text-l: 2.4rem; --spacing-3xl: 9.6rem; --color-grey: #888888; --color-base-outline-button-labels: 18, 18, 18; --spacing-xs: 1.6rem; --color-background: 255, 255, 255; --color-base-accent-1: 18, 18, 18; --color-badge-background: 255, 255, 255; --color-button-text: 255, 255, 255; --color-light-grey: #E7E7E7; --color-base-solid-button-labels: 255, 255, 255; --text-4xs: 0.7rem; }

Build a landing page in the visual style of Buly1803. Reference design system (extracted from the live site): - Palette: #976336, #74412a, #f2bdba, #a5775f, #c4a49c - Typefaces: Officine Universelle, Caslon Universelle, Ari Clean - 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/buly1803-com--pages-product