A curated list of SaaS UI workflow patterns used across modern B2B and B2C SaaS platforms.

ui-patterns-list.md

Common SaaS Workflow Patterns

Note: The workflow patterns below are ordered by estimated usage frequency, based on navigation audit data and common SaaS conventions.

This document curates and describes common UI workflow patterns found in leading B2B and B2C SaaS platforms (e.g., Notion, Airtable, Figma, Asana, HubSpot, Linear).

Each pattern includes:

• A clear flow description
• Real-world examples
• Benefits and use cases
• Suggested design system components (with atomic design classification)
• Gherkin scenarios for behavior-driven development
• Accessibility considerations

Intended for designers, engineers, and product managers seeking to build accessible, consistent, and user-friendly SaaS applications.

---

Viewport Responsiveness Considerations

Modern SaaS applications must provide a seamless experience across all device sizes and orientations. All patterns and components described in this document should adhere to the following responsive design principles:

• Adaptive Layouts: Layouts and components must adapt to various screen sizes (desktop, tablet, mobile) using responsive breakpoints.
• Content Reflow: Ensure no content is lost or inaccessible on smaller screens. Use stacking, collapsing, or reordering as needed.
• Flexible Grids: Avoid fixed-width layouts; use flexible grids and containers that scale with the viewport.
• Touch Targets: All interactive elements must have touch targets of at least 44x44px on mobile devices.
• No Horizontal Scrolling: Prevent horizontal scrolling except for intentionally scrollable regions (e.g., carousels).
• Responsive Navigation: Use appropriate navigation patterns for smaller screens (e.g., hamburger menus, bottom navigation).
• Font and Spacing: Adjust font sizes and spacing for readability on all devices.
• Testing: Test all patterns on multiple devices and orientations to ensure usability and accessibility.

---

Table of Contents

• AppShell (with Accessibility Landmarks & Skip Links)
• Global Search → Instant Preview → Go to Full Page
• Sidebar Nav → Subsection Tree → Detail Panel
• Settings / Configuration Page
• List → Details Drawer
• Inline Add/Create → Modal Confirm → Return to Origin
• Side Filter Panel
• Search + Filter → Data Table → Bulk Action Toolbar
• User Action → Slide-In "Undo" Snackbar
• Multi-Step Wizard / Stepper
• List → Details Modal → Edit Inline
• Create/Edit → Full screen Task Modal → Single step form submission → Return to Origin
• Create/Edit → Full screen Task Modal → Multi-Step Wizard → Return to Origin
• Bulk Actions with Data Table
• List → Candidate Profile → Actions
• Requisitions List → Requisition Details → Pipeline/Analytics
• Form → Auto-Save → Confirmation Toast
• Preview Before Submit
• Confirmation Dialog / Destructive Action
• Notification → Deep Link → Inline Action or Details
• Performance Review → Multi-Tab Feedback → Save Progress → Submit
• Notification/Assignment → Interview Scorecard → Submit
• Onboarding Progress → Task Assignment
• Time Off Calendar → Request Modal → Conflict Check → Submit
• Bulk Import → Field Mapping → Validation → Error Resolution
• Goal Setting → Cascade Down → Alignment View → Check-ins
• Compensation Overview → Total Rewards → Breakdown → What-If
• 360 Review → Anonymous Collection → Aggregate View → Insights
• Policy Library → Version Control → Acknowledgment Tracking
• Schedule View → Shift Swap → Available Matches → Request
• Org Chart → Node Click → Team Overview → Drill Down
• Mobile Clock In → Geofence Verification → Photo Capture → Confirm
• Command Palette (⌘K) → Jump to / Perform Action
• Form Builder / Editor → Live Preview Panel
• Headcount Planning → Scenario Builder → Budget Impact → Approval
• Exit Interview → Workflow Trigger → Task Distribution → Completion
• Kanban Board → Card Click → Side Panel / Full Page

---

Atomic Design Terminology

Before diving into specific UI patterns, let's establish a shared vocabulary using atomic design principles. This methodology breaks down interfaces into fundamental building blocks that combine to create increasingly complex components:

• Atoms: The basic building blocks - pure UI elements that can't be broken down further
• Molecules: Simple combinations of atoms that form small, reusable components
• Organisms: More complex assemblies that form distinct sections of an interface
• Templates: Page-level structures that arrange organisms into a layout
• Pages: Specific instances of templates with real content

---

Foundational Layout Templates

These foundational layout templates serve as the core building blocks for most enterprise UIs. They can be combined and adapted to create more complex patterns:

• Admin View (AV): A layout combining navigation, data tables, filters, and action buttons for managing system data or settings.
• Analytics View (ANV): Data visualization layout with charts, filters, and drill-down capabilities.
• Blank State (BS): Empty state layout with guidance and calls-to-action for new or empty sections.
• Board View (BV): Flexible layout for visual organization (e.g., pinboard, moodboard).
• Calendar View (CV): Date-based layout for events, tasks, or bookings.
• Card View (CDV): Grid or masonry layout of cards, each representing an item or entity.
• Details View (DV): Focused display of a single item's details, often with tabs or sections.
• Document Management View (DMV): A layout for browsing, organizing, uploading, and managing documents or files. Typically includes folder navigation, file previews, bulk actions, and metadata display.
• Document View (DOCV): Rich content or document display, often with editing or commenting.
• Edit View (EV): Form-based layout for editing an existing item.
• Gallery View (GV): Visual grid of images or media.
• Inbox View (IV): Stream or queue of messages, notifications, or tasks, often with batch actions.
• Kanban View (KV): Board layout with columns and draggable cards for workflow/status management.
• Landing Page (LP): A welcoming, high-level glance at multiple content types (banner, tasks, widgets, mini lists, etc.).
• List View (LV): Tabular or linear presentation of items, often with sorting, filtering, and bulk actions.
• Modal/Drawer (MD): Overlay or slide-in for focused tasks or details without leaving context.
• New/Create View (NCV): Form-based layout for creating a new item, often with guidance or steps.
• Org/Tree View (OTV): Hierarchical navigation or visualization (e.g., org chart, file tree).
• Overview Page (OP): A scoped glance at a single content set (e.g., project overview, team overview).
• Split Pane (SP): Side-by-side panels for master-detail or editing-preview scenarios.
• Settings View (SV): A layout for managing system, user, or integration settings, typically organized by tabs, accordions, or sections. Centralizes configuration for users and admins, supports discoverability, and reduces support burden by making options self-serve.

