How to add Smart Blocks?

  1. Open your Style Guide 

  2. Activate the Edit Mode & Click on the + button 

  3. Add a Smart Block (e.g. like Color Swatches)

The intelligent filter system of the smart block adder allows you to search through it using keywords such as ‘Text’ for a text block or words related to the kind of block you want to add. 

Smooth Navigation

You can navigate through the different search results with your keyboard and easily select the one you need in your Style guide by pressing Enter.

Different Types of Smart Blocks

Find below all the different smart blocks you can use to document your brand. Note that the more complex ones are explained in a dedicated help article. Click on the respective link to learn more about them.

Most used Blocks

These are the type of block which are most commonly used by users.


These blocks are the type that adds any type of formatting to a text.

  • The Table block: allows you to organize your text or data.

  • Personal Note: this block helps you to add a comment, suggestions, or any remark on the Style Guide.


  • Color Scale: Prioritize your colors in the context to each other, set accents, and create contrasts.

  • Color Swatch: Download all your colors in ASE, LESS, and SCSS format.


  • Typo Styles: Define the combined usage of text and background colors, fonts, font sizes, and line heights

  • Font Kit: Let's you download fonts in your Style Guide as a compact zip file.


  • Image Block: Add images to your Style Guide by either uploading them or picking them from your libraries using the Asset Chooser.

  • Image Grid Block: Allows you to add several images in a space.

  • Icon Webfont Block: Allows you to add icons from an outside source.

  • Annotations Block: Describe your visuals by adding captions and notes

  • Media Block: Embed media from sites like Youtube, Twitter, and Flickr.

  • Audio Block: Include Audio files in your Style Guide.

  • Icon Library Block: Add icon libraries with its collections directly into the Style Guide.

  • Template Block: Add a template from the Template Library to enable users to create their own publications

UI & Code

  • UI Pattern Block: Define and share user interface design patterns

  • Snippet Block: Document and share your code snippets

  • Attributes Block: Enrich code attributes with additional descriptions

  • Iframe Block: Embed external pages or prototypes by entering their URL

  • Developer Kit Block: Download patterns, fonts, icons, and colors with one click

  • Do & Don't Block: Let your users know what is wanted or not by placing two separate columns of what is required or not.

  • Storybook Block: StoryBook patterns can be easily viewed using this block.


The Sharing blocks are those that have been mentioned in different sections before and are usually used when sharing some kind of file or assets within the Style Guide.

In case you have questions left on how to use the different blocks, please don't hesitate to contact us. We're happy to help.

Happy documenting!

Did this answer your question?