Dialog
Color
| Element | Property | Color token |
|---|---|---|
| Title | Text | $color-text-default |
| Body | Text | $color-text-default |
| Primary action text | Text | $color-text-on-branded |
| Primary action background | Background | $color-action-primary |
| Secondary action | Text | $color-text-branded |
| Icon | Icon | $color-icon-default |
| Eyebrow | Text | $color-text-branded |
Size
Spacing
Typography
| Element | Size & weight | Type token |
|---|---|---|
| 1. Title | 20px, Black | $typography-heading-5 |
| 2. Body | 16px, Medium | $typography-body-1 |
| 3. Primary action | 20px, Black | $typography-heading-5 |
| 4. Secondary action | 20px, Black | $typography-heading-5 |
| 5. Eyebrow | 14px, Bold | TBD |