@digital-ai/dot-illustrations 1.0.7 → 1.0.9

package/demo/index.html

@@ -20,407 +20,717 @@
       <!-- light agility illustrations --> 
       <div>
         <img class="illustration-agility-disconnected-light"></i>
-        <span>illustration-agility-disconnected</span>
+        <span>agility-disconnected-light</span>
       </div>
       <div>
         <img class="illustration-agility-features-light"></i>
-        <span>illustration-agility-features</span>
+        <span>agility-features-light</span>
       </div>
       <div>
         <img class="illustration-agility-launch-light"></i>
-        <span>illustration-agility-launch</span>
+        <span>agility-launch-light</span>
       </div>
       <div>
         <img class="illustration-agility-nothing-defined-light"></i>
-        <span>illustration-agility-nothing-defined</span>
+        <span>agility-nothing-defined-light</span>
       </div>
       <div>
         <img class="illustration-agility-survey-light"></i>
-        <span>illustration-agility-survey</span>
+        <span>agility-survey-light</span>
       </div>
       <div>
         <img class="illustration-agility-community-light"></i>
-        <span>illustration-agility-community</span>
+        <span>agility-community-light</span>
       </div>
       <div>
         <img class="illustration-agility-assets-light"></i>
-        <span>illustration-agility-assets</span>
+        <span>agility-assets-light</span>
       </div>
       <div>
         <img class="illustration-agility-work-item-light"></i>
-        <span>illustration-agility-work-item</span>
+        <span>agility-work-item-light</span>
       </div>
       <div>
         <img class="illustration-agility-reports-light"></i>
-        <span>illustration-agility-reports</span>
+        <span>agility-reports-light</span>
       </div>
       <div>
-        <img class="illustration-agility-dependency-light"></i>
-        <span>illustration-agility-dependency</span>
+        <img class="illustration-agility-dependency-up-light"></i>
+        <span>agility-dependency-up-light</span>
+      </div>
+      <div>
+        <img class="illustration-agility-dependency-down-light"></i>
+        <span>agility-dependency-down-light</span>
       </div>
       <div>
         <img class="illustration-agility-chart-light"></i>
-        <span>illustration-agility-chart</span>
+        <span>agility-chart-light</span>
       </div>
-      <!-- light digitalai illustrations --> 
       <div>
-        <img class="illustration-disconnected-digitalai-light"></i>
-        <span>illustration-digitalai-disconnected</span>
+        <img class="illustration-agility-no-files-light"></i>
+        <span>agility-no-files-light</span>
       </div>
       <div>
-        <img class="illustration-digitalai-features-light"></i>
-        <span>illustration-digitalai-features</span>
+        <img class="illustration-agility-password-token-light"></i>
+        <span>agility-password-token-light</span>
       </div>
       <div>
-        <img class="illustration-digitalai-launch-light"></i>
-        <span>illustration-digitalai-launch</span>
+        <img class="illustration-agility-user-light"></i>
+        <span>agility-user-light</span>
       </div>
+
+      <!-- dark agility illustrations --> 
       <div>
-        <img class="illustration-digitalai-nothing-defined-light"></i>
-        <span>illustration-digitalai-nothing-defined</span>
+        <img class="illustration-agility-disconnected-dark"></i>
+        <span>agility-disconnected-dark</span>
       </div>
       <div>
-        <img class="illustration-survey-digitalai-light"></i>
-        <span>illustration-survey-digitalai-light</span>
+        <img class="illustration-agility-features-dark"></i>
+        <span>agility-features-dark</span>
       </div>
       <div>
-        <img class="illustration-digitalai-community-light"></i>
-        <span>illustration-digitalai-community</span>
+        <img class="illustration-agility-launch-dark"></i>
+        <span>agility-launch-dark</span>
       </div>
       <div>
-        <img class="illustration-digitalai-assets-light"></i>
-        <span>illustration-digitalai-assets</span>
+        <img class="illustration-agility-nothing-defined-dark"></i>
+        <span>agility-nothing-defined-dark</span>
       </div>
       <div>
-        <img class="illustration-digitalai-work-item-light"></i>
-        <span>illustration-digitalai-work-item</span>
+        <img class="illustration-agility-survey-dark"></i>
+        <span>agility-survey-dark</span>
       </div>
       <div>
