№ hiartem-com

Artem Astakhov

Deep obsidian void, neon glass tiles floating over bold white sans-serif

Marquee Heroglassmorphism minimalism dark mode portfoliodark

High-contrast dark mode layout featuring a bold sans-serif headline and a playful arrangement of overlapping glassmorphic cards with rounded corners. · dark mode portfolio, glassmorphism cards, modern saas personal site, bold typography hero, overlapping card layout

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

SwatchHexOKLCHSuggested roleCopy

Hex#cccc1f
OKLCHoklch(81.9% 0.172 110)
RoleDominant
find sites →
Hex#64e7b2
OKLCHoklch(84.0% 0.139 164)
RoleSurface
find sites →
Hex#10248a
OKLCHoklch(33.1% 0.168 267)
RoleInk
find sites →
Hex#9c8764
OKLCHoklch(63.4% 0.055 80)
RoleAccent
find sites →
Hex#b2c9b7
OKLCHoklch(81.3% 0.035 152)
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	Instrument Sans Variable	120px	400	0.9	-2.4px	Aa Bb Cc
h2	Instrument Sans Variable	96px	400	0.9	-2.88px	Aa Bb Cc
h3	Instrument Sans Variable	56px	400	0.9	-1.68px	Aa Bb Cc
body	sans-serif	12px	400	1.4	0	Aa Bb Cc

Container

Max content width 1440px

Export

:root {
  --color-dominant: #cccc1f;
  --color-surface: #64e7b2;
  --color-ink: #10248a;
  --color-accent: #9c8764;
  --color-detail: #b2c9b7;
}

/* CSS variables exposed by source */
:root {
  --one-if-corner-shape-supported: 1;
}

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 Artem Astakhov.
Reference design system (extracted from the live site):
- Palette: #cccc1f, #64e7b2, #10248a, #9c8764, #b2c9b7
- Typefaces: Instrument Sans Variable, sans-serif
- Macrostructure: Marquee Hero
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/hiartem-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Instrument Sans Variable

120px

400

0.9

-2.4px

Aa Bb Cc

Instrument Sans Variable

96px

400

0.9

-2.88px

Aa Bb Cc

Instrument Sans Variable

56px

400

0.9

-1.68px

Aa Bb Cc

body

sans-serif

12px

400

1.4

Aa Bb Cc

:root { --color-dominant: #cccc1f; --color-surface: #64e7b2; --color-ink: #10248a; --color-accent: #9c8764; --color-detail: #b2c9b7; } /* CSS variables exposed by source */ :root { --one-if-corner-shape-supported: 1; }

Build a landing page in the visual style of Artem Astakhov. Reference design system (extracted from the live site): - Palette: #cccc1f, #64e7b2, #10248a, #9c8764, #b2c9b7 - Typefaces: Instrument Sans Variable, sans-serif - Macrostructure: Marquee Hero 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/hiartem-com