№ nogood-studio--about

NoGood · About

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

Photographicmonochrome minimalism brutalism agencylight

A stark, high-contrast monochrome layout featuring a full-bleed photograph. The navigation is a thin, utilitarian bar with a fixed-width font and minimal borders. · monochrome portfolio, brutalist nav, fullbleed b&w hero, minimalist creator site, high contrast photography layout

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

SwatchHexOKLCHSuggested roleCopy

Hex#baba44
OKLCHoklch(76.7% 0.138 109)
RoleDominant
find sites →
Hex#fbfbf4
OKLCHoklch(98.6% 0.009 107)
RoleSurface
find sites →
Hex#616123
OKLCHoklch(47.9% 0.083 109)
RoleInk
find sites →
Hex#7a7a7a
OKLCHoklch(58.0% 0.000 90)
RoleAccent
find sites →
Hex#bcbcbc
OKLCHoklch(79.5% 0.000 90)
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	64px	400	1	-1.6px	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: #baba44;
  --color-surface: #fbfbf4;
  --color-ink: #616123;
  --color-accent: #7a7a7a;
  --color-detail: #bcbcbc;
}

/* 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 · About.
Reference design system (extracted from the live site):
- Palette: #baba44, #fbfbf4, #616123, #7a7a7a, #bcbcbc
- Typefaces: UntitledSans-Regular, Arial
- Macrostructure: Photographic
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--about

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

UntitledSans-Regular

64px

400

-1.6px

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: #baba44; --color-surface: #fbfbf4; --color-ink: #616123; --color-accent: #7a7a7a; --color-detail: #bcbcbc; } /* 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 · About. Reference design system (extracted from the live site): - Palette: #baba44, #fbfbf4, #616123, #7a7a7a, #bcbcbc - Typefaces: UntitledSans-Regular, Arial - Macrostructure: Photographic 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--about