CroStream UI kit Foundations

Live catalog

Foundations, tuned to the signal.

Color, type, space, shape, depth and motion: the decisions every CroStream screen inherits. Built in OKLCH, checked for contrast in every theme, and made to hold still when you ask it to.

Viewing with

Dark

Text 100% · Full motion · Comfortable · Effects on

Themes: 2; Dark · High contrast
Surfaces: 6; sunken → 4
Type steps: 11; 11 → 64 px
Curves: 6; 2 sampled springs
Icons: 109; 24 px grid
Text contrast: 7:1; AAA in High contrast

01Color

Color

Tinted graphite in OKLCH, one signal blue and five status signals. Every role is a token, and every pairing below is measured live against the theme you're looking at.

Surfaces Six steps of graphite, darkest to most raised, and the jobs they do

--cs-surface-sunken
--cs-surface-0…4
--cs-n-l-*

--cs-surface-sunken L — Wells, inputs, tracks
--cs-surface-0 L — Page canvas
--cs-surface-1 L — Panels, sidebar
--cs-surface-2 L — Cards, controls
--cs-surface-3 L — Menus, popovers
--cs-surface-4 L — Hover on raised

Text on surfaces Every text role on every surface, with its WCAG grade

--cs-text-1…3
--cs-*-text

—/— pairs reach 4.5:1 (AA)

—:1 lowest: …

Disabled text is exempt from WCAG contrast, but is still kept legible. High contrast raises the bar to 7:1 for every role.

Contrast ratio of each text role (rows) on each surface (columns)
Text role	surface-sunken	surface-0	surface-1	surface-2	surface-3	surface-4
`text-1` Primary	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring
`text-2` Secondary	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring
`text-3` Tertiary, placeholders	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring
`text-disabled` Disabled · exempt	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring
`accent-text` Links, selected labels	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring
`ok-text` Success	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring
`warn-text` Warning	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring
`err-text` Error	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring
`info-text` Information	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring
`live-text` On air	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring	Aa Measuring

Accent The signal blue, role by role; pins match the list

--cs-accent-*
--cs-focus

Your Hydrate! trigger fired 12 times last stream. 2

All triggers24

Channel points9 1 3 5

Chat commands11 4

Save macro

6 rest

Save macro

7 hover

Save macro

8 press

Subscribers only Followers Everyone

Moment buffer72%

Trigger phrase !hydrate Focus ring: --cs-focus, outline plus halo

1 accent-fg Icons, indicators, meter fills Measuring on surface-1
2 accent-text Links and selected labels Measuring on surface-1
3 accent-soft Selected row, active filter tint · no rule
4 accent-soft-hover Hover on a soft fill tint · no rule
5 accent-line Edge of a selected item Measuring on surface-1
6 accent-solid Primary button at rest Measuring on-solid
7 accent-solid-hover Primary button, hover Measuring on-solid
8 accent-solid-press Primary button, pressed Measuring on-solid
9 accent-on-solid Text and icons on solid Measuring on solid

Status Five signals in six roles, each with its own shape so colour is never the only cue

--cs-{ok,warn,err,info,live}-*

Signal fg 3:1 on surface-1 text on surface-1 soft · line solid · on-solid

Success --cs-ok-* OBS connected soft line Connected

Warning --cs-warn-* Twitch sign-in expires in 3 days soft line Expiring

Error --cs-err-* Discord bot offline soft line Offline

Info --cs-info-* Update ready soft line Update

Live --cs-live-* You're live soft line Live

OBS connected Scenes and sources are in sync.

Twitch sign-in expires in 3 days Sign in again from Settings to keep triggers running.

Discord bot offline Last heartbeat 4 minutes ago. Retrying.

Update ready CroStream 1.4 installs on the next restart.

You're live Started 2h 14m ago · 128 viewers.

Lines Decorative lines stay quiet; control outlines must reach 3:1

