In this article, we’ll break down how you can edit and customize this Brand Toolkit template from Ceros Inspire.
Brand toolkits or style guides provide a convenient hub that contains a range of elements necessary for building out a Ceros experience. Toolkits provide easy access to commonly used elements—saving the designer time and effort while building, as well as ensuring brand consistency across your experiences.
If you’re interested in learning how to make your own brand toolkit from scratch rather than using our template, check out this article on Creating a Style Guide.
Where to Start
Landing Page
This template contains 6 pages in total, the Landing Page, Colors, Logos, Typography, Icons, and UI Elements (each page is labeled appropriately in the layers panel).
As a general best practice, you should style the toolkit experience itself to abide by the brand guidelines you are creating it for, so be sure to adjust the template accordingly.
The navigation has been set up as a synced object (See: Ceros Educate – What are Synced Objects?) for the sake of consistency across all pages. If you need to add another page to the toolkit, the navigation can be easily updated:
- Double-click the synced object icon in the layers panel or the object on the canvas to enter isolation mode, where you can edit the instance.
- Any changes made within isolation mode will update all copies of this synced object throughout the experience.
- To add another entry, copy one of the text boxes in the Base folder, and create a corresponding hover state and hotspot that links out to the new page.
- To exit isolation mode, double click off of the canvas, or double click the green “Studio” tab in the breadcrumb indicator at the top.
Colors
This page contains the brand color swatches as square shapes, with the color ID listed beneath them. The sample palette in this template consists of three sections: Primary Palette, Secondary Palette, and Tertiary Palette.
Each swatch lives in its own folder along with its hex number, which the designer can copy and paste into any experience as needed. The square shapes have a fill and stroke color to ensure any light colors can stand out with a darker outline. Additionally, you can add these colors to your Account Color Palette.
Logos
The logo treatments will vary based on the branding, but generally, it’s recommended to include a variety of logos. Logos should be imported to the studio as SVGs to ensure they are crisp in every experience, with no pixelation. Logos should also be laid out in all color combinations as the branding guide allows, in addition to a plain “clear space” section with specifications for the logo treatment.
The logos and their attached color background are included as a subfolder within each individual folder along with the colors hex codes and any applied animations.
Typography
This section consists of the brand typefaces (which should already be in use throughout the toolkit experience) and sample typesetting treatments.
The first section should have each typeface and weight displayed in a list format and include any relevant disclaimers for where a particular styling should be used. The spacing dividers are housed in their own subfolder here, and more can be copied as needed to add more typefaces or stylings.
The second section should consist of the typesetting requirements as stated in the branding guidelines. The variety of setting styles will vary but generally, there should be at least three variations laid out: Main Header, Subheader, and Body Copy. If a particular brand is explicit in its typesetting specifications regarding kerning, colors, and sizing, be sure to include this information.
Perhaps the most beneficial aspect of the typography section is the fact that a designer can copy any text box from the toolkit and paste it into another experience, bypassing the need to import the specific typeface. This is why it’s important to include all possible weights, as well as a variety of sizing options.
Icons
While icons will often vary based on the design of an experience, the icon page should provide the user with a base for iconography styling, as well as some standard icons that may be useful in a variety of situations.
The icon categories included here consist of Navigation, Account, Social, and Global. Each category contains subfolders with the icon title, the sample hotspot to trigger a hover state, and a group containing both the base icon and the hover state for the icon.
It’s important that any icons are imported as SVGs to ensure they are clear when scaled, with no pixelation.
UI Elements
The purpose of this section is to lay out as many pre-built pieces of UI as possible for easy access to implement in another experience. Like the iconography section, the UI elements will vary based on the brand guidelines, but CTAs and carousels are typically a good starting point. Although the styling for most of these elements may need to be adjusted heavily, the core interactions are built and functional.
The templated sections here consist of CTA Buttons, Video Buttons, Image Carousel, Article Tiles, and Tab System.
CTA Buttons
The CTA buttons folder contains the sizing guides which denote the spacing between the copy and shape layer, the copy with all relevant information regarding colors and applied animations, and a group for each button. Each group contains the base shape layer, a hover state, a text box, and a hotspot to activate the hover animation.
Video Buttons
The structure here is identical to the setup for the CTA buttons, with the SVGs and hotspots in two separate groups underneath the relevant information.
Image Carousel
The main folder contains the Navigation Arrows, the Carousel Steps, and the relevant animation copy. The Carousel steps are labeled with their numbers and contain a placeholder copy, a background tab, and an image.
Article Tiles
This section consists of three base tiles and a hover state for each. The base groups contain a sample image, headline, and hotspot.
Tab System
This section consists of a Base folder, and an Open States folder. The base houses the square shape masks, labels, and hotspots with a “Show Target & Hide Others” interaction applied for each open state.
If there are additional, more unique/complex UI elements needed for a particular brand toolkit, be sure to follow the same formatting and make notes of applied animations.