№ bittersoutherner-com--contact

Part of Bittersoutherner - 3 pages captured →

Bittersoutherner

Raw, muted crimson and indigo, a spacious, stark geometry with assertive, clean sans-serifs.

Marquee Heroeditorial minimalism medialight

The composition prioritizes a striking visual statement, using bold typography and a surreal illustration to immediately convey a thematic concept. The limited color palette and ample negative space contribute to a contemplative mood. · art editorial, graphic design, illustration, political art, minimalist design, typography, dark theme, statement art

Bittersoutherner - mobile — Mobile · 375

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

SwatchHexOKLCHSuggested roleCopy

Hex#c41507
OKLCHoklch(52.2% 0.205 30)
RoleDominant
find sites →
Hex#0c3484
OKLCHoklch(35.5% 0.142 262)
RoleSurface
find sites →
Hex#d9745c
OKLCHoklch(66.8% 0.132 34)
RoleInk
find sites →
Hex#4b74ae
OKLCHoklch(55.5% 0.102 257)
RoleAccent
find sites →
Hex#cfa7a5
OKLCHoklch(76.4% 0.047 22)
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	Open Sans	55px	300	1.25	1px	Aa Bb Cc
h2	courier-std	20px	400	1.4	1px	Aa Bb Cc
h3	Times New Roman	28px	400	1.35	0	Aa Bb Cc
body	calluna	20px	400	1.6	0	Aa Bb Cc
button	calluna	14px	400	2.86	0	Aa Bb Cc

Spacing scale

12px

64px

Radius scale

0px

Container

Max content width 1392px

Export

:root {
  --color-dominant: #c41507;
  --color-surface: #0c3484;
  --color-ink: #d9745c;
  --color-accent: #4b74ae;
  --color-detail: #cfa7a5;
}

/* CSS variables exposed by source */
:root {
  --commerce-mini-cart-image-placeholder-size: 22px;
  --commerce-mini-cart-image-size: 60px;
}

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 Bittersoutherner.
Reference design system (extracted from the live site):
- Palette: #c41507, #0c3484, #d9745c, #4b74ae, #cfa7a5
- Typefaces: Open Sans, courier-std, calluna
- Macrostructure: Marquee Hero
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/bittersoutherner-com--contact

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Open Sans

55px

300

1.25

1px

Aa Bb Cc

courier-std

20px

400

1.4

1px

Aa Bb Cc

Times New Roman

28px

400

1.35

Aa Bb Cc

body

calluna

20px

400

1.6

Aa Bb Cc

button

calluna

14px

400

2.86

Aa Bb Cc

:root { --color-dominant: #c41507; --color-surface: #0c3484; --color-ink: #d9745c; --color-accent: #4b74ae; --color-detail: #cfa7a5; } /* CSS variables exposed by source */ :root { --commerce-mini-cart-image-placeholder-size: 22px; --commerce-mini-cart-image-size: 60px; }

Build a landing page in the visual style of Bittersoutherner. Reference design system (extracted from the live site): - Palette: #c41507, #0c3484, #d9745c, #4b74ae, #cfa7a5 - Typefaces: Open Sans, courier-std, calluna - Macrostructure: Marquee Hero 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/bittersoutherner-com--contact