Jio

name Jio

colors background: "#ffffff" foreground: "#000000" brand: "#005aac" # Jio Blue muted: "#666666" border: "#e0e0e0" card: "#ffffff" accent: "#ff0000" # Jio Red (Secondary) dark: background: "#0a0a0a" foreground: "#f5f5f5" muted: "#a1a1a1" border: "#2d2d2d" card: "#1a1a1a" accent: "#005aac"

typography fontFamily: sans: "JioType, Inter, system-ui, sans-serif" body: fontSize: "14px" lineHeight: "1.5" heading: fontWeight: "600"

rounded default: "8px" md: "12px" lg: "24px"

Design System: Jio

Overview

Jio's design system is built for "Digital Inclusivity." It is a vibrant, accessible, and high-density environment designed to power India's digital life across telecom, entertainment, and commerce.

Design Philosophy

• Digital for Everyone: Designed to be accessible to a billion people, prioritizing large targets and simple, high-contrast layouts.

• The "Blue" Network: Jio Blue (#005AAC) represents the brand's core identity as a stable, national network provider.

• Multi-Brand Synergy: Uses a primary blue but allows for sub-brands (JioCinema, JioMart) to introduce their own signature colors (Red, Green).

• Vibrant Utility: Combines practical utility (Balance, Recharge) with rich media consumption in a single, high-density interface.

Colors

• Jio Blue (#005AAC): The primary color for telecom services and the main "MyJio" app.

• Jio Red (#FF0000): Used for entertainment and high-energy alerts.

• Digital Neutrals: Uses a scale of clean greys and whites to manage complex account data.

Typography

• JioType: A custom, humanist sans-serif designed for high legibility across a wide range of screen qualities and languages.

• Friendly Geometry: Letters have open apertures and soft curves to feel approachable.

Components

• Recharge Cards: High-impact units with integrated pricing, data limits, and a prominent Blue CTA.

• Account Dashboard: A structured, top-level area with circular "data meters" showing current usage.

• Bottom Navigation Rail: Uses large, colorful icons to help users navigate between the vast array of Jio services.

Visual Effects

• Circle Meters: Signature circular progress bars used to visualize data and validity balances.

• High-Contrast Banners: Full-width, multi-colored banners used for promotions and service updates.

• Micro-interactions: Snappy animations for recharging and data verification.