Colors and Styling
Dex follows the settings defined in the Caelor Style guide to ensure every page and presentation is consistent with the company’s brand. Colors, palettes, and corner styles defined in the Style guide are applied automatically to blocks, keeping content visually unified across both light and dark themes.
Dex color palettes
Dex uses a three-color palette defined in the Caelor Style guide. Unlike standard Optics modules, which rely on a single accent and text color, Dex requires multiple colors to ensure presentations look balanced and readable across different contexts.
The selected colors are used for:
Backgrounds → setting the overall look of a block or slide.
Text → ensuring contrast and readability.
Components → applied to visual elements such as cards, buttons, and shapes.
The use of three colors provides enough variation for building full pages and presentations, where multiple layers of content need to be visually distinct yet consistent. This approach ensures that text always stands out, components align with brand styling, and backgrounds feel unified across both page mode and presentation mode.
The components where colors can be applied vary by block, depending on the elements used and the flexibility provided.
Color settings
Color options in Dex are available at three levels: general, block, and component. This layered approach ensures content stays consistent with the Style guide while still allowing flexibility where needed.
Global Colors
Some settings apply to all blocks and are controlled through the toolbar placed in the middle of the screen, just below the previews. Color palettes are defined globally, with the default palette taken from the Style guide. All blocks in the editor use this palette by default.
Changing the color palette updates all existing blocks as well as any new blocks created.
The palette change also applies to the templates offered in the block categories.
Block styling options
When a block is selected, styling options for block components available.Content creator can combine between 3 colors available in palette or add a custom color.
Component styling options
Inside each block, individual components, usually cards, can also be styled independently. This makes it possible to apply a different color to a single components, adding variation while keeping the overall design consistent.