Design System

1. Create a new database

• 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

• 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

• 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

• 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.

Color

• 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:

• Type /gallery and choose Gallery - Inline.

• Give it the name of the pallet it represents, such as "Primary Pallet."

• 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.

• Hover over your gallery and click ••• at the top right.

• Click Properties.

• For Card Preview, choose Page Cover.

• 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

• 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.

• 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

• 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

• 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

• 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

Display a Gallery

• 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.

• Hover over your gallery and click ••• at the top right.

• Click Properties.

• For Card Preview, choose Page Cover.

Create a status board

• 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.

• Click Group by [Property] at the top of your board.

• Choose another property to group by.

Form a simple list

• 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.

• 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.

• 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).