Back to About
Design System

TeleLive

TeleLive Design System

Visual reference for TeleLive: color, type, buttons, glass, tabs, clip cards, and channel identity.

Color palette

Core CSS variables for the dark theme.

Brand --brand
Brand soft --brand-soft
Text --text
Muted --text-muted
Line --line
Elev 1 --bg-elev-1
Success --success
Danger --danger

Typography

TeleLive

Page title

Section heading

Body copy for short supporting text. Readability first, no decorative noise.

Meta · label · caption

Buttons

Glass & panels

Primary surfaces for account, legal, and channel pages.

Glass panel

Interactive or content block with soft blur.

Rules

  • No floating cards on hero media
  • One job per section
  • Brand must read in the first viewport

Tabs

Active underline; avoid pill clusters.

Forms

Media patterns

Clip and category cards match the homepage.

1:00 623
Sample clip card
TeleLive Just Chatting

Gaming

12 streams

Motion

  • tl-page-in — hero enter
  • tl-ch-rise — channel identity strip
  • Skeleton shimmer while pages load
  • prefers-reduced-motion: animations off