Optics Styleguide

Creating an Optics style guide ensures consistent design across all Confluence pages, from blogs to knowledge articles. It reflects your company's brand identity and vision clearly.

The Optics Styleguide can be accessed by navigating to Apps in the Confluence navigation bar and selecting Optics Styleguide from the dropdown. This is the central place for managing your visual elements, templates, and branding assets.

Styleguide permissions

By default, Confluence admins have full access to manage the Optics Styleguide. Additional users or Confluence groups can be granted permission by following these steps:

Go to Confluence Administration
Open the Styleguide section under Settings section.
Under Permissions, add the users or Confluence groups you want to give permissions to.

This allows selected users to manage the image library, logos, and color settings, as well as create module templatessuch as cards, buttons, and panels that can be used by all Confluence users.

Setting up the Optics styleguide

The Styleguide setup defines the visual foundation used across all Optics modules. Follow these four steps to ensure a unified, branded experience in your Confluence environment:

Select primary and secondary colors for light mode. The first color sets your company’s primary brand color. Choose from predefined Atlassian palettes or add custom colors.
Define how the selected light mode colors translate into dark mode. This ensures visual consistency for users who prefer dark themes.
Choose the rounding style to apply across all modules, from sharp corners to fully rounded elements, giving your content a consistent feel.
Pick the primary button design that will be used throughout Optics. Since buttons are key call-to-action elements, this step ensures they align with your overall branding and design language.

If the Styleguide is not configured, Optics will automatically apply the Atlassian standard color palette and default rounding settings. This ensures a consistent appearance, but configuring the Styleguide is recommended for full brand alignment and a more personalized experience.

Colors

Colors defined in the Optics Styleguide are used throughout the macro settings to ensure a consistent and unified look across light and dark modes.

The color system is based on a two-color scheme:

Accent Color – used for key visual elements such as buttons, labels, and backgrounds.
Text Color – controls the text within these elements.

By default, the text color adapts automatically to the selected accent color for optimal contrast. However, it can also be manually adjusted when needed.

Images

A collection of images can be added to help define the visual style for Confluence pages. These images can be used for inspiration and applied in cards, and other places where images appear in Optics modules.

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.

Click the Add Image button.
Copy the image address (URL) of the hosted image. Only images available online with a direct link can be used.
Enter a title for the image.
Paste the image address into the provided field.
Click the Add button to save the image to the gallery.

Logos

Logos help maintain a consistent brand identity across Confluence pages. They can be used in cards for quick visual recognition, for example, adding a company logo to a card that links to internal tools, services, or external platforms. Logos are managed through the Optics Styleguide only and stored in a central library, making them easy to reuse across different modules.

Click the Add Logo button.
Copy the logo image address (URL). Logos must be hosted online and accessible via direct link.
Enter a title for the logo.
Paste the logo image address into the provided field.
Click the Add button to save the logo to the library.