Design Kit Updates

Take a look at the changes we’ve made to our DLS Design Kit for each release.

V6.25+ - June 22nd, 2023

This version is best used with Figma or Sketch 96 and later.

New

Figma kit

• Compatible with DLS version 6.25+
• All components available

For more details on Figma take a look at DLS Design Kit.

Updated

Info Icon

• Name changed from ‘tooltip info’ to ‘info’ to match code

Fixed

Footer

• Fixed issue where links overlap on resize for wide footer

V6.24.0 - March 23rd, 2023

This version is best used with Sketch 95 or later.

New

Icons

• Arrow Filter Up
• Arrow Filter Down

Flags

• Denmark

Updated

Graphics

• Google Play asset

Fixed

Continuous Linear Tracker

• Updated current selection of the tracker e.g. 14,000 of 20,000 miles.
• Accessibility issue fixed of letting the user know what was selected and having screen reader read it out.

Date Picker

• Updated warning icon to be filled.

Header

• Authenticated header to match the live site. It was gray 01 and now white.

Multi-Step Tracker

• Fixed a bug where one line was thicker than the other.

Secondary Medium Button

• Reflow fixed, button size increases when copy updates.

V6.23.0 - November 15th, 2022

This version is best used with Sketch 91 or later.

New

Icons

• Bank app
• Bank mobile
• Bank mobile landscape

Page Templates

Updated

Color

• Gray 04 hex code updated to #8E9092 to have sufficient contrast of 3:1 with gray 01 and lighter
• Neutral hex code updated to #8E9092

• Accordions - Collapsible text link
• Name changed to: Collapsible text
• Updated button states:
• Default: Button size
• Hover: Button size and styling
• Active: Button size and styling

Accordions - Inline collapsible text link

• Name changed to: Inline collapsible text
• Removed second ‘hide details’ button and changed text on button.
• Open: ‘Hide details’
• Collapsed: ‘Show details’
• Updated button states:
• Default: Button size
• Hover: Button size and styling
• Active: Button size and styling

Badges

• Changed outlined badge size from 33px to 32px
• Neutral Status Badge color updated to new Gray 04

Breadcrumbs

• Updated link text to new link styling
• Tap Target height increased to 44px
• Links wrap on mobile view

Buttons

• Floating button back to top
• Changed color from Gray 05 80% opacity (90% on hover) to 60% black (70% on hover)
• Increased size from 40x40px to 44x44px

Cards

• Link styling updated to new underline on default
• Loader default color changed to Gray 04 to pass color contrast 3:1

Carousel

• Pause/Play button added
• Background color updated to gray 01
• Dots are no longer interactive, only arrows control the carousel
• Tap Target height increased to 44px

Checkbox

• Tap Target increase to 44x44px
• Color contrast increase ratio 3 to 1
• Border changed from gray 03 to gray 04

Data Table

• Unselected sort header icon changed to gray 04 to have sufficient contrast of 3:1 ratio with gray 01 background

Date picker

• Increased size of targets to hit 44x44px target minimum
• Updated date states

Date range picker

• Increased size of targets to hit 44x44px target minimum
• Changed to showing one month at a time
• Moved to using one input with input field mask, so that calendar can be used at 320px
• Updated date states

File upload

• Updated link text to new link styling

Header and footer

• Updated link text to new link styling
• Increased size of social media buttons to hit 44x44px target minimum

Inputs

• Color contrast of input border changed to gray 04 to have sufficient contrast of 3:1 ratio with gray 01 background or lighter
• Added success and error messages for success and error states

Link - Inline