-        <img class="illustration-digitalai-reports-light"></i>
-        <span>illustration-digitalai-reports</span>
+        <img class="illustration-agility-community-dark"></i>
+        <span>agility-community-dark</span>
       </div>
       <div>
-        <img class="illustration-digitalai-dependency-light"></i>
-        <span>illustration-digitalai-dependency</span>
+        <img class="illustration-agility-assets-dark"></i>
+        <span>agility-assets-dark</span>
       </div>
       <div>
-        <img class="illustration-digitalai-chart-light"></i>
-        <span>illustration-digitalai-chart</span>
+        <img class="illustration-agility-work-item-dark"></i>
+        <span>agility-work-item-dark</span>
       </div>
-      <!-- dark agility illustrations --> 
       <div>
-        <img class="illustration-agility-disconnected-dark"></i>
-        <span>illustration-agility-disconnected</span>
+        <img class="illustration-agility-reports-dark"></i>
+        <span>agility-reports-dark</span>
       </div>
       <div>
-        <img class="illustration-agility-features-dark"></i>
-        <span>illustration-agility-features</span>
+        <img class="illustration-agility-dependency-up-dark"></i>
+        <span>agility-dependency-up-dark</span>
       </div>
       <div>
-        <img class="illustration-agility-launch-dark"></i>
-        <span>illustration-agility-launch</span>
+        <img class="illustration-agility-dependency-down-dark"></i>
+        <span>agility-dependency-down-dark</span>
       </div>
       <div>
-        <img class="illustration-agility-nothing-defined-dark"></i>
-        <span>illustration-agility-nothing-defined</span>
+        <img class="illustration-agility-chart-dark"></i>
+        <span>agility-chart-dark</span>
       </div>
       <div>
-        <img class="illustration-survey-digitalai-dark"></i>
-        <span>illustration-survey-digitalai-dark</span>
+        <img class="illustration-agility-no-files-dark"></i>
+        <span>agility-no-files-dark</span>
       </div>
       <div>
-        <img class="illustration-agility-community-dark"></i>
-        <span>illustration-agility-community</span>
+        <img class="illustration-agility-password-token-dark"></i>
+        <span>agility-password-token-dark</span>
       </div>
       <div>
-        <img class="illustration-agility-assets-dark"></i>
-        <span>illustration-agility-assets</span>
+        <img class="illustration-agility-user-dark"></i>
+        <span>agility-user-dark</span>
+      </div>
+      <!-- light digitalai illustrations --> 
+      <div>
+        <img class="illustration-digitalai-disconnected-light"></i>
+        <span>digitalai-disconnected-light</span>
       </div>
       <div>
-        <img class="illustration-agility-work-item-dark"></i>
-        <span>illustration-agility-work-item</span>
+        <img class="illustration-digitalai-features-light"></i>
+        <span>digitalai-features-light</span>
       </div>
       <div>
-        <img class="illustration-agility-reports-dark"></i>
-        <span>illustration-agility-reports</span>
+        <img class="illustration-digitalai-launch-light"></i>
+        <span>digitalai-launch-light</span>
       </div>
       <div>
-        <img class="illustration-agility-dependency-dark"></i>
-        <span>illustration-agility-dependency</span>
+        <img class="illustration-digitalai-nothing-defined-light"></i>
+        <span>digitalai-nothing-defined-light</span>
       </div>
       <div>
-        <img class="illustration-agility-chart-dark"></i>
-        <span>illustration-agility-chart</span>
+        <img class="illustration-digitalai-survey-light"></i>
+        <span>digitalai-survey-light</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-community-light"></i>
+        <span>digitalai-community-light</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-assets-light"></i>
+        <span>digitalai-assets-light</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-work-item-light"></i>
+        <span>digitalai-work-item-light</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-reports-light"></i>
+        <span>digitalai-reports-light</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-dependency-up-light"></i>
+        <span>digitalai-dependency-up-light</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-dependency-down-light"></i>
+        <span>digitalai-dependency-down-light</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-chart-light"></i>
+        <span>digitalai-chart-light</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-no-files-light"></i>
+        <span>digitalai-no-files-light</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-password-token-light"></i>
+        <span>digitalai-password-token-light</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-user-light"></i>
+        <span>digitalai-user-light</span>
       </div>
       <!-- dark digitalai illustrations --> 
       <div>
