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)

Smart block filter search 

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



Personal Note: Add a personal note to comment, suggest, and remark on Style Guide elements


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


Use own fonts

Adobe fonts

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

Font Kit: Download fonts as a compact zip file



Image Grid

Annotations: Describe your visuals by adding captions and notes

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


Icon Library

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

UI & Code

UI Pattern: Define and share user interface design patterns

Snippet: Document and share your code snippets

Attributes: Enrich code attributes with additional descriptions

Iframe: Embed external pages or prototypes by entering their URL

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

Do & Don't



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?