Home / Designing Your Website

Design System

Customer Success Team

Last updated on Jun 05, 2024

Design System is a collection of components that enable you to design your website content style according to your preferences. It ensures the organization, features, and style of your website.

To access the Design System, click the Design System icon on the Visual Editor left panel.

The Design System includes:

  • Typography
  • UI Elements
  • Variables

Typography

Typography enables you to customize fonts, font sizes, typefaces, line spacing, and other typographic elements of the text on your website. It is an essential aspect of your website design, as it provides consistency and coherence in how text is presented, ensuring the readability of your website.

To modify the fonts of your website:

  1. Go to Design System >Typography.
  2. Tick the corresponding heading in Typography.
  3. Select the screen size from the Breakpoint drop-down list to adapt the layout to different screen sizes, ensuring an optimal viewing experience on devices like desktops, tablets, and smartphones.
    Tip: To edit or make the breakpoint default, click the Dotted Menu of the corresponding breakpoint, and select Edit or Make Default.
  4. Click Settings in the top right corner to configure the selected heading, make the necessary modifications, and click Apply.
  5. Activate/deactivate the Light/Dark toggle to change the background of the Typography page according to your preferences.

5. Enter the font text and specify its size in Font Presets.

6. Expand the corresponding font preset and enable/disable the toggle to activate or deactivate the font.

7. Hover over the corresponding font and click Delete to remove the font.

Adding a Font

You can add a new font that is not included in the default set of fonts in Typography. This allows you to use specific fonts for texts, headings, titles, etc. on your website.

To do so:

  1. Click + New Font on the Typography page.
  2. Make the necessary configurations.
  3. Click Save.

Tip: To upload a corresponding font, click Upload, then click + New, upload the corresponding font from your computer, and click Save.

Configuring Style Settings

Once you have selected the corresponding font, you can configure the preset settings according to your preferences. To do so, set up the fonts, font sizes, etc. on the Style Settings panel, and click Apply.

Creating a New Preset

You can create a new pre-defined set of design parameters and styles that can be applied to the texts on your website. To do so:

  1. Click + New Preset on the Style Settings panel.
  2. Indicate the preset name and click Save.
  3. Make the corresponding configuration on the Style Settings panel and click Apply.

Tip: To rename, duplicate, delete, and make the preset default, click the Settings icon on the Style Settings panel and select the corresponding option.

UI Elements

UI Elements allow you to design the visual appearance of your website. You can use buttons, text areas, checkboxes, images, input fields, etc., and modify their size, color, shape, spacing, interaction states, and other styling features according to your preferences (see UI Elements).

Variables

Variables are custom properties that allow you to define values that can be referenced and reused throughout your website. Once you modify the variable value the change is reflected wherever the variable is used (see Global Styles). This makes it easier to manage and update the styles of your website.

The following variables are available:

  • Colors
  • Margin
  • Padding
  • Gap
  • Radius
  • Border Width

Colors

The Colors variables refer to a set of colors used to define the visual appearance of various elements within the user interface of your website. You can create a color palette or select from the default color list and apply it to your website.

The following preset colors are available:

  • Custom Colors
  • System Colors (Primitive, Background, Text, Icon, Border)

Adding a Custom Color

To add a new custom color:

  1. Go to Design System > Variables > Colors.
  2. Click + Add New.
  3. Enter the color name.
  4. Select the color group.
  5. Select Create new group and enter the group name, if necessary.
  6. Click the color palette to select the color or select from the default list of system colors.
  7. Click Add New Variable.

Tip: To edit or delete the color variable, click the Dotted Menu on the corresponding color, and select Edit or Delete.

Editing System Colors

To edit system colors:

  1. Go to Design System > Variables > Colors.
  2. Expand the corresponding grouping under System Colors.
  3. Click the corresponding color.
  4. Make the necessary changes in the pop-up window.
  5. Close the window.

Once the color variable is edited, it is automatically updated in Global Styles.

Note: You cannot remove or delete system color variables.

Configuring Color Variable Appearance

To configure how color variables are displayed to you:

  1. Go to Design System > Variables > Colors.
  2. Click the Settings icon on the left side.
  3. Activate/deactivate Activate Appearances toggle.
  4. Select the corresponding default appearance from the list.
  5. Click Done.

System Variables

System variables refer to margin, padding, gap, radius, and border width values. These are predefined custom properties that have values typically used for defining margins, padding, gap, radius, and border width around the element.

Adding a Custom Variable

To add a new custom variable:

  1. Go to Design System > Variables.
  2. Click the corresponding variable on the left side.
  3. Click + Add New.
  4. Enter the variable name and value in the pop-up window that opens.
  5. Click Add New Variable.

Tip: To edit or delete custom variables, hover over the corresponding variable, click the Dotted Menu, and select Edit or Delete.

Editing System Variables

To edit system variables:

  1. Go to Design System > Variables.
  2. Click the corresponding variable on the left side.
  3. Click the Dotted Menu and select Edit.
  4. Make the necessary changes in the pop-up window that opens.
  5. Click Edit Variables.

Note: Once you edit the system variables, they are automatically updated in Global Styles.

 

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.