Appearance

Stream UI's look works on two levels:

1. The overlay style, on the Overlay builder → General styles tab, applies to every widget at once. This is where the overlay gets its visual identity.
2. Each widget's Style tab, on its own page, lets one element of one widget look different — the chat's usernames, the alert's picture…

Everything follows the overlay style until you say otherwise, so start here. With several overlays, the overlay style and the widgets' styles are shared by all of them; only the canvas and the placement differ.

The overlay style

The General styles tab has a Styles column on the left, one row per part of the look below: click one to edit it in the main area. Sizes are in pixels at 1080p and scale with the canvas.

Widgets container

The box around each whole widget: its look, in the same four sections as the widgets background below. Clear by default (Transparent on, no border, padding, blur or shadow), so the widgets sit straight on the stream. Each widget's container sets its own size, spacing and content on its Style tab (below); a widget running as a horizontal bar keeps the bar's own look.

Widgets background

Chat bubbles, alerts and every widget card: their look, in four sections (Border, Padding, Background colour, Shadow). Each widget's backgrounds set their own size, spacing and content on its Style tab (below).

Titles, Subtitles, Text, Secondary text and Numbers

Five rows with the same fields: Titles (usernames, alert titles, card headers), Subtitles (labels in capitals: section, score and status names), Text (chat messages and body text), Secondary text (alert descriptions and other small text) and Numbers (counts, scores, viewers and times left).

All start with a Soft text shadow, except Numbers (Strong). Subtitles are in Capitals, with a 6 % font spacing. Every other widget text takes the Text font until you change its own.

Profile pictures

Alerts, Chat First, greetings, shoutouts, timers and viewer cards, in the sections every picture has (below). Whether a widget shows them is set on its Settings tab.

Platform icons

The Twitch, YouTube and Kick logos of Alerts, Chat Overlay, Chat First, Chatter Greeting, Viewer Counter and the viewer cards, in the same sections as profile pictures. Where each one sits is set on the widget's Settings tab.

Progress bars

Goals, polls and timers.

Separators

The thin lines: under a goal card's title, between a poll's question and its choices, and between the parts of a subathon bar.

Show / hide transition

How widgets appear and leave.

Auto (from position) brings each widget in from the edge it sits against and takes it out the same way: a widget at Middle left slides from the left, one at Top centre from the top, a corner from its side in a column position and from its edge in a row. Top and bottom bars come from their edge; the Center position, a centre bar and full-screen widgets grow from the middle.

Reset styles, on the right of the tabs, puts the whole General styles tab back to the studio's look. Styles customised on a widget's own page are kept.

A widget's Style tab

Every widget page has a Settings tab and a Style tab, in the left column — plus a Controls tab for widgets you can act on by hand; the preview stays on the right. (Chat Activity Rewards and Discord Webhooks draw nothing, so they have no Style tab.) The Style tab lists each element the widget draws, from the back to the front — for the chat: the container, message background, platform icon, username, badges, message text, emotes… Each widget's page in these docs lists its own.

Containers and backgrounds

The same first cards everywhere. Every widget starts with its Container, the box holding the whole widget, then its Background, the box behind its content (or behind each item of a list: each chat message, greeting, counter…). Both, and every other box a widget draws (badges, a podium step, the video frame…), have the same sections, in this order:

A box placed by its Container: the Container's Align content lines up the Background in the widget. Follow parent container, the default of the Containers and of most Backgrounds, follows the widget's position on the canvas (its Horizontal and Vertical alignment, in the Overlay builder). Pick a side to set it yourself.

Modes set some fields themselves. When a widget runs in a mode, the mode takes the fields it needs, and they leave the Style tab:

• In a bar. In a widget running as a horizontal bar (Chat Overlay, Goals & Subathon, Scoreboard), its Container card is the band: its own box, its Height under Size (Auto or Fixed, then its Fixed height; In the overlay picked in the Overlay builder, the same values as in the Layout tab), and no width or direction. Inside a bar only the band draws a background: the widget's other boxes are see-through by default.
• Full screen (End Credits, Emote and Gifs Wall): the Container covers the whole screen, so it has no Size or Spacing.
• A widget's own settings: a direction or a layout set on the Settings tab (an alert's picture side, the Scoreboard's layouts, Chat First's podium) is that box's Direction.

Pictures and icons

The same sections on every picture. Profile pictures, platform icons, badges, emotes, gifs and stickers have their own cards, in this order (a section shows only where it applies):

While the background is transparent, the shadow and the glow follow the shape of an icon or an emote; with a background, they follow its box.

What you are styling is outlined. The element picked on the Style tab shows on the preview with a thin mauve outline (a text with an added glow), on top of its own look: its shadow and glow keep showing while you change them.

No picture is chosen on the Style tab. Which image a widget shows (the viewer's profile picture or one you upload: each alert's picture, each timer's) is set on its Settings tab; the Style tab only sets how it looks.

Global styles or Custom

Every element shows all its fields, on the values it uses right now. It follows a style field by field:

• Tied to the overlay style — it follows the General styles tab, whatever you change there later.
• The widget's own (badges, emotes, stickers, inner boxes such as Chat First's podium step or the subathon's status badges, End Credits' texts…) — it follows the widget's own default look.

Change a field and that field becomes the element's own: a small reset arrow appears beside its name, and every other field keeps following. The arrow puts the followed value back.

The switch at the top, Global styles / Custom (Default styles / Custom for the widget's own elements), tells you where the element stands: it turns to Custom as soon as one field is changed, and back to Global styles once the last one is reset. Click Global styles while it reads Custom to reset every field you changed at once; a window asks you to confirm first.

A few elements tied to the overlay style keep a colour of their own and follow it for the rest: highlighted and shared chat messages, announcements and Channel Points redemptions, a poll's countdown and winning bar, the Scoreboard's score on a record, the subathon's contributor and time added.

Show. Whether a picture, an icon, badges or emotes show is a switch on the widget's Settings tab (Show profile picture, Show platform icon…), never on its style card.

Style for. Every widget that shows something per platform (Chat, Chat First, Chatter Greeting, Alerts, Goals & Subathon, Viewer Counter, Polls & Predictions, End Credits, Scoreboard, Viewer Cards) can give one platform its own look: pick it in Style for, beside the switch (All, then each platform switched on; Alerts also lists your integrations), then change the fields you want. The switch then reads Same as All / Custom: everything you don't change follows All. What is drawn once around every platform (the Container, Viewer Counter's background, Goals' timer and event history, End Credits' column and main titles…) has no Style for: it is styled for the whole widget.

Some widget settings live on the Style tab, next to what they change: the credits' scroll duration.

The Style tab only lists what the widget's settings show: switch a part off on the Settings tab (a chat message type, the clip title, Chat First's podium…) and its element leaves the list until you switch it back on. Its style is kept.

The widget page's Reset button puts every setting and style of that widget back to its default — the widget's own default look, which for End Credits already has a field of its own (its fade transition).

And then

Appearance decides how it looks. The Layout tab decides where it sits: which widget where, at what size, on which canvas.