Notification Design System: Toasts, Banners, Modals, and Badges
Design a unified notification system that communicates system feedback, alerts, and updates across all surfaces with consistent priority levels and interaction patterns.
Create a notification taxonomy and design system that ensures users receive the right information at the right time through the right channel, without notification fatigue.
At a glance
Access
Free prompt
Open to copy without upgrading.
Prompt objective
Create a notification taxonomy and design system that ensures users receive the right information at the right time through the right channel, without notification fatigue.
Real use case
A SaaS platform uses 6 different notification patterns across its product: some errors appear as toasts, some as inline messages, some as modals. Users miss critical alerts and are annoyed by redundant notifications.
Customize these fields first
Replace the placeholders with your own context before you run the prompt. That usually improves the first output more than adding more instructions later.
Prompt
Design a complete notification system for [PRODUCT NAME], a [PRODUCT TYPE] with [NUMBER] screens and [NUMBER] user roles.\\\\\\\\n\\\\\\\\n**Notification Taxonomy (by urgency):**\\\\\\\\n\\\\\\\\nLevel 1 — Critical (requires immediate action):\\\\\\\\n- Pattern: Modal dialog or full-screen overlay\\\\\\\\n- Use cases: data loss warning, security alert, payment failure\\\\\\\\n- Behavior: blocks interaction until dismissed\\\\\\\\n- Dismissal: explicit action required (no auto-dismiss)\\\\\\\\n\\\\\\\\nLevel 2 — Warning (needs attention soon):\\\\\\\\n- Pattern: Persistent banner or inline alert\\\\\\\\n- Use cases: subscription expiring, storage nearly full, sync error\\\\\\\\n- Behavior: visible until addressed or dismissed\\\\\\\\n- Dismissal: user-initiated with option to snooze\\\\\\\\n\\\\\\\\nLevel 3 — Info (useful but not urgent):\\\\\\\\n- Pattern: Toast/snackbar notification\\\\\\\\n- Use cases: action confirmed, background task complete, new feature\\\\\\\\n- Behavior: appears briefly, auto-dismisses\\\\\\\\n- Dismissal: auto after [X] seconds or manual swipe/click\\\\\\\\n\\\\\\\\nLevel 4 — Success (positive confirmation):\\\\\\\\n- Pattern: Toast with success styling or inline confirmation\\\\\\\\n- Use cases: save successful, form submitted, file uploaded\\\\\\\\n- Behavior: brief, non-intrusive\\\\\\\\n- Dismissal: auto after [X] seconds\\\\\\\\n\\\\\\\\n**For each notification type, specify:**\\\\\\\\n- Visual design: icon, color, typography, spacing\\\\\\\\n- Position on screen (top-right, bottom-center, inline)\\\\\\\\n- Animation: entry, exit, stacking behavior\\\\\\\\n- Maximum simultaneous notifications\\\\\\\\n- Sound/haptic feedback (when appropriate)\\\\\\\\n- Accessibility: screen reader announcements, focus management\\\\\\\\n\\\\\\\\n**Notification Center:**\\\\\\\\n- Aggregated notification list\\\\\\\\n- Filtering by type and date\\\\\\\\n- Mark as read/unread\\\\\\\\n- Notification preferences per category\\\\\\\\n- Digest email option\\\\\\\\n\\\\\\\\n**Anti-Patterns to Avoid:**\\\\\\\\n- Notification stacking (more than 3 visible)\\\\\\\\n- Critical info in auto-dismissing toasts\\\\\\\\n- Using modals for non-critical information\\\\\\\\n- Notification fatigue (too many notifications)\\\\\\\\n- Inconsistent patterns for same urgency level\\\\\\\\n\\\\\\\\nInclude Figma component specs and code implementation for [FRAMEWORK].
Open directly in an AI — the text is pre-filled:
How to use this prompt
- 1Replace the key placeholders first: PRODUCT NAME, PRODUCT TYPE, NUMBER, FRAMEWORK.
- 2Replace any bracketed placeholders like [this] with your own context.
- 3Add extra background information when you want more tailored results.
- 4Combine multiple prompts in one conversation when you need a richer output.
- 5Save your best-performing prompts so they are easy to reuse later.
Next best step
Open the guide first, then branch only if you still need more.
A starter guide to the first prompt categories and patterns worth using when you need better output without prompt guesswork.
If this prompt is close but not quite right, generate variants next. If the job is recurring, move into the course library after the guide.
Related prompts
View allColor System for Digital Products with WCAG AA Accessibility Compliance
Generates a complete color palette with semantic tokens, light/dark mode support, and WCAG AA compliance validation.
Best for
Define a robust, accessible color system that works across all UI contexts, reducing ad hoc decisions and ensuring visual consistency throughout the product.
Typography Hierarchy System for Responsive Web and Mobile Interfaces
Defines a complete typographic scale with fluid typography, weights, and spacing for web and mobile platforms.
Best for
Establish a typographic hierarchy that ensures readability across all resolutions, from mobile 320px to desktop 1920px, using a modular scale system.
Responsive Layout System with Grid Architecture for Complex Data Dashboards
Designs a flexible grid system for dashboards featuring cards, tables, and charts that adapt to any viewport size.
Best for
Create a layout system based on a responsive grid that organizes dense dashboard information clearly, prioritizing data hierarchy and optimal information density for each screen size.
Micro-Interaction Library for Engagement and Visual Feedback
A catalog of micro-interactions for component states, transitions, and visual feedback that elevate perceived product quality.
Best for
Design a cohesive micro-interaction system that communicates states, actions, and transitions intuitively, increasing perceived product quality.
Explore other prompt categories
Move sideways into adjacent libraries when the current category is not the full answer.
Free browsing stays open. Premium prompts unlock the reusable workflow layer.
Use the guides and role paths to validate the job first. Upgrade when you want the full prompt text, editable premium prompts, and the surrounding course paths in one place.
Free access
- Browse guides, role paths, and category pages.
- Preview prompts before you decide to upgrade.
- Find the right starting point without friction.
Membership access
- Unlock premium prompts and the full copy text.
- See more workflow paths and course connections.
- Keep the reusable templates in one place.
