foundations icon

Overview

Foundations are the styles, effects, and structure that govern the creation of components within the design system. They are aligned to brand, accessibility guidance, and UX best practices so each component built from them achieve a consistent look-and-feel. All digital products should follow foundations to achieve a modern, unified experience.


Foundations

Color

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

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.

Grid

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

Icons

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

Typography

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