---

AppShell (with Accessibility Landmarks & Skip Links)

Built With: Layout Template + Navigation + Main Content + Footer

Flow:
The AppShell provides the persistent structure for SaaS applications, including navigation (sidebar/topbar), main content area, and optional footer. It ensures consistent layout, navigation, and accessibility across all pages.

Examples: Jira, Notion, Figma, Linear, Slack

Benefits:

• Consistent navigation and layout across the app
• Improves accessibility and keyboard navigation
• Reduces cognitive load for users

Suggested Components:

• Sidebar (Organism / Layout Template)
• Topbar/Header (Organism / Layout Template)
• MainContent (Template)
• Footer (Template)
• SkipLink (Molecule)
• Landmark roles (<nav>, <main>, <footer>)
• FocusRing (Molecule)

Gherkin Scenarios:

Scenario: Use skip link to jump to main content
  Given I am on any page in the app
  When I press 'Tab' from the top of the page
  Then I should see a "Skip to main content" link
  When I activate the skip link
  Then focus should move to the main content area

Accessibility Considerations:

• Skip Links:
  • Provide a visible "Skip to main content" link as the first focusable element.
  • Ensure the skip link is visible on focus and moves keyboard focus to the main content.
• Landmarks:
  • Use semantic HTML5 landmarks: <nav>, <main>, <header>, <footer>.
  • Use ARIA roles (role="navigation", role="main", etc.) as needed for compatibility.
• Keyboard Navigation:
  • All navigation and content must be accessible via keyboard (Tab, Shift+Tab, Enter, Arrow keys).
  • Provide visible focus indicators for all interactive elements.
• Screen Reader Support:
  • Landmarks and skip links help screen reader users quickly navigate between major sections.
  • Ensure headings and regions are logically structured.
• Color Contrast:
  • All text and interactive elements must meet WCAG AA contrast requirements.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Global Search → Instant Preview → Go to Full Page

Built With: Landing Page + List View + Details View + Modal/Drawer

Flow: Global search bar, suggestions show inline; hover or click, preview panel; click to go to page.

Examples: Linear, Slack

Benefits: Speeds up navigation across large datasets or pages.

Suggested Components:

• SearchInput (Molecule)
• Autocomplete/SuggestionList (Molecule)
• PreviewPanel (Organism / Layout Template)
• ListItem (Molecule)
• Avatar (Component)
• Tag/Badge (Component)

Gherkin Scenarios:

Scenario: Preview and navigate from global search
  Given I am on any page
  When I type in the global search bar
  Then I should see instant suggestions
  When I hover over a suggestion
  Then a preview panel should appear
  When I click a suggestion
  Then I should be taken to the full page for that item

Accessibility Considerations:

• Search input and suggestions must be keyboard accessible.
• Use ARIA roles for autocomplete and preview panel.
• Announce suggestion and preview changes to screen readers.
• Ensure sufficient color contrast and focus indicators.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Sidebar Nav → Subsection Tree → Detail Panel

Built With: Org/Tree View + Details View + Split Pane

Flow: User clicks nested items in sidebar, tree expands; selects final node, panel or page displays content.

Examples: Figma (file browser), Confluence

Benefits: Works well for hierarchical structures (e.g., docs, folders).

Suggested Components:

• Sidebar (Organism / Layout Template)
• TreeView (Organism)
• Panel (Organism / Layout Template)
• ListItem (Molecule)
• Button (Component)
• Breadcrumbs (Molecule)

Gherkin Scenarios:

Scenario: Navigate to detail via sidebar tree
  Given the sidebar is visible
  When I expand a tree node and select a subsection
  Then the detail panel should display the selected content

Accessibility Considerations:

• Sidebar and tree navigation must be keyboard accessible (arrow keys, tab, enter).
• Use ARIA roles for tree and panel (role="tree", role="treeitem", role="region").
• Announce navigation and content changes to screen readers.
• Provide visible focus indicators and sufficient color contrast.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Settings / Configuration Page

Flow Description:
A dedicated page or section for managing system, user, or integration settings, typically organized by tabs, accordions, or sections.

Real-World Examples:

• User profile settings (e.g., Google, Slack)
• Integration setup (e.g., Zapier, BambooHR)
• Notification preferences (e.g., Jira)

Benefits and Use Cases:

• Centralizes configuration for users and admins
• Supports discoverability and organization of settings
• Reduces support burden by making options self-serve

Suggested Design System Components (with atomic design classification):

• Tabs or Accordion (Molecule)
• Form Fields (Component)
• Save/Cancel Buttons (Component)
• Section Headings

Gherkin Scenarios for Behavior-Driven Development:

Scenario: Update a setting
  Given I am on the settings page
  When I change a setting and save
  Then the new setting should be applied