--cs-line-1…3
--cs-line-control
--cs-bw-control

line-1 Dividers, hairlines Decorative · exempt

on S Measuring
on 0 Measuring
on 1 Measuring
on 2 Measuring
on 3 Measuring

line-2 Panel and card edges Decorative · exempt

on S Measuring
on 0 Measuring
on 1 Measuring
on 2 Measuring
on 3 Measuring

line-3 Strong decorative edges Decorative · exempt

on S Measuring
on 0 Measuring
on 1 Measuring
on 2 Measuring
on 3 Measuring

line-control Inputs, toggles, checkboxes Must reach 3:1

on S Measuring
on 0 Measuring
on 1 Measuring
on 2 Measuring
on 3 Measuring

line-control-hover The same, under the pointer Must reach 3:1

on S Measuring
on 0 Measuring
on 1 Measuring
on 2 Measuring
on 3 Measuring

Brand and expressive Outside the working palette

--cs-brand-*
--cs-x-*

Brand marks Identity only: never text, never fills for our own UI

Twitch --cs-brand-twitch
OBS Studio --cs-brand-obs
Discord --cs-brand-discord
Steam --cs-brand-steam

Expressive palette …

--cs-x-cyan
--cs-x-blue
--cs-x-indigo
--cs-x-amber

--cs-x-gradient

--cs-x-gradient-warm

Never miss the moment.

02Typography

Typography

Inter for everything you read, JetBrains Mono for everything you type or copy. Size, line height and tracking are tuned per step, so nothing is just scaled up.

Type scale Eleven steps. Tracking follows Inter's dynamic metrics; display steps lean on the optical-size axis.

--cs-text-*
--cs-lh-*
--cs-track-*

Display --cs-text-5xl — · —
lh — · tr —

Never miss the moment.
Display --cs-text-4xl — · —
lh — · tr —

CroStream catches it for you.
Heading --cs-text-3xl — · —
lh — · tr —

Moments, captured live
Heading --cs-text-2xl — · —
lh — · tr —

Triggers and macros
Title --cs-text-xl — · —
lh — · tr —

Channel point reward redeemed
Lede --cs-text-lg — · —
lh — · tr —

Every cheer, raid and redeem, handled while you play.
Body · site --cs-text-base — · —
lh — · tr —

Chat triggers drive OBS scenes, alerts and sounds without a single plugin.
Body · app --cs-text-md — · —
lh — · tr —

Alerts queue in order and never overlap, even during a raid.
Small --cs-text-sm — · —
lh — · tr —

Last raid 2 minutes ago · 48 viewers · 3 new followers
Caption --cs-text-xs — · —
lh — · tr —

Updated 12:04:31 · synced with Twitch
Label --cs-text-2xs — · —
lh — · tr —

Live now

Weights One variable file, 100–900. Contrast theme raises every step.

--cs-weight-*

Ag Regular —
Ag Medium —
Ag Semibold —
Ag Bold —
Ag Heading —
Ag Display —

Weight axis Drag or use the arrow keys.

Never miss the moment.

wght 560

Optical size Same size, same weight. The Display cut tightens spacing and sharpens joins; font-optical-sizing picks it automatically.

opsz 14–32

Text cut · opsz 14

Raid incoming

Display cut · opsz 32

Raid incoming

Figures Counts change in place. Tabular figures keep them still.

Proportional 1,284 1,1118,8084,19012,46770,031

Tabular 1,284 1,1118,8084,19012,46770,031

Disambiguation cv05 tails the l, cv08 serifs the I, zero slashes 0. Usernames depend on it.

--cs-font-features

Default

Il1 O0 rn m

lIlI1_l0O

cv05 cv08 zero

Il1 O0 rn m

lIlI1_l0O

Mono Identifiers, variables, anything typed or copied. Slashed zero on.

--cs-font-mono

