Basic Functionality

  • Management of design projects through structured workspaces and style guides, feedback functionalities, versioning, approvals, project status, user permissions, and more.
  • Creation of code-based, responsive design components.
  • Support for HTML, CSS, and JavaScript.
  • Organization of components through drag-and-drop menus, tags, favorites, sorting, searching, and more.
  • This allows you to create code-based design systems and manage your digital assets.

Backend Functions

  • Modular nesting of components with up to six hierarchy levels: styles, atoms, molecules, organisms, segments, and page templates.
  • Most CSS/HTML attributes are implemented without code input using «Drag & Drop» menus and autosuggests.
  • All inputs can be specified in different units of measurement (px, rem, em, %).
  • Digital asset management: Upload and manage custom fonts, images, and individual code libraries.
  • Integration of all Google Fonts (with preview functionality).
  • Definition of breakpoints for CSS media queries.
  • Responsive WYSIWYG preview of components.
  • Choose between a «mobile first» or «desktop first» approach.

Features of Styleguides

  • Code Pattern Library: Provision of code for each component in HTML, CSS, and if applicable, JavaScript.
  • Export/Download of the entire Styleguide that can also be used offline
  • The Styleguides display all elements responsively. You can control the viewport size through the navigation
  • Inclusion of annotations, labels, and explanatory texts
  • Autosuggest search to find the right component
  • Custom homepage, individual layer and category labels
  • Optional password protection and design customization of the Styleguide
  • Display of all assets and elements with additional information such as integrated elements, file size, dimensions, last edit, and more
  • Page templates can be opened and evaluated in separate windows
  • Comments can be added to each component, allowing for feedback discussions on every design element