Accessibility Considerations:

• All controls and navigation must be keyboard accessible
• Announce changes and errors to screen readers
• Provide clear labels and instructions
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

List → Details Drawer

Built With: List View + Details View + Modal/Drawer

Flow: User lands on a list or data grid, clicks a row; details appear in a side drawer (usually right-side).

Examples: Airtable, Linear

Benefits: Non-destructive, keeps user in context.

Suggested Components:

• DataTable (Organism)
• Drawer (Molecule / Layout Template)
• Button (Component)
• SearchInput (Molecule)
• Pagination (Molecule)
• Avatar (Component)
• Tag/Badge (Component)
• Tooltip (Molecule)

Gherkin Scenarios:

Scenario: View details in a drawer from a list
  Given I am on the data list page
  When I click on a row in the data table
  Then a details drawer should appear showing the row's information

Accessibility Considerations:

• Ensure the drawer is reachable and closable via keyboard (e.g., Esc key, tab navigation).
• Use appropriate ARIA roles (e.g., role="dialog" for the drawer).
• Set focus to the drawer when it opens and return focus to the triggering element when it closes.
• Ensure sufficient color contrast for all text and interactive elements.
• Announce drawer opening/closing to screen readers.
• Provide visible focus indicators for all interactive elements.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Inline Add/Create → Modal Confirm → Return to Origin

Built With: List View + New/Create View + Modal/Drawer

Flow: User clicks "+" inline, modal to input; on submit, modal closes and user returns to the context.

Examples: ClickUp, Airtable

Benefits: Keeps workflows uninterrupted.

Suggested Components:

• Button (Add) (Component)
• Modal (Molecule / Layout Template)
• Form (Organism)
• InputField (Component)
• Toast (Molecule)

Gherkin Scenarios:

Scenario: Add item inline and confirm in modal
  Given I am viewing a list
  When I click the '+ Add' button
  Then a modal should open for input
  When I submit the form
  Then the modal should close and the new item should appear in the list

Accessibility Considerations:

• Modal must trap focus and be dismissible via keyboard.
• Use ARIA roles and announce modal state changes.
• Ensure all form fields have labels and clear instructions.
• Return focus to the add button after modal closes.
• Provide visible focus indicators and sufficient color contrast.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Side Filter Panel

Flow Description:
A collapsible side panel for filtering or configuring data views, often used alongside tables or lists for power-user workflows.

Real-World Examples:

• Filtering candidate lists (e.g., Greenhouse, Lever)
• Configuring analytics (e.g., ChartHop)
• Adjusting dashboard content (e.g., HubSpot)

Benefits and Use Cases:

• Enables complex filtering without leaving context
• Supports power users and advanced workflows
• Keeps main content area uncluttered

Suggested Design System Components (with atomic design classification):

• SidePanel (Organism)
• Filter Controls (Molecule)
• Apply/Reset Buttons (Component)

Gherkin Scenarios for Behavior-Driven Development:

Scenario: Filter data using side panel
  Given I am viewing a data table
  When I open the filter panel and select filters
  Then the table should update to reflect the filters

Accessibility Considerations:

• Panel and controls must be keyboard accessible
• Announce panel open/close to screen readers
• Provide visible focus indicators
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Search + Filter → Data Table → Bulk Action Toolbar

Built With: List View + Modal/Drawer

Flow: User searches or filters, selects items in a list; toolbar appears with bulk actions (delete, export, tag).

Examples: HubSpot, Mailchimp

Benefits: Supports power users managing large data sets.

Suggested Components:

• SearchInput (Molecule)
• FilterDropdown (Molecule)
• DataTable (Organism)
• Checkbox (Component)
• BulkActionToolbar (Molecule)
• Button (Component)
• Pagination (Molecule)
• Tag/Badge (Component)

Gherkin Scenarios:

Scenario: Perform bulk action on filtered data
  Given I have filtered the data table
  When I select multiple rows
  Then a bulk action toolbar should appear
  When I click the delete button
  Then the selected rows should be deleted

Accessibility Considerations:

• Ensure all controls (search, filter, checkboxes, toolbar) are keyboard accessible.
• Use ARIA roles and states for selected rows and toolbar actions.
• Provide clear labels for all controls and actions.
• Announce bulk action toolbar appearance/disappearance to screen readers.
• Ensure sufficient color contrast and focus indicators.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

User Action → Slide-In "Undo" Snackbar

Built With: List View + Modal/Drawer

Flow: User deletes or completes something; toast appears with undo option.

Examples: Gmail, Trello

Benefits: Gives confidence in taking fast actions.

Suggested Components:

• Snackbar/Toast (Molecule)
• Button (Undo) (Component)
• IconButton (Molecule)

Gherkin Scenarios:

Scenario: Undo a user action from snackbar
  Given I have deleted an item
  When the snackbar appears
  And I click 'Undo'
  Then the item should be restored

Accessibility Considerations:

• Snackbar/toast must be announced to screen readers (e.g., aria-live).
• Undo button must be keyboard accessible and have visible focus.
• Snackbar should not obscure important content.
• Ensure sufficient color contrast.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Multi-Step Wizard / Stepper

Flow Description:
Guides users through a linear, step-by-step process for complex workflows, with clear progress indication and navigation between steps.

Real-World Examples:

• Onboarding flows (e.g., BambooHR, Gusto)
• Offer letter creation (e.g., Workday)
• Performance review setup (e.g., Lattice)

Benefits and Use Cases:

• Reduces cognitive load by breaking up complex tasks
• Ensures data is collected in a logical sequence
• Allows users to review and edit previous steps

