Changelog

v1.34

Published on 05 May 2026

Components

Updated

• Search
• Search button consumes a subtle button with bespoke properties such as custom radius corners.
• Clear button consumes a subtle button with bespoke properties such as no focus.
• First focus extended to include the clear button.
• Second focus on the Search button.
• Textarea
• Added resizer (grab handle) option.
• Time input
• Changed label text from abbreviations to full words: Hrs. to Hours and from Mins. to Minutes.
• Hid AM/PM toggle by default.
• Applied min width to the container inputs: S size - 48px, M size - 56px, and L size - 64px.

v1.33

Published on 24 April 2026

Components

Updated

• Chart
• Added Bar chart density block
• Pagination
• Updated nav buttons to icon-only across all screen sizes to better accommodate different variants at different breakpoints.
• Updated a11y guidance for these icon-only buttons.
• Updated first and last button icons from << >> to |< >| as these are more universally understood.
• Step sequence
• Fixed all broken images.

Patterns

Updated

• Data visualization
• Page created

Mobile

Foundations

• Principles
• Page created
• Spatial markup
• Page created

Components

• Divider
• Page created
• Skeleton
• Page created

Patterns

• Empty state
• Page created
• Error state
• Page created
• Splash screen
• Page created
• App Store & Play Store
• Moved to Mobile section

v1.32

Published on 17 April 2026

Components

Updated

• General specs
• Added timestamp guidance
• Date picker
• Added a focusable button to trigger the calendar modal. Guidance and examples updated to reflect this.
• Legacy version with no focusable button moved to deprecated tab, for info purposes only.
• Text input
• Deprecated the icon variant and all documentation related

Patterns

New

• Calendar
• Added pattern
• Event
• Added pattern
• Timeline
• Added pattern

AI

Updated

• AI resources
• Added a link to the Sage AI Factory guidance
• Copilot panel
• Added added new Canvas tab with guidance on functionality
• Moved Conversations to their own tab for easier findability

v1.31

Published on 27 March 2026

Get started

Updated

• Community patterns
• Moved these patterns from Patterns to a new Community section for closer proximity to Contributions

Foundations

Updated

• Iconography
• Updated UI Icons name
• Marketing specific indicator added to Detailed icons tab and content

Components

Updated

• Dropdowns
• Added Progressive disclosure section to show how dependent dropdowns can be used to reveal more options
• Portrait
• Added new shape (squared)
• Text editor
• Updated the hyperlink section to reflect the labelling and behaviour being implemented by Carbon.

Patterns

Updated

• Bulk actions
• Added a Do regarding action states in the sidebar when bulk editing items
• Definition List
• Assets updated with the Step Flow wizard v1.31
• Image editor
• Updated the button emphasis on dialogs and fixed broken images
• Navigation
• Renamed from Nav: product after removing the Nav: marketing page
• Step flow wizard
• Moved the Back to previous step from a link above to a button in the footer

Deprecated

• Nav marketing
• Removed from Fusion patterns. This nav is still available in the MVP Branding Kit

AI

Updated

• Agents and Agentic AI
• Added guidance on The AI agent as a user persona to inform teams of what agents need to be able to use our products in an accurate and consistent way.
• Copilot panel
• Added Privacy notice section with link to the notice

v1.30

Published on 13 March 2026

Foundations

New

• Branding
• MTD Trademark guidance created.

Components

Updated

• Buttons
• Renamed "Simple button" to "Button"
• Simplified Buttons overview page
• Chart
• Added information on 9 new colors for all chart types.
• Added information on 3 new trends for line chart.
• Added a maximum amount of charts (4 line charts and 12 bar charts on one canvas).
• Updated design for the data node on hover
• Added a second variant that allows to show data for multiple nodes in one go (up to 4 nodes).
• File Input
• Added an asset into DO section. Update the primary CTA to “Download” when preview is not available.
• Popover container
• Added this new component and documentation to align with Carbon offering.
• Tile
• Added Sorting dropdown section.
• Added Do&Don't assets for Sorting feature.
• Table
• Added Sorting via column headers sectionTable.
• Added Sorting header variations.
• Added Do&Don't assets for Sorting feature.

Patterns

New

• Product-Led growth (PLG)
• MVP pattern created.

Deprecated

• Sorting
• Removed this page and added relevant guidance to Table and Tile pages
• Sorting dropdown component moved to Tile in Figma

AI

Updated

• AI branding
• Updated Ai tile Labels to reflect current branding guidelines.
• Copilot panel
• Added User feedback section.

v1.29

Published on 20 February 2026

Foundations

Updated

• Spacial markup
• Reviewed and updated information regarding spacing scale, vertical flow, and margins.
• Typography
• Moved from Components to Foundations (also in Figma).

Components

Updated

• Action popover button
• Added trigger button label guidance to Variations.
• Card
• Updated Description.
• Added Dos and don’ts examples for secondary actions in cards.
• Multi-action button
• Updated Variations, and Dos and don'ts with guidance on trigger button labels.

v1.28

Published on 13 February 2026

What's new

Updated

• Fusion transition plan
• Carbon alignment status overview is now on Miro: Alignment status
• Information about Fusion and transition updated: Why the Fusion design system matters
• Roadmap
• Fusion and Carbon alignment: current status overview and video walkthrough

