diff --git a/package-lock.json b/package-lock.json
index dfaca32..b23c28c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
 				"@sealcode/file-manager": "^1.0.2",
 				"@sealcode/jdd": "^0.6.6",
 				"@sealcode/jdd-editor": "^0.1.14",
-				"@sealcode/sealgen": "^0.17.23",
+				"@sealcode/sealgen": "^0.17.24",
 				"@sealcode/simplemde": "^1.12.1",
 				"@sealcode/ts-predicates": "^0.6.2",
 				"@types/kill-port": "^2.0.0",
@@ -1003,9 +1003,9 @@
 			"integrity": "sha512-pDsGlk2KokQkwzsJDBUWJFDRpEoxxth6TMQGDJyCTmWnd1Vn+cQb5moXDKaf7cXnWb9Y6QtdNX/fPzM/3RH2Cg=="
 		},
 		"node_modules/@sealcode/sealgen": {
-			"version": "0.17.23",
-			"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.17.23.tgz",
-			"integrity": "sha512-zdJuITE/8t13X1TwwFKeV3AW7rwaCSkEW52KP4Hcoa73RYgsJ7tCstIM5v5X2YCVflb7udsE9Nd7wE7JEMU8rg==",
+			"version": "0.17.24",
+			"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.17.24.tgz",
+			"integrity": "sha512-xj3BTX2b3uFaO0Fj71inNY282Y96JiiCDFJF4dCmgWQu+yOLlzaVKF7p4bSi1CoNN9eHsvwXUEYKoRfvz8Q9GQ==",
 			"dependencies": {
 				"@koa/router": "^12.0.1",
 				"@sealcode/file-manager": "^1.0.2",
diff --git a/package.json b/package.json
index 4c84cb7..9510e0a 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
 		"@sealcode/file-manager": "^1.0.2",
 		"@sealcode/jdd": "^0.6.6",
 		"@sealcode/jdd-editor": "^0.1.14",
-		"@sealcode/sealgen": "^0.17.23",
+		"@sealcode/sealgen": "^0.17.24",
 		"@sealcode/simplemde": "^1.12.1",
 		"@sealcode/ts-predicates": "^0.6.2",
 		"@types/kill-port": "^2.0.0",
diff --git a/src/back/jdd-components/tekst/tekst.css b/src/back/jdd-components/tekst/tekst.css
index af21eb3..f1da48f 100644
--- a/src/back/jdd-components/tekst/tekst.css
+++ b/src/back/jdd-components/tekst/tekst.css
@@ -2,5 +2,19 @@
 	font-family: var(--font-long-text);
 	font-size: 16px;
 	line-height: 24px;
-	color: #0d4d69;
+
+	&.tekst--color-normal {
+		background-color: var(--color-brand-text-bg);
+		color: var(--color-brand-text-fg);
+	}
+
+	&.tekst--color-accent {
+		background-color: var(--color-brand-text-bg);
+		color: var(--color-brand-text-accent);
+	}
+
+	&.tekst--color-accent2 {
+		background-color: var(--color-brand-text-bg);
+		color: var(--color-brand-text-accent2);
+	}
 }
diff --git a/src/back/jdd-components/tekst/tekst.jdd.tsx b/src/back/jdd-components/tekst/tekst.jdd.tsx
index ce3dbee..7e9531d 100644
--- a/src/back/jdd-components/tekst/tekst.jdd.tsx
+++ b/src/back/jdd-components/tekst/tekst.jdd.tsx
@@ -8,6 +8,7 @@ import type {
 import { Component, ComponentArguments } from "@sealcode/jdd";
 
 const component_arguments = {
+	color: new ComponentArguments.Enum(["normal", "accent", "accent2"]),
 	content: new ComponentArguments.Markdown(),
 } as const;
 
@@ -24,13 +25,16 @@ export class Tekst extends Component<typeof component_arguments> {
 	}
 
 	toHTML({
-		args: { content },
+		args: { color, content },
 		classes,
 		jdd_context: { render_markdown, language },
 		index,
 	}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
 		return (
-			<div class={["tekst markdown", ...classes]} style={`--jdd-index: ${index}`}>
+			<div
+				class={["tekst markdown", ...classes, `tekst--color-${color}`]}
+				style={`--jdd-index: ${index}`}
+			>
 				{render_markdown(language, content)}
 			</div>
 		);