Live entertainment / Ultraviolet

Broadcast-first UI with creator energy built into the chrome.

Near-black stage, purple CTAs, creator accents, and chat-shaped product modules make the system read as Twitch immediately.

Just Chatting with the squad poki_live • 42.6K viewers
Affiliate
English
Creator Accent
Stream Chat 6.4K
KappaRush gifted 10 subs
MOD This hover extrusion is pure Twitch.
BitsMage cheering with 500 Bits
MintSignal creator color on the card edge
FOLLOW New emote unlocked for the channel
Send a message
19 ColorsDark product + support light mode
13 Type LevelsGeometric Roobert-style hierarchy
16 ComponentsButtons, cards, nav, commerce
42+ TokensColor, type, radius, spacing, shadow
01 / Colors
Purple action, black stage, creator burst.
Primary & Action
primary
#9146FF

Main action.

accent
#BF94FF

Lavender emphasis.

accentHover
#772CE8

Hover purple.

accentPressed
#5C16C5

Pressed purple.

link
#BF94FF

Brand-family link.

Surfaces
canvas
#0E0E10

Main stage.

surface
#18181B

Raised dark layer.

surfaceAlt
#1F1F23

Utility surface.

supportCanvas
#F4F7FA

Service background.

twitch-ice
#F0F0FF

Brand-site wash.

Neutrals & Semantic
ink
#EFEFF1

High-emphasis text.

body
#ADADB8

Reading color.

muted
#848494

Metadata chrome.

border
#2F2F35

Dark separators.

borderStrong
#53535F

Heavy separation.

success
#00C8AF

Positive state.

warning
#FFCA5F

Caution state.

error
#FA2828

Error state.

Brand-specific signatures
creator-accent
#00FAFA

Identity accent.

creator-accentAlt
#BEFF00

Alternate burst.

liveLavender
#D2D2E6

Editorial surface.

02 / Typography
Square-soft type with broadcast confidence.
Stage headline
display — 64 / 600 / 0.98 / -0.02em / SG
Go live now
hero — 56 / 600 / 1.00 / -0.015em / SG
Ultraviolet headline
headline-lg — 40 / 600 / 1.05 / -0.01em / SG
Create together
title-lg — 32 / 600 / 1.10 / -0.01em / SG
Get discovered
title-md — 24 / 600 / 1.15 / 0em / SG
Emotes and tools
title-sm — 18 / 600 / 1.20 / 0em / SG
Plain body copy lets media lead.
body — 16 / 400 / 1.50 / 0em / SG
Utility copy for metadata.
body-sm — 14 / 400 / 1.43 / 0em / SG
Live now
label — 13 / 600 / 1.20 / 0.02em / SG
Button label
button — 14 / 600 / 1.30 / 0em / SG
Brand CTA pill label
button-lg — 18 / 600 / 1.20 / 0em / SG
Muted caption for metadata.
caption — 12 / 400 / 1.33 / 0.01em / SG
Support and legal copy.
legal — 14 / 400 / 1.50 / 0em / SG
03 / Buttons
Compact utility controls plus brand pills
button-primary
button-primary-active
button-secondary
button-secondary-hover
button-pill-brand
button-ghost-nav
button-icon
product-status button
04 / Cards & Surfaces
Dark tiles, creator flashes, support white panels.

Watch what you love

Default dark tile for media-first product UI.

See our lineup

Engage your community

Secondary dark surface for chat tools and controls.

Open chat tools

Creator accent surface

Accent color appears in bounded identity moments.

Use profile accent

Brand lavender card

Editorial surface from the wider Twitch palette.

Get on brand

Category portrait

Aspect ratio is part of Twitch wayfinding.

Browse categories

Support panel

White service panel with the observed support shadow.

Submit case
05 / Brand-Specific Product Patterns
This is the part that makes it unmistakably Twitch.

Live channel lane

Just Chatting
Sports
Travel
Live / browse / creator accent

Leaderboard / raid momentum

1
mythic_chat
+14.2K viewers
▲
2
fem_stream
Gifted 50 subs
Bits
3
night_modeirl
Raid incoming
Live

Browse category portraits

3:4 category silhouettes

Subs / Bits / Turbo commerce row

Tier 1 Sub
$4.99 / recurring
Emotes
500 Bits
Chat boost
Cheer
Turbo
No ads + perks
Premium

Chat card with profile accents

Channel Chatslow mode off
PogPulse clipped that moment
MintArc new emote unlocked
RaidLamp brought 1.2K viewers
Share your take
06 / Forms
Dark product inputs and light support forms.
Enable subscriber-only chat
Show creator accent on hover tiles
Attach account details
Urgent creator support
07 / Spacing
Compact controls, generous section bands.
xs
4px
sm
8px
md
16px
lg
24px
xl
32px
section
96px
08 / Radius
Sharp-soft corners, not bubbly SaaS rounding.
sm
4px
tight badges
md
6px
utility buttons
lg
8px
cards & media
xl
16px
support shells
pill
9999px
brand CTAs
09 / Elevation
Mostly flat. Depth comes from surface steps.
Flat product surface

No shadow. Use stepped dark surfaces.

box-shadow: none
Border-separated tile

Depth comes from borders and media contrast.

box-shadow: none
Support dropdown / panel

Observed support shadow for service panels.

0px 3px 10px 0px rgba(0,0,0,0.14)
10 / Extracted Component Tokens
The core variables in one place.
:root {
--brand-primary:#9146FF;
--brand-accent:#BF94FF;
--brand-ink:#EFEFF1;
--brand-canvas:#0E0E10;
--brand-surface:#18181B;
--brand-border:#2F2F35;
--brand-creator:#00FAFA;
--font-display:"Space Grotesk",Arial,sans-serif;
--font-mono:monospace;
--radius-md:6px;
--radius-lg:8px;
--radius-pill:9999px;
--shadow-support:0px 3px 10px 0px rgba(0,0,0,0.14);
}