chat !lurk → {user.name} is lurking {counter.deaths} = 10 · 0O 1lI scene "Starting Soon" 0.250s

Labels Eyebrows, kickers and table heads. Broadcast sets them in mono.

.cs-label
--cs-font-label

Live now 02 — Typography

Viewer Points Last seen

Wrapping Headings balance their lines; paragraphs avoid a lonely last word.

wrap

Moments are captured for you while you stream

Clips land in your library the second a raid, hype train or big redeem happens, ready to post.

balance · pretty

Moments are captured for you while you stream

Clips land in your library the second a raid, hype train or big redeem happens, ready to post.

Measure Running text stops at about 68 characters a line.

--cs-measure

CroStream sits next to OBS and listens to your channel. When chat types a command, a viewer redeems a reward or a raid arrives, it runs the macro you built: switch a scene, play a sound, show an alert, flash the screen. You stay in the game.

03Space & density

Space & density

A 4px grid in rem, so spacing grows with the text size setting. Two densities share it: comfortable for the site, compact for the app's working screens.

Spacing scale Every gap, pad and offset comes from here.

--cs-space-*

--cs-space-0-5 — —
--cs-space-1 — —
--cs-space-1-5 — —
--cs-space-2 — —
--cs-space-2-5 — —
--cs-space-3 — —
--cs-space-4 — —
--cs-space-5 — —
--cs-space-6 — —
--cs-space-8 — —
--cs-space-10 — —
--cs-space-12 — —
--cs-space-16 — —
--cs-space-20 — —
--cs-space-24 — —
--cs-space-32 — —

Density The same form at both densities, side by side regardless of the toolbar setting.

--cs-control-h-*
--cs-control-px-*
--cs-control-font

Comfortable · site

Reward name

field — tall

Compact · app

Reward name

field — tall

Minimum target Anything clickable is at least 24×24px, even when the drawn glyph is smaller (WCAG 2.5.8).

--cs-target-min

#speedrun glyph 12px · target —

dot 8px · target 24px each

04Shape

Shape

Seven radii and three line weights. Corners nest concentrically, and lines thicken where people with low vision need to find an edge.

Radius scale Five steps and a pill; nested corners derive from them.

--cs-radius-*

--cs-radius-xs — · — chips, tokens
--cs-radius-sm — · — small controls
--cs-radius-md — · — buttons, fields
--cs-radius-lg — · — cards, panels
--cs-radius-xl — · — dialogs
--cs-radius-2xl — · — hero tiles
--cs-radius-full pill pills, dots

Concentric corners A box inside a rounded box takes the outer radius minus the gap. Repeating the same radius pinches the gap at every corner.

--cs-radius-2xl
--cs-space-3

Same radius

inner = outer = —px

Concentric

inner = — − — = —px

Line weights High contrast doubles the control edge to 2px and the focus ring to 3px.

--cs-bw
--cs-bw-control
--cs-focus-width

Hairline dividers, panel edges --cs-bw —
Control fields, toggles, outlined buttons --cs-bw-control —
Focus ring keyboard focus --cs-focus-width —

05Elevation

Elevation

Depth comes from light, not from borders alone: every raised layer is a little lighter, catches a 1px highlight along its top edge, and casts a two-part shadow, a tight contact shadow plus a soft key light.

Levels Lighter surface + top highlight + contact and key shadows, stepping up together

--cs-elev-0…4
--cs-surface-0…4

Level 0 Page The canvas everything sits on. Flat: no shadow, no edge. --cs-elev-0
Level 1 Panel Sidebars, section panels, table frames. A contact shadow and the lit top edge. --cs-elev-1
Level 2 Card Cards and raised controls inside panels. Adds a soft key shadow. --cs-elev-2
Level 3 Popover Menus, popovers, tooltips: things that float over content. --cs-elev-3
Level 4 Modal Dialogs and drawers over a scrim. The deepest shadow there is. --cs-elev-4

Sunken well Recessed areas: logs, code, drop zones, segmented tracks

