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:
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.
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.
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).
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:
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.
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.
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.
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.
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.
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:
E.g., Rounded checklist:
E.g., Expandable drawer/accordion drop-down menu:
