№ works-studio

Works Studio

Quiet, structured space: muted earth tones, clean sans serif, ample breathing room.

Portfolio Gridminimalism editorial swiss agency portfoliolight

The layout prioritizes visual hierarchy with a clean, grid-based structure. Large-scale imagery and concise text create a sense of understated confidence and sophisticated design. · creative studio portfolio, minimalist agency website, swiss style design, editorial agency, modern agency website, portfolio grid, clean design, agency homepage

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 · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#963025
OKLCHoklch(46.0% 0.139 30)
RoleDominant
find sites →
Hex#1e3243
OKLCHoklch(30.8% 0.040 245)
RoleSurface
find sites →
Hex#d49174
OKLCHoklch(71.6% 0.091 44)
RoleInk
find sites →
Hex#a87a62
OKLCHoklch(61.9% 0.068 49)
RoleAccent
find sites →
Hex#c1a693
OKLCHoklch(74.4% 0.041 57)
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	TM Secondary	32px	700	1.15	0	Aa Bb Cc
h2	TM Secondary	24px	700	0.78	-0.48px	Aa Bb Cc
body	TM Secondary	16px	400	1.15	0	Aa Bb Cc
button	TM Secondary	16px	500	1.25	0	Aa Bb Cc

Spacing scale

12px

14px

56px

60px

110px

140px

224px

Radius scale

0px

4px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #963025;
  --color-surface: #1e3243;
  --color-ink: #d49174;
  --color-accent: #a87a62;
  --color-detail: #c1a693;
}

/* CSS variables exposed by source */
:root {
  --primary: #f5e31a;
  --easeInOutQuart: cubic-bezier(0.76,0,0.24,1);
  --easeOutExpo: cubic-bezier(0.16,1,0.3,1);
  --header-height: 30px;
  --ff-primary: "Ampersand","TM Primary","FreightBig Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  --easeInQuad: cubic-bezier(0.11,0,0.5,0);
  --ff-primary-book: "Ampersand","TM Primary" "FreightBig Pro Book",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  --grey: #757575;
  --easeOutQuint: cubic-bezier(0.22,1,0.36,1);
  --f-secondary: "HelveticaNowDisplay",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  --dvh: 1vh;
  --fallbackFont: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  --black: #000;
  --marginBlock: 48px;
  --f-primary: "FreightBig Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  --easeInOutExpo: cubic-bezier(0.87,0,0.13,1);
  --white: #fff;
  --easeInQuint: cubic-bezier(0.64,0,0.78,0);
  --grid-col-width: 0px;
  --easeOutQuad: cubic-bezier(0.5,1,0.89,1);
  --dark: #505050;
  --svh: 9px;
  --lightGrey: #818181;
  --lvh: 1lvh;
  --maxWidth: 250000px;
  --100svh: calc(9px*100);
  --ff-primary-non-ampersand: "TM Primary","FreightBig Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  --white25: hsla(0,0%,100%,.25);
  --easeInExpo: cubic-bezier(0.7,0,0.84,0);
  --easeInOutQuint: cubic-bezier(0.83,0,0.17,1);
  --darkGrey: #707070;
  --ff-secondary: "TM Secondary","HelveticaNowDisplay",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  --brokenWhite: #f5f5f5;
  --buttonHover: #404040;
  --grid-gap: 0 16px;
  --dark25: #50505040;
  --easeInOutQuad: cubic-bezier(0.45,0,0.55,1);
  --f-primary-book: "FreightBig Pro Book",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  --lighterGrey: #e5e5e5;
}

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 Works Studio.
Reference design system (extracted from the live site):
- Palette: #963025, #1e3243, #d49174, #a87a62, #c1a693
- Typefaces: TM Secondary
- 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/works-studio

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

TM Secondary

32px

700

1.15

Aa Bb Cc

TM Secondary

24px

700

0.78

-0.48px

Aa Bb Cc

body

TM Secondary

16px

400

1.15

Aa Bb Cc

button

TM Secondary

16px

500

1.25

Aa Bb Cc

:root { --color-dominant: #963025; --color-surface: #1e3243; --color-ink: #d49174; --color-accent: #a87a62; --color-detail: #c1a693; } /* CSS variables exposed by source */ :root { --primary: #f5e31a; --easeInOutQuart: cubic-bezier(0.76,0,0.24,1); --easeOutExpo: cubic-bezier(0.16,1,0.3,1); --header-height: 30px; --ff-primary: "Ampersand","TM Primary","FreightBig Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; --easeInQuad: cubic-bezier(0.11,0,0.5,0); --ff-primary-book: "Ampersand","TM Primary" "FreightBig Pro Book",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; --grey: #757575; --easeOutQuint: cubic-bezier(0.22,1,0.36,1); --f-secondary: "HelveticaNowDisplay",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; --dvh: 1vh; --fallbackFont: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; --black: #000; --marginBlock: 48px; --f-primary: "FreightBig Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; --easeInOutExpo: cubic-bezier(0.87,0,0.13,1); --white: #fff; --easeInQuint: cubic-bezier(0.64,0,0.78,0); --grid-col-width: 0px; --easeOutQuad: cubic-bezier(0.5,1,0.89,1); --dark: #505050; --svh: 9px; --lightGrey: #818181; --lvh: 1lvh; --maxWidth: 250000px; --100svh: calc(9px*100); --ff-primary-non-ampersand: "TM Primary","FreightBig Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; --white25: hsla(0,0%,100%,.25); --easeInExpo: cubic-bezier(0.7,0,0.84,0); --easeInOutQuint: cubic-bezier(0.83,0,0.17,1); --darkGrey: #707070; --ff-secondary: "TM Secondary","HelveticaNowDisplay",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; --brokenWhite: #f5f5f5; --buttonHover: #404040; --grid-gap: 0 16px; --dark25: #50505040; --easeInOutQuad: cubic-bezier(0.45,0,0.55,1); --f-primary-book: "FreightBig Pro Book",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; --lighterGrey: #e5e5e5; }

Build a landing page in the visual style of Works Studio. Reference design system (extracted from the live site): - Palette: #963025, #1e3243, #d49174, #a87a62, #c1a693 - Typefaces: TM Secondary - 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/works-studio