Interface

Headers

The default margins for headings are: top - double the standard margin, bottom - half the default margin. The margins for text are half the default value.

The header sizes and weights are shown in the table below:

Header level Size Text weight
1 1.5 700
2 1.3 400
3 1.2 400
normal 1 400
small 0.8 400

Transparency

The transparency of elements should always be 80%.

Buttons

Theme: auto
HTML
Theme: auto
HTML

Sizing

Theme: auto
HTML

Types

Theme: auto
HTML
Theme: auto
HTML

Notifications

Notifications are designed as simple rectangles, with the background color set to the base color using a 20% mask, and the text in the base color. Additionally, a lower typeface weight (300) has been applied to the text. The highlighted text should have a weight of 700.

If the text is illegible, it is possible to change the text color, but only to the default gray or white (for dark backgrounds).

Theme: auto
Lorem ipsum solor sit amet.
HTML

Panels

Panels consist of a header, content, and footer, but only the content is required. The color difference for all elements is 20pp, meaning that if the border color is 100%, the header and footer will have their backgrounds lightened by 40%. The text in the header and footer should be bolded relative to the standard text.

Theme: auto
Title
Content
Footer
HTML

Progress bars

The progress bar consists of a background bar and a content bar. The progress bar background is determined according to the rules for determining the background color for text fields.

Theme: auto
HTML

Joining

Content bars can be combined into one progress bar.

Theme: auto
HTML

Sizing

Theme: auto
HTML

Labels

Labels are used to mark important elements on a page. They have top and bottom side margins equal to 1/4 of the standard margin, and left and right side margins equal to 1/2 of the standard margin. The text size in a label is 90% of the base font size.

Theme: auto
Label
HTML

Sizing

Theme: auto
Label (.imd-label-lg)
HTML

Chapters

Code preview