№ ecal-ch

Ecal Ch

Crisp, cool geometry; stark white space, bold sans serif, a precise, technical clarity.

Specimenminimalism swiss editorial education culturelight

The page prioritizes typographic display, using a stark black and white palette and a clean layout to showcase the exhibition's title. The visual hierarchy emphasizes the bold, condensed lettering, creating a sense of intellectual rigor. · typography exhibition, design school, type specimen, minimalist design, black and white, editorial design, paris typography

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

SwatchHexOKLCHSuggested roleCopy

Hex#fb4f36
OKLCHoklch(66.6% 0.212 31)
RoleDominant
find sites →
Hex#821202
OKLCHoklch(39.0% 0.148 32)
RoleSurface
find sites →
Hex#84d3f3
OKLCHoklch(82.7% 0.090 226)
RoleInk
find sites →
Hex#7c7c7c
OKLCHoklch(58.6% 0.000 90)
RoleAccent
find sites →
Hex#bc949c
OKLCHoklch(70.6% 0.049 5)
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	Renens	96px	500	0.95	-3.84px	Aa Bb Cc
h2	Renens	64px	500	0.95	-1.92px	Aa Bb Cc
h3	Renens	18px	500	1.1	-0.36px	Aa Bb Cc
body	Renens	18px	500	1.15	-0.18px	Aa Bb Cc
button	Renens	18px	500	1.1	0	Aa Bb Cc

Spacing scale

8px

10px

16px

32px

50px

56px

80px

Radius scale

0px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #fb4f36;
  --color-surface: #821202;
  --color-ink: #84d3f3;
  --color-accent: #7c7c7c;
  --color-detail: #bc949c;
}

/* CSS variables exposed by source */
:root {
  --handle-border: 1px solid rgb(122 144 158);
  --input-margin: .375rem;
  --error-font-size: .875rem;
  --valid-border-color: #00BE00;
  --green: #00BE00;
  --lightgrey: #f3f3f3;
  --label-line-height: 1.5rem;
  --invalid-background: transparent;
  --grey: #959595;
  --valid-background: transparent;
  --input-padding-right: .5625rem;
  --handle-width: 1.25rem;
  --input-line-height: 1.5rem;
  --label-font-size: 1rem;
  --black: black;
  --darkgrey: #666666;
  --input-border-radius: 0rem;
  --track-border: none;
  --label-input-margin: .1875rem;
  --white: white;
  --invalid-box-shadow: none;
  --success: #8aa231;
  --input-background: transparent;
  --red: #FF0000;
  --input-padding-left: .5625rem;
  --fieldset-margin: 2rem;
  --fieldset-input-margin: 2rem;
  --focus-shadow: inset 0 0 0 1px currentcolor;
  --input-border-width: 1px;
  --input-height: 2.375rem;
  --invalid-border-color: #FF0000;
  --track-background: #eeeeee;
  --disabled-filter: opacity(.4);
  --focus-border-color: currentcolor;
  --valid-box-shadow: none;
  --input-shadow: none;
  --seagreen: #3CD092;
  --range-height: 2.375rem;
  --error: #DC0F0E;
  --input-font-size: 1.125rem;
  --focus-background: transparent;
  --track-height: .375rem;
  --label-margin: 1.125rem;
  --warn: #e6ba1a;
  --lime: #d4e926;
  --help-font-size: .875rem;
  --track-shadow: inset 0 .0625rem .25rem rgba(0,0,0,.2);
  --info: #46789a;
  --input-color: currentcolor;
  --handle-background: white;
  --input-border-color: currentcolor;
}

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 Ecal Ch.
Reference design system (extracted from the live site):
- Palette: #fb4f36, #821202, #84d3f3, #7c7c7c, #bc949c
- Typefaces: Renens
- Macrostructure: Specimen
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/ecal-ch

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Renens

96px

500

0.95

-3.84px

Aa Bb Cc

Renens

64px

500

0.95

-1.92px

Aa Bb Cc

Renens

18px

500

1.1

-0.36px

Aa Bb Cc

body

Renens

18px

500

1.15

-0.18px

Aa Bb Cc

button

Renens

18px

500

1.1

Aa Bb Cc

:root { --color-dominant: #fb4f36; --color-surface: #821202; --color-ink: #84d3f3; --color-accent: #7c7c7c; --color-detail: #bc949c; } /* CSS variables exposed by source */ :root { --handle-border: 1px solid rgb(122 144 158); --input-margin: .375rem; --error-font-size: .875rem; --valid-border-color: #00BE00; --green: #00BE00; --lightgrey: #f3f3f3; --label-line-height: 1.5rem; --invalid-background: transparent; --grey: #959595; --valid-background: transparent; --input-padding-right: .5625rem; --handle-width: 1.25rem; --input-line-height: 1.5rem; --label-font-size: 1rem; --black: black; --darkgrey: #666666; --input-border-radius: 0rem; --track-border: none; --label-input-margin: .1875rem; --white: white; --invalid-box-shadow: none; --success: #8aa231; --input-background: transparent; --red: #FF0000; --input-padding-left: .5625rem; --fieldset-margin: 2rem; --fieldset-input-margin: 2rem; --focus-shadow: inset 0 0 0 1px currentcolor; --input-border-width: 1px; --input-height: 2.375rem; --invalid-border-color: #FF0000; --track-background: #eeeeee; --disabled-filter: opacity(.4); --focus-border-color: currentcolor; --valid-box-shadow: none; --input-shadow: none; --seagreen: #3CD092; --range-height: 2.375rem; --error: #DC0F0E; --input-font-size: 1.125rem; --focus-background: transparent; --track-height: .375rem; --label-margin: 1.125rem; --warn: #e6ba1a; --lime: #d4e926; --help-font-size: .875rem; --track-shadow: inset 0 .0625rem .25rem rgba(0,0,0,.2); --info: #46789a; --input-color: currentcolor; --handle-background: white; --input-border-color: currentcolor; }

Build a landing page in the visual style of Ecal Ch. Reference design system (extracted from the live site): - Palette: #fb4f36, #821202, #84d3f3, #7c7c7c, #bc949c - Typefaces: Renens - Macrostructure: Specimen 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/ecal-ch