-        <img class="illustration-disconnected-digitalai-dark"></i>
-        <span>illustration-digitalai-disconnected</span>
+        <img class="illustration-digitalai-disconnected-dark"></i>
+        <span>digitalai-disconnected-dark</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-features-dark"></i>
+        <span>digitalai-features-dark</span>
       </div>
       <div>
-        <img class="illustration-features-digitalai-dark"></i>
-        <span>illustration-digitalai-features</span>
+        <img class="illustration-digitalai-launch-dark"></i>
+        <span>digitalai-launch-dark</span>
       </div>
       <div>
-        <img class="illustration-launch-digitalai-dark"></i>
-        <span>illustration-launch-digitalai-dark</span>
+        <img class="illustration-digitalai-nothing-defined-dark"></i>
+        <span>digitalai-nothing-defined-dark</span>
       </div>
       <div>
-        <img class="illustration-nothing-defined-digitalai-dark"></i>
-        <span>illustration-nothing-defined-digitalai-dark</span>
+        <img class="illustration-digitalai-survey-dark"></i>
+        <span>digitalai-survey-dark</span>
       </div>
       <div>
-        <img class="illustration-survey-digitalai-dark"></i>
-        <span>illustration-survey-digitalai-dark</span>
+        <img class="illustration-digitalai-community-dark"></i>
+        <span>digitalai-community-dark</span>
       </div>
       <div>
-        <img class="illustration-community-digitalai-dark"></i>
-        <span>illustration-community-digitalai-dark</span>
+        <img class="illustration-digitalai-assets-dark"></i>
+        <span>digitalai-assets-dark</span>
       </div>
       <div>
-        <img class="illustration-assets-digitalai-dark"></i>
-        <span>illustration-assets-digitalai-dark</span>
+        <img class="illustration-digitalai-work-item-dark"></i>
+        <span>digitalai-work-item-dark</span>
       </div>
       <div>
-        <img class="illustration-work-item-digitalai-dark"></i>
-        <span>illustration-digitalai-work-item</span>
+        <img class="illustration-digitalai-reports-dark"></i>
+        <span>digitalai-reports-dark</span>
       </div>
       <div>
-        <img class="illustration-reports-digitalai-dark"></i>
-        <span>illustration-digitalai-reports</span>
+        <img class="illustration-digitalai-dependency-up-dark"></i>
+        <span>digitalai-dependency-up-dark</span>
       </div>
       <div>
-        <img class="illustration-digitalai-dependency-dark"></i>
-        <span>illustration-digitalai-dependency</span>
+        <img class="illustration-digitalai-dependency-down-dark"></i>
+        <span>digitalai-dependency-down-dark</span>
       </div>
       <div>
         <img class="illustration-digitalai-chart-dark"></i>
-        <span>illustration-digitalai-chart</span>
+        <span>digitalai-chart-dark</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-no-files-dark"></i>
+        <span>digitalai-no-files-dark</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-password-token-dark"></i>
+        <span>digitalai-password-token-dark</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-user-dark"></i>
+        <span>digitalai-user-dark</span>
       </div>
       <!-- light dashboards agility illustrations --> 
       <div>
         <img class="illustration-dashboards-agility-custom-light"></i>
-        <span>illustration-dashboards-custom</span>
+        <span>agility-custom-light</span>
       </div>
       <div>
-        <img class="illustration-dashboards-dora-agility-light"></i>
-        <span>illustration-dashboards-dora-agility-light</span>
+        <img class="illustration-dashboards-agility-dora-light"></i>
+        <span>agility-dora-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-agility-onboarding-light"></i>
-        <span>illustration-dashboards-onboarding</span>
+        <span>agility-onboarding-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-agility-late-task-light"></i>
-        <span>illustration-dashboards-late-task</span>
+        <span>agility-late-task-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-agility-analysis-light"></i>
-        <span>illustration-dashboards-analysis</span>
+        <span>agility-analysis-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-agility-workflow-light"></i>
-        <span>illustration-dashboards-workflow</span>
+        <span>agility-workflow-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-agility-dependency-light"></i>
-        <span>illustration-dashboards-dependency</span>
+        <span>agility-dependency-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-agility-executive-light"></i>
-        <span>illustration-dashboards-executive</span>
+        <span>agility-executive-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-agility-automation-light"></i>
-        <span>illustration-dashboards-automation</span>
+        <span>agility-automation-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-agility-defect-light"></i>
-        <span>illustration-dashboards-defect</span>
+        <span>agility-defect-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-agility-item-light"></i>
-        <span>illustration-dashboards-item</span>
+        <span>agility-item-light</span>
       </div>
       <!-- light dashboards digitalai illustrations --> 
       <div>
         <img class="illustration-dashboards-digitalai-custom-light"></i>
