Foundations of a design system

Written by Maxime

May 29, 2024

Foundations in a design system are the core principles, guidelines and branding assets that establish the baseline for creating consistent, cohesive, and scalable designs. Key elements of foundations in a design system typically include:

  • Typography
  • Colors
  • Spacing
  • Icons
  • Illustrations

Typography

In a design system, defining typography is crucial for maintaining consistency, readability, and brand identity across various platforms and products.
You will define the choice of your fonts and define how to display them: type, size, colors, ...
You will also change size depending of the viewport like for mobile, tablet or desktop. Using the power of Figma Variables will also help you manage them in a easy way.

Colors

In a design system, defining colors is essential for brand consistency and usability. Key elements include establishing a color palette with primary, secondary, and neutral colors, and providing tints and shades for versatility. Usage guidelines dictate where to apply these colors, while semantic colors handle specific feedback like success or error messages. Ensure accessibility by meeting contrast ratios and accommodating color blindness. Implement colors using design tokens for consistency, and consider theming for light and dark modes. This structured approach ensures a cohesive, accessible, and effective color strategy across all digital products.

Spacing

Spacingrefers to the consistent use of margins, padding, and gaps between elements to create a well-organized and visually pleasing layout. Spacing helps to define the relationship between different elements, improve readability, and create a balanced composition. Most measurements align to an 8 based grid applied. These base units will help keep the design consistent and improve communication between designers and developers.

Icons

Icons are small graphical elements used to visually represent actions, objects, or ideas. They are an essential part of the system's visual language, helping users navigate the interface more intuitively. Icons enhance the user experience by conveying meaning at a glance, without relying on text, and contribute to the overall design consistency.

Illustrations

Illustrations are visual elements that help to convey complex ideas, emotions, or concepts in a more engaging and creative way. They are typically larger, more detailed, and more narrative than icons and are used to enhance storytelling, provide visual interest, or explain abstract concepts.

More posts

Make your design system accessible

August 8, 2025

Accessibility is now an essential part of your design system. It’s not just about color contrast—it involves many other criteria as well.

Read more

How to start your documentation

July 31, 2025

As soon as you start a design system, documentation becomes essential for sharing information and knowledge within your team. It also helps newcomers quickly understand and adopt your system.

Read more

Top Design System Resources

July 18, 2025

Here is our list of top design system resources that we use daily to design and build our own systems. We hope they’ll help you too.

Read more

Top Figma plugins for Design Systems

July 7, 2025

To automatize the the design process, we always look for the best Figma tools available. From documentation, to color contrast checlk, a lot of great plugins are available out there.

Read more