Switch between the rendered Visual preview and the Raw DESIGN.md.
Paramount's design system embodies premium entertainment and bold entertainment storytelling through a commanding visual language. The system balances deep, sophisticated navy foundations with vibrant primary blues that evoke energy and modernity. Large-scale typography paired with generous whitespace creates dramatic impact, while the strategic use of featured imagery establishes narrative presence. The overall aesthetic is cinematic and confident—suitable for a global media company that connects billions through premium content. The design prioritizes clarity and scale, ensuring impact across diverse content categories from scripted dramas to animated features.
Key Characteristics
#000A3C): Dominant background and primary text color; establishes brand authority and premium positioning#0064FF): Primary action color and accent; used for call-to-action elements, hyperlinks, and interactive highlights#03D1E5): Secondary highlight and accent for supporting actions; sparingly used for emphasis#D63384): Alternative accent for special promotions or thematic content; used in limited, high-impact contexts#0064FF): Button backgrounds, primary links, and primary interactive states#0D6EFD): Alternative interactive state for secondary CTAs or hover states#198754): Positive confirmations and success states#DC3545): Error states, warnings, and destructive actions#FFC107): Warning alerts and cautionary messaging#000000): Primary text for maximum readability in light contexts#212529): Secondary text and subdued content#FFFFFF): Primary light background and text on dark backgrounds#F8F9FA): Subtle background tinting and very light surfaces#E2E3E5): Light dividers and secondary surfaces#D9DAE2): Border color for subtle separation#D7D8DA): Disabled state backgrounds#D1D2D4): Secondary border and divider#CBCCCE): Tertiary borders and minimal visual weight#000A3C): Primary page and container background#0000): Overlay and modal backgrounds with transparencyPrimary Display & Headings: Paramount Vista Sans (fallback: Arial, sans-serif) Body & UI Text: Arial (fallback: Helvetica, sans-serif) List & Navigation: Peak Sans (fallback: Arial, sans-serif) Code & Technical: SFMono-Regular (fallback: 'Monaco', 'Courier New', monospace)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display 1 (Hero) | Paramount Vista Sans | 160px | 700 | 144px | 0px | Maximum visual impact for page heroes and major announcements |
| Display 2 | Paramount Vista Sans | 112px | 700 | 100.8px | 0px | Major section headings and featured content titles |
| Display 3 | Paramount Vista Sans | 80px | 700 | 72px | 0px | Large content headers and campaign titles |
| Heading 1 | Paramount Vista Sans | 56px | 700 | 50.4px | 0px | Section headers and major content divisions |
| Heading 2 | Paramount Vista Sans | 40px | 700 | 36px | 0px | Subsection headers and secondary content titles |
| Heading 3 | Peak Sans | 18px | 400 | 24px | 0px | Navigation items, card titles, and tertiary headers |
| Body Regular | Arial | 14px | 400 | 21px | 0px | Primary body text and standard content |
| Body Bold | Arial | 14px | 600 | 21px | 0px | Button text and emphasized body content |
| Body Large | Peak Sans | 18px | 400 | 24px | 0px | List items and larger body text |
| Caption | Arial | 12px | 400 | 18px | 0px | Supporting text, timestamps, and fine print |
| Code | SFMono-Regular | 15.75px | 400 | 24px | 0px | Code blocks and technical content |
| Link | Peak Sans | 18px | 400 | 24px | 0px | Standalone hyperlinks and navigation |
| Button | Arial | 14px | 600 | 21px | 0px | CTA and button text |
#000A3C#FFFFFF14px6000px 16px40px0px0px solid transparent21pxnone#0064FF, text #FFFFFF#0D6EFD, text #FFFFFF#D7D8DA, text #CBCCCEtransparent#000A3C18px4000px 0pxauto0px0px solid transparent24pxnone#0064FF#0D6EFDtransparentrgba(255, 255, 255, 0.55)20px4000px 0px22px30px4px0px solid transparent20pxnonergba(255, 255, 255, 0.87), Background rgba(255, 255, 255, 0.08)rgba(0, 0, 0, 0) (transparent)0px solid transparent0pxnone#000A3C text24px0.3–0.5 black for text legibility80px 64px to 88px 64px1440px#FFFFFF on dark overlay#FFFFFF#00000014px40012px 16px40px1px solid #D9DAE20px21px1px solid #0064FF, Box Shadow 0px 0px 0px 3px rgba(0, 100, 255, 0.1)1px solid #DC3545, Box Shadow 0px 0px 0px 3px rgba(220, 53, 69, 0.1)#F8F9FA, Text Color #CBCCCE, Border 1px solid #E2E3E5#FFFFFF2px solid #D9DAE20px (checkbox) or 50% (radio)#0064FF, Border 2px solid #0064FF0px 0px 0px 3px rgba(0, 100, 255, 0.1)transparent or #000A3C with opacity80px20px 64px#FFFFFF text20px gap#03D1E5, smooth 0.2s transition#FFFFFF) at 768px breakpoint#000000/ in #D9DAE20px 8px around separators#0064FF#0064FFnone (default), underline on hover14px40021px0.2s ease#0D6EFD#9966FF (optional, system-dependent)#FFFFFF18px40024px#03D1E5, smooth 0.2s transitionBase Unit: 4px
Scale:
4px: Micro-spacing, icon offsets8px: Tight grouping, small gaps12px: Input padding, small margins16px: Standard padding, button horizontal spacing20px: Gap between elements, section dividers32px: Medium section spacing40px: Significant vertical padding48px: Section padding56px: Large section padding64px: Horizontal container padding, major vertical spacing80px: Hero section vertical padding88px: Extra-large section paddingUsage Context:
1440px (standard desktop container)64px on each side (desktop), 20px (mobile)20px gutters1440px centered on desktopParamount embraces generous whitespace to establish breathing room and visual hierarchy. Large typographic scales are paired with ample vertical and horizontal spacing, creating a sense of premium positioning. Sections are clearly delineated through spacing rather than borders or heavy visual dividers. Whitespace reinforces content focus and reduces cognitive load, allowing featured imagery and large typography to command attention.
0px: Default for all components (buttons, inputs, cards, containers)4px: Icon buttons and subtle soft corners on overlay elements50%: Circular elements (avatars, circular badges)| Level | Treatment | Use |
|---|---|---|
| Flat (Ground) | box-shadow: none | Cards, inputs, default containers |
| Raised (Subtle) | 0px 1px 3px rgba(7, 26, 36, 0.12) | Hovered cards, light elevation |
| Elevated (Default) | 0px 3px 10px rgba(7, 26, 36, 0.24) | Standard lifted elements, modals, dropdowns |
| High Elevation | 0px 8px 24px rgba(7, 26, 36, 0.32) | Top-layer modals, floating actions |
| Maximum Elevation | 0px 12px 40px rgba(7, 26, 36, 0.40) | Focus modals, critical overlays |
Shadow Philosophy: Paramount's elevation system uses minimal, dark-tinted shadows to suggest depth without visual noise. Shadows employ transparent navy (rgba(7, 26, 36, x)) rather than pure black for a softer, more premium feel. Most interactive elements operate at Flat or Elevated levels; layered modals and floating actions use High or Maximum Elevation. Consistent shadow treatment across components creates visual cohesion and spatial clarity.
#0064FF for all primary call-to-action buttons and hyperlinks16px horizontal padding and 12px vertical padding for all interactive elements#000A3C) uses white (#FFFFFF) for maximum contrast20px gap spacing; separate distinct sections with 40px–64px spacing0.2s transitions for all interactive elements0px for sharp, modern edges#D63384) or cyan (#03D1E5) as primary action colors; reserve for accents only14px for body text; legibility suffers at smaller scales16px to buttons or input fields0.5 opacity over featured images; text readability is critical14px without underline; small colored text is difficult to perceive as interactive8px apart; minimum touch target is 40×40px| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–767px | Single-column layout, 20px horizontal padding, navigation collapses to hamburger, font sizes reduced by 10–15%, stacked vertical sections |
| Tablet | 768px–1023px | Two-column grid, 32px horizontal padding, navigation partially visible, moderate typography scaling, touch targets increased to 44×44px |
| Desktop | 1024px+ | Full 12-column grid, 64px horizontal padding, 1440px max-width centered, full navigation bar visible, optimal typography sizes |
| Large Desktop | 1440px+ | 1440px fixed max-width with center alignment, enhanced whitespace, full feature set visible |
40px × 40px (mobile and tablet)44px × 44px (optimal for fingers)36px × 36px minimum (pointer precision allows smaller sizes)8px gap to prevent accidental taps40px and bottom 32px#0064FF) — all primary buttons, links, interactive highlights#000A3C) — page backgrounds, dark containers, primary surfaces#FFFFFF) — all text on navy or dark backgrounds#000000) — body text on light backgrounds#03D1E5) — hover states, navigation highlights, special emphasis#DC3545) — error messaging, destructive actions#198754) — positive confirmations, successful submissions#FFC107) — alert messaging, cautionary content#D9DAE2) — form borders, dividers, subtle separation#D7D8DA) — disabled input backgrounds, inactive elementsTypography Foundation: Paramount Vista Sans for all headings 56px and above (weights 700 only); Arial for body text and buttons (14px–18px); Peak Sans for navigation, lists, and secondary headings (18px). Maintain exact px sizes and line-heights from the hierarchy table.
Color Hierarchy: Use #0064FF as the single primary action color. Use #000A3C as the dominant background. White (#FFFFFF) is reserved for text on dark backgrounds only. Maintain high contrast: minimum 4.5:1 for standard text, 3:1 for large text.
Spacing Discipline: All spacing must use multiples of 4px. Default horizontal padding is 16px for components; section padding is 64px on desktop, 32px on tablet, 20px on mobile. Gaps between elements are 20px minimum. Hero/display sections use 80–88px vertical padding.
Component Consistency: Buttons have 0px border-radius (sharp edges), 40px height, 16px horizontal padding. Inputs have 0px border-radius, 40px height, 12px vertical padding, 16px horizontal padding. All text inputs use Arial 14px with 1px borders (#D9DAE2). Focus states add 3px rgba shadow with primary blue.
Interactive States: Hover transitions are 0.2s ease. Hover buttons change background to #0064FF (from navy). Hover links become #0D6EFD or underline. Focus states add shadow 0px 0px 0px 3px rgba(0, 100, 255, 0.1). Active/pressed states use #0D6EFD background.
Responsive Scaling: Desktop container is 1440px max-width, centered, with 64px horizontal padding. Tablet uses 32px padding with 2-column grids. Mobile uses 20px padding with 1-column stacked layout. Navigation collapses to hamburger menu below 768px. All typography scales proportionally: hero 160px → 80px → 48px across desktop/tablet/mobile.
Elevation & Depth: Default shadow for elevated elements is 0px 3px 10px rgba(7, 26, 36, 0.24). Most cards and inputs are flat (no shadow). Only interactive or floating elements use elevation. Modals and overlays use higher shadows (8–12px blur). Shadows use dark navy tint, never pure black.
Accessibility Compliance: Minimum touch target is 40×40px; optimal is 44×44px on mobile. All interactive elements must have focus indicators (ring or shadow). Text must be 14px minimum for body content. Color must not be the only indicator of state (use text labels, icons, or patterns). Contrast ratio minimum 4.5:1 for standard text, 3:1 for large text (18px+).
Brand Voice: Paramount's design is cinematic, confident, and premium. Use generous whitespace to suggest luxury. Pair large typography with dramatic imagery. Maintain sharp, geometric forms (0px radius). Emphasize clarity and hierarchy through size and weight contrast, not color alone. Navigation should feel branded (Peak Sans, larger scales) and distinct from body content.
Mobile-First Progressive Enhancement: Start with mobile single-column, 20px padding, collapsed navigation. Layer in tablet two-column grid with 32px padding at 768px. Enhance desktop with full 12-column grid, 64px padding, full navigation at 1024px. Ensure all interactive states (hover, focus, active) work on both pointer and touch devices.