№ norrona-com--en-gb-products

Norrona

Cool, alpine blue and earthy stone, clean sans-serif structure feels vast and resolute.

Split Studiominimalism editorial swiss fashion ecommercelight

The page uses a full-bleed image to establish a sense of place, with clean typography and ample negative space. The overall feel is understated and focused on the product's connection to the natural environment. · outdoor apparel, mountain wear, technical clothing, sustainable fashion, adventure gear, norrona products, minimalist design, full screen image

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 · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#0f74fc
OKLCHoklch(58.9% 0.220 259)
RoleDominant
find sites →
Hex#5e6807
OKLCHoklch(49.2% 0.110 116)
RoleSurface
find sites →
Hex#93c0fc
OKLCHoklch(79.8% 0.098 256)
RoleInk
find sites →
Hex#917f65
OKLCHoklch(60.6% 0.043 77)
RoleAccent
find sites →
Hex#c7bbac
OKLCHoklch(79.8% 0.025 74)
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
h2	DIN Next Pro	18px	400	1.33	Aa Bb Cc
h3	DIN Next Pro	15px	400	1.4	Aa Bb Cc
body	DIN Next Pro	16px	400	1.5	Aa Bb Cc
button	DIN Next Pro	15px	400	1.4	Aa Bb Cc

Spacing scale

20px

36px

Radius scale

0px

6px

8px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #0f74fc;
  --color-surface: #5e6807;
  --color-ink: #93c0fc;
  --color-accent: #917f65;
  --color-detail: #c7bbac;
}

/* CSS variables exposed by source */
:root {
  --text-color: #222;
  --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --primary: #1d1d1d;
  --secondary: #f5f5f5;
  --light: #f8f9fa;
  --yellow: #fcff87;
  --header-height: 60px;
  --decline-color: #1d1d1d;
  --green: (dark:#349f74,light:#0f9);
  --pink: #e83e8c;
  --decline-text: #000;
  --breakpoint-xs: 0;
  --teal: #20c997;
  --gray-dark: #343a40;
  --breakpoint-md: 768px;
  --transparent-header-herotop-position: 78px;
  --white: #fcfcfc;
  --danger: #dc3545;
  --success: #0f9;
  --gray: (dark:#747474,base:#bebebe,light:#dadada,lighter:#f5f5f5);
  --red: (dark:#dc3545,light:#e7807b);
  --cyan: #17a2b8;
  --dark: #343a40;
  --breakpoint-xl: 1200px;
  --header-usp-height: 48px;
  --hover-color: #2480ff;
  --transparent-header-herotop-position-lg: 120px;
  --main-color: #006bff;
  --indigo: #6610f2;
  --header-b2buser-height: 60px;
  --purple: #6f42c1;
  --breakpoint-sm: 576px;
  --breakpoint-lg: 992px;
  --blue: (dark:#006bff,light:#4fcaff);
  --link-color: #234923;
  --footer-background: #f6f6f6;
  --warning: #fcff87;
  --decline-hover: #dddddd;
  --info: #17a2b8;
  --orange: #fd7e14;
}

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 Norrona.
Reference design system (extracted from the live site):
- Palette: #0f74fc, #5e6807, #93c0fc, #917f65, #c7bbac
- Typefaces: DIN Next Pro
- 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/norrona-com--en-gb-products

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

DIN Next Pro

18px

400

1.33

Aa Bb Cc

DIN Next Pro

15px

400

1.4

Aa Bb Cc

body

DIN Next Pro

16px

400

1.5

Aa Bb Cc

button

DIN Next Pro

15px

400

1.4

Aa Bb Cc

:root { --color-dominant: #0f74fc; --color-surface: #5e6807; --color-ink: #93c0fc; --color-accent: #917f65; --color-detail: #c7bbac; } /* CSS variables exposed by source */ :root { --text-color: #222; --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --primary: #1d1d1d; --secondary: #f5f5f5; --light: #f8f9fa; --yellow: #fcff87; --header-height: 60px; --decline-color: #1d1d1d; --green: (dark:#349f74,light:#0f9); --pink: #e83e8c; --decline-text: #000; --breakpoint-xs: 0; --teal: #20c997; --gray-dark: #343a40; --breakpoint-md: 768px; --transparent-header-herotop-position: 78px; --white: #fcfcfc; --danger: #dc3545; --success: #0f9; --gray: (dark:#747474,base:#bebebe,light:#dadada,lighter:#f5f5f5); --red: (dark:#dc3545,light:#e7807b); --cyan: #17a2b8; --dark: #343a40; --breakpoint-xl: 1200px; --header-usp-height: 48px; --hover-color: #2480ff; --transparent-header-herotop-position-lg: 120px; --main-color: #006bff; --indigo: #6610f2; --header-b2buser-height: 60px; --purple: #6f42c1; --breakpoint-sm: 576px; --breakpoint-lg: 992px; --blue: (dark:#006bff,light:#4fcaff); --link-color: #234923; --footer-background: #f6f6f6; --warning: #fcff87; --decline-hover: #dddddd; --info: #17a2b8; --orange: #fd7e14; }

Build a landing page in the visual style of Norrona. Reference design system (extracted from the live site): - Palette: #0f74fc, #5e6807, #93c0fc, #917f65, #c7bbac - Typefaces: DIN Next Pro - 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/norrona-com--en-gb-products