Suggested Design System Components (with atomic design classification):

• Stepper (Molecule/Organism)
• Progress Indicator (Molecule)
• Form (Organism)
• Button (Component)

Gherkin Scenarios for Behavior-Driven Development:

Scenario: Complete a multi-step wizard
  Given I am on the first step of a wizard
  When I complete the required fields and click "Next"
  Then I should advance to the next step
  When I reach the final step and submit
  Then the process should be completed and I should see a confirmation

Accessibility Considerations:

• Announce step changes to screen readers
• Ensure all controls are keyboard accessible
• Provide clear focus management and visible indicators
• Allow users to review/modify previous steps
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

List → Details Modal → Edit Inline

Built With: List View + Details View + Modal/Drawer

Flow: Clicking a list item opens a modal with full details, with inline editing or an edit button.

Examples: Intercom, Asana

Benefits: Good for quick edits without full page transitions.

Suggested Components:

• DataTable/List (Organism)
• Modal (Molecule / Layout Template)
• Form (Organism)
• InlineEditField (Molecule)
• Button (Component)
• Avatar (Component)
• Tag/Badge (Component)
• Tooltip (Molecule)

Gherkin Scenarios:

Scenario: Edit details inline in a modal
  Given I am viewing a list of items
  When I click an item
  Then a modal with item details should open
  When I edit a field inline and save
  Then the changes should be reflected in the list

Accessibility Considerations:

• Modal must trap focus while open and be dismissible via keyboard (Esc key, close button).
• Use aria-modal="true" and role="dialog" on the modal container.
• Provide clear labels and instructions for inline edit fields.
• Announce modal opening/closing to screen readers.
• Ensure all form fields have associated labels.
• Provide visible focus indicators and ensure color contrast.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Create/Edit → Full screen Task Modal → Single step form submission → Return to Origin [NEW PATTERN]

Description: A full-screen modal for creating or editing a task, with a single-step form and return to the originating context on submit.

TODO: Add detailed flow, examples, components, Gherkin, and accessibility notes.

---

Create/Edit → Full screen Task Modal → Multi-Step Wizard → Return to Origin [NEW PATTERN]

Description: A full-screen modal for creating or editing a task, using a multi-step wizard, returning to the originating context on completion.

TODO: Add detailed flow, examples, components, Gherkin, and accessibility notes.

---

Bulk Actions with Data Table [NEW PATTERN]

Description: A pattern for performing bulk actions (delete, tag, export, etc.) on selected rows in a data table, with clear feedback and undo support.

TODO: Add detailed flow, examples, components, Gherkin, and accessibility notes.

---

List → Candidate Profile → Actions

Flow Description:
User starts on the Candidate List or Pipeline. They click a candidate's name or row, which opens the Candidate Profile page. From here, they can navigate between tabs (Resume, Feedback, Activity), take actions (move stage, send offer), and return to the list or proceed to related workflows (e.g., schedule interview).

Real-World Examples:

• Greenhouse: Candidate profile with tabs for application, interviews, scorecards, and activity
• Lever: Candidate profile with timeline, feedback, and resume
• Workday: Candidate record with status, documents, and actions

Benefits and Use Cases:

• Centralizes all candidate-related data and actions
• Streamlines recruiting workflows
• Supports collaboration among recruiters and hiring managers

Suggested Design System Components (with atomic design classification):

• ProfileHeader (Organism)
• Tabs (Molecule)
• Timeline/Activity Feed (Organism)
• ResumeViewer (Organism)
• FeedbackPanel (Organism)
• ActionButtons (Component)
• StatusBadge (Component)

Gherkin Scenarios for Behavior-Driven Development:

Scenario: View and update candidate profile
  Given I am viewing a candidate profile
  When I select the 'Interviews' tab
  Then I should see all interview feedback for the candidate
  When I click 'Move to Offer'
  Then the candidate's status should update to 'Offer'

Accessibility Considerations:

• All tabs and actions must be keyboard accessible
• Announce tab changes and status updates to screen readers
• Ensure sufficient color contrast and focus indicators
• Provide clear labels for all sections and actions
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Requisitions List → Requisition Details → Pipeline/Analytics

Flow Description:
User starts on the Requisitions List or Dashboard. Selecting a requisition opens the Requisition Details page, where they can view job info, see the candidate pipeline, access analytics, and perform actions (edit, close, assign team). From here, they can drill into individual candidates or return to the requisition list.

Real-World Examples:

• Greenhouse: Requisition details with job info, pipeline, and analytics
• Workday: Job requisition page with candidates, status, and actions
• Lever: Job posting details with candidate funnel and activity

Benefits and Use Cases:

• Centralizes job opening management
• Provides visibility into hiring progress and bottlenecks
• Supports collaboration and compliance

Suggested Design System Components (with atomic design classification):

• DetailsHeader (Organism)
• Tabs or Sections (Molecule)
• CandidatePipeline (Organism)
• AnalyticsPanel (Organism)
• EditButton (Component)
• StatusIndicator (Component)

Gherkin Scenarios for Behavior-Driven Development:

Scenario: Review requisition details and pipeline
  Given I am viewing a requisition details page
  When I select the 'Pipeline' tab
  Then I should see all candidates and their current stages
  When I click 'Edit Requisition'
  Then I should be able to update the job details

Accessibility Considerations:

• All navigation and actions must be keyboard accessible
• Announce tab changes and pipeline updates to screen readers
• Ensure clear labels and sufficient color contrast
• Provide focus indicators for all interactive elements
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Form → Auto-Save → Confirmation Toast

