Vi (Vodafone Idea)

Overview

Vi is India's premier telecom service provider, delivering prepaid, postpaid, and digital connectivity solutions to millions of users. The design system embodies 'Energetic Pragmatism'—a philosophy that balances bold, attention-grabbing visual elements with functional clarity and accessibility. The brand personality is confident, approachable, and customer-centric: it speaks to users with directness and optimism, avoiding corporate jargon in favor of conversational, action-oriented language. The UI evokes a sense of reliability and forward momentum, using the signature Vi red (#e60000) as a beacon of trust and energy across all interactive touchpoints.

Vi's voice is conversational yet authoritative, grounded in the everyday language of Indian mobile users. The brand avoids hyperbole and instead focuses on tangible benefits: 'Recharge in seconds, stay connected for days' rather than 'Experience unlimited possibilities.' Typography is bold and confident (Vi-Heavy and Vi-Bold weights dominate headlines), while body text remains warm and accessible through the Vi-Regular family. The design system prioritizes clarity over decoration, ensuring that every pixel serves a functional purpose while maintaining the brand's distinctive energy.

Colors

The Vi color palette is anchored by a vibrant, unmistakable red (#e60000) that serves as the primary accent—used exclusively on call-to-action buttons, active states, and brand-critical interactive elements. This red is not merely decorative; it is the visual embodiment of urgency and trust, appearing on primary buttons (height: 50px, padding: 8px 24px, border-radius: 50px) and hover states (transitioning to #b30e0e at 200ms). The secondary color is a neutral dark gray (#333333), used for body text and structural elements, paired with on-secondary white (#ffffff) for maximum legibility. A tertiary accent—promotional yellow (#ffc600)—highlights limited-time offers and badges, always rendered with sufficient contrast against the light surface (#ffffff).

The surface stack is deliberately min

Typography

The Vi typography system is built on a custom font family (Vi-Regular, Vi-Medium, Vi-Bold, Vi-Heavy) that conveys confidence and modernity while remaining deeply functional. Display text (60px, Vi-Heavy, -0.04em letter-spacing) commands attention on hero sections and major announcements, while headline-lg (40px, Vi-Bold, -0.02em) anchors section breaks and key messaging. Body text (16px, Vi-Regular, 24px line-height) is set with generous leading to ensure readability on mobile and desktop, with label-md (14px, Vi-Medium, 0.01em letter-spacing) used for buttons, form labels, and interactive elements. The weight hierarchy is strict: headlines always use Vi-Bold or Vi-Heavy, body always Vi-Regular, and interactive elements always Vi-Medium. For small labels over busy backgrounds (e.g., promot

Layout

The Vi layout system uses a fluid 12-column grid with a maximum container width of 1232px, centered on the viewport. The page rhythm is driven by a semantic spacing scale: lg (40px) separates major sections (hero, plan cards, testimonials), md (24px) creates breathing room within cards and between related elements, and sm (12px) tightens spacing within form groups and list items. The gutter width is consistently 24px, ensuring consistent horizontal padding across all breakpoints. At tablet (768px) and below, the container max-width reduces to 960px, then 720px at mobile, with the grid remaining 12 columns but collapsing to single-column layouts for cards and forms. White space is treated as a first-class design element: never compress spacing below the sm (12px) unit, and always maintain a

Elevation & Depth

Depth in the Vi system is achieved through a restrained shadow vocabulary and subtle background color shifts, avoiding the dark, dramatic shadows of older design systems. Level 1 (Base) is the white surface (#ffffff) with no shadow. Level 2 (Standard Cards) uses a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) paired with a light gray background (#f8f9fa or #fefaf6 for promotional cards), creating a gentle lift from the page. Level 3 (Elevated/Modals) applies a stronger shadow (0 8px 30px rgba(0, 0, 0, 0.2)) with a pure white background (#ffffff), signaling modal prominence and focus. Hover state

Shapes

The Vi shape philosophy is 'Rounded Pragmatism'—curves are used strategically to soften the interface and improve usability, but never at the expense of clarity or efficiency. Buttons and primary interactive elements use the full radius (50px / border-radius: 50px), creating pill-shaped buttons that are instantly recognizable and thumb-friendly on mobile. Cards and containers use lg (16px) or xl (20px) border-radius, providing a modern, approachable appearance without appearing overly playful. Form inputs and select dropdowns use the DEFAULT radius (8px), striking a balance between friendlines

Components

Action Elements Buttons are the primary vehicle for user intent in the Vi system. Primary buttons (button-primary) use the Vi red (#e60000) background with white text, 50px height, 8px 24px padding, and a 50px border-radius for maximum thumb-friendliness. The label uses Vi-Medium at 14px with 0.01em letter-spacing. On hover, the background transitions to #b30e0e over 200ms (transition: background-color 200ms ease-in-out), with no additional shadow change. On active/pressed, the background darkens further to #8a0a0a. Secondary buttons (button-secondary) use a transparent background with a 2px solid border in Vi red, the same text color, and identical padding and height; on hover, the background fills with the primary-container color (#ffebee) while maintaining the red text and border. A

Do's and Don'ts

**Do**

• Do use the Vi red (#e60000) exclusively for primary CTAs, active states, and brand-critical interactive elements—never use it for decorative or non-interactive content.
• Do maintain a minimum 48px × 48px touch target for all interactive elements, with at least 12px padding around buttons and form inputs.
• Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and the lg shadow (0 8px 30px rgba(0, 0, 0, 0.2)) to modals; never exceed these values.
• Do use Vi-Bold or Vi-Heavy for all headlines and Vi-Regular for all body text; never mix font families or use system fonts for primary content.
• Do separate major sections with lg spacing (40px) and use md spacing (24px) within cards to create a clear visual hierarchy.
• Do test all color combinations for WCAG AA contrast compliance (4.5:1 for body text, 3:1 for large text); the primary red (#e60000) on white meets this standard.

**Don't**

• Don't use the primary red (#e60000) for body text, backgrounds, or non-interactive elements; reserve it exclusively for actions and brand moments.
• Don't apply shadows larger than 0 8px 30px rgba(0, 0, 0, 0.2) or use dark, dramatic shadows that conflict with the bright, accessible aesthetic.
• Don't compress spacing below 12px (sm unit) or reduce padding around interactive elements below 8px; this harms usability and accessibility.
• Don't mix Vi font weights arbitrarily; follow the strict hierarchy: Vi-Heavy for display, Vi-Bold for headlines, Vi-Medium for labels, Vi-Regular for body.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, xl: 20px, full: 50px); custom radii break the system.
• Don't apply text-shadow or other effects to body text; reserve text-shadow only for small labels over busy backgrounds (e.g., badges on hero images).