Airtel

name Airtel

colors background: "#ffffff" foreground: "#2d2d2d" brand: "#ed1d24" # Airtel Red muted: "#7c7c7c" border: "#eeeeee" card: "#ffffff" accent: "#ed1d24" dark: background: "#0a0a0a" foreground: "#f5f5f5" muted: "#a1a1a1" border: "#2d2d2d" card: "#1a1a1a" accent: "#ed1d24"

typography fontFamily: sans: "Airtel Sans, Inter, system-ui, sans-serif" body: fontSize: "14px" lineHeight: "1.5" heading: fontWeight: "700" letterSpacing: "-0.01em"

rounded default: "8px" md: "12px" lg: "32px" # Airtel uses very large rounding for special sections

Design System: Airtel

Overview

Airtel's design system is "Confident and Human." It is centered around a vibrant, iconic red that represents the brand's long-standing leadership in India's telecom space.

Design Philosophy

• The "Airtel" Voice: Uses its signature red to communicate energy, connectivity, and a "premium yet accessible" status.

• Simplified Connectivity: Focuses on reducing the complexity of plans and recharges into a single, focus-driven UI.

• Inclusive Sophistication: Combines high-end typography with a clean, grid-based layout that works across all socio-economic segments.

• Transparency: Prioritizes clear usage tracking and simple, "no-hidden-fees" information display.

Colors

• Airtel Red (#ED1D24): A vibrant, high-energy red that is the soul of the brand.

• Charcoal Neutral (#2D2D2D): Used for text and headers to provide a professional, modern contrast.

• Secondary Whites: Generous use of white space to create a "premium" digital experience.

Typography

• Airtel Sans: A custom typeface that balances technical precision with a warm, human character.

• Bold Headers: Uses heavy weights for primary actions and balances, ensuring they are never missed.

Components

• The "Thanks" Dashboard: A premium, personalized area for users, often using large, rounded cards (32px) and subtle gradients.

• Plan Comparison Tables: Highly structured grids that use the brand red for "Recommended" or "Best Value" tags.

• Circle Usage Gauges: Minimalist, red-themed circular progress bars for tracking data and talk-time.

Visual Effects

• Soft Gradients: Uses red-to-orange or red-to-white gradients for promotional heroes.

• High-Radius Corners: Uses very large rounding (32px) for "feature cards" to create a soft, modern, and distinct look.

• Fast Success States: Confident, red-themed success screens for recharges and bill payments.