Built With: Edit View + Modal/Drawer

Flow: User enters data, auto-save or explicit save; non-intrusive toast confirms success.

Examples: Notion, Figma

Benefits: Low friction, especially in collaborative environments.

Suggested Components:

• Form (Organism)
• InputField (Component)
• Button (Component)
• Toast (Molecule)
• Spinner/Loader (Component)

Gherkin Scenarios:

Scenario: Auto-save form and show confirmation
  Given I am filling out a form
  When I change a field
  Then the form should auto-save
  And a confirmation toast should appear

Accessibility Considerations:

• All form fields must have associated labels and clear instructions.
• Announce auto-save and toast notifications to screen readers (e.g., aria-live).
• Ensure toast is dismissible and does not obscure important content.
• Provide visible focus indicators and sufficient color contrast.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Preview Before Submit

Flow Description:
Allows users to review a summary or preview of their input before finalizing an action, reducing errors and increasing confidence.

Real-World Examples:

• Offer letter preview (e.g., ADP, Workday)
• Application preview (e.g., LinkedIn, Greenhouse)
• Report preview (e.g., ChartHop)

Benefits and Use Cases:

• Reduces mistakes before submission
• Increases user confidence in high-impact actions
• Supports compliance and auditability

Suggested Design System Components (with atomic design classification):

• PreviewPanel (Organism)
• SummaryCard (Molecule)
• Edit/Back Button (Component)
• Confirm/Submit Button (Component)

Gherkin Scenarios for Behavior-Driven Development:

Scenario: Preview before submitting
  Given I have completed a form
  When I click "Preview"
  Then I should see a summary of my input
  When I confirm and submit
  Then the action should be finalized

Accessibility Considerations:

• Preview content must be accessible and readable
• Announce preview state to screen readers
• Ensure all actions are keyboard accessible
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Confirmation Dialog / Destructive Action

Flow Description:
Presents a focused dialog to confirm or cancel high-impact or destructive actions, such as deleting records or making irreversible changes.

Real-World Examples:

• Deleting a user (e.g., Slack, Jira)
• Removing a file (e.g., Google Drive)
• Confirming irreversible changes (e.g., GitHub)

Benefits and Use Cases:

• Prevents accidental data loss
• Ensures user intent for critical actions
• Provides context and consequences

Suggested Design System Components (with atomic design classification):

• Dialog (Molecule)
• Warning Icon (Component)
• Confirm/Cancel Buttons (Component)
• Description/Context Text

Gherkin Scenarios for Behavior-Driven Development:

Scenario: Confirm a destructive action
  Given I have initiated a delete action
  When the confirmation dialog appears
  Then I can choose to confirm or cancel
  When I confirm
  Then the item should be deleted

Accessibility Considerations:

• Trap focus within the dialog
• Announce dialog to screen readers
• Provide clear, descriptive text about the consequences
• Ensure visible focus and keyboard accessibility
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Notification → Deep Link → Inline Action or Details

Built With: Inbox View + Details View + Modal/Drawer

Flow: User clicks notification or alert; lands in-app, pre-scrolled or filtered to context, action-ready.

Examples: GitHub, Jira

Benefits: Context-driven and highly efficient.

Suggested Components:

• Notification/Alert (Organism)
• Link (Component)
• Button (Component)
• InlineAction (Molecule)
• Badge (Component)

Gherkin Scenarios:

Scenario: Take action from notification deep link
  Given I receive a notification with a deep link
  When I click the notification
  Then I should land in-app at the relevant context with inline actions available

Accessibility Considerations:

• Notifications must be announced to screen readers (e.g., aria-live).
• Ensure all inline actions are keyboard accessible and labeled.
• Provide visible focus indicators and sufficient color contrast.
• Deep links should move focus to the relevant context.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Performance Review → Multi-Tab Feedback → Save Progress → Submit

Built With: List View + Details View + Edit View + Split Pane

Flow: Manager opens review; tabs for goals/competencies/feedback; auto-save per section; progress indicator; final submit.

Examples: Lattice, 15Five

Benefits: Breaks complex process into manageable chunks.

Suggested Components:

• Tabs (Molecule)
• Form (Organism)
• ProgressBar (Molecule)
• Button (Component)
• AutoSaveIndicator (Molecule)
• Card (Molecule)

Gherkin Scenarios:

Scenario: Save progress in multi-tab performance review
  Given I am completing a performance review
  When I fill out the 'Goals' tab
  Then my progress should be auto-saved
  When I submit the review
  Then it should be marked as complete

Accessibility Considerations:

• Tabs, forms, and progress indicators must be keyboard accessible.
• Announce tab and progress changes to screen readers.
• Provide visible focus indicators and sufficient color contrast.
• Ensure all form fields are labeled.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Notification/Assignment → Interview Scorecard → Submit

Flow Description:
User receives an interview assignment (via notification, calendar, or candidate profile). They click the assignment, which opens the Interview Scorecard form. After completing and submitting the scorecard, they return to the candidate profile or their interview assignments list.

Real-World Examples:

• Greenhouse: Interview scorecard with ratings and comments
• Lever: Structured feedback form for interviews
• Workday: Interview evaluation with competencies and notes

Benefits and Use Cases:

• Standardizes interview feedback
• Supports fair and consistent candidate evaluation
• Enables data-driven hiring decisions

Suggested Design System Components (with atomic design classification):

• ScorecardForm (Organism)
• RatingScale (Molecule)
• CompetencyList (Molecule)
• CommentBox (Component)
• SubmitButton (Component)
• ProgressIndicator (Molecule)

