We create design systems based on the notion of atomic design: start with small ‘atoms’ or design principles like colours, fonts and typography, and define layout decisions like grids and page structures. Then combine several atoms to design components and component variances. Next is to design page templates with a strong information architecture using those components. Finally, fixate page templates to actual pages that dictates what components are flexible in usage and what components are fixed.
Here you’ll find familiar elements like colours, fonts, spaces, shapes, icons, illustrations, photographies, animations, voice and tone, and sounds, as well as how to put them together meaningfully and in compliance with your brand showing your team what is compliant and what is not.
The components are the building blocks of your digital experiences, and include application buttons, navigation, forms, and icons. Components are used by your internal users to create content.
Page templates are reusable combinations of components that solve common user problems. These best practice solutions ensure consistency across experiences.