№ hypereffekt-com

Hyper Effekt - Shopify Plus partner for world's leading brands

Soft, warm ochre and cream, clean geometric type, spacious and airy like a curated gallery.

Bento Gridminimalism editorial swiss agencylight

Hyper Effekt - Shopify Plus partner for world's leading brands - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Hyper Effekt - Shopify Plus partner for world's leading brands - full page scroll

Hyper Effekt - Shopify Plus partner for world's leading brands - mobile full page

Palette

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

SwatchHexOKLCHSuggested roleCopy

Hex#be8222
OKLCHoklch(65.2% 0.128 73)
RoleDominant
find sites →
Hex#e6c69f
OKLCHoklch(84.4% 0.063 72)
RoleSurface
find sites →
Hex#5d3c20
OKLCHoklch(38.8% 0.062 60)
RoleInk
find sites →
Hex#8f7d58
OKLCHoklch(59.7% 0.057 85)
RoleAccent
find sites →
Hex#d6bfab
OKLCHoklch(81.9% 0.038 63)
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	Inter	15px	400	1.2	-0.495px	Aa Bb Cc
h2	Inter Display	40px	400	1.05	-1.32px	Aa Bb Cc
h3	Inter	15px	400	1.33	-0.495px	Aa Bb Cc
body	sans-serif	12px	400	1.4	0	Aa Bb Cc
button	Inter	13px	400	1.38	-0.429px	Aa Bb Cc

Spacing scale

16px

144px

Radius scale

0px

3px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #be8222;
  --color-surface: #e6c69f;
  --color-ink: #5d3c20;
  --color-accent: #8f7d58;
  --color-detail: #d6bfab;
}

/* CSS variables exposed by source */
:root {
  --one-if-corner-shape-supported: 1;
}

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 Hyper Effekt - Shopify Plus partner for world's leading brands.
Reference design system (extracted from the live site):
- Palette: #be8222, #e6c69f, #5d3c20, #8f7d58, #d6bfab
- Typefaces: Inter, Inter Display, sans-serif
- Macrostructure: Bento 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/hypereffekt-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter

15px

400

1.2

-0.495px

Aa Bb Cc

Inter Display

40px

400

1.05

-1.32px

Aa Bb Cc

Inter

15px

400

1.33

-0.495px

Aa Bb Cc

body

sans-serif

12px

400

1.4

Aa Bb Cc

button

Inter

13px

400

1.38

-0.429px

Aa Bb Cc

:root { --color-dominant: #be8222; --color-surface: #e6c69f; --color-ink: #5d3c20; --color-accent: #8f7d58; --color-detail: #d6bfab; } /* CSS variables exposed by source */ :root { --one-if-corner-shape-supported: 1; }

Build a landing page in the visual style of Hyper Effekt - Shopify Plus partner for world's leading brands. Reference design system (extracted from the live site): - Palette: #be8222, #e6c69f, #5d3c20, #8f7d58, #d6bfab - Typefaces: Inter, Inter Display, sans-serif - Macrostructure: Bento 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/hypereffekt-com