Design System

Brian Park
Oct 6 '17 · 9 min read · 455 views
A design system ensures your brand is presented consistently (and beautifully) to your audiences. Notion's versatility makes it a powerful place to define your system and share assets with designers inside and outside your company.
Let's build a spectacular design system.
In this guide, you will:

1. Create a new database

Your design system will be a Notion database, where the entries are the core pillars of your system, such as Typography and Logos.
  • Add a new page to your workspace. Select Table from the grayscale menu.
  • Name your database. Hover over the title to add an icon if you'd like.

2. Configure properties

Add properties that will help you manage the pillars of your design system and keep them current. Our example includes these properties:
  • Pillar (Title)
  • Created (Created Time)
  • Last Updated (Last Edited Time)
  • Owner(s) (Person)
  • Status (Select)

Add or edit properties

  • Click Properties at the top of your table.
  • Click the name of an existing property to edit it or + Add a property to create a new one.
  • Name your property.
  • Under Property Type, select the type of information you want it to contain.
  • Repeat for each property.

Define property values as you go

  • For Select and Multi-Select properties, such as Status in our design system, you'll create dropdown options as you add new pillars. Simply type the value and hit enter. If you'd like, choose a color that corresponds with each option's meaning, like green for Current.
  • For Person properties, you can choose among the members of your workspace. They'll be notified each time you include them.
  • Created Time and Last Edited Time are generated automatically.

3. Build the pillars of your design system

Create a new pillar

The contents of your pillars will vary, but you'll create them all the same way:
  • Hover your cursor over the Title property of a blank row and click OPEN, or create a new entry with the New button at the top right of your database.
  • Title your pillar.
  • Fill in the properties without automatic values.
  • Add a page cover: Hover your cursor over the title and click Add Cover. The cover will be the card preview in your gallery view.

Compose the pillar content

Typography

Showcase your brand fonts and provide files, embed codes and licensing information. For each of your font families:
  • Add the name as a Heading 1 by typing /h1.
  • Add an image showcasing the font family: paste it, drag it from your computer, or type /image.
  • Add "Downloads" as a Heading 2 by typing /h2.
  • Drag the font files from your computer's folder or type /file to pick them.
  • Add "Web Embed" as a Heading 2 by typing /h2.
  • Type a brief instruction for using the embed code.
  • Add a code block by typing /code. At the bottom, choose HTML as the language.
  • Paste your embed code within the block.
  • Display the full code by wrapping it within the block: hover your cursor over the code block and click ••• at the top right. Toggle on Wrap Code.
You may also want to include licensing information below a "License" heading (/h1).

Color

A Notion gallery offers a perfect format for displaying your color pallets with useful information for each color. Follow the below steps for each of your pallets.
Prepare your images
  • To display your colors beautifully within the gallery, you'll need to save each color as an image. Use Color Saver or your preferred design tool. Dimensions are unimportant; ours are 500 x 300 pixels. Here's an example:
Create a new gallery
  • Type /gallery and choose Gallery - Inline.
  • Give it the name of the pallet it represents, such as "Primary Pallet."
Configure properties
For each color, you'll want to include identification specifications. Our example uses Hex, RGB and SASS Variable. For each spec you'd like to include, create a Text property:
  • Hover over your gallery and click ••• at the top right.
  • Click Properties.
  • Click an existing property to rename it and change its type. To create a new property, click + Add a property.
  • Toggle on the properties you'd like visible on the gallery card.
Configure card previews
  • Hover over your gallery and click ••• at the top right.
  • Click Properties.
  • For Card Preview, choose Page Cover.
Add colors
  • Open the page for your new color: click one of the placeholders or choose + New.
  • Give it a name.
  • Set the image file as the cover:
    • Hover your cursor over the title and click Add Cover.
    • Hover above the cover and choose Change Cover.
    • Select the Upload tab, then Choose a File. Browse to your color image.
  • Fill in the properties.

Logos

Specify when to use your logo variations and provide various formats for download.
  • Type /h1 to create a Heading 1 for each logo category, such as "Primary Mark," "Secondary Marks" and "Social Branding." For each, briefly explain when the variations are used.
Within each category:
  • Add the image for each variation by typing /image. Use drag and drop to arrange them in columns.
  • Label the variations with a caption: hover your cursor over the image, click ••• and choose Caption.
  • Include the various file types for downloading, such as PNG and SVG: for each, type /file and select the file.

