Ripplestyles
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.
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. |
| Body 04. Paragraph Callout Text, 16px | 400 | For important messages that need to stand out using a larger font size. |
| 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.