-        <span>illustration-dashboards-custom</span>
+        <span>digitalai-custom-light</span>
       </div>
       <div>
-        <img class="illustration-dashboards-dora-digitalai-light"></i>
-        <span>illustration-dashboards-dora-digitalai-light</span>
+        <img class="illustration-dashboards-digitalai-dora-light"></i>
+        <span>digitalai-dora-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-digitalai-onboarding-light"></i>
-        <span>illustration-dashboards-onboarding</span>
+        <span>digitalai-onboarding-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-digitalai-late-task-light"></i>
-        <span>illustration-dashboards-late-task</span>
+        <span>digitalai-late-task-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-digitalai-analysis-light"></i>
-        <span>illustration-dashboards-analysis</span>
+        <span>digitalai-analysis-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-digitalai-workflow-light"></i>
-        <span>illustration-dashboards-workflow</span>
+        <span>digitalai-workflow-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-digitalai-dependency-light"></i>
-        <span>illustration-dashboards-dependency</span>
+        <span>digitalai-dependency-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-digitalai-executive-light"></i>
-        <span>illustration-dashboards-executive</span>
+        <span>digitalai-executive-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-digitalai-automation-light"></i>
-        <span>illustration-dashboards-automation</span>
+        <span>digitalai-automation-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-digitalai-defect-light"></i>
-        <span>illustration-dashboards-defect</span>
+        <span>digitalai-defect-light</span>
       </div>
       <div>
         <img class="illustration-dashboards-digitalai-item-light"></i>
-        <span>illustration-dashboards-item</span>
+        <span>digitalai-item-light</span>
       </div>
+      <!-- dark dashboards agility illustrations --> 
       <div>
-        <img class="illustration-agility-disconnected-dark"></i>
-        <span>illustration-agility-disconnected</span>
+        <img class="illustration-dashboards-agility-custom-dark"></i>
+        <span>agility-custom-dark</span>
       </div>
       <div>
-        <img class="illustration-agility-features-dark"></i>
-        <span>illustration-agility-features</span>
+        <img class="illustration-dashboards-agility-dora-dark"></i>
+        <span>agility-dora-agility-dark</span>
       </div>
       <div>
-        <img class="illustration-agility-launch-dark"></i>
-        <span>illustration-agility-launch</span>
+        <img class="illustration-dashboards-agility-onboarding-dark"></i>
+        <span>agility-onboarding-dark</span>
       </div>
       <div>
-        <img class="illustration-agility-nothing-defined-dark"></i>
-        <span>illustration-agility-nothing-defined</span>
+        <img class="illustration-dashboards-agility-late-task-dark"></i>
+        <span>agility-late-task-dark</span>
       </div>
       <div>
-        <img class="illustration-agility-survey-dark"></i>
-        <span>illustration-agility-survey</span>
+        <img class="illustration-dashboards-agility-analysis-dark"></i>
+        <span>agility-analysis-dark</span>
       </div>
       <div>
-        <img class="illustration-agility-community-dark"></i>
-        <span>illustration-agility-community</span>
+        <img class="illustration-dashboards-agility-workflow-dark"></i>
+        <span>agility-workflow-dark</span>
       </div>
       <div>
-        <img class="illustration-agility-assets-dark"></i>
-        <span>illustration-agility-assets</span>
+        <img class="illustration-dashboards-agility-dependency-dark"></i>
+        <span>agility-dependency-dark</span>
       </div>
       <div>
-        <img class="illustration-agility-work-item-dark"></i>
-        <span>illustration-agility-work-item</span>
+        <img class="illustration-dashboards-agility-executive-dark"></i>
+        <span>agility-executive-dark</span>
       </div>
       <div>
-        <img class="illustration-agility-reports-dark"></i>
-        <span>illustration-agility-reports</span>
+        <img class="illustration-dashboards-agility-automation-dark"></i>
+        <span>agility-automation-dark</span>
       </div>
       <div>
-        <img class="illustration-agility-dependency-dark"></i>
-        <span>illustration-agility-dependency</span>
+        <img class="illustration-dashboards-agility-defect-dark"></i>
+        <span>agility-defect-dark</span>
       </div>
       <div>
