Alert: style
This page documents visual specifications such as colour, typography, structure, and size.
| State | Element | Property | Colour reference | Colour token |
|---|---|---|---|---|
| Info | Container | background colour |
Feedback background info
|
$alert-background-info |
| border colour |
Feedback border info
|
$alert-border-info | ||
| Message | text colour |
Feedback message info
|
$alert-message-info | |
| Body text | text colour |
Feedback body info
|
$alert-note-info | |
| Success | Container | background colour |
Feedback background success
|
$alert-background-success |
| border colour |
Feedback border success
|
$alert-border-success | ||
| Message | text colour |
Feedback message success
|
$alert-message-success | |
| Body text | text colour |
Feedback body success
|
$alert-note-success | |
| Warning | Container | background colour |
Feedback background warning
|
$alert-background-warning |
| border colour |
Feedback border warning
|
$alert-border-warning | ||
| Message | text colour |
Feedback message warning
|
$alert-message-warning | |
| Body text | text colour |
Feedback body warning
|
$alert-note-warning | |
| Error | Container | background colour |
Feedback background error
|
$alert-background-error |
| border colour |
Feedback border error
|
$alert-border-error | ||
| Message | text colour |
Feedback message error
|
$alert-message-error | |
| Body text | text colour |
Feedback body error
|
$alert-note-error |
Typography
Write alert notifications in sentence case, meaning only the first word and any proper nouns are capitalised. Alert messages should be concise and direct, clearly conveying the most important piece of information at a glance.
|
Element
|
Size (px/rem)
|
Weight
|
Line height (px/rem)
|
Letter spacing
|
Token
|
|---|---|---|---|---|---|
| Message | 24 / 1.5 | Medium – 500 | 32 / 2 | 0px | $title-01 |
| Note | 16 / 1 | Light – 300 | 24 / 1.5 | 0.16px | $body-02 |
Fusce at nisi arcu. Quisque sed dolor nec dui scelerisque dapibus. Sed at purus at sem aliquet luctus.
Fusce at nisi arcu. Quisque sed dolor nec dui scelerisque dapibus. Sed at purus at sem aliquet luctus.
Fusce at nisi arcu. Quisque sed dolor nec dui scelerisque dapibus. Sed at purus at sem aliquet luctus.
Size
The width of an alert varies depending on its content and layout. Alerts can expand to fill the width of the container or content area they are placed in. The height is determined by the length of the content, which should be kept brief and ideally limited to two lines of text.