feat(colors): update brand colors (#10)

BREAKING CHANGE: SumUp's primary blue color has been updated as part of the brand refresh. It meets stricter color contrast guidelines (WCAG AA).
sumup-oss · Oct 10, 2020 · 4ccc939 · 4ccc939
1 parent 8431f70
commit 4ccc939
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 48 deletions.
diff --git a/src/__snapshots__/index.spec.ts.snap b/src/__snapshots__/index.spec.ts.snap
@@ -26,60 +26,60 @@ Object {
     "untilMega": "(max-width: 767px)",
   },
   "colors": Object {
-    "b100": "#EDF4FC",
+    "b100": "#F0F6FF",
     "b200": "#DAEAFF",
     "b300": "#AFD0FE",
     "b400": "#7FB5FF",
-    "b500": "#3388FF",
-    "b700": "#1760CE",
-    "b900": "#003C8B",
-    "black": "#0F131A",
-    "bodyBg": "#FAFBFC",
-    "bodyColor": "#0F131A",
-    "danger": "#DB4D4D",
+    "b500": "#3063E9",
+    "b700": "#234BC3",
+    "b900": "#1A368E",
+    "black": "#000",
+    "bodyBg": "#F5F5F5",
+    "bodyColor": "#000",
+    "danger": "#D23F47",
     "g100": "#E4EABB",
     "g200": "#D4DB8F",
     "g300": "#BED630",
     "g500": "#8CC13F",
     "g700": "#47995A",
     "g900": "#356560",
-    "n100": "#FAFBFC",
-    "n200": "#EEF0F2",
-    "n300": "#D8DDE1",
-    "n500": "#9DA7B1",
-    "n700": "#5C656F",
-    "n800": "#323E49",
-    "n900": "#212933",
+    "n100": "#F5F5F5",
+    "n200": "#E6E6E6",
+    "n300": "#CCC",
+    "n500": "#999",
+    "n700": "#666",
+    "n800": "#333",
+    "n900": "#1A1A1A",
     "o100": "#EFD0BB",
     "o200": "#F7B97C",
-    "o300": "#F7941D",
+    "o300": "#ED7000",
     "o500": "#CE6C0B",
     "o700": "#8E4503",
     "o900": "#66391B",
     "overlay": "rgba(12, 15, 20, 0.21)",
-    "p100": "#EDF4FC",
+    "p100": "#F0F6FF",
     "p200": "#DAEAFF",
     "p300": "#AFD0FE",
     "p400": "#7FB5FF",
-    "p500": "#3388FF",
-    "p700": "#1760CE",
-    "p900": "#003C8B",
+    "p500": "#3063E9",
+    "p700": "#234BC3",
+    "p900": "#1A368E",
     "r100": "#F4CBCB",
     "r200": "#EDA2A2",
     "r300": "#EA7A7A",
-    "r500": "#DB4D4D",
-    "r700": "#B22828",
-    "r900": "#7F1818",
+    "r500": "#D23F47",
+    "r700": "#B22426",
+    "r900": "#941618",
     "shadow": "rgba(12, 15, 20, 0.07)",
-    "success": "#47995A",
+    "success": "#138849",
     "v100": "#E9CFF2",
     "v200": "#D7A9DC",
     "v300": "#C781C9",
-    "v500": "#B54DB3",
+    "v500": "#CA58FF",
     "v700": "#8928A2",
     "v900": "#5F1D6B",
-    "warning": "#D8A413",
-    "white": "#FFFFFF",
+    "warning": "#F5C625",
+    "white": "#FFF",
     "y100": "#F2E9C7",
     "y200": "#EDDD8E",
     "y300": "#F6CC1B",

diff --git a/src/themes/light.ts b/src/themes/light.ts
@@ -17,29 +17,29 @@ import { Colors } from '../types';
 
 export const type = 'light';
 
-const white = '#FFFFFF';
-const black = '#0F131A';
+const white = '#FFF';
+const black = '#000';
 
 // NOTE: The neutral color names & values don't match up with what's in Figma.
 // Fixing this would be a big breaking change, so we're leaving it as is.
 const neutrals = {
-  n100: '#FAFBFC',
-  n200: '#EEF0F2',
-  n300: '#D8DDE1',
-  n500: '#9DA7B1', // n400 in Figma
-  n700: '#5C656F', // n500 in Figma
-  n800: '#323E49', // n700 in Figma
-  n900: '#212933',
+  n100: '#F5F5F5',
+  n200: '#E6E6E6',
+  n300: '#CCC',
+  n500: '#999',
+  n700: '#666',
+  n800: '#333',
+  n900: '#1A1A1A',
 };
 
 const blues = {
-  b100: '#EDF4FC',
+  b100: '#F0F6FF',
   b200: '#DAEAFF',
   b300: '#AFD0FE',
   b400: '#7FB5FF',
-  b500: '#3388FF',
-  b700: '#1760CE',
-  b900: '#003C8B',
+  b500: '#3063E9',
+  b700: '#234BC3',
+  b900: '#1A368E',
 };
 
 const greens = {
@@ -55,15 +55,15 @@ const violets = {
   v100: '#E9CFF2',
   v200: '#D7A9DC',
   v300: '#C781C9',
-  v500: '#B54DB3',
+  v500: '#CA58FF',
   v700: '#8928A2',
   v900: '#5F1D6B',
 };
 
 const oranges = {
   o100: '#EFD0BB',
   o200: '#F7B97C',
-  o300: '#F7941D',
+  o300: '#ED7000',
   o500: '#CE6C0B',
   o700: '#8E4503',
   o900: '#66391B',
@@ -82,9 +82,9 @@ const reds = {
   r100: '#F4CBCB',
   r200: '#EDA2A2',
   r300: '#EA7A7A',
-  r500: '#DB4D4D',
-  r700: '#B22828',
-  r900: '#7F1818',
+  r500: '#D23F47',
+  r700: '#B22426',
+  r900: '#941618',
 };
 
 const primary = {
@@ -102,9 +102,9 @@ const misc = {
   overlay: 'rgba(12, 15, 20, 0.21)',
   bodyBg: neutrals.n100,
   bodyColor: black,
-  danger: reds.r500,
-  success: greens.g700,
-  warning: yellows.y500,
+  danger: '#D23F47',
+  success: '#138849',
+  warning: '#F5C625',
 };
 
 export const colors: Colors = {