# Yupptv Design System

> A high-contrast broadcast interface where deep obsidian surfaces meet vibrant orange accents and clean Lato typography.

**Source:** https://yupptv.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Yupptv utilizes a "Dark Mode" foundational strategy for its content discovery layers, transitioning to a clean off-white `#fbfbfb` for informational and utility pages. The brand voltage is carried by a signature orange `#ff6600` used for high-priority actions and "Premium" status indicators, balanced against a secondary corporate blue `#0275d8`. Typography is anchored by **Lato**, used across all weights from 400 to 700 to provide a modern, legible sans-serif experience. Components are characterized by sharp edges or very tight 4px radii, maintaining a structured, grid-heavy broadcast feel.

## Signature DNA
1. **The Premium Orange Strike** (The use of `#ff6600` for "Premium TV" buttons and "Subscribe" badges creates a clear hierarchy of monetization across the content grid. Seen on `yupptv.com` and mobile views.)
2. **Hybrid Canvas** (The system toggles between a deep `#1e1f22` surface for the main entertainment hub and a stark `#fbfbfb` canvas for pricing and about pages, using `#333333` as the bridge text color.)
3. **Lato-Centric Hierarchy** (Total reliance on Lato for functional UI, using weight 500 for section headings and 400 for dense content metadata. Seen across all analyzed pages.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas.light}` | `#fbfbfb` | Primary page background (Utility/Info) | 125 | 0.8 | Computed Style |
| `{color.canvas.dark}` | `#1e1f22` | Primary surface background (Entertainment) | 21 | 0.8 | Computed Style |
| `{color.ink.primary}` | `#333333` | Primary text and borders | 168 | 0.8 | Computed Style |
| `{color.ink.muted}` | `#a0a3a8` | Secondary/Metadata text | 63 | 0.8 | Computed Style |
| `{color.border.light}` | `#cccccc` | Default hairline dividers | 22 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.accent.orange}` | `#ff6600` | Premium actions, badges, primary CTA | 13 | 0.8 | Computed Style |
| `{color.accent.blue}` | `#0275d8` | Links, secondary buttons, active states | 193 | 0.8 | Computed Style |
| `{color.accent.teal}` | `#4085a7` | Informational text emphasis | 12 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| **Lato** | 400, 500, 700 | Primary UI, Headings, Metadata | Lato (Google Fonts) | OFL |
| **Helvetica Neue** | 300, 400 | Display, Error states | Inter | Proprietary |
| **Arial** | 300, 400, 700 | Video player fallback | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display.xl}` | 48px | 68.5px | normal | 300 | 404 Error Display | `p.error-not-found` |
| `{text.heading.md}` | 20px | 30px | normal | 400 | Navigation items | `li.nav-item` |
| `{text.heading.sm}` | 20px | 22px | normal | 500 | Section headings | `h2.section-heading` |
| `{text.body.lg}` | 18px | 25px | normal | 400 | Error description | `p.error-run-text` |
| `{text.body.md}` | 16px | 24px | normal | 400 | Default body text | `div.wzrk-overlay` |
| `{text.body.sm}` | 14px | 21px | normal | 400 | Carousel labels | `div.carousel-tabing` |
| `{text.caption.md}` | 12px | 18px | normal | 400 | Footer links | `a` |
| `{text.caption.sm}` | 12px | 17px | normal | 400 | Premium badges | `div.premiumicon` |

### Principles
1. **Weight-based Hierarchy**: Headings are distinguished by a shift to weight 500 (Lato) rather than massive size increases.
2. **Metadata Density**: Content labels (U/A ratings, years) use 12px-14px sizes to maintain high information density in grids.
3. **Display Lightness**: Large display text (404 pages) uses weight 300 to avoid visual heaviness.

## Spacing
**Base unit:** 5px (derived from common padding patterns)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 80 |
| `{space.sm}` | 10px | 38 |
| `{space.md}` | 15px | 11 |
| `{space.lg}` | 20px | 7 |
| `{space.xl}` | 30px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Main layout containers, buttons | 427 occurrences |
| `{radius.sm}` | 2px | Form inputs | 52 occurrences |
| `{radius.md}` | 4px | Content cards, overlays | 107 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.05) 0px 2px 20px 0px` | Content cards on light canvas | Observed on 42 elements |

## Components

### Tier 1: Foundational

