Steps list

source/_patterns/00-atoms/04-lists/ordered-list-pirati-stan.mustache

-<ol class="ordered-list ordered-list-acidgreen-numbers">
+<ol class="ordered-list ordered-list-colored">
   <li>{{ headline.short }}</li>
   <li>{{ headline.short }}</li>
   <li>{{ headline.short }}</li>

source/_patterns/00-atoms/04-lists/steps-list.mustache

+<ol class="ordered-list ordered-list-squared">
+  <li>{{ headline.short }}</li>
+  <ul class="unordered-list unordered-list-colored">
+  	<li>{{ headline.short }}</li>
+  	<li>{{ headline.short }}</li>
+  	<li>{{ headline.short }}</li>
+  	<li>{{ headline.short }}</li>
+  </ul>
+  <li>{{ headline.short }}</li>
+  <ul class="unordered-list unordered-list-colored">
+  </ul>
+  <li>{{ headline.short }}</li>
+  <ul class="unordered-list unordered-list-colored">
+  </ul>
+  <li>{{ headline.short }}</li>
+  <ul class="unordered-list unordered-list-colored">
+  </ul>
+  <li>{{ headline.short }}</li>
+  <ul class="unordered-list unordered-list-colored">
+  </ul>
+  <li>{{ headline.short }}</li>
+</ol>

source/_patterns/00-atoms/04-lists/unordered-list-pirati-stan.mustache

-<ul class="unordered-list unordered-list-acidgreen-numbers">
+<ul class="unordered-list unordered-list-colored">
   <li>{{{ list.item }}}</li>
   <li>{{{ list.item }}}</li>
   <li>{{{ list.item }}}</li>

source/css/atoms/list-pirati-stan.pcss

-.content-block .ordered-list-acidgreen-numbers li::marker,
-.ordered-list-acidgreen-numbers li::marker{
-  @apply text-acidgreen font-bold; 
+.content-block .ordered-list-colored li::marker,
+.ordered-list-colored li::marker{
+  @apply font-bold;
+  color: theme('colors.fxactivecolor'); 
 }
-.content-block .unordered-list-acidgreen-numbers li,
-.unordered-list-acidgreen-numbers li{
+.content-block .ordered-list-squared,
+.ordered-list-squared{
+  list-style: none;
+  counter-reset: ol-counter;
+
+  &> li{
+	@apply text-xl font-bold leading-6;
+	counter-increment: ol-counter;
+
+	&::before{
+	  @apply font-bold h-6 w-6 inline-flex items-center justify-center mr-5;
+	  padding-top: 2px; /* to fix font mis-centering*/
+	  font-family: Bebas Neue,Helvetica,Arial,sans-serif;
+	  font-weight: 400;
+	  font-size: 0.8rem;
+	  content: counter(ol-counter);
+	  background-color: theme('colors.fxactivecolor'); 
+	  color: theme('colors.fxtextonactivecolor');
+	  vertical-align: top;
+	}
+  }
+  .unordered-list-colored{
+  	@apply ml-3 border-l;
+  	border-color: #f5f5f5;
+  	min-height: 0.5rem;
+  }
+  .unordered-list-colored li{
+  	@apply ml-8 pl-5;
+	
+	&:first-child{
+	  @apply mt-4;
+	}
+	&:last-child{
+	  @apply mb-8;
+	}
+  }
+}
+.content-block .unordered-list-colored li,
+.unordered-list-colored li{
   @apply pl-8;
 }
 
-.content-block .unordered-list-acidgreen-numbers li::before,
-.unordered-list-acidgreen-numbers li::before{
-  @apply text-acidgreen;
+.content-block .unordered-list-colored li::before,
+.unordered-list-colored li::before{
+  color: theme('colors.fxactivecolor'); 
 }
 
 .content-block .unordered-list-checks li,
@@ -19,7 +57,8 @@
 }
 .content-block .unordered-list-checks li::before,
 .unordered-list-checks li::before{
-  @apply text-acidgreen top-0;
+  @apply top-0;
+  color: theme('colors.fxactivecolor'); 
   content: "\e93f";
   font-size: 1.3em;
 }
\ No newline at end of file