Tata 1mg

name Tata 1mg

colors background: "#ffffff" foreground: "#212121" brand: "#ff6f61" # 1mg Orange muted: "#7c7c7c" border: "#f0f0f0" card: "#ffffff" accent: "#486aae" # Tata Blue secondary: "#10b190" # Healthcare Teal dark: background: "#0a0a0a" foreground: "#f5f5f5" muted: "#a1a1a1" border: "#2d2d2d" card: "#1a1a1a" accent: "#ff6f61"

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

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

Design System: Tata 1mg

Overview

Tata 1mg's design system is "Reliable Health Care." It combines the trustworthy "Tata Blue" with its original healthcare-vibrant orange to create a safe, professional environment for medical needs.

Design Philosophy

• Safety & Trust: Uses a professional palette to establish its status as a reliable provider of medicines and lab tests.

• Clarity under Pressure: Designed for situations where users might be anxious, prioritizing clear labels, simple navigation, and absolute accuracy.

• The "Care" Accent: Uses healthcare-teal (#10B190) and wordmark-orange (#FF6F61) to provide a sense of optimism and healing.

• Structured Information: Prioritizes medicine names, dosages, and prices with high-contrast typography.

Colors

• 1mg Orange (#FF6F61): The signature brand color used for primary actions and wordmarks, representing vitality.

• Tata Blue (#486AAE): Introduced after the Tata acquisition to establish a layer of corporate trust and stability.

• Healthcare Teal (#10B190): Used for sub-categories, laboratory services, and healthy-living icons.

Typography

• Inter: Provides the necessary precision for reading complex medicine names and reports.

• Visual Hierarchy: Uses bold weights for prices and primary medicine names to ensure fast verification.

Components

• Medicine Search: A prominent white bar with integrated category filters for quick access to prescriptions.

• Lab Test Cards: Structured units with integrated "Health Check" badges and clear booking actions.

• The "Safety" Badge: A small, green-themed icon used to certify the authenticity of medicines.

Visual Effects

• Clean Grids: Organizes thousands of medical products into a highly structured, sterile-feeling grid.

• Subtle Highlights: Uses light-orange or light-blue backgrounds for special offers and health tips.

• Fast Upload States: A clear, responsive interaction for uploading prescriptions.