How to use Setka’s Design System Manager
Welcome! This guide is designed to help designers and marketers get started with Setka’s Design System Manager for all their digital content.
You might have a fully developed Design System for your content, or you might be just getting started with it. No matter where you are in your process, Setka can help you craft from scratch or adapt an existing Design System to be applied to all of your content designed with Setka Editor.
Within Setka’s Design System Manager, you can collect your design principles, visual identity, style guides, and reusable components all in one place. We understand the importance of creating unique designs for each content piece and publishing context, so you are not limited to the number of style libraries you can create to suit your content needs.
It takes just minutes to set up and then your work is done and you can start designing posts that have your visual identity and reusable components automatically applied by Setka Editor.
Unlike other tools, we don’t just store your Design System with Style Libraries, we turn it into CSS. This means that any Style changes are automatically applied to all posts using that Style, saving you time and headache of having to do it yourself.
So, let’s get started setting up your Design System Manager!
Table of contents
1. Basics
2. Typography
• Editing text formats
• Custom setting for mobile
• Links
3. Colors
• Background colors
• Text colors
4. Icons
5. Dividers
• Popular components
• How to create and save components
7. Grids
Basics
What is a Design System Manager?
Setka’s Design System Manager is a vital part of Setka Editor. It helps not only set the visual identity but also collect reusable components for different types of content into one cohesive Style.
How does it work?
Before creating posts, you will need to configure your visual identity, grid systems, and reusable components in accordance with the Design System or brand guidelines. This process takes place in the Design System Manager, in your account. Your published Styles will become available in the Editor upon completion.
All the changes to your Styles will automatically sync with the editor integrated into your CMS. The Design System Manager pushes these updates to domains set in the CMS Integration section.
What do I need to get started?
All you need to get started is to have an account and a defined Design System, visual style guide, or brand guidelines.
Who should be involved?
Here at Setka, we believe that to create perfect content experiences for users, designers, developers, and content creators need to come together to define and create your visual style.
What can be set up in Styles?
Setka Styles is a set of layout elements: fonts, headings, text and background colors, indents, dividers, icons, buttons, and reusable components. You can create unique Styles for different types of content. You can read more about styles for blogs and media here
How many Styles should I have?
You can have as many Style libraries as you would like. Deciding how many Styles to have depends on the rules of your Design System. You might choose to have one Style for all your digital content or you might opt to have different Styles for every type of content like eBooks, blogs, case studies, etc.
How do I create
a Style?
There are three ways you can create a style:
Quick setup
Once you set up your Setka Editor account, we offer you to create your first simple style. If there are any styles created already, you can start a quick setup by going to the Styles tab in your account, then selecting “Create custom style” -> “Quick setup.”
Advanced setup
Choose all fonts, colors and other layout tools yourself with the help of advanced setup. To create a style in this mode, go to the Styles tab in your account and select “Create custom style” -> “Advanced setup.”
From a copy of an already created style
This can be great if you just need to make a few tweaks to an existing style. To do this, find the style you want to copy in the Styles tab in your account, and hover your mouse over the three dots in the top right corner, called the “style actions menu.” Click that and and choose “Duplicate.”
How to customize Styles further?
In case you want to apply additional properties to style elements that are not available in the Design System Manager, you can opt for Custom CSS code.
To do this, enter the Design System Manager for one of your Styles, and scroll all the way to the bottom of the left editor panel. Click the “Custom CSS” link to open a pop-up window where you can enter the CSS code.
You can read more about Custom CSS hacks in our article Custom CSS – advanced features for your layout design.
Typography
Most design systems include just one or two fonts: either one font for both heading and body copy, or two different ones. However, for editorial or marketing content, it is sometimes okay to integrate more fonts and have some creative flexibility.
Keep the number of fonts low; it’s not only a best practice of typographic design, it also prevents performance issues caused by excessive use of web fonts.
Read more about common Typography mistakes here
Editing text formats
Before editing text formats, you will need to determine the set of fonts used. To add new fonts, open any text format in the editing panel on the left and select “Manage Fonts.” Then add fonts from Google Fonts, Adobe Fonts, or upload your own font.
You can also add new text formats for different use cases by clicking the “Add text format” option, and use this editor to configure different attributes of your text (more on that in a minute).
When creating a style from scratch, some default text formats will be available:
● Paragraph — regular body text. Uses the <p> tag in an article’s HTML code.
● Extra Large Header, Large Header, Medium Header, Small Header — headers of different sizes. Uses tags <h1> through <h4> in an article’s HTML code.
● Small Text — caption text. Uses the <p> tag in an article’s HTML code.
Font size
To change font size, go to Text formats → [Format Type] → Size.
Font size is set in pixels (px).
Font weight
To change font weight, go to Text formats → [Format Type] → Weight.
You can choose between normal, which is a 400 weight, or bold, which is a 700 weight.
Line height
To change line height, go to Text formats → [Format Type] → Line-height. The line height is set as a percentage (%) of the font height.
Custom bold & italic
Sometimes it’s not enough just to highlight the text as bold or italic. You can use custom styles for bold and italic in such cases. This is a classic typography technique from books, magazines, and newspapers.
Stylized bold and italic gives more freedom to create beautiful content that is enjoyable to read.
To configure custom formatting for bold and italic, go to Text formats → [Format Type] → Advanced bold & italic. Activate the “custom appearance for bold text” or “custom appearance for italic text” item respectively, and tweak to your heart’s content.
Custom settings for mobile devices
The Design System Manager provides style previews for different device types. To switch between them, use the Desktop / Tablet / Mobile buttons at the top of the page.
Text formats can also be customized for mobile devices. So, for instance,if the font looks too large in the mobile preview, it can be sized down specifically for mobile, or even changed to another font that works better for that device.
To set font settings for smartphones and tablets:
Go to Text formats → [Format Type] → Screen size → Tablet / Mobile.
Activate “custom appearance for mobile screen” or “custom appearance for a tablet” screen, respectively.
Styles for smartphones and tablets will be the same as in the Desktop section. But any of their parameters can be fine-tuned.
Links
To set the appearance for links, go to Text formats → Links. Links can be:
● Underlined (Underline style);
● Written in uppercase (Letter Case);
● Emphasized with increased letter spacing (Letter Spacing).
Colors
Most design systems include 1-3 main colors that represent your brand. You may want to include a range of values—including darker or lighter tones of the same color—to give your designers a few more options.
How many text and background colors can a Style have?
You can add as many color sets as you like in the Design Style Manager. To do this, head to the Colors section of the Styles bar in the editing menu on the left and click “add color set”. In the Editor, your chosen colors will appear in the top menu bar. Select a colored icon to change the text or background color.
These selected colors can be used for all types of text including accents and markers.
How to set text colors
For each Style you can create a set of colors (Color set) that will be used for the main text of your article. You can also indicate which colors you’d like to use to demonstrate the status of your links:
Regular link — a link in the text that the reader hasn’t engaged with;
Hovered link — a link that is hovered over by the cursor;
Visited link — a link that has been clicked.
How to set background colors
You can select several background colors for each Style in the Design Style Manager. Head to the Colors section of the Styles bar in the editing menu on the left and click “add background color.” These background colors can be used for both pages in general and individual grids, columns, and paragraphs.
Icons
The key to success with imagery in your visual design language is having a plan and sticking to it. Set guidelines for illustrations and icons, and use the best image format for the situation.
Icons help to provide visual indicators of your text’s content. When selecting icons for a new style, try to add those that match the styles of your background, text, dividers, and links.
Learn more best practices in our guide to using imagery to improve content engagement
How to add a new icon
There are two ways to add icons to your post style:
Add more icons from the Noun Project Library
To access more icons from the Noun Project Library, click “Search icons library” and follow the link to the Noun Project Library. To add any of these icons to your Style, you will need to sign up on their site and either purchase a license or download credited icons. Once downloaded, upload them from your computer to the Design Style Manager.
Upload icons from your computer
Click on “Select files to upload” select a file, and save style changes. The icon you add appears in the Icons tab as shown below:
In addition to the premade icons and icons added by you, you can insert special characters and emojis when creating a style.
Which image file format to choose
You can upload icons in PNG, JPG, and SVG formats. The image size and number of icons is not limited. The recommended icon size is no bigger than 256px. This is an optimal size for the largest font.
Learn more about how to add icons to your post in Setka Post Editor.
Search for free icons
Click Search icons library and type the name of the icon in the search bar. Select an icon and change its color if necessary. Click “Add” to upload the icon to your Style.
Dividers
Dividers have many functions. They can be used in overhangs and infographics as well as for isolating text. It all depends on your needs.
Dividers are a necessary part of any brand identity and especially important for digital content. However, there are some basic rules to keep in mind when deciding how to use them:
1
Dividers should be noticeable in a layout, but not jarring.
2
They should only be used if elements cannot be separated using white space.
3
Use dividers sparingly, to create groupings rather than separate items.
How many dividers can a Style have?
As many as you like. Set up the properties for basic dividers and add other types by clicking “Add divider”.
How to adjust the divider length?
Click Dividers > Width. You can specify the length in pixels (px) or percent (%). The final width of the divider in percent will be calculated based on the width of the element it’s inserted to (post, grid, or column).
How to adjust divider thickness?
Click Dividers > Thickness. You can specify the thickness in pixels (px).
How to adjust divider color?
Click Dividers > Color. You can specify the color by selecting it in the palette or inserting a color code.
How to adjust divider alignment?
If the divider width is smaller than 100%, you can select the alignment type, either justifying it to the left, to the center, or to the right. To do so, click on the divider you want to edit” open the Alignment dropdown, and select center, left, or right.
Components Library
What is the reusable components library?
A reusable component is a template with formatting elements that can be used anywhere. Layouts for specific content pieces—such as quotes, author bios, sidebars, or numbered lists can be saved for future use. Reusable components speed up the design process, as these elements are available to you instantly and fully styled.
Each component is created using elements from a particular Style, meaning they are unique to this style and cannot be transferred to others. While Setka’s default styles contain a number of ready-made components, you are not able to create new components in these styles.
Which components to create
The ability to create a reusable components library is pretty unique to Setka Editor, so we understand it can be difficult to decide which components to create. To help you out, we’ve gathered 18 of our favorite ways to use reusable components for content. Think of it as a jumping-off point—many of these may apply to your work, but the sky is really the limit when it comes to using reusable components. Think creatively about your regular features and formats to come up with more components you can create to save yourself time while designing an incredible content experience.
Popular components
For organizing content
Section Headers
Table of Contents
Author Profiles
Summary Cards
Parallel Narratives
For data & information
Data Highlights
Tables
Tips or Important Facts
Asides
For visuals & imagery
Immersive Article Covers
Branded Images
Photo Collages
Photo Captions
Pull Quotes
Bulleted Lists
For engagement & sales
CTAs
Related Links
Related Products
Read more and see examples in our article 18 Ideas for Using Setka Editor’s Snippets to Improve Your Content Design
How to create and save components
In Setka Editor it is possible to compile components of different types. Any paragraph, title, grid, column, image, embed, divider, gallery, or a container can be saved as a ready-made piece of code.
To create a component inside the Setka Editor, select the desired paragraph and any number of elements you would like to save as a reusable component. Then, click the “Components” button in the right-hand sidebar. Click “Add component,” give the reusable component a name, and save it.
Saved components will appear in this bar for you to insert into existing or future posts in this style. To upload them, select a paragraph, and click the snippets icon. The components list will be displayed.
Reusable components can also be added from the Design System Manager, but you will have to write HTML and CSS code from scratch.
Learn more about creating components from scratch here
Grids
What is a Grid System?
A grid system creates a unified and recognizable style by organizing your content in an effective way.
Setka Editor uses column-based grids—the basic grids in graphic design. These are often supplemented with horizontal rows constructed based on your font size. Their configuration depends on the number of columns, margins, and gutters.
Column grids help to develop a design for a variety of devices: computers, tablets, and mobile devices. Columns provide necessary limitations that enable you to arrange the content efficiently and consistently.
Setka Editor provides four grid systems by default: with 6, 8, 10, and 12 columns.
How to add a grid system
You can add as many of your own grid systems as you like. To do it, click “Add grid system” in the Grid systems page. Then specify the number of base columns, the gutter between them, and the side margins (horizontal margins).
Auto and Limited content width
When adding a new grid system, you’ll be prompted to select either Auto or Limited widths. This option is located under the Advanced menu.
The auto width expands or contracts your grid to fit 100% of the content container it’s in.The margins remain constant and the container size stays unchanged on window resize.
Limited width lets you set an exact maximum content width limit in pixels. Margins are fluid and fill all the available space between the container and post content’s width, which keeps content in the center. Select a Limited grid system when you imagine overhanging the post width.