-        <img class="illustration-agility-chart-dark"></i>
-        <span>illustration-agility-chart</span>
+        <img class="illustration-dashboards-agility-item-dark"></i>
+        <span>agility-item-dark</span>
       </div>
-      <!-- dark dashboards agility illustrations --> 
+      <!-- dark dashboards digitalai illustrations --> 
       <div>
-        <img class="illustration-dashboards-agility-custom-dark"></i>
-        <span>illustration-dashboards-custom</span>
+        <img class="illustration-dashboards-digitalai-custom-dark"></i>
+        <span>digitalai-custom-dark</span>
       </div>
       <div>
-        <img class="illustration-dashboards-dora-agility-dark"></i>
-        <span>illustration-dashboards-dora-agility-dark</span>
+        <img class="illustration-dashboards-digitalai-dora-dark"></i>
+        <span>digitalai-dora-dark</span>
       </div>
       <div>
-        <img class="illustration-dashboards-agility-onboarding-dark"></i>
-        <span>illustration-dashboards-onboarding</span>
+        <img class="illustration-dashboards-digitalai-onboarding-dark"></i>
+        <span>digitalai-onboarding-dark</span>
       </div>
       <div>
-        <img class="illustration-dashboards-agility-late-task-dark"></i>
-        <span>illustration-dashboards-late-task</span>
+        <img class="illustration-dashboards-digitalai-late-task-dark"></i>
+        <span>digitalai-late-task-dark</span>
       </div>
       <div>
-        <img class="illustration-dashboards-agility-analysis-dark"></i>
-        <span>illustration-dashboards-analysis</span>
+        <img class="illustration-dashboards-digitalai-analysis-dark"></i>
+        <span>digitalai-analysis-dark</span>
       </div>
       <div>
-        <img class="illustration-dashboards-agility-workflow-dark"></i>
-        <span>illustration-dashboards-workflow</span>
+        <img class="illustration-dashboards-digitalai-workflow-dark"></i>
+        <span>digitalai-workflow-dark</span>
       </div>
       <div>
-        <img class="illustration-dashboards-agility-dependency-dark"></i>
-        <span>illustration-dashboards-dependency</span>
+        <img class="illustration-dashboards-digitalai-dependency-dark"></i>
+        <span>digitalai-dependency-dark</span>
       </div>
       <div>
-        <img class="illustration-dashboards-agility-executive-dark"></i>
-        <span>illustration-dashboards-executive</span>
+        <img class="illustration-dashboards-digitalai-executive-dark"></i>
+        <span>digitalai-executive-dark</span>
       </div>
       <div>
-        <img class="illustration-dashboards-agility-automation-dark"></i>
-        <span>illustration-dashboards-automation</span>
+        <img class="illustration-dashboards-digitalai-automation-dark"></i>
+        <span>digitalai-automation-dark</span>
       </div>
       <div>
-        <img class="illustration-dashboards-agility-defect-dark"></i>
-        <span>illustration-dashboards-defect</span>
+        <img class="illustration-dashboards-digitalai-defect-dark"></i>
+        <span>digitalai-defect-dark</span>
       </div>
       <div>
-        <img class="illustration-dashboards-agility-item-dark"></i>
-        <span>illustration-dashboards-item</span>
+        <img class="illustration-dashboards-digitalai-item-dark"></i>
+        <span>digitalai-item-dark</span>
       </div>
-      <!-- dark dashboards digitalai illustrations --> 
+
+      <!-- light nobg dashboards agility illustrations --> 
       <div>
-        <img class="illustration-dashboards-custom-digitalai-dark"></i>
-        <span>illustration-dashboards-custom-digitalai-dark</span>
+        <img class="illustration-dashboards-agility-custom-nobg-light"></i>
+        <span>agility-custom-nobg-light</span>
       </div>
       <div>
-        <img class="illustration-dashboards-dora-digitalai-dark"></i>
-        <span>illustration-dashboards-dora-digitalai-dark</span>
+        <img class="illustration-dashboards-agility-dora-nobg-light"></i>
+        <span>agility-dora-nobg-light</span>
       </div>
       <div>
-        <img class="illustration-dashboards-digitalai-onboarding-dark"></i>
-        <span>illustration-dashboards-onboarding</span>
+        <img class="illustration-dashboards-agility-onboarding-nobg-light"></i>
+        <span>agility-onboarding-nobg-light</span>
       </div>
       <div>
