VTUBE
Design system · v1.0

Component Library

Every recurring interface piece in Cathode, built on the six-token YouTube color system — canvas, panel, red, dark red, ink, and gray. One card per component, grouped by job.

Canvas · Panel · Red · Dark Red · Ink · Gray
01 — Actions

Buttons

ButtonPrimary
ButtonSecondary
ButtonOutline
ButtonGhost
ButtonDanger
ButtonDisabled
ButtonIcon
ButtonLoading
ButtonSplit button
ButtonButton group
ButtonFAB
ButtonToggle button
ButtonDismiss
02 — Status

Badges & Tags

Live
BadgeLive
New
BadgeNew
9+
BadgeCount
Published
ChipSuccess
Pending review
ChipWarning
Processing
ChipInfo
RS
BadgeStatus dot
Jordan Vega
BadgeVerified
Trending
Weekly roundup

Top clips from this week.

BadgeRibbon
Beta
BadgeOutline
24,509 watching
BadgeLive count
03 — Input

Form Controls

InputText
InputTextarea
InputSelect
InputSearch
InputWith icon
InputError state
InputCheckbox
Visibility
InputRadio group
Notify subscribers
InputSwitch
InputRange slider

Drag & drop or browse files

InputFile upload
InputSegmented control
InputOTP
InputDate picker
2
InputQuantity stepper
Medium strength
InputPassword strength
gaming tutorial
InputTag chips
upload pipeline redesign
upload pipe leak fix
InputAutocomplete
Rebuilding the upload pipeline
InputInline edit
InputColor picker
05 — System response

Feedback & Overlays

Transcoding usually finishes within 10 minutes.
AlertInfo
Your video is live and visible to everyone.
AlertSuccess
This upload is missing captions.
AlertWarning
Upload failed — file exceeds 256 GB limit.
AlertDanger
OverlayToast
OverlayModal
Mute (m)
OverlayTooltip
OverlayPopover
Uploading…64%
FeedbackProgress bar
FeedbackSpinner
FeedbackSkeleton
Comment deleted
OverlaySnackbar
Loading…
OverlayLoading overlay
New: jump between chapters
OverlayCoachmark
FeedbackTab notification dot
Remove this comment?
FeedbackConfirm banner
5
4
3
FeedbackRating bars
06 — Content

Data Display

Upload settings

Default visibility, category, and licensing for new uploads.

CardBasic
1.2M
Subscribers
CardStat / KPI
JV MK RS +12
AvatarGroup
Privacy settings
ListSettings row
TitleViewsStatus
Rebuilding the upload pipeline128KPublic
Why we moved off queues54KUnlisted
TableData
RS

Rae S. this saved me hours, thank you

2h ago14Reply
ListComment
  1. Aug 29
    Video published to all subscribers
  2. Aug 27
    Transcoding completed
DataTimeline
Can I schedule an upload?

Yes — pick a publish date and time in the upload flow, and it goes live automatically.

DataAccordion
DataRating
Resolution
1080p
Format
MP4 / H.264
File size
1.4 GB
DataDefinition list
JV

Jordan what encoder did you use?

MK

x264, two-pass VBR

DataNested reply
Creator Pro
$19/mo
  • 4K uploads
  • Priority transcoding
DataPricing card
"Cut our upload-to-live time in half."
ALAna Liu, Creator
DataTestimonial
SMTWTFS 2627282930311
DataCalendar
DataProgress ring
07 — Video-specific

Media Components

12:47
Rebuilding the upload pipeline
128K views · 3 days ago
MediaVideo card
18 videos
Deep Dives Playlist
Updated 2 days ago
MediaPlaylist row
JV
Jordan Vega
412K subscribers
MediaChannel card
MediaSubscribe
MediaLike / Dislike
5:0812:47
MediaScrub bar
MediaChapter strip
Autoplay
1080p HD
720p
MediaSettings menu
MediaWaveform
24,509 watching now
MediaViewer ticker
4K
MediaQuality badge
MediaReactions
MediaCaptions toggle
Rebuilding the upload pipeline
Jordan Vega
MediaMini player
08 — Odds and ends

Utility

Or
UtilityDivider
UtilityKebab menu
UtilityBack to top
No videos yet

Uploads you publish will show up here.

UtilityEmpty state
We use cookies to keep you signed in.
UtilityConsent banner
ffmpeg.sh
ffmpeg -i input.mp4 -vf scale=1920:1080 -c:v libx264 out_1080p.mp4
UtilityCode block
UtilityTheme toggle
UtilityLanguage selector
Press J / K to seek
UtilityShortcut hint
UtilityContext menu
Scan to open on mobile
UtilityQR share

Delete this video?

This can't be undone. The video and its comments will be permanently removed.