Marble Design System

About Marble

Marble is The Metropolitan Museum of Art's Digital Design System for creating screen-based products and experiences. This resource documents the design, code, and strategy that comprise this living and evolving framework. Use this guide as a starter kit for creating consistent, accessible, easy to use, and moving experiences—both inside and outside—the museum.

This site is a living document, maintained by The Met's in-house product development team in the Digital Department. Work on Marble began in 2019, and is currently under active development.

Structure and Taxonomy

Marble's taxonomy is structured into groupings of reusable pieces through an atomic design model: starting with the micro-sized elements such as Buttons and Colors, to the blocks that situate them such as Banners and Cards, which fit together to create the patterns and templates, which ultimately form the macro-sized experience of using a product that the museum offers. That is to say, each of the smaller pieces can combine together in this way to compose the larger ones, creating a unified and sustainable system.

Elements

Elements are the atoms of Marble: the smallest building blocks of experiences. These include the basic visual style-guidance of the system, such as the fonts, typography, and color pallets available. Additionally, elements include the fundamental controls of the user interface such as buttons, icons, and fields.

Modules

Modules are the molecules of Marble: modular, self-contained sections of the interface that are flexible enough to be used across products for a variety of needs. They can be combined together to provide the user with information, substance, and the next step on their journey.

Patterns

Patterns are the organisms built with Marble. Collections of contextualized Marble components that offer the user a more complete selection of available actions and allows editors to curate hierarchical collections of content. Together, multiple patterns can be stacked to create a varied suite of functionality and types of content.

Templates

Templates are readymade presets of pattern combinations that content editors can select to quickly build an experience, without needing to involve an entire product team. Templates are designed to accommodate common or predictable types of content and functionality while offering as much flexibility as is viably intended.

Experiences

Experiences are the largest part of the design system, encompassing the entire session of a person using a Marble product or service. These macro-level structures are built out of an ecology of many or all of the types of smaller parts, creating consistent, interconnected, and adaptive journeys.

Taxonomy Example:

The module Action Card is made of four elements: an Image, a Heading One, Body Type, and a Tertiary Button. To give the user more than one action choice, four Action Cards are situated together into a type of pattern called a Listing. This forms an important part of the Home template helping lead users into deeper parts of the experience.


Variations

In order to accommodate these general designs to specific needs and contexts, the different parts of Marble adapt in the following ways:

Variants

Variants are variations in components that can be set by designers and content editors to tailor the experience to specific cases. Having different component options allow for variety and more specificity to experiences while still maintaining consistency to the design system guidelines.

Modes

Modes are high-level alterations to the Design System's interface, such as darkmode or lightmode.

States

States are variations in elements and components that are triggered by user's actions or responsive to their current needs. All interactive elements in Marble should have states that visually communicate their meaning to the user, including hover states, focus states, selected states, active states, in addition to the default landing state.

Overrides

Overrides are situation-specific alterations to components set by the product development team, either for one-off tailored experiences or for A/B testing purposes.