Foundations

Updated

• Design tokens
• Updated overview page with clarified guidance and examples.

Components

Updated

• Action popover button
• Enhanced menu and submenu Variations guidance.
• Step sequence
• Added label guidance to the content tab

AI

Updated

• AI branding
• Updated guidance based on ECT feedback.
• Added AI processing tab.

v1.27

Published on 30 January 2026

What's new

Added

• Roadmap
• A quick snapshot of the design system plans to help your product teams prioritize their work.

Updated

• Fusion transition plan
• Updated Carbon component alignment statuses and deprecations.

Foundations

Added

• Tokens > Breakpoints
• Added breakpoint tokens and an example for how to use them.

Components

Updated

• Toggle button group
• Re-added the label set into the component.

Patterns

Updated

• Filtering
• Based on feedback from ECT, we now surface the search input across all breakpoints.
• Updated the mid breakpoint to 960px min-width so that search can successfully show alongside the filter, create buttons and bulk action buttons.

v1.26

Published on 16 January 2026

What's new

Updated

• Fusion transition plan
• Updated Carbon component alignment statuses and deprecations.

Components

Updated

• AI branding
• Added Sound Design and Motion from the old AI Hub to aid discovery.

v1.25

Published on 19 December 2025

What's new

Updated

• Fusion transition plan
• Updated Carbon component alignment statuses.

Components

Updated

• AI branding
• Moved this page from Foundations to keep AI guidance in one place.
• Added guidance on current usage of brand assets to indicate AI features in products.
• Created specific tabs for Ai button and Ai tile.
• Chart
• (NEW) Created an MVP chart component that will be iterated on from January 2026.

v1.24

Published on 1 December 2025

Launch of the Fusion Design System.

v1.23

Published on 21 November 2025

Components

Updated

• Decimal input
• Removed dropdown variant as it's now included in Fieldset.
• Fieldset
• Updated design and guidance as per ECT recommendations.
• Added examples of commonly used fieldsets with link to Figma template.
• Updated Content tab with legend guidance.
• Marked as ECT approved.
• Numeral date
• Updated images with new hint text as per a11y recommendation.
• Updated guidance on hint text in the Content tab.
• Added a Don't re using slashes in hint text.
• Skeleton
• Updated design and guidance based on ECT and accessibility recommendations.
• Text input
• Removed groups from Variations and added callout linking to Fieldset.

v1.22

Published on 11 November 2025

Foundations

Updated

• Added an 'at_sign' icon (code: f093).

Components

Updated

• Anchor navigation
• Added dark mode image.
• Bubble
• Split Anatomy example into two.
• Split Variations examples into Status and Options.
• Added light example to Color modes.
• Split Blocks into Block types and Examples.
• Added examples to Blocks - Examples.
• Blockquote
• Added dark mode image.
• File input
• Removed links from the filename.
• Added a dedicated button to preview the file.
• Drawer
• Added guidance for optional 'Hide' button in header.
• Added guidance on full-screen mode on smaller viewports.
• Added position use-case information and header and footer guidance to Variations.
• Dropdown
• Updated left padding for dropdown menus in sizes M and L to 24px.
• Message
• Renamed 'Contextual message' to 'Message', following the deprecation of Global message.
• Note
• Updated all designs to reflect the heading token change.
• Marked as ECT approved.
• Pill
• Removed Custom Pill.
• Removed Thumbnail variation.
• Changed Status to Color.
• Password
• Added image for light color mode.
• Converted dynamic state to static.
• Updated headings for example assets.
• Progress tracker
• Removed Generic status.
• Added Choosing the right component callout_._
• Added bar visibility example to Variations.
• Rating
• Created new version.
• Search
• Removed the text label from the search button and display only the magnifying glass icon.
• Updated guidance on input width, clarified that min (288 px) and max (400 px) widths are recommendations, not requirements.
• Adjusted focus state to apply only to the text input, not the surrounding search button area.
• Sidebar
• Added Choosing the right component.
• Simplified guidance on modal and adaptive sidebars, and zoom behavior.
• Added new variation.
• Removed optional header variation.
• Skip link
• Added the underline to the link text.

Added a Don't example.

• Table
• Removed highlighted and hover rows as interactive rows are not accessible.
• Added without table border variation.
• Updated table token color values.
• Textarea
• Removed Variations section.
• Updated Dos and Don'ts.
• Updated Size.
• Marked as ECT approved.
• Text editor
• Added a new button for 'at-mention' function inside the toolbar.
• Updated all images to reflect the change.
• Video
• Removed marketing variant.
• Added a description to explain use cases: Pendo, marketing, and help content.

Deprecated

• Message global
• Global messages are technically problematic as many products are unable to shift page content down to provide space for the global message. ECT has decided that this component should no longer be supported.

v1.21

Published on 20 October 2025

Components

Updated

