№ pitch-com--blog

Pitch — Blog

Electric violet expanse, clean geometric forms, precise sans-serif whispers.

Feature Stackminimalism swiss brutalism saaslight

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 · saturated · cool

SwatchHexOKLCHSuggested roleCopy

Hex#5c20eb
OKLCHoklch(48.6% 0.265 284)
RoleDominant
find sites →
Hex#2b0a79
OKLCHoklch(29.7% 0.163 284)
RoleSurface
find sites →
Hex#a467f9
OKLCHoklch(64.8% 0.210 300)
RoleInk
find sites →
Hex#747484
OKLCHoklch(56.5% 0.024 286)
RoleAccent
find sites →
Hex#cccbad
OKLCHoklch(83.5% 0.041 106)
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	Mark Pro Bold	180px	700	0.8	-7.2px	Aa Bb Cc
h2	Eina 03 Regular	20px	400	1.6	-0.4px	Aa Bb Cc
h3	Mark Pro Bold	32px	700	1.2	-1.28px	Aa Bb Cc
body	sans-serif	12px	400	1.4	0	Aa Bb Cc
button	sans-serif	12px	400	1.4	0	Aa Bb Cc

Spacing scale

10px

80px

120px

Radius scale

0px

4px

8px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #5c20eb;
  --color-surface: #2b0a79;
  --color-ink: #a467f9;
  --color-accent: #747484;
  --color-detail: #cccbad;
}

/* CSS variables exposed by source */
:root {
  --one-if-corner-shape-supported: 1;
}

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 Pitch — Blog.
Reference design system (extracted from the live site):
- Palette: #5c20eb, #2b0a79, #a467f9, #747484, #cccbad
- Typefaces: Mark Pro Bold, Eina 03 Regular, sans-serif
- Macrostructure: Feature Stack
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/pitch-com--blog

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Mark Pro Bold

180px

700

0.8

-7.2px

Aa Bb Cc

Eina 03 Regular

20px

400

1.6

-0.4px

Aa Bb Cc

Mark Pro Bold

32px

700

1.2

-1.28px

Aa Bb Cc

body

sans-serif

12px

400

1.4

Aa Bb Cc

button

sans-serif

12px

400

1.4

Aa Bb Cc

:root { --color-dominant: #5c20eb; --color-surface: #2b0a79; --color-ink: #a467f9; --color-accent: #747484; --color-detail: #cccbad; } /* CSS variables exposed by source */ :root { --one-if-corner-shape-supported: 1; }

Build a landing page in the visual style of Pitch — Blog. Reference design system (extracted from the live site): - Palette: #5c20eb, #2b0a79, #a467f9, #747484, #cccbad - Typefaces: Mark Pro Bold, Eina 03 Regular, sans-serif - Macrostructure: Feature Stack 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/pitch-com--blog