Modal dialogs, popups, drawers, and toast notifications all share a common characteristic: they appear above the primary content layer. This layering creates specific color challenges that flat page design does not encounter.
The Backdrop
Modal backdrops dim the underlying page to focus attention on the modal. The standard approach: a semi-transparent dark overlay. Use your dark base at 40 to 60% opacity. Too light (20%) and the modal does not feel elevated. Too dark (80%) and it feels claustrophobic. The backdrop also prevents users from thinking they can interact with the dimmed content behind it.
Modal Surface
The modal surface should be your cleanest, most neutral background color. In light mode, this is typically pure white or your light base. In dark mode, it is a surface tone slightly lighter than the page background (to create visible elevation). The surface must be distinct from the backdrop to feel like it is floating above it.
Content Within Modals
Modal content follows the same color rules as page content but with one addition: the close/dismiss action must be clearly visible. A close button using your primary color or a clearly contrasting icon ensures users are never trapped in a modal they cannot dismiss.
Toast Notifications
Toast notifications (brief messages that appear and auto-dismiss) use semantic colors: green for success, red for error, amber for warning, blue for informational. These should match the same semantic colors you use elsewhere in your design system for consistency.
Z-Index and Color Hierarchy
Each overlay level should be slightly different in color treatment. A modal over the page. A confirmation dialog over the modal. A toast over everything. Each layer needs just enough color differentiation to communicate its position in the stack.