• Contextual message
• Removed subtle type for error messages.
• Link
• Updated all relevant designs to have an underline.
• Added a Do for the exception of nav links in the global create popover.
• Added Weight to Variations and Dos and don'ts.
• Marked as ECT approved.
• Loader
• Updated AI gradients to be more vibrant based on a direction from the Experience Consistency Team (ECT).
• Marked Loader as ECT approved.
• Sidebar
• Marked as ECT approved.
• Updated modal footers to use subtle button for cancel.
• Removed 1000px max width option. Now only 760px max-width is supported. This is a recommendation and not mandatory.
• Removed left alignment support.
• Removed vertical button example. Instead this is mentioned in the button page.
• Changed the ‘don’t’ example to shoe a more realistic scenario of a phone in landscape mode.
• Tabs
• Marked as ECT approved.

v1.20

Published on 10 October 2025

Get Started

Updated

• Pattern & Comp statuses
• Added a link to the Carbon components deprecation migration guide.

Components

Updated

• Checkbox
• Added a variation: With secondary text.
• Breadcrumbs
• Added inverse documentation and fixed a visual bug where the underline had disappeared.
• Marked the component as ECT approved.
• Checkbox
• Added indeterminate state.
• Added 24px invisible hit area that sits underneath both the label and checkbox area on small sizes.
• Added a Don't to highlight the crtitical confirmation usecase.
• Marked checkbox as ECT approved.
• Decimal Input
• Added light mode visual.
• Marked component as ECT approved.
• Radio
• Added Do's and Don'ts on how to use progressively revealed inputs.
• Added 24px invisible hit area that sits underneath both the label and checkbox area on small sizes.
• Marked as ECT approved.
• Switch
• In States section removed error state and added note to callout.
• Added Color mode section.
• In Variations removed no-label and replaced with vertical-label. Removed marketing example.
• In Dos and Don'ts removed disabled & read-only example. Guidance on states is available in General specs.
• Marked component as ECT approved.
• Tile
• Moved Roundness examples into Variations.
• In Variations added descriptions to Roundness, and added Padding examples. Removed sweeping and marketing roundness.
• In Footer variations removed examples of footer with buttons and link.
• In Color modes added a callout and example on inverse styling.
• In Dos and don'ts added examples for roundness and footer customization.
• Marked component as ECT approved.

Deprecated

• Carousel
• ECT have decided that we should no longer support this component as it tests poorly with users and is problematic for users of assistive technology.

v1.19

Published on 10 September 2025

Get started

Updated

• Pattern & Comp statuses
• Updated the list of confirmed deprecations and deprecation candidates.

Components

Updated

• Action popover button
• Added guidance for maximum menu height in Dos and dont's.

Patterns

Updated

• Copilot pattern
• Added a Conversations section including Text and Prompted conversation types.
• Removed Interaction section.
• Removed 'Data conflict' from States.
• Error state
• Removed 'Data conflict' for Copilot guidance.
• Global navigation
• Added guidance for using badges to indicate important notifications to Dos and dont's.

v1.18

Published on 27 August 2025

Foundations

Updated

• Iconography
• Added new spot icons.
• Link to icons library in Figma

Patterns

Updated

• Copilot panel
• Updated layout to align with the Sidebar modal variant including background mask.
• Added responsive behavior including scrollbar and un-sticky header boolean.
• Removed fixed width.
• Removed sticky footer entirely and moved the disclaimer inside the container.
• Updated all state illustrations to use spot icons.
• Updated Error state text.
• Updated Loading state.
• Added message to the anatomy.
• Added 'Automatic insights refresh' section.
• Removed guidance around AI nudge and other redundant information.

v1.17

Published on 08 August 2025

Components

Updated

• Decimal input
• Added guidance that hint text is mandatory when the prefix and suffix are shown inside the input.
• Contextual message
• Reinstated marketing callout variation.
• Removed Examples tab and moved images to new section in Design tab.
• Global message
• Removed 'selectable' variation.
• Removed 'countdown' variation.
• Removed Examples tab and moved images to new section in Design tab.
• Loader
• Added support for accessibility motion setting.
• Progress tracker
• Updated the Annotation and added Do following the introduction of an optional prop for the progress bar, enabling a text-only variant without the visual bar.
• Sidebar
• Updated image for Adaptive sidebar - zoom, to show the behavior.

Patterns

Updated

• Bulk actions
• Updated name from Batch selection to Bulk actions.

Deprecated

• Region and language selector
• We have deprecated this pattern as it is not currently in use across our products.

v1.16

Published on 25 July 2025

Components

Updated

• General specs
• Added general guidance for capturing numeric data.
• Badge
• Updated variant names to Large, Medium, and Small.
• Updated color variants to typical (red) and subtle (blue).
• Button
• Added new Multi-action button.
• Added comparison table for action button with options menu.
• Added guidance on button icon placement.
• Dialog
• Added small screen responsive variant in Responsive.
• Added Don't guidelines for small screen and zoomed views.
• Note
• Changed note contents to swappable blocks (same ones that are used in the text editor)
• Fixed font tokens on the editor’s name block
• Added a help board in the new HB Figma file
• Text editor
• Updated toolbar to have new features:
• heading selector dropdown
• icon
• link
• underline icon
• Added underline icon
• Separated text editor into 3 components
• Restructured text editor to have instance swaps inside text area (2-4-6-8-10 blocks)
• Updated swappable assets:
• Title
• Paragraph
• Link
• Added new swappable assets:
• Mention
• Created 2 help boards in Figma in the text editor page
• Added a scrollbar
• To the dropdown (used in the mention feature):
• Added a profile icon asset
• Added spacers that automatically adjust the left padding on subtext when an icon or profile is shown/hidden
• Text input
• Updated dos and don'ts documentation to include guidance around Ghost characters
• Search
• Added S and M sizes.
• Updated the menu asset.
• Removed the subtle variant.
• Removed the buttonless variant.
• Sidebar
• Added full screen mode to Adaptive sidebar for zoom and small screens.
• Added Dos and don'ts section.

