Introduction & Scope

The Cigna Healthcare Design System was built from scratch in Figma for a complete new refresh of all digital products including D2C, B2B and SaaS dashboards. The main focus was to deliver reusable components that would transpire into templates and pages across several applications using React.js coding format.

Introduction & Scope

The Cigna Healthcare Design System was built from scratch in Figma for a complete new refresh of all digital products including D2C, B2B and SaaS dashboards. The main focus was to deliver reusable components that would transpire into templates and pages across several applications using React.js coding format.

Introduction & Scope
The Cigna Healthcare Design System was built from scratch in Figma for a complete new refresh of all digital products including D2C, B2B and SaaS dashboards.
cigna-green-leaf-motif
Foundations
Color, typography, grid alignment and icons are examples of foundational elements that set the stage for where all the Cigna UI components are built.
cigna-design-foundations-colors
cigna-design-foundations-grids
cigna-design-foundations-icons
cigna-green-leaf-motif
Foundations
Color, typography, grid alignment and icons are examples of foundational elements that set the stage for where all the Cigna UI components are built.
cigna-design-foundations-colors
cigna-design-foundations-grids
cigna-design-foundations-icons
cigna-green-leaf-motif
Foundations
Color, typography, grid alignment and icons are examples of foundational elements that set the stage for where all the Cigna UI components are built.
cigna-design-foundations-colors
cigna-design-atoms-buttons
cigna-design-atoms-controls
cigna-design-atoms-badges
cigna-green-leaf-motif
Atoms
Atoms represent the basic Cigna UI elements that cannot be broken down any further without losing their meaning.
cigna-design-atoms-buttons
cigna-design-atoms-controls
cigna-design-atoms-badges
cigna-green-leaf-motif Atoms
Atoms represent the basic Cigna UI elements that cannot be broken down any further without losing their meaning.
cigna-green-leaf-motif Atoms
Atoms represent the basic Cigna UI elements that cannot be broken down any further without losing their meaning.
cigna-design-atoms-controls
cigna-design-atoms-buttons
cigna-green-leaf-motif
Molecules

Molecules are combinations of atoms bonded together to form simple components that have their own unique functionality within the Cigna UI Design System.

cigna-design-molecules-input-fields
cigna-design-molecules-tabs
cigna-design-molecules-notifications
cigna-green-leaf-motif Molecules
Molecules are combinations of atoms bonded together to form simple components that have their own unique functionality within the Cigna UI Design System.
cigna-design-molecules-input-fields
cigna-design-molecules-tabs
cigna-design-molecules-notifications
cigna-green-leaf-motif Molecules
Molecules are combinations of atoms bonded together to form simple components that have their own unique functionality within the Cigna UI Design System.
cigna-design-molecules-input-fields
cigna-design-molecules-notifications
cigna-design-organisms-navigation
cigna-design-organisms-pop-ups
cigna-green-leaf-motif
Organisms
Organisms in the Cigna UI Design System are complex components that are made up of molecules and/or atoms. These represent more distinct sections or modules of a user interface.
cigna-design-organisms-navigation
cigna-design-organisms-pop-ups
cigna-green-leaf-motif Organisms
Organisms in the Cigna UI Design System are complex components that are made up of molecules and/or atoms. These represent more distinct sections or modules of a user interface.
cigna-green-leaf-motif Organisms
Organisms in the Cigna UI Design System are complex components that are made up of molecules and/or atoms. These represent more distinct sections or modules of a user interface.
cigna-design-organisms-navigation
cigna-design-organisms-pop-ups