№ hbo-com

Hbo

Deep charcoal and warm ochre, crisp sans serif, vast and subtly textured like aged paper.

Marquee Herominimalism editorial medialight

The page uses a striking image as a full-viewport hero, immediately establishing a mood of sophisticated drama. Text is layered over the image, creating a sense of intrigue and highlighting the show's premise. The overall feel is polished and cinematic. · tv show promotion, dark comedy, HBO series, full screen hero, cinematic design, drama promotion, series landing page, dark mode, editorial design

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

SwatchHexOKLCHSuggested roleCopy

Hex#b9700c
OKLCHoklch(61.1% 0.134 65)
RoleDominant
find sites →
Hex#8a4e04
OKLCHoklch(48.5% 0.110 62)
RoleSurface
find sites →
Hex#e7b77c
OKLCHoklch(81.0% 0.094 72)
RoleInk
find sites →
Hex#5693a9
OKLCHoklch(63.0% 0.071 223)
RoleAccent
find sites →
Hex#bdb2a5
OKLCHoklch(76.9% 0.022 72)
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	Street2	40px	700	1.23	Aa Bb Cc
h2	Street2	32px	300	1.25	Aa Bb Cc
h3	Street2	18px	500	1.25	Aa Bb Cc
body	Street2	14px	100	1.5	Aa Bb Cc
button	Street2	20px	400	1	Aa Bb Cc

Spacing scale

8px

20px

24px

48px

Radius scale

0px

2px

6px

50px

Container

Max content width 1320px

Export

:root {
  --color-dominant: #b9700c;
  --color-surface: #8a4e04;
  --color-ink: #e7b77c;
  --color-accent: #5693a9;
  --color-detail: #bdb2a5;
}

/* CSS variables exposed by source */
:root {
  --bs-yellow: #ffc107;
  --bs-info: #0dcaf0;
  --bs-orange: #fd7e14;
  --bs-border-color: #dee2e6;
  --bs-warning-border-subtle: #ffe69c;
  --bs-gray: #6c757d;
  --bs-link-hover-color-rgb: 10,88,202;
  --bs-secondary-color-rgb: 33,37,41;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-success: #198754;
  --bs-danger-text-emphasis: #58151c;
  --bs-emphasis-color: #000;
  --bs-info-bg-subtle: #cff4fc;
  --bs-form-invalid-color: #dc3545;
  --bs-border-style: solid;
  --bs-warning-rgb: 255,193,7;
  --bs-info-text-emphasis: #055160;
  --bs-light-border-subtle: #e9ecef;
  --bs-body-font-weight: 400;
  --bs-primary: #0d6efd;
  --bs-code-color: #d63384;
  --bs-border-radius-2xl: 2rem;
  --bs-secondary-color: rgba(33,37,41,0.75);
  --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --bs-body-line-height: 1.5;
  --bs-body-color-rgb: 33,37,41;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-border-radius-xl: 1rem;
  --bs-danger-rgb: 220,53,69;
  --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-purple: #6f42c1;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
  --bs-gray-200: #e9ecef;
  --bs-dark-text-emphasis: #495057;
  --bs-info-rgb: 13,202,240;
  --bs-tertiary-color: rgba(33,37,41,0.5);
  --bs-breakpoint-xs: 0;
  --bs-warning-text-emphasis: #664d03;
  --bs-border-radius-sm: 0.25rem;
  --bs-primary-text-emphasis: #052c65;
  --bs-dark-bg-subtle: #ced4da;
  --bs-gray-400: #ced4da;
  --bs-border-width: 1px;
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0,0,0,0.175);
  --bs-danger-bg-subtle: #f8d7da;
  --bs-secondary-bg: #e9ecef;
  --bs-body-font-size: 1rem;
  --bs-secondary: #6c757d;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-pink: #d63384;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-link-decoration: underline;
  --bs-border-radius: 0.375rem;
  --bs-red: #dc3545;
}

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 Hbo.
Reference design system (extracted from the live site):
- Palette: #b9700c, #8a4e04, #e7b77c, #5693a9, #bdb2a5
- Typefaces: Street2
- 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/hbo-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Street2

40px

700

1.23

Aa Bb Cc

Street2

32px

300

1.25

Aa Bb Cc

Street2

18px

500

1.25

Aa Bb Cc

body

Street2

14px

100

1.5

Aa Bb Cc

button

Street2

20px

400

Aa Bb Cc

:root { --color-dominant: #b9700c; --color-surface: #8a4e04; --color-ink: #e7b77c; --color-accent: #5693a9; --color-detail: #bdb2a5; } /* CSS variables exposed by source */ :root { --bs-yellow: #ffc107; --bs-info: #0dcaf0; --bs-orange: #fd7e14; --bs-border-color: #dee2e6; --bs-warning-border-subtle: #ffe69c; --bs-gray: #6c757d; --bs-link-hover-color-rgb: 10,88,202; --bs-secondary-color-rgb: 33,37,41; --bs-warning-bg-subtle: #fff3cd; --bs-success: #198754; --bs-danger-text-emphasis: #58151c; --bs-emphasis-color: #000; --bs-info-bg-subtle: #cff4fc; --bs-form-invalid-color: #dc3545; --bs-border-style: solid; --bs-warning-rgb: 255,193,7; --bs-info-text-emphasis: #055160; --bs-light-border-subtle: #e9ecef; --bs-body-font-weight: 400; --bs-primary: #0d6efd; --bs-code-color: #d63384; --bs-border-radius-2xl: 2rem; --bs-secondary-color: rgba(33,37,41,0.75); --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --bs-body-line-height: 1.5; --bs-body-color-rgb: 33,37,41; --bs-light-bg-subtle: #fcfcfd; --bs-border-radius-xl: 1rem; --bs-danger-rgb: 220,53,69; --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-purple: #6f42c1; --bs-primary-border-subtle: #9ec5fe; --bs-box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); --bs-gray-200: #e9ecef; --bs-dark-text-emphasis: #495057; --bs-info-rgb: 13,202,240; --bs-tertiary-color: rgba(33,37,41,0.5); --bs-breakpoint-xs: 0; --bs-warning-text-emphasis: #664d03; --bs-border-radius-sm: 0.25rem; --bs-primary-text-emphasis: #052c65; --bs-dark-bg-subtle: #ced4da; --bs-gray-400: #ced4da; --bs-border-width: 1px; --bs-box-shadow-lg: 0 1rem 3rem rgba(0,0,0,0.175); --bs-danger-bg-subtle: #f8d7da; --bs-secondary-bg: #e9ecef; --bs-body-font-size: 1rem; --bs-secondary: #6c757d; --bs-danger-border-subtle: #f1aeb5; --bs-primary-bg-subtle: #cfe2ff; --bs-pink: #d63384; --bs-gray-dark: #343a40; --bs-gray-100: #f8f9fa; --bs-link-decoration: underline; --bs-border-radius: 0.375rem; --bs-red: #dc3545; }

Build a landing page in the visual style of Hbo. Reference design system (extracted from the live site): - Palette: #b9700c, #8a4e04, #e7b77c, #5693a9, #bdb2a5 - Typefaces: Street2 - 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/hbo-com