diff --git a/CHANGELOG.md b/CHANGELOG.md
index efbf122d..ba0b0fd1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,7 +15,7 @@ _This release is scheduled to be released on 2021-04-01._
 - Added German translation for "PRECIP".
 - Added first test for Alert module.
 - Added support for `dateFormat` when not using `timeFormat: "absolute"`
-- Added custom-properties in css for improved styling experience, see `custom.css.sample` file
+- Added custom-properties in css of core and modules for improved styling experience, see `custom.css.sample` file
 
 ### Updated
 
diff --git a/css/custom.css.sample b/css/custom.css.sample
index 59142c17..091462f7 100644
--- a/css/custom.css.sample
+++ b/css/custom.css.sample
@@ -3,10 +3,10 @@
  * MIT Licensed.
  */
 
-// Uncomment and adjust accordingly if you want to import another font from the google-fonts-api:
-// @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap');
+/* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */
+/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */
 
-// Change color and fonts here:
+/* Change color and fonts here: */
 :root {
   --color-text: #999;
   --color-text-dimmed: #666;
diff --git a/css/main.css b/css/main.css
index ba6e1d89..bb5c694d 100644
--- a/css/main.css
+++ b/css/main.css
@@ -50,27 +50,27 @@ body {
 }
 
 .xsmall {
-  font-size: 0.667rem;
-  line-height: 1.4;
+  font-size: 0.75rem;
+  line-height: 1.275;
 }
 
 .small {
   font-size: 1rem;
-  line-height: 1.4;
+  line-height: 1.25;
 }
 
 .medium {
   font-size: 1.5rem;
-  line-height: 1.4;
+  line-height: 1.225;
 }
 
 .large {
-  font-size: 2.25rem;
+  font-size: 3.25rem;
   line-height: 1;
 }
 
 .xlarge {
-  font-size: 3.375rem;
+  font-size: 3.75rem;
   line-height: 1;
   letter-spacing: -3px;
 }
@@ -108,11 +108,11 @@ header {
   font-size: 15px;
   font-family: var(--font-primary), Arial, Helvetica, sans-serif;
   font-weight: 400;
-  border-bottom: 1px solid #666;
+  border-bottom: 1px solid var(--color-text-dimmed);
   line-height: 15px;
   padding-bottom: 5px;
   margin-bottom: 10px;
-  color: #999;
+  color: var(--color-text);
 }
 
 sup {
diff --git a/modules/default/alert/notificationFx.css b/modules/default/alert/notificationFx.css
index 0782d464..39faacf7 100644
--- a/modules/default/alert/notificationFx.css
+++ b/modules/default/alert/notificationFx.css
@@ -6,7 +6,6 @@
   line-height: 1.4;
   margin-bottom: 10px;
   z-index: 1;
-  color: black;
   font-size: 70%;
   position: relative;
   display: table;
@@ -15,17 +14,17 @@
   border-width: 1px;
   border-radius: 5px;
   border-style: solid;
-  border-color: #666;
+  border-color: var(--color-text-dimmed);
 }
 
 .ns-alert {
   border-style: solid;
-  border-color: #fff;
+  border-color: var(--color-text-bright);
   padding: 17px;
   line-height: 1.4;
   margin-bottom: 10px;
   z-index: 3;
-  color: white;
+  color: var(--color-text-bright);
   font-size: 70%;
   position: fixed;
   text-align: center;
diff --git a/modules/default/clock/clock_styles.css b/modules/default/clock/clock_styles.css
index 839336be..e8436acc 100644
--- a/modules/default/clock/clock_styles.css
+++ b/modules/default/clock/clock_styles.css
@@ -17,7 +17,7 @@
   width: 6px;
   height: 6px;
   margin: -3px 0 0 -3px;
-  background: white;
+  background: var(--color-text-bright);
   border-radius: 3px;
   content: "";
   display: block;
@@ -31,7 +31,7 @@
   left: 50%;
   margin: -2px 0 -2px -25%; /* numbers much match negative length & thickness */
   padding: 2px 0 2px 25%; /* indicator length & thickness */
-  background: white;
+  background: var(--color-text-bright);
   transform-origin: 100% 50%;
   border-radius: 3px 0 0 3px;
 }
@@ -44,7 +44,7 @@
   left: 50%;
   margin: -35% -2px 0; /* numbers must match negative length & thickness */
   padding: 35% 2px 0; /* indicator length & thickness */
-  background: white;
+  background: var(--color-text-bright);
   transform-origin: 50% 100%;
   border-radius: 3px 0 0 3px;
 }
@@ -57,7 +57,7 @@
   left: 50%;
   margin: -38% -1px 0 0; /* numbers must match negative length & thickness */
   padding: 38% 1px 0 0; /* indicator length & thickness */
-  background: #888;
+  background: var(--color-text);
   transform-origin: 50% 100%;
 }
 
diff --git a/package-lock.json b/package-lock.json
index 8318e339..55ea421c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2315,9 +2315,9 @@
 			}
 		},
 		"eslint-plugin-prettier": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.1.tgz",
-			"integrity": "sha512-Rq3jkcFY8RYeQLgk2cCwuc0P7SEFwDravPhsJZOQ5N4YI4DSg50NyqJ/9gdZHzQlHf8MvafSesbNJCcP/FF6pQ==",
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz",
+			"integrity": "sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==",
 			"dev": true,
 			"requires": {
 				"prettier-linter-helpers": "^1.0.0"
diff --git a/package.json b/package.json
index 682d4f52..085ee4af 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
 		"chai-as-promised": "^7.1.1",
 		"eslint-config-prettier": "^8.2.0",
 		"eslint-plugin-jsdoc": "^32.3.0",
-		"eslint-plugin-prettier": "^3.3.1",
+		"eslint-plugin-prettier": "^3.4.0",
 		"express-basic-auth": "^1.2.0",
 		"husky": "^4.3.8",
 		"jsdom": "^16.5.3",