What is Mosaic?

Contents

What is Mosaic?

Mosaic is OneAdvanced's design system: a series of design philosophies, resource libraries and UX/UI guidelines that have been built for the sole purpose of supporting software from its inception, all the way to implementation. Mosaic includes a plethora of tools, guidelines, advice and documentation that can be pieced together to create digital products that your users will love.

Who is Mosaic for?

Anyone designing and developing a web application! However, primarily for OneAdvanced products. The guidelines laid out are for use by any web based OneAdvanced web application, regardless of whether they specifically utilise the UI components on the Design System or not. The same theories and research apply, and can be utilised in product design decisions universally. The guidance around accessibility should especially be observed and you can reach out to the UX team for more support if needed on this front.

What versions of Mosaic exist?

There are two main "versions" of Mosaic in existence: the Mosaic Design System (MDS), and the previous incarnation known as "Mosaic UI" or "v3".

All products using Mosaic for the first time should look to use this site along with the components and patterns created with the latest styling, highest accessibility rating and greater flexibility with JS frameworks.

Products using "Mosaic UI" should look to upgrade over time, but a version of those components with the latest styling has been made available for use when this is not a pragmatic strategy. Please reach out to the UX/UI team for more information.

What's included in MDS?

MDS is made up of three distinct parts:

• Mosaic Design Kit (MDK) is a library created in Figma (our design software) full of components and patterns - MDK can be used by designers and product teams to create designs for features and pages in their application
• Storybook is a developer resource that is used to collate and manage the code-equivalent of designs in Figma, and the place where a development team will go to physically collect the code required to bring designs to life
• Mosaic.io is the website you're currently on! It contains all the guidelines and documentation surrounding the usage and considerations for various parts of Mosaic.

You can read more about MDK and Storybook on their respective pages on this site.

What is Tessera?

Tessera was a working project name for the new suite of components and has been superseded by the Design System. From this point, these should simply be called the "Mosaic Design System Components". The naming convention Tessera will no longer be used.

Where can I ask questions?

You can find us either by reaching out to any of the team or via the Contact page.

Can I contribute?

Absolutely! Contributing guidelines can be found in the Developing section of the site.