Skip to content
CroStreamUI kit

Display & feedback

Status at a glance: badges, chips, live pills, progress, callouts, empty states and cards.

01Badge

Badge

Quiet labels for status and counts. Status tones can carry their glyph, so a badge never relies on colour alone.

Tones × variants Soft is the default; solid for the one thing that must stand out; outline for dense tables.
soft
Draft New Connected Expiring Offline Beta On air
solid
Draft New Connected Expiring Offline Beta On air
outline
Draft New Connected Expiring Offline Beta On air
Counts Tabular figures, capped at max; the label says what's counted.
Mentions Queue Alerts
Dots and sizes A bare dot marks 'something new' on a nav item; it still needs a label.
Activity Moments Beta Beta

02Chip

Chip

Filters, tags and recipients. Selectable chips are toggle buttons; removable chips have their own labelled × button and listen for Backspace.

Filter chips Selecting draws a check in, not just a colour change.
Removable tags Each × is announced as 'Remove !hydrate'.
!hydrate !lurk !discord !so
Tones and sizes
Draft New Connected Expiring Offline Beta On air
Draft New Connected Expiring Offline Beta On air

03Kbd

Kbd

Keycaps for hotkeys. A combo is a kbd of kbds, symbol keys say their name, and the + between caps is silent.

Keys and combos
Start a Moment clip
Ctrl Shift M
Mute alerts
Ctrl Alt A
Search triggers
/
Close panel
Esc
Run macro
Ctrl Enter
Mac symbols and small size mac renders ⌘ ⌥ ⇧ ⌃; screen readers hear Command, Option, Shift.
Start a Moment clip
Command Shift M
Mute alerts
Command Option A
Move step
Alt Up arrow Alt Down arrow

Inline in text: press Ctrl K to open the command palette.

04Avatar

Avatar

People, channels and apps. Initials show until the picture loads; fallback tiles vary by light, not hue, so none looks like a status.

Sizes and shapes
Rings and status A ring for on-air; a corner mark for presence, named in the avatar's label.
Online
Away
Offline
Groups Cut out of each other by a ring in the page colour; read as one list of names.

05StatusDot

StatusDot

A small mark with a shape per tone: circle, triangle, square, diamond, ring. Live pulses, and holds still when motion is reduced.

Every tone, labelled
  • OBS connected
  • Twitch sign-in expires in 3 days
  • Discord bot offline
  • Update ready
  • Live · 2h 14m
  • Pinned macro
  • Steam not running
Dots alone Hidden labels are still read; the shape carries meaning without colour.
Draft New Connected Expiring Offline Beta On air
Draft New Connected Expiring Offline Beta On air

06LivePill

LivePill

The on-air marker. The word always says it; the beat and the sweeping ring are decoration that degrades.

Live, offline and counts Large counts compact (12.4K) on screen; the full number is read aloud.
Live Live , 1,284 viewers Live , 12,437 viewers Live , 86 viewers Offline Starting soon

07Progress

Progress

Known and unknown waits. The fill eases between values; the indeterminate sweep breathes in place when motion is reduced.

