🚧 Beta Enhancement - Figma Only, Pending Development
⛔️ Deprecated - Do not use
- 🚧 Navigational Tabs [Beta]: Introduced a new component for organizing content into distinct sections within the same page or view
- 🚧 Time Input [Beta]: Introduced new variation of formatted text inputs component for user to enter time
- Accordions: Added variables to change chevron position to Start or End (no longer in Beta)
- Card: New Marketing badge property with two positions, corner and side (no longer in Beta)
- Link Out: New link variation (no longer in Beta)
- Marketing Badge: New badge type (no longer in Beta)
- Accordions: Updating naming convention from left and right chevron to Start and end chevron
- Accordions: Chevron After alignment updated to top
- Component Configuration: Links updated to match each component and using the new url format.
- Foundations Grid: 4 Column Variable value updated from 88 to 384
- Link Out: Link out icon updated to small size icon
- Marketing Badge: Updating naming convention from left and right chevron to Start and end chevron
- World Service Pattern: unhid World Service Patter component
- 🚧 Link Out: Added a Link Out variation to Links
- 🚧 Marketing Badge: New badge type
- Continuous Linear Tracker: Icon marker present on default state
- 🚧 Accordion: Added variables to change chevron position to allow left or right
- 🚧 Slider: Enhanced Thumb’s touch-target surface area and focus ring’s contrast. Updated naming semantic to “Thumb” for parity with code, removed unnecessary variations of data-tip. Removed inset padding on min-max values to align with code
- Important to note: In order to accept this new change, please swap out the slider via the Design Panel in Figma. This change will not be accepted via updating your library and will reset any existing content.
- 🚧 Card: New Marketing badge property with two positions, corner and side
- Search: Updated search examples to match React code examples
- Accordion: updated padding and radius to fix focus alignment bug, upgraded properties naming to Subtext, revised ReplaceMeSlot so that persistent purple background is fix and added a instance swap property to Accordions
- Primary Segmented Control: Removed max width spacing, adjusted SelectedItems so that all items set to width and are positioned centered, adjusted SelectedItems container so that position is set to center, removed unnecessary icon
- Secondary Segmented Control: Adjusted SelectedItems so that all items set to width and are positioned centered, adjusted SelectedItems container so that position is set to center, removed unnecessary icon
- Menu: Added icon toggle to control panel
- Overflow Menu: Added icon toggle to control panel
- Icon Button Tertiary: Removed the hidden number badge wrapper layer, please use the number badge wrapper component instead
- Horizontal Navigation: Improved colours on Brand, Brand alt, and dark mode
- Menu & Overflow Menu:
- Resolved scroll bar issue
- Updated reference surface sheet, removed checkbox, radio, and button with icon lists for alignment with code.
- Note: This component may inquire a minor reset to improve consistency. While some overrides may refresh, your core design work will remain intact. We recommend updating to ensure you have the latest functionality
Dot Badge: Updated reference sheet to remove unused components
Vertical & Primary Navigation: Update on pressed state to fill icon & additional component enhancements
- 2-Lined Select: focus added for disabled state
- Card Digital Icon: Added card digital icon to the kit
- Tap to Pay Icon: Increased the size from 24 to 48 in the kit
- Replace Me Slot: Persistent purple background fix. Added a instance swap property to Carousel and moved Slot background to a frame inside the component.
- Link List: Updated heading styes to label and removed larger heading option
- Focus fix Step 1 of 2: Updated padding and radius to fix focus alignment bug
- Taglines: Added tagline for “Don’t live life without it” and “Don’t do business without it” in 3-line stacked format
- Icon Sizer Component: Rename icon layer to “icon fill” for clearer icon component properties
- Small and Medium Icons: Rename icon layer to “icon fill” for clearer icon component properties
- Account Icon: Relinked Icon component to missing Account icon
- Menu: renamed container to “Popover” to semantically match components and reusable sub-components.
- Overflow Menu: renamed container to “Popover” to semantically match components and reusable sub-components.
- Multi-Step Tracker: Removed ability to change ‘Complete’ and ‘Incomplete’ progress lines, lines are automatically adjusted depending on state. We do not anticipate a breaking change as the size was not impacted.
Possible Figma Breaking Change
- Progress Indicator: Continuous Linear Tracker - added in value fields to align with code and enhance prototyping
- Primary Button: Added Boolean property to Trailing Icon, Trailing icon can be turned on via the Component Variable Properties panel
- Button: When the Button is in loading state, the indeterminate loader now animates, reflected in Figma Prototyping mode
- Icon Button: When the IconButton is in loading state, the indeterminate loader now animates, reflected in Figma Prototyping mode
- Linear Indeterminate: The indeterminate loader animates, reflected in Figma Prototyping mode
- Stepper: Adjusted order of states to be standardized with other inputs (move disabled to the last)
- Modal: padding left & right to button adjusted to 24px
- Search: scrollbar appears when
show scrollbar is selected, scroll bar appears in pop over
- Info Tooltip: Polished animation settings to be more natural, fixed override issue so that Tooltip appears when mouse enters or when tapped, updated prototype settings to match what is in code
- This fix was then updated in Multi-Select and Date Picker
- Multi-Select: Updated surface examples to reflect component and fixed documentation headlines to proper type style
- Calendar: The Calendar Popover has been turned off for consumption, but is still part of the Date Picker and Date Range Picker
- Carousel: added infinite loop prop
- Carousel: updated control layouts from 44px to 48px
- Inputs & Select: Focus states flex horizontally
- Tooltip: Fixed max width to 475px. Fixed clipping issues on parent container and alignment issues on info tooltip. Fixed filled icon on active.
- Select: Error Message wrap and fill container. Show error message in right panel
- Radio: Error Message wrap and fill container
- Date Picker/Date Range Picker: Error Message wrap and fill container. Show calendar component in right panel
- Checkbox: Set component width to 316px. Show message in right panel
- Stepper: Show validation/message in right panel for both success and error. Error Message wrap and fill container
- Progress Tracker: added gradient variation of progress bar, thin or thick, and boolean icon marker
- Input: removed min-width property for more layout flexibility
- Inputs/Selects/Search: Removed min width
- Tertiary Button: Configured the focus state to off in default view
- Radio Button Group: Added a horizontal layout structure so that selected radio is persistent in either vertical or horizontal layout
- Multi-Select:
- Popover: Scrollbar alignment and responsiveness fixed
- Checkboxes (sub-component): Fonts are correct weight and fill-width
- Filled with tags (state): Tags now wrap to multi-line
- Smart Watch Icon: fixed the icon resizing issue (04/25/2025)
- Foundations Reference Sheets: Surfaces; updated static surfaces reference sheet on foundations page, Elevation; added in elevation reference sheet on foundations page
-
Multi-select: Interaction states; fixed prototyping bugs across each state, Filled with tags state; updated input width to fill, Forms label; updated tooltip in each state
-
Select (select, two-lined select, custom select): Adjusted focus behavior within each interaction state; fixed overlay prop so that when input opens it doesn’t shift
- Flag Component: Fixed ability to swap country flags
- Card Art/External: Chase/Citi art updated to resize appropriately horizontally
- Vertical navigation: Chevron updated from chevron right to chevron down for collapsed state, Chevron updated from chevron down to chevron up for expanded state
- Data tables: Chevron updated from chevron right to chevron down for collapsed state, Chevron updated from chevron down to chevron up for expanded state
- Info tooltip: Changed info icon on hover and pressed states of inline tooltip icon button component from outline to filled, close icon on [default] [hover] and [pressed] states of inline tooltip icon button component from outline to filled, hid disabled state of inline tooltip icon button for both info and close icon
- Link List: Heading is optional, added horizontal variant, component configuration includes WCAG chevron guidance
- Data tables: Naming updated to expandable from accordion for that variant
- 2-lined select: Chevron updated to align with header instead of the component
- Segmented control: Frame updated to obey hug
- New icons: Gen AI, Key, Infant, National ID Card, Flag, Megaphone
- Color Styles: Hide color styles in Assets library from being published, because in components or designer, they are supposed to be linked to Design Kit tokens
- Select Default Card Icon: Will properly resize
- Assets library sync: Icon component updates
- Multi step tracker: Substep completed state colour token fix
- Date picker: input text on active layer unhidden and can be hidden/shown in the props
- Breakpoints: Discrepancies within the column variables for Medium and Small breakpoints fixed.
- Name correction: no fee, pound no fee
- DLS 6 Class naming removal
- Wallet icon resizing in component
- re-organized the structure of the assets to Icons, Internal and External for easy discovery
- re-structured the card component, so it is less components and easier to change variations
- Tooltip – max width updated to 475px and min width replaced with text hug
- Cards - Grey icon background removed from card vertical default with padding
- Date picker – focus padding and radius update
- Foundation Variables: New show/hide Booleans for screen sizes
- Button (primary, secondary, tertiary) component configuration: updated Properties and Variables section explicitly calling out how to access show/hide button icon
- Number badge: Removed Number Badge left alignment
- Dot badge: Removed dot badge left alignment
- Tertiary button: Updated tertiary background dark mode hover and pressed state colours on foreground, foreground subtle, and base
- Notification: width now aligns with xlarge page size grid
- Checkbox: default states now have the correct icon
- Notification: Message text colour now changed on dark mode
- Notification: Text style updated
- Tertiary button Tokens: Updated tertiary background dark mode hover and pressed state colours on foreground, foreground subtle, and base
- Darker secondary background added for segmented control
- Show/hide Booleans for screen sizes
- Tertiary background: Updated dark mode hover and pressed state colours on foreground, foreground subtle, and base
- Tertiary button: Tertiary grey styles on brand and brand alt
- Flag: Component update from assets file
- Table: Guidance in component configuration details
- Card: Clearer hover and press state in Light mode
- Elevation styles: tokens update from foundations surface table
- Getting Started: updated with new component token info
- Date range picker: calendar now opens on active state
- Input: improved contrast for borders in default state
- Radio: improved contrast for border and graphic on brand
- Checkbox: improved contrast for border and graphic on brand
- Vertical Navigation: heading left padding respects hierarchy
- Vertical Navigation: heading background for secondary and tertiary updated to gray
- Vertical Navigation items: height standardized
- Typography: Heading Medium updated from book to regular
- Notification: Link colour updated for better contrast
- Navigation tokens
- Pop Over Tokens
- Synced component tokens with updates from v7 Web Kit
- Synced effect styles with v7 Web Kit
- Updated ‘Getting started’ documentation
- .dls-icon-picture
- .dls-icon-picture-strikethrough
- .dls-icon-lock-card
- .dls-icon-add-card
- .dls-icon-check-spending-power
- .dls-icon-remove-card
- .dls-icon-replace-card
- .dls-icon-add-someone
- .dls-icon-refer
- .dls-icon-wallet
- .dls-icon-carbon
- .dls-icon-smartwatch
- .dls-icon-fingerprint
- .dls-icon-bank-app
- .dls-icon-bank-mobile
- .dls-icon-bank-mobile-landscape
- Heart Icon scales appropriately
- Surface Border subtle appear
- Elevation state styles to make hover state clearer
- Input borders on default lightened to improve contrast
- Radio border and graphic on brand
- Checkbox border and graphic on brand
- Nested surface elevation tokens to have an elevation grouping for findability
- Default state style to state elevations style
- Shadow styles for elevation through to surface table
- Shadow styles for state through state table and surface table
- Hover and pressed state styles
- Button: Guidance in component configuration details to locate show/hide button icon in Variable settings
- Tabs: Icon movement bug fix
- Tabs: Hover state in prototyping
- New primitive tint 60
- New extra high elevation
- New Link list component
- Component token updates
- Updated badge tokens to use surface table
- New logo tokens for blue box
- Secondary CTA width bug fix
- Updated breadcrumb colour
- Breadcrumbs - Updated home icon size
- Vertical navigation - Increased navigation Items to 12
- Multi select - Height updated to match inputs min height (48px)
- Text styles for button and input
- Effect styles for card
- Updated focus - new inverse
- Fixed primary to secondary toggle graphic on brand bug
- Updated disabled toggle state to point to mode table
- Bug fixes to toggle tokens
- New logo tokens for blue box
- Checkbox border and colour bug fix
- Toggle state disabled to state disabled bug fix
- Removed unused tokens:
- surface.on-surface.graphic.brand-toggle
- Radio - FG-brand surface - dot colour bug fix
- Actionable cards - bug fix - text heading on hover and pressed passes contrast on dark mode
- Actionable cards - Relinked elevation styles
- Slider - Updated elevation on handle for states.
- Focus utility component - new inverse boolean.
- Focus colour update: SegmentedControl, SplitButton, and DatePicker/DateRangePicker.
- Getting Started Page - Updated to match new Figma UI
- surface.on-surface.forms.graphic.brand-appear bug fixed on FG-Brand
- New focus inverse token
- Update to focus utility component - new inverse boolean
- Component name updates to improve component findability and help with migration
- Cards - reduce default number of links
- V7 Toggle switch - aligned focus
- Date picker - Calendar position bug fix
- Name update Date range to date range picker
- Added Elevation
- Fixed card actionable heading a graphic bug
- Removed Elevation token styles - State token styles are still avalible
- Updated Dark mode brand graphic and graphic text to BrightBlue 200
- Segmented control - removed Boolean for label
- Foundations tokens - Updated variable scope for findability
- Hidden inline Icon toggle button
- Updated info tool tip to use close icon
- Updated name from v7 Web components to v7 Web Kit
- Added grid styles, the grid styles will automatically move to using this library.
- Moved grid and spacing tokens to file
- Hidden horizontal navigation - for parity with react
- Hidden navigation menu - for parity with react
- Hidden Legal
- Hidden file, if you’re missing any tokens (Figma variables), check in the web components file.
- New file
- Added button primary, secondary and tertiary tokens (variables)
- Added card tokens (variables)
- Added input tokens (variables)
- Added focus utility component
- Added replace me utility components
- Tooltip elevation updated to medium
- Modals - Updated Scrim colour
- Navigation updated focus position
- Moved Foundation variables to web components in preparation for local libraries and pattern libraries.
- Moved typography over to web components as part of the preparation for local libraries and pattern libraries. (The typography will automatically move to using this library)
- New radius token - component/small
- Unhidden all surface tokens in preparation for local libraries and pattern libraries.
- Moved font styles to Web Components
- Unhidden - Typography and channel tokens
Please move to using foundation variables in web components, as this file and it’s variables will be hidden later this week.
- Search - Loading bug fix
- Data Tips - Hidden component for parity with Tech
- Inputs - Updated input text properties order - Thanks Scott!
- Progress Indicators - fixed radius bug - Thanks Erika!
- Standardized names to tint and shade
- Card - replace me bug fix
- Dialog - Updated naming for dialog to alert dialog
- Alert Dialog - Elevation update to high
- All inputs - New default size for inputs 4 columns for x-large screen size
- Utility spacer - Hidden component
- Form pattern - Hidden components
- Split button - States update with new built in popover, and Menu button states and radius bug fix
- Icon buttons - removed old number badge. Please use new badge components.
- Data Table - Checkbox alignment
- Accordion - icon added to accordion properties
- Card - property updates
- New cover (Thank you Denisse!)
- Accordions - button text colour bug fix
- Replace me component - colour bug fix on brand, brand alt
- Number Badge - on brand and brand alt colour bug fix
- Search - Disabled Divider on surface brand and brand alt bug fix
- Tabs - label on surface brand and brand alt bug fix
- Date picker - dark mode range colour bug fix
- Slider - border on brand and brand alt bug fix
- Grid Styles - Token value update to align with breakpoint updates
- Columns 1-12 - Token value update
- Margin - Token value update
- Gutter - Token value update
- Screen size - Tokens value update
- New shadow tokens - For hover and pressed state
- Number badge - Size update and font size update
- Modal - New compact size
- Accordion - New border property
- Cards - New remove padding property
- Cards - New hover and press states for actionable cards
- All icons - Updated to new icon component
- Icon button - Icon size updated to medium to match button
- Icon toggle button - Updated animation
- Icon toggle button - Icon size updated to medium to match button
- All components using icon and Icon toggle button - Updated with latest version of components
- Inputs - New Phone input variant with flag and set area code
- Password Input - New hide show property
- Card benefits - Resize bug fix
- Inputs - Properties layer names update
- Menu - item label reflow fix
- Menu - New Icon button option
- Tables - column default alignment bug fix
- Dot Badge - dot position update and primary colour contrast fix
- Primary border style - Bug fix, now uses hover and pressed colours
- Text Badge - reflow bug fix
- Text badge - Icon size update
- Link Back - Animation layout shift Bug fix
- New icon components with set sizes
- Name updates to iOS icons, now have iOS as part of the name
- Name updates to Android icons, now have Android as part of the name
- Arrow down - Resize fix
- Pagination - Fixed font styles bug (thanks @scott)
- Split Button - Fixed reflow bug
- Stepper - Updated reflow
- Modal - Updated heading size
- Multi select Name update - previously multiple select
- Breadcrumb - Focus radius bug fix
- Select - Focus size bug fix
- Single select: (all variants) popover + no hint text auto layout bug fix
- Two-line Select: text properties update
- Multi select: popover + no hint text auto layout bug fix
- Pagination: properties updates
- Pagination: select popover bug fix
- Radio: added focus Boolean
- Segmented control: Properties update
- Primary border state bug fix
- Label font style weighting bug fix - Bold to medium
- Label styles Label styles update from foundations
- Menu properties update
- Link font updated to label
- Menu and Overflow menu Open state bug fix
- Multi-select updated nested atoms with checkbox updates
- Multi-step tracker updated progress bar colours
- Aligned red status tokens to Critical naming
- Notifications - Updated error to critical naming
- Badge - Updated Error to critical naming
- Phone Input - Fixed focus bug
- Breadcrumbs - Updated font style
- Checkbox - Updated properties
- Info Tooltip - Updated property names
- Checkbox - Fixed properties
- Table Columns - Fixed properties
- Monday fixed bug header background
- Accordions - Properties updates
- Filters - Categories removed for Engineering feature parity
- Divider - Removed for Engineering feature parity
-
Surface primary background hover
-
Surface primary background Pressed
-
Removed brand subtle surface from surface table
-
Removed modal and dialogue elevation from modes table
-
Updated Error and success states to match default states when not applicable.
-
Added new tokens for status on brand and on brand alt
-
Utility shadow light tokens
-
Removed ‘light’ and ‘dark’ from match tokens
-
Updated naming convention in bright blue/tints and bright blue/shades and added in a few additional shades
-
Updated naming convention in deep blue/tints
-
Added in secondary brand alt bg token table for actions (updated across modes, surface, and states table under all secondary)
-
Surface table: all dividers and borders sit in on brand and either primary secondary or tertiary
= Mode Table: all dividers and borders sit in borders
-
Border emphasis on dark mode changed to deep blue 400
-
Changed graphic and text error status color to red/400 in dark mode
-
Updated Error and success states to match default states when not applicable.
-
Utility shadow token values and removed dark from name
-
Dark mode onbrand alt forms disables states updated to darker colour
-
Update to forms border disabled to match on brand and brand alt
-
New toggle state primary to secondary border
-
Added new tokens for status on brand and on brand alt
-
Added graphic light match under form/modes/graphic and forms/states/graphic
-
Divider tokens
🐛 Bugs:
-
FIXED: Issue with divider not also hiding when hiding panels and the last panel
-
Added variants (first, middle, last) so no divider needed on last panel or solo panel
-
Linked panel with divider so if one is hidden, the other will also be hidden
🚨 Development Attention Needed:
-
Chevron needs update to icon button and add hover state on icon button
-
Text accordion radius addition
-
Add in logic so that the last panel does not show divider
-
Updated spacing between button and divider to 16px from 24px, same with text/divider on panel accordion update bottom spacing to 16px
-
Changed token naming from subheading to subtext
🐛 Bugs:
🚨 Development Attention Needed:
🐛 Bugs:
- Updates component tokens to use the status token table (reduced number of tokens)
🚨 Development Attention Needed:
🐛 Bugs:
🚨 Development Attention Needed: a lot has changed
-
Secondary button styling updates on base, brand, and brand alt bgs, dark mode too
-
Secondary button dark mode border removed
-
New tertiary button
🐛 Bugs:
🚨 Development Attention Needed:
- Radius has been updated to 4px
🐛 Bugs:
🚨 Development Attention Needed:
🐛 Bugs:
🚨 Development Attention Needed:
- Update radius to component
🐛 Bugs:
🚨 Development Attention Needed:
- Label had a max-width of 284px which was preventing longer labels from taking up the length of the field. Removing it for greater flexibility. Remove max width
🐛 Bugs:
🚨 Development Attention Needed:
-
Updated all icon buttons to 16pxd
-
Added round variants for primary and secondary
-
Icon toggle - added round variants
🐛 Bugs:
🚨 Development Attention Needed:
-
Need to add disabled?
-
Need to sync tokens
🐛 Bugs:
🚨 Development Attention Needed:
🐛 Bugs:
🐛 Bugs:
🐛 Bugs:
🐛 Bugs:
- Added: added/published small heading medium weight