Fox News

Overview

Fox News operates within the **Authoritative Journalism** aesthetic—a design philosophy that prioritizes clarity, urgency, and trustworthiness through bold typography, high-contrast color blocking, and rapid visual hierarchy. The brand serves millions of daily readers seeking breaking news, analysis, and comprehensive coverage across politics, business, entertainment, and lifestyle. The UI evokes confidence and immediacy: strong reds (#d20f26) command attention on CTAs and breaking alerts, while deep navy (#003366) anchors the header and establishes institutional authority. The emotional response is one of controlled intensity—the interface feels alive with news energy without sacrificing legibility or professionalism.

Fox News speaks in the voice of a seasoned newsroom: direct, declarative, and fact-forward. Vocabulary favors active verbs ("corrects," "breaks," "reports") and present-tense urgency. The tone is never breathless or sensational in the UI itself—that energy comes from content, not chrome. Example sentence in brand voice: "VP Vance quickly corrects the record amid reports of leaked new deal terms with Iran."

Colors

The Fox News color system is built on **editorial boldness with institutional restraint**. Primary (#d20f26, a vivid red) is reserved exclusively for call-to-action buttons ("Watch TV," "Watch Fox News Live"), breaking-news badges, and trending-topic labels. This high-saturation red creates immediate visual contrast against the white surface (#ffffff) and ensures CTAs are never missed. Secondary (#003366, a deep navy) anchors the header navigation bar and appears in secondary containers, establishing the brand's institutional gravitas and connection to broadcast heritage. Tertiary (#ffa800, a warm orange) is used sparingly for accent highlights and promotional elements, adding warmth without competing with primary urgency.

The surface stack is deliberately minimal: white (#ffffff) dominat

Typography

Fox News typography is rooted in **Condensed Authority**—Roboto Condensed for headlines and Roboto for body text, both loaded from Google Fonts. The type system creates a clear hierarchy: display-level headlines (60px, 700 weight, -0.04em tracking) command attention on hero stories; headline-lg (40px, 700 weight) is used for major section titles; headline-md (28px, 700 weight) for article cards and secondary stories. Body text is set at 16px (400 weight, 24px line-height) for comfortable reading at any screen size. Labels use 12px with 900 font-weight and 0.05em letter-spacing, creating the punchy, all-caps feel of breaking-news badges and trending tags. When small labels appear over busy image backgrounds (e.g., "LIVE UPDATES" over video), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) t

Layout

Fox News uses a **12-column fluid grid** with a maximum container width of 1280px, allowing content to breathe on desktop while remaining responsive on mobile. The page rhythm is driven by a consistent 24px gutter (md spacing) between major sections: hero banner, trending topics, live-updates card, featured article, and content feeds. White space is used strategically—24px margins separate card groups, 40px (lg spacing) divides major sections. The header navigation occupies a fixed 56px height with 8px internal padding, keeping it compact and always accessible. Hero sections use full-width imagery with a 64px (xl spacing) padding on either side at desktop, collapsing to 24px on tablet. The trending-topics bar below the header uses a horizontal scroll layout on mobile, maintaining the 12px

Elevation & Depth

Fox News employs a **flat-with-subtle-depth** elevation model. The page background is pure white (#ffffff) with no texture. Cards and containers have no drop shadow by default—they rely on 1px solid borders (rgba(204, 204, 204, 1)) for definition. On hover, cards transition to a light gray background (#f5f5f5) with a 150ms ease-in-out timing, creating a gentle lift effect without shadow. The header bar uses a 1px bottom border (rgba(204, 204, 204, 1)) to separate it from content. When elevation is needed (modals, popovers), apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 4px border-radi

Shapes

Fox News embraces **Architectural Sharpness**—a design language that favors clean lines and minimal rounding. Border-radius is used sparingly and consistently: buttons use 4px (sm rounded), input fields use 3px (DEFAULT rounded), and cards use 0px (no rounding). This sharp aesthetic reinforces the brand's no-nonsense editorial voice and aligns with broadcast-era design traditions. The only exception is the "Watch TV" CTA button, which uses 4px rounding to signal interactivity. Badges and pills (trending topics, live-update labels) use 4px rounding as well, creating visual distinction from card

Components

Action Elements Buttons follow a strict hierarchy. Primary CTAs ("Watch Fox News Live," "Watch TV") use 48px height, 12px 24px padding, 700 font-weight, and background-color: #d20f26 with white text. On hover, transition to #b80820 over 200ms. Secondary buttons use transparent background with a 1px border (#cccccc) and on-surface text (#222222); on hover, apply background-color: #f0f0f0. All buttons use 4px border-radius and label-md typography (14px, 600 weight). Trending-topic pills use 12px height, 8px 12px padding, label-sm typography (12px, 900 weight, 0.05em tracking), and primary red background with white text.

Containers & Surfaces Cards have zero border-radius and no shadow by default. They use a 1px solid border (#cccccc) for definition. On hover, transition background-c

Do's and Don'ts

**Do**

• Do use primary red (#d20f26) exclusively on CTAs, breaking-news badges, and error states—never on decorative elements or backgrounds.
• Do apply Roboto Condensed (700 weight) to all headlines and section titles to create visual urgency and hierarchy.
• Do maintain 24px gutters between major content sections and 12px gaps between related items to establish rhythm.
• Do use sharp corners (0–4px border-radius) on cards and buttons to reinforce the authoritative, no-nonsense editorial voice.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to small labels overlaid on images to ensure legibility.
• Do transition hover states over 150–200ms (ease-in-out) to feel responsive without appearing jarring.

**Don't**

• Don't use secondary navy (#003366) or tertiary orange (#ffa800) on CTAs—primary red is the only call-to-action color.
• Don't add drop shadows to cards or containers; rely on 1px borders and background-color transitions for depth.
• Don't round corners beyond 4px on any element; sharp angles are core to the brand's institutional aesthetic.
• Don't use more than three font weights in a single view; stick to 400 (body), 600 (labels), and 700 (headlines).
• Don't apply gradients or textures to the white background; the surface must remain clean and content-focused.
• Don't exceed 1280px container width on desktop; text becomes uncomfortable to read beyond this threshold.