№ etched-com--progress

Etched · Blog

Clinical industrial void, stark white space meeting heavy charcoal technical geometry

Portfolio Gridminimalism swiss ai developer toolslight

A stark, high-contrast layout using a heavy sans-serif header and an asymmetric grid of large-scale imagery. The design relies on generous white space and a strict monochrome palette to convey industrial precision. · minimalist ai blog, industrial hardware layout, swiss style news grid, high contrast monochrome web, technical portfolio grid

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 · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#d97c22
OKLCHoklch(67.5% 0.149 58)
RoleDominant
find sites →
Hex#eabc64
OKLCHoklch(81.9% 0.119 82)
RoleSurface
find sites →
Hex#8b5d40
OKLCHoklch(52.1% 0.074 53)
RoleInk
find sites →
Hex#837669
OKLCHoklch(57.4% 0.025 67)
RoleAccent
find sites →
Hex#cfc2bb
OKLCHoklch(82.3% 0.018 50)
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	Sohne	41px	400	1.32	-0.82px	Aa Bb Cc
h2	Sohne	21px	400	1.32	-0.42px	Aa Bb Cc
body	Sohne	16px	400	1.5	0	Aa Bb Cc
button	Sohne	16px	400	1.5	0	Aa Bb Cc

Spacing scale

24px

Radius scale

0px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #d97c22;
  --color-surface: #eabc64;
  --color-ink: #8b5d40;
  --color-accent: #837669;
  --color-detail: #cfc2bb;
}

/* CSS variables exposed by source */
:root {
  --space-element-gap: 24px;
  --color-gray-800: lab(16.1051% -1.18239 -11.7533);
  --font-weight-black: 900;
  --space-element-gap-loose: 32px;
  --spacing: .25rem;
  --space-control-x: 12px;
  --font-weight-semibold: 600;
  --color-gray-500: lab(47.7841% -.393182 -10.0268);
  --space-inline-gap-tight: 4px;
  --font-sohne: "Sohne", system-ui, sans-serif;
  --font-weight-extrabold: 800;
  --font-weight-bold: 700;
  --color-red-600: lab(48.4493% 77.4328 61.5452);
  --color-red-500: lab(55.4814% 75.0732 48.8528);
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-weight-thin: 100;
  --font-sohne-mono: "Sohne Mono", monospace;
  --space-control-gap: 12px;
  --space-chrome-dropdown-bottom: 20px;
  --space-section-y-mobile: 64px;
  --tw-ring-offset-shadow: 0 0 #0000;
  --etched-gray-dark-rgb: 229 229 229;
  --tw-inset-shadow-alpha: 100%;
  --tw-ring-shadow: 0 0 #0000;
  --aspect-video: 16 / 9;
  --black-rgb: 0 0 0;
  --black-75: #000000bf;
  --tw-drop-shadow-alpha: 100%;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --light-fill: #0000000a;
  --line: #0003;
  --tw-outline-style: solid;
  --svh: 9px;
  --tw-inset-ring-shadow: 0 0 #0000;
  --paragraph: #000000b3;
  --black-16: #00000029;
  --black-12: #0000001f;
  --tw-translate-z: 0;
  --portrait-surface: #d9d9d9;
  --tw-gradient-via: rgba(0, 0, 0, 0);
  --tw-scale-y: 1;
  --gutter-padding: 24px;
  --black-64: #000000a3;
  --navbar-height: 56px;
  --white-rgb: 255 255 255;
  --tw-translate-y: 0;
  --announcement-bar-height: 56px;
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --not-found-surface: #f4f4f4;
  --black-80: #000c;
  --tw-inset-shadow: 0 0 #0000;
  --tw-ring-offset-color: #fff;
  --tw-gradient-from: rgba(0, 0, 0, 0);
  --tw-shadow-alpha: 100%;
  --tw-gradient-to: rgba(0, 0, 0, 0);
  --site-grid-padding-x: 48px;
}

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 Etched · Blog.
Reference design system (extracted from the live site):
- Palette: #d97c22, #eabc64, #8b5d40, #837669, #cfc2bb
- Typefaces: Sohne
- 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/etched-com--progress

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Sohne

41px

400

1.32

-0.82px

Aa Bb Cc

Sohne

21px

400

1.32

-0.42px

Aa Bb Cc

body

Sohne

16px

400

1.5

Aa Bb Cc

button

Sohne

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #d97c22; --color-surface: #eabc64; --color-ink: #8b5d40; --color-accent: #837669; --color-detail: #cfc2bb; } /* CSS variables exposed by source */ :root { --space-element-gap: 24px; --color-gray-800: lab(16.1051% -1.18239 -11.7533); --font-weight-black: 900; --space-element-gap-loose: 32px; --spacing: .25rem; --space-control-x: 12px; --font-weight-semibold: 600; --color-gray-500: lab(47.7841% -.393182 -10.0268); --space-inline-gap-tight: 4px; --font-sohne: "Sohne", system-ui, sans-serif; --font-weight-extrabold: 800; --font-weight-bold: 700; --color-red-600: lab(48.4493% 77.4328 61.5452); --color-red-500: lab(55.4814% 75.0732 48.8528); --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-medium: 500; --font-weight-normal: 400; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-weight-thin: 100; --font-sohne-mono: "Sohne Mono", monospace; --space-control-gap: 12px; --space-chrome-dropdown-bottom: 20px; --space-section-y-mobile: 64px; --tw-ring-offset-shadow: 0 0 #0000; --etched-gray-dark-rgb: 229 229 229; --tw-inset-shadow-alpha: 100%; --tw-ring-shadow: 0 0 #0000; --aspect-video: 16 / 9; --black-rgb: 0 0 0; --black-75: #000000bf; --tw-drop-shadow-alpha: 100%; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --light-fill: #0000000a; --line: #0003; --tw-outline-style: solid; --svh: 9px; --tw-inset-ring-shadow: 0 0 #0000; --paragraph: #000000b3; --black-16: #00000029; --black-12: #0000001f; --tw-translate-z: 0; --portrait-surface: #d9d9d9; --tw-gradient-via: rgba(0, 0, 0, 0); --tw-scale-y: 1; --gutter-padding: 24px; --black-64: #000000a3; --navbar-height: 56px; --white-rgb: 255 255 255; --tw-translate-y: 0; --announcement-bar-height: 56px; --ease-out: cubic-bezier(0, 0, .2, 1); --not-found-surface: #f4f4f4; --black-80: #000c; --tw-inset-shadow: 0 0 #0000; --tw-ring-offset-color: #fff; --tw-gradient-from: rgba(0, 0, 0, 0); --tw-shadow-alpha: 100%; --tw-gradient-to: rgba(0, 0, 0, 0); --site-grid-padding-x: 48px; }

Build a landing page in the visual style of Etched · Blog. Reference design system (extracted from the live site): - Palette: #d97c22, #eabc64, #8b5d40, #837669, #cfc2bb - Typefaces: Sohne - 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/etched-com--progress