diff --git a/src/back/colors.ts b/src/back/colors.ts
index 26c38ce..98fdca0 100644
--- a/src/back/colors.ts
+++ b/src/back/colors.ts
@@ -7,13 +7,13 @@ export const colors: Record<string, Record<string, string>> = {
 		purple: "#B10DC9",
 		fuchsia: "#F012BE",
 		maroon: "#85144b",
-		red: "#ff4136",
+		red: "#fb2e38",
 		orange: "#ff851b",
 		yellow: "#ffdc00",
 		olive: "#3d9970",
-		green: "#2ecc40",
+		green: "#58fe54",
 		lime: "#01ff70",
-		black: "#111111",
+		black: "#1a1a1a",
 		gray: "#aaaaaa",
 	},
 };
@@ -31,15 +31,15 @@ colors.brand = {};
 // "text-accent2"     is same as above, but based on the second accent color
 // "text-on-accent"   - what color text should be when put on a background colored with accent color
 // "text-on-accent2"  - what color text should be when put on a background colored with accent2 color
-colors.brand["canvas"] = "#fff";
-colors.brand["text-bg"] = "#f6f6f6";
-colors.brand["text-fg"] = colors.basic!.black!;
-colors.brand["accent"] = "#5294A1";
-colors.brand["accent2"] = "#65397C";
+colors.brand["canvas"] = "#000";
+colors.brand["text-bg"] = colors.basic!.black!;
+colors.brand["text-fg"] = "#fff";
+colors.brand["accent"] = colors.basic!.red!;
+colors.brand["accent2"] = "#000";
 colors.brand["text-accent"] = colors.brand.accent!;
-colors.brand["text-accent2"] = colors.brand["accent2"]!;
+colors.brand["text-accent2"] = colors.basic!.green!;
 colors.brand["text-on-accent"] = "#fff";
-colors.brand["text-on-accent2"] = "#fff";
+colors.brand["text-on-accent2"] = colors.basic!.green!;
 
 // configure hue variance across the shades of the same main color.
 const hue_step = -4;
