№ snowpeak-com

Snowpeak

Warm ochre and muted sage, clean sans-serif geometry, open airy composition.

Portfolio Gridminimalism editorial swiss fashion ecommercelight

The hero image is a soft, blurred outdoor scene, overlaid with a clean, sans-serif headline and a simple call to action. The overall feel is uncluttered and focused on the product's aesthetic. · outdoor gear, camping mugs, minimalist design, spring collection, snow peak, ecommerce, product launch

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

SwatchHexOKLCHSuggested roleCopy

Hex#5db747
OKLCHoklch(69.9% 0.173 140)
RoleDominant
find sites →
Hex#2b5421
OKLCHoklch(40.3% 0.092 140)
RoleSurface
find sites →
Hex#abd99f
OKLCHoklch(83.8% 0.092 139)
RoleInk
find sites →
Hex#976c66
OKLCHoklch(57.4% 0.056 28)
RoleAccent
find sites →
Hex#aeb8ad
OKLCHoklch(77.2% 0.019 143)
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	AGaramondPro-Regular	58px	400	1.07	0.58px	Aa Bb Cc
h2	AGaramondPro-Regular	58px	400	1.07	0.58px	Aa Bb Cc
h3	AGaramondPro-Regular	18px	400	1	0	Aa Bb Cc
body	ui-sans-serif	16px	400	1.5	0	Aa Bb Cc
caption	AGaramondPro-Regular	12px	400	1.33	1px	Aa Bb Cc
button	ui-sans-serif	16px	400	1.5	0	Aa Bb Cc

Spacing scale

5px

8px

16px

17px

20px

24px

40px

48px

80px

Radius scale

0px

3px

4px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #5db747;
  --color-surface: #2b5421;
  --color-ink: #abd99f;
  --color-accent: #976c66;
  --color-detail: #aeb8ad;
}

/* CSS variables exposed by source */
:root {
  --font-secondary: 'Proxima', sans-serif;
  --font-primary: 'AGaramondPro-Regular', sans-serif;
  --tw-ring-offset-shadow: 0 0 #0000;
  --wk-button-border-width: 1px;
  --tw-ring-shadow: 0 0 #0000;
  --wk-shadow-opacity: 15%;
  --wk-color-accent-2: 34, 34, 34;
  --wk-button-min-height: 45px;
  --wk-color-background-2: 255, 255, 255;
  --tw-border-spacing-x: 0;
  --sp-grey-default: #f0f0f0;
  --sp-grey-new-medium: #9CA3AF;
  --wk-shadow-horizontal-offset: 0px;
  --tw-scale-y: 1;
  --sp-grey-default-light: #ededed;
  --wk-color-accent-1: 34, 34, 34;
  --sp-green: #063B26;
  --sp-grey-new: #6B7280;
  --tier-color: #ad7c50;
  --sp-grey-new-light: #E5E7EB;
  --tw-ring-color: rgb(59 130 246 / .5);
  --wk-color-background-1: 255, 255, 255;
  --wk-shadow-blur: 4px;
  --wk-font-text-scale: 1.0;
  --tw-translate-y: 0;
  --swiper-theme-color: #007aff;
  --wk-color-outline-button-label: 34, 34, 34;
  --wk-button-border-radius: 0px;
  --sp-grey: #f9f9f9;
  --tw-rotate: 0;
  --tw-ring-offset-color: #fff;
  --sp-silver: #b6b8ba;
  --wk-input-min-height: 45px;
  --sp-black-light-100: #444444;
  --tw-skew-x: 0;
  --wk-input-border-width: 1px;
  --sp-grey-new-lighter: #F3F4F6;
  --swiper-navigation-size: 44px;
  --tw-shadow: 0 0 #0000;
  --tw-translate-x: 0;
  --tw-ring-offset-width: 0px;
  --sp-black-light: #4d4d4d;
  --sp-grey-new-dark: #767676;
  --tw-scroll-snap-strictness: proximity;
  --tw-scale-x: 1;
  --wk-input-border-radius: 0px;
  --tw-shadow-colored: 0 0 #0000;
  --sp-grey-little-darker: #e2e2e2;
  --wk-shadow-vertical-offset: 2px;
  --tw-border-spacing-y: 0;
  --wk-color-text: 34, 34, 34;
  --wk-color-solid-button-label: 255, 255, 255;
  --tw-skew-y: 0;
  --sp-red: #a11b1b;
  --sp-grey-dark: #6c6762;
}

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 Snowpeak.
Reference design system (extracted from the live site):
- Palette: #5db747, #2b5421, #abd99f, #976c66, #aeb8ad
- Typefaces: AGaramondPro-Regular, ui-sans-serif
- Macrostructure: Portfolio 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/snowpeak-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

