№ minimal-gallery--ugo

Part of Minimal Gallery - 7 pages captured →

Minimal Gallery

Crisp, cool geometry; stark white space, assertive sans-serif, a precise, gallery-like stillness.

Ecosystem Indexminimalism editorial swiss dark mode mediadark

The layout prioritizes a clean, grid-based structure with ample white space. Typography is crisp and functional, emphasizing clarity and hierarchy. The overall mood is sophisticated and understated. · minimal gallery, portfolio website, design agency, grid layout, swiss style, clean design, editorial portfolio, website showcase

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

SwatchHexOKLCHSuggested roleCopy

Hex#fb0404
OKLCHoklch(62.1% 0.254 29)
RoleDominant
find sites →
Hex#660708
OKLCHoklch(32.6% 0.126 28)
RoleSurface
find sites →
Hex#dc99b3
OKLCHoklch(75.6% 0.086 354)
RoleInk
find sites →
Hex#a48369
OKLCHoklch(63.5% 0.055 60)
RoleAccent
find sites →
Hex#c6d1dc
OKLCHoklch(85.6% 0.019 248)
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	Inter	34px	600	1.25	-0.34px	Aa Bb Cc
h3	Inter	17px	400	1.4	-0.17px	Aa Bb Cc
body	Inter	17px	400	1.4	-0.17px	Aa Bb Cc
button	Inter	17px	400	1	-0.17px	Aa Bb Cc

Spacing scale

40px

44px

60px

Radius scale

0px

4px

5px

6px

7px

50px

Export

:root {
  --color-dominant: #fb0404;
  --color-surface: #660708;
  --color-ink: #dc99b3;
  --color-accent: #a48369;
  --color-detail: #c6d1dc;
}

/* CSS variables exposed by source */
:root {
  --font--line-height-h3: 1.4;
  --color--font-low-contrast: #939393;
  --color--border-strong: #333333;
  --color--font: #b3b3b3;
  --font--line-height-body: 1.4;
  --font--size-body: 17px;
  --font--line-height-h2: 1.4;
  --color--body: #000000;
  --color--background-contrast: #333333;
  --font--line-height-page-h2: 1.5;
  --font--line-height-page-body: 1.6;
  --color--modal-background: #121212;
  --font--size-h3: 20px;
  --color--background-contrast-50: #282828;
  --color--font-contrast-50: #d9d9d9;
  --color--button-hover: rgba(255, 255, 255, 0.3);
  --font--size-h1: clamp(22px, 1.96vw, 32px);
  --font--line-height-h1: 1.3;
  --font--size-h2: 26px;
  --color--background: #1a1a1a;
  --color--border: #242424;
  --color--button: rgba(255, 255, 255, 0.2);
  --font--letter-spacing: -0.01em;
  --font--family: 'Inter', sans-serif;
  --color--background-subtle: #181818;
  --font--line-height-page-h3: 1.55;
  --color--font-contrast: #ffffff;
  --header--height: 77px;
  --page--spacing: 40px;
  --filters--button-horizontal-padding: 12px;
  --header--menu-link-padding: 8px;
  --header--menu-spacing: 14px;
  --pagination--button-horizontal-padding: 12px;
}

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 Minimal Gallery.
Reference design system (extracted from the live site):
- Palette: #fb0404, #660708, #dc99b3, #a48369, #c6d1dc
- Typefaces: Inter
- 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/minimal-gallery--ugo

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter

34px

600

1.25

-0.34px

Aa Bb Cc

Inter

17px

400

1.4

-0.17px

Aa Bb Cc

body

Inter

17px

400

1.4

-0.17px

Aa Bb Cc

button

Inter

17px

400

-0.17px

Aa Bb Cc

:root { --color-dominant: #fb0404; --color-surface: #660708; --color-ink: #dc99b3; --color-accent: #a48369; --color-detail: #c6d1dc; } /* CSS variables exposed by source */ :root { --font--line-height-h3: 1.4; --color--font-low-contrast: #939393; --color--border-strong: #333333; --color--font: #b3b3b3; --font--line-height-body: 1.4; --font--size-body: 17px; --font--line-height-h2: 1.4; --color--body: #000000; --color--background-contrast: #333333; --font--line-height-page-h2: 1.5; --font--line-height-page-body: 1.6; --color--modal-background: #121212; --font--size-h3: 20px; --color--background-contrast-50: #282828; --color--font-contrast-50: #d9d9d9; --color--button-hover: rgba(255, 255, 255, 0.3); --font--size-h1: clamp(22px, 1.96vw, 32px); --font--line-height-h1: 1.3; --font--size-h2: 26px; --color--background: #1a1a1a; --color--border: #242424; --color--button: rgba(255, 255, 255, 0.2); --font--letter-spacing: -0.01em; --font--family: 'Inter', sans-serif; --color--background-subtle: #181818; --font--line-height-page-h3: 1.55; --color--font-contrast: #ffffff; --header--height: 77px; --page--spacing: 40px; --filters--button-horizontal-padding: 12px; --header--menu-link-padding: 8px; --header--menu-spacing: 14px; --pagination--button-horizontal-padding: 12px; }

Build a landing page in the visual style of Minimal Gallery. Reference design system (extracted from the live site): - Palette: #fb0404, #660708, #dc99b3, #a48369, #c6d1dc - Typefaces: Inter - 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/minimal-gallery--ugo