№ knoll-com--design-plan-product-newson-task-chair

Knoll

Warm, muted earth tones, clean sans-serifs, and generous, airy negative space create a refined, contemplative feel.

Split Studiominimalism swiss editorial dark mode furniture ecommercedark

The page presents two distinct scenes, each a carefully composed photograph showcasing Knoll furniture in residential and office settings. The muted color palette and clean typography contribute to a sophisticated, understated feel. · knoll furniture, office design, home office, modern furniture, interior design, workspace, living room, furniture showroom

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

SwatchHexOKLCHSuggested roleCopy

Hex#f4572f
OKLCHoklch(66.3% 0.200 35)
RoleDominant
find sites →
Hex#5c2c18
OKLCHoklch(35.4% 0.077 42)
RoleSurface
find sites →
Hex#f8a793
OKLCHoklch(80.3% 0.101 34)
RoleInk
find sites →
Hex#9f8578
OKLCHoklch(63.7% 0.037 48)
RoleAccent
find sites →
Hex#d7beb2
OKLCHoklch(81.9% 0.033 47)
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
h1	HelveticaNeueW01-75Bold	50px	400	1	Aa Bb Cc
h2	helveticaneuew01-75bold	14px	400	1.14	Aa Bb Cc
body	Times	16px	400	1	Aa Bb Cc

Spacing scale

10px

16px

20px

24px

30px

40px

60px

Export

:root {
  --color-dominant: #f4572f;
  --color-surface: #5c2c18;
  --color-ink: #f8a793;
  --color-accent: #9f8578;
  --color-detail: #d7beb2;
}

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 Knoll.
Reference design system (extracted from the live site):
- Palette: #f4572f, #5c2c18, #f8a793, #9f8578, #d7beb2
- Typefaces: HelveticaNeueW01-75Bold, helveticaneuew01-75bold, Times
- 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/knoll-com--design-plan-product-newson-task-chair

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

HelveticaNeueW01-75Bold

50px

400

Aa Bb Cc

helveticaneuew01-75bold

14px

400

1.14

Aa Bb Cc

body

Times

16px

400

Aa Bb Cc

Build a landing page in the visual style of Knoll. Reference design system (extracted from the live site): - Palette: #f4572f, #5c2c18, #f8a793, #9f8578, #d7beb2 - Typefaces: HelveticaNeueW01-75Bold, helveticaneuew01-75bold, Times - 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/knoll-com--design-plan-product-newson-task-chair