Gherkin Scenarios for Behavior-Driven Development:

Scenario: Complete and submit an interview scorecard
  Given I am assigned to interview a candidate
  When I open the interview scorecard
  Then I should be able to rate competencies and add comments
  When I submit the scorecard
  Then my feedback should be saved and visible to the hiring team

Accessibility Considerations:

• All form fields and controls must be keyboard accessible
• Provide clear labels and instructions for each competency and rating
• Announce form submission and errors to screen readers
• Ensure visible focus indicators and sufficient color contrast
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Onboarding Progress → Task Assignment

Built With: Landing Page + Overview Page + List View + Details View

Flow: HR dashboard shows new hires, click to see progress tracker; assign tasks to IT/Finance/Manager; automated reminders.

Examples: Rippling, BambooHR

Benefits: Orchestrates multi-stakeholder processes visually.

Suggested Components:

• Dashboard (Layout Template / Organism)
• ProgressTracker (Organism)
• TaskList (Organism)
• Button (Component)
• Card (Molecule)
• Notification/Alert (Organism)

Gherkin Scenarios:

Scenario: Assign onboarding tasks from dashboard
  Given I am on the HR dashboard
  When I view a new hire's onboarding progress
  Then I should see a list of tasks
  When I assign a task to IT
  Then IT should receive a notification

Accessibility Considerations:

• All dashboard controls and task lists must be keyboard accessible.
• Announce task assignments and notifications to screen readers.
• Provide visible focus indicators and sufficient color contrast.
• Ensure progress indicators are perceivable by all users.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Time Off Calendar → Request Modal → Conflict Check → Submit

Built With: Calendar View + New/Create View + Modal/Drawer

Flow: Employee views team calendar, clicks dates; PTO request form; system checks conflicts, shows coverage gaps; submit for approval.

Examples: BambooHR, Namely

Benefits: Prevents scheduling conflicts proactively.

Suggested Components:

• Calendar (Organism)
• Modal (Molecule / Layout Template)
• Form (Organism)
• ConflictChecker (Organism)
• Button (Component)
• Tooltip (Molecule)
• Notification/Alert (Organism)

Gherkin Scenarios:

Scenario: Request time off with conflict check
  Given I am viewing the team calendar
  When I select dates and open the PTO request form
  Then the system should check for conflicts and show coverage gaps
  When I submit the request
  Then my manager should be notified for approval

Accessibility Considerations:

• Calendar, modal, and form must be keyboard accessible.
• Announce conflict check results and modal state changes to screen readers.
• Provide visible focus indicators and sufficient color contrast.
• Ensure all controls are labeled.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Bulk Import → Field Mapping → Validation → Error Resolution

Built With: Document Management View + List View + Modal/Drawer

Flow: HR uploads CSV; drag-drop field mapping; validation results; inline error fixing; confirm import.

Examples: Workday, BambooHR

Benefits: Handles data migration with clear error handling.

Suggested Components:

• FileUploader (Organism)
• FieldMappingTool (Organism)
• ValidationPanel (Organism)
• InlineError (Molecule)
• Button (Component)
• ProgressBar (Molecule)
• Toast (Molecule)

Gherkin Scenarios:

Scenario: Import data with field mapping and validation
  Given I upload a CSV file
  When I map fields and validate the data
  Then I should see validation results and fix errors inline
  When I confirm the import
  Then the data should be added to the system

Accessibility Considerations:

• File upload, mapping, and validation controls must be keyboard accessible.
• Announce validation results and errors to screen readers.
• Provide visible focus indicators and sufficient color contrast.
• Ensure all controls are labeled.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Goal Setting → Cascade Down → Alignment View → Check-ins

Built With: Overview Page + Org/Tree View + Details View

Flow: Company sets OKRs; cascades to departments; individuals align goals; visual alignment map; regular check-in prompts.

Examples: 15Five, Workboard

Benefits: Creates clear line-of-sight to company objectives.

Suggested Components:

• OKRTree/AlignmentMap (Organism)
• Card (Molecule)
• Button (Component)
• CheckInPrompt (Molecule)
• ProgressBar (Molecule)
• Tooltip (Molecule)

Gherkin Scenarios:

Scenario: Align goals and check in
  Given company OKRs are set
  When I align my goals with my department
  Then I should see the alignment map
  When I receive a check-in prompt
  Then I should be able to submit my progress

Accessibility Considerations:

• Alignment maps, cards, and prompts must be keyboard accessible.
• Announce alignment and check-in changes to screen readers.
• Provide visible focus indicators and sufficient color contrast.
• Ensure all controls are labeled.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Compensation Overview → Total Rewards → Breakdown → What-If

Built With: Overview Page + Details View + Modal/Drawer

Flow: Employee views comp summary, clicks "View Details"; interactive breakdown (base, bonus, equity, benefits); what-if scenarios.

Examples: Paylocity, ADP

Benefits: Transparency in total compensation value.

Suggested Components:

• Dashboard (Layout Template / Organism)
• Card (Molecule)
• BreakdownChart (Organism)
• WhatIfScenarioTool (Organism)
• Button (Component)
• Tooltip (Molecule)

Gherkin Scenarios:

Scenario: Explore compensation what-if scenarios
  Given I am on the compensation dashboard
  When I click 'View Details'
  Then I should see a breakdown of my total rewards
  When I adjust a what-if scenario
  Then the breakdown should update accordingly

Accessibility Considerations:

• Dashboard, charts, and controls must be keyboard accessible.
• Announce breakdown and what-if scenario changes to screen readers.
• Provide visible focus indicators and sufficient color contrast.
• Ensure all controls are labeled.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

