Modals appear as a temporary overlay on top of a webpage’s content. They are often used to display additional information, notifications, or interactive components without requiring users to navigate to another website.
Color
| Element | Property | Color token |
|---|
| Container | background-color | $layer-02 |
| Header label | text color | $text-primary |
| Header | text color | $text-secondary |
| Content | text color | $text-primary |
| Close icon | fill | $icon-secondary |
| Page overlay | color | $overlay |
Typography
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Label | 14 / 0.875 | Semibold / 600 | $heading-compact-02 |
| Heading | 22 / 1.375 | Regular / 400 | $heading-06 |
| Content | 14 / 0.875 | Regular / 400 | $body-compact-02 |