#### Premium Badge
**Role:** Indicates monetized content in grids.
**Pages observed:** `yupptv.com`
**Spec:** Background `{color.accent.orange}` (#ff6600) | Text `#ffffff` | Radius `{radius.none}` | Padding `1px 5px` | Type `{text.caption.sm}`
**States observed:** Default: captured | Hover: not captured

#### Primary Button (Orange)
**Role:** Main call to action for "Premium TV".
**Pages observed:** `yupptv.com`
**Spec:** Background `{color.accent.orange}` (#ff6600) | Text `#ffffff` | Radius `{radius.none}` | Padding `0px 30px` | Type `{text.body.md}`
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Content Card
**Role:** Standard thumbnail for movies and live TV.
**Pages observed:** `yupptv.com`
**Spec:** Background `transparent` | Border `1px {color.border.light}` (#cccccc) | Radius `{radius.md}` (4px) | Shadow `{shadow.card}`
**States observed:** Default: captured | Hover: captured (elevation increase)

#### Language Selector
**Role:** Utility for switching region-specific content.
**Pages observed:** `yupptv.com`, mobile
**Spec:** Background `{color.accent.orange}` (#ff6600) | Text `#ffffff` | Radius `{radius.none}` | Type `{text.body.sm}`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Navigation Bar (Dark)
**Role:** Main site header.
**Pages observed:** `yupptv.com`
**Spec:** Background `#1e1f22` | Text `{color.ink.muted}` (#a0a3a8) | Height `~60px` | Radius `{radius.none}`
**States observed:** Default: captured

#### Footer Section
**Role:** Site-wide navigation and legal.
**Pages observed:** `yupptv.com`, `yupptv.com/about`
**Spec:** Background `#1e1f22` | Text `{color.ink.muted}` (#a0a3a8) | Border-top `1px #333333`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max content width | 1200px |
| Section spacing | 40px |
| Grid gutter | 15px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; grid shifts to 2-up for content thumbnails. |
| Desktop | 1440px | Full horizontal navigation; 6-up or 7-up content grids. |

## Imagery & decoration
*   **Content Thumbnails**: High-saturation movie posters and channel logos are the primary visual drivers.
*   **Background Patterns**: 404 pages use abstract orange diagonal pill shapes as decorative background elements.
*   **Iconography**: FontAwesome is used for social links and utility icons (search, user).

## Do's
*   Use `{color.accent.orange}` (#ff6600) exclusively for monetization and primary CTAs.
*   Apply `{radius.md}` (4px) to content thumbnails to soften the grid.
*   Maintain a dark background (`#1e1f22`) for all video-centric discovery pages.
*   Use **Lato** weight 500 for all section titles to ensure clear content grouping.
*   Ensure metadata (U/A ratings) uses the `{text.caption.sm}` token for legibility.

## Don'ts
*   Do not use `{color.accent.blue}` (#0275d8) for primary "Premium" actions; this is reserved for utility links.
*   Avoid using rounded corners on the main navigation or footer; these must remain `{radius.none}`.
*   Do not use pure black `#000000` for text; use `{color.ink.primary}` (#333333) for better readability on light surfaces.

## Similar brands
*   Hotstar
*   SonyLIV
*   Zee5
*   JioCinema

## Quick start

### CSS Custom Properties
```css
:root {
  --yupp-orange: #ff6600;
  --yupp-blue: #0275d8;
  --yupp-dark-bg: #1e1f22;
  --yupp-light-bg: #fbfbfb;
  --yupp-text-main: #333333;
  --yupp-text-muted: #a0a3a8;
  --yupp-font-primary: 'Lato', sans-serif;
  --yupp-radius-card: 4px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #ff6600;
  --color-secondary: #0275d8;
  --color-surface-dark: #1e1f22;
  --color-surface-light: #fbfbfb;
  --font-lato: "Lato";
  --shadow-card: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
}
```

## Agent prompt examples
*   "Create a content thumbnail card using Lato 14px for the title, a 4px border radius, and a subtle shadow of `rgba(0,0,0,0.05) 0px 2px 20px`."
*   "Design a 'Premium' badge using a sharp-edged rectangle with background `#ff6600` and white Lato 12px bold text."
*   "Generate a dark-themed navigation bar with background `#1e1f22` and menu items in Lato 16px using color `#a0a3a8`."

## Known gaps
*   Hover states for the primary orange buttons were not explicitly captured in the computed styles.
*   The exact transition timing for the carousel animations was not measured.
*   Specific "Success" and "Error" semantic tokens (beyond the 404 page) were not present in the analyzed flow.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Home | https://yupptv.com | 1440px | 2026-06-06 |
| Pricing | https://yupptv.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://yupptv.com | 390px | 2026-06-06 |