Foundation

Typography

To present content clearly and efficiently, we use the Inter font family in our products. Inter is an open source font created to aid in legibility and readability across different devices and screens. Its multitude of weights and styles allow us to pick contrasting weights to establish a clear visual hierarchy in our pages. Inter supports almost all Latin, Greek, and Cyrillic languages.

Download Inter

Title & Heading Styles

Name and Size Weight Use Cases
Heading 01. Page Title, 30px 700 Page titles. Every non-immersive page must have a page title.
Heading 02. Secondary Page Title, 24px 600 Content area page titles. Used above content/section headings.
Heading 03. Tertiary Page Title, 22px 400 Content area section headings in pages.
Heading 04. Card Title, 18px 600 Used for titles in cards, panels, flyouts, modals, and dialogs.
Heading 05. Section Title, 16px 500 May be used for section titles within cards, panels, and flyouts.
Heading 06. EYEBROW TITLE, 14px 300 All caps. Used above a header title in modal, panel, and flyout headers.
Heading 07. TABLE COLUMN HEADER, 12px 700 All caps. Used for column headers in tables and lists.

Body & Link Styles

Name and Size Weight Use Cases
Body 01. Paragraph Text, 14px 400 Default paragraph text style for all body text.
Body 02. Paragraph Emphasis Text, 14px 600 For emphasis and distinction within body text.
Body 03. Timestamp, 14px 400 For timestamps and status messages.
Link 01. Link Text, 14px 700 For links, inline or otherwise.

Line Length

With our baseline set at 14px text, we set our max line width to be 42ems (588px), or about 90 characters in paragraph text.

In a compound component like Select or Action Menu, child components are rendered in the parent's slot element, part of its shadow DOM tree. Slots essentially serve as a placeholder for markup that you the developer define in the light DOM tree, like <wm-menuitem>, <wm-option>, text content, or other child elements.

The browser distributes the child elements defined in the light DOM into the shadow DOM of the parent. The result is a flattened DOM tree—a merger of the the light DOM and the shadow DOM. This flattened tree is what you see in DevTools and what is rendered on the page.

With the standard implementation of the component, dynamically updating the child items will throw an error. Elm's efficient diffing of the DOM will register that only the child items have changed and try to update them, but the component has already been composed.

Rendering the component in a Keyed node and giving it a dynamic id will cause the entire component, rather than just the child items, to render anew, avoiding the error.