Design system
Updated July 2021
Sections
Introduction
M21D isn’t your typical museum.
M21D helps people develop a greater understanding of 21st century design that positively impacts society and the environment. We do so by discovering, studying, and amplifying design that prioritizes community needs, nurtures humans and our surroundings, and reflects the cultures of the people that made it. These designs reside in our digital collections, along with research into their measurable social or environmental impacts.
M21D involves as many people as possible in its projects. Through programming, exhibitions, and a digital collection, we foster conversations that investigate design’s role in creating a better future.
Identity concept
At the core of M21D’s identity is the idea that we are a literal shift from museums of the past — an unconventional disruptor.
Logo
M21D has two logos: a static version and an animated version.
Static logo
When in doubt, this is the go-to version of your logo. For partnerships and collaborations, or any other case where you need to establish the M21D brand, this is the logo for you.
On color
The M21D logo should be primarily displayed as either black on white or white on black. When using the logo on a photographic background, the logo should be white as much as possible — keep this in mind when choosing the right imagery.
Black on white
White on black
White on photography
Animated logo
Whenever appropriate, this is the animated version of the logo. This would make the most sense in cases of prominent brand moments.
The animated logo is made up of different variations on a ‘shifted’ M21D mark. This could evolve to include different or additional variations, but should still have the same sense of timing.
Incorrect logo usage
The following ways of using the M21D logo should be avoided.
Don’t recreate the logo, especially with a different typeface.
Don’t use the logo without enough contrast in the background.
Don’t use artwork from the animated logo as a replacement for the static logo.
Don’t use the animated logo for small applications.
Don’t stretch the logo.
Don’t rotate the logo.
Typography
M21D uses two typefaces: Space Mono and Work Sans. Both are available through Google Fonts.
Space Mono
Space Mono is a fixed-width geometric typeface designed by Colophon Foundry. The letterforms were inspired by typefaces of the 1960s that have since been used in science fiction films, television, and literature.
We use Space Mono for headlines and titles.
Principles
Space Mono can be a tricky typeface to work with. Use these three basic considerations to guide when and how you use it.
Left-aligned
Whenever possible.
Line height
Line height = 150% of the text size
For example:
100pt type × 1.5 = 150pt leading
80pt type x 1.5 = 120pt leading
60pt type x 1.5 = 90pt leading
Note: the line height in Google Slides is inconsistent with how line heights are set in other programs. Stick with the Slides templates, and you'll be fine.
Tracking
Keep it at its default 0.
Incorrect usage
Here are some scenarios to avoid when using Space Mono.
Don’t use Space Mono for body text or captions.
Space Mono is meant to work best at large sizes. Avoid using Space Mono for long paragraphs or for text at small sizes.
Don’t use Space Mono bold whenever possible.
Don’t use a line height with Space Mono that is too tight or small.
Space Mono is designed to have larger-than-usual spaces in between words. Keep the line height more open to keep the text balanced and easier to read.
Work Sans
Work Sans is a typeface by Wei Huang, a type designer from Australia. It is optimized for on-screen text usage.
We use Work Sans for body text, especially at small sizes or long paragraphs.
Principles
Use these three basic considerations to guide when and how you use Work Sans.
Left-aligned
Whenever possible.
Line height
Line height = 150% of the text size
For example:
20pt type × 1.5 = 30pt leading
30pt type x 1.5 = 45pt leading
40pt type x 1.5 = 60pt leading
Note: the line height in Google Slides is inconsistent with how line heights are set in other programs. Stick with the Slides templates, and you'll be fine.
Tracking
Keep it at its default 0.
Incorrect usage
Here are some scenarios to avoid when using Work Sans.
Don’t use Work Sans as a default for headlines or titles.
Consider the need and context for using Work Sans as a title carefully.
Don’t use multiple weights of Work Sans inconsistently.
Stick with Work Sans Normal, Medium, or Bold.
Combining typefaces
When using both typefaces together, keep a consistent size relationship between Space Mono and Work Sans as much as possible.
For headlines (in Space Mono), set the type size as either 2X or 3X the type size for body text (in Work Sans).
Depending on the touchpoint, keep the type size for body text (in Work Sans) under 30pt.
Color
A flexible system that can expand.
Primary colors
The foundation of our color palette is black and white.
Black
HEX: #000000
RGB: 0, 0, 0
White
HEX: #FFFFFF
RGB: 255, 255, 255
Secondary colors
Think of secondary colors as accent colors to the brand’s foundation of black and white.
These are some starter colors to pull from. When creating new colors, look at bright, saturated colors.
#01
HEX: #FFE123
RGB: 255, 225, 35
#02
HEX: #00FFBA
RGB: 0, 255, 86
#03
HEX: #0084FF
RGB: 0, 132, 255
#04
HEX: #FF604B
RGB: 255, 96, 75
#05
HEX: #00FFFF
RGB: 0, 255, 255
#06
HEX: #FF64D7
RGB: 255, 100, 215
Tone of voice
Translating our purpose, vision, mission, and values into words.
Guiding principles
The guidelines that form the foundation of our tone of voice. These are the intentions that we want our readers to understand when they read anything that we write.
Purpose
Why do we exist?
To repurpose the infrastructure of museums to increase public understanding and appreciation of twenty-first century design that results in positive social and environmental impacts. By thoughtfully engaging a wide public, M21D demonstrates that a museum can be a location of engagement, conversation, and learning.
Mission
How do you create that future?
M21D seeks out, studies, and amplifies environmentally and socially responsible design, and involves a wide-range of individuals into this process through programming, exhibitions, and strong digital presence.
Vision
What future do you want to help create?
M21D helps design, designers, and users contribute to an equitable and ecologically-sound future.
Values
Who are you? How do you work?
We reflect these goals by re-conceiving how a museum functions and where a museum can meet its audiences. This informs our digital collection, how we select and welcome collaborators, and how we interact with our community.
We are always:
Positive
We’re hopeful! We truly believe that we can help to build a large community dedicated to making social and ecological change. We write in a fresh, energetic and vibrant way to communicate this positivity and encourage others to do the same. We remember Emma Goldman’s wisdom: “If I can't dance, I don't want to be part of your revolution.”
—
Do highlight positive advancements that M21D and others are making
—
Do use energetic verbs
Collaborative
We recognize that everyone has something to contribute to the conversations that we’re facilitating at M21D. Therefore, we’re approachable, inviting and humble. This creates a comfortable feeling for people to engage with M21D and the ideas we circulate.
—
Do write short sentences
—
Do use strong verbs
—
Do not use jargon, technical language, or obscure references
—
Do use as few words as possible, but don’t be afraid of using a lot of words arranged in short sentences to clearly explain a complex idea
Authentic
We’re not an institution speaking, and we’re not just another institution. We’re humans supporting other humans to inspire, create, use, and demand design that improves society and ecology.
—
Do write in a direct manner
—
Do use quirky vocabularies
—
Do not use buzzwords
—
Do not indulge in grandiose self-importance.
Well informed
What we know determines what is possible. We help audiences inside and outside of the design community learn more about design in order to imagine and normalize new possibilities.
—
Do link to rigorous research
—
Do include all reasonable sides of a debate
—
Do present ideas of experts
—
Do own our own mistakes
We are sometimes:
Academic
Because we write for our audiences, we incorporate the standards and traditions of the academy when we’re in an academic setting. However, we never embrace academia to such an extent that we’re no longer positive, collaborative, and authentic.
Irreverent
When the audience and situation afford it, we don’t shy away from irreverency. This allows us to surprise and delight our audiences from time to time. But we never sacrifice being positive, collaborative, authentic, or well informed to be irreverent.
We are never:
Critical, negative, reprimanding, elitist, inaccessible, hypocritical, ingenuous, self-aggrandizing, self-righteous, boring
Final-review checklist
Before you click Publish or Send, make sure you can clear this final-review checklist.
—
Is your writing positive, collaborative, authentic, and well informed?
—
Have you removed or rewritten all jargon, technical language, or obscure references that would confuse our audience?
—
Have you assumed the right amount of knowledge for your audience?
—
Are your sentences short and as clear as possible?
—
Does your writing sound inclusive? Does it show that you care?
—
Does your writing respect the readers’ time?
—
Does your writing adhere to the style guide?
Style guide
Helping us write clear and consistent content across the museum.
Overview
Please use this as a reference when you’re writing or editing anything official from M21D, which includes calls for employment, press releases, blog posts, social media posts, and slide decks.
This guide goes beyond basic grammar and style points. It’s divided by topic based on the types of content we publish, so that you can reference it as needed or browse in order. You can always search for what you need, as well.
If you’re searching for something specific in this guide and can’t find it, be aware that we almost always defer to the AP style rules in our writing. For spelling and usage, M21D uses U.S. English.
This guide grows with M21D. If you have questions or suggestions to improve or expand it, please email Kiersten Thamm (kiersten_thamm@m21d.org).
Guiding principle
With every piece of content we publish, we aim to educate, respect, guide, and empower.
Writing about people
We write in alignment with our museum’s people-first mission. Whether you’re writing for an internal or external audience, it’s important to write for and about other people in a way that’s compassionate, inclusive, and respectful. This section lays out some guidelines for writing about people with compassion, and shares some resources for further learning.
Age
Don’t reference a person’s age unless it’s relevant to what you’re writing. If it is relevant, include the person’s specific age, offset by commas:
The artist, 16, just got her driver’s license.
Don’t refer to people using age-related descriptors, such as “young,” “old,” or “elderly.”
Disability and medical conditions
Don’t refer to a person’s disability or medical condition unless it’s relevant to what you’re writing. If you need to mention a disability or medical condition, use the language preferred by the person you’re discussing. If you can’t find out what language that person prefers, use language that emphasizes the person first.
Don’t call a person with a disability or medical condition a “victim.”
Gender and sexuality
Avoid gendered terms in favor of neutral alternatives, like “businessperson” rather than “businessman.” Don’t use “same-sex marriage,” unless the distinction is relevant to what you’re writing. Most of the time, it’s just “marriage.” When writing about a person, use their communicated pronouns. When in doubt, just ask or use their name.
It’s okay to use “they” as a singular pronoun.
Punctuation
Ampersands
Don’t use ampersands unless one is part of a company or brand name:
Ben and Jerry love eating Ben & Jerry’s.
Apostrophes
The apostrophe’s most common use is making a word possessive. If the word already ends in an s and it’s singular, you also add an ‘s. If the word ends in an s and is plural, just add an apostrophe:
Chris’s design went on display.
The managers’ designs went on display.
Colons
If there is a colon in a sentence, specific capitalization rules must be observed.
—
Don’t capitalize the word after the colon if the colon introduces a dependent clause (such as a list).
—
Do capitalize the word after the colon if the colon introduces an independent clause
Commas
AP style dictates that serial commas (also known as the Oxford comma) are not to be used except in the case of disambiguation. M21D always uses the serial comma.
Dashes are important
Em dashes have a space before and after. They are used to offset a parenthetical clause or add emphasis to one part of a sentence.
En dashes do not have spaces before and after. They are used between a numeric range.
Hyphens connect compound modifiers when they precede the word they are modifying.
Ellipses
Please don’t use them, unless you place brackets around them ([...]) when indicating that you’re omitting words in a quote.
Periods
Periods go inside quotation marks. They go outside parentheses when the parenthetical is part of a larger sentence, and inside parentheses when the parenthetical stands alone.
Exclamation points
Use exclamation points sparingly, and never more than one at a time!
Semicolons
Go easy on semicolons. They usually support long, complicated sentences that could be simplified for our audiences.
General mechanics
Abbreviations and acronyms
If you’d like to use an acronym, spell out the entire title the first time you mention it. Use acronyms for every instance after.
Capitalization
When writing out email addresses or website URLS, use all lowercase.
Capitalize only the first letter of an abbreviation when the abbreviation is sounded out.
Capitalize every letter of an abbreviation with the letters in the abbreviation are spoken, such as AT&T and IBM.
Contractions
Contractions give your writing an informal, friendly tone. You’re welcome to use them.
Emoji
Avoid using emoji in your writing on the website. You’re welcome to use them in social posts and newsletters.
Numbers and statistics
For numbers greater than nine, use numerals. Anything under 10 needs to be written out.
Spell out the day of the week and abbreviate any month that isn’t already short:
Saturday, Jan. 24, 2021
Monday, April 1, 2045
Spell out fractions: “Two-thirds,” not “⅔:”
Percentages: “Percent,” not “%”
Pronouns
If your subject’s gender is unknown or irrelevant, use “they,” “them,” and “their” as a singular pronoun. Don’t use “one” as a pronoun.
Names and titles
The first time you mention a person in writing, refer to them by their first and last names. On all other mentions, refer to them by their first name.
Capitalize job titles when they come before a person’s name. When referencing a standalone title, never capitalize, no matter how important it seems. Titles after names are lowercase:
Pope Benedict XVI succeeded Pope John Paul II.
The pope blessed the masses on Christmas.
Head of Talent Acquisition Dorian Gray.
Writing about other institutions
Honor institution’s own names for themselves and their products: iPad, YouTube, Yahoo!.
Institutions and companies aren’t people. An institution’s pronoun is “it,” not “they.”
Text formatting
Use italics to indicate the title of books, movies, and albums.
Use quotation marks for special events, such as exhibits.
Names of annually recurring events are capitalized without quotes.
M21D-specific words
Museum name
List of acceptable ways of writing the name of our institution:
Museum of 21st Century Design
M21D
Museum of 21st Century Design (M21D)
Stichting Museum of 21st Century Design
(only in legal documentation)
Please do not use the following ways of writing the name of our institution:
The Museum of 21st Century Design
The Museum
M21d
Museum of Twenty-first Century Design
Words to avoid
Sustainable.
Try “ecologically sound” instead
Holistic.
Try “comprehensive” instead
Nomadic?
Re-frame and re-design.
Use “reframe” and “redesign” instead
Resources
Anti-bias language
https://apastyle.apa.org/style-grammar-guidelines/bias-free-language/general-principles
https://www.ibramxkendi.com/
Partnerships
Here are some guidelines on how to use the M21D logo in partnerships and collaborations.
Logo height
When pairing the M21D logo with other partner logos, look to match the height of each logo.
However! Logos come in all shapes and sizes. The key is to make sure the logos feel equal, and that one isn’t more important than the other.
For example, matching the height of the Museum Boijmans Van Beuningen's ‘B’ mark means their logo feels smaller compared to M21D’s logo. Instead, matching the height of the wordmark feels more balanced.
Here, matching the exact height of the WDCD’s yellow square logo means their logo feels too small. Matching the height of WDCD's wordmark feels more balanced.
Clear space
The amount of clear space around the M21D logo should be equal to or greater than the height of the “M” in M21D. This keeps the logo from getting crowded by images, text, or other logos.
Templates
Because who doesn’t love design templates?
Social Templates
For posts on Instagram and Twitter, these are three design templates to get you started.
These are formatted as square posts (1080 x 1080px).
#01: Image only
As much as possible, look for high-resolution images to use. If different aspect ratios are needed, keep a square 1:1 ratio in mind for thumbnails.
#02: Logo
This would work well for moments where M21D is showing up, such as news updates and partnership announcements.
#03: Quote
This would work well for moments of thought leadership from M21D, such as published articles or editorials, or interviews with artists and designers.
Press letterhead
For press communications, use this Google Doc template for an M21D-branded A4 letterhead.
Exhibition labels
For exhibition wall labels, including tombstones and extended labels, use these templates to get you started.
Currently in-progress!
Exhibition text panels
For exhibition text panels, use these templates to get you started. These files are sized at both 20 x 26 in. and 51 x 66 cm.
