Mirror

Appearance

Typography ​

Mirror’s typographic system is tokenized and includes various semantic tokens for font-family, font-size, font-weight, line-height, text-transform and letter-spacing. For added convenience, Mirror group these tokens and exposes them as Tailwind CSS utility classes.

For a detailed explanation of Mirror’s typographic system, please refer to the principles.

Surface Typography ​

Mirror surface typography utilities come in various sizes ranging from sm to xl. Some styles come in a single size only.

Display ​

Display utility classes exist in four sizes.

as a Service™as a Service™as a Service™as a Service™
vue

For added impact, -strong can be used.

as a Service™as a Service™as a Service™as a Service™
vue

Title ​

Title utility classes exist in four sizes. They can be used standalone or mixed to convey different hierarchical levels.

Mirror Mirror on the WallMirror Mirror on the WallMirror Mirror on the WallMirror Mirror on the Wall
vue

For added impact, -strong can be used.

Mirror Mirror on the WallMirror Mirror on the WallMirror Mirror on the WallMirror Mirror on the Wall
vue

Subtitle ​

Subtitle utility classes exist in four sizes. Each size is intended to be used in combination with its equal title size.

Why we Decided to Build a Design SystemWhy we Decided to Build a Design SystemWhy we Decided to Build a Design SystemWhy we Decided to Build a Design System
vue

For added impact, -strong can be used.

Why we Decided to Build a Design SystemWhy we Decided to Build a Design SystemWhy we Decided to Build a Design SystemWhy we Decided to Build a Design System
vue

Callout ​

Callout utility classes exist in four sizes. Each size is intended to be used in combination with its equal title and subtitle size.

Sufficiently Advanced TechnologySufficiently Advanced TechnologySufficiently Advanced TechnologySufficiently Advanced Technology
vue

For added impact, -strong can be used.

Sufficiently Advanced TechnologySufficiently Advanced TechnologySufficiently Advanced TechnologySufficiently Advanced Technology
vue

Body ​

Body utility classes exist in two sizes and for two different text widths.

Mirror is an enterprise design system for brands to create unique and authentic interfaces at scale. Combining design and engineering into one system that turns creative vision into production-ready code, faster and smarter. Mirror removes complexity, handovers or delays.Mirror is an enterprise design system for brands to create unique and authentic interfaces at scale. Combining design and engineering into one system that turns creative vision into production-ready code, faster and smarter. Mirror removes complexity, handovers or delays.
vue

For smaller width text -short should be added to allow for a slightly condensed line height.

Mirror is an enterprise design system for brands to create unique and authentic interfaces at scale. Combining design and engineering into one system that turns creative vision into production-ready code, faster and smarter. Mirror removes complexity, handovers or delays.Mirror is an enterprise design system for brands to create unique and authentic interfaces at scale. Combining design and engineering into one system that turns creative vision into production-ready code, faster and smarter. Mirror removes complexity, handovers or delays.
vue

For added impact, -strong can be used. It can also be used in combination with -short.

Mirror is an enterprise design system for brands to create unique and authentic interfaces at scale. Combining design and engineering into one system that turns creative vision into production-ready code, faster and smarter. Mirror removes complexity, handovers or delays.Mirror is an enterprise design system for brands to create unique and authentic interfaces at scale. Combining design and engineering into one system that turns creative vision into production-ready code, faster and smarter. Mirror removes complexity, handovers or delays.Mirror is an enterprise design system for brands to create unique and authentic interfaces at scale. Combining design and engineering into one system that turns creative vision into production-ready code, faster and smarter. Mirror removes complexity, handovers or delays.Mirror is an enterprise design system for brands to create unique and authentic interfaces at scale. Combining design and engineering into one system that turns creative vision into production-ready code, faster and smarter. Mirror removes complexity, handovers or delays.
vue

Caption ​

The caption utility class exists in a single size.

Mirror Ui is a holistic framework that enables design and engineering teams to ship robust products faster.
vue

Footnote ​

The footnote utility class exists in a single size.

© 2025 Magic as a Service™
vue

Code ​

The code utility class exists in a single size. In most cases it should be used in combination with syntax highlighting.

© 2025 Magic as a Service™
vue

Component Typography ​

Component typography utility classes exist in nine different sizes. The sizes can be used in combination with each other.

MirrorMirrorMirrorMirrorMirrorMirrorMirrorMirrorMirror
vue

© 2025 Magic as a Service™