-        <img class="illustration-dashboards-digitalai-late-task-dark"></i>
-        <span>illustration-dashboards-late-task</span>
+        <img class="illustration-dashboards-agility-late-task-nobg-light"></i>
+        <span>agility-late-task-nobg-light</span>
       </div>
       <div>
-        <img class="illustration-dashboards-digitalai-analysis-dark"></i>
-        <span>illustration-dashboards-analysis</span>
+        <img class="illustration-dashboards-agility-analysis-nobg-light"></i>
+        <span>agility-analysis-nobg-light</span>
       </div>
       <div>
-        <img class="illustration-dashboards-digitalai-workflow-dark"></i>
-        <span>illustration-dashboards-workflow</span>
+        <img class="illustration-dashboards-agility-workflow-nobg-light"></i>
+        <span>agility-workflow-nobg-light</span>
       </div>
       <div>
-        <img class="illustration-dashboards-digitalai-dependency-dark"></i>
-        <span>illustration-dashboards-dependency</span>
+        <img class="illustration-dashboards-agility-dependency-nobg-light"></i>
+        <span>agility-dependency-nobg-light</span>
       </div>
       <div>
-        <img class="illustration-dashboards-digitalai-executive-dark"></i>
-        <span>illustration-dashboards-executive</span>
+        <img class="illustration-dashboards-agility-executive-nobg-light"></i>
+        <span>agility-executive-nobg-light</span>
       </div>
       <div>
-        <img class="illustration-dashboards-digitalai-automation-dark"></i>
-        <span>illustration-dashboards-automation</span>
+        <img class="illustration-dashboards-agility-automation-nobg-light"></i>
+        <span>agility-automation-nobg-light</span>
       </div>
       <div>
-        <img class="illustration-dashboards-digitalai-defect-dark"></i>
-        <span>illustration-dashboards-defect</span>
+        <img class="illustration-dashboards-agility-defect-nobg-light"></i>
+        <span>agility-defect-nobg-light</span>
       </div>
       <div>