Determinate
Uploading highlight to YouTube
Rendering clips
Backup complete
Colour and marks color takes any CSS colour (a goal's own bar colour) and overrides tone. marks draw ticks on the track, passed ones dark on the fill; labels sit beneath, and the markLabel snippet replaces their text. Mark labels and which are reached go into aria-valuetext (the ticks are aria-hidden), and a max of 0 or less reads as 0% instead of NaN.
Subscriber goal
Goal with no target yet
Indeterminate When there's no way to know how long.
Connecting to OBS…

08Meter

Meter

A gauge for a known range. Thresholds pick the tone the way HTML meter does, and the value is always in words too.

Thresholds low / high split the range; the part with optimum is good.
CPU (encoder)
Upload bitrate
Dropped frames
Neutral and segmented No thresholds: an accent bar. Segments read like a level meter.
Channel points goal
Mic level

09Skeleton

Skeleton

Placeholders shaped like what's coming, sized to the exact line height of the copy they stand in for. Every skeleton shares one sweep of light.

A chat feed loading The region sets aria-busy; skeletons themselves are hidden from screen readers.

10Callout

Callout

Inline messages. Each tone has its own glyph shape and a 3px leading edge, so a narrow callout still reads at a glance.

OBS connected

Scenes and sources are in sync. Scene switches from triggers will run instantly.

Twitch sign-in expires in 3 days

Sign in again from Settings to keep channel point triggers working.

Discord bot offline

Last heartbeat 4 minutes ago. Retrying every 30 seconds. See diagnostics

Update ready

CroStream 1.4 installs on the next restart.

You're live

Started 2h 14m ago with 1,284 viewers.
Tip: hold Shift while dragging a step to copy it.

11EmptyState

EmptyState

What a view shows before there's anything in it: what will appear here, how to get it, and the button that does.

With aurora A slow light behind; gone under High contrast or Effects off.

No Moments yet

CroStream catches the best bits of your stream automatically. Go live and they'll land here.
Plain, small

No triggers match '!hydr'

Check the spelling or create a trigger for it.

12Card

Card

Surfaces that group content. Interactive cards lift a pixel on hover, sink on press and take the focus ring; selected ones get an accent edge and a check.

Hydrate reminder

Macro · 3 steps

Plays a water-drop sound, shows the hydrate overlay for 8 seconds, then posts a chat reminder.

Ran 12 times today

Moments

6 clips from tonight

The best bits of your stream, caught automatically. Review and post them as Shorts.

Latest 2 minutes ago

Stream health

Updated live
Viewers
1,284
Bitrate
5,600 kbps
Dropped
0.4%

Sunken cards hold logs, code and drop zones: things inside the surface rather than on it.

Selectable cards Buttons with aria-pressed; titles are spans so the button stays valid.

13Divider

Divider

Hairlines between groups, optionally labelled. Labels are part of the separator's accessible name.

Horizontal

Today

Labelled and strong

Dashed, for optional sections

Vertical Between toolbar groups.
Live

14Counter

Counter

Numbers that roll: each digit on its own spring, so 1,284 → 1,291 moves two columns. Tabular figures; instant under reduced motion.

Live numbers Locale formatting via Intl; announce only numbers the user is waiting on.
Viewers 1,284 viewers
Channel points 18,200 points
Chat activity 42%
Followers (compact) 9.9K

15Timeline

Timeline

Events on a rail: what happened, when, and what it means. Grouped by day under sticky headings, with a Now marker and long days folded behind Show more. Each group is an ordered list.

Tonight's stream Markers carry the tone as a tile and an icon; the in-progress render pulses (and holds still under reduced motion), and Now sits where the clock is.
  1. Live: Stream started Just Chatting
    Went live with 212 viewers waiting.
  2. Raid from pixel_mage 34 viewers
    The raid alert played and the shout-out macro ran.
  3. Moment clipped Chat spiked 6.2×
    30 seconds saved to moments/0042-raid.mp4.
  4. Follower goal reached 50 / 50
    The goal bar celebrated and reset to 75.
  5. Stream ended 2 h 58 min
  6. Rendering the raid Short (in progress) 9:16
    About a minute left.
  7. Now · 10:05 PM
Trigger history Compact, newest first, grouped by day; avatars for who fired it. Today folds after four; the button moves focus to the first event it reveals.

Today, 6 events

  1. Hydrate! moss · channel points
  2. !lurk violet_skies
  3. Error: Cat cam NovaKnits · channel points
    OBS scene "Cat cam" was missing; the macro stopped at step 2.
  4. !socials pixel_mage

Yesterday, 2 events

  1. Hydrate! violet_skies · channel points
  2. !lurk kestrel
Composed by hand TimelineItem children for richer bodies; numbered markers for steps.
  1. Build signed
    Windows macOS
  2. Uploaded to downloads.crostream.io
  3. Warning: Release notes

    Waiting for a review.

Custom heading A heading snippet replaces the title text, for a router link or a name in bold; without it the title renders as before.
  1. Live: Stream started Just Chatting
    Went live with 212 viewers waiting.
  2. Raid from pixel_mage 34 viewers
    The raid alert played and the shout-out macro ran.