Deprecated

• Character group
• Removed the Character group component due to accessibility concerns.
• Text input can be used for the same purpose.

v1.15

Published on 11 July 2025

Components

Updated

• Breadcrumbs
• Added an example comparing breadcrumbs and a back link in the Dos and don’ts section.
• Pagination
• Enhanced component based on audit feedback and performance issues identified in Sage HR.
• Removed advanced variations.
• Sidebar
• Added adaptive sidebar variation.
• Added inverse option for adaptive sidebar.
• Added "modal" term to the original sidebar component.
• Added 2 new size options with a different max width for each of them.
• Contextual message
• Replaced 'close' icon with the 'cross' icon.
• Created new internal layout to fix:
• Vertical alignment when 1 line of content.
• Horizontal alignment when auto-layout is set to fill.
• Set a max-width: 720px.
• Removed marketing variation.

Created

• Multi-Action button
• Created new component.
• Documentation in progress.

v1.14

Published on 27 June 2025

Components

Updated

• Divider
• Updated direction prop term to "Rule type".
• Dropdown
• Created overview page with documentation that applies to all sub-types.
• Updated each sub-type documentation accordingly.
• Table
• Added ‘Highlighted’ row type.
• Changed the background colour of the hover and footer cells to a darker shade.
• Updated the ‘Selected’ state color to black to align with other UI components.
• Removed ‘Active’ cell state as it was redundant.

Created

• Character group
• Created new component and documentation.

v1.13

Published on 13 June 2025

Foundations

Updated

• Branding
• Removed AI gradient in light mode; only the button has the dark treatment in light mode.
• Typography
• Updated component with Section header and Section subheader variants
• Updated documentation with new variants and with alt, medium and medium alt paragraph variants
• Removed marketing theme examples as the theme has been deprecated
• Added documentation outlining use cases for the Text Block
• Updated documentation around tokens and theming

Components

Updated

• Enhanced the following components with inline input variation capability:
• Date picker
• Date range
• Decimal input
• Dropdown
• Search
• Text input
• Textarea
• Date picker
• Changed Tab ordering to be more efficient for keyboard users.
• Calendar modal now opens upon click of an icon button or on press of keyboard down arrow instead of showing automatically on the focus of the parent input.
• Removed chevrons on calendar modal open state in order to simplify the UI to only showing dropdowns.
• Added a new Accessibility tab for keyboard user guidance.
• Dialog
• Added dialog sizes to align with Carbon’s specifications.
• Dropdown
• Filterable dropdown
• Separated filterable variant from Dropdown:typical component and created new Filterable dropdown component.
• MultiSelect dropdown
• Separated multi-select variant from Dropdown:typical component and created new MultiSelect dropdown component.
• Simple dropdown
• Renamed Dropdown:typical to Simple dropdown
• Separated the multi-select and filterable variants and created new component pages for MultiSelect dropdown and Filterable dropdown
• Table
• Updated vertical scroll props for tables with no header, single header, and double header.
• Added horizontal scroll props for tables with left sticky columns, right sticky column, both and none.
• Added custom divider/border widths if 1-2-3px for header, body and footer cells.
• Updated the divider positioning on the cells from right, left (hidden) and bottom to right, left (hidden) and top, to align with carbon.
• Added and updated Figma help boards, including:
• Horizontal scroll;
• Custom cell dividers.
• Added examples of horizontal scroll for tables with left sticky columns, right sticky column, both and none.
• Added examples of custom divider widths of 1-2-3px for header, body and footer cells.

Patterns

Updated

• Secondary navigation
• Added vertical navigation as a new type.
• Updated all horizontal navigation images to reflect the latest design updates.
• Added 'Dos and Don'ts', 'Types' and 'Variations' sections.

v1.12

Published on 30 May 2025

Components

Updated