360 Review → Anonymous Collection → Aggregate View → Insights

Built With: List View + Details View + Modal/Drawer

Flow: Review launched, participants submit anonymously; aggregated feedback view; sentiment analysis; suggested action items.

Examples: Culture Amp, Workday

Benefits: Balances transparency with psychological safety.

Suggested Components:

• Form (Organism)
• AnonymousSubmission (Organism)
• AggregateView (Organism)
• InsightsPanel (Organism)
• Button (Component)
• Chart (Organism)
• Tag/Badge (Component)

Gherkin Scenarios:

Scenario: Submit and view 360 review feedback
  Given a 360 review is in progress
  When I submit my feedback anonymously
  Then my input should be included in the aggregate view
  When I view the insights panel
  Then I should see sentiment analysis and action items

Accessibility Considerations:

• All forms, charts, and panels must be keyboard accessible.
• Announce aggregate and insights updates to screen readers.
• Provide visible focus indicators and sufficient color contrast.
• Ensure anonymity is preserved for screen reader users.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Policy Library → Version Control → Acknowledgment Tracking

Built With: Document Management View + List View + Details View

Flow: Policy updated; version comparison; bulk assignment; employee views; acknowledges; tracking dashboard.

Examples: GoCo, Blissbook

Benefits: Maintains compliance with audit trail.

Suggested Components:

• DocumentLibrary (Organism)
• VersionControl (Organism)
• BulkActionToolbar (Molecule)
• AcknowledgmentTracker (Organism)
• Button (Component)
• Card (Molecule)
• Notification/Alert (Organism)

Gherkin Scenarios:

Scenario: Track policy acknowledgment
  Given a new policy version is published
  When I assign it to employees
  Then employees should be able to view and acknowledge the policy
  When an employee acknowledges
  Then the tracking dashboard should update

Accessibility Considerations:

• Document library, version control, and acknowledgment controls must be keyboard accessible.
• Announce version and acknowledgment changes to screen readers.
• Provide visible focus indicators and sufficient color contrast.
• Ensure all controls are labeled.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Schedule View → Shift Swap → Available Matches → Request

Built With: Calendar View + List View + Modal/Drawer

Flow: Employee views schedule, selects shift to swap; shows available employees; sends swap request; manager approval.

Examples: When I Work, Deputy

Benefits: Empowers employees while maintaining oversight.

Suggested Components:

• ScheduleView (Organism)
• List (Organism)
• Modal (Molecule / Layout Template)
• Button (Component)
• Avatar (Component)
• Notification/Alert (Organism)

Gherkin Scenarios:

Scenario: Request a shift swap
  Given I am viewing my schedule
  When I select a shift to swap
  Then I should see a list of available employees
  When I send a swap request
  Then my manager should be notified for approval

Accessibility Considerations:

• Schedule view, modals, and lists must be keyboard accessible.
• Announce available matches and modal state changes to screen readers.
• Provide visible focus indicators and sufficient color contrast.
• Ensure all controls are labeled.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Org Chart → Node Click → Team Overview → Drill Down

Built With: Org/Tree View + Details View + Split Pane

Flow: Visual org chart, click manager node; team composition panel; click to drill into individuals or expand teams.

Examples: ChartHop, Pingboard

Benefits: Visual navigation for understanding reporting structures.

Suggested Components:

• OrgChart (Organism)
• Node (Molecule)
• Panel (Organism / Layout Template)
• Avatar (Component)
• Button (Component)
• Tooltip (Molecule)

Gherkin Scenarios:

Scenario: Drill down into org chart team
  Given I am viewing the org chart
  When I click a manager node
  Then a team overview panel should appear
  When I click an individual in the team
  Then their profile should be displayed

Accessibility Considerations:

• Org chart nodes and panels must be keyboard accessible.
• Use ARIA roles for nodes and panels.
• Announce navigation and drill-down actions to screen readers.
• Provide visible focus indicators and sufficient color contrast.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Mobile Clock In → Geofence Verification → Photo Capture → Confirm

Built With: Landing Page + Details View + Modal/Drawer

Flow: Employee opens mobile app; location verified; optional photo; clock in; shows hours worked today.

Examples: ADP Mobile, Kronos

Benefits: Prevents time theft while staying user-friendly.

Suggested Components:

• MobileAppShell (Layout Template / Organism)
• GeofenceChecker (Organism)
• Camera/PhotoCapture (Organism)
• Button (Component)
• TimeDisplay (Molecule)
• Notification/Alert (Organism)

Gherkin Scenarios:

Scenario: Clock in with geofence and photo
  Given I am at my work location
  When I open the mobile app
  Then my location should be verified
  When I take a photo and clock in
  Then my hours worked today should be displayed

Accessibility Considerations:

• All mobile controls must be keyboard accessible (where applicable) and labeled.
• Announce geofence and photo capture status to screen readers.
• Provide visible focus indicators and sufficient color contrast.
• Ensure time display is accessible.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Command Palette (⌘K) → Jump to / Perform Action

Built With: Landing Page + Modal/Drawer

Flow: User hits shortcut (⌘K); opens command palette; search to jump or execute an action.

Examples: Linear, Superhuman, Slack

Benefits: Designed for power users. Great UX for fast navigation and action.

Suggested Components:

• CommandPalette (Organism)
• SearchInput (Molecule)
• ListItem (Molecule)
• KeyboardShortcut (Component)
• Icon (Component)

Gherkin Scenarios:

Scenario: Use command palette to jump to a page
  Given I am on any page
  When I press '⌘K'
  Then the command palette should open
  When I search for a page and select it
  Then I should be navigated to that page

