№ onepagelove-com--jam

Part of Onepagelove - 7 pages captured →

Onepagelove

Deep charcoal expanse, crisp sans-serif clarity, structured digital serenity.

Ecosystem Indexminimalism editorial swiss medialight

The layout prioritizes a clean, grid-based structure with distinct sections for navigation, curated links, and a brief description. The design feels refined and purposeful, emphasizing clarity and a sense of established authority. · one page websites, web design curation, portfolio grid, minimalist design, editorial web, website inspiration, design resource

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

SwatchHexOKLCHSuggested roleCopy

Hex#bf4f2e
OKLCHoklch(56.9% 0.152 37)
RoleDominant
find sites →
Hex#282450
OKLCHoklch(29.0% 0.078 285)
RoleSurface
find sites →
Hex#b562ec
OKLCHoklch(65.1% 0.207 310)
RoleInk
find sites →
Hex#5d9c96
OKLCHoklch(64.8% 0.066 188)
RoleAccent
find sites →
Hex#a4c4d4
OKLCHoklch(80.2% 0.041 230)
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	Geist	32px	500	1.06	-0.8px	Aa Bb Cc
h2	Geist	17px	500	1.29	-0.2px	Aa Bb Cc
body	-apple-system	13px	400	1	0	Aa Bb Cc
button	Geist	32px	500	1.4	0	Aa Bb Cc

Spacing scale

20px

Radius scale

0px

8px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #bf4f2e;
  --color-surface: #282450;
  --color-ink: #b562ec;
  --color-accent: #5d9c96;
  --color-detail: #a4c4d4;
}

/* CSS variables exposed by source */
:root {
  --bg-header-sub: hsl(25, 18%, 84%);
  --bg-code: hsl(25, 18%, 96%);
  --text-secondary: hsl(25, 18%, 42%);
  --bg-nav: hsl(25, 18%, 88%);
  --accent-header: hsl(25, 18%, 92%);
  --text-on-header: hsl(25, 18%, 15%);
  --bg-header-dropdown: hsl(25, 18%, 96%);
  --border-default: hsl(25, 18%, 84%);
  --text-body: hsl(25, 18%, 52%);
  --accent: #D94F5C;
  --bg-search: hsl(25, 18%, 92%);
  --text-title: hsl(25, 18%, 15%);
  --bg-browser: hsl(25, 18%, 96%);
  --text-muted: hsl(25, 18%, 52%);
  --border-nav: hsl(25, 18%, 84%);
  --border-dark: hsl(25, 18%, 84%);
  --border-light: hsl(25, 18%, 92%);
  --accent-hover: #C4454F;
  --text-faint: hsl(25, 18%, 62%);
  --bg-header: hsl(25, 18%, 92%);
  --bg-surface: hsl(25, 18%, 84%);
  --border-header: hsl(25, 18%, 84%);
  --shadow-dropdown: 0px 10px 30px -5px rgba(0,0,0,0.12);
  --bg-page: #fff;
  --shadow-color: rgba(30, 28, 24, 0.08);
  --border-search: hsl(25, 18%, 84%);
  --header-title-lh: 34px;
  --opl-search-bg: #FFFEFC;
  --selection-bg: #D94F5C;
  --opl-search-ink-soft: hsl(38, 10%, 58%);
  --beige-100: hsl(25, 18%, 92%);
  --beige-50: hsl(25, 18%, 96%);
  --opl-search-rule: #E8DFCE;
  --beige-s: 18%;
  --opl-search-accent-bg-hover: hsl(130, 22%, 78%);
  --opl-search-ink-faint: hsl(38, 12%, 75%);
  --beige-800: hsl(25, 18%, 32%);
  --beige-200: hsl(25, 18%, 88%);
  --beige-500: hsl(25, 18%, 62%);
  --nav-parent: hsl(25, 18%, 42%);
  --opl-search-ink-mid: hsl(38, 11%, 38%);
  --beige-900: hsl(25, 18%, 15%);
  --beige-300: hsl(25, 18%, 84%);
  --selection-text: #FFFFFF;
  --nav-child: hsl(25, 18%, 42%);
  --beige-400: hsl(25, 18%, 80%);
  --beige-h: 25;
  --opl-search-accent: hsl(130, 30%, 26%);
  --header-desc-size: 17px;
  --header-title-ls: -0.8px;
  --beige-600: hsl(25, 18%, 52%);
  --header-desc-lh: 28px;
  --opl-search-bg-soft: #F7F2E8;
  --blue-hover: #11ACF4;
  --nav-child-hover: hsl(25, 18%, 15%);
  --blue: #11C1F4;
  --opl-search-ink: hsl(38, 14%, 13%);
  --header-desc-ls: -0.1px;
  --opl-search-bg-soft-hover: #EFE6D2;
  --opl-search-accent-bg: hsl(130, 22%, 86%);
}

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 Onepagelove.
Reference design system (extracted from the live site):
- Palette: #bf4f2e, #282450, #b562ec, #5d9c96, #a4c4d4
- Typefaces: Geist, -apple-system
- Macrostructure: Ecosystem Index
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/onepagelove-com--jam

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Geist

