{hex}
+
+
+
diff --git a/website/src/components/ColdarkHex.test.ts b/website/src/components/ColdarkHex.test.ts
new file mode 100644
index 0000000..aa6fbfe
--- /dev/null
+++ b/website/src/components/ColdarkHex.test.ts
@@ -0,0 +1,34 @@
+import { experimental_AstroContainer as AstroContainer } from "astro/container";
+import { describe, expect, it } from "vitest";
+
+import ColdarkHex from "./ColdarkHex.astro";
+
+describe("ColdarkHex", () => {
+ it("renders the hex value for a shared palette token", async () => {
+ // eslint-disable-next-line no-magic-numbers -- Self-explanatory.
+ expect.assertions(3);
+
+ const container = await AstroContainer.create();
+ const result = await container.renderToString(ColdarkHex, {
+ props: { token: "coldark01" },
+ });
+
+ expect(result).toContain(">#e3eaf2");
+ expect(result).toContain('style="--swatch: #e3eaf2;"');
+ expect(result).toContain('aria-hidden="true"');
+ });
+
+ it("renders the requested variant for an accent token", async () => {
+ // eslint-disable-next-line no-magic-numbers -- Self-explanatory.
+ expect.assertions(3);
+
+ const container = await AstroContainer.create();
+ const result = await container.renderToString(ColdarkHex, {
+ props: { token: "coldark13", variant: "dark" },
+ });
+
+ expect(result).toContain(">#6cb8e6");
+ expect(result).toContain('style="--swatch: #6cb8e6;"');
+ expect(result).not.toContain("#005a8e");
+ });
+});
diff --git a/website/src/components/Swatch.astro b/website/src/components/Swatch.astro
new file mode 100644
index 0000000..5b89186
--- /dev/null
+++ b/website/src/components/Swatch.astro
@@ -0,0 +1,52 @@
+---
+type Props = {
+ hex: string | string[];
+ decorative?: boolean;
+};
+
+const { hex, decorative = false } = Astro.props;
+const swatches = Array.isArray(hex) ? hex : [hex];
+
+if (swatches.length === 0) {
+ throw new Error("The `Swatch` component could not resolve any colors.");
+}
+
+const label =
+ swatches.length === 1
+ ? `Color swatch: ${swatches[0]}.`
+ : `Color swatches: ${swatches.join("; ")}.`;
+---
+
+
+ {
+ swatches.map((value) => (
+
+ ))
+ }
+
+
+
diff --git a/website/src/components/Swatch.test.ts b/website/src/components/Swatch.test.ts
new file mode 100644
index 0000000..22a4112
--- /dev/null
+++ b/website/src/components/Swatch.test.ts
@@ -0,0 +1,62 @@
+import { experimental_AstroContainer as AstroContainer } from "astro/container";
+import { describe, expect, it } from "vitest";
+
+import Swatch from "./Swatch.astro";
+
+describe("Swatch", () => {
+ it("renders an accessible label for a single hex color", async () => {
+ // eslint-disable-next-line no-magic-numbers -- Self-explanatory.
+ expect.assertions(3);
+
+ const container = await AstroContainer.create();
+ const result = await container.renderToString(Swatch, {
+ props: { hex: "#e3eaf2" },
+ });
+
+ expect(result).toContain('role="img"');
+ expect(result).toContain('aria-label="Color swatch: #e3eaf2."');
+ expect(result).toContain('style="--swatch: #e3eaf2;"');
+ });
+
+ it("renders multiple swatches when hex is an array", async () => {
+ // eslint-disable-next-line no-magic-numbers -- Self-explanatory.
+ expect.assertions(4);
+
+ const container = await AstroContainer.create();
+ const result = await container.renderToString(Swatch, {
+ props: { hex: ["#e3eaf2", "#111b27"] },
+ });
+
+ expect(result).toContain('role="img"');
+ expect(result).toContain('aria-label="Color swatches: #e3eaf2; #111b27."');
+ expect(result).toContain('style="--swatch: #e3eaf2;"');
+ expect(result).toContain('style="--swatch: #111b27;"');
+ });
+
+ it("hides decorative swatches from assistive technology", async () => {
+ // eslint-disable-next-line no-magic-numbers -- Self-explanatory.
+ expect.assertions(4);
+
+ const container = await AstroContainer.create();
+ const result = await container.renderToString(Swatch, {
+ props: { hex: "#c22f2e", decorative: true },
+ });
+
+ expect(result).toContain('aria-hidden="true"');
+ expect(result).not.toContain('role="img"');
+ expect(result).not.toContain("aria-label=");
+ expect(result).toContain('style="--swatch: #c22f2e;"');
+ });
+
+ it("throws when no hex values are provided", async () => {
+ expect.assertions(1);
+
+ const container = await AstroContainer.create();
+
+ await expect(
+ container.renderToString(Swatch, {
+ props: { hex: [] },
+ })
+ ).rejects.toThrow("The `Swatch` component could not resolve any colors.");
+ });
+});
diff --git a/website/src/content.config.ts b/website/src/content.config.ts
new file mode 100644
index 0000000..7fbcf2c
--- /dev/null
+++ b/website/src/content.config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from "astro:content";
+import { docsLoader } from "@astrojs/starlight/loaders";
+import { docsSchema } from "@astrojs/starlight/schema";
+
+export const collections = {
+ docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+};
diff --git a/website/src/content/docs/about.mdx b/website/src/content/docs/about.mdx
new file mode 100644
index 0000000..73d0d17
--- /dev/null
+++ b/website/src/content/docs/about.mdx
@@ -0,0 +1,30 @@
+---
+title: About Coldark
+description: Learn why Coldark exists, how its palette was designed, and what shaped the project.
+sidebar:
+ order: 2
+---
+
+Coldark is a blue-grey theme available in two variants, Cold and Dark, with ports for editors, terminals, browsers, and other developer tools. The core theme and its ports are [open-source](https://github.com/ArmandPhilippot/coldark) under the MIT License.
+
+## Why Coldark?
+
+I created Coldark because I couldn't find a Visual Studio Code theme that felt comfortable to use for long periods. I don't need extremely high contrast, but after spending hours in front of a screen, I wanted colors that stayed readable without causing eye strain.
+
+Most themes I tried either had too little contrast, an incomplete palette, or colors that simply didn't feel right to me. I also wanted a theme that offered both a light variant and a dark variant, so I could switch depending on the time of day, the lighting, or just my mood. I'm mostly a light-theme person during the day, but I still like switching to a dark theme in the evening.
+
+Once I was happy with the VS Code port, I wanted the same visual language across the rest of my tools, from the terminal to the browser. The goal was a single palette that could adapt to different environments while remaining coherent.
+
+## Why 16 colors?
+
+Although I started with a VS Code theme, I wanted the palette to work in environments with more limited color support. That led me to draw inspiration from [base16](https://github.com/chriskempson/base16) and [Nord](https://www.nordtheme.com/).
+
+Keeping the core palette to 16 colors makes it easier to maintain a consistent visual language across both variants, including ports that only support a small number of colors.
+
+Coldark is not strictly limited to 16 colors, though. Some ports require extra colors for opacity, layering, UI states, or subtle interface effects, but those colors are derived from the core palette.
+
+## Where does the name come from?
+
+I didn't have a name in mind when I started the project. I was probably also influenced by the TV show "Poldark", which I was watching at the time.
+
+I wanted a theme with a light palette that didn't feel too white. The blue-grey tones of the light variant felt cold to me, and "Coldark" seemed like a fun portmanteau of "cold" and "dark". It was short, memorable, and fit the project's mood well enough that I kept it.
diff --git a/website/src/content/docs/colors.mdx b/website/src/content/docs/colors.mdx
new file mode 100644
index 0000000..c148dae
--- /dev/null
+++ b/website/src/content/docs/colors.mdx
@@ -0,0 +1,144 @@
+---
+title: Colors
+description: Reference for the shared Coldark shades and the accent palettes used by the Cold and Dark variants.
+sidebar:
+ order: 3
+---
+
+import ColdarkHex from "../../components/ColdarkHex.astro";
+
+## Palette structure
+
+Coldark uses three palettes:
+
+- a shared set of blue-grey shades used by both variants
+- a light accent palette for **Coldark Cold**
+- a dark accent palette for **Coldark Dark**
+
++ Shared neutrals, ordered from the lightest shade to the darkest. Their + denominations stay fixed in both variants. +
+