What is MDK?
Contents
Introduction
The Mosaic Design Kit (MDK) is an integral part of the overall Mosaic Design System. It provides a toolkit of pre-styled components and patterns to help designers build Mosaic-based user experiences.
The UX team use Figma – a collaborative web application for interface design – to build and manage MDK. This means we can increase design consistency with searchable assets and shareable styles in one centralised place.
Each component and pattern in Figma have a code equivalent in Storybook, so that designs can be translated into real-world applications by developers.
Components
Components are the key building blocks of the Mosaic Design System. They are consistently used throughout designs to help create visual and functional consistency across products. Examples of components are buttons, accordions and selects. You can think of them as the individual tiles in a mosaic - individually, they don't do much, but when put together they form something amazing!
It's important to remember that components on this site and Storybook do not have a context - they are the most stripped-down version of a webpage's building block as possible. Very rarely will you ever use a component in complete isolation - they will be combined together into designs, patterns and compositions (more on those later!)
On this site you will find pages for each base component, including variations and associated properties, e.g. size, state, etc. Many components also have compositions. This is where components are enhanced by combining them with other components (see Compositions below).
Compositions
Compositions allow components to be combined with other components to extend their flexibility. For example, taking a list component and enhancing by adding an avatar or a chip. Compositions are generally two components only, and combine two small pieces of functionality that compliment each other well. Like components, the compositions we provide you with on this site do not have a context and no intended use case. They merely show examples and the structure of how components can be enhanced.
Patterns
Patterns are the best practice solutions for how a user achieves a real-world goal. They are reusable combinations of components (or compositions) that address common user objectives. Patterns always have a context and intended use case, e.g. a contact list, which contains a list group, avatar, chip, and button components.
MDK links
For anyone outside the UX team who has a Figma licence and wants to start designing, the links below provide access to the MDK Component and Pattern libraries.
Feedback
Although we strive to be accurate and consistent throughout the design kit, we realise that from time to time you may need to reach out to us with your comments, suggestions or requirements. You can contact us by emailing ux@oneadvanced.com.