• Badge
• Added a callout highlighting the availability of inverse-styled badge components, intended for use in light mode when a specific element needs to appear in dark mode.
• Numeral date
• Added support for MMDDYYYY (US) format.
• Updated YYYYMMDD format from YYYYDDMM.
• Added props to remove inputs as needed to create two input compositions (MMDD, MMYYYY, DDMM).
• Added documentation describing all possible variations of component.
• Simple button
• Added a callout highlighting the availability of inverse-styled simple button components, intended for use in light mode when a specific element needs to appear in dark mode.
• Added a background fill on the secondary enable button (both standard and inverse).
• Realigned all badges on all simple buttons.
• Link
• Added a callout highlighting the availability of inverse-styled link components, intended for use in light mode when a specific element needs to appear in dark mode.
• Loader
• Added XS loader.
• Rename 'ring' to 'spinner'.
• Pill
• Added a callout highlighting the availability of inverse-styled pill components in Figma, intended for light mode scenarios.
• Updated and fixed dismissible hover colours in both standard and inverse components.
• Added custom colours variation.
• Added 'important' variant.
• Removed 'read-only' variant.
• Updated guidance around hyphenation and text wrapping onto multiple lines.
• Step sequence
• Updated Dos and don'ts guidelines.
• Changed name from 'Step indicator' to 'Step sequence'.
• Table ⚠ BREAKING CHANGES
• Restructured table to include rightmost column and bottom row, to facilitate the use of various Figma props.
• Added table border layer to ensure visibility regardless of layer order.
• Removed Boolean property for “has header”. (Header row is an accessibility requirement so is not optional)
• Added sticky column property to all columns.
• Added scrollbar position property to facilitate correct positioning of scrollbar according to header height.
• Cell state variants replaced with instance swaps to improve performance.
• Added custom XS button and a custom XS action popover button as assets.
• Removed 16px icons in XS table cells.
• Replaced 16px icons in S table cells with 20px icons.
• Replaced dark mode swappable cell assets with their inverse counterparts (button, link, pill, icon).
• Added spacers for indents in child rows.
• Added bg child shadow prop to enabled, hover and zebra cells on all sizes.
• Replaced pagination local asset with floating pagination component instance.
• Added and updated Figma help boards, including:
• Sticky columns - exposing obscured shadows;
• Cells contents - selection and styling;
• Hierarchy inside the table;
• Child cell behaviour.
• Added footer example, in Row types.
• Added guidance on vertical scrolling, in Variations.
• Added zebra row to Examples.
• Tabs
• Changed name from 'Tab' to 'Tabs' to be consistent with Carbon.
• Time input
• Removed 'Stepper' buttons.
• Updated the behaviour to match html time inputs.

Patterns

Updated

• Step flow wizard
• Updated Dos and don'ts guidelines.

v1.11

Published on 16 May 2025

Get started

• Pattern & Comp statuses
• Added a table displaying current statuses of all comps and patterns.

Components

Updates

• Decimal input
• Change component name from "Number input" to "Decimal input".
• Switch
• Removed '*' from the label.
• Text editor
• Updated footer disclaimer content.
• Link to Text editor in Figma
• Textarea
• Changed component name from "Text area" to "Textarea".

Patterns

Updates

• Secondary Navigation Horizontal
• Simplified the secondary navigation offering (removing most subcomponents in Figma).
• Aligned secondary navigation behaviour with what carbon offers today. Larger improvements will now come with the new suites navigation component.
• Link to Secondary navigation horizontal in Figma
• Copilot panel
• Updated all example images with the new Bubble component, removed load more button, updated navigation.
• Unpublished Chat and related elements.
• Updated the trigger image.
• Added job navigation.
• Added data conflict state, loading state, updated, and aligned all states.
• Added Dos and Don'ts: no minimized state, don't shrink illustration.
• Draggable
• Created new component and guidance.
• Error guidance
• Added new Data conflict error to User action errors.

v1.10

Published on 01 May 2025

Foundations

Updated

• Added 15 new icons.

Components and patterns

Updated components

• Button: action popover
• Removed ‘match trigger’ variants (default, hover and open).
• Simplified popover menu structure.
• Updated the page to have the latest changes.
• Card
• BREAKING CHANGE: Structure overhauled and improved properties to make the component more usable.
• Added draggable functionality.
• Added outline card type.
• Carousel
• Updated icon only arrow buttons at the top of the carousel.
• Added more guidance on carousel's accessible usage.
• Drawer
• Re-instated component.
• Updated guidance to clearly differentiate from the Sidebar component.
• Number input
• Added a new component variation ‘with popover', where components can be pasted (up to 5).
• Table
• BREAKING CHANGE: Structure overhauled and improved properties to make the component more usable.
• Added draggable cells.
• Updated pagination footer to consume the new “integral” variant.
• Added an additional 'Do' to show an edge case when numerical data can be left aligned.
• Updated all visual content to feature the latest structural changes (e.g. separate components based on size).
• Text editor
• Updated all images with the new Copilot draft header design.
• Added Responsive.
• Added Copilot-related state in Variations.
• Tile
• BREAKING CHANGE: Structure overhauled and improved properties to make the component more usable.

Updated patterns

• Definition list
• Updated Anatomy image by adding the saved data.
• Updated the Variations, added the vertical alignment and set as default.
• Added Surface.
• Added a Do to Dos and don'ts.
• Added accessibility guidelines for displaying a blank input.
• Secondary navigation
• Added a new product vertical navigation pattern based on the DS and Carbon Audit feedback.
• Profile selector
• Added a new pattern based on the Employee selector community pattern, as an alternative to the not accessible Duelling picklist.

v1.09

Published on 4 April 2025

Figma libraries

• DS Official Foundations library. Updated 4th April 2025. See the publication details.
• DS Official Components library. Updated 4th April 2025. See the publication details.
• DS Official Patterns library. Updated 4th April 2025. See the publication details.

Foundations

• Branding
• Created new 'Branding' page, consolidating elements from our brand portal, Sage logo page, and Branding your AI page from the AI hub.
• Synced this page to the AI hub and deleted the Branding your AI page and Sage logo page.

Components and patterns

Updated components

