Jim R Web logo

Design Systems

Table of Contents

Design Systems

Design Systems’ Unworkable Past

A design system allows web designers to maintain consistency across a website by defining a collection of universal design rules and components. This is especially useful when a site is large or a group of creators is working on it at the same time. This design system could include written documentation that includes a guide for selecting colors and fonts, a list of standard icons or pictures to be used throughout the site, and other brand components that will make the website uniform and logical. Designers and content producers can then use the design system guidance when constructing a page, generating content, and so on.

This design technique has disadvantages. Web designers must frequently switch back and forth between the instructions and the job they are doing, adjusting each component one at a time.

What happens when someone adds a header to a page? “What was the hex value of the H3 heading again?” What font weight was it? 500? No, that was for H2 headers; wasn’t 400 for H3 headings? The creator then searches for the style guide in a physical or online folder, finds the required information, and begins altering the color and font weight. When multiplied by the number of headings on a site, this strategy becomes a continuous, time-consuming procedure, and all other portions suffer from the same issue. Mistakes? There will be several.

Every website, in my opinion, should offer a template for a site branding guide. It will be open and available on one of the displays while I add information and color. It is, however, largely a guide. Its purpose is to remind me of the set design criteria on a regular basis. And, yes, I will replicate the HEX or HSB code if necessary; however, it is not compatible with my design system.

A Better Design System Exists

A design system embedded within the web production tool itself is far superior to turning to a written or online manual. Assume the site designer had Elementor’s entire design framework pre-integrated from the start. If an element required a specific combination of color and typography that had been identified as a typical brand combination and that combination was automatically applied when adding the element, it would save a lot of time compared to any manual reference approach.

Future Changes to the Site

Consider the traditional method of referring a design system guide, and imagine that the organization is undergoing a comprehensive brand makeover. It is the web designer’s responsibility to modify every color, font family, font weight, and so on across the entire site. A massive job, and many parts would be overlooked, resulting in an odd, disjointed design.

This type of update can take just minutes with the design system embedded into the site design package itself. Elementor makes it simple to make a change in one place and have it reflected throughout the site. This design system methodology is embodied in the Design System by the combination of Elementor’s Theme Style choices, Global Colors, and Global Fonts.

Note: This series of articles has relied on the very well-organized presentation of the Elementor color and font styling exposition in their Help system. See, for instance, Help / Elementor Editor / Universal settings / Site settings / Configure site settings. The single detriment of their presentation was a number of errors and misconceptions about the Site Settings. Additionally, with the new CSS functions and Elementor’s edit (pencil) option for variables, the system can be taken to its full potential.

Design System and Theme Style

Under Site Settings, Elementor’s design system settings for fonts and colors are divided into two sections. The Design System is in charge of determining the fixed and custom font and color styling.Theme Style, on the other hand, determines the default styling for HTML tags (Typography) as well as the Elementor objects Buttons, Images, and Form Fields.The Typography part piques our curiosity.

Design System

The Design System will use the default colors and fonts from Elementor. Elementor has four color categories: Primary, Secondary, Text, and Accent. Fonts are classified in the same four ways. These are the System Fonts and System Colors. They are fixed and cannot be removed, although their names and colors (or font styling) can be changed.

In the Design System, you can also set and adjust fonts and colors for the particular website’s design characteristics. Custom Colors and Custom Fonts are both empty and can be used to add the website’s color and font stylings.

Typography

The Typography area of the Them Style allows you to customize the default styling of HTML tags for the body (p, etc.), headers (H1, H2,…), and links (a). These settings only affect the default styling of HTML tags.

A Typography tag is sometimes used by beginners to style text. This is not an acceptable practice. Search engines utilize HTML elements to analyze the content of a page in order to display it in search results. Misused HTML tags will confound a page’s SEO and result in a worse grade.

The Elementor Design System

The Design System is the first of three sets of design parameters in the Site Settings. At present, you can only reference Site Settings while in the Elementor Editor.

The Design System has two areas Global Colors and Global Fonts. Global Colors provides System Colors and Custom Colors. Then Global Fonts in turn provides System Fonts and Custom Fonts. The structure of the system is:

  • Site Settings
    • Design System
      • Global Colors
        • System Colors
        • Custom Colors
      • Global Fonts
        • System Fonts
        • Custom Fonts 

