Free Components guideline (Figma Community free edition)
https://www.figma.com/file/ELq7l311HGQtHVgs9f1k84/Dialect-%E2%80%93-Design-System-%26-Component-Library-(Free)-(Community)

- **font-size: 10px**
- Limited usage, use in places where text is mandatory and space is tight. For example, it is used for any disclaimer text that may appear in a purchase flow. It’s also used as the initials in a list of SharePoint sites in the left nav. Recommended line height is 14px.
- **font-size: 12px**
- Metadata in file lists and grid views, denotes any activity on items (number of views, shares or @mentions, timestamps), sharing permissions, persona names and in tooltips. Recommended line height is 16px.
- **font-size: 14px**
- Commands and controls (left nav, Teams channels, command bar, checkbox, dropdown menu, toggle, radio button, button text and links), in file or document titles and as body text. Recommended line height is 20px.
- **font-size: 16px**
- Subject line in mail, SharePoint article body, marketing emails as file name and body text. Recommended line height is 22px.
- **font-size: 18px**
- Header for Team’s channel names. Recommended line height is 24px.
- **font-size: 20px**
- Page and pane headers, suite nav, titles in teaching bubbles, dialogs and file hover cards. Recommended line height is 28px.
- **font-size: 24px**
- Marketing email header. Recommended line height is 32px.
- **font-size: 28px**
- Page titles. Recommended line height is 36px.

**Breakpoint Range**
- small
- 320px - 479px
- medium
- 480px - 639px
- large
- 640px - 1023px
- extra large
- 1024px - 1365px
- extra extra large
- 1366px - 1919px

### Color Codes
- **Warning** #fff4ce
- **Severe Warning** #fed9cc
- **Error Block** #a80000
- **Success Icon** #107c10