VideoNest Design System
A comprehensive design system with System UI fonts, Feather icons, and condensed components.
Colors
Brand
Orange Scale
Neutrals
Semantic
Typography
Headlines
System UI (800)
Body
Inter (500)
Display / 36-48px / Extra Bold
Your videos deserve a home
H1 / 28-36px
Build your channel today
H2 / 22-26px
Featured Channels
H3 / 18-20px
Getting Started Guide
H4 / 16px
Recent Videos
Body / 15px
VideoNest is a platform for video creators to build their channels, grow their audience, and monetize their content.
Small / 13px
2.4K views / 3 days ago / 12 comments
Form Inputs
Text Inputs
This field is required
Select & Textarea
Checkboxes
Radio & Toggle
Cards
Business
3-Minute Breakdowns
Short breakdowns on the market's leading stocks.
Podcast
25 Months
Understanding the creator economy.
Lifestyle
10-Minutes Amazing Life
Quick tips for living your best life.
Video Card Layouts
Horizontal Scroll (Carousel)
How to Grow Your Channel
Better Thumbnails in 5 Minutes
Video SEO Guide
Monetization Strategies
Grid Layout
Channel Growth Tips
Thumbnail Design
SEO Deep Dive
List View (Compact)
How to Build a Channel That Grows
The Complete Guide to Video SEO
Better Thumbnails in 5 Minutes
Monetization Strategies That Work
Notifications
Upload complete
Upload failed
Trial ending
Lists
Basic List
-
Video Player
Customizable embeddable player
-
Video Hosting
Unlimited cloud storage
-
Distribution
Multi-platform publishing
Interactive List
-
General Settings
-
Notifications
-
Security
UI Icons
Feather Icons - Click to copy icon name
Product Icons
VideoNest features - Click to copy icon name
Feature Icons (with background)
Video Player
Customizable player
Video Hosting
Unlimited storage
Security
Content protection
Monetization
Multiple revenue streams
Logo Variants
Click any logo to copy its file path
Black on Light
videonest full black.png
White on Dark
videonest full white.png
White on Orange
videonest full white.pngIcon Variants (Square/Circle)
Click to copy SVG code
Integrations
Partner platforms and distribution channels
Platform Partners
Roku
Fire TV
Spotify
Apple Podcasts
Google Podcasts
iHeartRadio
Website Builders & CMS
WordPress
Shopify
Webflow
Squarespace
Wix
Framer
Ghost
Drupal
Storage & Automation
Amazon S3
Google Drive
Zapier
Greenfly
Icon Display Styles
VideoNest + Partner Pairing
Integration Pairing (VideoNest + Partner)
Sync Status Cards
Roku
Connected
Videos Synced
247
Last Sync
2 min ago
Spotify
Syncing...
Episodes
89
Progress
78%
Analytics Display Patterns
Total Views
1.2M
+12.5%
45.8K
23.4K
Likes
Number Formatting
Human-readable number displays for better scannability. Use abbreviated formats for large numbers in cards and lists; full numbers in detailed views.
2.4K
views
+14%
847
subscribers
+23
186h
watch time
-8%
$1.2K
revenue
+32%
Formatting Rules
Under 1,000
Show exact number: 847
1K - 999K
Abbreviate: 2.4K, 156K
1M+
Abbreviate: 1.2M, 5.8M
Time Duration
Human units: 2:34, 186h
Upload States
Video upload flow and status indicators
Upload Dropzone
Default
Drag and drop video files
or click to browse
Drag Hover
Drop to upload
Upload Progress
128 MB
Uploading... 65%
intro-video.mp4
Processing...
Generating thumbnails and transcoding...
tutorial-part1.mp4
Upload complete
broken-file.avi
Unsupported format
Empty States
No videos yet
Upload your first video to get started
No results found
Try adjusting your search or filters
Accessibility
WCAG 2.1 AA compliant patterns
Focus States
All interactive elements must have visible focus indicators for keyboard navigation.
outline: 3px solid rgba(255, 107, 53, 0.5); outline-offset: 2px;
Color Contrast
Touch Targets
Minimum 44x44px touch targets for mobile accessibility.
Semantic Labels
| Element | Attribute | Example |
|---|---|---|
| Icon buttons | aria-label |
<button aria-label="Close"> |
| Form inputs | <label> |
<label for="email"> |
| Loading states | aria-busy |
<div aria-busy="true"> |
| Modals | role="dialog" |
<div role="dialog" aria-modal="true"> |
Responsive Patterns
Cross-platform layouts for all screen sizes
Breakpoints
| Name | Min Width | Devices |
|---|---|---|
| xs | 0px | Small phones |
| sm | 480px | Large phones |
| md | 768px | Tablets |
| lg | 1024px | Laptops |
| xl | 1280px | Desktops |
Grid Behavior
Mobile
1 column
Tablet
2 columns
Desktop
3-4 columns
TV/Large
5-6 columns
Mobile Adaptations
Navigation
- Desktop: Fixed sidebar
- Mobile: Hamburger menu
- Bottom nav for primary actions
Typography
- Scale down headings 20%
- Increase line height
- Min font size: 14px
Buttons
- Full-width on mobile
- Reduced padding
- Stack vertically
Cards
- Full-width cards
- Horizontal scroll for carousels
- Condensed video lists
Safe Areas (iOS)
Use env(safe-area-inset-*) for notched devices:
padding-bottom: calc(16px + env(safe-area-inset-bottom));
SEO Card Designer
Create and export Open Graph and Social cards for your website
Your videos deserve a home
videonest.co
Open Graph Card (1200x630)
Build your channel. Grow your audience.
Twitter Card (1200x600)
NEW FEATURE
Advanced Analytics Dashboard
Track views, engagement, and revenue in real-time.
Feature Highlight Card (1200x630)
Export Requirements