diff --git a/src/back/jdd-components/heading/heading.css b/src/back/jdd-components/heading/heading.css
index beb2f30..9c4dbc5 100644
--- a/src/back/jdd-components/heading/heading.css
+++ b/src/back/jdd-components/heading/heading.css
@@ -23,4 +23,16 @@
 	&.heading--font-size-extra_large > * {
 		font-size: 64px;
 	}
+
+	&.heading--color-normal {
+		color: var(--color-brand-text-fg);
+	}
+
+	&.heading--color-accent1 {
+		color: var(--color-brand-accent);
+	}
+
+	&.heading--color-accent2 {
+		color: var(--color-brand-accent2);
+	}
 }
diff --git a/src/back/jdd-components/heading/heading.jdd.tsx b/src/back/jdd-components/heading/heading.jdd.tsx
index 59f7d58..a194cc9 100644
--- a/src/back/jdd-components/heading/heading.jdd.tsx
+++ b/src/back/jdd-components/heading/heading.jdd.tsx
@@ -3,7 +3,6 @@ import type { ComponentToHTMLArgs } from "@sealcode/jdd";
 import { Component, ComponentArguments, insert_nbsp } from "@sealcode/jdd";
 
 const component_arguments = {
-	title: new ComponentArguments.ShortText(),
 	level: new ComponentArguments.Enum(["h1", "h2", "h3", "h4", "h5", "h6"]),
 	font_size: new ComponentArguments.Enum([
 		"tiny",
@@ -12,6 +11,8 @@ const component_arguments = {
 		"large",
 		"extra_large",
 	]),
+	color: new ComponentArguments.Enum(["normal", "accent1", "accent2"]),
+	title: new ComponentArguments.ShortText(),
 } as const;
 
 export class Heading extends Component<typeof component_arguments> {
@@ -20,11 +21,18 @@ export class Heading extends Component<typeof component_arguments> {
 	}
 
 	async toHTML({
-		args: { title, level, font_size },
+		args: { title, level, font_size, color },
 		classes,
 	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
 		return (
-			<div class={["heading", `heading--font-size-${font_size}`, ...classes]}>
+			<div
+				class={[
+					"heading",
+					`heading--font-size-${font_size}`,
+					`heading--color-${color}`,
+					...classes,
+				]}
+			>
 				{`<${level}>${insert_nbsp(title)}</${level}>`}
 			</div>
 		);