About Helix
About Helix
HDFC Life's Helix Design System goes beyond mere aesthetics—it represents a philosophy that shapes every aspect of our digital innovation. More than just a visual framework, it's a strategic blueprint that captures the essence of our brand and reinforces the values we stand for. By seamlessly integrating modular components and taking a meticulous approach to the selection of fonts, colors, and layouts, we ensure that every interaction reflects consistency, clarity, and quality.
Designed for scalability and adaptability, Helix evolves with our needs, ensuring that our digital solutions remain innovative and future-ready. Ultimately, it's a reflection of our dedication to delivering excellence and value in every customer interaction.
Four Main pillars of Design System
Built on four essential pillars—Foundation, Framework, Accessibility, and Components—this system is designed to be both scalable and reusable. The Foundation serves as a guiding set of design principles for designers and developers alike, while the Framework offers an in-depth understanding of Helix, equipping users with the system's core elements. Accessibility remains at the heart of it all, ensuring that the design system is not just beautiful, but inclusive and functional for all users.
Foundation
The Foundation is the core of the design system, setting essential design principles like typography, colour schemes, grids, and iconography. It ensures consistency and provides a unified visual language, guiding designers and developers in creating cohesive, user-friendly experiences across platforms.
Framework
The Framework serves as the backbone of the design system, offering clear guidance for understanding and applying it efficiently. Leveraging atomic design theory, we break down complex designs into fundamental elements atoms, molecules, and organisms that perfectly come together to create cohesive templates and pages.
Components & library
Components are modular, reusable elements like buttons and forms that maintain consistency across platforms. With the addition of Storybook, a component library, developers can easily access the code for each component within the design system.
Accessibility
Accessibility ensures the design system is inclusive and functional for all users, including those with visual, auditory, cognitive, or motor impairments. It covers aspects like color contrast, readability, keyboard navigation, and screen reader support, making HDFC Life’s digital products usable by the widest audience and compliant with accessibility standards.
Skills Used to build Helix
IA
Information Architecture
IXD
Interaction Design
XD
Experience Design
VD
Visual Design
PD
Product Design
MD
Motion Design
GD
Graphic Design
Why Helix?
Seamless
The system's intuitive layout and clearly outlined elements enable seamless navigation and interaction, improving user-friendliness.
Interactive
Thorough documentation, well-defined guidelines, and consistent design elements help users easily comprehend how to utilise the system, minimising learning barriers.
Consistency
A unified appearance across platforms, strengthening brand identity and recall.
Efficiency
With reusable components and standardised guidelines, the system optimises design and development workflows, leading to time and resource savings.