Optics Style Guide
- Marin Varvodic
The Optics Style Guide helps keep a consistent look and feel across all Confluence pages, blogs, and knowledge articles, while reflecting your company’s brand and identity.
The Optics Style Guide can be accessed by navigating to Apps in the Confluence navigation and selecting Optics Style Guide from the dropdown. This is the central place for managing your visual elements, and branding assets.
Style Guide permissions
By default, Confluence admins have full access to manage the Optics Style Guide. Additional users or Confluence groups can be granted permission by following these steps:
Go to Confluence Administration
Open the Style Guide section under Settings section.
Under Permissions, add the users or Confluence groups you want to give permissions to.
This permission allows users to edit the image library, colors, and logos used across the site. It also gives access to create and save module designs like cards, buttons, and panels in the shared library for others to use.
Setting up the Optics Style Guide
If the Style Guide is not configured, Atlassian colors and default rounding will be applied automatically. This ensures a consistent look, but setting up the Style Guide is recommended for full brand alignment.
When the Style Guide screen is opened for the first time, a dialog will appear with 4 steps to complete the configuration. It can be skipped and done later, but until then, the Style Guide will remain undefined.
Set the primary, secondary, and additional brand colors using Atlassian palettes or custom values. Select an accent color with a corresponding text color to ensure readability and visual consistency.
Define how light mode colors translate into dark mode to maintain visual consistency for users who prefer dark themes.
Apply a consistent rounding style, from sharp edges to fully rounded corners, across all modules for a unified visual appearance.
Choose a button style that aligns with your brand. Since buttons are key call-to-action elements, this ensures consistency throughout the Optics experience.
Once everything is set up, you can continue by adding logos and images that will be used across Optics modules. Read more below .
Colors
Colors defined in the Optics Style Guide are used throughout the module 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: Defines the main visual style and is applied to key elements like buttons, labels, and backgrounds.
Text color: Sets the color of the text that appears on elements using the selected accent color, ensuring readability and contrast.
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 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
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 Style Guide 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.