# Front User Design Principles - Bikash Barta News Portal

The Bikash Barta news portal is designed to provide a high-trust, mobile-first experience for Odia-speaking users. It balances traditional Odia aesthetics with modern news portal layouts.

## 1. Visual Identity & Brand
- **Core Colors:**
    - **News Red:** `#E11D48` - Used for breaking news, highlights, and urgent highlights.
    - **Foundation Blue:** `#1E40AF` - Used for primary navigation, headings, and branding.
    - **Content Surface:** `#FFFFFF` (White) - Maintains a clean, newspaper-like feel.
- **Typography (Bilingual Strategy):**
    - **Odia Primary:** **Anek Odia** - A modern, high-legibility font for headlines and body text.
    - **English/Latin Supporting:** **Inter** and **Roboto** - Clean, professional fonts for navigation and metadata.
- **Imagery:** High-quality, original visuals of Odisha's people and landscapes, avoiding stock photo "sameness."

## 2. Content Hierarchy
- **Headline First:** Headlines are bold and oversized (`Anek Odia 800`) to grab attention immediately.
- **Z-Pattern Layout:** Guides users from the logo to the navigation, then through the hero story and into the news grid.
- **Category Clusters:** News is grouped into clear vertical sections (e.g., Odisha News, Sports, Politics) with distinct branding and "View All" shortcuts.

## 3. UI Components & Patterns
- **News Card V2:** A specialized card design with subtle borders, high-contrast text, and generous padding. Includes a hover-scale effect for images.
- **Sticky Navigation:** Keeps the main categories accessible at all times on desktop, ensuring easy discovery.
- **Mobile Menu Drawer:** A high-speed, 72px width-based drawer for one-handed navigation on small screens.
- **Breaking News Ticker:** A scrolling marquee to create a sense of urgency and "live" updates.

## 4. Mobile-First Optimization
- **Touch-Friendly Targets:** Buttons and navigation links are large and spaced for thumbs.
- **Responsive Grids:** Seamlessly transitions from a 12-column desktop grid to a single-column mobile view.
- **Optimized Assets:** Images are served with proper sizing to ensure fast loading on mobile networks (e.g., 4G/5G).

## 5. Trust & Authority
- **Metadata Visibility:** Author info, update timestamps, and view counts are displayed prominently on article pages to build reader trust.
- **Social Proof:** Integrated social share counts and live social feeds (YouTube, Facebook, Instagram) to show community engagement.
- **Legal Clarity:** Clean, readable typography for privacy and terms, ensuring users feel their data is handled professionally.

## 6. Accessibility
- **Contrast Ratios:** Ensures all text meets a minimum 4.5:1 ratio against backgrounds.
- **Odia Font Rendering:** Specifically tuned for modern browsers to ensure no "box" or broken character rendering.
- **Logical Tab Order:** Ensuring keyboard and screen reader users can navigate news stories sequentially.