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
Foundational Text and Foundational Colors will flow through to all other elements by default. If you manually update the colors and fonts of other elements, 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 that using the url provided for using your fonts online.
Color: By default, fonts will pull the "neutral" color that's set in the Foundational Color section. You'll see a tag noting this if you keep the default setting.
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 in the Editor using the margin controls, but if you prefer to have consistent spacing around your text, this can be helpful.
Weight: By default, font will be set to Normal weight, but you can use the dropdown to make it bold, light, or set 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 key to establishing a brand, and it's key in your style guide, too. Your foundational colors will flow through to all of the other elements that you set up in the style guide.
To set colors, you can select from the picker, or use hex codes, or use RGB. There is also the option to set opacity for all colors with the A on the picker. By default, opacity is set to 100.
Primary should be set with your brand's primary, or most identifiable, color. Along with secondary, tertiary, warning, and danger, primary color will flow through to buttons and badges.
Secondary colors complement your brand's primary colors. Like the primary color you set up, secondary colors will automatically update badges and buttons below.
Tertiary colors are used less often than primary or secondary colors, but can offer a nice third option as needed.
Danger is meant to be used for things like 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.
Warning, like Danger, syncs 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 will 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, text size, and color from the Foundational Text and Foundational Colors sections above. 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. Set it to 0 for 90 degree angles. The higher the number, the more rounded your buttons.
Border Width adds a border to your buttons. If buttons are a solid fill, you can leave this at 0, but if you want a border around your buttons, 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 how the button looks without any 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 give the option to add 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 that don't use a mouse or trackpad. For example:
On Click: Finally, you can change the look of buttons after a user has clicked them, if your app uses that type of interaction pattern.
Alignment: You can also set a default margin and padding for buttons. Padding is especially important here, as it allows you to make buttons larger or smaller. This can still be customized at the individual button level in the Editor as needed.
Badges
Badges are like 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 certain content. Font styles and colors will be inherited from the Foundational Colors and Foundational Fonts, but you can update each individually.
Boarders: You can also add a border, with the Border Width function, and can change how rounded the edges are with Border Radius.
Alignment: You can also set a default margin and padding for badges. Padding is especially important here, as it allows you to make a badge larger or smaller. This can still be customized at the individual badge level in the Editor as needed.
Cards
In the Cards section, you can design how your cards will look. This will impact Action Cards and Non-Action Cards elements.
Using the options below, you can set up card interactions for when users hover over them. You can add or change the shadow, or change the 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. 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 choose to add a border, use the color picker labeled “Border” to set the color. By default, this will inherit the color you set up for "lines" in the Foundational Color section.
Idle State reflects the settings when the cursor is not on the card
On Hover: These settings give the option to add a hover state that will change from the default when a user scrolls over it.
Checklists
Here you are able to 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 directly relates to the size border padding and margin of the box. 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. 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, which is 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. Set it to 0 for 90-degree angles. The higher the number, the more rounded the card corners.
Group Title sets the text and appearance of the checklist title - 'Checklists' in the below example.
Progress Bar changes the color and background color of the progress bar that 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: Within Checklist settings there is also the ability to create additional 'Checklist Styles'. This allows you to create and customize a variety of layouts to choose from.
E.g. Square/boxed checklist:
E.g. Rounded checklist:
E.g. Expandable drawer/accordion drop-down menu:
