№ freitag-ch

Freitag Ch

Quiet, airy studio—muted pastels and clean sans-serifs on soft, spacious white.

Portfolio Gridminimalism editorial swiss fashion ecommercelight

The layout prioritizes visual storytelling through dynamic photography. The muted color palette and generous white space create a sense of calm, emphasizing the product's functionality and design. Typography is clean and functional, supporting the imagery without distraction. · freitag bags, cycling accessories, urban lifestyle, product photography, minimalist design, sustainable bags, street style, modular bags, circular economy

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#46abca
OKLCHoklch(69.5% 0.103 222)
RoleDominant
find sites →
Hex#3b141c
OKLCHoklch(25.5% 0.062 10)
RoleSurface
find sites →
Hex#f4f4fc
OKLCHoklch(96.9% 0.011 286)
RoleInk
find sites →
Hex#9f8865
OKLCHoklch(63.9% 0.056 78)
RoleAccent
find sites →
Hex#c2bd9c
OKLCHoklch(79.4% 0.045 100)
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	AkkStdMn	11px	400	1.15	0.2256px	Aa Bb Cc
h2	AkkStdRg	48px	400	0.97	-0.48px	Aa Bb Cc
h3	AkkStdRg	24px	400	0.97	-0.11992px	Aa Bb Cc
body	ui-sans-serif	16px	400	1.5	0	Aa Bb Cc
button	AkkStdRg	16px	400	1.5	0	Aa Bb Cc

Spacing scale

12px

24px

28px

Radius scale

0px

4px

6px

12px

16px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #46abca;
  --color-surface: #3b141c;
  --color-ink: #f4f4fc;
  --color-accent: #9f8865;
  --color-detail: #c2bd9c;
}

/* CSS variables exposed by source */
:root {
  --tw-ring-offset-shadow: 0 0 #0000;
  --eswIconFontSize: 16px;
  --tw-ring-shadow: 0 0 #0000;
  --line-grid-gray-medium: #b9b9b9;
  --signal-orange: #ff5b27;
  --eswButtonRight: 30px;
  --lines-grid-on-black: #616161;
  --tw-skew-x: 0;
  --black: #000;
  --industrial-green: #bec8af;
  --icon-black: #1d1d1b;
  --swiper-navigation-size: 44px;
  --white: #fff;
  --tw-shadow: 0 0 #0000;
  --tw-translate-x: 0;
  --tw-ring-offset-width: 0px;
  --gray: #f1f1f1;
  --traffic-yellow: #fd0;
  --off-white: #f8f8f8;
  --tw-scroll-snap-strictness: proximity;
  --line-grid-gray-light: #cacaca;
  --rf-green: #30cb00;
  --tw-scale-x: 1;
  --tw-shadow-colored: 0 0 #0000;
  --eswButtonBottom: 25px;
  --tw-scale-y: 1;
  --eswIconFillColor: #FFF;
  --tw-skew-y: 0;
  --tw-ring-color: rgba(59,130,246,.5);
  --line-grid-gray-dark: #404040;
  --product-background-gray: #efefef;
  --tw-translate-y: 0;
  --swiper-theme-color: #007aff;
  --tw-rotate: 0;
  --tw-ring-offset-color: #fff;
}

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 Freitag Ch.
Reference design system (extracted from the live site):
- Palette: #46abca, #3b141c, #f4f4fc, #9f8865, #c2bd9c
- Typefaces: AkkStdMn, AkkStdRg, 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/freitag-ch

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

AkkStdMn

11px

400

1.15

0.2256px

Aa Bb Cc

AkkStdRg

48px

400

0.97

-0.48px

Aa Bb Cc

AkkStdRg

24px

400

0.97

-0.11992px

Aa Bb Cc

body

ui-sans-serif

16px

400

1.5

Aa Bb Cc

button

AkkStdRg

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #46abca; --color-surface: #3b141c; --color-ink: #f4f4fc; --color-accent: #9f8865; --color-detail: #c2bd9c; } /* CSS variables exposed by source */ :root { --tw-ring-offset-shadow: 0 0 #0000; --eswIconFontSize: 16px; --tw-ring-shadow: 0 0 #0000; --line-grid-gray-medium: #b9b9b9; --signal-orange: #ff5b27; --eswButtonRight: 30px; --lines-grid-on-black: #616161; --tw-skew-x: 0; --black: #000; --industrial-green: #bec8af; --icon-black: #1d1d1b; --swiper-navigation-size: 44px; --white: #fff; --tw-shadow: 0 0 #0000; --tw-translate-x: 0; --tw-ring-offset-width: 0px; --gray: #f1f1f1; --traffic-yellow: #fd0; --off-white: #f8f8f8; --tw-scroll-snap-strictness: proximity; --line-grid-gray-light: #cacaca; --rf-green: #30cb00; --tw-scale-x: 1; --tw-shadow-colored: 0 0 #0000; --eswButtonBottom: 25px; --tw-scale-y: 1; --eswIconFillColor: #FFF; --tw-skew-y: 0; --tw-ring-color: rgba(59,130,246,.5); --line-grid-gray-dark: #404040; --product-background-gray: #efefef; --tw-translate-y: 0; --swiper-theme-color: #007aff; --tw-rotate: 0; --tw-ring-offset-color: #fff; }

Build a landing page in the visual style of Freitag Ch. Reference design system (extracted from the live site): - Palette: #46abca, #3b141c, #f4f4fc, #9f8865, #c2bd9c - Typefaces: AkkStdMn, AkkStdRg, 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/freitag-ch