• Updated states:
  • Default: Added underline
  • Hover: Changed default color to 10% Darker (#0065BD)
  • Pressed: Changed default color to 20% Darker (#005AA8)

Link - Standalone

• Increased target size to 44px
• Updated states:
  • Default: Added underline
  • Hover: Change default color to 10% Darker (#0065BD)
  • Pressed: Change default color to 20% Darker (#005AA8)
  • Focused: Changed size to match target size, 3px corner radius

Link - Dark mode

• Updated states:
• Changed Focus to white, 3px radius

Map tooltip

• Close button update
• Increased target size to 44x44px
• Color change from Gray 03 to Gray 05

Modal

• Increased close target size to 44x44px
• Multi Step Tracker - Simple
• Update Line style - Height 2px, Dash 2px gap 4px. Update Gray to Gray 05
• Update dot state
• Introduce new text to Mobile
• Dot number and total number of dots

Multi Step Tracker - Complex

• Update Line style - Height 2px, Dash 2px gap 4px. Update Gray to Gray 05
• Update dot state
• Introduce new Dot Sub states
• Introduce new text to Mobile
• Dot number and total number of dots

Navigation

Primary

• Updated text colors

Secondary

• Updated text colors.
• Updated padding top and bottom to 11px
• Increased target size to 44px

Tertiary

• Updated text colors
• Updated padding top and bottom to 11px
• Increased target size to 44px

Notification

• Updated link text to new link styling
• Increased close target size to 44px

Overflow Menu

• Increased close target sizes to 44px
• Updated focus size to 3px inside menu item

Pagination

Size Changes:

• Updated sizes of Page targets to 44x44px.
• Added 8px padding between each page.
• At 320px Break point:
• Removed padding between each page
• Reduced ‘…’ to 24px width
• Reduced padding between button and pages to 6px

Style changes:

• Removed background hover state from page links.
• Uses link state styling for pages in default state.
• Updated ‘previous’ and ‘Next’ button states.
• Added button version for desktop, mobile and extra small.

Progress Indicator - Progress Bar

Segmented Tracker:

• Added text (4 of 12 Completed) below the tracker.

Continuous Tracker:

• Left align the success text to maintain consistently.

Progress Indicator - Load Patterns

Linear Determinate:

• Background G02 and added percentage below the tracker

Linear Indeterminate:

• Removed gray background and made it transparent

Circular Determinate:

• Background G02 to maintain consistency

Circular Indeterminate:

• Active bar 1/4 was made transparent
• Gray background 3/4 is now active (bright blue default and white for dark theme)

Radio Buttons

• Color contrast increase ratio 3 to 1
• Border changed from gray 03 to gray 04
• Fixed the horizontal layout and reduced the overall default width

Search - Simple Results

• Increased target size and search result to 44px height
• Introduce new text link styling

Search - Advanced Results

• Introduce new text link styling

Slide Stepper

• Plus and minus buttons have been updated to gray 04 to have sufficient contrast of 3:1 ratio
• Background color of incomplete changed to gray 04 to have sufficient contrast of 3:1 ratio
• Slider Knob now has 1px white border outside to create contrast between gray 04 and bright blue
• Slider buttons tap target increased to 44x44px

Tabs

• Unselected Hover: the bright blue text was not passing 4.5:1 ratio contrast with G02. So the new color is #0065BD (v7-Bright Blue 510) is the new text hover style
• Along with default and active tab component we added in hover component so tabs can be easily changed by designers
• Mobile reflow was redesigned to be vertical tabs so the labels are fully visible. Organized the tabs to easily access desktop and mobile versions. Mobile version has 5 tabs and can easily change the layout by removing 1 of the tabs

Toggle Switches

• Off state color updated to gray 04 to have sufficient contrast of 3:1 ratio with gray 01 background or lighter
• Fixed the horizontal layout, Right Align text and reduced the overall width
• Added Disabled state

Video

• Video control tap target size increased to 44x44px

V6.21.1 - Febrary 18th, 2022

This version is best used with Sketch 82.1 or later.

New

Data Viz Colors

• dls-aqua-100
• dls-aqua-200
• dls-aqua-300
• dls-aqua-400
• dls-aqua-500
• dls-aqua-600
• dls-bright-blue-100
• dls-bright-blue-200
• dls-bright-blue-300
• dls-bright-blue-400
• dls-bright-blue-500
• dls-bright-blue-600
• dls-deep-blue-100
• dls-deep-blue-200
• dls-deep-blue-300
• dls-deep-blue-400
• dls-deep-blue-500
• dls-deep-blue-600
• dls-green-100
• dls-green-200
• dls-green-300
• dls-green-400
• dls-green-500
• dls-green-600
• dls-magenta-100
• dls-magenta-200
• dls-magenta-300
• dls-magenta-400
• dls-magenta-500
• dls-magenta-600
• dls-orange-100
• dls-orange-200
• dls-orange-300
• dls-orange-400
• dls-orange-500
• dls-orange-600

Updated

Sketch Kit

Renamed to Design Kit

Fixed

Pagination

Page 9 added

Deprecated

Data Viz Colors

• dls-teal
• dls-salmon
• dls-dark-yellow
• dls-gold
• dls-bright-blue-20
• dls-bright-blue-40
• dls-bright-blue-60
• dls-deep-blue-20
• dls-deep-blue-40
• dls-deep-blue-60

V6.18.0 - July 29th, 2021

This version is best used with Sketch 72.4 or later.

New

Colours

• New Light Blue accent color added

V6.17.2 - July 8th, 2021

This version is best used with Sketch 72.4 or later.

New

Flags

• Ethiopia
• Georgia
• Kenya
• Mozambique
• Nigeria
• Russia
• Rwanda

V6.16.1 - May 21th, 2021

Fixed

Icons

Quick Transfer filled and Transfer filled borders were removed due to issues when released in code

V6.16.0 - April 19th, 2021

This version is best used with Sketch 71.2 or later.

New

Icons

Created a new Banking section in icons.

• Overdraft Protection
• Direct Deposit
• Recurring Interest
• Round the Clock
• Security
• Check Banking
• Check Scan
• Transfer
• Savings
• Multi-Channel
• E-Check
• Wire Transfer
• Quick Transfer
• Instant
• Retirement
• CD
• High Yield

Fixed

Social Icon

• Reduced file size of Instagram social icon

Footer

• Added social icons to global footers

V6.15.0 - March 10th, 2021

New

Icons

• Bookmark
• Pound No Fee

Buttons

• Loading Buttons

Updated

Reference Sheet

• Added Data Visualization examples (Bar Charts, Donut, Pie, Line, and Spline)
• Added Small Data Table
• Added Hero layouts and gradients

V6.14.2 - January 25th, 2021

This version is best used with Sketch 70.3 or later.

New

Digital Wallet Buttons

• Google Pay
• Samsung Pay

Carousel Controls

• Default and light versions of manual and auto-rotate controls added

Updated

Breadcrumbs

• Expanded to 1, 2, 3, and 4 steps

Footer

• Date updated to 2021

Social Icons

• LinkedIn updated to new brand color

Fixed

Multi Select Dropdowns

• Borders on list items fixed and overrides cleaned up

Icon Buttons

• Added tint so color doesn’t reset with icon change

Buttons on dark backgrounds

• Added Hover and Pressed states

Deprecated

App Badge

• Windows Store

V6.14.0 - November 2nd, 2020

This version is best used with Sketch 69.1 or later.

New

Icon

• Open Banking
• Send & Split

Updated

Icon

• Bank
• Split

V6.13.2 - October 19th, 2020

This version is best used with Sketch 69 or later.

Updated

Color

• Library color styles have been updated to Color Variables

V6.13.1 - October 5th, 2020

This version is best used with Sketch 68.2 or later.

General bug fixes:

• Updated date in Footer
• Label-2 is sentence case to match code

v6.13.0 - September 21st, 2020

This version is best used with Sketch 68.2 or later.

New

Search

Search has been redesigned for better usability and accessibility with two distinct variations.

• Search Input
• Search Input with Button

Flags

• Chile
• Colombia
• Ecuador
• Peru
• Venezuela

Updated

Status Color Orange

• Status color orange (Moderate) has been slightly darkened for higher color contrast on white.

Special Cards

• Location of Info glyph in special cards adapts to its text.

Deprecated

Standard Search Field

Coming Soon

All new alerts and notifications.

v6.12.0 - August 26th, 2020

This version is best used with Sketch 68 or later.

New

Dropdowns and Inputs have been rebuilt from the ground up with built in variations, making swapping states super quick and easy.

Existing symbols have been renamed with x / Deprecated so existing files won’t break.

Dropdowns

• Multi-select
• Multi-select with hint
• Select and Select with Hint open menu state

Icons

• Link Out glyph
• List icon
• Yelp social icon

Inputs

• Hint text has moved above the field, under the label
• States are now drag and drop and simple to swap for:
  • Basic
  • Basic with Hint
  • Copy Link
  • Currency (left and right)
  • Date
  • Password
  • Phone Number (Basic, Multi Country Dropdown, and Single Country Flag)
  • Text Area

Updated

Date Picker

• Closed input has moved from Inputs to Date Picker

Error and Success Message

• Both symbols have Smart Layout vertical resizing to reflow text to a second line

Deprecated

• 1 line Dropdown
• 1 line / label Dropdown
• 2 lines / label Dropdown
• Inputs with hint text below

Coming Soon

An updated design for Search and improved keyboard navigation.

V6.11.0 - July 27, 2020

This version is best used with Sketch 67.2 or later.

General bug fixes.

V6.10.0 - July 13, 2020

This version is best used with Sketch 67.2 or later.

New

Smart Layout automatic resizing added to:

• Buttons
• Badges
• Tooltips

Flags

• Cambodia
• Malaysia
• Philippines
• Sri Lanka
• Vietnam

File Upload

• Drag and drop well component added to library and reference sheet

Icons

• Card Contactless
• Cards Contactless
• Card Insert
• Card Tap
• Pay Over Time
• Construction
• Dental
• Medical
• Spa

Graphics

• Added World Service Pattern in Deep Blue with a Deep Blue 90% background

Phone Number Input

• Created a basic phone number input field
• Created a single country phone number
• Created a multi-country phone number dropdown with flag

Updated

In addition to general bug fixes and various improvements:

Icons

• Card
• Cards
• Card Benefit
• Card Swipe
• Lock Card
• Tap to Pay

Badges

• Simplified symbols by removing multiple color overrides

Buttons

• Minimum sizes have been added to match code
• Simplified the state overrides
• Menu structure has been simplified

Tooltips

• Simplified color and style overrides

Deprecated

Phone Number Input

• Phone number input / default

Coming Soon

Smart Layout automatic resizing coming to Cards.

V6.9.0 - June 22, 2020

This version is best used with Sketch 66.1 or later.

New

Flags (Renamed from Country Flags)

• Bangladesh
• Brazil
• European Union
• Luxembourg
• South Africa
• South Korea

Icons

• Attach
• Grid
• Wifi Off

Updated

In addition to general bug fixes and various improvements:

Icons

• Warning redrawn to better visually match Success
• Archive and Wifi moved to the Actions group

Badges

• Circular Badges have been renamed to Outline Badges

Inputs

• Added example of an input with a success message to the Reference Sheet

Multi-Step Tracker

• Added example of complex tracker with sub-steps to the Reference Sheet

Deprecated

• Removed the Amex Social Network Icon
• Removed Toggle Buttons
• Moved the Design System symbols to the Reference Sheet

Coming Soon

Smart Layout automatic resizing coming to Buttons, Badges, and Tooltips.

V6.8.0 - January 14, 2020

This version is best used with Sketch 61.2 or later.

New

Styles

Graphics

Added brand assets:

• Tagline
  • Don’t live life without it
  • Don’t do business without it
• Ribbon
  • American Express
  • Member Since
• The Centurion
  • Linear
  • Solid
• World Service Globe
• 1850

Updated

Styles

Icons

• Desktop
• Laptop
• Mobile
• Tablet

Components

Checkboxes

• Updated error state

Dropdowns

• Updated error state
• Updated label type to label 3 resulting in an art board increase of 6px
• Update label color to gray 06

Inputs

• Updated error state
• Updated label type to label 3 resulting in an art board increase of 6px
• Update label color to gray 06

Multi-Step Tracker

• Updated component and text colors to higher contrast for better accessibility
• Aligned type style colors

Radio Buttons

• Updated error state

Social Network Icons

• Updated to refreshed branding

Reference Sheet

Layout Grids

The layouts for designers have been aligned with the max container sizes used by developers:

• X-Small has 12 columns
• Medium max container is 720px
• Large max container is 940px
• X-Large has 20 px gutters

Filters

• Added examples of various filter states

Deprecated

Removed unused left-aligned tracker text styles

V6.7.0 - December 11, 2019

New

Styles

Colors

• New Status colors Attention (Dark Yellow) and Moderate (Orange)

Icons

• Copy

Updated

Styles

Colors

• Updates to Color symbol names and layer styles to account for new status colors

Components

Data Tables

• Added example data tables to the Reference Sheet

V6.6.0 - November 25, 2019

This version is best used with Sketch 59.1 or later.

New

Styles

Icons

• No Fee
• Partnership
• Split

Components

Data Tables

• Cell styles added with Smart Layout support

Inputs

• Password component with Show / Hide input text
• Added a Basic Input component with no hint text layer

Updated

Styles

Icons

• Airplane
• Car
• Taxi
• Train
• Card (Filled)

Components

Tags

• Smart Layout support to automatically resize based on content

Toggles

• Smart Layout support

Page Level Notifications

• Smart Layout support

Links in Footer

• Fixed overlapped spacing

Text Styles

• Removed non DLS text styles

V6.5.0 - October 21, 2019

New

Styles

Graphics

• Added flag for Indonesia

Icons

• New icon for Credit Score
• New icon for Launch

Components

Overflow Menu

• New component symbol added to sketch kit

Updated

DLS Global Colors are available again in the color picker dropdown

V6.4.0 - September 25, 2019

New

Styles

Graphics

• Added YouTube to Social Network Icon set

Glyphs

• Double chevron left
• Double chevron right

Updated

Styles

Graphics

• Updated Social Network Icons to current styles for Facebook, Instagram, LinkedIn, Pinterest, and Twitter
• Updated App Badges to current styling for Apple Wallet, Apple App Store, Google Play, and Microsoft

Icons

• Show
• Hide

Components

Tooltips

• Fixed double border appearing on tooltip position below between arrow and message box

V6.3.0 - August 29, 2019

New

Styles

Graphics

• Added World Service Pattern
  • Bright Blue
  • Deep Blue
  • Gray
• Added Flourish Pattern

Icons & Glyphs

• Accessibility
• Flash Off
• Hearing Impaired
• Link
• Lock Card
• Menu
• Sort Up/Down Glyphs

Typography

• Added Guardian font styles to Sketch Library and Reference Sheet
  • Heading 7-G = Guardian Regular 48px/60px
  • Heading 6-G = Guardian Regular 38px/44px
  • Heading 5-G = Guardian Regular 30px/38px
  • Heading 4-G = Guardian Regular 20px/28px

Components

Navigation

• Secondary Vertical and Icon
  • New component to accommodate left spacing for primary nav with parent and icon components
  • Added Menu component without a section header
• Secondary Vertical
  • Added Menu components without a section header
• Global Nav & Footer
  • Added Small, Medium and wide versions of “Last Log In” component

Inputs

• Added new component “Date Input” to Inputs

Updated

Styles

Colors

• Changed the fill rule from Even-Odd to Non-Zero

Icons & Glyphs

• Calculator
• Camera
• Captions On
• Captions Off
• Cruise Ship
• Declined
• Filter
• Flash
• Freeze Card
• Infinity
• Sound On
• Sound Off
• QR Scan
• Watch

Country Flags

• Argentina
• Mexico
• Spain

Components

Global Elements - Nav & Footer

• Secondary Nav
  • Horizontal footer updates for updated secondary navigation - horizontal section
• Dropdown Navigation
  • Glyph size increased from 12x12px (small) to 16x16px (large)
• Footer
  • Small-Authenticated artboard height increased from 570px to 642px
  • Small-UnAuthenticated artboard height increased from 506px to 579px
  • Medium-Authenticated artboard height increased from 930px to 959px
  • Medium-UnAuthenticated artboard height increased from 866px to 896px
  • Wide-Authenticated artboard height increased from 575px to 602px
  • Wide-UnAuthenticated artboard height increased from 511px to 539px
• Navigation
  • Medium-UnAuthenticated-Expanded artboard height increased from 531px to 588px

Navigation

• Primary Vertical Nav
  • Artboard height increased from 45px to 52px
  • Updated left and right borders to match component height
• Primary Vertical Menu
  • Artboard height increased from 225px to 260px to match new primary vertical nav height
• Primary Vertical Nav with Parent + Icon
  • Icon size increased from 16x16px to 22x22px
• Secondary Vertical Nav
  • Artboard height increased from 36px to 42px
• Secondary Horizontal Menu
  • Artboard height increased from 180px to 210px to match new secondary vertical nav height
• Secondary Horizontal Menu and Section
  • Artboard height increased from 214px to 216px
• Secondary Vertical Menu and Section
  • Artboard height decreased from 228px to 206px

Progress Indicators

• Enhancements made to both Determinate and Indeterminate symbols

Deprecated

Icons

• Sort Up and Sort Down Icons have been moved to Glyphs

V6.2.0 - July 12, 2019

New

Colors

New Data Visualization Color Palette:

• Dark Yellow
• Gold
• Salmon
• Teal
• Bright Blue 20
• Bright Blue 40
• Bright Blue 60
• Deep Blue 20
• Deep Blue 40
• Deep Blue 60

Updated

Colors

• Updated Cobrand Color labeling Rosewood to Marriott Bonvoy
• Removed Gradient 2 and 3 from Layer Styles

V6.1.0 - June 11, 2019

New

Cards

• Updated drop shadow from (1,1,0,0) to (0,1,1,0)
• Standard Cards - Large/Med
  • Artboard decreased from 320x312px to 320x300px
• Standard Cards - Small/X-Small
  • Artboard decreased from 320x292 to 304x252px to match responsive mobile
• Special Cards
  • 1 CTA artboard increase from 300x381px to 300x394px, and 2 CTA artboard increase from 300x447px to 300x454px
  • Bottom borders are no longer a 1px gap between padding specs
• Showcase Cards
  • Artboard increase from 300x304px to 300x314px
• Rounded Cards
  • Artboard decrease from 300x238px to 300x218px
  • Updated Header text color from Gray 06 to Deep Blue
• Actionable Cards
  • Artboard decreased from 300x186px to 300x166px

Breadcrumbs

• Updated glyph icons to be center-aligned horizontally, and positioned to match 10px side padding spec

Checkboxes

• Updated font size from 15px (Body 1) to 16px (Body 3)

Dropdowns

• Updated Dropdown w/ Labels One Line artboard height from 64px to 60px
• Updated Dropdown w/ Labels Two Lines artboard height from 111px to 110px

Inputs

• Updated input fields artboard height from 96px to 100px
• Updated Smart Text Input Field artboard height from 82px to 87px

Notifications

• Page-Level Message
  • Artboard height increase from 58px to 62px
  • Updates to symbol icon layers pin to edge to center-align when component height increases
• Journey Completion Message
  • Artboard height increase, desktop from 487px to 520px; mobile from 620px to 674px
  • Updates to desktop and mobile symbol layer spacing to match padding specs

Radio Buttons

• Updated font size from 15px (Body 1) to 16px (Body 3)

Steppers

• Updated symbol layers to maintain input field border when one stepper button becomes disabled

Search

• Updated search symbol layers to match specs padding:
• Centered text layer, and sized to be 10px padding from icon
• Icon moved to match 10px padding to search container

Toggle Switch

• Toggle Switch with label
• Artboard height increase from 44px to 50px

V6.0.0 - April 11, 2019

New

Accordion: Created a version without icons

Cards: Added cards to sketch kit

Checkboxes: Created indeterminate checkbox

Dropdown: Created dropdown without label

Modals: Added modals to sketch kit

Tabs: Created tabs with icons

Tags: Created in-line tags

General Icons:

Chip

Action Icons:

Video Controls: Closed Caption Off

Video Controls: Closed Caption On

Video Controls: Pause Circle

Video Controls: Pause

Video Controls: Play Circle

Video Controls: Play

Video Controls: Sound Off

Video Controls: Sound On

Camera

Flash

QR Scan

Membership Icons:

Infinity

Cart

Medal

Freeze-Card

Cruise Ship

Airplane

Communication Icons:

FaceID

Watch

Social

Updated

Accordion: Updated height from 54px to 52px based on our padding structure. Added additional padding between icon and chevron

Date Picker: Updated styling

Dropdown: Updated symbol with proper padding, changing the height from 96px to 90px

Tags: Updated the visual to be more consistent with our styling

Text Links: Increased padding between text links making the component taller

Trackers: Combined the features of the previous trackers to simplify their usage and updated visual styling to be more in line with the DLS

Tooltips: Updated padding, changed background of tooltip light from Gray 02 to Gray 01 to pass AA accessibility for text links. Updated tooltip info font from Gray 06 to Gray 05 to keep styling same across light tooltips

Coming Soon

Remove text styles from Sketch Kit that don’t match font styles defined in the DLS