Panda Video

Overview

Panda Video is a premium, enterprise-grade video hosting and streaming platform designed for Brazilian creators, infoproduct makers, universities, and VSL producers. The design system embodies a "Technical Elegance" aesthetic—combining deep navy-to-black surfaces (#000214) with vibrant electric blue accents (#1530ea) to convey both security and cutting-edge AI capability. The interface prioritizes clarity and trust: users interact with intelligent, glass-like cards (rgba(0, 0, 0, 0.4) with 1px rgba(255, 255, 255, 0.1) borders) that float above a dark, immersive canvas, creating a sense of control and precision. The emotional response is one of professional confidence: this is a platform for serious creators who demand both protection and performance.

The brand voice is direct, technical, and Portuguese-first. Panda Video speaks in active, benefit-driven language: "Comande sua hospedagem de vídeo por texto" (Command your video hosting by text), "Proteja seus vídeos contra a pirataria digital" (Protect your videos against digital piracy). The vocabulary emphasizes AI integration, DRM security, and scalability—never generic or flowery. Tone is authoritative but approachable; the brand assumes the user is a professional who values efficiency. Example sentence in brand voice: "Sua IA integrada executa tarefas enquanto você dorme—dubagem, análise, conversão—tudo em um só lugar."

Colors

The color system is built on a dark-first philosophy with a single, dominant accent. **Primary (#1530ea)** is the electric blue used exclusively on call-to-action buttons ("Teste grátis", "Iniciar teste grátis"), interactive states, and focus rings. It is the only color that demands user action. **On-Primary (#ffffff)** ensures maximum contrast (WCAG AAA) on all primary buttons. **Primary-Container (#405de5)** and **Primary-Fixed-Dim (#1530ea)** provide hover and active states, creating a subtle depth shift without breaking the accent hierarchy.

**Surface (#000214)** is the foundational near-black, used for the page background and body. **Surface-Container (#0f0f10)** and **Surface-Container-High (#1d1e200a)** layer to create visual separation in cards and modals. **On-Surface (#ffffff)**

Typography

The type system uses Plus Jakarta Sans as the primary typeface—a geometric, modern sans-serif that conveys technical sophistication without coldness. **Display (56px, 600 weight, -0.02em letter-spacing)** is reserved for hero headlines like "Panda Pilot: comande sua hospedagem de vídeo por texto"; its tight tracking and bold weight command attention. **Headline-lg (40px, 600 weight)** and **Headline-md (28px, 600 weight)** structure section breaks and feature titles. **Body-lg (18px, 400 weight, 28px line-height)** and **Body-md (16px, 400 weight, 24px line-height)** provide comfortable reading for descriptions and long-form content. **Label-md (14px, 600 weight, 0.01em letter-spacing)** is used for button text, form labels, and UI microcopy—the 600 weight ensures legibility at small sizes

Layout

The layout uses a 12-column fluid grid with a max-width of 1440px, allowing content to breathe on ultra-wide displays while maintaining focus on medium screens. The gutter is 24px (md spacing), applied consistently between columns and sections. **Section separation** uses lg spacing (40px) vertically to create clear rhythm—hero, feature sections, testimonials, and footer each occupy distinct visual zones. **Container padding** is 24px on desktop, reducing to 16px on tablet and 12px on mobile, maintaining the gutter proportion. The hero section spans full-width with a dark gradient overlay (rgba(0, 5, 25, 0.9)) to anchor the brand color and ensure text legibility over imagery. Cards and modals use 24px internal padding (md spacing) with 12px gaps between child elements (sm spacing). Whitesp

Elevation & Depth

Depth is conveyed through layered opacity and subtle shadows, never through harsh darkness or extreme blur. **Level 1 (Base)**: The background is a solid #000214 with optional subtle grain texture (opacity < 2%) to prevent flatness. **Level 2 (Standard Card)**: Cards use rgba(0, 0, 0, 0.4) background with a 1px border at rgba(255, 255, 255, 0.1), creating a frosted-glass effect. Shadow: 0 3px 8px rgba(0, 0, 0, 0.15). **Level 3 (Elevated/Modal)**: Modals and popovers use rgba(0, 0, 0, 0.5) background with the same border treatment. Shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05)

Shapes

The shape philosophy is **Precision-Technical**: rounded corners are minimal and purposeful, never organic or overly soft. **Buttons and CTAs** use 8px border-radius (lg), providing just enough softness to feel modern while maintaining a structured, professional appearance. **Cards and containers** use 16px border-radius (xl), creating a subtle frame that distinguishes content zones without appearing playful. **Input fields** use 4px or 6px border-radius (DEFAULT or md), keeping form elements tight and scannable. **Badges and chips** use 9999px border-radius (full) to create pill shapes—these

Components

Action Elements **Button-Primary** (48px height, 12px vertical / 24px horizontal padding, 8px radius, {colors.primary} background, {colors.on-primary} text, {typography.label-md}) is the primary CTA. All instances use the full Material 3 shadow stack: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05) 0px 1px 0px 0px, rgba(255, 255, 255, 0.15) 0px 0px 0px 1px. **Button-Primary-Hover** shifts background to {colors.primary-container} (#405de5) with a 120ms ease-out transition, creating a subtle depth shift. **Button-Primary-Active** uses {colors.primary-fixed-dim} with a 40ms instant response, signaling immediate feedback. **Button-Secondary** (same dimensions, transparent background, 1px border at rgba(255, 255, 255, 0.15), {colors.primary} text) is used for secondary actions like

Do's and Don'ts

**Do**

• Do use {colors.primary} (#1530ea) exclusively on primary CTAs and focus states—never on body text, backgrounds, or decorative elements.
• Do apply the full Material 3 shadow stack (three-part shadow with inner glow and edge definition) to all elevated cards and modals for visual consistency.
• Do maintain 24px (md spacing) as the standard gutter and internal padding; use 40px (lg spacing) for section separation to create clear rhythm.
• Do use Plus Jakarta Sans at 600 weight for all headlines and labels; apply negative letter-spacing (-0.02em to -0.01em) to tighten the premium feel.
• Do apply a 120ms ease-out transition to all hover states (button background, card opacity, input focus) to signal interactivity without jarring.
• Do use {colors.on-surface-variant} (#c8cfff) for secondary text, hints, and disabled states—it is the system's most-used supporting color and ensures visual hierarchy.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to small labels (label-sm) over busy backgrounds to ensure legibility.
• Do use 1px borders at rgba(255, 255, 255, 0.1) on all cards and containers to define edges without harshness.

**Don't**

• Don't use near-black or near-white as primary or secondary colors; the system is built on {colors.primary} (#1530ea) as the sole accent.
• Don't apply shadows with blur > 8px or spread > 2px; the aesthetic is precision-focused, not diffuse or atmospheric.
• Don't use {colors.on-surface} (#ffffff) for secondary text; use {colors.on-surface-variant} (#c8cfff) to maintain visual hierarchy.
• Don't apply border-radius > 16px on buttons or input fields; keep interactive elements structured and scannable.
• Don't use transitions longer than 200ms on hover states; the brand is fast and responsive, not sluggish.
• Don't hardcode hex colors inside component blocks; always reference {colors.x} tokens to ensure consistency and maintainability.
• Don't apply opacity < 30% to backgrounds; the dark theme requires sufficient contrast to remain readable.
• Don't mix typefaces; Plus Jakarta Sans is the sole typeface for all UI text—never use system-ui, sans-serif, or fallback fonts.