№ audocph-com--collections-mingle-sofa

Audocph

Soft, muted ochre and taupe—clean, spacious layout with elegant, subtly geometric sans-serif.

Photographicminimalism editorial swiss dark mode furniture ecommercedark

The page uses a full-bleed image to establish a mood, with minimal text overlay. The color palette is muted and earthy, creating a sense of understated elegance. Typography is clean and legible, prioritizing visual impact over extensive information. · minimalist portfolio, soft branding, editorial website, muted color palette, fullbleed image, calm aesthetic, studio website, clean typography, decade retrospective, audocph

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 · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#958569
OKLCHoklch(62.4% 0.044 82)
RoleDominant
find sites →
Hex#4d4537
OKLCHoklch(39.4% 0.025 82)
RoleSurface
find sites →
Hex#c7bfb1
OKLCHoklch(80.7% 0.021 82)
RoleInk
find sites →
Hex#6b635b
OKLCHoklch(50.5% 0.016 67)
RoleAccent
find sites →
Hex#59503f
OKLCHoklch(43.5% 0.029 83)
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	Century Old Style	24px	400	1	1px	Aa Bb Cc
h3	Century Old Style	20px	400	1.1	0	Aa Bb Cc
body	Century Old Style	16px	400	1.3	0.2px	Aa Bb Cc
button	Grot 12	16px	400	1.3	0.2px	Aa Bb Cc

Spacing scale

10px

20px

40px

48px

76px

Radius scale

0px

3px

10px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #958569;
  --color-surface: #4d4537;
  --color-ink: #c7bfb1;
  --color-accent: #6b635b;
  --color-detail: #59503f;
}

/* CSS variables exposed by source */
:root {
  --color-base-background-2: 245, 243, 235;
  --color-card-hover: 47, 43, 35;
  --text-boxes-shadow-visible: 0;
  --color-medium-gray-1: #635a5a;
  --color-brand-4: 166, 118, 56;
  --font-heading-style: normal;
  --color-medium-gray-3: #817E74;
  --spacing-sections-desktop: 0px;
  --font-body-family: 'Century Old Style', serif;
  --color-white: 255, 255, 255;
  --color-brand-5: 192, 183, 176;
  --color-light-gray-3: #F5F3EB;
  --color-base-text: 47, 43, 35;
  --color-brand-3: 200, 191, 176;
  --color-base-outline-button-labels: 47, 43, 35;
  --color-background: 245, 243, 235;
  --color-base-accent-1: 47, 43, 35;
  --color-badge-background: 245, 243, 235;
  --color-button-text: 255, 255, 255;
  --spacing-sections-mobile: 0px;
  --color-light-gray-1: #C6C6C6;
  --color-button: 47, 43, 35;
  --color-base-solid-button-labels: 255, 255, 255;
  --font-body-weight-bold: 700;
  --color-text-white: #fff;
  --font-heading-scale: 1.0;
  --color-base-accent-2: 51, 79, 180;
  --text-boxes-border-width: 0px;
  --color-pdp-price-del: 166, 163, 155;
  --color-base-background-1: 245, 243, 235;
  --color-light-gray-2: #DAD7CE;
  --color-dark-gray-2: #2F2B23;
  --color-icon: rgb(47, 43, 35);
  --color-shadow: 47, 43, 35;
  --color-secondary: 233, 227, 211;
  --color-medium-gray-2: #8a8383;
  --text-boxes-shadow-blur-radius: 5px;
  --secondary-font-family: 'Grot 12', sans-serif;
  --text-boxes-radius: 0px;
  --font-body-style: normal;
  --font-body-weight: 400;
  --text-boxes-shadow-horizontal-offset: 0px;
  --text-boxes-shadow-vertical-offset: 4px;
  --color-brand-2: 150, 90, 62;
  --color-primary: 245, 243, 235;
  --font-heading-family: 'Century Old Style', serif;
  --color-black: 47, 43, 35;
  --color-foreground: 47, 43, 35;
  --font-body-scale: 1.0;
  --color-dark-gray-1: #38332A;
  --text-boxes-shadow-opacity: 0.0;
  --color-brand-6: 146, 145, 114;
  --text-boxes-border-opacity: 0.1;
  --color-pdp-price: 47, 43, 35;
  --font-heading-weight: 400;
  --color-brand-1: 173, 150, 119;
  --primary-font-family: 'Century Old Style', serif;
  --color-link: 47, 43, 35;
  --color-badge-border: 47, 43, 35;
  --inputs-shadow-opacity: 0.0;
}

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 Audocph.
Reference design system (extracted from the live site):
- Palette: #958569, #4d4537, #c7bfb1, #6b635b, #59503f
- Typefaces: Century Old Style, Grot 12
- 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/audocph-com--collections-mingle-sofa

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Century Old Style

