How to Use Style Guide

Accessing Style Guide

Inside your Design System under the Stackable settings, you’ll now find a Preview Design System option. Selecting it opens an interactive popup preview that displays how your global colors, text styles, buttons, images, and spacing will appear in your site.

Whenever you make changes to your Design System, the preview instantly reflects those adjustments. This gives you immediate visual feedback on how your changes affect your blocks and overall site design.

In the Example Website Preview section under the Design System Style Guide, you can specifically observe updates to global spacing and border settings.

At the top of the preview, you’ll find an Export as Image button. With one click, you can download the entire Style Guide as a PNG image to share with clients or team members.