Contents x
    Foundations overview
    • 01 Feb 2023
    • 2 Minutes to read
    • Dark
      Light
    Contents

    Foundations overview

    • Updated on 01 Feb 2023
    • 2 Minutes to read
    • Dark
      Light
    Article Summary

    An overview of the Foundations section

    Your Foundations are the most basic elements of your design system organized into categories: Colors, Typography, and Icons. Within each category are pages. Create pages to write up your design system documentation. You can also create free form documentation categories at any time by selecting Add Category.

    Tip: When you create your design system, default categories populate with descriptions to serve as examples for you to get started. You can change the name of categories and pages or delete them by hovering and selecting the 3 dots. Or you can move categories and pages selecting the parallel lines and dragging the item to a new location.

    Foundations section

    🖊 Documentation

    You can add a category solely for documentation to introduce your design system. Some examples of foundation documentation include:

    • Design principles
    • Voice and tone
    • Guidelines on access and usage with integrated tools

    Your design system documentation is a way to state up front what your design is all about as well as provide helpful guidelines on usage and procedure.

    You can use the “Get Started” category as a guide to start creating your own pages for your design purpose and principles or how to access your design system in Sketch for your end users.

    🎨 Colors

    Colors are derived from Sketch color variables and layer styles, so it’s important that any colors you want to add to your design system are saved as layer styles.

    You can add additional color categories when you add new categories, so don’t feel limited by default categories you see.

    Once you add your colors, you can and should add documentation for how and when to use or not use them.

    Tip: The folder structure you see in the modal window comes from the slash naming structure used in Sketch. On your documentation site, you can choose to follow a similar structure or something different, but that slash naming structure will remain the same when building with the managed library in Sketch.

    🔠 Typography

    The typography available in a managed library comes from text styles defined in a Sketch file. Once you add your typography, you can and should add documentation for how and when to use or not use them.

    Tip: Adding pages to this category or create additional subcategories of typography that you want to include in your design system. For example, you can separate out: mobile from desktop or headings from paragraph text.

    💁 Icons

    The Icons category of your DSM documentation site can contain any symbols that you reference on a regular basis, such as system icons, logos, and illustrations. Once you add your icons, you can and should add documentation for how and when to use or not use them.

    Viewers of your DSM site are able to download these items as SVGs.

    Warning: Before adding icons to your documentation site, you must save the icons as symbols and mark the symbol sources for SVG export in Sketch.
    Was this article helpful?
    What's Next