diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index 8e9b86452..ed7950f98 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -606,3 +606,29 @@ section {
 .notification__content {
   color: var(--color-font);
 }
+
+
+
+
+/*
+  "Heated" element.
+  Set custom property "--hotness" to a value from 0 to 1 to turn
+  the element's background to a color on a gradient from green to red.
+
+  TBD:
+  - move to a proper place
+  - think about font-weight...
+
+  Example:
+  <div .heated style="--hotness: 0.2">Lorem ipsum
+*/
+
+.heated {
+  --hotness: 0;
+  --red: calc(var(--hotness) * 200);
+  --green: calc(255 - calc(var(--hotness) * 255));
+  --opacity: calc(calc(var(--red) / 600) + 0.1);
+
+  font-weight: var(--weight, 600);
+  background-color: rgba(var(--red), var(--green), 0, var(--opacity));
+}