№ atomixnyc-com--gallery-1

Atomixnyc

Deep teal and rust hues flow across a spacious, elegant layout with subtly crisp, modern typography.

Split Studiominimalism editorial swiss dark mode food beveragedark

The layout is split, with a dark, patterned background contrasting with clean, sans-serif typography. The overall feel is sophisticated and understated, prioritizing visual texture and a sense of curated elegance. · restaurant website, fine dining design, minimalist hospitality, dark mode restaurant, editorial website, split screen layout, luxury restaurant, modern restaurant design, atelier website, restaurant navigation

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: muted · earthy · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#c95535
OKLCHoklch(59.3% 0.155 36)
RoleDominant
find sites →
Hex#471e13
OKLCHoklch(29.2% 0.066 36)
RoleSurface
find sites →
Hex#e3a696
OKLCHoklch(77.9% 0.076 35)
RoleInk
find sites →
Hex#aa7668
OKLCHoklch(61.5% 0.069 36)
RoleAccent
find sites →
Hex#84989a
OKLCHoklch(66.5% 0.023 204)
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	ambroise-std	19px	400	1	5.7px	Aa Bb Cc
body	Heebo	15px	400	2.3	0.45px	Aa Bb Cc
button	Heebo	15px	400	1	0.45px	Aa Bb Cc

Spacing scale

86px

Radius scale

0px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #c95535;
  --color-surface: #471e13;
  --color-ink: #e3a696;
  --color-accent: #aa7668;
  --color-detail: #84989a;
}

/* CSS variables exposed by source */
:root {
  --commerce-mini-cart-image-placeholder-size: 22px;
  --commerce-mini-cart-image-size: 60px;
}

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 Atomixnyc.
Reference design system (extracted from the live site):
- Palette: #c95535, #471e13, #e3a696, #aa7668, #84989a
- Typefaces: ambroise-std, Heebo
- Macrostructure: Split Studio
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/atomixnyc-com--gallery-1

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

ambroise-std

19px

400

5.7px

Aa Bb Cc

body

Heebo

15px

400

2.3

0.45px

Aa Bb Cc

button

Heebo

15px

400

0.45px

Aa Bb Cc

:root { --color-dominant: #c95535; --color-surface: #471e13; --color-ink: #e3a696; --color-accent: #aa7668; --color-detail: #84989a; } /* CSS variables exposed by source */ :root { --commerce-mini-cart-image-placeholder-size: 22px; --commerce-mini-cart-image-size: 60px; }

Build a landing page in the visual style of Atomixnyc. Reference design system (extracted from the live site): - Palette: #c95535, #471e13, #e3a696, #aa7668, #84989a - Typefaces: ambroise-std, Heebo - Macrostructure: Split Studio 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/atomixnyc-com--gallery-1