Community patterns

Updated May 12, 2026

The Design System is embracing patterns to deliver better experiences at every touch point. And we need your help.

That's why we've created our community patterns area. This is where product teams can shout about their pattern experimentation and share their designs on the Design System portal.

Community patterns are developed and maintained by teams across Sage. They are not part of the approved Design System but are a great way for teams to collaborate and support each other.

Warning

See some recent community patterns in the tabs at the top of this page.

Submitting a community pattern

To submit a pattern that your team has delivered, and you think could work for other Sage products:

Create a new Figma file that contains one single page to document your pattern.
Name the file CP-[The name of your pattern].
For examples of how to document a pattern, see the "🧩 Assets for documenting" page in the Community patterns Figma library. Include a cover, title, annotations and so on.
Fill in our contribution form. Add information about the pattern and link to your Figma file.

If necessary, the Design System team will contact you for more information.

Offering feedback on a community pattern

To offer feedback on a specific pattern, please contact the pattern owner.
For general feedback, questions about submitting a community pattern, or to request that a community pattern is added to the Design System, please email [email protected].

Warning

Important: Community patterns are developed and maintained by teams across Sage. They are not part of the approved Design System but are a great way for teams to collaborate and support each other.| Status | Implemented as part of the My Dashboard framework project for Sage Individual. |

| --- | --- | | Description | Problem statementThe Experience Platform team were tasked with delivering a scalable dashboard framework that could be adopted within all Sage products to help provide users with a cohesive multi-product experience for onboarding and day-to-day task flows.One aim in particular was to reduce the trial period drop off rate for new users that do not fully explore all the features that are available to them. Users can sometimes stop using a product before they’re aware of its full potential, and there’s a strong risk that they could be tempted to try a competitor’s potentially inferior product instead.SolutionA fully responsive framework has been designed and built using carbon component based tile patterns. These have been used to surface the right message at the right time to the user, to help them get set up and to familiarise themselves with the product. | | Owner | Dale Pealing (UX Designer)Dennis Chirwa (UX Team Lead)Joe Jackson (Content Designer)Judy Hartman (Content Team Lead | | Product or Business unit | Experience Platform and Sage Individual | | Accessibility | WCAG 2.1 (Design reviewed by the Accessibility team and feedback implemented) | | Responsive | Yes | | Main documentation | Figma |

Warning

| --- | --- | | Status | Bereavement serviceDesigning for Bereavement | | Description | Problem statementWhen a small-business owner is unreachable (for example, critically ill, missing, passes away, or in prison) family members and interested parties may not have access to business data held in Sage software which is needed to either keep that business running or to close it down.SolutionCreate a standardized pattern for allowing customers to assign a legacy contact, and let the assigned contact safely and securely access the business account data. | | Owner | Craig Priestman (UX Designer)Joanne Richardson (UX Manager) | | Product or Business unit | Accounting, Accountants, Experience Platform, Payroll & HR. | | Accessibility | Not checked | | Responsive | Yes | | Main documentation | To be added | | Links | PrototypeSlide deckFigma WIP file |

Warning

| --- | --- | | Status | User tested but not implemented as of 06 January 2025 | | Description | The Employee selector component allows users to select multiple items at once from a large list of employees. It can be used in 2 ways: Simple selection (specific selection):Display all employees/entitiesSearch, apply filters, navigate through pages, alter the amount of items displayedSelect employees, click ‘hide unselected’ to view just those that are selectedAdvanced selection (criteria selection):Specify desired employee criteriaThe selector automatically selects/deselects employees based on them meeting/not meeting the specified criteriaAdvanced selection is paired with simple selection and displays the selected employees once the user clicks ‘show results’ | | Owner | Chris Buckle (UX Designer) | | Product or Business unit | Sage Business Cloud (main consumers are HR apps) | | Accessibility | WCAG 2.1 compliant | | Responsive | Fully responsive | | Main documentation | Figma |

Warning

| --- | --- | | Status | Tested and ready to be Implemented | | Description | The Get Help guide for Sage 50 and Sage 50 Payroll allows users to access help content from our Help Centre within app so that their workflow is not disrupted. Users can search through our webinars, help guides and training resources aswell as accessing live chat help from our support centre. | | Owner | Aiden King | | Product or Business unit | Sage 50 Payroll | | Accessibility | Not checked | | Responsive | Yes | | Main documentation | Figma design spec |

Warning

| --- | --- | | Status | Implemented | | Description | The Notification centre is a central place for all notifications where a user can filter by product, business, and user. The status of a notification can be Unread, Read, or Deleted. Unread notifications are displayed on the Quick Overview panel and in the Notification centre. To set the status of a notification to Read, the user selects Mark as read. If a user closes the Quick Overview panel or the Notification centre, the status of all unread notifications with which they interacted changes to Read. If a user selects Show more or Show less on the Quick Overview panel or Notification centre, the status of the notification does not change. | | Owners | Anwar Bolat (UX Designer)Harpal Singh (UX Designer)Camille Degomme (Solutions Designer) | | Product or Business unit | Sage Business Cloud | | Accessibility | WCAG 2.2 compliant | | Responsive | Fully responsive | | Main documentation | Figma | | Other links | HTML PrototypeUsername: sagePassword: SQxtZmzGSfypBjoAz |