Introduction

An Interface Design System, Reflecting True Identity

Mirror is our enterprise design system, designed and built to create unique and authentic interfaces at scale. At its core sits an expansive set of design tokens, allowing Mirror to be highly customizable and adaptable for a variety of use cases.

Vision

At Magic as a Service™ we tend to work on many different things at the same time, such as internal tools, open source libraries, service offerings and websites for internationally recognized brands, creative studios and start ups.

To continously deliver quality software at speed, it became apparent that we needed to invest time into creating a design system that would fulfil the complex needs arising from these various projects.

We needed a system that looks great, feels refined, is fully accessible for our users, easy to use in both the design as well as the development process, and highly adaptable for the various brands we come in contact with.

Architecture

At Mirror’s core sits an expansive set of design tokens, conceptually split into four layers.

• Config
• Application
• Component
• Theme

The tokens follow the DTCG Design Token Spec, which “aims to facilitate better interoperability between tools and thus lower the work design system teams need to do to integrate them by defining a standard file format for expressing design token data.”

Internally the tokens are consumed by a component library built with Vue and CSS.

Through our @maas/mirror CLI, tokens can be transformed and exposed as CSS variables, fully typed JS variables as well as Tailwind CSS utility classes.