№ artek-fi--en-aalto-tables-surfaces-aalto-table-rectangular-white

Artek Fi

Warm, sculpted wood and soft creams float in a quiet, thoughtfully curated space.

Portfolio Gridminimalism editorial swiss furniture ecommercelight

The page uses a clean, spacious layout with a focus on product photography and a muted color palette. Typography is restrained, allowing the product and imagery to take center stage. The overall feeling is one of understated elegance and thoughtful design. · furniture portfolio, minimalist design, scandinavian furniture, wooden chair, interior design, artek products, product photography, studio website

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#b84450
OKLCHoklch(54.9% 0.150 17)
RoleDominant
find sites →
Hex#601a09
OKLCHoklch(33.1% 0.105 35)
RoleSurface
find sites →
Hex#db9ea4
OKLCHoklch(75.9% 0.073 12)
RoleInk
find sites →
Hex#866b4b
OKLCHoklch(54.6% 0.057 71)
RoleAccent
find sites →
Hex#acaa9c
OKLCHoklch(73.6% 0.020 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	Sample
h2	artek futura	27px	400	1.2	Aa Bb Cc
h3	artek futura	26px	400	1.33	Aa Bb Cc
body	artek futura	18px	400	1.2	Aa Bb Cc
button	Arial	13px	400	1.4	Aa Bb Cc

Spacing scale

20px

30px

70px

Radius scale

0px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #b84450;
  --color-surface: #601a09;
  --color-ink: #db9ea4;
  --color-accent: #866b4b;
  --color-detail: #acaa9c;
}

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 Artek Fi.
Reference design system (extracted from the live site):
- Palette: #b84450, #601a09, #db9ea4, #866b4b, #acaa9c
- Typefaces: artek futura, Arial
- 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/artek-fi--en-aalto-tables-surfaces-aalto-table-rectangular-white

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

artek futura

27px

400

1.2

Aa Bb Cc

artek futura

26px

400

1.33

Aa Bb Cc

body

artek futura

18px

400

1.2

Aa Bb Cc

button

Arial

13px

400

1.4

Aa Bb Cc

Build a landing page in the visual style of Artek Fi. Reference design system (extracted from the live site): - Palette: #b84450, #601a09, #db9ea4, #866b4b, #acaa9c - Typefaces: artek futura, Arial - 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/artek-fi--en-aalto-tables-surfaces-aalto-table-rectangular-white