The four fixed System Colors and four System Fonts specify fallback style definitions for Elementor. They are the default option, and they are only used as a fallback if no specific element definitions are specified. Elementor defines the purpose of the four entries, which are described further down in the tables for colors and fonts.

There are four entries and only four entries in these classes; no additions or removals are permitted. One may, however, change the name of the property as well as its value.

Additionally, there are Custom Colors and Fonts, which are style layers. They are user-defined and can be used to ensure that the website’s styling is consistent. These will be unique to the website, however three extremely typical custom colors are included below as examples. Transparent is excellent for removing backgrounds from Elementor elements. Off White and Off Black are used to avoid the accessibility concerns associated with pure white and black’s high contrast values.

Note: To use the Design System, be sure to check the Disable Default Colors and Disable Default Fonts in Elementor General Settings. 

Note: It should be noted that the site’s fonts should be uploaded to the site rather than linked to Google Fonts. Google Fonts should be disabled in the Elementor Advanced Settings. Germany declared the use of Google Fonts to be a breach of the GDPR in early 2022. You may include a Google Font on your website, however you should not link to Google servers, which violates the DGPR.

System Colors

There are four Sustem ColorsPrimarySecondaryText, and Accent. The following examples list where they are used. The developer may rename the four primitive System Colors — though that can be confusing, making them appear to be possible Custom Colors.

Here, using this website’s current Site Settings is an example of the four System Colors definitions:

 

Primary

Primary color is used for Headings and Icons.

Secondary

Secondary color is used for List Items, Subheadings, Animated Headings, and Price Table backgrounds.

Text

Text color is used for Paragraphs and Menu items.

Accent

Accent color is used for Links, Button backgrounds, Tab and Accordion headings, and Badges.

System Color CSS Settings

Elementor uses CSS custom variables for color settings. The four CSS variables for System Colors are:

  • –e-global-color-primary
  • –e-global-color-secondary
  • –e-global-color-text
  • –e-global-color-accent

These are useful when access to System Settings is restricted, such as when creating custom classes.

Custom Colors

Custom Colors will override any underlying color based on System Colors or settings in the Theme StyleHere are three, of several, Custom Colors defined in this website’s Site Settings.

Transparent

Transparent color can be used to erase a background

Off White

Off White is a lower contrast white and is prefered for accessibility.

Off Black

Off Black is a lower contrast black and is prefered for accessibility.

Custom Color CSS Settings

For the site’s color choices, Elementor use CSS custom variables. The naming is identical to that of System Colors, however, instead of a fixed property name, digits are utilized. For instance, the settings for the three examples above are:

  • –e-global-color-12c1498
  • –e-global-color-0a92f32
  • –e-global-color-32982b7
 

Your results will differ. To view the Elementor settings for a specific website’s set of Custom Colors, check the page using the browser’s DevTools, pick an element utilizing one of the colors, and then scroll the Styles panel down to the Elementor kit CSS code. There you will find the variable names and accompanying colors.

System Fonts

System Fonts cannot be defined by Custom Fonts or Typography, but they may be completely styled with their own font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing. The developer may also rename the four primitive System Fonts — though that can be confusing, making them appear to be possible Custom Fonts.

Here, using this website’s current Site Settings is an example of four System Fonts definitions:

Primary
You only get one chance to make a first impression.
Secondary
You only get one chance to make a first impression.
Text
You only get one chance to make a first impression. Make it a good one!
Accent
You only get one chance to make a first impression. Make it a good one!

Custom Fonts

The following table gives us an illustration of applying Custom Fonts. Each of the sentences in the right column is an Elementor Heading with its HTML tag set to span. There is no SEO impact as occurs in using Theme Style, Typography for the HTML tag.

The information entry window for entering a new custom font.To enter a new Custom Font, open the Typography edit  (pencil icon) window and set the Typography to the design requirements for this common font styling. Thus stylings for the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing are used. Additional custom font may be added or any of these replaced or removed with the caveat that in the framework covered by these articles, the Typography use Custom Fonts for their default values.  

A word about the Size setting: A fluid font setting is preferred rather than going through the three to six entries and setting a fixed size or percentage. One entry can be in charge of the entire range. Using breakpoints for separate constant font sizes is now obsolete. 

Here, using this website’s current Site Settings is an example of the seven Custom Fonts definitions:

