Values are read live from src/styles/tokens.css, so this page never drifts from the code.
Type
AaAaAa
Unbounded · Outfit · JetBrains Mono
Colours
Dark violet, soft gradients
Product details
OBS ReadyUnified MultichatFully Animated
Works with
01
Logo
“Stream UI” in Unbounded 800, then .fun: a pulsing LIVE dot and “fun” in Unbounded 900 filled with the animated --grad-fun. It speeds up on hover and stops under reduced motion.
Stream UIfun
On page background
Stream UIfun
On aurora hero
Stream UIfun
On a card surface
Sizes
Stream UIfunsm · 20pxMobile header
Stream UIfunmd · 24pxDesktop header
Stream UIfunlg · 36pxFooter brand column, /design
Animated vs Static
Stream UIfun
Default: the LIVE dot pulses (1.8s) and the gradient shifts (6s). Hover speeds both up.
Stream UIfun
<Logo static />: frozen frame, also used automatically under reduced motion.
Inline .fun In Headings
Join The .fun Squad
Wrap ".fun" in display headings as <span class="fun-text">.fun</span>: gradient, no dot. In body text, .fun stays plain.
Favicon
Stream UI .fun
public/favicon.svg: 64 × 64, radius 16, --cta-grad fill, white Unbounded 900 "f" (nudged 3px left), 16px --live dot top-right with a 3px #2A0F5E ring so it stays crisp at tab size.
Do
Stream UI .funKeep the space before ".fun", everywhere: titles, meta, alt text and copy.
Join The .fun SquadUse the gradient only on "fun" in the logo and on ".fun" inside display headings.
Works with OBSPair platform logos with "Works with" wording only.
Don't
StreamUI.funStream UI.funStreamuiNever drop or move the space, or change the capitals.
Stream UINever recolour "Stream UI". It is always --text-1.
gradient body textNever use the gradient on body text, buttons or long lines.
02
Colours
54 colour tokens in 6 groups. Every swatch shows the token, its value, its role and a WCAG contrast check.
Surfaces
12 tokens
Violet-tinted near-blacks. Contrast shows --text-1 set on each surface.
Text
4 tokens
Contrast measured on --bg-0. --text-4 is for legal fine print only, at 12px or more.
Purple 50–950
11 tokens
Brand scale. Light steps show contrast as text on --bg-0; dark steps show white text on them.
Accents
7 tokens
Used sparingly in gradients, previews and highlights. Contrast measured as text on --bg-0.
Roles
11 tokens
Semantic tokens. Use these in components instead of raw scale steps.
Badges
9 tokens
Each shown as a real .flag or .pill. Badge text is always --badge-ink.
Contrast keyAAA 7:1+ · AA 4.5:1+ body text · AA Large 3:1+ for 24px+ or bold 19px+ text and UI shapes · Decor below 3:1, never for text.
03
Gradients
Soft, glowing gradients. --cta-grad means “buy”, so it never appears on anything else.
.grain adds --noise at 7% opacity, mix-blend-mode: overlay.
04
Type
Three variable families from Fontsource, imported once in BaseLayout: Unbounded for display, Outfit for everything you read, JetBrains Mono for values.
AaDisplay
Unbounded
Ag600
Ag700
Ag800
Ag900
Logo, H1–H3, hero, section titles, PDP price, sticker text
Wide: keep it off running text, always use negative tracking and never set it below 18px.
@fontsource-variable/unbounded
AaBody & UI
Outfit
Ag400
Ag500
Ag600
Ag700
Ag800
Body, nav, buttons, cards, badges, forms
Body text is 16px minimum; UI text 12px minimum (11px only for 800-weight caps pills).
The ↗ appears only on links that leave the site: Gumroad checkout, the Gumroad Library and Discord. In dev, placeholder links get a dashed amber outline.
One flag per card, bottom-left. Priority: LAST CHANCE > NEW > BEST SELLER > STAFF PICK > FREE > COMING SOON > DUAL FORMAT. The PDP gallery uses the right-edge tab.
LAST CHANCELAST CHANCE
LAST CHANCE · last-chance badge
NEWNEW
NEW · released ≤ 30 days
BEST SELLERBEST SELLER
BEST SELLER · isBestSeller (real sales only)
STAFF PICKSTAFF PICK
STAFF PICK · isStaffPick (curated)
FREEFREE
FREE · price 0
COMING SOONCOMING SOON
COMING SOON · coming-soon badge
DUAL FORMATDUAL FORMAT
DUAL FORMAT · dual-format badge
Pills, Chips & Labels
Pills .pill
FLAGSHIPBEST SELLERSTAFF PICKNEW
Chat WidgetsNEW
FLAGSHIP · BEST SELLER · STAFF PICK · NEW, plus the 18px nav pill.
Save pill .save-pill
Save 37%
Percent everywhere: launch prices and bundles.
Chips .chip
Setup guides7 itemsCompatibleMissingLive preview
Countdown chip
ENDS IN 32D 09H
Real end dates only (site.launch.endsAt). Under 24h it switches to 05:12:09; past the date it disappears.
.link underlines; .link-arrow nudges its arrow on hover.
Prices & Stars
A product's struck price shows only during a real launch window with an end date; a bundle's struck price is its products bought separately. Card stars render only from 3 reviews with a 3+ average.
Card · sale
Regular price $19Sale price $12Save 37%
Card · regular
$29
Free
Free
PDP · sale .price--pdp
Regular price $19Sale price $12USDSave 37%
PDP · regular
$19USD
Mini (search, sticky bar)
Sale price $12Regular price $19
Stars · filled
Stars · partial (4.5)
Stars · empty (PDP zero state)
0 reviews · Be the first
Bundle · panel BundlePrice
Bought separately $24.49Bundle price $17.14Save 30%Save $7.35 vs buying separately
Bundle · card (mega menu)
Bought separately $64Bundle price $49Save 23%
Struck = the set's products bought separately (always derived). SAVE % = the creator's pick, or derived for a flat-price set.
Sticker Text
.sticker-text
Unbounded 900 in --lime-400 with a --purple-950 stroke. Hero offers and tilted chips only, never on buttons.
New dropUp to 40% off*Bundle & saveLevel up!
06
Product Detail Icons
These icons appear in the PRODUCT DETAILS grid on the right side of every product page. Each product picks 6.
Product details
Live Sample Grid
The exact grid from the buy box on Graveyard Stream Chat: 3 columns (2 below 360px), cream tiles of 56px that grow to 64px in roomy columns, 28–30px icons at stroke 1.75. Hover, focus or tap a tile to open its tooltip; Esc or a tap outside closes it.
Pick 6 ids per product and list them in its Markdown frontmatter:
Click or tap a tile to copy its id. Hover or focus it to read what it promises.Each card shows the label, the buy-box tooltip text, then the id and lucide name. The copy button copies the id.
Compatibility
6 icons
OBS Ready
Drops straight into OBS Studio as a browser source, media source or scene collection.
obs-ready · monitor-play
Streamlabs Ready
Imports into Streamlabs Desktop with the included setup file or widget link.
streamlabs-ready · app-window
StreamElements Widget
One-click import as a StreamElements custom widget, then paste the overlay URL.
streamelements-widget · puzzle
Streamer.bot Ready
A self-hosted version runs locally through Streamer.bot, with no third-party overlay service.
streamerbot-ready · bot
Any Browser Source
Works in any app with browser sources, including OBS, Streamlabs, Meld Studio and XSplit.
browser-source · globe
Multi-Platform
Use it on Twitch, YouTube, Kick, TikTok LIVE, Facebook Gaming and more.
multi-platform · cast
Setup
4 icons
1-Click Install
An import link or scene collection sets everything up for you.
one-click-install · mouse-pointer-click
5-Min Setup
Go from download to live in about five minutes.
quick-setup · timer
No Code Needed
Customize everything with sliders, toggles and colour pickers.
no-code · wand-sparkles
Video Tutorial
A step-by-step setup video and an illustrated PDF guide are included.
video-tutorial · circle-play
Visual & Format
10 icons
Fully Animated
Smooth, hand-keyed motion on every element.
fully-animated · sparkles
Transparent Background
A true alpha channel, so no green screen or chroma key is needed.
transparent-bg · layers
WebM + MOV
WebM (VP9 alpha) for OBS, MOV for editing and Mac, plus an MP4 preview.
webm-mov · file-video-camera
1080p Full HD
Rendered natively at 1920 × 1080 for pixel-perfect scenes.
full-hd · monitor
1440p Ready
Stays crisp at Twitch's 2K (2560 × 1440) streaming quality.
qhd-1440p · maximize
Smooth 60 FPS
Plays at 60 frames per second, with a 30 FPS copy included.
fps-60 · gauge
Dual Format
Matching 16:9 and 9:16 layouts for Twitch Dual Format, TikTok LIVE and Shorts.
dual-format · monitor-smartphone
Seamless Loop
Loops forever with no visible jump or flash.
seamless-loop · repeat
Lightweight
Small files with low CPU and GPU impact while you game.
lightweight · feather
Sound FX Included
Matching SFX in high, medium, low and no-audio versions.
sound-fx · volume-2
Customization
4 icons
Custom Colours
Change every colour to match your brand in seconds.
custom-colours · palette
Custom Fonts
Pick any Google Font or load your own.
custom-fonts · type
Colourways Included
Pre-made colour variants, ready to drop in.
colour-variants · swatch-book
Editable Source
Layered PSD source files to make it truly yours.
editable-source · pen-tool
Widget Features
5 icons
Live Goal Tracking
Updates in real time as follows, subs, bits and tips roll in.
live-tracking · goal
All Event Types
Tracks follows, subs, gift subs, bits, tips, YouTube members and Kick subs.
all-events · bell-ring
Goal Celebration
Fires a confetti burst and sound when your goal is hit.
goal-celebration · party-popper
Unified Multichat
Shows Twitch, YouTube, Kick and TikTok chat in one feed.
multichat · messages-square
Emotes & Badges
Renders native emotes, 7TV/BTTV/FFZ emotes and chat badges.
emotes-badges · face-slightly-smiling
Stickers & Emotes
2 icons
Discord Sticker Ready
320 × 320 APNG files under 512 KB, ready to upload to your server.
discord-sticker-ready · sticker
Emote-Ready Sizes
112, 56 and 28 px exports for Twitch, Kick and YouTube emotes.
emote-ready · face-slightly-smiling-plus
Delivery & Trust
5 icons
Instant Download
Gumroad delivers your files the second you pay.
instant-download · download
Free Lifetime Updates
Every new version lands in your Gumroad Library for free.
lifetime-updates · refresh-cw
Streamer Licence
Use it on monetized streams, VODs, clips and socials (no resale).
streamer-licence · badge-check
Pay Once
No subscription. It's yours forever.
pay-once · wallet
Discord Support
Real humans help you get set up, usually within 24 hours.
discord-support · life-buoy
No icons match that filter. Try “obs”, “loop” or “discord”.
07
Platform Icons
Every streaming platform, streaming app, community and payment mark we use, as monochrome SVGs. Hover a tile to see its brand colour; click it to copy its id.
53 brand marks · every SVG present
Files live in src/icons/platforms/ and src/icons/payments/. Paths below are relative to src/icons/. Use a mark with <BrandIcon id="twitch" />.
Streaming
18 icons
Software
16 icons
Community
12 icons
Payments
7 icons
Twitch, YouTube, Kick, TikTok, OBS Studio, Streamlabs, StreamElements, Discord, X and other names are trademarks of their respective owners. Stream UI .fun is not affiliated with or endorsed by them. Logos only ever say “Works with”, never “official” or “partner”.
08
Radii & Shadows
Rounded, soft and glowing. Shadows stay dark and deep; glows carry the brand purple.
Radii
8 tokens
Shadows & Glows
9 tokens
Spacing & Layout
4px base
Spacing steps are multiples of 4px. Layout tokens size containers, gutters and section rhythm.
09
Motion
Quick, springy and purposeful. Previews pause until hovered or in view.
Duration & Easing
Hover a row to run it, or play them all (each dot travels with its duration and easing).
5 durations · 2 easings
100msPress feedback
200msHovers, colour, lift
300msPanels, accordions, dots
500msLarge reveals
600msHero crossfade
cubic-bezier(0, 0, .3, 1)Default for everything that enters or moves
Buttons and tiles rise 4px on hover over --dur-2 with --ease-out.
.fun
6s linear
The --grad-fun fill slides 200% and loops seamlessly (first and last stops match).
Live
1.8s ease-out
An expanding ring on the LIVE dot. The glow stays on in the static frame.
MockPreview Kinds
5 kinds · play in view
Every product preview is HTML and CSS sized in container units, so one component scales from a 64px thumb to the hero. Here they play while this row is on screen and pause as soon as it leaves.
Live chat
pixelmoththat clutch was CLEAN
ravi.playswatching from YouTube!
bean_ttvGG GG GG
luna.codeshow is chat this pretty
mod_sprout!discord for the setup guide
kaiwavesfirst time here, hi chat
kind="chat"Row every 1.4s · 8.4s loop
Follower goal · LVL 7 / 50
+1 follow
Level up!
kind="goal"8 steps to 100% · LEVEL UP · 8s
POGGGLOLRIPBRB+1
kind="stickers"Staggered pops 250ms · 3s
Live
StartingSoon
Grab a snack · Chat is open
CAM
kind="overlay"Stars 20s · glow 2.4s · LIVE pulse
Scene: GameplayScene: Just ChattingTP 900 ms
kind="stinger"Sweep 1.8s · cut at 900 ms · 3.6s
Every animation has a reduced-motion static frame. Under prefers-reduced-motion: reduce motion stops and each preview shows a meaningful still: chat rows 1–4, goal at 76%, stickers at rest, overlay stars fixed, stinger mid-sweep on "JUST CHATTING".
10
Components
Live instances rendered from the same components and data the store uses.
NEW
NEW