--cs-surface-sunken
--cs-edge-shade

Event log

21:04:12Raid from pixel_mage · 34 viewers
21:03:55Channel points: Hydrate!
21:02:08Trigger !lurk ran macro Lurk mode

Top-edge highlight, under a loupe 1px of light along the top edge, ×8

--cs-edge-highlight
--cs-line-1

actual size

Floating layers Popovers float at level 3; modals sit at level 4 over a scrim that dims, not hides, what's behind

--cs-elev-3
--cs-elev-4
--cs-scrim

Triggers

Level 3 · popover

High contrast: edges, not shadows Shadows are a 3% lightness cue; low vision can't see them

--cs-line-1
--cs-line-2
--cs-bw

Shadows and highlights go. Every --cs-elev-* resolves to nothing, so no layer relies on them.
Edges are drawn instead. Panels and cards get a 1px edge at 4:1 or better; popovers and modals get 2px.
Surfaces barely step. Separation comes from the edge, so the backgrounds stay deep and the text stays at 7:1 or better.

Showing Dark

Switches the whole page, same as the toolbar.

06Motion

Motion

Motion explains what just happened: where something came from, what you pressed, what changed. Entrances take their time, exits get out of the way, springs are kept for things you set moving by hand, and reduced motion keeps every bit of feedback while dropping the movement.

Easing curves Plotted from the live token values; Play runs each at its real duration

--cs-ease-*

Standard --cs-ease-standard

Enter --cs-ease-out

Exit --cs-ease-in

In-out --cs-ease-in-out

Spring --cs-ease-spring

Pop --cs-ease-pop

Durations Distance sets duration; exits run at 0.7× the entrance

--cs-dur-1…6
--cs-exit-factor

dur-1Press feedback 0ms
dur-2Hover, colour, small state 0ms
dur-3Fades, small moves 0ms
dur-4Popovers, panels, menus 0ms
dur-5Large moves, page sections 0ms
dur-6Expressive, ambient 0ms
dur-springSprings (they need the tail) 0ms
exit of dur-4dur-4 × exit-factor 0ms

Reduced motion Movement goes; feedback stays

data-cs-motion
prefers-reduced-motion

Token	Full	Reduced	Now
`travel-1`	2px	0px	…
`travel-2`	4px	0px	…
`travel-3`	8px	0px	…
`travel-4`	16px	0px	…
`press-scale`	0.97	1	…
`hover-lift`	-1px	0px	…
`ease-spring`	spring	standard	…
`ease-pop`	pop	standard	…
`dur-4`	280ms	160ms	…
`dur-5`	420ms	160ms	…
`dur-6`	720ms	160ms	…
`dur-spring`	560ms	160ms	…

Kept: fades, colour and border changes, and the short durations (dur-1 to dur-3), so a press, a hover and an arrival are all still visible. Dropped: travel, scale, springs, parallax and ambient loops.

Live demos Each runs on the tokens: switch Motion in the toolbar and watch them change

--cs-travel-*
--cs-press-scale
--cs-hover-lift

Enter / exit

Moment captured Clip saved to Moments · 0:42

in 0ms ease-out · out 0ms ease-in

Press

scale … · 0ms

Hover lift

lift … · elev 2 → 3

Spring vs standard

standard spring

Pop

Followers 128

07Focus & states

Focus & states

Every control speaks the same eight states. None of them relies on colour alone: focus adds a ring, selected adds a fill and a mark, invalid adds an icon and words, disabled changes the edge and stays readable.

The state model Forced looks, side by side. Dashes mark states a control doesn't have.

--cs-state-hover
--cs-state-press
--cs-accent-soft
--cs-err-line
--cs-text-disabled

State Primary buttonToggle buttonText fieldChoice tile

Rest Primary button Toggle button Text field Choice tile

Hover Primary button Toggle button Text field Choice tile

