Caelor Style Guide
The Style Guide is a central place for defining the visual identity in Optics . It ensures a consistent look and feel by allowing admins to control colors, rounding, logos, images, and component styling from a single location.
Instead of configuring styles in multiple places, the Style Guide acts as a shared system that automatically applies changes across both products. This improves consistency, reduces manual work, and makes updates immediate and predictable.
The Style Guide is shared between Cosmos and Optics, meaning any change made in one product is instantly reflected in the other.
Shared Style Guide across products
The Style Fuide is not separated between Cosmos and Optics. It is a single configuration shared across both products. Although the access points are different:
Optics: Apps → Caelor Style Guide
Cosmos: Apps → Cosmos Settings → Style Guide
All values, settings, and assets remain fully synchronized.
This means:
Changes made in Optics are applied in Cosmos.
Changes made in Cosmos are applied in Optics.
There is one source of truth for styling.
Default values
When the Style Guide is not configured, the system applies default values to ensure a consistent starting point.
Default setup includes:
Primary color set to blue
#0065FF, dark mode#69A6FC.No additional colors defined.
Rounding set to a default level (3).
No logos or images configured.
These defaults ensure the product is usable immediately after installation without additional setup.
Colors
The Style Guide allows defining one primary color and multiple additional colors. Colors are used across Optics in all areas where a color picker is available.
Key behaviors:
One Primary Color is always defined.
Additional colors can be added without limitation.
Color pickers display Primary Color plus up to three additional colors.
Colors support both Light and Dark mode.
When switching between Light and Dark mode, the system automatically applies the correct color variants.
Rounding
Rounding defines the curvature of UI elements and can be configured from 0 to 18.
Rounding is applied to:
All Modules
Rounding is not applied to:
Settings screens
Tabs (Group in tabs)
This ensures visual consistency while keeping interactive elements like buttons and tabs clean and predictable.
Logos & Images
The Style Guide supports uploading and managing logos & images for reuse across the product.
Supported formats and recommended size for logos:
PNG
SVG
50px by 50px
Uploaded logos are stored in the Library and can be accessed through the Logo picker. In addition to uploaded assets, Optics also includes 500+ default icons and presets, giving users a large set of ready-to-use options before adding custom logos.
Images can also be uploaded and reused across Optics. Images are available through the image picker under Library tab.
Storage page for logos & images
A Confluence page can be defined as the default storage location for logos and images.
Once configured, this page is automatically preselected in all Logo and Image pickers when using Upload Image or From Page sources. This helps keep brand assets organized in one central location and makes image selection faster across the product.
Changes become visible after reopening the picker or refreshing the screen.
Permissions
By default, access to manage the Style Guide is available to Confluence Admins, Site Admins, and Organization Admins.
The Permissions feature makes it possible to grant Style Guide management access to additional users without assigning broader administrative roles. This allows selected users to manage branding and design settings while keeping platform administration separate.
Changes made by users with Style Guide permissions are applied to the shared Style Guide configuration.
The Style Guide is shared between Optics and Cosmos. Any approved changes made in Optics are also reflected in Cosmos after the screen is refreshed or reopened.