diff --git a/source/_static/css/breeze.css b/source/_static/css/breeze.css
new file mode 100644
--- /dev/null
+++ b/source/_static/css/breeze.css
@@ -0,0 +1,24 @@
+/* color definitions */
+.iconred {
+    color: #da4453;
+}
+.plasmablue {
+    color: #3daee9;
+}
+.noblefir {
+    color: #27ae60;
+}
+
+
+.flex {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+    .flex > * {
+        margin-right: 18px;
+    }
+
+    .flex > *:last-child {
+        margin-right: 0;
+    }
diff --git a/source/conf.py b/source/conf.py
--- a/source/conf.py
+++ b/source/conf.py
@@ -174,5 +174,19 @@
 .. |designicon| image:: /img/DesignerIcon.svg
                 :width: 32px
                 :height: 32px
+
+.. |br| raw:: html
+
+   <br />
+
+"""
+
+rst_prolog = """
+.. role:: iconred
+.. role:: plasmablue
+.. role:: noblefir
 """
 
+# add css file
+def setup(app):
+    app.add_stylesheet('css/breeze.css')
diff --git a/source/layout/alignment.rst b/source/layout/alignment.rst
--- a/source/layout/alignment.rst
+++ b/source/layout/alignment.rst
@@ -34,15 +34,17 @@
    .. container::
 
       .. figure:: /img/Form_Align_KDE3.qml.png
+         :scale: 80%
 
-         *BAD*
+         :iconred:`BAD` |br|
          KDE3 form alignment
 
    .. container::
 
       .. figure:: /img/Form_Align_KDE5.qml.png
+         :scale: 80%
 
-         *GOOD*
+         :noblefir:`GOOD` |br|
          Plasma 5 form alignment
 
 Controls
@@ -59,15 +61,17 @@
    .. container::
 
       .. figure:: /img/Form_Align_OSX.qml.png
+         :scale: 80%
 
-         *BAD*
+         :iconred:`BAD` |br| 
          OSX form alignment
 
    .. container::
 
       .. figure:: /img/Form_Align_KDE5.qml.png
+         :scale: 80%
 
-         *GOOD*
+         :noblefir:`GOOD` |br|
          Plasma 5 form alignment
 
 -  Left align controls over multiple groups (in case of right-to-left
@@ -80,24 +84,27 @@
    .. container::
 
       .. figure:: /img/Form_Align_NO.qml.png
+         :scale: 80%
 
-         *BAD*
+         :iconred:`BAD` |br|
          no alignment over controls
 
    .. container::
 
       .. figure:: /img/Form_Align_YES.qml.png
+         :scale: 80%
 
-         *GOOD*
+         :noblefir:`GOOD` |br|
          left aligned controls
 
 -  Keep track on label size; avoid big differences in text length (even
    after translation), that could result in much white space for
    multiple aligned controls.
 
    .. figure:: /img/Form_Align_Long.qml.png
+      :scale: 80%
 
-      *BAD*
+      :iconred:`BAD` |br|
       Avoid very long captions
 
 -  In some cases it may be useful to visually separate groups of related