Pressed Primary button Toggle button Text field —Choice tile

Focus Primary button Toggle button Text field Choice tile

Selected Primary button —Toggle button Text field —Choice tile

Disabled Primary button Toggle button Text field Choice tile

Invalid Primary button —Toggle button —Text field Choice tile

Loading Primary button Toggle button Text field Choice tile

Live: Tab through it Real controls. Keyboard focus shows the ring; mouse clicks don't.

Command Reward name One word, no spaces

Focus ring An outline (it survives Windows High Contrast) plus a soft halo

--cs-focus
--cs-focus-width
--cs-focus-offset
--cs-focus-halo

outline: …
offset: …
halo: …
colour: signal blue

High contrast swaps this for a 3px yellow ring at 3px offset, a colour nothing else uses, so focus is never mistaken for "selected".

Target size Nothing you can click is smaller than 24×24 CSS px (WCAG 2.5.8)

--cs-target-min
--cs-control-h-*

16px icon,
24px target

sm 0px < 24 ✕
md 0px < 24 ✕
lg 0px < 24 ✕

Control heights in the current density and text size. Compact's small control is exactly 24px at 100%.

08Icons

Icons

A set drawn for CroStream on a 24px grid: one stroke, round caps and joins, and stroke weights tuned per size so a 16px icon reads as firmly as a 32px one.

The set 109 icons · 20px · decorative unless labelled

Icon
name
size
label

dashboard
activity
trigger
macro
event
overlay
widget
media
alert
chat
settings
live
plus
minus
x
check
search
edit
copy
trash
link
external
download
refresh
grip
more
menu
chevron-up
chevron-down
chevron-left
chevron-right
user
users
clock
play
pause
stop
mic
volume
camera
eye
eye-off
bell
keyboard
plug
info
success
warning
error
heart
star
gift
points
sparkle
folder
folder-open
folder-plus
folder-move
tag
move
panel
file
video
music
font
archive
code
upload
grid
list
undo
redo
unlock
queue
counter
webhook
flask
calendar
goal
timer
cooldown
variable
wheel
image
shield
lock
contrast
text-size
motion
arrow-up
arrow-down
arrow-left
arrow-right
login
key
send
broadcast
dice
shuffle
trophy
power
branch
fork
repeat
hourglass
film
message
palette
magnet

Optical sizes Same drawing, compensated stroke vs one stroke everywhere

Size Tuned Naive 1.5

14px
1.85 → 1.08px

16px
1.75 → 1.17px

20px
1.6 → 1.33px

24px
1.5 → 1.50px

32px
1.375 → 1.83px

Grid & keylines 2px padding · circle r 8.75 · square 16.5

Shape carries the meaning Colour reinforces; it is never the only signal

Info
Success
Warning
Error

State icons Draw-in and rotate; instant under reduced motion

09Expressive layer

Expressive layer

Gradients, light, texture and ambient motion, all optional. Every effect has a plain fallback that the Effects setting and the High contrast theme switch to, and none of them ever carries meaning on its own.

The showpiece A Moment notification composed from six effects; hover it

Moment captured

Chat spiked 6.2× in 8 seconds

00:42:17

Clip window · 0:30

Viewers: 1,284
Chat / min: 412 +6.2×
On air: Live

Gradient text

.cs-gradient-text
--cs-x-gradient

Effect

Never miss the moment.

Fallback

Never miss the moment.

Display sizes only. The darkest stop still clears 3:1, the bar for large text; the fallback is plain primary text.

Gradient border

.cs-gradient-border
--cs-gradient-border

Effect

Featured widget

Installed by 2,140 streamers

Fallback

Featured widget

Installed by 2,140 streamers

A 1px edge that catches the light. Falls back to the ordinary panel line, so the box keeps its shape.

Aurora

.cs-aurora
--cs-x-aurora-opacity

Effect

Nothing here yet Your first moment will land here

Fallback

Nothing here yet Your first moment will land here

