№ snap-com

Snap

Cool, precise geometry - slate gray code punctuated by vibrant, electric blue accents.

Feature Stackminimalism editorial swiss media consumer techlight

The page uses a clean, grid-based layout to showcase product offerings. Typography is clean and legible, with ample white space creating a sense of openness. The overall feel is professional and straightforward. · developer tools, ai platform, snap inc, product showcase, minimalist design, tech company, software platform

Hero - desktop 1440 × 900 · mobile 375

Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

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

Reads as: muted · cool · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#9c9404
OKLCHoklch(65.3% 0.138 106)
RoleDominant
find sites →
Hex#9b9c04
OKLCHoklch(67.0% 0.146 110)
RoleSurface
find sites →
Hex#cccb7e
OKLCHoklch(82.6% 0.099 108)
RoleInk
find sites →
Hex#85807c
OKLCHoklch(60.3% 0.009 61)
RoleAccent
find sites →
Hex#d4d0ba
OKLCHoklch(85.5% 0.030 99)
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	Inter	44px	400	1.2	Aa Bb Cc
body	Times	16px	400	1.4	Aa Bb Cc
button	Arial	13px	400	1.4	Aa Bb Cc

Spacing scale

16px

Radius scale

0px

25px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #9c9404;
  --color-surface: #9b9c04;
  --color-ink: #cccb7e;
  --color-accent: #85807c;
  --color-detail: #d4d0ba;
}

/* CSS variables exposed by source */
:root {
  --total-header-height: 64px;
}

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 Snap.
Reference design system (extracted from the live site):
- Palette: #9c9404, #9b9c04, #cccb7e, #85807c, #d4d0ba
- Typefaces: Inter, Times, Arial
- Macrostructure: Feature Stack
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/snap-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter

44px

400

1.2

Aa Bb Cc

body

Times

16px

400

1.4

Aa Bb Cc

button

Arial

13px

400

1.4

Aa Bb Cc

:root { --color-dominant: #9c9404; --color-surface: #9b9c04; --color-ink: #cccb7e; --color-accent: #85807c; --color-detail: #d4d0ba; } /* CSS variables exposed by source */ :root { --total-header-height: 64px; }

Build a landing page in the visual style of Snap. Reference design system (extracted from the live site): - Palette: #9c9404, #9b9c04, #cccb7e, #85807c, #d4d0ba - Typefaces: Inter, Times, Arial - Macrostructure: Feature Stack 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/snap-com