№ dolby-com--dolby-tv-tcl-tcl-q6-50q651g-tv-127-cm-50-4k-ultra-hd-smart-tv-wi-fi-black-50q651gic122339691

Dolby

Deep, cool indigo depths with crisp, geometric sans-serifs feel profoundly technical.

Specimenminimalism monochrome consumer techlight

The page uses a dark, atmospheric image of water to create a sense of depth and immersion. Large, clean typography emphasizes the product name and a concise description. The overall feel is sophisticated and focused on conveying a sense of advanced technology. · dolby atmos, audio technology, immersive sound, sound innovation, audio experience, dark website, tech branding, product launch

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 · cool · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#34497e
OKLCHoklch(41.5% 0.093 266)
RoleDominant
find sites →
Hex#1c2864
OKLCHoklch(30.6% 0.107 270)
RoleSurface
find sites →
Hex#a1b0d8
OKLCHoklch(75.9% 0.060 269)
RoleInk
find sites →
Hex#646cac
OKLCHoklch(55.3% 0.100 277)
RoleAccent
find sites →
Hex#b0b5c3
OKLCHoklch(77.3% 0.021 270)
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	AvenirNext-DemiBold	80px	700	1.1	-1.5px	Aa Bb Cc
h3	AvenirNext-DemiBold	40px	700	1.2	-0.75px	Aa Bb Cc
body	AvenirNextLTPro-Medium	16px	400	1.4	0	Aa Bb Cc
button	Arial	15px	400	1.4	0	Aa Bb Cc

Spacing scale

34px

40px

56px

64px

Radius scale

0px

2px

30px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #34497e;
  --color-surface: #1c2864;
  --color-ink: #a1b0d8;
  --color-accent: #646cac;
  --color-detail: #b0b5c3;
}

/* CSS variables exposed by source */
:root {
  --color-primary: #ae3fff;
  --color-primary-dark: #682599;
  --color-default: #000;
  --web-height: 900px;
  --blue-purple: #3e44fe;
}

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 Dolby.
Reference design system (extracted from the live site):
- Palette: #34497e, #1c2864, #a1b0d8, #646cac, #b0b5c3
- Typefaces: AvenirNext-DemiBold, AvenirNextLTPro-Medium, Arial
- Macrostructure: Specimen
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/dolby-com--dolby-tv-tcl-tcl-q6-50q651g-tv-127-cm-50-4k-ultra-hd-smart-tv-wi-fi-black-50q651gic122339691

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

AvenirNext-DemiBold

80px

700

1.1

-1.5px

Aa Bb Cc

AvenirNext-DemiBold

40px

700

1.2

-0.75px

Aa Bb Cc

body

AvenirNextLTPro-Medium

16px

400

1.4

Aa Bb Cc

button

Arial

15px

400

1.4

Aa Bb Cc

:root { --color-dominant: #34497e; --color-surface: #1c2864; --color-ink: #a1b0d8; --color-accent: #646cac; --color-detail: #b0b5c3; } /* CSS variables exposed by source */ :root { --color-primary: #ae3fff; --color-primary-dark: #682599; --color-default: #000; --web-height: 900px; --blue-purple: #3e44fe; }

Build a landing page in the visual style of Dolby. Reference design system (extracted from the live site): - Palette: #34497e, #1c2864, #a1b0d8, #646cac, #b0b5c3 - Typefaces: AvenirNext-DemiBold, AvenirNextLTPro-Medium, Arial - Macrostructure: Specimen 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/dolby-com--dolby-tv-tcl-tcl-q6-50q651g-tv-127-cm-50-4k-ultra-hd-smart-tv-wi-fi-black-50q651gic122339691