Articulink

Brand Guidelines

v1.0March 2026

Modals & Overlays

Modals interrupt the user flow for important actions. Use sparingly and always provide a clear way to dismiss.

Basic Modal

Standard modal dialog with title, content, and action buttons.

Backdrop: bg-abyss/40 backdrop-blur-sm | Content: bg-bg-card rounded-2xl shadow-lg

Confirmation Modal

Destructive or important action confirmation with warning styling.

Icon: bg-error/10 text-error | Destructive button: bg-error text-white hover:bg-red-600

Form Modal

Modal containing a form for data entry.

Drawer

Slide-out panels for secondary content or detailed views.

Drawer: fixed right-0 max-w-md bg-bg-card shadow-lg animate-slide-in

Toast Notifications

Temporary notifications that appear and auto-dismiss. Position in bottom-right or top-right.

Appointment booked!

Your session is confirmed for March 5th.

Something went wrong

Please try again later.

New message received

Your therapist sent you a message.

Toast: p-4 rounded-xl bg-[status]/10 border border-[status]/20 | Position: fixed bottom-4 right-4

Usage Guidelines

Do
  • Provide clear close/dismiss options
  • Use for important, interruptive actions
  • Keep modal content focused and concise
  • Trap focus within the modal
  • Allow closing with Escape key
Don't
  • Use modals for non-essential content
  • Open modals from other modals
  • Block users without a way to dismiss
  • Put long forms in small modals
  • Use modals when inline editing works