Skip Navigation
NotificationsIcon React Magma

Design Guidelines

Getting Started

If you're new to designing with React Magma, then this is the right place to start. You'll find below everything you need to get going.

Designing with React Magma

The React Magma team strives to provide detailed usage and style documentation. It's important to become familiar with this guidance when you are designing with our components. Consider starting with the foundations of color, typography, spacing, and icons, and then continue with the components.

We also welcome contributions from people outside the React Magma team. This includes both designers within Cengage as well as outside. Join us over on our Github page to start contributing today.

Resources & Tools


Sketch is the primary application we use for designing products within Cengage. We maintain a comprehensive set of React Magma Sketch libraries you can download containing type styles, icons, and components. If you are a designer at Cengage, and you are a current Abstract user, then you'll find the libraries there instead.

To use the Sketch libraries you need the most recent version of Sketch installed.


We use Abstract to store all of our design files. Abstract provides version control and collaboration tools. Visit Abstract Website


We use InVision to share our designs with stakeholders and create interactive prototypes. Visit InVision Website

Guiding Principles

Cengage exists to empower students and instructors with the audacity to realize their potential and the tenacity to achieve their goals. React Magma helps us build tools that are relevant and easy to use, and create educational experiences that accelerate learning while putting our users at the center of everything we do. The following design principles guide every decision we make.

Anticipate Needs

Don't overburden me with options or choice. Proactively assume what I need and when, while equipping me with the ability to change it.

“I hate going through each student or each activity and changing things when I'm changing the same thing ... on 10, 20 or 30 of them. It is so time consuming.”

– MindTap Instructor

Tolerate Mistakes

Mistakes are proof that I’m trying, but they should never impede my education experience. Preventing and helping me recover from a mistake should be as easy as it was to make it.

“...I feel like I am not learning with this software because I have no way of knowing where I made my mistakes.”

– SAM Student

Inspire Confidence

Build confidence at every opportunity. Confidence that I can improve my understanding, confidence that the paragraph I just wrote won’t get lost and confidence that I won’t get lost.

“I’m calling in because all of my material on my account is gone.”

– MindTap Instructor

Cultivate Focus

Distractions are plentiful and my undivided attention is scarce. Any interference must be purposefully crafted to never override my education experience.

“... You also put up an online pop-up advertisement that would not go away for a solid week and prevented me from being able to complete the homework for that week at a reasonable pace.”

– WebAssign Student

Preserve Simplicity

Be intentionally simple. Making common tasks fast, and easy for me to understand without explanation allows me to concentrate on my education experience.

“The organization was complicated and it was difficult to find assignments that were due...”

– MindTap Student

Encourage Mobility

I am not constrained by device or location and I expect the same of my education experience. Mobile empowers me to succeed, regardless of location, device or time.

“I shouldn't have to use my computer to take my tests or do my homework when I have a perfectly capable mobile device. I take online courses so that I can do my homework anywhere anytime.”

– CNOW Student
Deploys by Netlify