Every system needs a solid foundation to ensure that what we build on top of it is stable and consistent. In the case of our own design system that foundation consists of the following core elements from which all other building blocks are derived:
Shade ranges for all our colors, grouped into one palette and distributed as a theme.
Everything type related, from fonts and scaling, to color and styling conventions.
Standardized scale for margins, paddings and grids, for both web and mobile.
Shadow levels used to define the distance between different elements on the z-axis.
Complete catalog along with guidelines, downloads and embedable links.
Archive of animations from our products and website, usable as either images or code.
More complex version of icons, usable as images in empty and error states.
Backdrops used for galleries, modals, drawers or other components.