Home / Designing Your Website

Design System

Taguhi

Last updated on Dec 06, 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.

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

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

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

Adding a Font

You can add a new font 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. If the uploaded font family is removed, the base font family styles are automatically applied in the Public mode.

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

Color variables are a set of colors that define the visual appearance of elements on your website. You can create a color palette or select from the default color list and apply it to your website. Once the color variables are edited or created, they are automatically updated in Global Styles. 

The following options are available:

  • Custom Colors
  • Template’s Colors (Primitive)
  • Styles

Custom Colors

Custom colors are specifically created or selected to meet the particular needs of your project, brand, or product. They are tailored to align closely with your brand’s identity or to achieve a specific design goal.

Adding a Custom Color

To add a new custom color:

  1. Go to Design System > Variables > Colors.
  2. Click + New Variable.
  3. Enter the color name.
  4. Click the corresponding color on the color palette, enter the color's hex code, adjust the RGBA and HSLA values, or select the corresponding color from the list of color variables.

Tip: To delete the color variable, click the x icon on the right side of the corresponding color variable.

Template’s Color (Primitives)

The primitive default color sets are used to create basic color gradations. The primitive color set includes the core variations of color (like the base color, lighter tint, and darker shade) used across the template for a consistent look.

Editing Primitive Default Color Set

To edit the primitive default color set:

  1. Go to Design System > Variables > Colors > Template’s Color.
  2. Click the corresponding color on the color palette, enter the color's hex code, adjust the RGBA and HSLA values, or select the corresponding color from the list of color variables.

Note: You cannot remove the default color sets.

Tip: To duplicate the color set, click the Dotted Menu and select Duplicate.

Creating a New Primitive Set

To create a new primitive set for your template:

  1. Go to Design System > Variables > Colors > Template’s Color.
  2. Click + New Primitive Set.
  3. Click the corresponding color on the color palette, enter the color's hex code, adjust the RGBA and HSLA values, or select the corresponding color from the list of color variables.

Note: You can have up to six color sets.
Tip:

  • To delete the corresponding color, click the x icon next to the color.
  • To duplicate or delete the color set, click the Dotted Menu on the right side of the color set and select Duplicate or Delete Set.

Configuring Color Variable Appearance

To configure how color variables are displayed to you:

  1. Go to Design System > Variables > Colors.
  2. Activate/deactivate the Activate Appearances toggle.
  3. Select the Dark mode or Light mode.

4. Click the Settings icon on the right side.

5. Select the corresponding default appearance from the list.

Styles

Styles are customized color schemes designed to meet the specific needs of your template. This customization ensures that the colors work well within the template's context, aligning with its purpose, content, and user experience.

The styles include:

  • Primary and secondary colors: Main and supporting colors.
  • State colors: Variations for different states of elements, such as hover, active, and disabled states, tailored to the template’s interactive elements.
  • Accent colors: Specific colors used to highlight or emphasize certain parts of the template, such as fields, icons, key text, etc.
  • Background colors: Background Colors that ensure readability and visual hierarchy within your template.

Editing Default Style Set

To edit the default style set:

  1. Go to Design System > Variables > Colors > Styles.
  2. Click the corresponding color on the color palette, enter the color's hex code, adjust the RGBA and HSLA values, or select the corresponding color from the list of color variables.
  3. Click + Add value.
  4. Click the corresponding color on the color palette, enter the color's hex code, adjust the RGBA and HSLA values, or select the corresponding color from the list of color variables.

System Variables

System variables refer to margin, padding, gap, radius, and border width values. These are predefined custom properties with values typically used to define 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.