№ kvs-services

KVS Studio — Product Design & Creative Development

Monochrome, stark digital expanse—geometric forms carved from cool, echoing space.

Specimenminimalism brutalism monochrome agency portfoliolight

KVS is a creative studio building digital products for startups and enterprises. We combine product design, frontend engineering, and 3D/WebGL to craft memorable digital experiences. · minimalism, brutalism, monochrome, dark-mode, agency, portfolio, hero-fullbleed

KVS Studio — Product Design & Creative Development - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

KVS Studio — Product Design & Creative Development - full page scroll

KVS Studio — Product Design & Creative Development - mobile full page

Palette

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

SwatchHexOKLCHSuggested roleCopy

Hex#eab412
OKLCHoklch(79.7% 0.160 86)
RoleDominant
find sites →
Hex#f5d983
OKLCHoklch(89.0% 0.110 92)
RoleSurface
find sites →
Hex#7b5e09
OKLCHoklch(49.8% 0.099 87)
RoleInk
find sites →
Hex#6c746e
OKLCHoklch(55.0% 0.013 153)
RoleAccent
find sites →
Hex#c6989a
OKLCHoklch(72.3% 0.055 16)
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
h2	SF Mono	14px	500	1.4	-0.35px	Aa Bb Cc
body	ui-sans-serif	16px	400	1.5	0	Aa Bb Cc
button	SF Mono	14px	600	1.4	0	Aa Bb Cc

Spacing scale

32px

45px

80px

90px

135px

Radius scale

0px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #eab412;
  --color-surface: #f5d983;
  --color-ink: #7b5e09;
  --color-accent: #6c746e;
  --color-detail: #c6989a;
}

/* CSS variables exposed by source */
:root {
  --color-white: #fff;
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-weight-bold: 700;
  --color-black: #000;
  --font-weight-medium: 500;
  --spacing: .25rem;
  --font-weight-normal: 400;
  --font-mono: "SF Mono", monospace;
  --font-weight-semibold: 600;
  --tw-ring-offset-color: #fff;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-gradient-from: rgba(0, 0, 0, 0);
  --tw-inset-shadow-alpha: 100%;
  --tw-ring-shadow: 0 0 #0000;
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --tw-gradient-to: rgba(0, 0, 0, 0);
  --tw-shadow-alpha: 100%;
  --leading-relaxed: 1.625;
  --tw-drop-shadow-alpha: 100%;
  --tracking-tighter: -.05em;
  --tw-border-style: solid;
  --tw-scale-z: 1;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --tw-shadow: 0 0 #0000;
  --tw-translate-x: 0;
  --tw-ring-offset-width: 0px;
  --tw-gradient-via-position: 50%;
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --tw-scroll-snap-strictness: proximity;
  --default-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --tracking-widest: .1em;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-scale-x: 1;
  --tw-translate-z: 0;
  --tw-gradient-to-position: 100%;
  --tw-gradient-via: rgba(0, 0, 0, 0);
  --tw-scale-y: 1;
  --default-transition-duration: .15s;
  --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
  --tw-translate-y: 0;
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --tw-gradient-from-position: 0%;
  --default-mono-font-family: "SF Mono", monospace;
  --tw-inset-shadow: 0 0 #0000;
  --tracking-tight: -.025em;
}

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 KVS Studio — Product Design & Creative Development.
Reference design system (extracted from the live site):
- Palette: #eab412, #f5d983, #7b5e09, #6c746e, #c6989a
- Typefaces: SF Mono, ui-sans-serif
- Macrostructure: Specimen
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/kvs-services

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

SF Mono

14px

500

1.4

-0.35px

Aa Bb Cc

body

ui-sans-serif

16px

400

1.5

Aa Bb Cc

button

SF Mono

14px

600

1.4

Aa Bb Cc

:root { --color-dominant: #eab412; --color-surface: #f5d983; --color-ink: #7b5e09; --color-accent: #6c746e; --color-detail: #c6989a; } /* CSS variables exposed by source */ :root { --color-white: #fff; --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-weight-bold: 700; --color-black: #000; --font-weight-medium: 500; --spacing: .25rem; --font-weight-normal: 400; --font-mono: "SF Mono", monospace; --font-weight-semibold: 600; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-gradient-from: rgba(0, 0, 0, 0); --tw-inset-shadow-alpha: 100%; --tw-ring-shadow: 0 0 #0000; --ease-in-out: cubic-bezier(.4, 0, .2, 1); --tw-gradient-to: rgba(0, 0, 0, 0); --tw-shadow-alpha: 100%; --leading-relaxed: 1.625; --tw-drop-shadow-alpha: 100%; --tracking-tighter: -.05em; --tw-border-style: solid; --tw-scale-z: 1; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --tw-shadow: 0 0 #0000; --tw-translate-x: 0; --tw-ring-offset-width: 0px; --tw-gradient-via-position: 50%; --ease-in: cubic-bezier(.4, 0, 1, 1); --tw-scroll-snap-strictness: proximity; --default-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --tracking-widest: .1em; --tw-inset-ring-shadow: 0 0 #0000; --tw-scale-x: 1; --tw-translate-z: 0; --tw-gradient-to-position: 100%; --tw-gradient-via: rgba(0, 0, 0, 0); --tw-scale-y: 1; --default-transition-duration: .15s; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --tw-translate-y: 0; --ease-out: cubic-bezier(0, 0, .2, 1); --tw-gradient-from-position: 0%; --default-mono-font-family: "SF Mono", monospace; --tw-inset-shadow: 0 0 #0000; --tracking-tight: -.025em; }

Build a landing page in the visual style of KVS Studio — Product Design & Creative Development. Reference design system (extracted from the live site): - Palette: #eab412, #f5d983, #7b5e09, #6c746e, #c6989a - Typefaces: SF Mono, ui-sans-serif - Macrostructure: Specimen 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/kvs-services