This is a list of terms we use in our routine with Mozaic. We are adding these terms and definitions just in case you are wondering "What the heck does it mean ?". Well, you will find the proper piece of informations on this page 🙃. Oh… As we’re far of being perfect, if you find something that’s missing, feel free to add or give us a shout on #mozaic-support
A set of connected patterns and shared practices, coherently organized to serve the purpose of a digital product.
When we refer to the design system, we are talking about the all thing. Patterns, code, design files, principles and even the workflow and processes.
When websites and web tools are properly designed and coded, people with disabilities can use them. However, currently many sites and tools are developed with accessibility barriers that make them difficult or impossible for some people to use.
Making the web accessible benefits individuals, businesses, and society. International web standards define what is needed for accessibility. Learn more here
The Atomic design is a modular design methodology created by Brad Frost, helpful to create design systems. It consists to start from the simple elements, and reusable it to create more complex components.
It allows the designers to create the most consistent user interfaces. This is a methodology we use when we design for Mozaic.
Branching, in version control and software configuration management, is the duplication of an object under version control so that modifications can occur in parallel along multiple branches. Learn more here
Master Branch (on Github)
The latest unified code version. This is where we merge pull-requests before releasing it.
Master Branch (on Abstract)
This is the source of truth of our design work where you will find the latest and safest version of Mozaic.
A bug fix is a change to a system or a product designed to handle a code or a design bug/glitch.
A reported problem of any part of the design system (sketch files, style guide, code, documentation, usage, specs…).
A component is a reusable UI element created from a need, that defined clear purposes with a unique visual identity that adapts to different contexts.
Design tokens are UI pieces of information that store visual design attributes, such as values for margins and spacing, font sizes and families, or color values. Learn more here
Documentation is a crucial part of the product. It allows everyone to explain their work, their uses cases, and their conventions. Good documentation will be able to onboard new users in an easier way.
Git is an open-source version control system that stores the modifications in a central repository.
GitHub is a project hosting platform for collaboration and version control. It allows people to work together on a product.
Visual hierarchy is the order in which a user processes the information on a page; its function in user interface (UI) design is to allow users to understand the information easily. By assigning different visual characteristics to sections of information (e.g., larger fonts for headings), a designer can influence what users will perceive as being further up in the hierarchy. Learn more here
A magic unit is a base unit for any element or property that require a defined dimension. It is equal to 16px but is expressed in rem. We multiply or divide it to define white spaces, icons sizes, line-heights etc…
A simple way for non-programming types to write in an easy-to-read format that could be converted directly into HTML. Learn more here
Any repeating or reusable part of an interface (A color, an icon, a typography, a button, a principle...).
When we refer to a pattern, we are talking about an item of the pattern library. It is a set of related documentation, design file, code sample etc...
A pattern contain at least a documentation page (like principles), or a set of elements like documentation, a related design file, static assets (image / font), css utilities and/or helpers and/or classes in the case of more complex patterns, like components.
Pull requests let you tell others about changes you've pushed to a GitHub repository. Once a pull request is sent, interested parties can review the set of changes, discuss potential modifications, and even push follow-up commits if necessary.
A repository (usually called “repo”) is a location where you will find all the files for a particular project.
Stand for specifications. All the important pieces of information to compose our designs in different technology. So if you want to create the patterns in a different technology, you have all the properties behind font size, border-radius, heigh, padding, and all single aspects inside a pattern.
A tool to capture, collect and share design patterns and guidelines for their usage.
When we refer to the pattern library, we are talking about the documentation website. In our case, this is the static site generator powered by Gatsby and all his pages.
A User Interface Kit is a series of design files to be imported as libraries. It contains all core styles as well as a collection of reusable components based on those core styles.
Usage defines how to use a component and how it works. Usages help the designers to create a standard user interface.