№ thirdmanrecords-com

Thirdmanrecords

Warm, vintage serif whispers across a spacious, subtly textured canvas of ochre and deep umber.

Bento Gridminimalism editorial vintage dark mode music ecommercedark

The layout prioritizes visual impact with a strong hero image and carefully arranged product shots. The color palette is restrained, emphasizing the textures of the vinyl and the typography. It feels like a curated presentation of objects. · vinyl records, music store, album art, thirdman records, ted lucas, record collection, music merchandise, vintage records, black and white, product display

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

SwatchHexOKLCHSuggested roleCopy

Hex#fcd404
OKLCHoklch(87.8% 0.180 95)
RoleDominant
find sites →
Hex#70550b
OKLCHoklch(46.5% 0.091 86)
RoleSurface
find sites →
Hex#86bcd6
OKLCHoklch(76.7% 0.067 229)
RoleInk
find sites →
Hex#afa16d
OKLCHoklch(70.9% 0.072 95)
RoleAccent
find sites →
Hex#c6bba9
OKLCHoklch(79.6% 0.028 80)
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	Inter	20px	900	1.5	Aa Bb Cc
h2	Inter	32px	900	1.2	Aa Bb Cc
h3	Inter	28px	900	1.2	Aa Bb Cc
body	Inter	16px	400	1.5	Aa Bb Cc
button	Inter	16px	400	1.5	Aa Bb Cc

Spacing scale

8px

16px

24px

48px

57px

Radius scale

0px

4px

5px

6px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #fcd404;
  --color-surface: #70550b;
  --color-ink: #86bcd6;
  --color-accent: #afa16d;
  --color-detail: #c6bba9;
}

/* CSS variables exposed by source */
:root {
  --color-background: #FFFFFF;
  --font-primary--family: Inter, sans-serif;
  --font-primary--weight: 400;
  --font-primary--style: normal;
  --color-foreground: #333333;
  --bs-orange: #fd7e14;
  --wk-button-border-width: 1px;
  --bs-link-hover-color-rgb: 10,88,202;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-success: #198754;
  --wk-shadow-opacity: 15%;
  --bs-danger-text-emphasis: #58151c;
  --bs-border-style: solid;
  --bs-warning-rgb: 255,193,7;
  --bs-info-text-emphasis: #055160;
  --bs-body-font-weight: 400;
  --bs-primary: #0d6efd;
  --bs-code-color: #d63384;
  --bs-border-radius-2xl: 2rem;
  --wk-color-accent-2: 255, 210, 0;
  --bs-body-line-height: 1.5;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-purple: #6f42c1;
  --bs-green: #198754;
  --bs-link-hover-color: #0a58ca;
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-cyan: #0dcaf0;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-info-rgb: 13,202,240;
  --bs-dark-text-emphasis: #495057;
  --bs-breakpoint-xs: 0;
  --wk-color-accent-1: 0, 0, 0;
  --bs-border-radius-sm: 0.25rem;
  --bs-gray-400: #ced4da;
  --page-margin: 20px;
  --bs-primary-text-emphasis: #052c65;
  --wk-shadow-blur: 4px;
  --bs-pink: #d63384;
  --bs-primary-bg-subtle: #cfe2ff;
  --wk-color-outline-button-label: 0, 0, 0;
  --wk-button-border-radius: 0px;
  --bs-gray-100: #f8f9fa;
  --bs-link-decoration: underline;
  --bs-border-radius: 0.375rem;
  --bs-white: #fff;
  --bs-danger: #dc3545;
  --bs-gray-600: #6c757d;
  --bs-body-bg-rgb: 255,255,255;
  --bs-highlight-color: #212529;
  --bs-success-text-emphasis: #0a3622;
  --wk-input-border-width: 1px;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-gray-500: #adb5bd;
  --bs-border-radius-xxl: 2rem;
  --bs-dark-rgb: 33,37,41;
  --bs-teal: #20c997;
  --bs-indigo: #6610f2;
  --page-width: 90rem;
  --bs-dark: #212529;
}

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 Thirdmanrecords.
Reference design system (extracted from the live site):
- Palette: #fcd404, #70550b, #86bcd6, #afa16d, #c6bba9
- Typefaces: Inter
- Macrostructure: Bento 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/thirdmanrecords-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter

20px

900

1.5

Aa Bb Cc

Inter

32px

900

1.2

Aa Bb Cc

Inter

28px

900

1.2

Aa Bb Cc

body

Inter

16px

400

1.5

Aa Bb Cc

button

Inter

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #fcd404; --color-surface: #70550b; --color-ink: #86bcd6; --color-accent: #afa16d; --color-detail: #c6bba9; } /* CSS variables exposed by source */ :root { --color-background: #FFFFFF; --font-primary--family: Inter, sans-serif; --font-primary--weight: 400; --font-primary--style: normal; --color-foreground: #333333; --bs-orange: #fd7e14; --wk-button-border-width: 1px; --bs-link-hover-color-rgb: 10,88,202; --bs-warning-bg-subtle: #fff3cd; --bs-success: #198754; --wk-shadow-opacity: 15%; --bs-danger-text-emphasis: #58151c; --bs-border-style: solid; --bs-warning-rgb: 255,193,7; --bs-info-text-emphasis: #055160; --bs-body-font-weight: 400; --bs-primary: #0d6efd; --bs-code-color: #d63384; --bs-border-radius-2xl: 2rem; --wk-color-accent-2: 255, 210, 0; --bs-body-line-height: 1.5; --bs-light-bg-subtle: #fcfcfd; --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --bs-purple: #6f42c1; --bs-green: #198754; --bs-link-hover-color: #0a58ca; --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); --bs-cyan: #0dcaf0; --bs-primary-border-subtle: #9ec5fe; --bs-info-rgb: 13,202,240; --bs-dark-text-emphasis: #495057; --bs-breakpoint-xs: 0; --wk-color-accent-1: 0, 0, 0; --bs-border-radius-sm: 0.25rem; --bs-gray-400: #ced4da; --page-margin: 20px; --bs-primary-text-emphasis: #052c65; --wk-shadow-blur: 4px; --bs-pink: #d63384; --bs-primary-bg-subtle: #cfe2ff; --wk-color-outline-button-label: 0, 0, 0; --wk-button-border-radius: 0px; --bs-gray-100: #f8f9fa; --bs-link-decoration: underline; --bs-border-radius: 0.375rem; --bs-white: #fff; --bs-danger: #dc3545; --bs-gray-600: #6c757d; --bs-body-bg-rgb: 255,255,255; --bs-highlight-color: #212529; --bs-success-text-emphasis: #0a3622; --wk-input-border-width: 1px; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-gray-500: #adb5bd; --bs-border-radius-xxl: 2rem; --bs-dark-rgb: 33,37,41; --bs-teal: #20c997; --bs-indigo: #6610f2; --page-width: 90rem; --bs-dark: #212529; }

Build a landing page in the visual style of Thirdmanrecords. Reference design system (extracted from the live site): - Palette: #fcd404, #70550b, #86bcd6, #afa16d, #c6bba9 - Typefaces: Inter - Macrostructure: Bento 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/thirdmanrecords-com