Tiny Logo
Log In

How to use Setka’s Design System Manager

This guide is designed to help designers and marketers get started with Setka’s Design System Manager for their digital content.

You may already have a fully developed Design System for your content, or you might be just getting started. No matter where you are in your process, Setka can help. You can craft from scratch, or easily adapt an existing Design System to be applied to all your content designed with Setka.

Within Setka’s Design System Manager, you can collect your design principles, visual identity, style guides, and reusable components in one place. We understand the importance of creating unique designs for each content piece and publishing context, so you’re not limited to a set number of style libraries that you need to create, to suit your content needs.

It takes just minutes to set up. Then your work’s done and your visual identity and reusable components are automatically applied by anything designed within Setka.

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 (globally) applied to all posts using that Style, thereby saving you time and the headache of having to do it yourself.

So, let’s get started setting up your Design System Manager!



Basics

What is a Design System Manager?

The Design System Manager is a vital part of Setka. It helps to not only set your visual identity, but also collects reusable components for different types of content – into one cohesive Style.


How does it work?

Before creating posts, you need to configure your visual identity, grid systems, and reusable components in accordance with the Design System or your 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, your designers, developers, and content creators all 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 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 each 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 account, you can create your first simple style. If there are Styles already created, you can commence 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 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’s 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 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 the editor to configure different attributes of your text (more on that in a minute).

When creating a style from scratch, some default text formats are 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 and italic

Sometimes it’s not enough to just highlight the text as bold or italic. In those cases, you can use custom styles for bold and italic – it’s a classic typography technique from books, magazines, and newspapers.

Stylized bold and italic gives more freedom to create beautiful content that’s 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.

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 to have a plan and stick 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.

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 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 the 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 that it’s inserted into (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, because they’re available instantly and fully styled.

Each component is created using elements from a particular Style, meaning they are unique to that Style and cannot be transferred to others. While Setka’s default Styles contain a number of ready-made components, you aren’t able to create new components within those Styles.

Which components to create

The ability to create a reusable components library is unique to Setka, 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 incredible content. experience.

How to create and save components

In Setka, it’s possible to compile different types of components. 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 Setka, 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 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 and the components list is displayed.

Reusable components can also be added from the Design System Manager, but you have to write HTML and CSS code from scratch.



Grids

What is a Grid System?

A grid system creates a unified and recognizable style by organizing your content in an effective way.

Setka 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 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.

Tiny logo

Stay Connected

Products

TinyMCEDriveMoxieManager
© Copyright 2021 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.