Sapphire
Scaling a unified and consistent design system at Danske Bank
Danish Kroner
DKK
Swedish Kroner
SEK
Norwegian Kroner
NOK
Euro
EUR
British Pound
GBP
Sapphire 900
HSL 212, 97, 14
RGB 1, 34, 71
HEX #012247
Sapphire 700
HSL 207, 93, 27
RGB 5, 77, 134
HEX #054D86
Sapphire 500
HSL 207, 93, 42
RGB 7, 118, 206
HEX #0776CE
Sapphire 300
HSL 207, 85, 68
RGB 104, 180, 243
HEX #68B4F3
File received
Message sent
Payment is now processed
Log into Netbank
Role
Company
Platform
Overview
In 2023, I became part of the Channels Development Foundation squad at Danske Bank, leading the maintenance and growth what is now the bank’s design system: Sapphire.
At that time, many of the bank’s product teams were relying on their own local design systems, each of them tackling similar problems in different ways.
This resulted in an overall inconsistent user experience, slower releases, and challenges meeting legal accessibility requirements.
Principles
Sapphire was developed as a cohesive collection of building blocks to manage design at scale, and reflect Danske Bank's corporate visual identity and principles:
Simple and modern
to maintain relevance and functionality
Responsive and in motion
to engage users across all digital touchpoints
Human and warm
to anchor our brand in emotion
Governance
To make sure that Sapphire doesn’t end up as just another design system at the bank, I took the initiative to simplify its governance. This meant having a bottom-up approach that makes it easy for designers to contribute and ask questions directly from their design files, keeping them in the loop from the start.
Jakob
Anne-Louise
Mads
Erika
17 minutes ago
@SapphireTeam can list items support primary badges as well?
S
Reply
Accessibility
Sapphire is designed with accessibility at its core, featuring optimal contrast ratios, keyboard navigation, reduced motion support, and clear focus states, making it essential for Danske Bank’s product teams.
8.66:1
AAA
Neutral 100
7.46:1
AAA
Danger 100
7.56:1
AAA
Action 100
7.7:1
AAA
Warning 100
8.62:1
AAA
Positive 100
4.73:1
AA
Neutral 500
5:1
AA
Danger 500
4.67:1
AA
Action 500
5.34:1
AA
Warning 500
4.5:1
AA
Positive 500
11.99:1
AAA
Neutral 800
11.36:1
AAA
Danger 800
10.07:1
AAA
Action 800
9.03:1
AAA
Warning 800
10.82:1
AAA
Positive 800
Impact
To measure Sapphire's success, we developed a Metabase dashboard that aggregates data from places like Azure DevOps and Figma Analytics, and precisely tracks where and how much Sapphire is used across the bank.
72%
adoption rate
400+
projects count
20+
individual contributors
Other projects
Sapphire
Scaling a unified and consistent design system at Danske Bank
Log into Netbank
Sapphire 900
HSL 212, 97, 14
RGB 1, 34, 71
HEX #012247
Sapphire 700
HSL 207, 93, 27
RGB 5, 77, 134
HEX #054D86
Sapphire 500
HSL 207, 93, 42
RGB 7, 118, 206
HEX #0776CE
Sapphire 300
HSL 207, 85, 68
RGB 104, 180, 243
HEX #68B4F3
Role
Lead UX Designer
Company
Danske Bank
Platform
Web
Overview
In 2023, I became part of the Channels Development Foundation squad at Danske Bank, leading the maintenance and growth what is now the bank’s design system: Sapphire.
At that time, many of the bank’s product teams were relying on their own local design systems, each of them tackling similar problems in different ways.
This resulted in an overall inconsistent user experience, slower releases, and challenges meeting legal accessibility requirements.
Principles
Sapphire was developed as a cohesive collection of building blocks to manage design at scale, and reflect Danske Bank's corporate visual identity and principles:
Simple and modern
to maintain relevance and functionality
Responsive and in motion
to engage users across all digital touchpoints
Human and warm
to anchor our brand in emotion
Governance
To make sure that Sapphire doesn’t end up as just another design system at the bank, I took the initiative to simplify its governance. This meant having a bottom-up approach that makes it easy for designers to contribute and ask questions directly from their design files, keeping them in the loop from the start.
Jakob
Anne-Louise
Mads
Erika
17 minutes ago
@SapphireTeam can list items support primary badges as well?
S
Reply
Accessibility
Sapphire is designed with accessibility at its core, featuring optimal contrast ratios, keyboard navigation, reduced motion support, and clear focus states, making it essential for Danske Bank’s product teams.
8.66:1
AAA
Neutral 100
7.56:1
AAA
Action 100
8.62:1
AAA
Positive 100
4.73:1
AA
Neutral 500
4.76:1
AA
Action 500
4.5:1
AA
Positive 500
11.99:1
AAA
Neutral 800
10.07:1
AAA
Action 800
10.82:1
AAA
Positive 800
Impact
To measure Sapphire's success, the squad built a metabase dashboard aggregating data from places like Azure DevOps and Figma Analytics, and precisely tracks where and how much Sapphire is used across the bank.
72%
adoption rate
400+
projects count
20+
individual contributors
Other projects
Sapphire
Scaling a unified and consistent design system at Danske Bank
Sapphire 900
HSL 212, 97, 14
RGB 1, 34, 71
HEX #012247
Sapphire 700
HSL 207, 93, 27
RGB 5, 77, 134
HEX #054D86
Sapphire 500
HSL 207, 93, 42
RGB 7, 118, 206
HEX #0776CE
Sapphire 300
HSL 207, 85, 68
RGB 104, 180, 243
HEX #68B4F3
File received
Message sent
Payment is now processed
Role
Company
Platform
Overview
In 2023, I became part of the Channels Development Foundation squad at Danske Bank, leading the maintenance and growth what is now the bank’s design system: Sapphire.
At that time, many of the bank’s product teams were relying on their own local design systems, each of them tackling similar problems in different ways.
This resulted in an overall inconsistent user experience, slower releases, and challenges meeting legal accessibility requirements.
Principles
Sapphire was developed as a cohesive collection of building blocks to manage design at scale, and reflect Danske Bank's corporate visual identity and principles:
Simple and modern
to maintain relevance and functionality
Responsive and in motion
to engage users across all digital touchpoints
Human and warm
to anchor our brand in emotion
Governance
To make sure that Sapphire doesn’t end up as just another design system at the bank, I took the initiative to simplify its governance. This meant having a bottom-up approach that makes it easy for designers to contribute and ask questions directly from their design files, keeping them in the loop from the start.
Jakob
Anne-Louise
Mads
Erika
17 minutes ago
@SapphireTeam can list items support primary badges as well?
S
Reply
Accessibility
Sapphire is designed with accessibility at its core, featuring optimal contrast ratios, keyboard navigation, reduced motion support, and clear focus states, making it essential for Danske Bank’s product teams.
8.66:1
AAA
Neutral 100
7.56:1
AAA
Action 100
8.62:1
AAA
Positive 100
4.73:1
AA
Neutral 500
4.76:1
AA
Action 500
4.5:1
AA
Positive 500
11.99:1
AAA
Neutral 800
10.07:1
AAA
Action 800
10.82:1
AAA
Positive 800
Impact
To measure Sapphire's success, we developed a Metabase dashboard that aggregates data from places like Azure DevOps and Figma Analytics, and precisely tracks where and how much Sapphire is used across the bank.
72%
adoption rate
400+
projects count
20+
contributors