STAR NEWS

Overview

STAR NEWS is Bangladesh's premier multimedia news platform, serving millions with breaking news, live television, and in-depth journalism across politics, sports, entertainment, business, and technology. The design system embodies 'Accessible Journalism'—a philosophy that prioritizes clarity, speed, and visual hierarchy to make complex news digestible across all literacy levels and device types. The brand personality is authoritative yet approachable: urgent when breaking news demands it, calm and measured in analysis, and always respectful of the audience's intelligence. The UI evokes trust through bold primary actions (the signature red #e30613 on CTAs), clean typography in the custom Star News font, and a light, spacious layout that never feels cluttered. Voice example: 'দুর্গাপূজার নিরাপত্তায় কোস্ট গার্ডের সাড়ে ৩ হাজার সদস্য মোতায়েন'—direct, factual, no sensationalism.

Colors

The color palette is built on a foundation of editorial clarity: white surfaces (#ffffff) and light grays (#f9fafb to #dedede) provide neutral reading space, while two accent colors drive interaction and emotion. Primary (#e30613, a bold crimson red) is reserved exclusively for the most critical CTAs—'Download QR', live badges, breaking news indicators, and active navigation states. This red appears in box-shadows at rgba(227, 6, 19, 0.2) for subtle depth on hover states. Secondary (#2757fd, a vibrant blue) supports secondary actions, trending tags, and focus states; its container variant (#eff6ff) creates a soft highlight for tag backgrounds. Tertiary (#ffe500, golden yellow) marks 'Breaking' badges and live-event panels, ensuring maximum visual distinction. The gray scale (#5b5b5b for bo

Typography

The type system centers on the custom Star News font family (loaded via @font-face from starnews.com.bd/fonts/new/), paired with system fallbacks (-apple-system, BlinkMacSystemFont, Segoe UI) for reliability. Display (56px, 800 weight, -0.02em tracking) anchors hero headlines with maximum impact; Headline-lg (32px, 800 weight) drives section breaks and article titles; Body-md (16px, 400 weight, 24px line-height) ensures comfortable reading at standard viewing distances. The 800 font-weight on headlines creates visual dominance without requiring size increases, critical for mobile screens where space is constrained. Label-md (14px, 600 weight, 0.01em tracking) is applied to all interactive elements (buttons, tags, badges) to signal clickability. On small labels over busy backgrounds (e.g.,

Layout

The page uses a fluid 12-column grid with a max-width of 1280px, centering content on desktop while allowing full-bleed sections (hero, trending tags bar) to span edge-to-edge. Spacing follows a strict 8px unit system: section separation uses lg spacing (40px), card padding uses md spacing (24px), and internal element gaps use sm spacing (12px). The trending tags bar sits at the top with 10px vertical padding and 8px horizontal gaps between tags, creating a scannable horizontal rhythm. Hero sections (featuring large images and headlines) occupy 100% viewport width with 24px gutter margins on mobile (bp-sm) and 40px on desktop (bp-lg). Container max-width is enforced at 1200px for article content, preventing line lengths from exceeding 80 characters at standard zoom. The layout respects the

Elevation & Depth

Depth is conveyed through a four-tier shadow system that avoids heavy drop-shadows in favor of subtle, directional lighting. Level 1 (Base): no shadow; flat surfaces like body background (#ffffff) and surface-container (#efefef). Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and dropdown panels; this creates gentle separation without visual weight. Level 3 (Elevated/Hover): box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05), used on card-hover and button-primary-hover states; the larger blur radius (22px) and lower opacity (0.05) create a float

Shapes

The shape philosophy is 'Pragmatic Roundness'—sharp where precision matters, rounded where friendliness is needed. Buttons use full radius (9999px / border-radius: 50%) for primary CTAs (Download QR, action buttons) to signal maximum importance and tap-ability; secondary buttons use lg radius (1rem / 16px) for a softer, less aggressive appearance. Cards and input fields use DEFAULT radius (4px / 0.375rem) to maintain a professional, editorial feel without appearing sterile; this subtle rounding is barely perceptible but prevents the harsh corners of 0px. Badges and trending tags use full radiu

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary (background: #e30613, color: #ffffff, padding: 12px 24px, height: 44px, border-radius: 9999px) is used exclusively for critical CTAs like 'Download QR' and live-action triggers. On hover, the background darkens to #c70510 and the shadow expands to 0 6px 16px rgba(227, 6, 19, 0.3), creating a tactile press effect. Button-secondary (background: #eff6ff, color: #2757fd, border: 1px solid #2757fd, padding: 12px 20px, border-radius: 1rem) supports secondary actions like 'View More' or category filters. Button-ghost (background: transparent, border: 1px solid #bdbdbd, padding: 10px 16px) is used for tertiary actions and navigation links; on hover, the background becomes #e5e5e5 and the text color shifts to #e30613.

Do's and Don'ts

**Do**

• Do use primary red (#e30613) exclusively on the most critical CTAs and live/breaking badges—overuse dilutes urgency and confuses the visual hierarchy.
• Do maintain 24px gutter margins on mobile and 40px on desktop to prevent content from feeling cramped or overwhelming on small screens.
• Do apply 0.18s ease transitions to all interactive state changes (hover, focus, active) to create a cohesive, responsive feel across the platform.
• Do use the Star News custom font for all headlines and body text to reinforce brand identity; fall back to system fonts only when the custom font fails to load.
• Do reserve full border-radius (9999px) for primary buttons and badges to signal maximum importance; use 4px for cards and inputs to maintain editorial professionalism.
• Do layer shadows using the four-tier system (no shadow → 0 3px 8px → 0 8px 22px → 0 12px 28px) to create clear visual depth without visual clutter.

**Don't**

• Don't use secondary blue (#2757fd) on primary CTAs—it signals secondary importance and will be ignored by users scanning for the main action.
• Don't apply border-radius: 0 to any interactive element; even cards and inputs benefit from 4px rounding to feel modern and approachable.
• Don't exceed 80 characters per line on desktop by allowing container width to exceed 1200px; long lines reduce reading comprehension and increase cognitive load.
• Don't use shadows darker than rgba(15, 23, 42, 0.15) or blur radii greater than 28px; heavy shadows feel dated and conflict with the light, airy aesthetic.
• Don't mix font weights within a single text block (e.g., 400 and 600 in the same paragraph) unless emphasizing a specific word or phrase; inconsistent weights create visual noise.
• Don't apply hover states to non-interactive elements like static text or images; reserve hover effects for buttons, links, tags, and list items to maintain clarity about what can be clicked.