Slow drifting light behind a hero or empty state, one full cycle every 36s. Holds still under reduced motion; gone under High contrast.

Grain

.cs-grain
--cs-x-grain-opacity

Effect

Fallback

Film grain breaks up the 8-bit banding dark gradients show on cheap panels. Invisible as texture at normal viewing distance.

Spotlight

.cs-spotlight
use:spotlight

Effect

Triggers Chat, points, follows

Macros Steps that run in order

Events What just happened

Fallback

Triggers Chat, points, follows

Macros Steps that run in order

Events What just happened

A soft light that follows the pointer across a surface. Mouse and pen only; touch has no hover to light.

Glow

.cs-glow
.cs-glow-live

Effect

Connected Live

Fallback

Connected Live

Reserved for focus, live and connected: light means something is on. Falls back to the solid colour and the label.

Live ring

.cs-live-ring

Effect

CroStreamLive · 1,284 watching

Fallback

CroStreamLive · 1,284 watching

A sweep around whoever is on air. Holds still under reduced motion, becomes a solid ring under High contrast, and always sits next to the word Live.

10Accessibility

Accessibility

WCAG 2.2 AA in every theme, AAA text under High contrast. Measured here, live, against whatever the tokens resolve to right now.

Contrast audit Every pairing the kit promises, on every surface. Switch theme and it re-measures.

--cs-text-*
--cs-*-text
--cs-line-control
--cs-focus

— pass

— fail

— tightest

Dark text ≥ 4.5 · UI ≥ 3

Contrast ratio of each foreground token on each surface. Text needs 4.5:1, UI elements need 3:1.
Foreground	sunken	0	1	2	3	4

Automated audit axe-core over the whole rendered page

axe-core will check the whole page as it is rendered now: semantics, names, roles, contrast of real text.

Your preferences What this page is honouring, and why

WCAG 2.2 criteria What the foundations take on, and how far tokens alone get us

1.4.1 A

Use of color

Every status role pairs its colour with a shape, icon or word. Links are underlined on hover and always under High contrast.
Per component
1.4.3 AA

Contrast (minimum)

All text tokens reach 4.5:1 on every surface, in every theme. Audited live above and in npm run check:themes.
Built in
1.4.4 AA

Resize text

Type, space, radii and controls are in rem, so the 100–200% text-size setting (and browser zoom) scales everything together.
Built in
1.4.6 AAA

Contrast (enhanced)

The High contrast theme lifts every text pairing to 7:1 or better.
Built in
1.4.10 AA

Reflow

Layouts are built on container queries and previewed at 360px; nothing should need sideways scrolling except data tables, which WCAG exempts.
Per component
1.4.11 AA

Non-text contrast

line-control, focus and every -fg indicator reach 3:1 on all surfaces. Decorative hairlines (line-1…3) are exempt and kept out of that job.
Built in
1.4.12 AA

Text spacing

Line height and tracking are tokens, never fixed heights on text boxes, so user spacing overrides do not clip.
Partly
2.3.1 A

Three flashes

Nothing in the kit flashes. The live ring sweeps; it never blinks. App features that flash (screen flash, alerts) need their own guard.
Built in
2.3.3 AAA

Animation from interactions

Reduced motion zeroes travel, scale and springs and stops ambient loops, but keeps short fades. Honoured in CSS before any script runs.
Built in
2.4.7 AA

Focus visible

One :focus-visible outline everywhere. An outline, not a shadow, so it survives Windows High Contrast.
Built in
2.4.11 AA

Focus not obscured (minimum)

Sections reserve scroll margin for the sticky header; components with sticky bars must do the same.
Per component
2.4.13 AAA

Focus appearance

2px ring with 2px offset at 3:1 or better; High contrast uses a 3px yellow ring that no other state shares.
Built in
2.5.8 AA

Target size (minimum)

--cs-target-min is 24px and compact density still clears it.
Per component