• Bubble
• Updated examples to be consistent with the Factory Framework
• Updated the feedback button
• Removed keyline from the data summary block asset
• Removed chart and citation blocks
• Removed pill from data legend block
• Color picker
• Component enhanced, and guidance and examples updated to reflect the changes:
• New color palettes added
• New S and L sizes added
• Flow guidance incorporated into States section
• Variations and Dos and don'ts sections added
• Divider
• Renamed it to "Divider "
• Added Technical example section
• Dropdown
• Added caution state
• General specs
• Updated the Dos and Don'ts section around NOT using ghost characters and instead utilising hint text.
• Updated guidance around the Caution states
• Tab
• Added caution state
• Table
• Added an empty state for when the search above the table yields no results
• Added a Draggable Variations
• Deleted icons inside header cells as per audit feedback
• Text Input
• Added caution state
• Typography
• Added 'Saved data', which was previously 'Readonly'
• Added Dos and Don'ts, and included different approaches for usage examples of 'Saved data'

Updated patterns

• Copilot panel
• Updated examples with new Bubble component updates
• Updated content to be consistent with the Factory Framework
• Page footer
• Moved the Footer component from DS Components to DS Patterns
• Changed pattern name to 'Page footer'

Deprecated components

• Input group
• This component has been deprecated based on the feedback from the audit

v1.08

Published on 25 March 2025

Figma libraries

• DS Official Foundations library. Updated 25 March 2025. See the publication details.
• DS Official Components library. Updated 25 March 2025. See the publication details.
• DS Official Patterns library. Updated 25 March 2025. See the publication details.

Get started

• Meet the team
• We have updated the team members page to reflect some changes within the DS team, as well as adding a section about the Experience Consistency Team.
• Pattern & Comp statuses
• We have added a page that described the review system that the ECT will apply to patterns and components and the tags that will indicate their current status in the DS.

Components and patterns

Updated foundations

• Layout
• We have removed the Flexbox component as the Layout component will take its place. Flexbox and Layout were very similar components with the Flexbox allowing to create compositions of containers (Card, Dialog, Tile, etc.) which is now deprecated.
• We have moved the Layout from DS Components to DS Foundations
• We have consolidated the variants into a single, flexible variant that can be used for all use cases
• We have simplified the structure of the swappable blocks and of the blocks container to allow for a more seamless designing experience

Updated components

• Bubble
• We have simplified the structure of the swappable blocks and of the blocks container to allow for a more seamless designing experience.
• We have updated the keyline border styling to match Carbon.
• Button toggle
• Added S-size to the toggle button group component.
• Card
• Created two variants ‒ Card: simple and Card: flexbox, with the simple variant designers can swap a DS or custom component they have created, with the flexbox variants the designers can start constructing more complex layouts with DS and custom components.
• Removed footer option ‒ to add a footer to the card designers can now include it as last element in the flexbox variant.
• Message AI: Nudge
• We have updated the keyline border styling to match Carbon.
• Tile
• Created two variants ‒ Tile: simple and Tile: flexbox, with the simple variant designers can swap a DS or custom component they have created, with the flexbox variants the designers can start constructing more complex layouts with DS and custom components.
• We have added the capability to add a keyline border on the left with the possibility to add the following status colors: info, warning, positive, negative, important and neutral.
• Tile select
• We have simplified the structure of the swappable blocks and of the blocks container to allow for a more seamless designing experience.

v1.07

Published on 28 February 2025

Figma libraries

• DS Official Foundations library. Updated 28 February 2025. See the publication details.
• DS Official Components library. Updated 28 February 2025. See the publication details.
• DS Official Patterns library. Updated 28 February 2025. See the publication details.

Components and patterns

Updated components

• Badge
• Added alternate color in Variations .
• Updated badge on button and badge in tab examples to show the blue badge.
• Added Do use a suitable color variant.
• Button: toggle
• Added back the disabled state after the audit comments.
• Pill
• Added usage guidance block with some examples.
• Step indicator
• Updated guidelines and best practices
• Added usage examples
• Tab
• Updated all images. Improved the design for better visual clarity based on the design system survey.
• Updated dos and don'ts.
• Text editor
• Minor updates to the Variations section.

Updated patterns

• Filtering
• Updated the pattern using the new 'search with filter' component.
• Simplified some of the example flow screens.
• Nav: Product - Global navigation
• Update Dos and dont's with guidance on notifications.
• Release notes
• Updated the pattern using the new 'search with filter' component.

Videos

• How-to tutorials
• Added Brand customization variables video.
• Reordered videos

v1.06

Published on 14th Feb, 2025

Figma libraries

• DS Official Foundations library. Updated 14 February 2025. See the publication details here.
• DS Official Components library. Updated 14 February 2025. See the publication details here.
• DS Official Patterns library. Updated 14 February 2025. See the publication details here.

Components and patterns

Updated components

• Accordion
• Moved the chevron position from the right to left of the text so that users with screen magnification know that the header is interactive.
• Added ability to disable top and bottom borders.
• Button
• Created Button (overview) page, other button-related pages made subpages within it.
• Previous Button page that included typical, destructive and AI buttons is now renamed to Button: simple.
• Button: layout is now included inside the "Button" page.
• Button: split
• Updated Do example for menu card minimum width.
• Checkbox
• Added keyline to progressive reveal variants.
• Input group
• Separated input group from the button group.
• Added corresponding corner roundness on the side of separated elements.
• Link:
• Changed color hierarchy and added notes for subtle in the style section.
• Radio button
• Added keyline to progressive reveal variants.
• Table
• Updated header variant background and border colors as per survey feedback.