diff --git a/src/back/defaultHead.tsx b/src/back/defaultHead.tsx
index 6590b9a..7fc550a 100644
--- a/src/back/defaultHead.tsx
+++ b/src/back/defaultHead.tsx
@@ -56,7 +56,6 @@ export function defaultHead({
 			as="font"
 			type="font/woff2"
 		/>
-		<link rel="preload" href="/Exotc350DmBdEU-subset.ttf" as="font" type="font/ttf" />
 		<script defer src="/dist/bundle.js?v=${start_timestamp}"></script>
 		${metaImage ? `<meta property="og:image" content="${metaImage}" />` : ""}
 		${[
diff --git a/src/back/global_styles/vars.css b/src/back/global_styles/vars.css
index 32d3c97..1a9420a 100644
--- a/src/back/global_styles/vars.css
+++ b/src/back/global_styles/vars.css
@@ -40,6 +40,15 @@
 	--container-width: 50rem;
 
 	/* Fonts */
-	--font-sans-serif: "Inter UI", sans-serif;
+	--font-sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
+		helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
 	--font-slab-serif: "Zilla Slab", serif;
+	--font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman,
+		Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji,
+		Segoe UI Symbol;
+	--font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+
+	--font-headings: var(--font-sans-serif);
+	--font-short-text: var(--font-sans-serif);
+	--font-long-text: var(--font-serif);
 }
diff --git a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
index c463391..482f739 100644
--- a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
+++ b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
@@ -18,7 +18,7 @@
 }
 
 .autoscrolling-images__title {
-	font-family: Exotc350DmBdEU;
+	font-family: var(--font-headings);
 	font-size: 32px;
 	color: var(--color-brand-text-accent);
 	margin: 0;
diff --git a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
index 7886274..4904e29 100644
--- a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
+++ b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
@@ -126,7 +126,6 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
 
 		const radioButtonIdPrefix = "r" + Math.floor(100 + Math.random() * 900);
 		const radioButton_name = `autoscrolling-images__radio--${radioButtonIdPrefix}`;
-		const titleUpperCase = title.toUpperCase();
 
 		return (
 			<div
@@ -163,7 +162,7 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
 					data-carousel-id-prefix={radioButtonIdPrefix}
 				>
 					<div class="autoscrolling-images__title-wrapper">
-						<h2 class="autoscrolling-images__title">{titleUpperCase}</h2>
+						<h2 class="autoscrolling-images__title">{title}</h2>
 					</div>
 
 					<div class="autoscrolling-images__carousel-container">
diff --git a/src/back/jdd-components/dynamic-grid/dynamic-grid.css b/src/back/jdd-components/dynamic-grid/dynamic-grid.css
index e5d6636..e66372d 100644
--- a/src/back/jdd-components/dynamic-grid/dynamic-grid.css
+++ b/src/back/jdd-components/dynamic-grid/dynamic-grid.css
@@ -8,13 +8,13 @@
 		align-items: stretch;
 		list-style: none;
 		padding: 0;
-		border-bottom: 1px solid var(--color-brand-text-bg-62);
+		border-bottom: 1px solid var(--color-brand-text-bg);
 		margin-bottom: 36px;
 		.tabs-menu-button {
 			display: flex;
 			margin-bottom: -1px;
-			border: 1px solid var(--color-brand-text-fg-07);
-			background: var(--color-brand-text-fg-08);
+			border: 1px solid var(--color-brand-text-bg);
+			background: var(--color-brand-text-bg);
 			color: var(--color-brand-text-fg);
 			font-size: 12px;
 			transition: border 200ms, color 200ms;
@@ -55,7 +55,7 @@
 
 				.tile-content {
 					position: absolute;
-					background-color: var(--color-brand-text-fg-08);
+					background-color: var(--color-brand-text-bg);
 					width: 100%;
 					opacity: 0.9;
 					padding: 8px;
@@ -173,13 +173,13 @@
 				min-width: 240px;
 				line-height: 23px;
 				font-size: 16px;
-				&.dark {
-					background-color: var(--color-brand-accent-02);
-					--text-color: var(--color-brand-accent);
+				&.accent {
+					background-color: var(--color-brand-accent);
+					--text-color: var(--color-brand-text-on-accent);
 				}
-				&.bright {
-					background-color: var(--color-brand-text-bg);
-					--text-color: var(--color-brand-accent);
+				&.accent2 {
+					background-color: var(--color-brand-accent2);
+					--text-color: var(--color-brand-text-on-accent2);
 				}
 			}
 		}
diff --git a/src/back/jdd-components/dynamic-grid/dynamic-grid.jdd.tsx b/src/back/jdd-components/dynamic-grid/dynamic-grid.jdd.tsx
index 5a1608b..9db1e52 100644
--- a/src/back/jdd-components/dynamic-grid/dynamic-grid.jdd.tsx
+++ b/src/back/jdd-components/dynamic-grid/dynamic-grid.jdd.tsx
@@ -50,7 +50,7 @@ const component_arguments = {
 						"Button 2",
 						"Button 3",
 					]),
-					color: new ComponentArguments.Enum(["dark", "bright"] as const),
+					color: new ComponentArguments.Enum(["accent", "accent2"] as const),
 					link: new ComponentArguments.ShortText(),
 				})
 			),
@@ -143,10 +143,10 @@ export class DynamicGrid extends Component<typeof component_arguments> {
 			classes,
 			index,
 		}: ComponentToHTMLArgs<typeof component_arguments>,
-		tab_style_when_active = `border-bottom-color: #fff;
+		tab_style_when_active = `border-bottom-color: var(--color-brand-canvas);
 		border-top-color: var(--color-brand-accent-04);
-		background: #fff;
-		color: #222;`
+		background: var(--color-brand-canvas);
+		color: var(--color-brand-text-fg);`
 	): FlatTemplatable {
 		const { value: id } = generate_id.next();
 		return (
diff --git a/src/back/jdd-components/tekst/tekst.css b/src/back/jdd-components/tekst/tekst.css
index 7634cee..af21eb3 100644
--- a/src/back/jdd-components/tekst/tekst.css
+++ b/src/back/jdd-components/tekst/tekst.css
@@ -1,5 +1,5 @@
 .tekst.markdown {
-	font-family: Poppins, sans-serif;
+	font-family: var(--font-long-text);
 	font-size: 16px;
 	line-height: 24px;
 	color: #0d4d69;
diff --git a/src/colors.css b/src/colors.css
index 67f14ae..76ac725 100644
--- a/src/colors.css
+++ b/src/colors.css
@@ -1,6 +1,6 @@
 /* DO NOT EDIT! This file is automatically generated by sealgen */
 :root {
-	--color-brand-canvas: #fff;
+	--color-brand-canvas: #000;
 	--color-brand-canvas-00: #000000;
 	--color-brand-canvas-01: #1a1a1a;
 	--color-brand-canvas-02: #333333;
@@ -11,72 +11,72 @@
 	--color-brand-canvas-07: #b3b3b3;
 	--color-brand-canvas-08: #cccccc;
 	--color-brand-canvas-09: #e6e6e6;
-	--color-brand-text-bg: #f6f6f6;
-	--color-brand-text-bg-00: #0f0f0f;
-	--color-brand-text-bg-01: #292929;
-	--color-brand-text-bg-02: #424242;
-	--color-brand-text-bg-03: #5c5c5c;
-	--color-brand-text-bg-04: #757575;
-	--color-brand-text-bg-05: #8f8f8f;
-	--color-brand-text-bg-06: #a8a8a8;
-	--color-brand-text-bg-07: #c2c2c2;
-	--color-brand-text-bg-08: #dbdbdb;
-	--color-brand-text-bg-09: #f5f5f5;
-	--color-brand-text-fg: #111111;
-	--color-brand-text-fg-00: #121212;
-	--color-brand-text-fg-01: #2b2b2b;
-	--color-brand-text-fg-02: #454545;
-	--color-brand-text-fg-03: #5e5e5e;
-	--color-brand-text-fg-04: #787878;
-	--color-brand-text-fg-05: #919191;
-	--color-brand-text-fg-06: #ababab;
-	--color-brand-text-fg-07: #c4c4c4;
-	--color-brand-text-fg-08: #dedede;
-	--color-brand-text-fg-09: #f7f7f7;
-	--color-brand-accent: #5294a1;
-	--color-brand-accent-00: #0b141e;
-	--color-brand-accent-01: #193143;
-	--color-brand-accent-02: #294f65;
-	--color-brand-accent-03: #3b7087;
-	--color-brand-accent-04: #4e92a6;
-	--color-brand-accent-05: #71abb7;
-	--color-brand-accent-06: #95c1c6;
-	--color-brand-accent-07: #b8d5d6;
-	--color-brand-accent-08: #d9e8e7;
-	--color-brand-accent-09: #f9fbfb;
-	--color-brand-accent2: #65397c;
-	--color-brand-accent2-00: #110713;
-	--color-brand-accent2-01: #301637;
-	--color-brand-accent2-02: #4b2659;
-	--color-brand-accent2-03: #63387a;
-	--color-brand-accent2-04: #794c9a;
-	--color-brand-accent2-05: #8d69b0;
-	--color-brand-accent2-06: #a38dbf;
-	--color-brand-accent2-07: #bcafcf;
-	--color-brand-accent2-08: #d6d0e1;
-	--color-brand-accent2-09: #f1f0f5;
-	--color-brand-text-accent: #5294a1;
-	--color-brand-text-accent-00: #0b141e;
-	--color-brand-text-accent-01: #193143;
-	--color-brand-text-accent-02: #294f65;
-	--color-brand-text-accent-03: #3b7087;
-	--color-brand-text-accent-04: #4e92a6;
-	--color-brand-text-accent-05: #71abb7;
-	--color-brand-text-accent-06: #95c1c6;
-	--color-brand-text-accent-07: #b8d5d6;
-	--color-brand-text-accent-08: #d9e8e7;
-	--color-brand-text-accent-09: #f9fbfb;
-	--color-brand-text-accent2: #65397c;
-	--color-brand-text-accent2-00: #110713;
-	--color-brand-text-accent2-01: #301637;
-	--color-brand-text-accent2-02: #4b2659;
-	--color-brand-text-accent2-03: #63387a;
-	--color-brand-text-accent2-04: #794c9a;
-	--color-brand-text-accent2-05: #8d69b0;
-	--color-brand-text-accent2-06: #a38dbf;
-	--color-brand-text-accent2-07: #bcafcf;
-	--color-brand-text-accent2-08: #d6d0e1;
-	--color-brand-text-accent2-09: #f1f0f5;
+	--color-brand-text-bg: #1a1a1a;
+	--color-brand-text-bg-00: #000000;
+	--color-brand-text-bg-01: #1a1a1a;
+	--color-brand-text-bg-02: #333333;
+	--color-brand-text-bg-03: #4d4d4d;
+	--color-brand-text-bg-04: #666666;
+	--color-brand-text-bg-05: #808080;
+	--color-brand-text-bg-06: #999999;
+	--color-brand-text-bg-07: #b3b3b3;
+	--color-brand-text-bg-08: #cccccc;
+	--color-brand-text-bg-09: #e6e6e6;
+	--color-brand-text-fg: #fff;
+	--color-brand-text-fg-00: #000000;
+	--color-brand-text-fg-01: #1a1a1a;
+	--color-brand-text-fg-02: #333333;
+	--color-brand-text-fg-03: #4d4d4d;
+	--color-brand-text-fg-04: #666666;
+	--color-brand-text-fg-05: #808080;
+	--color-brand-text-fg-06: #999999;
+	--color-brand-text-fg-07: #b3b3b3;
+	--color-brand-text-fg-08: #cccccc;
+	--color-brand-text-fg-09: #e6e6e6;
+	--color-brand-accent: #fb2e38;
+	--color-brand-accent-00: #290e00;
+	--color-brand-accent-01: #5c1a00;
+	--color-brand-accent-02: #8f1f00;
+	--color-brand-accent-03: #c21d00;
+	--color-brand-accent-04: #f51400;
+	--color-brand-accent-05: #fe2d2a;
+	--color-brand-accent-06: #fc5f67;
+	--color-brand-accent-07: #fb939f;
+	--color-brand-accent-08: #fcc5cf;
+	--color-brand-accent-09: #fef5f8;
+	--color-brand-accent2: #000;
+	--color-brand-accent2-00: #000000;
+	--color-brand-accent2-01: #1a1a1a;
+	--color-brand-accent2-02: #333333;
+	--color-brand-accent2-03: #4d4d4d;
+	--color-brand-accent2-04: #666666;
+	--color-brand-accent2-05: #808080;
+	--color-brand-accent2-06: #999999;
+	--color-brand-accent2-07: #b3b3b3;
+	--color-brand-accent2-08: #cccccc;
+	--color-brand-accent2-09: #e6e6e6;
+	--color-brand-text-accent: #fb2e38;
+	--color-brand-text-accent-00: #290e00;
+	--color-brand-text-accent-01: #5c1a00;
+	--color-brand-text-accent-02: #8f1f00;
+	--color-brand-text-accent-03: #c21d00;
+	--color-brand-text-accent-04: #f51400;
+	--color-brand-text-accent-05: #fe2d2a;
+	--color-brand-text-accent-06: #fc5f67;
+	--color-brand-text-accent-07: #fb939f;
+	--color-brand-text-accent-08: #fcc5cf;
+	--color-brand-text-accent-09: #fef5f8;
+	--color-brand-text-accent2: #58fe54;
+	--color-brand-text-accent2-00: #001f0e;
+	--color-brand-text-accent2-01: #00521f;
+	--color-brand-text-accent2-02: #00852a;
+	--color-brand-text-accent2-03: #00b82e;
+	--color-brand-text-accent2-04: #00eb2b;
+	--color-brand-text-accent2-05: #1fff39;
+	--color-brand-text-accent2-06: #52ff5a;
+	--color-brand-text-accent2-07: #87fe85;
+	--color-brand-text-accent2-08: #bffeb9;
+	--color-brand-text-accent2-09: #eefeeb;
 	--color-brand-text-on-accent: #fff;
 	--color-brand-text-on-accent-00: #000000;
 	--color-brand-text-on-accent-01: #1a1a1a;
@@ -88,17 +88,17 @@
 	--color-brand-text-on-accent-07: #b3b3b3;
 	--color-brand-text-on-accent-08: #cccccc;
 	--color-brand-text-on-accent-09: #e6e6e6;
-	--color-brand-text-on-accent2: #fff;
-	--color-brand-text-on-accent2-00: #000000;
-	--color-brand-text-on-accent2-01: #1a1a1a;
-	--color-brand-text-on-accent2-02: #333333;
-	--color-brand-text-on-accent2-03: #4d4d4d;
-	--color-brand-text-on-accent2-04: #666666;
-	--color-brand-text-on-accent2-05: #808080;
-	--color-brand-text-on-accent2-06: #999999;
-	--color-brand-text-on-accent2-07: #b3b3b3;
-	--color-brand-text-on-accent2-08: #cccccc;
-	--color-brand-text-on-accent2-09: #e6e6e6;
+	--color-brand-text-on-accent2: #58fe54;
+	--color-brand-text-on-accent2-00: #001f0e;
+	--color-brand-text-on-accent2-01: #00521f;
+	--color-brand-text-on-accent2-02: #00852a;
+	--color-brand-text-on-accent2-03: #00b82e;
+	--color-brand-text-on-accent2-04: #00eb2b;
+	--color-brand-text-on-accent2-05: #1fff39;
+	--color-brand-text-on-accent2-06: #52ff5a;
+	--color-brand-text-on-accent2-07: #87fe85;
+	--color-brand-text-on-accent2-08: #bffeb9;
+	--color-brand-text-on-accent2-09: #eefeeb;
 	--color-basic-blue: #0074d9;
 	--color-basic-blue-00: #00040f;
 	--color-basic-blue-01: #001642;
@@ -154,17 +154,17 @@
 	--color-basic-maroon-07: #e283ca;
 	--color-basic-maroon-08: #eaaedf;
 	--color-basic-maroon-09: #f4d7f0;
-	--color-basic-red: #ff4136;
-	--color-basic-red-00: #050200;
-	--color-basic-red-01: #381600;
-	--color-basic-red-02: #6b2200;
-	--color-basic-red-03: #9e2800;
-	--color-basic-red-04: #d12600;
-	--color-basic-red-05: #ff2205;
-	--color-basic-red-06: #ff4238;
-	--color-basic-red-07: #fd6d70;
-	--color-basic-red-08: #fca1a9;
-	--color-basic-red-09: #fdd3d9;
+	--color-basic-red: #fb2e38;
+	--color-basic-red-00: #290e00;
+	--color-basic-red-01: #5c1a00;
+	--color-basic-red-02: #8f1f00;
+	--color-basic-red-03: #c21d00;
+	--color-basic-red-04: #f51400;
+	--color-basic-red-05: #fe2d2a;
+	--color-basic-red-06: #fc5f67;
+	--color-basic-red-07: #fb939f;
+	--color-basic-red-08: #fcc5cf;
+	--color-basic-red-09: #fef5f8;
 	--color-basic-orange: #ff851b;
 	--color-basic-orange-00: #1a1400;
 	--color-basic-orange-01: #4d3800;
@@ -198,17 +198,17 @@
 	--color-basic-olive-07: #9fd0b0;
 	--color-basic-olive-08: #c3dfcb;
 	--color-basic-olive-09: #e5f0e7;
-	--color-basic-green: #2ecc40;
-	--color-basic-green-00: #052915;
-	--color-basic-green-01: #0c5528;
-	--color-basic-green-02: #157f36;
-	--color-basic-green-03: #1fa841;
-	--color-basic-green-04: #2acf49;
-	--color-basic-green-05: #55d864;
-	--color-basic-green-06: #81df85;
-	--color-basic-green-07: #ace8ab;
-	--color-basic-green-08: #d6f2d4;
-	--color-basic-green-09: #fcfefb;
+	--color-basic-green: #58fe54;
+	--color-basic-green-00: #001f0e;
+	--color-basic-green-01: #00521f;
+	--color-basic-green-02: #00852a;
+	--color-basic-green-03: #00b82e;
+	--color-basic-green-04: #00eb2b;
+	--color-basic-green-05: #1fff39;
+	--color-basic-green-06: #52ff5a;
+	--color-basic-green-07: #87fe85;
+	--color-basic-green-08: #bffeb9;
+	--color-basic-green-09: #eefeeb;
 	--color-basic-lime: #01ff70;
 	--color-basic-lime-00: #000000;
 	--color-basic-lime-01: #003324;
@@ -220,17 +220,17 @@
 	--color-basic-lime-07: #6bfa96;
 	--color-basic-lime-08: #9efab3;
 	--color-basic-lime-09: #cffcd7;
-	--color-basic-black: #111111;
-	--color-basic-black-00: #121212;
-	--color-basic-black-01: #2b2b2b;
-	--color-basic-black-02: #454545;
-	--color-basic-black-03: #5e5e5e;
-	--color-basic-black-04: #787878;
-	--color-basic-black-05: #919191;
-	--color-basic-black-06: #ababab;
-	--color-basic-black-07: #c4c4c4;
-	--color-basic-black-08: #dedede;
-	--color-basic-black-09: #f7f7f7;
+	--color-basic-black: #1a1a1a;
+	--color-basic-black-00: #000000;
+	--color-basic-black-01: #1a1a1a;
+	--color-basic-black-02: #333333;
+	--color-basic-black-03: #4d4d4d;
+	--color-basic-black-04: #666666;
+	--color-basic-black-05: #808080;
+	--color-basic-black-06: #999999;
+	--color-basic-black-07: #b3b3b3;
+	--color-basic-black-08: #cccccc;
+	--color-basic-black-09: #e6e6e6;
 	--color-basic-gray: #aaaaaa;
 	--color-basic-gray-00: #121212;
 	--color-basic-gray-01: #2b2b2b;