№ matveyan-com

Matveyan — Senior Product Designer for Fintech, Trading & Design Systems

Deep charcoal expanse, crisp geometric sans-serif, coolly precise data visualizations.

Bento Gridminimalism dark mode monochrome futurist portfoliodark

Matveyan — Senior Product Designer for Fintech, Trading & Design Systems - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Matveyan — Senior Product Designer for Fintech, Trading & Design Systems - full page scroll

Matveyan — Senior Product Designer for Fintech, Trading & Design Systems - mobile full page

Palette

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

SwatchHexOKLCHSuggested roleCopy

Hex#b85546
OKLCHoklch(57.0% 0.132 30)
RoleDominant
find sites →
Hex#d4a8a4
OKLCHoklch(77.0% 0.052 24)
RoleSurface
find sites →
Hex#4e241e
OKLCHoklch(31.7% 0.065 30)
RoleInk
find sites →
Hex#a06260
OKLCHoklch(56.4% 0.081 22)
RoleAccent
find sites →
Hex#be8686
OKLCHoklch(67.6% 0.069 19)
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 18pt	30px	300	1.2	2px	Aa Bb Cc
h2	Inter 18pt	30px	300	1.4	0	Aa Bb Cc
h3	Inter 18pt	24px	300	1.4	1px	Aa Bb Cc
body	Inter 18pt	16px	300	1.4	0	Aa Bb Cc
button	Cartograph Mono CF	12px	300	1.2	0	Aa Bb Cc

Spacing scale

20px

60px

150px

200px

Radius scale

0px

Container

Max content width 825px

Export

:root {
  --color-dominant: #b85546;
  --color-surface: #d4a8a4;
  --color-ink: #4e241e;
  --color-accent: #a06260;
  --color-detail: #be8686;
}

/* CSS variables exposed by source */
:root {
  --f-button-width: 40px;
  --f-button-svg-transition: opacity .15s ease;
  --f-thumb-border: none;
  --f-button-svg-filter: none;
  --f-thumbs-padding-y: 8px;
  --f-button-svg-disabled-opacity: .5;
  --f-spinner-color-2: rgba(17, 24, 28, .8);
  --f-thumbs-gap: 8px;
  --f-thumbs-bg: transparent;
  --f-thumbs-z-index: 1;
  --f-spinner-height: 50px;
  --f-button-svg-width: 20px;
  --f-button-svg-height: 20px;
  --f-thumb-border-radius: 4px;
  --f-button-outline-width: 1px;
  --f-button-border-radius: 0;
  --f-thumb-img-position: 50% 20%;
  --f-thumb-transition: opacity .3s ease, transform .15s ease;
  --f-thumb-opacity: 1;
  --f-progressbar-opacity: 1;
  --f-thumbs-viewport-padding-x: 0px;
  --f-thumb-img-width: 100%;
  --f-thumbs-viewport-padding-y: 0px;
  --hero-opacity: 1.000;
  --f-button-color: #374151;
  --f-progressbar-z-index: 30;
  --hero-blur: 0.00px;
  --f-thumb-clip-width: 46px;
  --f-thumbs-margin: 0;
  --f-button-svg-transform: none;
  --f-button-bg: #f8f8f8;
  --f-spinner-border-width: 4px;
  --f-thumb-selected-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff;
  --f-button-height: 40px;
  --f-spinner-width: 50px;
  --f-thumb-img-height: 100%;
  --f-button-outline-color: rgba(0, 0, 0, .7);
  --f-button-transform: none;
  --f-thumb-width: 94px;
  --f-thumb-focus-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff;
  --f-progressbar-color: #575ad6;
  --f-progressbar-height: 3px;
  --f-thumb-extra-gap: 16px;
  --f-spinner-color-1: rgba(0, 0, 0, .1);
  --f-button-svg-stroke-width: 1.5;
  --footer-opacity: 1.000;
  --f-button-svg-fill: none;
  --f-button-border: 0;
  --f-thumbs-transition: max-height .3s ease, max-width .3s ease, padding .3s ease;
  --f-thumbs-padding-x: 8px;
  --f-button-transition: all .15s ease;
  --hero-scale: 1.000;
  --f-thumb-shadow: none;
  --f-spinner-border-radius: 50%;
  --f-thumb-bg: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .05));
  --f-button-shadow: none;
  --f-thumb-height: 76px;
  --f-thumb-border-transition: all .1s ease;
  --f-button-svg-opacity: 1;
  --f-thumb-img-fit: cover;
}

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 Matveyan — Senior Product Designer for Fintech, Trading & Design Systems.
Reference design system (extracted from the live site):
- Palette: #b85546, #d4a8a4, #4e241e, #a06260, #be8686
- Typefaces: Inter 18pt
- Macrostructure: Bento 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/matveyan-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter 18pt

