Your Styleguide defines the global look and feel of every Candu experience you create. Since Candu is built to fit inside your product, setting up a Styleguide ensures your team can design consistent experiences that blend seamlessly with your app.
Configure Default Styles
To get started, go to Styleguide on the left-side bar. You'll see the following sections:
Overview
Colors
Typography
Links
Buttons
Badges
Cards
Checklists
Forms
Hotspots
Tours
The Styleguide is global to your workspace and centralizes global defaults for each section or component type.
Tip: Create additional styles by clicking the Clone icon on any existing style.
Once you publish your Styleguide, new content automatically inherits these styles. Ensuring updates cascade across content, and eliminating the need to manually style components each time changes are needed.
Important: Components only stop inhering when you intentionally override their styles in the editor.
After you publish changes, allow up to 20 minutes for updates to propagate to all end users.
Colors
Foundational colors flow through primary buttons, badges, error messages, links, and other components automatically.
Click each color swatch to open the color picker
Or enter your brand's hex or RGB codes (Note: All colors support opacity).
Foundational colors include:
Primary: Your brand's main color. It applies across headers, link idle state, hotspot beacons, primary buttons and badges, checklist fonts, and some form elements.
Secondary: Complementary brand color used for alternative styles on buttons and badges, some checklist and form elements.
Tertiary: Additional brand color used on buttons and badges, and some form elements.
Success: Used to indicate completion or confirmation. Automatically applies to completed checklist steps.
Warning: Applies to badges and buttons.
Danger: Apples to badges and buttons, and form field errors.
Neutral: Defines background color on badges, checklist progress bar, and cards.
Lines: Defines default border for components like checklist steps and form steps, and divider line color.
Typography
Define your global fonts and text styles. These choices flow into all other elements unless you manually override them in the editor.
Candu provides Google Fonts by default. You can also upload custom fonts, click here to learn more about uploading custom fonts.
To configure base settings, select the default font style. You can set:
Font: Choose a system font or click "Use Custom Font" (Note: Uploaded fonts must include all required weights for accurate rendering).
Size: Your base text size
Weight: Choose normal, bold, light, or assign numeric weights
Color: Text color for headings inherit your primary color
Line height: Controls vertical spacing and improves readability
Letter spacing: Adjusts space between letters
Text style: Choose italic or underline
You'll need to configure fonts separately for each text type (H1, H2, H3, paragraph, body or caption text, etc.)
Links
Customize the appearance of hyperlinks across your content. You can configure:
Text & style including font, line height, weight, and letter spacing.
Idle state color
Hover color
On focus color (color and style when link is highlighted with tab or arrow keys)
Visited color (after users click the link)
Underline and italic styles for all states
Note: You can't delete or clone link styles.
Buttons
Buttons inherit text and colors unless modified. Once you customize a button style, it no longer updates automatically when typography or colors settings change.
Button options:
Border radius and width
Default state
Hover state
Focus state (Used when navigating via keyboard. Important for accessibility compliance)
Click (active state)
Padding and alignment
Badges
Badges are ideal labels to highlight status, categories or sections. They share many styling options with buttons but do not support hover or click interactions.
Badges inherit background, text, and border colors from your foundational colors (neutral, primary, and tertiary respectively). You can customize:
Font styles
Background color
Text color
Border width and radius
Padding and alignment
Cards
Cards are visual containers that help you organize or group content. They're typically used as banners, but can be used to highlight key information and as call to actions across your experiences.
By default, every workspace includes four card types:
Action card: It includes a click-style hover effect and is commonly used for navigation or calls to action.
Non-action card: A simple content container with no hover or curso interaction.
Border card: Non-interactive card with a visible border applied. Useful for separating content sections.
Transparent card: A card with no background or border. It includes hover effect.
You can customize:
Background
Dismiss icon style
Border radius, width and colors
Idle state appearance
Hover state appearance
Padding and margins
Cursor styles for hover states such as showing a pointer, context-menu cursor, progress indicator, and more
Checklists
Checklists guide users through key onboarding or product tasks.
You can customize both appearance and behavior:
Text styles for header labels and items
Checked and unchecked states
Checkbox styles and shapes
Progress bar fill and background color
Tip: Create additional styles by setting Checkbox Style dimensions. For example, for a square checklist item set width and height to 32 px with a border radius of 4px.
Forms
Form styles control the appearance of text input fields, checkboxes, and card options. These global settings help you create consistent data-collection experiences.
By default, label font colors use your Tertiary color from the foundational color settings, unless you override it. You can customize:
Text input and text area fields
Select input fields (styles dropdown fields)
Error labels
Checkbox styles
Multi-select card styles (allow users to select more than one option on a form)
Single-select card styles (allow users to select one option on a form)
Hotspots and Tour Tooltips
You can also define global styles for Hotspots and Tours. You can customize:
Hotspot beacons and tooltips including color, size, and border settings.
Tour tooltip styles including color, size, border settings and tooltip arrow size.
Importing a Styleguide
If you manage multiple workspaces, you can import a styleguide from Styleguide > Overview.
Select the workspace
Click Import Styleguide
Note: Importing a Styleguide will override all of your current default styles in this workspace.
Restoring Default Styles
You can restore all Styleguide settings to Candu’s default values from Styleguide > Overview.
Important: Use this option only when you want to completely reset your visual system. This action resets every style in the Styleguide and the defaults applied are the standard Candu-provided styles.