№ twitch-tv

Twitch Tv

Electric indigo depths, crisp sans-serifs, a fiercely focused, data-driven expanse.

Ecosystem Indexmonochrome minimalism media gaminglight

The interface prioritizes live video feeds, presenting a dynamic and energetic visual experience. Dark mode and a limited color palette emphasize the content, creating a focused, almost industrial feel. · live streaming, video platform, gaming, twitch, dark interface, content discovery, user profiles, real-time, community

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

SwatchHexOKLCHSuggested roleCopy

Hex#e03431
OKLCHoklch(59.5% 0.208 27)
RoleDominant
find sites →
Hex#421493
OKLCHoklch(35.8% 0.184 290)
RoleSurface
find sites →
Hex#d9aa5a
OKLCHoklch(76.5% 0.112 79)
RoleInk
find sites →
Hex#7e5e96
OKLCHoklch(53.7% 0.092 310)
RoleAccent
find sites →
Hex#9bcfbc
OKLCHoklch(81.3% 0.060 170)
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
h2	Roobert	18px	500	1.1	-0.18px	Aa Bb Cc
h3	Roobert	14px	600	1.4	0	Aa Bb Cc
body	Inter	14px	400	1.4	0	Aa Bb Cc
button	Inter	14px	600	1.4	0	Aa Bb Cc

Spacing scale

8px

Radius scale

0px

2px

4px

8px

Container

Max content width 1200px

Export

:root {
  --color-dominant: #e03431;
  --color-surface: #421493;
  --color-ink: #d9aa5a;
  --color-accent: #7e5e96;
  --color-detail: #9bcfbc;
}

/* CSS variables exposed by source */
:root {
  --color-text-button-text-focus: rgba(92, 22, 197, 0.05);
  --color-background-button-overlay-info: #7aa7ff;
  --color-text-label: #18181b;
  --color-fill-icon-apple: #000000;
  --color-social-twitter: #000000;
  --color-border-button-overlay: rgba(0, 0, 0, 0);
  --color-orange-10: #c28100;
  --color-border-bottom-sheet-item: rgba(173, 173, 184, 0.35);
  --color-background-input-checkbox-checked-background-overlay: #000000;
  --color-background-hover: rgba(0, 0, 0, 0.05);
  --color-border-input-checkbox: rgba(50, 50, 57, 0.95);
  --color-background-chat: #f7f7f8;
  --color-border-input-hover: rgba(50, 50, 57, 0.62);
  --color-fill-button-icon: #0e0e10;
  --color-text-button-status-focus: #ffffff;
  --color-border-button-overlay-bordered: #ffffff;
  --color-cyan-11: #00b8b8;
  --space-0800: 64px;
  --color-background-prime: #0e9bd8;
  --color-yellow-9: #7a7a00;
  --color-fill-channel-status-text-indicator-offline: #000000;
  --color-background-modal-mask: rgba(222, 222, 227, 0.95);
  --space-0250: 20px;
  --space-7: 56px;
  --color-opac-w-9: rgba(255, 255, 255, 0.6);
  --color-green-13: #00f593;
  --space-0075: 6px;
  --color-border-segmented-button: rgba(50, 50, 57, 0.62);
  --color-background-accent: #5c16c5;
  --color-twitter: #000000;
  --color-data-series-a-alt: #772ce8;
  --color-fill-alt-2: #3b3b44;
  --color-facebook-legacy: #3b5998;
  --color-opac-w-11: rgba(255, 255, 255, 0.75);
  --color-border-tab-focus: #9147ff;
  --space-1200: 96px;
  --color-magenta-3: #20041b;
  --color-deprecated-brand-muted-mint: #5cffbe;
  --space-0050: 4px;
  --color-border-image-selector-overlay: rgba(255, 255, 255, 0.28);
  --shadow-input-error-focus: 0 0 6px -3px #bb1411;
  --color-border-region: #dedee3;
  --color-fill-warn: #9e6900;
  --font-mono: monospace;
  --color-text-interactable-hover: #ffffff;
  --color-border-input-checkbox-error: #bb1411;
  --space-0025: 2px;
  --color-hinted-grey-6: #3b3b44;
  --shadow-button-active: 0 0 6px 0 #772ce8;
  --color-background-button-overlay-active: rgba(255, 255, 255, 0.08);
  --color-background-button-alert-active: #e91916;
  --color-social-snapchat: #fffc00;
  --color-opac-gl-3: rgba(173, 173, 184, 0.43);
  --color-border-tag-overlay: rgba(255, 255, 255, 0.28);
  --color-border-input-focus: #772ce8;
  --color-background-snackbar-error: #ff8280;
  --color-background-ftue-tooltip: #ffffff;
  --color-prime-blue: #0e9bd8;
  --space-5: 40px;
  --color-background-date-picker-range: #5c16c5;
}

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 Twitch Tv.
Reference design system (extracted from the live site):
- Palette: #e03431, #421493, #d9aa5a, #7e5e96, #9bcfbc
- Typefaces: Roobert, Inter
- Macrostructure: Ecosystem Index
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/twitch-tv

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Roobert

