№ craft-wild-as--bcp

Wild · Bcp

Clinical Swiss precision, bold sans-serifs over primary pixels and stark white

Long Documentminimalism swiss brutalism agencylight

A stark, grid-backed layout utilizing heavy sans-serif typography and a high-contrast monochrome palette. The bottom of the page is anchored by a distorted, pixelated color band that breaks the rigid minimalism. · swiss design, grid layout, technical typography, brutalist ai page, minimalist agency blog, pixel art accent

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#ebd713
OKLCHoklch(86.9% 0.180 103)
RoleDominant
find sites →
Hex#f3d56a
OKLCHoklch(87.7% 0.131 94)
RoleSurface
find sites →
Hex#7a7009
OKLCHoklch(53.8% 0.110 103)
RoleInk
find sites →
Hex#a49454
OKLCHoklch(66.6% 0.086 96)
RoleAccent
find sites →
Hex#b4cca4
OKLCHoklch(81.7% 0.061 133)
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	Sneak	104px	400	0.92	-3.64px	Aa Bb Cc
h2	Sneak	40px	400	1.05	-1px	Aa Bb Cc
h3	Sneak	46px	400	1.04	-1.15px	Aa Bb Cc
body	Sneak	16px	400	1.5	0	Aa Bb Cc
button	Sneak	16px	400	1.5	0	Aa Bb Cc

Spacing scale

54px

63px

99px

144px

Radius scale

0px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #ebd713;
  --color-surface: #f3d56a;
  --color-ink: #7a7009;
  --color-accent: #a49454;
  --color-detail: #b4cca4;
}

/* CSS variables exposed by source */
:root {
  --paper: #FFFFFF;
  --ink: #0A0A0A;
  --maxw: 1080px;
  --muted: #8b8b8b;
  --line-2: rgba(10,10,10,.06);
  --red: #e0492a;
  --line: rgba(10,10,10,.12);
  --mono: "SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  --neon: #d8ff00;
  --gutter: clamp(20px,5vw,80px);
  --readw: 33rem;
}

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 Wild · Bcp.
Reference design system (extracted from the live site):
- Palette: #ebd713, #f3d56a, #7a7009, #a49454, #b4cca4
- Typefaces: Sneak
- Macrostructure: Long Document
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/craft-wild-as--bcp

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Sneak

104px

400

0.92

-3.64px

Aa Bb Cc

Sneak

40px

400

1.05

-1px

Aa Bb Cc

Sneak

46px

400

1.04

-1.15px

Aa Bb Cc

body

Sneak

16px

400

1.5

Aa Bb Cc

button

Sneak

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #ebd713; --color-surface: #f3d56a; --color-ink: #7a7009; --color-accent: #a49454; --color-detail: #b4cca4; } /* CSS variables exposed by source */ :root { --paper: #FFFFFF; --ink: #0A0A0A; --maxw: 1080px; --muted: #8b8b8b; --line-2: rgba(10,10,10,.06); --red: #e0492a; --line: rgba(10,10,10,.12); --mono: "SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; --neon: #d8ff00; --gutter: clamp(20px,5vw,80px); --readw: 33rem; }

Build a landing page in the visual style of Wild · Bcp. Reference design system (extracted from the live site): - Palette: #ebd713, #f3d56a, #7a7009, #a49454, #b4cca4 - Typefaces: Sneak - Macrostructure: Long Document 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/craft-wild-as--bcp