After establishing the structure for GoFundMe’s design tokens, I then focus on the foundations. Design system foundations (commonly referred to as Design System styles) are the basic building blocks of a design system. They include things like typography, color, spacing, and layout, which are used to establish a consistent visual language across all the components and pages of a design system. These foundations are the starting point for creating a cohesive and recognizable brand identity.

Some examples of design system foundations include:

1. Typography: This includes things like font families, font sizes, and font weights that are used across the design system.
2. Color: This includes the color palette used across the design system, as well as any color variations or shades that are used.
3. Spacing: This includes things like margin and padding values that are used to create consistent spacing between elements.
4. Layout: This includes the basic grid system and layout patterns used across the design system.
5. Iconography: This includes icons or symbols used across the design system.
6. Imagery: This includes the imagery used across the design system, such as photographs and illustrations.

All of these foundations work together to create a cohesive and recognizable visual language across all the pages and components of the design system.

Below are the foundations I set for GoFundMe’s design system:

Colors

Typography

Grid

Radius

Spacing

Shadows

Border Width

Icons