18px

500

1.1

-0.18px

Aa Bb Cc

Roobert

14px

600

1.4

Aa Bb Cc

body

Inter

14px

400

1.4

Aa Bb Cc

button

Inter

14px

600

1.4

Aa Bb Cc

:root { --color-dominant: #e03431; --color-surface: #421493; --color-ink: #d9aa5a; --color-accent: #7e5e96; --color-detail: #9bcfbc; } /* CSS variables exposed by source */ :root { --color-text-button-text-focus: rgba(92, 22, 197, 0.05); --color-background-button-overlay-info: #7aa7ff; --color-text-label: #18181b; --color-fill-icon-apple: #000000; --color-social-twitter: #000000; --color-border-button-overlay: rgba(0, 0, 0, 0); --color-orange-10: #c28100; --color-border-bottom-sheet-item: rgba(173, 173, 184, 0.35); --color-background-input-checkbox-checked-background-overlay: #000000; --color-background-hover: rgba(0, 0, 0, 0.05); --color-border-input-checkbox: rgba(50, 50, 57, 0.95); --color-background-chat: #f7f7f8; --color-border-input-hover: rgba(50, 50, 57, 0.62); --color-fill-button-icon: #0e0e10; --color-text-button-status-focus: #ffffff; --color-border-button-overlay-bordered: #ffffff; --color-cyan-11: #00b8b8; --space-0800: 64px; --color-background-prime: #0e9bd8; --color-yellow-9: #7a7a00; --color-fill-channel-status-text-indicator-offline: #000000; --color-background-modal-mask: rgba(222, 222, 227, 0.95); --space-0250: 20px; --space-7: 56px; --color-opac-w-9: rgba(255, 255, 255, 0.6); --color-green-13: #00f593; --space-0075: 6px; --color-border-segmented-button: rgba(50, 50, 57, 0.62); --color-background-accent: #5c16c5; --color-twitter: #000000; --color-data-series-a-alt: #772ce8; --color-fill-alt-2: #3b3b44; --color-facebook-legacy: #3b5998; --color-opac-w-11: rgba(255, 255, 255, 0.75); --color-border-tab-focus: #9147ff; --space-1200: 96px; --color-magenta-3: #20041b; --color-deprecated-brand-muted-mint: #5cffbe; --space-0050: 4px; --color-border-image-selector-overlay: rgba(255, 255, 255, 0.28); --shadow-input-error-focus: 0 0 6px -3px #bb1411; --color-border-region: #dedee3; --color-fill-warn: #9e6900; --font-mono: monospace; --color-text-interactable-hover: #ffffff; --color-border-input-checkbox-error: #bb1411; --space-0025: 2px; --color-hinted-grey-6: #3b3b44; --shadow-button-active: 0 0 6px 0 #772ce8; --color-background-button-overlay-active: rgba(255, 255, 255, 0.08); --color-background-button-alert-active: #e91916; --color-social-snapchat: #fffc00; --color-opac-gl-3: rgba(173, 173, 184, 0.43); --color-border-tag-overlay: rgba(255, 255, 255, 0.28); --color-border-input-focus: #772ce8; --color-background-snackbar-error: #ff8280; --color-background-ftue-tooltip: #ffffff; --color-prime-blue: #0e9bd8; --space-5: 40px; --color-background-date-picker-range: #5c16c5; }

Build a landing page in the visual style of Twitch Tv. Reference design system (extracted from the live site): - Palette: #e03431, #421493, #d9aa5a, #7e5e96, #9bcfbc - Typefaces: Roobert, Inter - Macrostructure: Ecosystem Index 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/twitch-tv