DESIGN.md · explainx registry
Airtel
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 System#design#ui#ux#template
DESIGN.md (markdown body)
| 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.
Usage
- Copy DESIGN.md into your project or paste it into your IDE agent chat.
- Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
- When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.
Common questions
- What is Airtel on explainx.ai?
- 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. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
- What is DESIGN.md?
- DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
- How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
- Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
- Where is the source repo?
- Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
- How current is this DESIGN.md?
- Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
- Need a fresh DESIGN.md from scratch?
- Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.
Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.
Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.
List Your Design.md
Share your design system with AI agents worldwide