Accessibility Considerations:

• Command palette must be keyboard accessible and trap focus while open.
• Use ARIA roles and announce palette state changes.
• Provide visible focus indicators and sufficient color contrast.
• Ensure all actions are labeled and accessible to screen readers.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Form Builder / Editor → Live Preview Panel

Built With: Edit View + Split Pane + Details View

Flow: User builds or edits content on the left; sees real-time preview on the right.

Examples: Webflow, Typeform

Benefits: Supports visual feedback loops.

Suggested Components:

• FormBuilder (Organism)
• Editor (Organism)
• PreviewPanel (Organism / Layout Template)
• SplitPane (Layout Template)
• Button (Component)
• InputField (Component)

Gherkin Scenarios:

Scenario: Live preview while editing form
  Given I am editing a form
  When I make changes in the editor
  Then the preview panel should update in real time

Accessibility Considerations:

• All form fields and controls must be labeled and keyboard accessible.
• Announce preview updates to screen readers if content changes are significant.
• Ensure split pane and editor are navigable via keyboard.
• Provide visible focus indicators and sufficient color contrast.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Headcount Planning → Scenario Builder → Budget Impact → Approval

Built With: Overview Page + List View + Details View + Modal/Drawer

Flow: HR creates hiring plan; drag-drop roles to teams; real-time budget calculation; submit scenarios; executive approval.

Examples: ChartHop, Anaplan

Benefits: Links workforce planning to financial planning.

Suggested Components:

• ScenarioBuilder (Organism)
• DragDropList (Organism)
• BudgetCalculator (Organism)
• ApprovalWorkflow (Organism)
• Button (Component)
• Card (Molecule)
• Chart (Organism)

Gherkin Scenarios:

Scenario: Submit headcount plan for approval
  Given I have created a hiring scenario
  When I assign roles to teams and review the budget impact
  Then I can submit the scenario for executive approval
  When approved
  Then the plan should be finalized

Accessibility Considerations:

• Scenario builder, drag-and-drop, and approval controls must be keyboard accessible.
• Announce scenario and approval status changes to screen readers.
• Provide visible focus indicators and sufficient color contrast.
• Ensure all controls are labeled.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Exit Interview → Workflow Trigger → Task Distribution → Completion

Built With: List View + Details View + Modal/Drawer

Flow: Resignation submitted; offboarding workflow triggered; tasks auto-assigned (IT, Finance, Manager); progress tracking; final checklist.

Examples: Rippling, Gusto

Benefits: Ensures nothing falls through cracks during transitions.

Suggested Components:

• WorkflowEngine (Organism)
• TaskList (Organism)
• ProgressTracker (Organism)
• Checklist (Molecule)
• Button (Component)
• Notification/Alert (Organism)

Gherkin Scenarios:

Scenario: Complete exit interview workflow
  Given an employee submits a resignation
  When the offboarding workflow is triggered
  Then tasks should be assigned to IT, Finance, and Manager
  When all tasks are completed
  Then the final checklist should be marked as done

Accessibility Considerations:

• Workflow, task list, and checklist controls must be keyboard accessible.
• Announce workflow and task status changes to screen readers.
• Provide visible focus indicators and sufficient color contrast.
• Ensure all controls are labeled.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Kanban Board → Card Click → Side Panel / Full Page

Built With: Kanban View + Details View + Modal/Drawer

Flow: User clicks on a card; opens a side drawer or full-screen modal with task/project detail.

Examples: Trello, Jira, Linear

Benefits: Visual, task-based navigation optimized for team workflows.

Suggested Components:

• KanbanBoard (Organism)
• Card (Molecule)
• Drawer/Modal (Molecule / Layout Template)
• Button (Component)
• Avatar (Component)
• Tag/Badge (Component)
• Tooltip (Molecule)
• DropdownMenu (Molecule)

Gherkin Scenarios:

Scenario: View card details in a side panel
  Given I am viewing a Kanban board
  When I click on a card
  Then a side panel should open with the card's details

Accessibility Considerations:

• Ensure all cards and side panels are keyboard accessible.
• Use ARIA roles for panels and cards (e.g., role="region").
• Provide clear focus management when opening/closing side panels.
• Ensure drag-and-drop (if present) is accessible via keyboard and screen reader instructions.
• Maintain sufficient color contrast and visible focus indicators.
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):

---

Multi-Step Wizard / Stepper

Flow Description:
Guides users through a linear, step-by-step process for complex workflows, with clear progress indication and navigation between steps.

Real-World Examples:

• Onboarding flows (e.g., BambooHR, Gusto)
• Offer letter creation (e.g., Workday)
• Performance review setup (e.g., Lattice)

Benefits and Use Cases:

• Reduces cognitive load by breaking up complex tasks
• Ensures data is collected in a logical sequence
• Allows users to review and edit previous steps

Suggested Design System Components (with atomic design classification):

• Stepper (Molecule/Organism)
• Progress Indicator (Molecule)
• Form (Organism)
• Button (Component)

Gherkin Scenarios for Behavior-Driven Development:

Scenario: Complete a multi-step wizard
  Given I am on the first step of a wizard
  When I complete the required fields and click "Next"
  Then I should advance to the next step
  When I reach the final step and submit
  Then the process should be completed and I should see a confirmation

Accessibility Considerations:

• Announce step changes to screen readers
• Ensure all controls are keyboard accessible
• Provide clear focus management and visible indicators
• Allow users to review/modify previous steps
• Responsive Behavior and Usability Across All Device Sizes (desktop, tablet, mobile):