Skip to main content
All CollectionsStyleguide
Self-Serve Styleguide
Self-Serve Styleguide

Ensure your Candu content is on brand by setting custom styles, fonts, and colors throughout your content.

Flora Sanders avatar
Written by Flora Sanders
Updated over a week ago

Candu was built to blend in with your content, and the best way to ensure that your content fits seamlessly with your app is to set up your styles. The Styleguide is global, meaning it persists across all content you create in Candu.

This has two benefits: first, everything stays brand-consistent, and second, it saves time looking up hex colors whenever you want to create new content! Once you've saved the styles in the Styleguide, you'll see them reflected in the Editor. These styles will also appear when previewing your content and in the live embedded version of your content once you've completed installation.

To start setting up your Styleguide, open a piece of content or create new content. You'll see Styleguide listed in the top menu:

A screenshot showing how to change the styles of links in the Styleguide.
  • Foundational Text - add your core fonts

  • Foundation Colors - add your core brand colors

  • Links - customize the way hyperlinks appear

  • Buttons - customize and create new button types

  • Badges - customize and create new badge types

  • Cards - edit default cards and create new types

  • Checklists - change the look and feel of checklists and create different options


Foundational Text

By default, foundational Text and Foundational Colors will flow through to all other elements. If you manually update the colors and fonts of other components, they will no longer recognize updates made to the Foundational Text and Foundational Colors.

This section lets you set up your basic fonts and text styles. Click on each option and scroll down to customize. Headers and paragraph text can be selected according to the following options:

  • Font: Currently, we offer the suite of Google fonts by default. If you have a custom font for your brand, you can also upload it using the URL provided for using your fonts online.

  • Color: By default, fonts pull the "neutral" color set in the Foundational Color section. If you keep the default setting, you'll see a tag noting this.

  • Size: Set font size.

  • Line height: This allows you to set a default amount of space below the text. You can also add this manually to the editor using the margin controls, but this can be helpful if you prefer consistent spacing around your text.

  • Weight: The font is set to Normal weight by default, but it is bold or light, or you can put a numeric weight to match your brand style.

  • Spacing: Use spacing to add space between individual letters.

You can preview how all text and interactions look as you set them up.

Set custom Text Styles in the Candu Editor, Powerful Tools to Build User Onboarding Experiences

Foundational Colors

Color is critical to establishing a brand, and it's vital in your style guide, too. Your foundational colors will flow through to all the other elements you set up in the style guide.

You can select from the picker, use hex codes, or use RGB to set colors. The option is to set opacity for all colors with the A on the selector. By default, opacity is set to 100.

  • Primary color should be set with your brand's primary or most identifiable color. Primary color will flow through to buttons and badges along with secondary, tertiary, warning, and danger.

  • Secondary colors complement your brand's primary colors. Like the primary color you set up, secondary colors automatically update the badges and buttons below.

  • Tertiary colors are used less often than primary or secondary colors but can offer an excellent third option.

  • Danger is meant for buttons that users should tread lightly around. There's no explicit functionality around this, so if your color palette has more colors than you can fit, you can also repurpose Danger and Warning for additional brand colors

  • Success is meant to tell your users, “Good work.” This color will be used in the checklist when a user completes a step.

  • Warnings like Danger sync with a button and badge below. This color is meant to get users' attention.

  • Neutral sets the color for your fonts.

  • Lines will set the outline for any containers by default and impact the Object > Line in the Editor.

Powerful Tools to Build User Onboarding Experiences

Links

With link text, there are a few additional options. Set default colors and styles along with interactions on hover (when users scroll over the text) and visited (when users have clicked the links).

Powerful Tools to Build User Onboarding Experiences

Buttons

By default, buttons will inherit the text, size, and color from the abovementioned Foundational Text and Foundational Colors sections. Once you modify a button, it will no longer automatically inherit any updates made to foundational text and foundational colors.

