# TIVI Network — Brand & Design System **Version 1.0** · Last updated 2026-05-26 · Owner: Mann Robinson Studios LLC This document is the single source of truth for TIVI Network's visual and interaction language. When designers or developers across web, iOS, Android, Roku, Fire TV, Apple TV, Samsung, or LG build new surfaces, they reference this. --- ## 1. Brand foundation **The Network's positioning:** TIVI is the premium streaming home for Black, urban, and diaspora storytelling. We compete head-to-head with Tubi (one of our published collections is literally called "Not On Tubi") and aspire to Netflix/Apple TV+/HBO Max-level production craft. **The voice:** Prestige without code-switching. The block speaks for itself. Made BY, not made FOR. **The four cultural assets that are uniquely ours:** 1. **TIVI 24** — a 24/7 always-on linear channel (no other premium streamer has this) 2. **Behind the Block** — first-class production-diary companion content for every TIVI Original 3. **Mood-tag browsing** — "Cried in my car" instead of "Drama" 4. **The Block** — a positioning that lets us own "the corner store, the stoop, the cookout" as native subject matter --- ## 2. Color tokens (the law) These exact hex values are the same on every platform. Do not substitute. ``` SURFACES ───────────────────────────────────────────── --bg #000000 Pure black canvas --surface #0A0A0A Card backgrounds --surface-2 #141414 Nested surfaces --surface-3 #1C1C1C Inputs, hover states --text #FFFFFF Primary text --text-muted #B8B8B8 Secondary text --text-dim #6E6E6E Tertiary / hint text BRUSHED GOLD (TIVI brand) ───────────────────────────────────────────── --gold-hi #D4B27A Polished highlight --gold #A88547 Mid brass (default) --gold-mid #876A38 Warm shadow --gold-deep #4F3B1E Antique depth --gold-shadow #2A1F0F Near-black bronze METALLIC GRADIENT ───────────────────────────────────────────── linear-gradient(180deg, #D4B27A 0%, #A88547 32%, #876A38 58%, #4F3B1E 100% ) RAINBOW STRIPE (TIVI signature) ───────────────────────────────────────────── linear-gradient(90deg, #2E5DAF 0%, blue #2E8B57 22%, green #F4D03F 48%, yellow #E67E22 72%, orange #C0392B 100% red ) STATUS ───────────────────────────────────────────── --status-green #4ADE80 Live / Completed / Active --status-yellow #F4D03F Encoding / In-progress --status-red #FF5252 Failed / Live broadcast --status-blue #5DA9FF Info / Scheduled ``` **Critical do-not:** Gold is NEVER flat. Gold is always either: - A vertical metallic gradient (`--gold-metal`) - A brushed grain SVG overlay on top - Or paired with inner highlight + inner shadow for "pressed metal" feel Flat yellow looks like an Amazon Prime sticker. Brushed gold looks like a luxury watch. --- ## 3. Typography **Web body & UI:** Inter (400, 500, 600, 700, 800, 900) **Editorial / serif moments:** Playfair Display (italic 400, 700, 800, 900) **Title treatments — show-specific:** - Anton (heavy condensed sans, urban/industrial — "After the Block") - Caveat (script, diner/handwritten — "Saturdays at Sylvia's") - Cinzel (classical Roman serif, regal — "Crown Heights") - Oswald (medium condensed sans, supporting) **Custom title treatments per show** are a critical brand move — what makes Netflix's *Stranger Things* and Apple's *Severance* look like brands instead of database entries. Every TIVI Original needs its own custom logotype (commissioned per show). Falls back to typographic treatment when artwork isn't ready. --- ## 4. The rainbow stripe — TIVI's signature Lifted from the bar under the logo. Used as a visual signature across every surface: - Under every section title (60–80px width, 3px height) - Under TIVI Original poster cards (full-width bottom edge) - Under the brushed-gold T badge (mini, 4px wide) - Sweeping across the gold logo in Cinema Mode pre-roll - Under focused elements on TV (D-pad focus indicator) - As the loading bar animation - Below the footer logo lockup **This is what makes TIVI instantly recognizable from across the room.** Without it, gold-on-black reads "any luxury brand." With it, it reads "TIVI." --- ## 5. The T badge — TIVI's seal Equivalent to Netflix's red N, Apple TV+'s wordmark, or Disney+'s D+. A small brushed-gold tile with a bold "T" + rainbow stripe underline. Marks every TIVI Original across every surface. - Web: 26×26px, top-left of poster card - TV: 22×22px scaled, top-left - Mobile: 20×20px, top-left - App icon variant: 1024×1024 with the rainbow stripe at the bottom --- ## 6. Cinema Mode — TIVI's pre-roll moment Every time content begins playing (or every time the app launches on TV), this animation plays: 1. **Hard cut to pure black** (~400ms) 2. **Brushed-gold TIVI logo fades in** centered (~500ms) 3. **Rainbow stripe sweeps left-to-right** under the logo (~600ms) 4. **Caption fades in below**: "A TIVI NETWORK PRESENTATION" in spaced gold caps 5. **Holds for ~600ms** 6. **Fades to player / app home** (~400ms) Total: ~1.5 seconds. This is TIVI's audio-visual identity — equivalent of Netflix's "ta-dum" but visual. Plays on web ▶ Play clicks. Plays as splash on every TV / mobile app launch. --- ## 7. Component vocabulary ### Cards | Type | Aspect | Hover/Focus behavior | |---|---|---| | Landscape card | 16:9, 280–640px wide | Scale 1.04–1.18 + gold edge glow + rainbow underline + Netflix-style info-card expansion below | | Tall poster (Originals) | 2:3, 180–240px wide | Same scale/glow, no info-card expansion | | Top 10 numbered | 2:3 poster + bleeding gold numeral | Stroke brightens, slight lift | | Feature 3-up (Apple TV+ style) | 4:5, full-width 3-column | Subtle border lift | ### Buttons - **Primary** — brushed-gold metallic gradient + brush grain overlay + inner highlight/shadow + dark espresso text (#1A0F03). Sheen sweep animation every 4.5s. - **Ghost** — semi-transparent white with backdrop-filter blur, white text - **Icon-only** — 38px circle, gold tint on hover ### Toggle switches - Off: dark track + white knob - On: brushed-gold metallic track + white knob shifted right - Animation: 150ms ease ### Status pills | State | Color | |---|---| | Live / Active / Completed | Green | | Encoding / In-progress | Yellow (pulsing) | | Failed / Past Due | Red | | Scheduled / Premieres | Blue | | Draft / Inactive | Gray | --- ## 8. Cross-platform interaction rules Same visual response. Different input model. | Surface | Trigger | Visual response | |---|---|---| | Web | mouse hover | Card scales 1.04–1.18 + gold edge + info panel slides in | | Touch (mobile) | tap & hold | Same scale + edge glow, no info panel (use tap-to-detail) | | TV (D-pad focus) | arrow key navigation | Card scales 1.08 + brushed-gold outline + **rainbow stripe underline** | **The rainbow stripe under focused TV elements is the visual signature that says "this is the TIVI app, not some other Roku channel."** Every focused element gets it. --- ## 9. Audience surfaces (what we ship) ### Web · `tivi.film` - Browser-rendered. Top nav. Mouse hover. Auto-rotating hero carousel with ken-burns. - Hosting target: Netlify. Domain: tivi.film. ### Connected TV — `Roku · Fire TV · Apple TV · Samsung Tizen · LG webOS` (and eventually Vizio SmartCast) - 10-foot UX. Left-rail nav (expands on focus). D-pad navigation. Reduced animation density. - Lower-end devices (Roku Express, Fire Stick Lite) strip ken-burns and grain noise. - Tizen + webOS apps **can reuse the web CSS directly** with viewport scaling. - Roku (BrightScript) and Fire TV (Android) need parallel implementations of the same design tokens. ### Mobile — `iOS · Android` (phone + tablet) - Single-column layout. Portrait hero (2:3) instead of landscape. Bottom 5-tab nav (Home · Search · Live · My List · Me). - Subscriptions via Apple IAP / Google Play Billing (unified through RevenueCat). ### Admin / CMS — `admin.tivi.film` - Internal-facing. Stripe-style dense data UI. 44 pages. - Where Mann uploads content, manages subscribers, configures pricing, schedules TIVI 24, reviews analytics. --- ## 10. Tech stack (confirmed) | Layer | Choice | |---|---| | Admin frontend | Next.js → Netlify (`admin.tivi.film`) | | Public web | Next.js → Netlify (`tivi.film`) | | Backend API | Node + AWS Lambda + API Gateway (`api.tivi.film`) | | Database | AWS RDS Postgres | | Video storage | AWS S3 (Mann's bucket) — optionally Wasabi for cold master storage | | Encoding | AWS MediaConvert | | Delivery | AWS CloudFront | | Auth | AWS Cognito | | Payments | Stripe (web) + RevenueCat (unified cross-platform billing) | | TV apps | Native per platform — BrightScript (Roku), Java/Kotlin or React Native (Fire TV), Swift/SwiftUI (Apple TV), HTML/CSS/JS (Samsung Tizen + LG webOS) | | Mobile apps | Native iOS (Swift) + Android (Kotlin), or React Native | --- ## 11. Cross-cutting principles 1. **Never use flat yellow for gold.** Always brushed metallic. 2. **The rainbow stripe is the signature.** Use it sparingly but consistently. Under titles, under originals, under focus, in Cinema Mode. 3. **The T badge marks originals only.** Licensed content never gets it. 4. **Mood is the discovery layer.** Genre is the taxonomy. Don't make users browse genre — let them browse feeling. 5. **TIVI 24 is the "always on" promise.** Never hide it. Top-level nav on every surface. 6. **Behind the Block is the premium tier of access.** Behind-the-scenes content tied to every Original. 7. **Cinema Mode plays before every play.** Not as an option — as the identity. Same animation on web, TV, mobile. --- ## 12. Where to find each prototype piece ``` ~/Desktop/DESIGNS/tivi-prototype/ PUBLIC SITE (16 pages) ├── index.html Home (hero carousel + 20 dynamic rows) ├── browse.html Catalog grid ├── title.html Show detail (with Behind the Block tab) ├── movie.html Movie detail ├── behind.html Behind the Block production-diary page ├── live.html TIVI 24 live channel ├── search.html Mood-first search ├── account.html Profile / billing / devices ├── pricing.html 3-plan pricing landing ├── signup.html Sign-up flow ├── onboarding.html Genre + mood + profile picker ├── collection.html Editorial collection landing ├── about.html About TIVI Network ├── help.html Help / FAQ ├── 404.html Not-found page └── watch.html Player (with Pause-to-Discuss + Chapters) ADMIN (44 pages) └── admin/ ├── index.html Dashboard ├── _verify.html 70-item functionality verification harness ├── master-*.html (5) Plans, Coupons, Partners, Rental Tiers, Feeds ├── shows.html, movies.html, show-edit, movie-edit, upload-episode ├── genres.html, genre-edit.html, collections, mood-tags ├── banners, playlists, new-arrivals, bookends, shorts, podcasts, news, blog, languages, transcoder ├── live-fast (schedule grid), live-events, live-filler ├── users.html, users-free, users-reset ├── analytics-viewership/-subs/-avod ├── tvod-ppv, tvod-usage, avod ├── affiliate, affiliate-report └── marketing-push APP MOCKUPS (4 pages) └── apps/ ├── index.html Gallery overview of all platforms ├── tv-home.html Connected-TV home (D-pad focus model) ├── tv-detail.html Connected-TV title detail └── mobile-home.html iOS/Android home DOCS ├── BRAND.md This document (design system) ├── ../tivi-build/SPEC.md Master tech spec (database schema, API surface) └── ../tivi-build/README.md Production build overview ``` --- **Open question for the build phase:** Once the design is fully reviewed and approved, the next milestones are (a) AWS configuration + Netlify project setup, (b) database schema migration to RDS, and (c) admin shell deployed at staging URL for Mann's first real login. Estimated 5 weeks from kickoff to "web live on the new stack." Until that kickoff, this prototype is the design contract.