Notification & Warning

brand & notifications colors

Alerts

Alerts use the shared .alert base class plus a message type class. In the current CSS, all alerts use the same spacing, border, radius, and shadow structure, then switch color by message type.


Toasts

Toasts use the same notification color system, but appear in a fixed .toast-container. The current JavaScript auto-dismisses all toast messages after about 4 seconds.


Uploaded: Your file was uploaded. - class="toast toast-success"
Error: Network issue occurred. - class="toast toast-error"

Callouts

Callouts use the shared .callout structure with a message type modifier. These are better for embedded guidance in page content than for timed or temporary notifications.


Tip

Use keyboard shortcuts to navigate faster. - class="callout callout-tip"

Important

Verify your account to prevent lockout. - class="callout callout-important"

Feature

You can now sync across multiple devices. - class="callout callout-feature"

Banners

Banners use the shared .banner structure. The current CSS includes .banner-cookie and the visibility helper .is-visible. The JavaScript also supports dismiss buttons with .banner-close.


Field Messages

Field messages are lighter inline feedback patterns. The current CSS includes .msg-error and .msg-hint.


Error: Please enter a valid email address. - class="field-msg msg-error"
Hint: 8–20 characters, use letters and numbers. - class="field-msg msg-hint"

Design Notes

The .todo class is available for internal guide notes and design review markers. It is not a user-facing alert pattern.


DESIGN NOTE: add more contrast! - class="todo"

Quick Class Reference


Pattern Classes Use
Alert alert alert-success
alert alert-error
alert alert-warning
alert alert-info		 Inline page-level status and feedback messages
Toast toast toast-success
toast toast-error
toast toast-warning
toast toast-info		 Temporary status messages inside a .toast-container
Callout callout callout-tip
callout callout-important
callout callout-feature		 Embedded guidance, notes, and emphasized content
Banner banner banner-cookie is-visible Wide notification bars and consent messaging
Field message field-msg msg-error
field-msg msg-hint		 Inline form feedback and hints

Success Colors


Success BG

var: --color-success-bg

class: .bg-success-bg

Hex: #eaf4e9

Success Text

var: --color-success-text

class: .bg-success-text

Reference: var(--color-uvu-green)

Error Colors


Error BG

var: --color-error-bg

class: .bg-error-bg

Hex: #faeae9

Error Text

var: --color-error-text

class: .bg-error-text

Hex: #4a1612

Warning Colors


Warning BG

var: --color-warning-bg

class: .bg-warning-bg

Hex: #fff9e2

Warning Text

var: --color-warning-text

class: .bg-warning-text

Hex: #5a4b00

Info Colors


Info BG

var: --color-info-bg

class: .bg-info-bg

Hex: #eef4f2

Info Text

var: --color-info-text

class: .bg-info-text

Reference: var(--color-dark-green)

Callout Colors


Tip BG

var: --color-callout-tip-bg

class: .bg-callout-tip-bg

Important BG

var: --color-callout-important-bg

class: .bg-callout-important-bg

Feature BG

var: --color-callout-feature-bg

class: .bg-callout-feature-bg

Border Colors


Border

var: --color-border

class: .bg-border

Reference: var(--color-light-grey)

Dark Mode - needs work

It seems that you have reduce motion enabled!