№ craft-wild-as

Wild

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

Marquee Heroswiss minimalism agencylight

High-contrast Swiss-inspired layout featuring heavy sans-serif typography and a generative pixel-art wave. The composition relies on extreme white space and a rigid grid for a technical, engineered feel. · swiss design agency, pixel art hero, minimalist typography, high contrast layout, technical agency landing page

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

SwatchHexOKLCHSuggested roleCopy

Hex#dcfc04
OKLCHoklch(93.5% 0.219 119)
RoleDominant
find sites →
Hex#f6d36d
OKLCHoklch(87.6% 0.127 91)
RoleSurface
find sites →
Hex#1e2544
OKLCHoklch(27.5% 0.058 272)
RoleInk
find sites →
Hex#6b7385
OKLCHoklch(55.5% 0.030 266)
RoleAccent
find sites →
Hex#b3b9ca
OKLCHoklch(78.6% 0.025 270)
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	75px	400	0.92	-2.6208px	Aa Bb Cc
h2	Sneak	46px	400	1.06	-0.92px	Aa Bb Cc
body	Sneak	16px	400	1.5	0	Aa Bb Cc
button	SFMono-Regular	10px	400	1.5	0	Aa Bb Cc

Spacing scale

14px

35px

98px

126px

168px

Radius scale

0px

6px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #dcfc04;
  --color-surface: #f6d36d;
  --color-ink: #1e2544;
  --color-accent: #6b7385;
  --color-detail: #b3b9ca;
}

/* CSS variables exposed by source */
:root {
  --paper: #FFFFFF;
  --ink: #0A0A0A;
  --radius: 26px;
  --maxw: 1176px;
  --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: 56px;
  --cell: 14px;
  --readw: 34ch;
}

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.
Reference design system (extracted from the live site):
- Palette: #dcfc04, #f6d36d, #1e2544, #6b7385, #b3b9ca
- Typefaces: Sneak, SFMono-Regular
- Macrostructure: Marquee Hero
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

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Sneak

75px

400

0.92

-2.6208px

Aa Bb Cc

Sneak

46px

400

1.06

-0.92px

Aa Bb Cc

body

Sneak

16px

400

1.5

Aa Bb Cc

button

SFMono-Regular

10px

400

1.5

Aa Bb Cc

:root { --color-dominant: #dcfc04; --color-surface: #f6d36d; --color-ink: #1e2544; --color-accent: #6b7385; --color-detail: #b3b9ca; } /* CSS variables exposed by source */ :root { --paper: #FFFFFF; --ink: #0A0A0A; --radius: 26px; --maxw: 1176px; --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: 56px; --cell: 14px; --readw: 34ch; }

Build a landing page in the visual style of Wild. Reference design system (extracted from the live site): - Palette: #dcfc04, #f6d36d, #1e2544, #6b7385, #b3b9ca - Typefaces: Sneak, SFMono-Regular - Macrostructure: Marquee Hero 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