№ palaisdetokyo-com

Palaisdetokyo

Brutal white expanse, stark geometric type, and muted terracotta hues evoke detached contemplation.

Ecosystem Indexminimalism editorial monochrome brutalism dark mode culturedark

The layout prioritizes a strong visual hierarchy with a central image and a grid of text blocks. Typography is clean and impactful, with a focus on large-scale headings and a restrained color palette. The overall mood is sophisticated and understated. · modern art website, minimalist gallery, black and white portfolio, art museum design, editorial website, abstract art, cultural institution, dark website, sophisticated design, art platform

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: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#8f331d
OKLCHoklch(45.1% 0.130 35)
RoleDominant
find sites →
Hex#6c1f0e
OKLCHoklch(36.0% 0.113 34)
RoleSurface
find sites →
Hex#d4bda4
OKLCHoklch(81.1% 0.043 69)
RoleInk
find sites →
Hex#926d59
OKLCHoklch(56.7% 0.056 50)
RoleAccent
find sites →
Hex#c0ad95
OKLCHoklch(75.7% 0.040 74)
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	Gaffer	50px	700	1.1	Aa Bb Cc
h2	Gaffer	90px	700	1	Aa Bb Cc
h3	silka	40px	700	0.9	Aa Bb Cc
body	silka	22px	700	1.36	Aa Bb Cc
button	silka	14px	700	1.36	Aa Bb Cc

Spacing scale

10px

16px

20px

29px

40px

47px

60px

85px

150px

Radius scale

0px

4px

5px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #8f331d;
  --color-surface: #6c1f0e;
  --color-ink: #d4bda4;
  --color-accent: #926d59;
  --color-detail: #c0ad95;
}

/* CSS variables exposed by source */
:root {
  --closed: 'Le Palais est fermé tous les mardis';
  --vhSmall: 9px;
  --tacTitleBanner: "☝️ 🍪";
  --vh: 9px;
}

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 Palaisdetokyo.
Reference design system (extracted from the live site):
- Palette: #8f331d, #6c1f0e, #d4bda4, #926d59, #c0ad95
- Typefaces: Gaffer, silka, Arial
- Macrostructure: Ecosystem Index
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/palaisdetokyo-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Gaffer

50px

700

1.1

Aa Bb Cc

Gaffer

90px

700

Aa Bb Cc

silka

40px

700

0.9

Aa Bb Cc

body

silka

22px

700

1.36

Aa Bb Cc

button

silka

14px

700

1.36

Aa Bb Cc

:root { --color-dominant: #8f331d; --color-surface: #6c1f0e; --color-ink: #d4bda4; --color-accent: #926d59; --color-detail: #c0ad95; } /* CSS variables exposed by source */ :root { --closed: 'Le Palais est fermé tous les mardis'; --vhSmall: 9px; --tacTitleBanner: "☝️ 🍪"; --vh: 9px; }

Build a landing page in the visual style of Palaisdetokyo. Reference design system (extracted from the live site): - Palette: #8f331d, #6c1f0e, #d4bda4, #926d59, #c0ad95 - Typefaces: Gaffer, silka, Arial - Macrostructure: Ecosystem Index 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/palaisdetokyo-com