№ dragcity-com

Dragcity

Warm, vintage orange hues embrace playful, slightly chaotic typography in airy, layered space.

Portfolio Grideditorial vintage maximalism musiclight

The layout prioritizes visual interest through varied block sizes and a dynamic arrangement. Typography is prominent, with a mix of display and body fonts contributing to a layered, textured feel. The color palette is muted and earthy, lending a vintage aesthetic. · music label website, independent music, vintage design, bento grid layout, editorial website, music promotion, record label, drag city, music store

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: muted · earthy · saturated

SwatchHexOKLCHSuggested roleCopy

Hex#ce7c78
OKLCHoklch(67.3% 0.103 23)
RoleDominant
find sites →
Hex#1d4454
OKLCHoklch(36.6% 0.052 228)
RoleSurface
find sites →
Hex#90d3f8
OKLCHoklch(83.5% 0.085 233)
RoleInk
find sites →
Hex#a87c52
OKLCHoklch(62.0% 0.079 64)
RoleAccent
find sites →
Hex#d4c7bb
OKLCHoklch(83.7% 0.022 65)
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	Georgia	14px	400	1.29	Aa Bb Cc
h2	Georgia	25px	700	1	Aa Bb Cc
h3	Georgia	25px	400	1	Aa Bb Cc
body	Georgia	14px	400	1.29	Aa Bb Cc
button	Arial	13px	400	1.4	Aa Bb Cc

Spacing scale

27px

129px

Radius scale

0px

Export

:root {
  --color-dominant: #ce7c78;
  --color-surface: #1d4454;
  --color-ink: #90d3f8;
  --color-accent: #a87c52;
  --color-detail: #d4c7bb;
}

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 Dragcity.
Reference design system (extracted from the live site):
- Palette: #ce7c78, #1d4454, #90d3f8, #a87c52, #d4c7bb
- Typefaces: Georgia, 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/dragcity-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Georgia

14px

400

1.29

Aa Bb Cc

Georgia

25px

700

Aa Bb Cc

Georgia

25px

400

Aa Bb Cc

body

Georgia

14px

400

1.29

Aa Bb Cc

button

Arial

13px

400

1.4

Aa Bb Cc

Build a landing page in the visual style of Dragcity. Reference design system (extracted from the live site): - Palette: #ce7c78, #1d4454, #90d3f8, #a87c52, #d4c7bb - Typefaces: Georgia, 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/dragcity-com