№ aspensearch-com

Aspen Search

Cold Swiss precision, stark black grids meeting a neon mint glow

Split Studioswiss minimalism agencylight

A rigid four-quadrant grid layout utilizing high-contrast blocks and halftone dot patterns. The typography is a clean, oversized sans-serif that emphasizes a structured, architectural feel. · swiss design grid, halftone pattern web, high contrast layout, minimalist executive search, quadrant hero section, brutalist fintech

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

SwatchHexOKLCHSuggested roleCopy

Hex#0af474
OKLCHoklch(84.6% 0.231 150)
RoleDominant
find sites →
Hex#a3fbcb
OKLCHoklch(91.9% 0.108 159)
RoleSurface
find sites →
Hex#057f3c
OKLCHoklch(52.2% 0.140 151)
RoleInk
find sites →
Hex#698c79
OKLCHoklch(60.8% 0.049 161)
RoleAccent
find sites →
Hex#c3c6c4
OKLCHoklch(82.4% 0.004 157)
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	suisseIntl	181px	450	1	-4%	Aa Bb Cc
h2	suisseIntl	16px	450	1.3	-4%	Aa Bb Cc
h3	suisseIntl	38px	450	1.1	-4%	Aa Bb Cc
body	suisseIntl	16px	450	1.3	-4%	Aa Bb Cc
button	suisseIntl	16px	450	1.3	-4%	Aa Bb Cc

Spacing scale

8px

20px

Radius scale

0px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #0af474;
  --color-surface: #a3fbcb;
  --color-ink: #057f3c;
  --color-accent: #698c79;
  --color-detail: #c3c6c4;
}

/* CSS variables exposed by source */
:root {
  --text-caption-20: calc(.0625rem * 14);
  --radius-4: calc(.0625rem * 4);
  --text-body-30--line-height: 1.1;
  --text-headline-40--line-height: 1;
  --text-digit-10--letter-spacing: -4%;
  --text-headline-40--font-weight: 450;
  --color-black-deep: #000;
  --text-headline-50--letter-spacing: -4%;
  --text-headline-10--font-weight: 450;
  --text-caption-20--line-height: 1;
  --text-caption-10: calc(.0625rem * 12);
  --text-body-20--font-weight: 450;
  --spacing: .0625rem;
  --text-body-30--font-weight: 450;
  --text-body-20--letter-spacing: -2%;
  --font-suisse-intl-mono: "suisseIntlMono", "suisseIntlMono Fallback", ui-monospace, monospace;
  --text-body-30: clamp(calc(.0625rem * 24), calc(.0625rem * 24) + (32 - 24) * calc((100vw - calc(.0625rem * 375)) / (1600 - 375)), calc(.0625rem * 32));
  --color-theme-bg: rgb(255 255 255);
  --text-body-20--line-height: 1.1;
  --text-digit-20: clamp(calc(.0625rem * 80), calc(.0625rem * 80) + (120 - 80) * calc((100vw - calc(.0625rem * 375)) / (1600 - 375)), calc(.0625rem * 120));
  --text-headline-50: clamp(calc(.0625rem * 52), calc(.0625rem * 52) + (200 - 52) * calc((100vw - calc(.0625rem * 375)) / (1600 - 375)), calc(.0625rem * 200));
  --font-mono: "suisseIntlMono", "suisseIntlMono Fallback", ui-monospace, monospace, ui-monospace, monospace;
  --text-caption-10--line-height: 1.1;
  --text-headline-20: clamp(calc(.0625rem * 32), calc(.0625rem * 32) + (48 - 32) * calc((100vw - calc(.0625rem * 375)) / (1600 - 375)), calc(.0625rem * 48));
  --text-caption-20--letter-spacing: -4%;
  --text-headline-30--font-weight: 450;
  --font-suisse-intl: "suisseIntl", "suisseIntl Fallback", Arial, system-ui, sans-serif;
  --font-weight-semibold: 600;
  --text-body-30--letter-spacing: -2%;
  --color-theme-fg: rgb(35 35 35);
  --text-body-20: calc(.0625rem * 24);
  --text-body-10--line-height: 1.3;
  --text-headline-10: clamp(calc(.0625rem * 24), calc(.0625rem * 24) + (40 - 24) * calc((100vw - calc(.0625rem * 375)) / (1600 - 375)), calc(.0625rem * 40));
  --color-white: #fff;
  --color-grey: #d9d9d9;
  --text-headline-50--line-height: .8;
  --text-caption-10--font-weight: 400;
  --font-sans: "suisseIntl", "suisseIntl Fallback", Arial, system-ui, sans-serif, ui-sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-weight-bold: 700;
  --text-headline-50--font-weight: 450;
  --text-digit-30--font-weight: 450;
  --text-headline-40--letter-spacing: -4%;
  --text-digit-30--line-height: 1;
  --text-headline-40: clamp(calc(.0625rem * 40), calc(.0625rem * 40) + (100 - 40) * calc((100vw - calc(.0625rem * 375)) / (1600 - 375)), calc(.0625rem * 100));
  --text-digit-20--line-height: 1;
  --text-digit-10: calc(.0625rem * 80);
  --color-black: #232323;
  --text-headline-10--line-height: 1.1;
  --font-weight-medium: 500;
  --text-headline-10--letter-spacing: -4%;
  --text-digit-20--letter-spacing: -4%;
  --text-digit-30--letter-spacing: -4%;
  --text-headline-20--font-weight: 450;
  --text-caption-20--font-weight: 400;
  --text-caption-10--letter-spacing: -4%;
  --text-digit-30: clamp(calc(.0625rem * 80), calc(.0625rem * 80) + (140 - 80) * calc((100vw - calc(.0625rem * 375)) / (1600 - 375)), calc(.0625rem * 140));
  --text-headline-30--line-height: 1;
  --text-digit-10--line-height: 1;
  --text-headline-30--letter-spacing: -4%;
  --text-digit-20--font-weight: 450;
}

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 Aspen Search.
Reference design system (extracted from the live site):
- Palette: #0af474, #a3fbcb, #057f3c, #698c79, #c3c6c4
- Typefaces: suisseIntl
- Macrostructure: Split Studio
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/aspensearch-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