Title1
You only get one chance to make a first impression.
Title2
You only get one chance to make a first impression.
Title3
You only get one chance to make a first impression. Make it a good one!
Title4
You only get one chance to make a first impression. Make it a good one!
Title5
You only get one chance to make a first impression. Make it a good one!
Title6
You only get one chance to make a first impression. Make it a good one!
Subtitle
You only get one chance to make a first impression.

Typography

Typography

For this article, the interesting element in Site Settings is the Typography element of Theme Style. The section defines fallback style definitions for HTML tags like H1, body, p, and so on.

Body text settings are used for textual material throughout Elementor. The typeface settings clearly define the Text Edit element. The other facet of website typography covered here is header elements.

Body Typography

Typography text consists of just two HTML elements: body text and link text. Both may have color and font styling. Body typography styling will apply to the body HTML sematic element and Link to the a element.

Body

paragraphs

Text entries default to the Design Settings Text entries for color and font styling. 

Link

a tags

The default settings for links (HTML a tags). Please note an article where links are overridden by a custom CSS class. See  Link Styling in Code Snippets.

Typography Headers

H1

Page Headers

You only get one chance to make a first impression.

H2

Article Headers

You only get one chance to make a first impression.

H3

Section Headers

You only get one chance to make a first impression. Make it a good one!

H4

Paragraph Headers

You only get one chance to make a first impression. Make it a good one!

H5

Block Headers (?)

You only get one chance to make a first impression. Make it a good one!
H6

Subblock Headers (?!)

You only get one chance to make a first impression. Make it a good one!

Making a Complete Design System

Connecting the Two

Elementor appears to have two separate systems for styling design elements and HTML tags, and this is correct. There is no need to connect the two. The colors and font styling for headers and text can be customized independently of the Design System‘s Global Colors and Global Fonts. However, this would make using a color from, say, the H2 header anywhere else on the page problematic. One may use, say, a header to make the element’s text section impressive, but that means SEO will interpret it as a site format element when it is not. Design adjustments would be tough if one copied the HEX code or laid out the typeface to fit the Typography settings. However, that concept provides a hint as to how to control the Typography settings.

If the Typography is defined using the system and custom settings in the Design System, designing other elements to match should be simple.

That’s what happens when typography is left to its own devices. The headings use the Primary system settings, the body uses Text, and a link uses Accent. The developer can override this and specify that H1 and H2 should remain Primary but H3 to H6 should be styled in a softer custom color. Similarly, the H1 and H2 do not have to remain set to a system color.

That is what happens when Typography is left in its default state. The headings assume the Primary system settings, the body will have Text, and a link is set with Accent. The developer can override this and say, let H1 and H2 stay at Primary and style H3 to H6 to a softer custom color. Indeed, the H1 and H2 do not have to stay set to a system color either.

The styling of this website set the color of the Primary of System Colors to the design primary color of hsla(38, 39%, 26%, 1), a dark desaturated orange. This served as the H1 and H2 colors while H3,.. H6 to the lighter hsla(38, 20%, 41%, 1) as a custom color. Those header and body colors are then available as Global Colors to any element on the website.

What progress has been made?

The whole Elementor system, including Design System and Typography, has been combined into a single package. The designer was able to define a set of four colors, primary, secondary, text, and accent, in the website’s initial design. These are imported as System Colors into the Elementor builder. The website’s tone and mood will be determined by these four colors. A collection of Custom Colors that support and complement the System Colors can be derived from there. These comprise the website’s palette. The HTML elements’ typography can then be color-adjusted.

The same procedure applies to the fonts used. The fonts and styles were initially imported to Elementor. System Fonts was used for the basic styling. Custom Fonts were then created. It was vital that we establish at least six font styles for HTML headers and one for body text. Those were applied to the H1, H2,…, and body default stylings in Typography to serve as default stylings.

This is now a single framework that will provide a consistent, all-encompassing foundation for development. No longer is there a need to be concerned with styling issues when generating content.

But Wait, There’s More

The post Global Custom Fonts lays out a strategy for importing a set of fluid font sizing CSS custom variables. For this system a set of clamp() functions were externally defined and stored as a code snippet used on this website. That set was brought in and had a set of sizing functions named Title1, Title2,.. Title6, and another named Body. It isn’t hard to guess that these functions were used to set the sizes of the H1, H2,…H6, and text Custom Fonts.