№ nogood-studio--work

NoGood · Work

Acid lime brutalism, heavy black sans-serifs colliding with raw industrial grit

Portfolio Gridbrutalism editorial agencylight

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

SwatchHexOKLCHSuggested roleCopy

Hex#fb3b2c
OKLCHoklch(64.7% 0.229 29)
RoleDominant
find sites →
Hex#fbaca4
OKLCHoklch(81.8% 0.094 26)
RoleSurface
find sites →
Hex#440828
OKLCHoklch(26.2% 0.095 354)
RoleInk
find sites →
Hex#545ca4
OKLCHoklch(50.3% 0.114 277)
RoleAccent
find sites →
Hex#bca38b
OKLCHoklch(73.1% 0.045 66)
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	UntitledSans-Regular	48px	400	1	-0.48px	Aa Bb Cc
body	UntitledSans-Regular	16px	400	1	-0.16px	Aa Bb Cc
button	Arial	13px	400	1.4	0	Aa Bb Cc

Spacing scale

10px

Radius scale

0px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #fb3b2c;
  --color-surface: #fbaca4;
  --color-ink: #440828;
  --color-accent: #545ca4;
  --color-detail: #bca38b;
}

/* CSS variables exposed by source */
:root {
  --border: rgba(28, 28, 28);
  --primary-light: rgba(251, 250, 243);
  --primary-dark: rgba(28, 28, 28);
  --primary-dark-hover: rgba(103, 116, 131);
  --primary-dark-alt: rgb(44, 44, 44);
  --highlight-hover: #add05b;
  --muted: rgba(233, 229, 219);
  --highlight: #d0fa66;
  --radio: #e94736;
  --process: rgb(253, 235, 101);
  --button-primary: rgba(28, 28, 28);
  --muted-hover: rgb(201, 195, 177);
  --offwhite: rgba(233, 229, 219, 0.5);
  --medium: rgb(81, 90, 99);
}

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 NoGood · Work.
Reference design system (extracted from the live site):
- Palette: #fb3b2c, #fbaca4, #440828, #545ca4, #bca38b
- Typefaces: UntitledSans-Regular, 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/nogood-studio--work

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

UntitledSans-Regular

48px

400

-0.48px

Aa Bb Cc

body

UntitledSans-Regular

16px

400

-0.16px

Aa Bb Cc

button

Arial

13px

400

1.4

Aa Bb Cc

:root { --color-dominant: #fb3b2c; --color-surface: #fbaca4; --color-ink: #440828; --color-accent: #545ca4; --color-detail: #bca38b; } /* CSS variables exposed by source */ :root { --border: rgba(28, 28, 28); --primary-light: rgba(251, 250, 243); --primary-dark: rgba(28, 28, 28); --primary-dark-hover: rgba(103, 116, 131); --primary-dark-alt: rgb(44, 44, 44); --highlight-hover: #add05b; --muted: rgba(233, 229, 219); --highlight: #d0fa66; --radio: #e94736; --process: rgb(253, 235, 101); --button-primary: rgba(28, 28, 28); --muted-hover: rgb(201, 195, 177); --offwhite: rgba(233, 229, 219, 0.5); --medium: rgb(81, 90, 99); }

Build a landing page in the visual style of NoGood · Work. Reference design system (extracted from the live site): - Palette: #fb3b2c, #fbaca4, #440828, #545ca4, #bca38b - Typefaces: UntitledSans-Regular, 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/nogood-studio--work