diff --git a/src/design-system/atoms/branding/Branding.stories.tsx b/src/design-system/atoms/branding/Branding.stories.tsx
index 3fdb228..2ae06e4 100644
--- a/src/design-system/atoms/branding/Branding.stories.tsx
+++ b/src/design-system/atoms/branding/Branding.stories.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import { palette } from '../colors';
 import { Logomark as BrandingLogomark, Logotype as BrandingLogotype } from './Branding';
 
 export default {
@@ -7,7 +8,7 @@ export default {
 };
 
 const Wrapper = styled.div`
-    background-color: black;
+    background-color: ${palette.taupe100};
     padding: 2em;
 `;
 
diff --git a/src/design-system/atoms/branding/DynamicBranding.stories.tsx b/src/design-system/atoms/branding/DynamicBranding.stories.tsx
index d48689a..3222899 100644
--- a/src/design-system/atoms/branding/DynamicBranding.stories.tsx
+++ b/src/design-system/atoms/branding/DynamicBranding.stories.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import ReactTooltip from 'react-tooltip';
 import { Text } from 'roleypoly/design-system/atoms/typography';
 import styled from 'styled-components';
+import { palette } from '../colors';
 import { Logomark, Logotype } from './Branding';
 import { AllVariants, DynamicLogomark, DynamicLogotype } from './DynamicBranding';
 
@@ -11,7 +12,7 @@ export default {
 };
 
 const WrapperDiv = styled.div`
-    background-color: black;
+    background-color: ${palette.taupe100};
     padding: 2em;
 `;