30px

300

1.2

2px

Aa Bb Cc

Inter 18pt

30px

300

1.4

Aa Bb Cc

Inter 18pt

24px

300

1.4

1px

Aa Bb Cc

body

Inter 18pt

16px

300

1.4

Aa Bb Cc

button

Cartograph Mono CF

12px

300

1.2

Aa Bb Cc

:root { --color-dominant: #b85546; --color-surface: #d4a8a4; --color-ink: #4e241e; --color-accent: #a06260; --color-detail: #be8686; } /* CSS variables exposed by source */ :root { --f-button-width: 40px; --f-button-svg-transition: opacity .15s ease; --f-thumb-border: none; --f-button-svg-filter: none; --f-thumbs-padding-y: 8px; --f-button-svg-disabled-opacity: .5; --f-spinner-color-2: rgba(17, 24, 28, .8); --f-thumbs-gap: 8px; --f-thumbs-bg: transparent; --f-thumbs-z-index: 1; --f-spinner-height: 50px; --f-button-svg-width: 20px; --f-button-svg-height: 20px; --f-thumb-border-radius: 4px; --f-button-outline-width: 1px; --f-button-border-radius: 0; --f-thumb-img-position: 50% 20%; --f-thumb-transition: opacity .3s ease, transform .15s ease; --f-thumb-opacity: 1; --f-progressbar-opacity: 1; --f-thumbs-viewport-padding-x: 0px; --f-thumb-img-width: 100%; --f-thumbs-viewport-padding-y: 0px; --hero-opacity: 1.000; --f-button-color: #374151; --f-progressbar-z-index: 30; --hero-blur: 0.00px; --f-thumb-clip-width: 46px; --f-thumbs-margin: 0; --f-button-svg-transform: none; --f-button-bg: #f8f8f8; --f-spinner-border-width: 4px; --f-thumb-selected-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff; --f-button-height: 40px; --f-spinner-width: 50px; --f-thumb-img-height: 100%; --f-button-outline-color: rgba(0, 0, 0, .7); --f-button-transform: none; --f-thumb-width: 94px; --f-thumb-focus-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff; --f-progressbar-color: #575ad6; --f-progressbar-height: 3px; --f-thumb-extra-gap: 16px; --f-spinner-color-1: rgba(0, 0, 0, .1); --f-button-svg-stroke-width: 1.5; --footer-opacity: 1.000; --f-button-svg-fill: none; --f-button-border: 0; --f-thumbs-transition: max-height .3s ease, max-width .3s ease, padding .3s ease; --f-thumbs-padding-x: 8px; --f-button-transition: all .15s ease; --hero-scale: 1.000; --f-thumb-shadow: none; --f-spinner-border-radius: 50%; --f-thumb-bg: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .05)); --f-button-shadow: none; --f-thumb-height: 76px; --f-thumb-border-transition: all .1s ease; --f-button-svg-opacity: 1; --f-thumb-img-fit: cover; }

Build a landing page in the visual style of Matveyan — Senior Product Designer for Fintech, Trading & Design Systems. Reference design system (extracted from the live site): - Palette: #b85546, #d4a8a4, #4e241e, #a06260, #be8686 - Typefaces: Inter 18pt - Macrostructure: Bento 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/matveyan-com