Design System | LiveSticky

One visual language across the Reddit dashboard and the website. The chrome stays neutral and understated so the streamer's own assets - avatar, thumbnails, and platform brand colors - are what the eye lands on.

Principles

Neutral ground. Surfaces are pure dark/light grays with no color tint, so any streamer's brand sits on truly neutral ground.
One accent. Pale gold #f5d474 is the only accent. It signals "active" and highlights key numbers - nothing else competes with it.
Brand colors stay contained. Twitch / YouTube / Kick colors appear only inside small badges and logos, never in layout chrome.
Flat, not glossy. No shadows, gradients, or glows. Hierarchy comes from stepping surface lightness, not elevation effects.
Gold means active. Live → gold accents; offline → everything goes muted.

Tokens

Color

Token	Value	Use
`--bg-primary`	#0e1113	Page; the deep ground inside viewer chips
`--bg-card`	#15191c	Stream cards, Reddit row, offline card
`--bg-surface`	#1c2125	Thumbnails, watch bar, muted avatar, chips
`--bg-card-hover`	#191e21	Hover state of cards/buttons
`--text-primary`	#ffffff	Titles, names
`--text-secondary`	#a0a0a5	Supporting copy
`--text-muted`	#707075	Meta, labels, footer
`--text-faint`	#444448	Separators, the "viewers" label
`--accent-gold`	#f5d474	Fill (avatar, Reddit badge, LIVE pill) - dark content on top
`--gold-text`	#f5d474	Gold as text on a surface (viewer counts, last-live)
`--twitch-color`	#9147ff	Badge/logo only
`--youtube-color`	#ff0000	Badge/logo only
`--kick-color`	#53fc18	Badge/logo only - uses dark content on top
`--copied-color`	#53fc18 / #1a7f37	Contrast-conforming green for success/copied state notification

--accent-gold is a fill (dark text/icon sits on it); --gold-text is the readable-on-surface variant. Never put --gold-text directly on --accent-gold.

Type scale

Font: Inter, system-ui fallback. Two weights carry everything: 600 (bold) and 700 (display). Nothing below 11px.

Role	Size / weight
Display name	17 / 700
Section · cinematic card title	13 / 600
Card title · body	12 / 600
Meta · labels · footer · pill text	11 / 500–800

Radius

Token	Value	Use
`--radius-sm`	8px	Chips, status pill
thumbnail	7px	Stream thumbnails
`--radius-md`	14px	Cards, buttons
`--radius-lg`	20px	Outer cards, bento widgets
`--radius-xl`	28px	Hero containers, main dashboard
corner badge	`0 0 8px 0`	Platform badge, flush to the thumbnail's top-left corner
full	9999px	Avatar, Reddit badge, active buttons

Spacing

Rhythm: 8 · 10 · 12 · 14 · 16. Card padding 12px; header/offline padding 14–16px; gaps between cards 10px.

Components

Avatar - 44px circle. Gold fill + dark initial when live; --bg-surface + muted initial when offline. A real profile image covers the fill in both.
Status pill - live: gold text, red pulsing dot. offline: --bg-surface bg, muted text + dot.
Stream card - --bg-card, radius 10. Multistream = compact row (112×63 thumb + info). Single = cinematic (full-width 16:9 thumb on top).
Platform badge - brand-color corner badge, border-radius: 0 0 8px 0, flush to the thumbnail's top-left, logo only.
Viewer chip - --bg-primary ground, gold count + --text-faint "viewers" label.
Watch / follow button - --bg-surface (live, as a card's bottom bar) or --bg-card (offline, standalone). Brand-colored logo + label. No border.
Reddit thread row - --bg-card + --border-line, gold circular badge with the Snoo, title plus comments · upvotes meta, and a chevron.
Footer - health dot + "LiveSticky" on the left; timestamp + Refresh button on the right.

Iconography

The product UI uses Lucide - outline icons with a consistent 1.75px stroke that share the dashboard's own SVG language. Emoji are reserved for the README; the website and app render real icons.

Icons sit in --text-secondary and ease to --accent-gold with a slight lift on hover - the one moment of motion in an otherwise flat system. Platform marks (Twitch, YouTube, Kick, Reddit) keep their official brand SVGs, since Lucide has no brand logos.