You also have a few other options:

  • Border Radius controls how rounded the corners of your buttons will be. Please set it to 0 for 90-degree angles. The higher the number, the more rounded your buttons will be.

  • Border Width adds a border to your buttons. If your buttons are a solid fill, you can leave this at 0, but if you want a border around them, set this to at least 1.

  • Colors and Styles: Next, you can set the colors and styles for buttons in different states. First is the default state, or the button's appearance without user intervention. By default, the colors and fonts will pull from what's set up in the Foundational Text and Foundational Color sections above. If you want something different, you can customize buttons on an individual basis, but they will no longer be updated when changes are made to Foundational Text or Foundational Color sections

  • On Hover: These settings allow adding a hover state that will change from the default when a user scrolls over it.

  • On Focus: This sets the interaction if a user navigates to your button using their keyboard arrow keys. This is especially important for accessibility and for users who don't use a mouse or trackpad. For example:

    A screenshot showing how to change the On Focus setting.
  • On Click: Finally, if your app uses this type of interaction pattern, you can change the look of buttons after a user has clicked them.

  • Alignment: You can also set a default margin and button padding. Padding is essential here, allowing you to make buttons larger or smaller. This can still be customized as needed at the individual button level in the Editor.

A visual of how to change the styles of a button.

Badges

Badges are simple buttons and still have many of the same style components. However, they do not allow click or hover events; they simply call a user's attention to specific content. Font styles and colors will be inherited from the Foundational Colors and Fonts, but you can update each individually.

  • Boarders: You can add a border with the Border Width function and change the edges' radius with the Border Radius function.

  • Alignment: You can also set a default margin and padding for badges. Padding is essential here, allowing you to make a badge larger or smaller. This can still be customized as needed at the individual badge level in the Editor.

A screenshot showing how to update the styles of a badge.

Cards

In the Cards section, you can design how your cards will look. This will impact the elements of Action Cards and Non-Action Cards.

Using the options below, you can set up card interactions for when users hover over them. You can add or change the shadow background or border colors.

  • Background will set the background color for the card.

  • Shadow Settings will make your card pop off the page. The first shadow setting is for the default shadow when the user is not hovering over the card.

  • Border Radius controls how rounded the corners of your cards will be. Please set it to 0 for 90-degree angles. The higher the number, the more rounded the card corners.

  • Use Border Width to add a border around cards. This is set in pixel width, so the higher the number, the thicker the border. If you add a border, use the color picker labeled “Border” to set the color. By default, this will inherit the color you set for "lines" in the Foundational Color section.

  • Idle State reflects the settings when the cursor is not on the card

  • On Hover: These settings allow adding a hover state that will change from the default when a user scrolls over it.

A screenshot showing how to change the styles of a card.

Checklists

Here, you can customize your Checklist features, such as appearance colors and action settings.

  • Text Styles Set the text format for your checklist, including font, weight, size, and color.

  • Checked State changes the look of the checkbox after a user has completed them.

  • Unchecked State changes the look of the checkbox before a user has completed them.

  • Checkbox Style relates to the box's size, border padding, and margin. You can customize it by...

    • Changing the shape of the checkboxes from square to round using...

      • Border Radius: This controls how rounded the corners of your cards will be. Please set it to 0 for 90-degree angles. The higher the number, the more rounded the card corners.

    • Turning it into an expandable drawer/accordion drop-down menu, a great feature for sharing information, such as FAQs, by...

      • Updating all the sizes under Checkbox Styles to 0.

        A screenshot showing how to change the margin of a checklist.
  • Boxes Style can be customized the shape from square to round using...

    • Border Radius: This controls how rounded the corners of your cards will be. Please set it to 0 for 90-degree angles. The higher the number, the more rounded the card corners.

  • The Group Title—' Checklists' in the example below — sets the text and appearance of the checklist title.

  • The Progress bar's color and background color change as it grows throughout the user's completion. The size can be changed by adjusting the height. The radius reflects the shape of the bar.

A screenshot showing how to change the style of a checklist title and colors.
  • New Checklist Styles: You can create additional 'Checklist Styles within the Checklist settings.' This allows you to create and customize a variety of layouts.

  • E.g., Square/boxed checklist:

    A screenshot showing how to change the styles of a checklist border.
  • E.g., Rounded checklist:

    A screenshot showing how to change the styles of a checklist border to rounded.
  • E.g., Expandable drawer/accordion drop-down menu:

    A screenshot showing how to change the styles of checklist to make an accordion.
Did this answer your question?