diff --git a/css/backoffice/README.md b/css/backoffice/README.md
index b6b369401..8887f1b4b 100644
--- a/css/backoffice/README.md
+++ b/css/backoffice/README.md
@@ -53,6 +53,7 @@ css/backoffice/
 |   ...                  # Etc…
 |
 |
+`- _shame.scss           # Shame file, should contain all the ugly hacks (https://sass-guidelin.es/#shame-file)
 `– main.scss             # Main Sass file
 ```
 
@@ -68,4 +69,5 @@ To avoid common errors, files should be imported in the final file in the follow
 - Components
 - Layout
 - Pages
-- Themes
\ No newline at end of file
+- Themes
+- Shame file
\ No newline at end of file
diff --git a/css/backoffice/_shame.scss b/css/backoffice/_shame.scss
new file mode 100644
index 000000000..feb9e1978
--- /dev/null
+++ b/css/backoffice/_shame.scss
@@ -0,0 +1,45 @@
+/*!
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+// ==========================================================================
+// $Shame
+// @see http://csswizardry.com/2013/04/shame-css/
+// Thanks https://github.com/heroheman/shepherd/blob/master/sass/_shame.scss
+// ==========================================================================
+
+// ==========================================================================
+// because hacks happen.
+//
+// be very specific about what each piece of code is doing, and
+// how to better fix it later
+// ==========================================================================
+
+// Try:  $ git blame _shame.scss
+
+// Rules:
+// ---------------
+//   1. If it’s a hack, it goes in _shame.scss.
+//   2. Document all hacks fully:
+//   3. What part of the codebase does it relate to?
+//   4. Why was this needed?
+//   5. How does this fix it?
+//   6. How might you fix it properly, given more time?
+//   7. Do not blame the developer; if they explained why they had to do it then their reasons are probably (hopefully) valid.
+//   8. Try and clean _shame.scss up when you have some down time.
+
+// Example:
+// ---------------
+// Nav specificity fix.
+
+// Someone used an ID in the header code (`#header a{}`) which trumps the
+// nav selectors (`.site-nav a{}`). Use !important to override it until I
+// have time to refactor the header stuff.
+
+// .site-nav a { color:#BADA55!important; }
+
+// N°2847 - Recolor svg illustrations with iTop's primary color
+.ibo-svg-illustration--container > svg *[fill="#6c63ff"]{
+	fill: $ibo-svg-illustration--fill;
+}
\ No newline at end of file
diff --git a/css/backoffice/base/_base.scss b/css/backoffice/base/_base.scss
index 503525e58..011376ba2 100644
--- a/css/backoffice/base/_base.scss
+++ b/css/backoffice/base/_base.scss
@@ -60,8 +60,4 @@ a{
 	&:active{
 		color: var(--ibo-hyperlink-color--on-active);
 	}
-}
-
-.ibo-svg-illustration--container>svg *[fill="#6c63ff"]{
-	fill: $ibo-svg-illustration--fill;
 }
\ No newline at end of file
diff --git a/css/backoffice/main.scss b/css/backoffice/main.scss
index b24de003a..fa1a70c45 100644
--- a/css/backoffice/main.scss
+++ b/css/backoffice/main.scss
@@ -24,3 +24,4 @@
 @import "pages/all";
 @import "application/all";
 @import "themes/all";
+@import "shame";