⌘ K
  • Design Principles
  • Design Framework
  • UX Laws
  • Colours
  • Typography
  • Layout Grids
  • Spacing & Radius
  • Shadow & Blur
Product Design Process
Accessibility Guideline
Content Voice
Marketing & Collaterals
  • Accordion
  • App Bar
  • Avatar
  • Badge
  • Button
  • Breadcrumb
  • Bottom Navigation
  • Carousel
  • Cards
  • Checkbox
  • Chip
  • Date Picker
  • Dropdown
  • Dialog
  • Divider
  • Floating Action Button
  • Footer
  • Header
  • Link
  • Loader
  • Menu
  • Pagination
  • Popover
  • Progress Bar
  • Radio Button
  • Search
  • Sidebar
  • Slider
  • Skeleton
  • Statistic
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag
  • Text Field
  • Timeline
  • Toast Message
  • Tooltip
  • Upload
  • Logos
  • System Icons
  • Visual Icons
  • Illustrations
  • Images
  • Tones
Templates
v 1.0
  • About Helix
  • For Designers
  • For Developers
  • Components

Design Principles

The design system was thoughtfully developed by carefully selecting various design principles to maintain brand identity and design consistency. Here, we explain some of the design principles we considered.

Design Principles
Unified Experience
Unified Experience

Unified Experience

Unified Experience

A unified experience means a consistent and seamless interaction for users across all parts of a product or service. It ensures a cohesive design and flow, reducing confusion and improving user satisfaction.

Consistency
Consistency

Consistency

Consistency

It means maintaining uniformity and reliability in design elements and user experience throughout a product or service. It ensures that users encounter familiar patterns, visuals, and interactions, leading to reduced confusion and a more intuitive experience.

Human Centric
Human Centric

Human Centric

Human Centric

Being human-centric means designing with a focus on meeting human needs and preferences. It involves understanding users deeply, empathizing with their experiences, and creating solutions that are intuitive, accessible, and meaningful to them.

Scalable
Scalable

Scalable

Scalable

Scalability involves crafting modular components and guidelines that can accommodate growth and evolution. It means ensuring that as the system expands, its integrity, consistency, and usability remain intact, enabling seamless integration of new elements while maintaining overall coherence.

Clarity
Clarity

Clarity

Clarity

Clarity entails creating components, guidelines, and documentation that are easily understandable and intuitive for users and designers alike. It involves prioritizing simplicity, consistency, and clear communication to ensure that every aspect of the system is transparent and easy to comprehend, fostering efficient usage and effective collaboration.

Usability
Usability

Usability

Usability

Usability can be described as the capacity of a system to provide a condition for its users to perform the tasks safely, effectively, and efficiently while enjoying the experience.

Feedback
Feedback

Feedback

Feedback

Ensure immediate feedback for user actions and maintain an optimal response time for interactions

Mapping
Mapping

Mapping

Mapping

Users need to know what all the options are, and know straight away how to access them. For example, use intuitive iconography that clearly indicates the various options available (for example, the Hamburger).

Discoverability
Discoverability

Discoverability

Discoverability

Basically, if the user cannot find it, it does not exist. Hence, all important information and actions should be visible or easily discoverable. As a Practice, all Design elements must be visible and labelled, representing what they mean.

Recognition Rather than Recall
Recognition Rather than Recall

Recognition Rather than Recall

Recognition Rather than Recall

Recognition is our ability to identify information as familiar, while recall requires actively retrieving details from memory, placing a cognitive burden on the process.

Cognitive Load
Cognitive Load

Cognitive Load

Cognitive Load

Reduce cognitive load with intuitive design. Use clear information architecture, chunk content, and provide cues for effortless information processing.

Error Handling and Recovery
Error Handling and Recovery

Error Handling and Recovery

Error Handling and Recovery

Design error-preventing interfaces with clear instructions and constraints. Offer helpful error messages and guide users on recovery when mistakes occur.

Aesthetic and Minimalist design
Aesthetic and Minimalist design

Aesthetic and Minimalist design

Aesthetic and Minimalist design

Aim for an aesthetically pleasing design that evokes positive emotions and engages users

Visibility of system status
Visibility of system status

Visibility of system status

Visibility of system status

Keep users informed about their actions and outcomes to empower better decision-making in subsequent interactions.

Consistency
Consistency

Consistency

Consistency

Maintain consistent language in the system to avoid user confusion. Clarity in words, icons, and symbols ensures a seamless interaction experience.

Patterns and learnability
Patterns and learnability

Patterns and learnability

Patterns and learnability

when it comes to UX design, learnability refers to how easily your product can be learned. whereas design patterns are reusable/recurring components which designers use to solve common problems in user interface design.

Design Framework

Helix - HDFC Life 2025