AGaramondPro-Regular

58px

400

1.07

0.58px

Aa Bb Cc

AGaramondPro-Regular

58px

400

1.07

0.58px

Aa Bb Cc

AGaramondPro-Regular

18px

400

Aa Bb Cc

body

ui-sans-serif

16px

400

1.5

Aa Bb Cc

caption

AGaramondPro-Regular

12px

400

1.33

1px

Aa Bb Cc

button

ui-sans-serif

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #5db747; --color-surface: #2b5421; --color-ink: #abd99f; --color-accent: #976c66; --color-detail: #aeb8ad; } /* CSS variables exposed by source */ :root { --font-secondary: 'Proxima', sans-serif; --font-primary: 'AGaramondPro-Regular', sans-serif; --tw-ring-offset-shadow: 0 0 #0000; --wk-button-border-width: 1px; --tw-ring-shadow: 0 0 #0000; --wk-shadow-opacity: 15%; --wk-color-accent-2: 34, 34, 34; --wk-button-min-height: 45px; --wk-color-background-2: 255, 255, 255; --tw-border-spacing-x: 0; --sp-grey-default: #f0f0f0; --sp-grey-new-medium: #9CA3AF; --wk-shadow-horizontal-offset: 0px; --tw-scale-y: 1; --sp-grey-default-light: #ededed; --wk-color-accent-1: 34, 34, 34; --sp-green: #063B26; --sp-grey-new: #6B7280; --tier-color: #ad7c50; --sp-grey-new-light: #E5E7EB; --tw-ring-color: rgb(59 130 246 / .5); --wk-color-background-1: 255, 255, 255; --wk-shadow-blur: 4px; --wk-font-text-scale: 1.0; --tw-translate-y: 0; --swiper-theme-color: #007aff; --wk-color-outline-button-label: 34, 34, 34; --wk-button-border-radius: 0px; --sp-grey: #f9f9f9; --tw-rotate: 0; --tw-ring-offset-color: #fff; --sp-silver: #b6b8ba; --wk-input-min-height: 45px; --sp-black-light-100: #444444; --tw-skew-x: 0; --wk-input-border-width: 1px; --sp-grey-new-lighter: #F3F4F6; --swiper-navigation-size: 44px; --tw-shadow: 0 0 #0000; --tw-translate-x: 0; --tw-ring-offset-width: 0px; --sp-black-light: #4d4d4d; --sp-grey-new-dark: #767676; --tw-scroll-snap-strictness: proximity; --tw-scale-x: 1; --wk-input-border-radius: 0px; --tw-shadow-colored: 0 0 #0000; --sp-grey-little-darker: #e2e2e2; --wk-shadow-vertical-offset: 2px; --tw-border-spacing-y: 0; --wk-color-text: 34, 34, 34; --wk-color-solid-button-label: 255, 255, 255; --tw-skew-y: 0; --sp-red: #a11b1b; --sp-grey-dark: #6c6762; }

Build a landing page in the visual style of Snowpeak. Reference design system (extracted from the live site): - Palette: #5db747, #2b5421, #abd99f, #976c66, #aeb8ad - Typefaces: AGaramondPro-Regular, ui-sans-serif - Macrostructure: Portfolio 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/snowpeak-com