Updated patterns

• Batch selection
• Updated component name from bulk action to batch selection.
• Copilot panel
• Removed drawer variant within Figma as it is deprecated. A drawer-like variant is still available with the Sidebar without overlay.
• What's new dialog
• Changed name from what's new "carousel" to what's new "dialog".
• Updated all the content images, added dos and don'ts section.

v1.05

Published on 31st Jan, 2025

Figma libraries

• DS Official Foundations library. Updated 31 January, 2025. See the publication details here.
• DS Official Components library. Updated 31 January, 2025. See the publication details here.
• DS Official Patterns library. Updated 31 January, 2025. See the publication details here.

Components and patterns

Updated components

• Loader
• Added AI loader in Variation and Dos and don'ts.
• Pagination
• Added border and background in default state.
• Added a floating state in case it is used in another design and needs to be rounded.
• Standardised dropdown type on the right side to match the page number input on the left.
• Removed small screen breakpoint because it was essentially the same as the large screen one and it could be adjusted manually.
• Added TS tokens specific to the pagination.
• Search
• Updated the ‘search’ button – it is now inside the search field. This is based on a similar design we had for the search component with filter.
• Updated the look of the ‘advanced search with filters’.
• Consolidated ‘typical search’ and ‘advanced search’ into one. Filters can now be toggled on and off.

Deprecated components

• Building blocks
• Removed slide template asset as it was used in the removed Carousel example in Dialog page.
• Dialog
• Removed Carousel example as it is not accessible.

Updated patterns

• Nav: product
• Streamlined Navigation: global and Navigation: product into a single page called Navigation: Product. The former patterns have been renamed:
• “Navigation: global” is now “Nav: product global”
• “Navigation: product” is now “Nav: product secondary”
• Nav: marketing
• Added marketing specific variants for Navigation:
• “Nav: marketing primary”
• “Nav: marketing secondary”

Videos

• How-to tutorials
• Added orange callout stating some videos using the frozen Figma libraries.
• Added links for Figma prototypes and demos.
• Removed outdated Figma variables video, though it's still available in Loom.
• Updated Light and dark modes introduction.
• Added Frozen product variables video.

v1.04

Published on 20th January, 2025

Figma libraries

• DS Official Foundations library. Updated 20th January, 2025. See the publication details here.
• DS Official Components library. Updated 20th January, 2025. See the publication details here.
• DS Official Patterns library. Updated 20th January, 2025. See the publication details here.

Get started

• How-to tutorials
• Updated ‘Please contact us’ link.
• Light and dark modes: how to quickly change designs between light and dark modes.
• Large and small screen variables: this video highlights the efficiency and collaboration benefits of the new DS Figma libraries, particularly in terms of responsive design.
• Added link for Tokens Studio plugin installation.

Foundations

• Design tokens
• Primitive and color mode token tables updated.

Components and patterns

Updated components

• Dropdown
• Updated “error on load” state to be more in line with the accessibility guidelines.
• Add autocomplete, autosuggest, combobox as also-known-as below the page heading.
• Pill
• Updated pill text to be white.
• Updated and reintroduced orange color for warning pills.
• Updated hover bg style on dismissable outlined pills.
• Table
• Added “secondary child” option for a cell for when there is more than one row of child cells.
• Adjusted invisible spacer for the child to across 3 sizes to be aligned with the parent cell with icon.

New patterns

• Employee selector (Community pattern)
• Enables the selection of several employees according to simple or extended criteria for large data records.

Updated patterns

• Error state
• Updated "footer" to feature a button instead of links.
• Copilot panel
• Removed user input and chat history.
• Updated the disclaimer footer content.

v1.03

Published on 29th November, 2024

Figma libraries

• DS Official Foundations library. Updated logo & identifiers. See the publication details here.

Components and patterns

Updated components

• Dropdown
• Added 2 new versions of dropdowns: with subtext (with descriptions) and with error on load.
• Updated Anatomy, Variations and DOs and DONTs accordingly.
• Bubble
• Updated Block, and added Disclaimer.
• Added Examples tab.
• Message: AI Nudge
• Added "Use cases" tab with documented use cases from the AI Hub
• Number input
• Updated the introduction by adding more relevant names.
• Added new example in Dos and don'ts.
• Text area
• Updated Size by adding a minimum height.
• Text input
• Updated variations by adding on surface and power by Ai. Removed other name.

Deprecated components

• Anchor nav: quick links
• Moved from Components to the List pattern as a variant.

Updated patterns

• Subscription
• Updated images in Anatomy.
• Updated images in Dos and Don’ts.
• Copilot panel
• Updated copy and images from AI Hub
• Added V2 in Interactions.
• List
• Merged the current List component with the former Summary List component to create two new variants: List: summary and List: content links
• Added the former Anchor nav: quicklinks component to this pattern as a new variant: List: quicklinks.

v1.02

Published on 15th November, 2024

