Styleguide

Owned by Caelor Marketplace Support
Last updated: Oct 30, 2023 by Marin Varvodic
4 min read

The most important purpose of a corporate style guide is to ensure UI consistency across Confluence pages created by your organization – from blogs to knowledge base articles. Establishing a MacroSuite style guide will help you present a company vision and brand identity.

Confluence administrations have default permissions to manage the MacroSuite style guide. They can also define permissions to manage the MacroSuite style guide in the MacroSuite app configuration. Settings → Styleguide → Permissions.

Access MacroSuite Styleguide through Apps > MacroSuite Styleguide.

Foundations

Foundations are crucial in transforming your layout from a mere concept into a vibrant and captivating visual masterpiece. These visual elements serve as the building blocks, bringing life into your design and setting the stage for a memorable user experience.

Colors

Selecting color palettes that align with your brand and maintain consistency throughout your Confluence design is crucial for effectively conveying your brand's identity, creating a visually appealing user experience, and accurately representing your organization.

 Four main types of color palettes for MacroSuite:

  • UI Elements → Fill, Hover, Border, Icon, and Line for all UI elements in the MacroSuite app.

  • Text → Font color for all macros where users can change it.

  • Text - Highlights → Only for highlight feature in Title and Text macro.

  • Background → Only for the Designer background feature.

It's possible to save up to twelve colours per palette.

Apps

To enhance user experience and provide efficient access to frequently used tools and applications, incorporating logos as visual shortcuts can be an effective solution. These logos act as intuitive visual cues, allowing users to quickly locate and access their desired tools or apps with a glance.

  1. Pick your desired company or app logo.

  2. Copy the image address of the logo.

  3. Click on the Plus button.

  4. Add a title for your logo.

  5. Paste the image address.

  6. Click Add.

And that’s it. You can now use your custom logos throughout MacroSuite (don’t forget about Cosmos App Links, too ).

Images

To define the visual design style for Confluence pages, you can create a captivating gallery of images as a reference and inspiration for the desired aesthetic.

It is possible to save up to 20 images. Allowed image formats are JPG, JPEG and PNG. There is no limit for the image size, but we recommend to keep it under 1MB.

  1. Pick your desired image.

  2. Copy the image address of the image.

  3. Click on the Plus button.

  4. Add a title for your image.

  5. Paste the image address.

  6. Click Add.

Macros library

Macros play a crucial role in enhancing the visual elements of various designs and ensuring captivating and comprehensive user experiences across your Confluence pages. By leveraging macros effectively, you can create visually appealing and user-friendly interfaces that captivate and engage users.

Buttons

With the Button library, users can create and manage company-styled buttons. Only Confluence administrators and users with special permissions can perform that action.

Cards

The Cards library is a powerful tool for storing and creating visually appealing and interactive cards within your Confluence pages. Elevate your page design, improve information accessibility, and captivate your audience with the versatile Cards library.