diff --git a/majak_uistyleguide/templates/patterns/atoms/images/images.html b/majak_uistyleguide/templates/patterns/atoms/images/images.html
new file mode 100644
index 0000000000000000000000000000000000000000..6c344807dc726a18f26ffdf49321bf5f351e60d6
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/images/images.html
@@ -0,0 +1,19 @@
+<div class="w-full mx-auto my-6 object-contain h-max lg:h-max lg:w-auto">
+  <img src="/static/ivan1.png">
+</div>
+
+<div class="float-left mr-4 mb-6 max-w-[400px] mt-0 sm:max-w-full object-contain">
+  <img src="/static/ivan1.png">
+</div>
+
+<div class="float-left mr-4 mb-6 mt-0 object-contain">
+  <img src="/static/ivan1.png">
+</div>
+
+<div class="float-right ml-4 mb-6 max-w-[400px] mt-0 sm:max-w-full object-contain">
+  <img src="/static/ivan1.png">
+</div>
+
+<div class="float-right ml-4 mb-6 mt-0 object-contain">
+  <img src="/static/ivan1.png">
+</div>
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/text/colors.html b/majak_uistyleguide/templates/patterns/atoms/text/colors.html
index 135da2460879d1b84975d116bf3cbc0081f8aa8f..1d06f3f3cb2bc0d97a0206a2df6e6b82fb36c980 100644
--- a/majak_uistyleguide/templates/patterns/atoms/text/colors.html
+++ b/majak_uistyleguide/templates/patterns/atoms/text/colors.html
@@ -1,5 +1,95 @@
-{% for color in color_classes %}
-  <div class="{{ color }}">
-    {% include "patterns/atoms/text/paragraph.html" %}
+<div
+  class="
+    bg-black text-white
+    [&_p]:!text-white
+    [&_h1]:!text-white
+    [&_h2]:!text-white
+    [&_h3]:!text-white
+    [&_h4]:!text-white
+    [&_h5]:!text-white
+    [&_h6]:!text-white
+  "
+>
+  {% include "patterns/atoms/text/paragraph.html" %}
+</div>
+
+<div
+  class="
+    bg-pirati-yellow text-black
+    [&_p]:!text-black
+    [&_h1]:!text-black
+    [&_h2]:!text-black
+    [&_h3]:!text-black
+    [&_h4]:!text-black
+    [&_h5]:!text-black
+    [&_h6]:!text-black
+  "
+>
+  {% include "patterns/atoms/text/paragraph.html" %}
+</div>
+
+<div
+  class="
+    bg-white text-black
+    [&_p]:!text-black
+    [&_h1]:!text-black
+    [&_h2]:!text-black
+    [&_h3]:!text-black
+    [&_h4]:!text-black
+    [&_h5]:!text-black
+    [&_h6]:!text-black
+  "
+>
+  {% include "patterns/atoms/text/paragraph.html" %}
+</div>
+
+<div
+  class="
+    bg-black text-white
+    [&_p]:!text-white
+    [&_h1]:!text-white
+    [&_h2]:!text-white
+    [&_h3]:!text-white
+    [&_h4]:!text-white
+    [&_h5]:!text-white
+    [&_h6]:!text-white
+  "
+>
+  <div class="prose">
+    {% include "patterns/atoms/text/headings.html" %}
   </div>
-{% endfor %}
\ No newline at end of file
+</div>
+
+<div
+  class="
+    bg-pirati-yellow text-black
+    [&_p]:!text-black
+    [&_h1]:!text-black
+    [&_h2]:!text-black
+    [&_h3]:!text-black
+    [&_h4]:!text-black
+    [&_h5]:!text-black
+    [&_h6]:!text-black
+  "
+>
+  <div class="prose">
+    {% include "patterns/atoms/text/headings.html" %}
+  </div>
+</div>
+
+<div
+  class="
+    bg-white text-black
+    [&_p]:!text-black
+    [&_h1]:!text-black
+    [&_h2]:!text-black
+    [&_h3]:!text-black
+    [&_h4]:!text-black
+    [&_h5]:!text-black
+    [&_h6]:!text-black
+  "
+>
+  <div class="prose">
+    {% include "patterns/atoms/text/headings.html" %}
+  </div>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/atoms/text/colors.yaml b/majak_uistyleguide/templates/patterns/atoms/text/colors.yaml
index 5acaf01edfdc361f0c5652437c3bc30db94a3a5a..aa8105bac9411dd7b0cc85ca8e35cf639b628dd3 100644
--- a/majak_uistyleguide/templates/patterns/atoms/text/colors.yaml
+++ b/majak_uistyleguide/templates/patterns/atoms/text/colors.yaml
@@ -1,4 +1,3 @@
 context:
   color_classes:
-    - "bg-black text-white [&_p]:text-white"
-    - "bg-pirati-yellow text-black [&_p]:text-black"
\ No newline at end of file
+    - ""
\ No newline at end of file