diff --git a/docs/_static/images/development/css-framework/callout-boxes.jpg b/docs/_static/images/development/css-framework/callout-boxes.jpg
new file mode 100644
index 00000000..55bdebb0
Binary files /dev/null and b/docs/_static/images/development/css-framework/callout-boxes.jpg differ
diff --git a/docs/development/custom/css-framework.md b/docs/development/custom/css-framework.md
new file mode 100644
index 00000000..d1848ab8
--- /dev/null
+++ b/docs/development/custom/css-framework.md
@@ -0,0 +1,42 @@
+# CSS Framework
+
+To establish a unified style language throughout Alliance Auth and Community Apps,
+Alliance Auth is providing its own CSS framework with a couple of CSS classes.
+
+## Callout-Boxes
+
+These are similar to the Bootstrap alert/notification boxes, but not as "loud".
+
+Callout-boxes need a base-class (`.aa-callout`) and a modifier-class (e.g.:
+`.aa-callout-info` for an info-box). Modifier classes are available for the usual
+Bootstrap alert levels "Success",  "Info", "Warning" and "Danger".
+
+![Alliance Auth Framework: Callout Boxes](/_static/images/development/callout-boxes.jpg "Alliance Auth Framework: Callout Boxes")
+
+### HTML
+
+```html
+<div class="aa-callout aa-callout-success">
+  <p>
+    This iy a success callout-box.
+  </p>
+</div>
+
+<div class="aa-callout aa-callout-info">
+  <p>
+    This iy a info callout-box.
+  </p>
+</div>
+
+<div class="aa-callout aa-callout-warning">
+  <p>
+    This iy a warning callout-box.
+  </p>
+</div>
+
+<div class="aa-callout aa-callout-danger">
+  <p>
+    This iy a danger callout-box.
+  </p>
+</div>
+```