Style Guide: Fonts and Color Palette

Purpose:

 

 

Register the font family and colors of your brand, so you can set it inside the style guide.

 

 

Step by Step:

 

 

A. Fonts

 

1. Go to Manage > Site Studio > Website Settings > Font Libraries (/admin/cohesion/cohesion_website_settings/font_libraries/bulk_edit);
2. Upload your font inside the first session (”Fonts”), clicking the “Upload font” on the bottom of the list;
3. Then click the “Upload .zip” button to upload the archive;

4. Inform the name of the font inside the field “Font Family”;
5. After that, you need to go to the next session of “Font Stacks” and set the hierarchy of the fonts;

6. Click the “Add web font stack” button and inform the name of the “Font Family”;
7. Inside the “Font Stack” field, inform inside single quotation mark (’) the name of the font, and after the comma (,) the font websafe;
8. After you save it, you can set it inside the Style Guide at the Typography section.

 

B. Color Palette

 

 

1. Go to Manage > Site Studio > Website Settings > Color Palette (/admin/cohesion/cohesion_website_settings/color_palette/bulk_edit);

2. At the end of the colors list, click the "Add" button;

3. Inform the color label, the hexadecimal color, activate the "Available in WYSIWYG" toggle and add a tag if you want to;

4. Save all the changes, and they're available inside the Style Guide, but also inside the components.