24px

400

1px

Aa Bb Cc

Century Old Style

20px

400

1.1

Aa Bb Cc

body

Century Old Style

16px

400

1.3

0.2px

Aa Bb Cc

button

Grot 12

16px

400

1.3

0.2px

Aa Bb Cc

:root { --color-dominant: #958569; --color-surface: #4d4537; --color-ink: #c7bfb1; --color-accent: #6b635b; --color-detail: #59503f; } /* CSS variables exposed by source */ :root { --color-base-background-2: 245, 243, 235; --color-card-hover: 47, 43, 35; --text-boxes-shadow-visible: 0; --color-medium-gray-1: #635a5a; --color-brand-4: 166, 118, 56; --font-heading-style: normal; --color-medium-gray-3: #817E74; --spacing-sections-desktop: 0px; --font-body-family: 'Century Old Style', serif; --color-white: 255, 255, 255; --color-brand-5: 192, 183, 176; --color-light-gray-3: #F5F3EB; --color-base-text: 47, 43, 35; --color-brand-3: 200, 191, 176; --color-base-outline-button-labels: 47, 43, 35; --color-background: 245, 243, 235; --color-base-accent-1: 47, 43, 35; --color-badge-background: 245, 243, 235; --color-button-text: 255, 255, 255; --spacing-sections-mobile: 0px; --color-light-gray-1: #C6C6C6; --color-button: 47, 43, 35; --color-base-solid-button-labels: 255, 255, 255; --font-body-weight-bold: 700; --color-text-white: #fff; --font-heading-scale: 1.0; --color-base-accent-2: 51, 79, 180; --text-boxes-border-width: 0px; --color-pdp-price-del: 166, 163, 155; --color-base-background-1: 245, 243, 235; --color-light-gray-2: #DAD7CE; --color-dark-gray-2: #2F2B23; --color-icon: rgb(47, 43, 35); --color-shadow: 47, 43, 35; --color-secondary: 233, 227, 211; --color-medium-gray-2: #8a8383; --text-boxes-shadow-blur-radius: 5px; --secondary-font-family: 'Grot 12', sans-serif; --text-boxes-radius: 0px; --font-body-style: normal; --font-body-weight: 400; --text-boxes-shadow-horizontal-offset: 0px; --text-boxes-shadow-vertical-offset: 4px; --color-brand-2: 150, 90, 62; --color-primary: 245, 243, 235; --font-heading-family: 'Century Old Style', serif; --color-black: 47, 43, 35; --color-foreground: 47, 43, 35; --font-body-scale: 1.0; --color-dark-gray-1: #38332A; --text-boxes-shadow-opacity: 0.0; --color-brand-6: 146, 145, 114; --text-boxes-border-opacity: 0.1; --color-pdp-price: 47, 43, 35; --font-heading-weight: 400; --color-brand-1: 173, 150, 119; --primary-font-family: 'Century Old Style', serif; --color-link: 47, 43, 35; --color-badge-border: 47, 43, 35; --inputs-shadow-opacity: 0.0; }

Build a landing page in the visual style of Audocph. Reference design system (extracted from the live site): - Palette: #958569, #4d4537, #c7bfb1, #6b635b, #59503f - Typefaces: Century Old Style, Grot 12 - 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/audocph-com--collections-mingle-sofa