Start designing experiences with Matchbox
Welcome to the Matchbox Design System! If you’re unfamiliar with Matchbox, take a few minutes to understand what Matchbox is, how it’s used, how to set it up.
Matchbox is the design system created by SparkPost. A design system is a collection of reusable components, digital assets, guidelines, patterns, and philosophies that follow clearly defined standards to manage design at scale.
Designers can quickly start creating SparkPost experiences by combining Matchbox principles with its User Interface (UI) Kit, built in Figma. A UI Kit is a comprehensive set of ready-to-use UI components and styles within a design tool (e.g. Figma). They benefit teams by speeding up the design process and helping to enforce consistency, irrespective of the designer.
To use the Matchbox UI Kit, you must first be invited to Figma as a team editor of the SparkPost account. The limited team editor seats are only available for designers and those given special permission. To request a team editor seat, send a message to the #team-ux SparkPost Slack channel. Once you’ve joined Figma, create a new file, locate the “Assets” tab, and drag components onto the canvas to start building.
The Foundations section is the resource for design principles such as accessibility, color, typography, design tokens (units of the Matchbox Design System), and more.
Housed under Components is the complete library of Matchbox components, or interface elements, reused through the design system. Each component page includes its respective code and live previews, pattern documentation, and styling.
Content (or writing) best practices and guides are integral to design and communication. Matchbox provides both voice and tone, as well as inclusive language principles.
Patterns contain the global, reusable solutions to common design scenarios. Though each component may have its own respective patterns, larger scale patterns combine various components and ensure experiential consistency.
The tools and standards that reflect how our users perceive SparkPost are found in Brand Resources. When used together, they convey a clear and cohesive representation of the organization.
Updates is the compilation of Matchbox package release history. Version number, release date, and additional notes, as well as relevant resources, are provided for each update.
Need clarification about an area of the Matchbox Design System? Whether you have a question or request regarding components, the UI kit, foundations, etc., feel free to reach out on Slack: #team-ux.