Tone & Voice

Personify your brand to enliven company culture and ensure a consistent voice. In this section, you can also specify visual and grammatical guidelines for written communication.
  • Briefly overview the overarching approach to your brand's communication. Consider a paragraph like this:
    At Acme Corp, we always speak in a way that reflects our brand and values. The words we choose always put our users first, helping them better understand, navigate, and find value in our products.
  • Type /table of contents to add a clickable snapshot of the content.
  • Compose your content with headings, text and bullet lists. Use Heading 1 (type /h1) to designate sections and Heading 2 and Heading 3 (/h2 and /h3) for sub-sections. You might include an emoji with each Heading 1 to help differentiate sections. The template includes these core sections: Guiding Principles, UI Guidelines, and Grammar.

Icons

Direct your team to your brand's icon files and provide guidelines for using them.
Follow the below steps for each group of icons. The template contains one sample group: "Material Design Icons."
  • Add a Heading 1 by typing /h1.
  • Add a preview image of the icon collection by typing /image.
  • Type a brief description, then link to the icons with a web bookmark: paste the URL and choose Create Bookmark.
  • Type /h2 to add a Guidelines section header.
  • List your guidelines as bullets, adding images as you'd like. Type /bullet to create a list.

Accessibility

Provide guidelines to ensure your designs are comprehensible by all users.
  • Offer a brief introduction about the importance of accessibility to your brand. Consider a paragraph like this:
    Accessibility should be included in the scope of everything we create at Acme Corp. These guidelines outline our minimum requirements.
  • Type /table of contents to add a clickable snapshot of the content.
  • Compose your accessibility guidelines with headings (type /h1) and bullet lists (/bullet). The template includes these sections: "Color," "Forms," "Multimedia" and "Document Structure."

4. Customize views

Notion allows you to view the same data many different ways — however is most useful. In addition to the default table, you can see your entries in galleries, lists, boards and more. Views also allow you to filter and sort your items.
The gallery format is particularly suitable for your design system.
As your team produces the system, it's also helpful to organize your pillars by status using other views.

Display a Gallery

Create a gallery view
  • Click + Add a View at the top left of your database.
  • Type a name for your view. Because the gallery will be our standard view, we give it the overarching name "Design System."
  • Select Gallery as your database format, then click Create.
Configure card previews
  • Hover over your gallery and click ••• at the top right.
  • Click Properties.
  • For Card Preview, choose Page Cover.

Create a status board

In Notion, boards allow you to group entries by a specified property. Groups are displayed in columns. Items can be dragged easily from one group to another.
Create a board view
  • Click the views dropdown at the top left of your database.
  • Choose + Add a View.
  • Type a name for your view that indicates how you'll group your entries. Our example groups by Status, so we name it "By Status."
  • Select Board as your database format, then click Create.
Define your groupings
Your board will be automatically grouped by a property. In our case, it's already Status. To choose an alternative grouping property:
  • Click Group by [Property] at the top of your board.
  • Choose another property to group by.
👉
Tip: Your board will include a column for items without the grouping property. To hide that column, click ••• and choose Hide.

Form a simple list

Lists offer a simple representation of your design system pillars for a quick snapshot of their status.
Create a list view
  • Click the views dropdown at the top left of your database.
  • Choose + Add a View.
  • Type a name for your list. Simply "List View" works.
  • Choose List and click Create.
Hide and display properties
  • Click Properties at the top of your list.
  • Toggle on and off the properties you'd like to display and hide. For our design system, we want a quick snapshot of status, so we display the Status property and hide Owner(s). You can also drag the visible properties to modify their position.
Sort your pillars
For the most digestible snapshot, you'll likely want to order your pillars by their status.
  • Click Sort at the top of your list, then + Add a Sort.
  • Choose the Status property and Ascending order.

5. Share your design system

  • To make your design system accessible to all members of your workspace, click Share at the top right of the page and toggle on Workspace Access.
  • If you prefer to limit access to particular team members, click Share at the top right of the page, then Invite a Person. Add collaborators using their email addresses. Choose an access level for each of them (i.e. read-only, comment-only).
👉
Note: Invitees without an existing Notion account will receive an email with a link to create one. Learn more about sharing →
Something we didn't cover? Message us in the app by clicking ? at the bottom right on desktop (or in your sidebar on mobile). Or email us at team@makenotion.com ✌️
Updating...

Share on