№ dversostudio-io

dverso studio - Web Design & Development

Cool, geometric grid—muted beige, stark black, precise sans-serif—a digital atelier.

Portfolio Gridminimalism monochrome agency portfoliolight

dverso studio - Web Design & Development - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

dverso studio - Web Design & Development - full page scroll

dverso studio - Web Design & Development - mobile full page

Palette

Click any value to copy. Roles are suggestions, not gospel.

SwatchHexOKLCHSuggested roleCopy

Hex#da5e30
OKLCHoklch(63.1% 0.167 40)
RoleDominant
find sites →
Hex#fcf4e3
OKLCHoklch(96.9% 0.024 86)
RoleSurface
find sites →
Hex#8e2a12
OKLCHoklch(43.6% 0.139 34)
RoleInk
find sites →
Hex#a8875e
OKLCHoklch(64.5% 0.069 72)
RoleAccent
find sites →
Hex#ccc5b7
OKLCHoklch(82.5% 0.021 85)
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	Sample
h1	Pixelify Sans	42px	100	0.78	Aa Bb Cc
h2	Pixelify Sans	34px	500	1	Aa Bb Cc
body	Geist Mono	16px	400	1.4	Aa Bb Cc
button	Geist Mono	14px	400	1.4	Aa Bb Cc

Spacing scale

50px

Radius scale

0px

14px

34px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #da5e30;
  --color-surface: #fcf4e3;
  --color-ink: #8e2a12;
  --color-accent: #a8875e;
  --color-detail: #ccc5b7;
}

/* CSS variables exposed by source */
:root {
  --grid-gap: 2px;
  --bottom-gutter: 14px;
  --gutter: 14px;
  --grid-size: 50px;
}

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 dverso studio - Web Design & Development.
Reference design system (extracted from the live site):
- Palette: #da5e30, #fcf4e3, #8e2a12, #a8875e, #ccc5b7
- Typefaces: Pixelify Sans, Geist Mono
- Macrostructure: Portfolio Grid
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/dversostudio-io

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Pixelify Sans

42px

100

0.78

Aa Bb Cc

Pixelify Sans

34px

500

Aa Bb Cc

body

Geist Mono

16px

400

1.4

Aa Bb Cc

button

Geist Mono

14px

400

1.4

Aa Bb Cc

:root { --color-dominant: #da5e30; --color-surface: #fcf4e3; --color-ink: #8e2a12; --color-accent: #a8875e; --color-detail: #ccc5b7; } /* CSS variables exposed by source */ :root { --grid-gap: 2px; --bottom-gutter: 14px; --gutter: 14px; --grid-size: 50px; }

Build a landing page in the visual style of dverso studio - Web Design & Development. Reference design system (extracted from the live site): - Palette: #da5e30, #fcf4e3, #8e2a12, #a8875e, #ccc5b7 - Typefaces: Pixelify Sans, Geist Mono - Macrostructure: Portfolio Grid 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/dversostudio-io