AI Hub updates

We've published new guides for Sage Copilot behaviors.

Components and patterns

Updated components

• Dialog
• Updated dialog examples that used old _header instance.
• Sidebar
• Clipped content inside the sidebar so that the scrollbar does not go over the borders in the event when the footer is hidden.
• Added separate _header components for the sidebar so that AI border can be changed from left to right to no alignment without text & component reset (in building blocks).
• Message: contextual
• Set a maximum width for the heading and message text to aid readability.
• Message: global
• Added a “callout” variant to the original component which has been now renamed to “Message: global standard”.
• Added message asset that includes a call to action with a dropdown, which can be used in the “Message: global standard” component
• Added a separate component called “Message: global selectable” which includes a hover state and allows users to tap on the container and navigate to another page or perform an action. Unlike the standard component, this new component allows selection at the container level, enabling users to engage with it as a whole rather than just its internal elements.
• Input group
• Added new Input group component that combines multiple form inputs and related actions into a single, cohesive interface.
• Footer
• Created new component. Adapted web component to new DS styling.
• Region language selector
• Created new component. Adapted web component to new DS styling.

Deprecated components

• Carousel
• Deleted ‘Carousel: spotlight’ component as it’s no longer required.
• Changed name of ‘Carousel: typical’ component to ‘Carousel’ as there is now only one type of carousel.

Updated patterns

• Image editor
• Updated an icon for "Reset" button inside the editing control button group. It now features an already existing "u_turn_left" icon.

v1.01

Published on 31st October, 2024

First things first

After a best practice review, the What's New page has been renamed to Changelog.

Components and patterns

Updated components

• Anchor navigation: quicklinks. Updated Anatomy, States. Added_Variations._
• Bubble. Updated Anatomy image. Updated Variations image, added On surface.
• Button. Subtle button now available in L size.
• Button: popover. Updated Variations by adding Custom variations, and On surface.
• Card. Updated Anatomy by added draggable handle and updated the image. Updated Size. Updated States and added the image. Updated Example to Variations, added Not draggable and On surface. Updated Dos and don'ts image.
• Carousel.
• Removed references to ‘What’s new’ in the text on design and accessibility pages.
• Edited name and Carousel description text.
• Removed the 3 examples: Introduction, feature and final slides.
• Removed Anatomy image of the Spotlight variant.
• Renamed Anatomy image from ‘Anatomy- Typical’ to just ‘Anatomy’ now there is only one variant.
• Dialog. Updated Width responsive. Added On surface, and Dos and don'ts.
• Dropdown.
• Updated Variations, added On surface
• Updated States
• Updated sticky footer buttons for L size
• Updated prefix for M size
• Updated absolute positioning of the dropdown
• Fieldset. Updated Variations.
• File input.
• Updated anatomy image
• Updated size guidance
• Removed guidance which is not relevant to the updated Figma component.
• Added states that are unique to the component
• Updated some images that had incorrect border widths
• Corrected the caption on the first Do
• Updated the image on the file icon Do
• Removed irrelevant text in error Do
• Form key. Added Example.
• Message: contextual.
• Changed link text from bold to regular in weight in the ‘Importance’ section.
• Edited text on ‘Do use a message at the top of a form’ in the ‘Dos and don’ts’ section in Figma file.
• Updated all ZH assets as they were linking to an old Figma file.
• Added Information under ‘Size’ section about setting a maximum text width of 560px to aid readability.
• Password. Added a dynamic Password checker below the Hint text.
• Radio button. Updated label text.
• Search. Updated Anatomy. Removed Types. Updated Variations by adding Simple subtle, Simple typical, Advanced filter. Removed Best practice.
• Sidebar. Updated Size, width responsive.
• Table.
• Reordered the ‘Rows’ section of images to align with the Figma file.
• Removed ‘standard’ row image as it’s confusing when we also have a default row image.
• Updated all image assets to match Figma.
• Under ‘Columns section I’ve added the word 'Locked' in all the columns that are locked for clarification.
• Moved ‘Footer row’ description / bullet points under Footer row image for consistency.
• Added the word ‘row’ into ‘Checkbox’ messaging bullet point.
• Removed second bullet point as this is not achievable in the Figma component at the moment.
• Changed header column text from ‘Select all’ to ‘Select’ as the functionally is not supported in the Figma component for checkbox or button inclusion at the moment.

Updated patterns

• File preview. Updated images and guidance.
• Form: address. Updated Address fieldset. Created revision history.
• Image editor. Updated Anatomy image. Updated User flow.
• List. Updated written guidance.
• Summary list. Updated written guidance.
• Waiting state. Updated Dos and don'ts image.

v1.00

Published on 24th September, 2024

Welcome to the NEW Design System

• New design system released.
• Web and product design systems still available but frozen.
• WCAG 2.1 compliant.
• Fully responsive.
• AI kit components now embedded inside the new component library reducing the need to have as many libraries switched on.
• More on brand than ever before for a visually cohesive experience across the entire Sage Ecosystem.
• Theming Supported:
• Light and Dark
• Small and Large screen sizes
• Product Specific and Marketing specific
• Foundations and Components overview page added to online guidance.
• Marketing content added in Foundations to online guidance.
• Design Kits added to online guidance.