Typography

Mirror’s typographic system is composed of surface typography and component typography, with each category serving a specific purpose.

Surface Typography

Surface Typography encompasses text styles for both Structural Text and Prose Text, intended for static content within a document.

Structural Text

Structural Text refers to text which structures a document. The included styles — Display, Title, Subtitle, and Callout offer a comprehensive framework for organising and emphasising content effectively.

Display

Display text is usually the largest text within a document. It should be used sparringly for short and important text only. Appropriate use cases include scroll-animated text, section headlines and the likes.

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

Title

Titles are intended as the primary tool to structure content. The various sizes can be used to visualize the content’s hierarchy.

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

Subtitle

Subtitles are intended as the secondary tool to structure content. They can be used in combination with a title for added context.

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

Callout

Callouts are intended as an alternative to subtitles or as the tertiary tool to structure content, when used in combination with titles and subtitles.

Sufficiently Advanced TechnologySufficiently Advanced TechnologySufficiently Advanced TechnologySufficiently Advanced Technology

Prose Text

Prose Text is text that contains a document’s main information. The included styles – Body, Caption, Footnote, and Code offer a comprehensive framework to convey content accordingly.

Body

Body text is the primary tool to display structured long-form text in a document.

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.

Caption

Captions are intended to provide information about various other elements in a document, such as images and videos.

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

Footnote

Footnotes are intended for miscelleanous small print.

© 2025 Magic as a Service™

Code

Code is intended for technical content. In most cases it should be used in combination with syntax highlighting.

© 2025 Magic as a Service™

Component Typography

The included text styles are intended for interactive elements, e.g. elements a user might interact with by touch, keyboard or mouse input.

Sizing

Mirror comes with a sizing scale based on t-shirt sizes for component typography. The scale ranges from 3xs to 3xl and is incremented by 0.0625rem which equals 1px for each step. The various sizes can be used standalone or in combination with each other.

MirrorMirrorMirrorMirrorMirrorMirrorMirrorMirrorMirror

TIP

When designing one-off components the lg size is usually a good starting point. Mirror’s button, input, and select among others are built around this size.

Utilities

For added convenience, Mirror provides various Tailwind CSS utility classes, that group font-family, font-size, font-weight, line-height, text-transform and letter-spacing tokens.

Detailed information about these utilities, available for both surface and component typography, can be found here.