32px

500

1.06

-0.8px

Aa Bb Cc

Geist

17px

500

1.29

-0.2px

Aa Bb Cc

body

-apple-system

13px

400

Aa Bb Cc

button

Geist

32px

500

1.4

Aa Bb Cc

:root { --color-dominant: #bf4f2e; --color-surface: #282450; --color-ink: #b562ec; --color-accent: #5d9c96; --color-detail: #a4c4d4; } /* CSS variables exposed by source */ :root { --bg-header-sub: hsl(25, 18%, 84%); --bg-code: hsl(25, 18%, 96%); --text-secondary: hsl(25, 18%, 42%); --bg-nav: hsl(25, 18%, 88%); --accent-header: hsl(25, 18%, 92%); --text-on-header: hsl(25, 18%, 15%); --bg-header-dropdown: hsl(25, 18%, 96%); --border-default: hsl(25, 18%, 84%); --text-body: hsl(25, 18%, 52%); --accent: #D94F5C; --bg-search: hsl(25, 18%, 92%); --text-title: hsl(25, 18%, 15%); --bg-browser: hsl(25, 18%, 96%); --text-muted: hsl(25, 18%, 52%); --border-nav: hsl(25, 18%, 84%); --border-dark: hsl(25, 18%, 84%); --border-light: hsl(25, 18%, 92%); --accent-hover: #C4454F; --text-faint: hsl(25, 18%, 62%); --bg-header: hsl(25, 18%, 92%); --bg-surface: hsl(25, 18%, 84%); --border-header: hsl(25, 18%, 84%); --shadow-dropdown: 0px 10px 30px -5px rgba(0,0,0,0.12); --bg-page: #fff; --shadow-color: rgba(30, 28, 24, 0.08); --border-search: hsl(25, 18%, 84%); --header-title-lh: 34px; --opl-search-bg: #FFFEFC; --selection-bg: #D94F5C; --opl-search-ink-soft: hsl(38, 10%, 58%); --beige-100: hsl(25, 18%, 92%); --beige-50: hsl(25, 18%, 96%); --opl-search-rule: #E8DFCE; --beige-s: 18%; --opl-search-accent-bg-hover: hsl(130, 22%, 78%); --opl-search-ink-faint: hsl(38, 12%, 75%); --beige-800: hsl(25, 18%, 32%); --beige-200: hsl(25, 18%, 88%); --beige-500: hsl(25, 18%, 62%); --nav-parent: hsl(25, 18%, 42%); --opl-search-ink-mid: hsl(38, 11%, 38%); --beige-900: hsl(25, 18%, 15%); --beige-300: hsl(25, 18%, 84%); --selection-text: #FFFFFF; --nav-child: hsl(25, 18%, 42%); --beige-400: hsl(25, 18%, 80%); --beige-h: 25; --opl-search-accent: hsl(130, 30%, 26%); --header-desc-size: 17px; --header-title-ls: -0.8px; --beige-600: hsl(25, 18%, 52%); --header-desc-lh: 28px; --opl-search-bg-soft: #F7F2E8; --blue-hover: #11ACF4; --nav-child-hover: hsl(25, 18%, 15%); --blue: #11C1F4; --opl-search-ink: hsl(38, 14%, 13%); --header-desc-ls: -0.1px; --opl-search-bg-soft-hover: #EFE6D2; --opl-search-accent-bg: hsl(130, 22%, 86%); }

Build a landing page in the visual style of Onepagelove. Reference design system (extracted from the live site): - Palette: #bf4f2e, #282450, #b562ec, #5d9c96, #a4c4d4 - Typefaces: Geist, -apple-system - Macrostructure: Ecosystem Index 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/onepagelove-com--jam