diff --git a/packages/design-system-docs/src/pages/utilities/background-color/background-color.example.html b/packages/design-system-docs/src/pages/utilities/background-color/background-color.example.html
index 61535aef41..7a88b8cd3b 100644
--- a/packages/design-system-docs/src/pages/utilities/background-color/background-color.example.html
+++ b/packages/design-system-docs/src/pages/utilities/background-color/background-color.example.html
@@ -1,18 +1,18 @@
 <div class="example--list">
-  <% var groups={ 'Primary colors' : ['primary', 'primary-darker' , 'primary-darkest' , 'black' ,
-  'base' , 'gray-dark' , 'gray-light' , 'white' ], 'Secondary colors' : ['secondary',
-  'secondary-dark' , 'secondary-darker', 'secondary-darkest' , 'secondary-light',
-  'secondary-lighter', 'secondary-lightest' ], 'Background colors' : ['background',
-  'background-inverse' ,'gray-dark', 'gray' , 'gray-light' , 'gray-lighter' , 'gray-lightest' ],
-  'Status colors' : ['success', 'success-dark' , 'success-darker' , 'success-darkest' ,
-  'success-light' , 'success-lighter' ,'success-lightest', 'warn' , 'warn-dark' , 'warn-darker' ,
-  'warn-darkest' , 'warn-light' , 'warn-lighter' , 'warn-lightest' , 'error' , 'error-dark' ,
-  'error-darker' , 'error-darkest' , 'error-light' , 'error-lighter' ,'error-lightest'], 'Focus
-  colors' : ['focus-color-light' , 'focus-color-dark' ], 'Additional colors' : ['muted-inverse',
-  'transparent' ], 'Focus colors - Deprecated' : ['focus-color', 'focus-color-inverse',
-  'focus-border-inverse'], }; -%> <% Object.keys(groups).forEach(function(fill){ -%>
+  <% var groups={ 'Primary colors' :
+  ['primary','primary-darker','primary-darkest','black','base','gray-dark','gray-light','white'],
+  'Secondary colors' :
+  ['secondary','secondary-dark','secondary-darker','secondary-darkest','secondary-light','secondary-lighter','secondary-lightest'],
+  'Background colors' :
+  ['background','background-inverse','gray-dark','gray','gray-light','gray-lighter','gray-lightest'],
+  'Status colors' :
+  ['success','success-dark','success-darker','success-darkest','success-light','success-lighter','success-lightest','warn','warn-dark','warn-darker','warn-darkest','warn-light','warn-lighter','warn-lightest','error','error-dark','error-darker','error-darkest','error-light','error-lighter','error-lightest'],
+  'Focus colors' : ['focus-color-light','focus-color-dark'], 'Additional colors' :
+  ['muted-inverse','transparent'],'Focus colors - Deprecated' :
+  ['focus-color','focus-color-inverse','focus-border-inverse'], }; -%> <%
+  Object.keys(groups).forEach(function(fill){ -%>
   <section>
-    <h1 class="preview__label"><%= fill%></h1>
+    <h1 class="preview__label"><%= fill %></h1>
     <% if (fill === 'Focus colors - Deprecated') { %>
     <div class="ds-c-alert ds-c-alert--error ds-u-margin-bottom--2" role="region">
       <div class="ds-c-alert__body">