Color Palettes
The palettes are selections of colors that helps us to create consistency in products while ensuring accessibility.
Brand - Main colors
Primary
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorBrandPrimary10 | 10 | #000E33 | Color palettes / Brand / Primary / 10 | |
| CdsColorBrandPrimary20 | 20 | #001C66 | Color palettes / Brand / Primary / 20 | |
| CdsColorBrandPrimary30 | 30 | #002EAA | Color palettes / Brand / Primary / 30 | |
| CdsColorBrandPrimary40 | 40 | #0038CC | Color palettes / Brand / Primary / 40 | |
| CdsColorBrandPrimary50 | 50 | #0046FE | Color palettes / Brand / Primary / 50 | |
| CdsColorBrandPrimary60 | 60 | #336BFF | Color palettes / Brand / Primary / 60 | |
| CdsColorBrandPrimary70 | 70 | #6690FF | Color palettes / Brand / Primary / 70 | |
| CdsColorBrandPrimary80 | 80 | #99B5FF | Color palettes / Brand / Primary / 80 | |
| CdsColorBrandPrimary90 | 90 | #CCDAFF | Color palettes / Brand / Primary / 90 | |
| CdsColorBrandPrimary95 | 95 | #E5EDFF | Color palettes / Brand / Primary / 95 | |
| CdsColorBrandPrimary99 | 99 | #F7F9FE | Color palettes / Brand / Primary / 99 |
Secondary
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorBrandSecondary10 | 10 | #88301C | Color palettes / Brand / Secondary / 10 | |
| CdsColorBrandSecondary20 | 20 | #B13F24 | Color palettes / Brand / Secondary / 20 | |
| CdsColorBrandSecondary30 | 30 | #CC492A | Color palettes / Brand / Secondary / 30 | |
| CdsColorBrandSecondary40 | 40 | #E6502C | Color palettes / Brand / Secondary / 40 | |
| CdsColorBrandSecondary50 | 50 | #FF5C35 | Color palettes / Brand / Secondary / 50 | |
| CdsColorBrandSecondary60 | 60 | #FF8466 | Color palettes / Brand / Secondary / 60 | |
| CdsColorBrandSecondary70 | 70 | #FEAE99 | Color palettes / Brand / Secondary / 70 | |
| CdsColorBrandSecondary80 | 80 | #FED6CC | Color palettes / Brand / Secondary / 80 | |
| CdsColorBrandSecondary90 | 90 | #FEEAE5 | Color palettes / Brand / Secondary / 90 | |
| CdsColorBrandSecondary95 | 95 | #FBF2F0 | Color palettes / Brand / Secondary / 95 | |
| CdsColorBrandSecondary99 | 99 | #FCF7F6 | Color palettes / Brand / Secondary / 99 |
Neutral
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorBrandNeutral10 | 10 | #001D36 | Color palettes / Brand / Neutral / 10 | |
| CdsColorBrandNeutral20 | 20 | #002C52 | Color palettes / Brand / Neutral / 20 | |
| CdsColorBrandNeutral30 | 30 | #1A4163 | Color palettes / Brand / Neutral / 30 | |
| CdsColorBrandNeutral40 | 40 | #335674 | Color palettes / Brand / Neutral / 40 | |
| CdsColorBrandNeutral50 | 50 | #4D6B86 | Color palettes / Brand / Neutral / 50 | |
| CdsColorBrandNeutral60 | 60 | #668097 | Color palettes / Brand / Neutral / 60 | |
| CdsColorBrandNeutral70 | 70 | #8095A8 | Color palettes / Brand / Neutral / 70 | |
| CdsColorBrandNeutral80 | 80 | #B3C0CB | Color palettes / Brand / Neutral / 80 | |
| CdsColorBrandNeutral90 | 90 | #CCD4DC | Color palettes / Brand / Neutral / 90 | |
| CdsColorBrandNeutral95 | 95 | #E6EAEE | Color palettes / Brand / Neutral / 95 | |
| CdsColorBrandNeutral99 | 99 | #F7F8F9 | Color palettes / Brand / Neutral / 99 |
Brand - Additional colors
Bananabread
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorBrandBananabread10 | 10 | #271900 | Color palettes / Brand / Bananabread / 10 | |
| CdsColorBrandBananabread20 | 20 | #422C00 | Color palettes / Brand / Bananabread / 20 | |
| CdsColorBrandBananabread30 | 30 | #5F4100 | Color palettes / Brand / Bananabread / 30 | |
| CdsColorBrandBananabread40 | 40 | #7D5800 | Color palettes / Brand / Bananabread / 40 | |
| CdsColorBrandBananabread50 | 50 | #9C6f02 | Color palettes / Brand / Bananabread / 50 | |
| CdsColorBrandBananabread60 | 60 | #B98823 | Color palettes / Brand / Bananabread / 60 | |
| CdsColorBrandBananabread70 | 70 | #D7A23D | Color palettes / Brand / Bananabread / 70 | |
| CdsColorBrandBananabread80 | 80 | #FEC55C | Color palettes / Brand / Bananabread / 80 | |
| CdsColorBrandBananabread90 | 90 | #FFDEA9 | Color palettes / Brand / Bananabread / 90 | |
| CdsColorBrandBananabread95 | 95 | #FFEED8 | Color palettes / Brand / Bananabread / 95 | |
| CdsColorBrandBananabread99 | 99 | #FFFBFF | Color palettes / Brand / Bananabread / 99 |
Blackberry
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorBrandBlackberry10 | 10 | #001C3A | Color palettes / Brand / Blackberry / 10 | |
| CdsColorBrandBlackberry20 | 20 | #00315F | Color palettes / Brand / Blackberry / 20 | |
| CdsColorBrandBlackberry30 | 30 | #004480 | Color palettes / Brand / Blackberry / 30 | |
| CdsColorBrandBlackberry40 | 40 | #2D5F9D | Color palettes / Brand / Blackberry / 40 | |
| CdsColorBrandBlackberry50 | 50 | #4979B8 | Color palettes / Brand / Blackberry / 50 | |
| CdsColorBrandBlackberry60 | 60 | #6492D3 | Color palettes / Brand / Blackberry / 60 | |
| CdsColorBrandBlackberry70 | 70 | #7FADF0 | Color palettes / Brand / Blackberry / 70 | |
| CdsColorBrandBlackberry80 | 80 | #A5C8FF | Color palettes / Brand / Blackberry / 80 | |
| CdsColorBrandBlackberry90 | 90 | #D4E3FF | Color palettes / Brand / Blackberry / 90 | |
| CdsColorBrandBlackberry95 | 95 | #EBF1FF | Color palettes / Brand / Blackberry / 95 | |
| CdsColorBrandBlackberry99 | 99 | #FDFCFF | Color palettes / Brand / Blackberry / 99 |
Blueberry
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorBrandBlueberry10 | 10 | #001B3D | Color palettes / Brand / Blueberry / 10 | |
| CdsColorBrandBlueberry20 | 20 | #003063 | Color palettes / Brand / Blueberry / 20 | |
| CdsColorBrandBlueberry30 | 30 | #00468C | Color palettes / Brand / Blueberry / 30 | |
| CdsColorBrandBlueberry40 | 40 | #005DB7 | Color palettes / Brand / Blueberry / 40 | |
| CdsColorBrandBlueberry50 | 50 | #0084FF | Color palettes / Brand / Blueberry / 50 | |
| CdsColorBrandBlueberry60 | 60 | #3C90FF | Color palettes / Brand / Blueberry / 60 | |
| CdsColorBrandBlueberry70 | 70 | #79ACFF | Color palettes / Brand / Blueberry / 70 | |
| CdsColorBrandBlueberry80 | 80 | #A9C7FF | Color palettes / Brand / Blueberry / 80 | |
| CdsColorBrandBlueberry90 | 90 | #D6E3FF | Color palettes / Brand / Blueberry / 90 | |
| CdsColorBrandBlueberry95 | 95 | #ECF0FF | Color palettes / Brand / Blueberry / 95 | |
| CdsColorBrandBlueberry99 | 99 | #FDFBFF | Color palettes / Brand / Blueberry / 99 |
Gingerbread
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorBrandGingerbread10 | 10 | #331200 | Color palettes / Brand / Gingerbread / 10 | |
| CdsColorBrandGingerbread20 | 20 | #542200 | Color palettes / Brand / Gingerbread / 20 | |
| CdsColorBrandGingerbread30 | 30 | #773300 | Color palettes / Brand / Gingerbread / 30 | |
| CdsColorBrandGingerbread40 | 40 | #9C4500 | Color palettes / Brand / Gingerbread / 40 | |
| CdsColorBrandGingerbread50 | 50 | #BD5C19 | Color palettes / Brand / Gingerbread / 50 | |
| CdsColorBrandGingerbread60 | 60 | #E67B38 | Color palettes / Brand / Gingerbread / 60 | |
| CdsColorBrandGingerbread70 | 70 | #FE8E49 | Color palettes / Brand / Gingerbread / 70 | |
| CdsColorBrandGingerbread80 | 80 | #FFB68E | Color palettes / Brand / Gingerbread / 80 | |
| CdsColorBrandGingerbread90 | 90 | #FFDBCA | Color palettes / Brand / Gingerbread / 90 | |
| CdsColorBrandGingerbread95 | 95 | #FFEDE5 | Color palettes / Brand / Gingerbread / 95 | |
| CdsColorBrandGingerbread99 | 99 | #FFFBFF | Color palettes / Brand / Gingerbread / 99 |
Lychee
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorBrandLychee10 | 10 | #2B1611 | Color palettes / Brand / Lychee / 10 | |
| CdsColorBrandLychee20 | 20 | #432A25 | Color palettes / Brand / Lychee / 20 | |
| CdsColorBrandLychee30 | 30 | #5B403A | Color palettes / Brand / Lychee / 30 | |
| CdsColorBrandLychee40 | 40 | #755751 | Color palettes / Brand / Lychee / 40 | |
| CdsColorBrandLychee50 | 50 | #907069 | Color palettes / Brand / Lychee / 50 | |
| CdsColorBrandLychee60 | 60 | #AB8982 | Color palettes / Brand / Lychee / 60 | |
| CdsColorBrandLychee70 | 70 | #C7A39B | Color palettes / Brand / Lychee / 70 | |
| CdsColorBrandLychee80 | 80 | #EDC6BE | Color palettes / Brand / Lychee / 80 | |
| CdsColorBrandLychee90 | 90 | #FFDAD3 | Color palettes / Brand / Lychee / 90 | |
| CdsColorBrandLychee95 | 95 | #FFEDE9 | Color palettes / Brand / Lychee / 95 | |
| CdsColorBrandLychee99 | 99 | #FFFBFF | Color palettes / Brand / Lychee / 99 |
Plum
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorBrandPlum10 | 10 | #001946 | Color palettes / Brand / Plum / 10 | |
| CdsColorBrandPlum20 | 20 | #152E61 | Color palettes / Brand / Plum / 20 | |
| CdsColorBrandPlum30 | 30 | #2E4579 | Color palettes / Brand / Plum / 30 | |
| CdsColorBrandPlum40 | 40 | #475D93 | Color palettes / Brand / Plum / 40 | |
| CdsColorBrandPlum50 | 50 | #6076AD | Color palettes / Brand / Plum / 50 | |
| CdsColorBrandPlum60 | 60 | #7A90C9 | Color palettes / Brand / Plum / 60 | |
| CdsColorBrandPlum70 | 70 | #95ABE6 | Color palettes / Brand / Plum / 70 | |
| CdsColorBrandPlum80 | 80 | #B1C5FF | Color palettes / Brand / Plum / 80 | |
| CdsColorBrandPlum90 | 90 | #DAE2FF | Color palettes / Brand / Plum / 90 | |
| CdsColorBrandPlum95 | 95 | #EEF0FF | Color palettes / Brand / Plum / 95 | |
| CdsColorBrandPlum99 | 99 | #FEFBFF | Color palettes / Brand / Plum / 99 |
Tomato
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorBrandTomato10 | 10 | #3D0700 | Color palettes / Brand / Tomato / 10 | |
| CdsColorBrandTomato20 | 20 | #621100 | Color palettes / Brand / Tomato / 20 | |
| CdsColorBrandTomato30 | 30 | #8A1C00 | Color palettes / Brand / Tomato / 30 | |
| CdsColorBrandTomato40 | 40 | #B52701 | Color palettes / Brand / Tomato / 40 | |
| CdsColorBrandTomato50 | 50 | #D8411C | Color palettes / Brand / Tomato / 50 | |
| CdsColorBrandTomato60 | 60 | #FF5C35 | Color palettes / Brand / Tomato / 60 | |
| CdsColorBrandTomato70 | 70 | #FF8B6E | Color palettes / Brand / Tomato / 70 | |
| CdsColorBrandTomato80 | 80 | #FFB4A3 | Color palettes / Brand / Tomato / 80 | |
| CdsColorBrandTomato90 | 90 | #FFDAD2 | Color palettes / Brand / Tomato / 90 | |
| CdsColorBrandTomato95 | 95 | #FFEDE9 | Color palettes / Brand / Tomato / 95 | |
| CdsColorBrandTomato99 | 99 | #FFFBFF | Color palettes / Brand / Tomato / 99 |
Extended - Semantic colors
Blue (Information)
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorExtendedBlue10 | 10 | #001944 | Color palettes / Extended / Blue / 10 | |
| CdsColorExtendedBlue20 | 20 | #002D6D | Color palettes / Extended / Blue / 20 | |
| CdsColorExtendedBlue30 | 30 | #004299 | Color palettes / Extended / Blue / 30 | |
| CdsColorExtendedBlue40 | 40 | #155AC1 | Color palettes / Extended / Blue / 40 | |
| CdsColorExtendedBlue50 | 50 | #3B73DC | Color palettes / Extended / Blue / 50 | |
| CdsColorExtendedBlue60 | 60 | #598EF8 | Color palettes / Extended / Blue / 60 | |
| CdsColorExtendedBlue70 | 70 | #84AAFF | Color palettes / Extended / Blue / 70 | |
| CdsColorExtendedBlue80 | 80 | #AFC6FF | Color palettes / Extended / Blue / 80 | |
| CdsColorExtendedBlue90 | 90 | #D9E2FF | Color palettes / Extended / Blue / 90 | |
| CdsColorExtendedBlue95 | 95 | #EDF0FF | Color palettes / Extended / Blue / 95 | |
| CdsColorExtendedBlue99 | 99 | #FEFBFF | Color palettes / Extended / Blue / 99 |
Strawberry (Critical)
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorExtendedStrawberry10 | 10 | #410008 | Color palettes / Extended / Strawberry / 10 | |
| CdsColorExtendedStrawberry20 | 20 | #680013 | Color palettes / Extended / Strawberry / 20 | |
| CdsColorExtendedStrawberry30 | 30 | #92001F | Color palettes / Extended / Strawberry / 30 | |
| CdsColorExtendedStrawberry40 | 40 | #BC0E2E | Color palettes / Extended / Strawberry / 40 | |
| CdsColorExtendedStrawberry50 | 50 | #E03043 | Color palettes / Extended / Strawberry / 50 | |
| CdsColorExtendedStrawberry60 | 60 | #FF525D | Color palettes / Extended / Strawberry / 60 | |
| CdsColorExtendedStrawberry70 | 70 | #FF8889 | Color palettes / Extended / Strawberry / 70 | |
| CdsColorExtendedStrawberry80 | 80 | #FFB3B2 | Color palettes / Extended / Strawberry / 80 | |
| CdsColorExtendedStrawberry90 | 90 | #FFDAD9 | Color palettes / Extended / Strawberry / 90 | |
| CdsColorExtendedStrawberry95 | 95 | #FFEDEC | Color palettes / Extended / Strawberry / 95 | |
| CdsColorExtendedStrawberry99 | 99 | #FFFBFF | Color palettes / Extended / Strawberry / 99 |
Orange (Warning)
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorExtendedOrange10 | 10 | #2C1600 | Color palettes / Extended / Orange / 10 | |
| CdsColorExtendedOrange20 | 20 | #4A2800 | Color palettes / Extended / Orange / 20 | |
| CdsColorExtendedOrange30 | 30 | #693C00 | Color palettes / Extended / Orange / 30 | |
| CdsColorExtendedOrange40 | 40 | #8B5000 | Color palettes / Extended / Orange / 40 | |
| CdsColorExtendedOrange50 | 50 | #AE6600 | Color palettes / Extended / Orange / 50 | |
| CdsColorExtendedOrange60 | 60 | #D27C00 | Color palettes / Extended / Orange / 60 | |
| CdsColorExtendedOrange70 | 70 | #F79300 | Color palettes / Extended / Orange / 70 | |
| CdsColorExtendedOrange80 | 80 | #FFB870 | Color palettes / Extended / Orange / 80 | |
| CdsColorExtendedOrange90 | 90 | #FFDCBE | Color palettes / Extended / Orange / 90 | |
| CdsColorExtendedOrange95 | 95 | #FFEEE1 | Color palettes / Extended / Orange / 95 | |
| CdsColorExtendedOrange99 | 99 | #FFFBFF | Color palettes / Extended / Orange / 99 |
Green (Success)
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorExtendedGreen10 | 10 | #072100 | Color palettes / Extended / Green / 10 | |
| CdsColorExtendedGreen20 | 20 | #103900 | Color palettes / Extended / Green / 20 | |
| CdsColorExtendedGreen30 | 30 | #1F5106 | Color palettes / Extended / Green / 30 | |
| CdsColorExtendedGreen40 | 40 | #376A1F | Color palettes / Extended / Green / 40 | |
| CdsColorExtendedGreen50 | 50 | #4F8436 | Color palettes / Extended / Green / 50 | |
| CdsColorExtendedGreen60 | 60 | #689F4D | Color palettes / Extended / Green / 60 | |
| CdsColorExtendedGreen70 | 70 | #81BA64 | Color palettes / Extended / Green / 70 | |
| CdsColorExtendedGreen80 | 80 | #9CD67D | Color palettes / Extended / Green / 80 | |
| CdsColorExtendedGreen90 | 90 | #B7F396 | Color palettes / Extended / Green / 90 | |
| CdsColorExtendedGreen95 | 95 | #CDFFB0 | Color palettes / Extended / Green / 95 | |
| CdsColorExtendedGreen99 | 99 | #F7FFEC | Color palettes / Extended / Green / 99 |
Extended - Additional colors
Blue Grey
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorExtendedBlueGrey10 | 10 | #001F2A | Color palettes / Extended / Blue Grey / 10 | |
| CdsColorExtendedBlueGrey20 | 20 | #163440 | Color palettes / Extended / Blue Grey / 20 | |
| CdsColorExtendedBlueGrey30 | 30 | #2E4B57 | Color palettes / Extended / Blue Grey / 30 | |
| CdsColorExtendedBlueGrey40 | 40 | #466270 | Color palettes / Extended / Blue Grey / 40 | |
| CdsColorExtendedBlueGrey50 | 50 | #5E7B89 | Color palettes / Extended / Blue Grey / 50 | |
| CdsColorExtendedBlueGrey60 | 60 | #7895A4 | Color palettes / Extended / Blue Grey / 60 | |
| CdsColorExtendedBlueGrey70 | 70 | #92B0BF | Color palettes / Extended / Blue Grey / 70 | |
| CdsColorExtendedBlueGrey80 | 80 | #ADCBDB | Color palettes / Extended / Blue Grey / 80 | |
| CdsColorExtendedBlueGrey90 | 90 | #C9E7F7 | Color palettes / Extended / Blue Grey / 90 | |
| CdsColorExtendedBlueGrey95 | 95 | #E0F4FF | Color palettes / Extended / Blue Grey / 95 | |
| CdsColorExtendedBlueGrey99 | 99 | #FAFCFF | Color palettes / Extended / Blue Grey / 99 |
Brown
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorExtendedBrown10 | 10 | #2E150B | Color palettes / Extended / Brown / 10 | |
| CdsColorExtendedBrown20 | 20 | #46291E | Color palettes / Extended / Brown / 20 | |
| CdsColorExtendedBrown30 | 30 | #603F33 | Color palettes / Extended / Brown / 30 | |
| CdsColorExtendedBrown40 | 40 | #7A5649 | Color palettes / Extended / Brown / 40 | |
| CdsColorExtendedBrown50 | 50 | #956E60 | Color palettes / Extended / Brown / 50 | |
| CdsColorExtendedBrown60 | 60 | #B18779 | Color palettes / Extended / Brown / 60 | |
| CdsColorExtendedBrown70 | 70 | #CEA192 | Color palettes / Extended / Brown / 70 | |
| CdsColorExtendedBrown80 | 80 | #EBBCAC | Color palettes / Extended / Brown / 80 | |
| CdsColorExtendedBrown90 | 90 | #FFDBCF | Color palettes / Extended / Brown / 90 | |
| CdsColorExtendedBrown95 | 95 | #FFEDE7 | Color palettes / Extended / Brown / 95 | |
| CdsColorExtendedBrown99 | 99 | #FFFBFF | Color palettes / Extended / Brown / 99 |
Cyan
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorExtendedCyan10 | 10 | #001F25 | Color palettes / Extended / Cyan / 10 | |
| CdsColorExtendedCyan20 | 20 | #00363E | Color palettes / Extended / Cyan / 20 | |
| CdsColorExtendedCyan30 | 30 | #004E59 | Color palettes / Extended / Cyan / 30 | |
| CdsColorExtendedCyan40 | 40 | #006876 | Color palettes / Extended / Cyan / 40 | |
| CdsColorExtendedCyan50 | 50 | #008394 | Color palettes / Extended / Cyan / 50 | |
| CdsColorExtendedCyan60 | 60 | #009FB4 | Color palettes / Extended / Cyan / 60 | |
| CdsColorExtendedCyan70 | 70 | #00BCD4 | Color palettes / Extended / Cyan / 70 | |
| CdsColorExtendedCyan80 | 80 | #44D8F1 | Color palettes / Extended / Cyan / 80 | |
| CdsColorExtendedCyan90 | 90 | #A1EFFF | Color palettes / Extended / Cyan / 90 | |
| CdsColorExtendedCyan95 | 95 | #D4F7FF | Color palettes / Extended / Cyan / 95 | |
| CdsColorExtendedCyan99 | 99 | #F7FDFF | Color palettes / Extended / Cyan / 99 |
Deep Orange
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorExtendedDeepOrange10 | 10 | #3B0900 | Color palettes / Extended / Deep Orange / 10 | |
| CdsColorExtendedDeepOrange20 | 20 | #5F1500 | Color palettes / Extended / Deep Orange / 20 | |
| CdsColorExtendedDeepOrange30 | 30 | #862200 | Color palettes / Extended / Deep Orange / 30 | |
| CdsColorExtendedDeepOrange40 | 40 | #B02F00 | Color palettes / Extended / Deep Orange / 40 | |
| CdsColorExtendedDeepOrange50 | 50 | #DB3E03 | Color palettes / Extended / Deep Orange / 50 | |
| CdsColorExtendedDeepOrange60 | 60 | #FF5722 | Color palettes / Extended / Deep Orange / 60 | |
| CdsColorExtendedDeepOrange70 | 70 | #FF8B69 | Color palettes / Extended / Deep Orange / 70 | |
| CdsColorExtendedDeepOrange80 | 80 | #FFB5A0 | Color palettes / Extended / Deep Orange / 80 | |
| CdsColorExtendedDeepOrange90 | 90 | #FFDBD1 | Color palettes / Extended / Deep Orange / 90 | |
| CdsColorExtendedDeepOrange95 | 95 | #FFEDE8 | Color palettes / Extended / Deep Orange / 95 | |
| CdsColorExtendedDeepOrange99 | 99 | #FFFBFF | Color palettes / Extended / Deep Orange / 99 |
Deep Purple
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorExtendedDeepPurple10 | 10 | #250059 | Color palettes / Extended / Deep Purple / 10 | |
| CdsColorExtendedDeepPurple20 | 20 | #3F008D | Color palettes / Extended / Deep Purple / 20 | |
| CdsColorExtendedDeepPurple30 | 30 | #5727A7 | Color palettes / Extended / Deep Purple / 30 | |
| CdsColorExtendedDeepPurple40 | 40 | #6F43C0 | Color palettes / Extended / Deep Purple / 40 | |
| CdsColorExtendedDeepPurple50 | 50 | #895EDB | Color palettes / Extended / Deep Purple / 50 | |
| CdsColorExtendedDeepPurple60 | 60 | #A378F8 | Color palettes / Extended / Deep Purple / 60 | |
| CdsColorExtendedDeepPurple70 | 70 | #BB99FF | Color palettes / Extended / Deep Purple / 70 | |
| CdsColorExtendedDeepPurple80 | 80 | #D3BBFF | Color palettes / Extended / Deep Purple / 80 | |
| CdsColorExtendedDeepPurple90 | 90 | #EBDDFF | Color palettes / Extended / Deep Purple / 90 | |
| CdsColorExtendedDeepPurple95 | 95 | #F7EDFF | Color palettes / Extended / Deep Purple / 95 | |
| CdsColorExtendedDeepPurple99 | 99 | #FFFBFF | Color palettes / Extended / Deep Purple / 99 |
Grey
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorExtendedGrey0 | 0 | #000000 | Color palettes / Extended / Grey / 0 (black) | |
| CdsColorExtendedGrey10 | 10 | #1B1B1B | Color palettes / Extended / Grey / 10 | |
| CdsColorExtendedGrey20 | 20 | #303030 | Color palettes / Extended / Grey / 20 | |
| CdsColorExtendedGrey30 | 30 | #474747 | Color palettes / Extended / Grey / 30 | |
| CdsColorExtendedGrey40 | 40 | #5E5E5E | Color palettes / Extended / Grey / 40 | |
| CdsColorExtendedGrey50 | 50 | #777777 | Color palettes / Extended / Grey / 50 | |
| CdsColorExtendedGrey60 | 60 | #919191 | Color palettes / Extended / Grey / 60 | |
| CdsColorExtendedGrey70 | 70 | #ABABAB | Color palettes / Extended / Grey / 70 | |
| CdsColorExtendedGrey80 | 80 | #C6C6C6 | Color palettes / Extended / Grey / 80 | |
| CdsColorExtendedGrey90 | 90 | #E2E2E2 | Color palettes / Extended / Grey / 90 | |
| CdsColorExtendedGrey95 | 95 | #F1F1F1 | Color palettes / Extended / Grey / 95 | |
| CdsColorExtendedGrey99 | 99 | #FCFCFC | Color palettes / Extended / Grey / 99 | |
| CdsColorExtendedGrey100 | 100 | #FFFFFF | Color palettes / Extended / Grey / 100 (white) |
Pink
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorExtendedPink10 | 10 | #400014 | Color palettes / Extended / Pink / 10 | |
| CdsColorExtendedPink20 | 20 | #660025 | Color palettes / Extended / Pink / 20 | |
| CdsColorExtendedPink30 | 30 | #900038 | Color palettes / Extended / Pink / 30 | |
| CdsColorExtendedPink40 | 40 | #BC004B | Color palettes / Extended / Pink / 40 | |
| CdsColorExtendedPink50 | 50 | #E61A61 | Color palettes / Extended / Pink / 50 | |
| CdsColorExtendedPink60 | 60 | #FF4E7C | Color palettes / Extended / Pink / 60 | |
| CdsColorExtendedPink70 | 70 | #FF869D | Color palettes / Extended / Pink / 70 | |
| CdsColorExtendedPink80 | 80 | #FFB2BE | Color palettes / Extended / Pink / 80 | |
| CdsColorExtendedPink90 | 90 | #FFD9DE | Color palettes / Extended / Pink / 90 | |
| CdsColorExtendedPink95 | 95 | #FFECEE | Color palettes / Extended / Pink / 95 | |
| CdsColorExtendedPink99 | 99 | #FFFBFF | Color palettes / Extended / Pink / 99 |
Yellow
| Token name | Tone | Hex value | Figma style | |
|---|---|---|---|---|
| CdsColorExtendedYellow10 | 10 | #231B00 | Color palettes / Extended / Yellow / 10 | |
| CdsColorExtendedYellow20 | 20 | #3C2F00 | Color palettes / Extended / Yellow / 20 | |
| CdsColorExtendedYellow30 | 30 | #564500 | Color palettes / Extended / Yellow / 30 | |
| CdsColorExtendedYellow40 | 40 | #725C03 | Color palettes / Extended / Yellow / 40 | |
| CdsColorExtendedYellow50 | 50 | #8D7520 | Color palettes / Extended / Yellow / 50 | |
| CdsColorExtendedYellow60 | 60 | #A88E38 | Color palettes / Extended / Yellow / 60 | |
| CdsColorExtendedYellow70 | 70 | #C5A94F | Color palettes / Extended / Yellow / 70 | |
| CdsColorExtendedYellow80 | 80 | #E2C468 | Color palettes / Extended / Yellow / 80 | |
| CdsColorExtendedYellow90 | 90 | #FFE081 | Color palettes / Extended / Yellow / 90 | |
| CdsColorExtendedYellow95 | 95 | #FFF0C9 | Color palettes / Extended / Yellow / 95 | |
| CdsColorExtendedYellow99 | 99 | #FFFBFF | Color palettes / Extended / Yellow / 99 |