Right Section

Article Overview

The following article describes how to edit your theme using the options in its right section.

Right Section Editing Options

(See Figure 1)

Using the left section you can edit your theme branding:

1. Colors
2. Typography

Figure 1: Left Section

Colors

(See Figure 2 and Figure 3)

Here you set colors according to different categories. The categories are used when editing component styles. In addition, the changes are reflected in the Components tab. The categories are:

• Primary
• Secondary
• Background
• Border
• Supporting-text
• Error
• Text
• Focus-ring
• Heading
• Label
• Placeholder

Figure 2: Colors

You can add additional categories and set their color by clicking the + Add Color option (3). In addition, you can change the color of each category by clicking it and setting a new color.

Figure 3: Adding/Editing

Typography

(See Figure 4 and Figure 5)

Here you set the typography of different text styles. The styles are reflected in the Components tab and when editing components. The text styles are:

• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Normal
• Label
• Supporting Text
• Background
• Border
• Supporting-text

Figure 4: Typography

You change the properties of each style by clicking it:

• Font Family - according to the available fonts uploaded to the Assets.
• Size - the selected size will be displayed next to the name of the style in px format:
  • 0.625rem
  • 0.75rem
  • 0.875rem
  • 1rem
  • 1.125rem
  • 1.25rem
  • 1.5rem
  • 1.75rem
  • 1.875rem
  • 2rem
  • 2.rem
• Weight:
  • Light
  • Normal
  • Sem-bold
  • bold
  • black

Figure 5: Editing