Foundations are the styles, effects, and structure that govern the creation of components within the design system. They are aligned to brand, accessibility, and UX best practices to achieve an equitable, unified experience.



The use of color in an experience helps define communication, meaning, brand, and roles, making it easier for users to interact, search, and differentiate elements.


Elevation uses shadows and blurs for a layered effect that gives users a visual cue that an object or experience is "elevated" in priority or hierarchy.


The grid is the structural foundation of all visual elements, from typography to columns, boxes, icons, and illustrations.


Icons represent items and ideas in a simple graphic format. They help communicate with universal understanding.


Typography is a deliberate system of letters, numbers, and characters. Good typography ensures legibility, clean aesthetics, and a well-defined information hierarchy.