Alerts
Success: Operation completed successfully. - class="alert alert-success";
Error: Something went wrong. - class="alert alert-error";
Warning: Please double-check your information. - class="alert alert-warning";
Note: Your session will expire soon. - class="alert alert-info";
Toasts - appear bottom right - then fade out
Uploaded: Your file was uploaded. - class="toast toast-success";
Error: Network issue occurred. - class="toast toast-error";
Banners
Field Messages
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 - Messages
DESIGN NOTE: add more contrast! - class="todo";
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: #f0e8e8
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)
Border Colors
Border
var: --color-border
class: .bg-border
RGBA: rgba(0, 0, 0, 0.08)
Dark Mode - needs work
It seems that you have reduce motion enabled!