№ work-co

Work

Crisp, cold geometry – stark white space, clean sans-serifs, and a muted, technical grey.

Specimenminimalism swiss monochrome agencylight

The page prioritizes clarity and a structured presentation of services. Typography is clean and assertive, with ample white space creating a sense of professional distance. The overall feel is precise and confident. · design agency, technology consulting, minimalist design, swiss style, modern agency, software design, digital solutions, work co, 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: monochrome · muted

SwatchHexOKLCHSuggested roleCopy

Hex#fc342d
OKLCHoklch(64.4% 0.234 28)
RoleDominant
find sites →
Hex#820601
OKLCHoklch(38.4% 0.154 30)
RoleSurface
find sites →
Hex#fc6464
OKLCHoklch(69.7% 0.186 23)
RoleInk
find sites →
Hex#5c5c94
OKLCHoklch(50.0% 0.088 283)
RoleAccent
find sites →
Hex#acacc5
OKLCHoklch(75.3% 0.036 286)
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	HelveticaNowDisplay	56px	500	1	-1.12px	Aa Bb Cc
h2	HelveticaNowDisplay	21px	500	1.33	-0.21px	Aa Bb Cc
h3	HelveticaNowDisplay	18px	500	1.56	-0.5px	Aa Bb Cc
body	adobe-garamond-pro	16px	400	1.15	0	Aa Bb Cc
button	HelveticaNowDisplay	18px	500	1.5	-0.18px	Aa Bb Cc

Radius scale

0px

50px

Container

Max content width 340px

Export

:root {
  --color-dominant: #fc342d;
  --color-surface: #820601;
  --color-ink: #fc6464;
  --color-accent: #5c5c94;
  --color-detail: #acacc5;
}

/* CSS variables exposed by source */
:root {
  --vh: 9px;
  --reach-menu-button: 1;
  --scaleFactor: 0.3611055555555555;
  --vw: 14.4px;
}

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 Work.
Reference design system (extracted from the live site):
- Palette: #fc342d, #820601, #fc6464, #5c5c94, #acacc5
- Typefaces: HelveticaNowDisplay, adobe-garamond-pro
- Macrostructure: Specimen
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/work-co

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

HelveticaNowDisplay

56px

500

-1.12px

Aa Bb Cc

HelveticaNowDisplay

21px

500

1.33

-0.21px

Aa Bb Cc

HelveticaNowDisplay

18px

500

1.56

-0.5px

Aa Bb Cc

body

adobe-garamond-pro

16px

400

1.15

Aa Bb Cc

button

HelveticaNowDisplay

18px

500

1.5

-0.18px

Aa Bb Cc

:root { --color-dominant: #fc342d; --color-surface: #820601; --color-ink: #fc6464; --color-accent: #5c5c94; --color-detail: #acacc5; } /* CSS variables exposed by source */ :root { --vh: 9px; --reach-menu-button: 1; --scaleFactor: 0.3611055555555555; --vw: 14.4px; }

Build a landing page in the visual style of Work. Reference design system (extracted from the live site): - Palette: #fc342d, #820601, #fc6464, #5c5c94, #acacc5 - Typefaces: HelveticaNowDisplay, adobe-garamond-pro - Macrostructure: Specimen 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/work-co