-        <img class="illustration-dashboards-digitalai-item-dark"></i>
-        <span>illustration-dashboards-item</span>
+        <img class="illustration-dashboards-agility-item-nobg-light"></i>
+        <span>agility-item-nobg-light</span>
+      </div>
+
+      <!-- light nobg dashboards digitalai illustrations --> 
+      <div>
+        <img class="illustration-dashboards-digitalai-custom-nobg-light"></i>
+        <span>digitalai-custom-nobg-light</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-dora-nobg-light"></i>
+        <span>digitalai-dora-nobg-light</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-onboarding-nobg-light"></i>
+        <span>digitalai-onboarding-nobg-light</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-late-task-nobg-light"></i>
+        <span>digitalai-late-task-nobg-light</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-analysis-nobg-light"></i>
+        <span>digitalai-analysis-nobg-light</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-workflow-nobg-light"></i>
+        <span>digitalai-workflow-nobg-light</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-dependency-nobg-light"></i>
+        <span>digitalai-dependency-nobg-light</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-executive-nobg-light"></i>
+        <span>digitalai-executive-nobg-light</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-automation-nobg-light"></i>
+        <span>digitalai-automation-nobg-light</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-defect-nobg-light"></i>
+        <span>digitalai-defect-nobg-light</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-item-nobg-light"></i>
+        <span>digitalai-item-nobg-light</span>
+      </div>
+
+      <!-- dark nobg dashboards agility illustrations --> 
+      <div>
+        <img class="illustration-dashboards-agility-custom-nobg-dark"></i>
+        <span>agility-custom-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-agility-dora-nobg-dark"></i>
+        <span>agility-dora-agility-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-agility-onboarding-nobg-dark"></i>
+        <span>agility-onboarding-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-agility-late-task-nobg-dark"></i>
+        <span>agility-late-task-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-agility-analysis-nobg-dark"></i>
+        <span>agility-analysis-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-agility-workflow-nobg-dark"></i>
+        <span>agility-workflow-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-agility-dependency-nobg-dark"></i>
+        <span>agility-dependency-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-agility-executive-nobg-dark"></i>
+        <span>agility-executive-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-agility-automation-nobg-dark"></i>
+        <span>agility-automation-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-agility-defect-nobg-dark"></i>
+        <span>agility-defect-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-agility-item-nobg-dark"></i>
+        <span>agility-item-nobg-dark</span>
+      </div>
+
+      <!-- dark nobg dashboards digitalai illustrations --> 
+      <div>
+        <img class="illustration-dashboards-digitalai-custom-nobg-dark"></i>
+        <span>digitalai-custom-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-dora-nobg-dark"></i>
+        <span>digitalai-dora-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-onboarding-nobg-dark"></i>
+        <span>digitalai-onboarding-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-late-task-nobg-dark"></i>
+        <span>digitalai-late-task-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-analysis-nobg-dark"></i>
+        <span>digitalai-analysis-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-workflow-nobg-dark"></i>
+        <span>digitalai-workflow-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-dependency-nobg-dark"></i>
+        <span>digitalai-dependency-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-executive-nobg-dark"></i>
+        <span>digitalai-executive-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-automation-nobg-dark"></i>
+        <span>digitalai-automation-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-defect-nobg-dark"></i>
+        <span>digitalai-defect-nobg-dark</span>
+      </div>
+      <div>
+        <img class="illustration-dashboards-digitalai-item-nobg-dark"></i>
+        <span>digitalai-item-nobg-dark</span>
+      </div>
+
+      <!-- light ux agility illustrations --> 
+      <div>
+        <img class="illustration-agility-ux-community-light"></i>
+        <span>agility-ux-community-light</span>
+      </div>
+      <div>
+        <img class="illustration-agility-ux-goal-light"></i>
+        <span>agility-ux-goal-light</span>
+      </div>
+      <div>
+        <img class="illustration-agility-ux-launch-light"></i>
+        <span>agility-ux-launch-light</span>
+      </div>
+      <div>
+        <img class="illustration-agility-ux-objective-light"></i>
+        <span>agility-ux-objective-light</span>
+      </div>
+      <div>
+        <img class="illustration-agility-ux-paper-light"></i>
+        <span>agility-ux-paper-light</span>
+      </div>
+      <div>
+        <img class="illustration-agility-ux-update-light"></i>
+        <span>agility-ux-update-light</span>
+      </div>
+
+      <!-- dark ux agility illustrations --> 
+      <div>
+        <img class="illustration-agility-ux-community-dark"></i>
+        <span>agility-ux-community-dark</span>
+      </div>
+      <div>
+        <img class="illustration-agility-ux-goal-dark"></i>
+        <span>agility-ux-goal-dark</span>
+      </div>
+      <div>
+        <img class="illustration-agility-ux-launch-dark"></i>
+        <span>agility-ux-launch-dark</span>
+      </div>
+      <div>
+        <img class="illustration-agility-ux-objective-dark"></i>
+        <span>agility-ux-objective-dark</span>
+      </div>
+      <div>
+        <img class="illustration-agility-ux-paper-dark"></i>
+        <span>agility-ux-paper-dark</span>
+      </div>
+      <div>
+        <img class="illustration-agility-ux-update-dark"></i>
+        <span>agility-ux-update-dark</span>
+      </div>
+
+      <!-- light ux digitalai illustrations --> 
+      <div>
+        <img class="illustration-digitalai-ux-community-light"></i>
+        <span>digitalai-ux-community-light</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-ux-goal-light"></i>
+        <span>digitalai-ux-goal-light</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-ux-launch-light"></i>
+        <span>digitalai-ux-launch-light</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-ux-objective-light"></i>
+        <span>digitalai-ux-objective-light</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-ux-paper-light"></i>
+        <span>digitalai-ux-paper-light</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-ux-update-light"></i>
+        <span>digitalai-ux-update-light</span>
+      </div>
+      
+      <!-- dark ux digitalai illustrations --> 
+      <div>
+        <img class="illustration-digitalai-ux-community-dark"></i>
+        <span>digitalai-ux-community-dark</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-ux-goal-dark"></i>
+        <span>digitalai-ux-goal-dark</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-ux-launch-dark"></i>
+        <span>digitalai-ux-launch-dark</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-ux-objective-dark"></i>
+        <span>digitalai-ux-objective-dark</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-ux-paper-dark"></i>
+        <span>digitalai-ux-paper-dark</span>
+      </div>
+      <div>
+        <img class="illustration-digitalai-ux-update-dark"></i>
+        <span>digitalai-ux-update-dark</span>
       </div>
     </div>
   </body>
 </html>
+