suisseIntl

181px

450

-4%

Aa Bb Cc

suisseIntl

16px

450

1.3

-4%

Aa Bb Cc

suisseIntl

38px

450

1.1

-4%

Aa Bb Cc

body

suisseIntl

16px

450

1.3

-4%

Aa Bb Cc

button

suisseIntl

16px

450

1.3

-4%

Aa Bb Cc

:root { --color-dominant: #0af474; --color-surface: #a3fbcb; --color-ink: #057f3c; --color-accent: #698c79; --color-detail: #c3c6c4; } /* CSS variables exposed by source */ :root { --text-caption-20: calc(.0625rem * 14); --radius-4: calc(.0625rem * 4); --text-body-30--line-height: 1.1; --text-headline-40--line-height: 1; --text-digit-10--letter-spacing: -4%; --text-headline-40--font-weight: 450; --color-black-deep: #000; --text-headline-50--letter-spacing: -4%; --text-headline-10--font-weight: 450; --text-caption-20--line-height: 1; --text-caption-10: calc(.0625rem * 12); --text-body-20--font-weight: 450; --spacing: .0625rem; --text-body-30--font-weight: 450; --text-body-20--letter-spacing: -2%; --font-suisse-intl-mono: "suisseIntlMono", "suisseIntlMono Fallback", ui-monospace, monospace; --text-body-30: clamp(calc(.0625rem * 24), calc(.0625rem * 24) + (32 - 24) * calc((100vw - calc(.0625rem * 375)) / (1600 - 375)), calc(.0625rem * 32)); --color-theme-bg: rgb(255 255 255); --text-body-20--line-height: 1.1; --text-digit-20: clamp(calc(.0625rem * 80), calc(.0625rem * 80) + (120 - 80) * calc((100vw - calc(.0625rem * 375)) / (1600 - 375)), calc(.0625rem * 120)); --text-headline-50: clamp(calc(.0625rem * 52), calc(.0625rem * 52) + (200 - 52) * calc((100vw - calc(.0625rem * 375)) / (1600 - 375)), calc(.0625rem * 200)); --font-mono: "suisseIntlMono", "suisseIntlMono Fallback", ui-monospace, monospace, ui-monospace, monospace; --text-caption-10--line-height: 1.1; --text-headline-20: clamp(calc(.0625rem * 32), calc(.0625rem * 32) + (48 - 32) * calc((100vw - calc(.0625rem * 375)) / (1600 - 375)), calc(.0625rem * 48)); --text-caption-20--letter-spacing: -4%; --text-headline-30--font-weight: 450; --font-suisse-intl: "suisseIntl", "suisseIntl Fallback", Arial, system-ui, sans-serif; --font-weight-semibold: 600; --text-body-30--letter-spacing: -2%; --color-theme-fg: rgb(35 35 35); --text-body-20: calc(.0625rem * 24); --text-body-10--line-height: 1.3; --text-headline-10: clamp(calc(.0625rem * 24), calc(.0625rem * 24) + (40 - 24) * calc((100vw - calc(.0625rem * 375)) / (1600 - 375)), calc(.0625rem * 40)); --color-white: #fff; --color-grey: #d9d9d9; --text-headline-50--line-height: .8; --text-caption-10--font-weight: 400; --font-sans: "suisseIntl", "suisseIntl Fallback", Arial, system-ui, sans-serif, ui-sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-weight-bold: 700; --text-headline-50--font-weight: 450; --text-digit-30--font-weight: 450; --text-headline-40--letter-spacing: -4%; --text-digit-30--line-height: 1; --text-headline-40: clamp(calc(.0625rem * 40), calc(.0625rem * 40) + (100 - 40) * calc((100vw - calc(.0625rem * 375)) / (1600 - 375)), calc(.0625rem * 100)); --text-digit-20--line-height: 1; --text-digit-10: calc(.0625rem * 80); --color-black: #232323; --text-headline-10--line-height: 1.1; --font-weight-medium: 500; --text-headline-10--letter-spacing: -4%; --text-digit-20--letter-spacing: -4%; --text-digit-30--letter-spacing: -4%; --text-headline-20--font-weight: 450; --text-caption-20--font-weight: 400; --text-caption-10--letter-spacing: -4%; --text-digit-30: clamp(calc(.0625rem * 80), calc(.0625rem * 80) + (140 - 80) * calc((100vw - calc(.0625rem * 375)) / (1600 - 375)), calc(.0625rem * 140)); --text-headline-30--line-height: 1; --text-digit-10--line-height: 1; --text-headline-30--letter-spacing: -4%; --text-digit-20--font-weight: 450; }

Build a landing page in the visual style of Aspen Search. Reference design system (extracted from the live site): - Palette: #0af474, #a3fbcb, #057f3c, #698c79, #c3c6c4 - Typefaces: suisseIntl - Macrostructure: Split Studio 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/aspensearch-com