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.