diff --git a/CHANGELOG.md b/CHANGELOG.md
index 589bf7d..55f1d51 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,35 @@
 # Changelog
 
+## 2.7.0
+
+### Changed: the primary colour is blue (PROD-2966)
+
+The primary colour changes from purple to blue-600 (`#1A56DB`). This is a visible change for every
+consumer.
+
+-   **Primary buttons** (`Button`, `Capsule`, `ButtonDropdown`): fill `primary-600`, hover
+    `primary-700`, pressed `primary-800`, disabled `primary-300`. The loader spinner is `primary-600`.
+-   **Secondary buttons**: `primary-50` fill, `primary-400` border, `primary-700` text, `primary-100`
+    hover.
+-   **Checked and selected states** (`Checkbox`, `Radio`, `ToggleSwitch`, `ComboBox` options):
+    `primary-600`.
+-   **Focus**: blue-600 everywhere. Rings are `primary-600` (`Radio` was `purple-500`), and text
+    inputs, selects and comboboxes focus with a `primary-600` border. `TextArea` now focuses with a
+    single border and no ring, like the other inputs.
+-   `Badge` with `color="primary"` is blue. `color="secondary"` stays violet.
+
+### Added: `primary-*` as CSS variables, and a Tailwind preset (PROD-2967)
+
+-   `primary-50` to `primary-950` are now CSS variables (`--primary-*`) in `dist/tailwind.css`, and
+    components use `primary-*` instead of raw `purple-*` and `violet-*` classes. `primary-50` was a
+    grey and `primary-950` didn't exist.
+-   The theme now lives in `tailwind.preset.js`, exported as `@agility/plenum-ui/tailwind.preset`, so
+    a consumer's own classes match Plenum's. See "Colours" in the README.
+
+### Fixed: `blue-300`
+
+`blue-300` was `#8FB2`, which browsers read as a nearly transparent green. It is now `#8FB2FB`.
+
 ## 2.6.3
 
 ### Fixed: `TextArea` placeholder colour
diff --git a/README.md b/README.md
index da60f3a..d66e27e 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,24 @@ import "@agility/plenum-ui/dist/lib/tailwind.css"
 
 Make sure to add any additional styles before these two import statements to prevent overwriting the Plenum styling.
 
+## Colours
+
+The primary colour is blue-600 (`#1A56DB`). Its scale, `primary-50` to `primary-950`, is a set of CSS
+variables (`--primary-50` … `--primary-950`) defined in `dist/tailwind.css`. Components use `primary-*`
+for anything that means "primary" (buttons, focus, checked and selected states), never a palette name
+such as `blue-*` or `purple-*`, so a future colour change is an edit to the preset, not to every
+component.
+
+To build your own Tailwind classes with the same colours, load Plenum's preset in your
+`tailwind.config.js`:
+
+```js
+module.exports = {
+	presets: [require("@agility/plenum-ui/tailwind.preset")],
+	content: ["./src/**/*.{js,ts,jsx,tsx}"]
+}
+```
+
 ## Installation
 
 You can install the Plenum library using npm or yarn:
diff --git a/app/globals.css b/app/globals.css
index 54479ff..1b04d5d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -5,7 +5,7 @@
 @layer {
 	* {
 		/* set the default outline color on focus */
-		outline-color: #7933dd;
+		outline-color: rgb(var(--primary-600));
 	}
 	/* Thin - 100 */
 	@font-face {
diff --git a/package.json b/package.json
index fcaf422..f2b2d6e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.6.3",
+	"version": "2.7.0",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
diff --git a/stories/atoms/badges/Badge.tsx b/stories/atoms/badges/Badge.tsx
index be8246e..be89b9c 100644
--- a/stories/atoms/badges/Badge.tsx
+++ b/stories/atoms/badges/Badge.tsx
@@ -31,7 +31,7 @@ const Badge: React.FC<IBadgeProps> = ({
 	actionButton
 }) => {
 	const badgeStyles = cn(
-		"text-sm flex items-center py-[2px] focus:ring-1 focus:ring-purple-600 outline-0",
+		"text-sm flex items-center py-[2px] focus:ring-1 focus:ring-primary-600 outline-0",
 		{
 			"rounded-[3px]": variant === "rounded",
 			"rounded-full px-[6px]": variant === "pill",
@@ -43,7 +43,7 @@ const Badge: React.FC<IBadgeProps> = ({
 			"pr-3": !removeButton && size === "lg",
 			"pr-[10px]": !removeButton && size === "sm",
 			"gap-x-[6px]": statusDot || removeButton || loading,
-			"bg-purple-100 text-purple-800 ": color === "primary",
+			"bg-primary-100 text-primary-800 ": color === "primary",
 			"bg-violet-100 text-violet-800": color === "secondary",
 			"bg-pink-100 text-pink-800": color === "pink",
 			"bg-red-100 text-red-800": color === "danger",
@@ -54,7 +54,7 @@ const Badge: React.FC<IBadgeProps> = ({
 		}
 	)
 	const statusDotStyles = cn("rounded-full h-[6px] p-[1px] w-[6px]", {
-		"bg-purple-400 text-purple-400": color === "primary",
+		"bg-primary-400 text-primary-400": color === "primary",
 		"bg-violet-400 text-violet-400": color === "secondary",
 		"bg-pink-400 text-pink-400": color === "pink",
 		"bg-red-400 text-red-400": color === "danger",
@@ -64,9 +64,9 @@ const Badge: React.FC<IBadgeProps> = ({
 		"bg-gray-400 text-gray-400": color === "basic"
 	})
 	const removeButtonStyles: ClassNameWithAutocomplete = cn(
-		"h-4 w-4 group-focus-within:ring-1 group-focus-within:ring-purple-600 rounded-full outline-0",
+		"h-4 w-4 group-focus-within:ring-1 group-focus-within:ring-primary-600 rounded-full outline-0",
 		{
-			"text-purple-400": color === "primary",
+			"text-primary-400": color === "primary",
 			"text-violet-400": color === "secondary",
 			"text-pink-400": color === "pink",
 			"text-red-400": color === "danger",
@@ -78,7 +78,7 @@ const Badge: React.FC<IBadgeProps> = ({
 	)
 
 	const loaderStyles = cn("h-4 w-4 rounded-full border-2 animate-spin", {
-		"border-purple-400 !border-r-purple-200": color === "primary",
+		"border-primary-400 !border-r-primary-200": color === "primary",
 		"border-violet-400 !border-r-violet-200": color === "secondary",
 		"border-pink-400 !border-r-pink-200": color === "pink",
 		"border-red-400 !border-r-red-200": color === "danger",
diff --git a/stories/atoms/buttons/Button/Button.tsx b/stories/atoms/buttons/Button/Button.tsx
index 26290c1..14587fd 100644
--- a/stories/atoms/buttons/Button/Button.tsx
+++ b/stories/atoms/buttons/Button/Button.tsx
@@ -62,7 +62,7 @@ const _Button = (
 	const applyMinWidth = !!label && size !== "xs" && size !== "sm";
 	let iconStyles = cn(
 		{ "text-white h-5 w-5 stroke-[1.5]": actionType === "primary" || actionType === "danger" },
-		{ "text-purple-700 h-5 w-5 stroke-[1.5]": actionType === "secondary" },
+		{ "text-primary-700 h-5 w-5 stroke-[1.5]": actionType === "secondary" },
 		{ "text-gray-400 h-5 w-5 stroke-[1.5]": actionType === "alternative" },
 		{ "text-transparent-black-40 h-5 w-5 stroke-[1.5]": actionType === "warning" }
 	);
@@ -73,7 +73,7 @@ const _Button = (
 
 	const loaderColors = cn(
 		{ "border-r-white": actionType === "primary" },
-		{ "border-purple-200 border-r-purple-700": actionType === "secondary" },
+		{ "border-primary-200 border-r-primary-700": actionType === "secondary" },
 		{ "border-gray-200 border-r-gray-700": actionType === "alternative" },
 		{ "border-red-800 border-r-white": actionType === "danger" },
 		{ "border-yellow-800 border-r-transparent-black-70": actionType === "warning" }
@@ -93,7 +93,7 @@ const _Button = (
 				title: asLink.title,
 				className: twMerge(
 					cn(
-						"inline-flex items-center justify-center gap-x-2  font rounded-[3px] outline-none focus-visible:ring-1 focus-visible:ring-purple-600 transition-all",
+						"inline-flex items-center justify-center gap-x-2  font rounded-[3px] outline-none focus-visible:ring-1 focus-visible:ring-primary-600 transition-all",
 						{ "min-w-[130px]": applyMinWidth },
 						{ "w-full": fullWidth },
 						{ "px-[11px] py-[7px] text-xs": resolvedSize === "xs" },
@@ -102,11 +102,11 @@ const _Button = (
 						{ "px-[17px] py-[9px] text-base": resolvedSize === "lg" },
 						{ "px-[25px] py-[13px] text-base": resolvedSize === "xl" },
 						{
-							"bg-violet-800 text-white focus-visible:ring-offset-1 focus-visible:ring-offset-white hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:hover:bg-violet-400 disabled:focus-visible:ring-0":
+							"bg-primary-600 text-white focus-visible:ring-offset-1 focus-visible:ring-offset-white hover:border-primary-700 hover:bg-primary-700 disabled:bg-primary-300 disabled:hover:bg-primary-300 disabled:focus-visible:ring-0":
 								actionType === "primary"
 						},
 						{
-							" bg-purple-50  border-purple-400 border hover:border-purple-500 text-purple-700 hover:bg-purple-100   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:hover:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
+							" bg-primary-50  border-primary-400 border hover:border-primary-500 text-primary-700 hover:bg-primary-100   focus-within:bg-primary-100  focus-visible:bg-primary-100 focus:bg-primary-100 active:bg-primary-100 disabled:bg-primary-50 disabled:hover:bg-primary-50 disabled:text-primary-300 disabled:focus-visible:ring-0":
 								actionType === "secondary"
 						},
 						{
@@ -176,7 +176,7 @@ const _Button = (
 			type="button"
 			className={twMerge(
 				cn(
-					" px-4 py-2 inline-flex items-center justify-center gap-x-2 rounded outline-none focus-visible:ring-1 focus-visible:ring-purple-600 transition-all h-9",
+					" px-4 py-2 inline-flex items-center justify-center gap-x-2 rounded outline-none focus-visible:ring-1 focus-visible:ring-primary-600 transition-all h-9",
 					{ "min-w-[130px]": applyMinWidth },
 					{ "w-full": fullWidth },
 					{ "text-xs": resolvedSize === "xs" },
@@ -185,11 +185,11 @@ const _Button = (
 					{ "text-base": resolvedSize === "lg" },
 					{ "text-base": resolvedSize === "xl" },
 					{
-						"bg-violet-800 text-white focus-visible:ring-offset-1 focus-visible:ring-offset-white hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:hover:bg-violet-400 disabled:focus-visible:ring-0":
+						"bg-primary-600 text-white focus-visible:ring-offset-1 focus-visible:ring-offset-white hover:border-primary-700 hover:bg-primary-700 disabled:bg-primary-300 disabled:hover:bg-primary-300 disabled:focus-visible:ring-0":
 							actionType === "primary"
 					},
 					{
-						" bg-purple-50  border-purple-400 border hover:border-purple-500 text-purple-700 hover:bg-purple-100   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:hover:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
+						" bg-primary-50  border-primary-400 border hover:border-primary-500 text-primary-700 hover:bg-primary-100   focus-within:bg-primary-100  focus-visible:bg-primary-100 focus:bg-primary-100 active:bg-primary-100 disabled:bg-primary-50 disabled:hover:bg-primary-50 disabled:text-primary-300 disabled:focus-visible:ring-0":
 							actionType === "secondary"
 					},
 					{
diff --git a/stories/atoms/buttons/Button/tests/Button.test.tsx b/stories/atoms/buttons/Button/tests/Button.test.tsx
index bae84ea..d494fb2 100644
--- a/stories/atoms/buttons/Button/tests/Button.test.tsx
+++ b/stories/atoms/buttons/Button/tests/Button.test.tsx
@@ -19,14 +19,14 @@ describe("<Button>", () => {
 			render(<Button {...defaultProps} />);
 
 			const buttonElement = screen.getByRole("button");
-			expect(buttonElement).toHaveClass("bg-violet-800");
+			expect(buttonElement).toHaveClass("bg-primary-600");
 		});
 
 		it("renders with actionType as secondary", () => {
 			render(<Button {...defaultProps} actionType="secondary" />);
 
 			const buttonElement = screen.getByRole("button");
-			expect(buttonElement).toHaveClass("bg-purple-50");
+			expect(buttonElement).toHaveClass("bg-primary-50");
 		});
 
 		it("renders with actionType as alternative", () => {
diff --git a/stories/atoms/buttons/Capsule/Capsule.tsx b/stories/atoms/buttons/Capsule/Capsule.tsx
index 75e49a0..921178a 100644
--- a/stories/atoms/buttons/Capsule/Capsule.tsx
+++ b/stories/atoms/buttons/Capsule/Capsule.tsx
@@ -39,12 +39,12 @@ const Capsule = ({
 }: ICapsuleProps) => {
 	const iconStyles = cn(
 		{ "text-white": actionType === "primary" || actionType === "danger" },
-		{ "text-purple-700": actionType === "secondary" },
+		{ "text-primary-700": actionType === "secondary" },
 		{ "text-gray-700": actionType === "alternative" }
 	)
 	const loaderColors = cn(
 		{ "border-r-white": actionType === "primary" },
-		{ "border-purple-200 border-r-purple-700": actionType === "secondary" },
+		{ "border-primary-200 border-r-primary-700": actionType === "secondary" },
 		{ "border-gray-200 border-r-gray-700": actionType === "alternative" },
 		{ "border-red-800 border-r-white": actionType === "danger" }
 	)
@@ -54,7 +54,7 @@ const Capsule = ({
 		<button
 			type="button"
 			className={cn(
-				"inline-flex items-center justify-center gap-x-2 text-sm  p-2 outline-none focus-visible:ring-1 focus-visible:ring-purple-600 transition-all",
+				"inline-flex items-center justify-center gap-x-2 text-sm  p-2 outline-none focus-visible:ring-1 focus-visible:ring-primary-600 transition-all",
 				{ "w-full": fullWidth },
 				{ "px-[11px] py-[7px] text-xs rounded-[15px]": size === "xs" },
 				{ "px-[15px] py-[9px] text-sm rounded-[17px]": size === "sm" },
@@ -62,10 +62,10 @@ const Capsule = ({
 				{ "px-[17px] py-[9px] text-base rounded-[21px]": size === "lg" },
 				{ "px-[25px] py-[13px] text-base rounded-[25px]": size === "xl" },
 				{
-					"bg-purple-600 text-white focus-visible:ring-offset-1 focus-visible:ring-offset-white hover:border-purple-700 hover:bg-purple-700 ": actionType === "primary"
+					"bg-primary-600 text-white focus-visible:ring-offset-1 focus-visible:ring-offset-white hover:border-primary-700 hover:bg-primary-700 ": actionType === "primary"
 				},
 				{
-					" bg-purple-50 text-purple-700 hover:bg-purple-200   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100":
+					" bg-primary-50 text-primary-700 hover:bg-primary-200   focus-within:bg-primary-100  focus-visible:bg-primary-100 focus:bg-primary-100 active:bg-primary-100":
 						actionType === "secondary"
 				},
 				{
diff --git a/stories/atoms/loaders/Loader.tsx b/stories/atoms/loaders/Loader.tsx
index 1e458a0..d64ee43 100644
--- a/stories/atoms/loaders/Loader.tsx
+++ b/stories/atoms/loaders/Loader.tsx
@@ -14,7 +14,7 @@ const Loader: React.FC<ILoaderProps> = ({ size = "lg", variant = "primary", clas
 					"rounded-full inline-block animate-spinSlower m-auto",
 					size === "lg" ? "w-10 h-10 border-2" : size === "md" ? "w-5 h-5 border" : "w-4 h-4 border",
 					variant === "primary"
-						? "border-transparent-black-20 border-r-violet-800"
+						? "border-transparent-black-20 border-r-primary-600"
 						: variant === "black"
 						? "border-transparent-black-20 border-r-black"
 						: "border-transparent-white-50 border-r-white",
diff --git a/stories/molecules/inputs/FormControlStates/FormControlStates.stories.tsx b/stories/molecules/inputs/FormControlStates/FormControlStates.stories.tsx
index c58b722..d0e8eae 100644
--- a/stories/molecules/inputs/FormControlStates/FormControlStates.stories.tsx
+++ b/stories/molecules/inputs/FormControlStates/FormControlStates.stories.tsx
@@ -18,7 +18,7 @@ import DropdownWithMultiSelect from "@/stories/organisms/DropdownWithMultiSelect
 /**
  * Every single-line form control side by side, to check that they share one 36px height and one
  * focus language:
- *  - text inputs, selects and triggers focus with a single 1px violet-700 border (keyboard and mouse);
+ *  - text inputs, selects and triggers focus with a single 1px primary-600 border (keyboard and mouse);
  *  - buttons, checkboxes, radios and toggles show a 1px ring for keyboard focus only
  *    (on the edge for outlined controls; with a 1px white offset on filled buttons).
  */
@@ -396,7 +396,7 @@ export const InputNextToButton: Story = {
 };
 
 /**
- * Keyboard focus on the control picked in Controls. Text inputs and selects get a 1px violet-700 border;
+ * Keyboard focus on the control picked in Controls. Text inputs and selects get a 1px primary-600 border;
  * buttons, checkboxes, radios and toggles get a 1px ring
  * (with a 1px white offset on filled buttons). You can also press Tab in the canvas.
  */
@@ -407,7 +407,7 @@ export const KeyboardFocus: Story = {
 };
 
 /**
- * Mouse focus on the control picked in Controls. Text inputs and selects still get the 1px violet-700
+ * Mouse focus on the control picked in Controls. Text inputs and selects still get the 1px primary-600
  * border; buttons, checkboxes, radios and toggles show no ring. You can also click a control in the canvas.
  */
 export const MouseFocus: Story = {
diff --git a/stories/molecules/inputs/InputField/InputField.tsx b/stories/molecules/inputs/InputField/InputField.tsx
index 6ef6318..8faedbd 100644
--- a/stories/molecules/inputs/InputField/InputField.tsx
+++ b/stories/molecules/inputs/InputField/InputField.tsx
@@ -88,7 +88,7 @@ const InputField = (
 					// Focus is a single 1px border colour change. The `!` keeps @tailwindcss/forms' focus ring and
 					// blue border from winning when a consumer's forms styles load after plenum's stylesheet.
 					"focus:outline-none focus:!ring-0",
-					{ "focus:!border-violet-700": !isInvalid && !isReadonly },
+					{ "focus:!border-primary-600": !isInvalid && !isReadonly },
 					// Disabled: dim the value and placeholder so the field reads as inactive.
 					"disabled:cursor-not-allowed disabled:text-gray-400 disabled:placeholder:text-gray-300",
 					isError ? "!border-red-600 !text-red-600" : "",
diff --git a/stories/molecules/inputs/InputField/tests/InputField.test.tsx b/stories/molecules/inputs/InputField/tests/InputField.test.tsx
index 2e10575..8dba38a 100644
--- a/stories/molecules/inputs/InputField/tests/InputField.test.tsx
+++ b/stories/molecules/inputs/InputField/tests/InputField.test.tsx
@@ -33,9 +33,9 @@ describe("<InputField>", () => {
 			expect(getInput()).toHaveClass("focus:!ring-0", "focus:outline-none");
 		});
 
-		it("shows a violet-700 border on focus", () => {
+		it("shows a primary-600 border on focus", () => {
 			render(<InputField {...defaultProps} />);
-			expect(getInput()).toHaveClass("focus:!border-violet-700");
+			expect(getInput()).toHaveClass("focus:!border-primary-600");
 		});
 
 		it("never adds a focus ring width", () => {
@@ -46,19 +46,19 @@ describe("<InputField>", () => {
 		it("keeps the error border on focus", () => {
 			render(<InputField {...defaultProps} isError />);
 			expect(getInput()).toHaveClass("!border-red-600");
-			expect(getInput()).not.toHaveClass("focus:!border-violet-700");
+			expect(getInput()).not.toHaveClass("focus:!border-primary-600");
 			expect(getInput()).toHaveAttribute("aria-invalid", "true");
 		});
 
 		it("keeps the error border on focus when a wrapper signals the error with aria-invalid", () => {
 			render(<InputField {...defaultProps} aria-invalid />);
-			expect(getInput()).not.toHaveClass("focus:!border-violet-700");
+			expect(getInput()).not.toHaveClass("focus:!border-primary-600");
 		});
 
 		it("keeps the readonly border on focus", () => {
 			render(<InputField {...defaultProps} isReadonly />);
 			expect(getInput()).toHaveClass("!border-gray-400");
-			expect(getInput()).not.toHaveClass("focus:!border-violet-700");
+			expect(getInput()).not.toHaveClass("focus:!border-primary-600");
 		});
 	});
 });
diff --git a/stories/molecules/inputs/NestedInputButton/NestedInputButton.tsx b/stories/molecules/inputs/NestedInputButton/NestedInputButton.tsx
index adf52f9..125bae0 100644
--- a/stories/molecules/inputs/NestedInputButton/NestedInputButton.tsx
+++ b/stories/molecules/inputs/NestedInputButton/NestedInputButton.tsx
@@ -25,7 +25,7 @@ const NestedInputButton: React.FC<INestedInputButtonProps> = ({
 	const buttonStyle = cn(
 		// h-9 matches InputField so the input and add-on form one flush 36px row. Keyboard focus uses the
 		// same 1px violet border as the input; z-10 lifts it over the input's overlapping edge.
-		"relative flex h-9 items-center space-x-2 px-4 py-0 leading-5 border border-gray-300 text-sm focus:outline-none focus-visible:z-10 focus-visible:!border-violet-700",
+		"relative flex h-9 items-center space-x-2 px-4 py-0 leading-5 border border-gray-300 text-sm focus:outline-none focus-visible:z-10 focus-visible:!border-primary-600",
 		{
 			"rounded-r text-gray-500 -ml-px": align === "right"
 		},
diff --git a/stories/molecules/inputs/TextInput/TextInput.tsx b/stories/molecules/inputs/TextInput/TextInput.tsx
index f01cc4b..967cb46 100644
--- a/stories/molecules/inputs/TextInput/TextInput.tsx
+++ b/stories/molecules/inputs/TextInput/TextInput.tsx
@@ -135,7 +135,7 @@ const TextInput = (
 					"w-full rounded border px-3 text-sm font-normal leading-5 hover:border-gray-500 placeholder:text-gray-500 ",
 					{ "border-gray-300": !isFocus && !isError && !isDisabled },
 					{
-						"!border-violet-700": isFocus && !isError && !isDisabled
+						"!border-primary-600": isFocus && !isError && !isDisabled
 					},
 					{
 						"!border-red-500": isError
diff --git a/stories/molecules/inputs/checkbox/Checkbox.tsx b/stories/molecules/inputs/checkbox/Checkbox.tsx
index b50c617..701a90d 100644
--- a/stories/molecules/inputs/checkbox/Checkbox.tsx
+++ b/stories/molecules/inputs/checkbox/Checkbox.tsx
@@ -53,9 +53,9 @@ const Checkbox: FC<ICheckboxProps> = ({
 	if (!id) id = `cb-${uniqueID}`;
 
 	const checkboxStyles = cn(
-		"rounded-sm border-gray-300 text-sm font-normal leading-5 text-purple-600",
+		"rounded-sm border-gray-300 text-sm font-normal leading-5 text-primary-600",
 		// @tailwindcss/forms rings checkboxes on :focus (so also on click); show the ring for keyboard focus only.
-		"focus:outline-none focus:!ring-0 focus:!ring-offset-0 focus-visible:!ring-1 focus-visible:!ring-purple-600",
+		"focus:outline-none focus:!ring-0 focus:!ring-offset-0 focus-visible:!ring-1 focus-visible:!ring-primary-600",
 		{ "border-red-500 shadow-none": isError }
 	);
 	const wrapperStyles = cn(
diff --git a/stories/molecules/inputs/combobox/ComboBox.tsx b/stories/molecules/inputs/combobox/ComboBox.tsx
index f3f2b84..6b1e426 100644
--- a/stories/molecules/inputs/combobox/ComboBox.tsx
+++ b/stories/molecules/inputs/combobox/ComboBox.tsx
@@ -112,7 +112,7 @@ const Combobox = <T extends Record<string, unknown>>({
 							"h-9 w-full rounded border py-0 pl-3 pr-10 text-sm leading-5",
 							// Same focus treatment as InputField: a single 1px violet border, no ring.
 							"focus:outline-none focus:!ring-0",
-							isError ? "!border-red-500" : "border-gray-300 focus:!border-violet-700",
+							isError ? "!border-red-500" : "border-gray-300 focus:!border-primary-600",
 							"disabled:cursor-not-allowed disabled:text-gray-400 disabled:placeholder:text-gray-300"
 						)}
 						onChange={(event) => setQuery(event.target.value)}
@@ -141,7 +141,7 @@ const Combobox = <T extends Record<string, unknown>>({
 								className={({ active }) =>
 									classNames(
 										"relative cursor-default select-none py-2 pl-3 pr-9",
-										active ? "bg-purple-600 text-white" : "text-gray-900"
+										active ? "bg-primary-600 text-white" : "text-gray-900"
 									)
 								}
 							>
@@ -155,7 +155,7 @@ const Combobox = <T extends Record<string, unknown>>({
 											<span
 												className={classNames(
 													"absolute inset-y-0 right-0 flex items-center pr-4",
-													active ? "text-white" : "text-purple-600"
+													active ? "text-white" : "text-primary-600"
 												)}
 											>
 												<DynamicIcon icon="IconCheck" className="h-5 w-5" aria-hidden="true" />
diff --git a/stories/molecules/inputs/radio/Radio.tsx b/stories/molecules/inputs/radio/Radio.tsx
index ae09bc3..0b3dd1a 100644
--- a/stories/molecules/inputs/radio/Radio.tsx
+++ b/stories/molecules/inputs/radio/Radio.tsx
@@ -44,9 +44,9 @@ const Radio: React.FC<IRadioProps> = ({
 	if (!name) name = id;
 
 	const checboxStyles = cn(
-		"h-4 w-4 text-purple-600 border-gray-300",
+		"h-4 w-4 text-primary-600 border-gray-300",
 		// @tailwindcss/forms rings radios on :focus (so also on click); show the ring for keyboard focus only.
-		"focus:outline-none focus:!ring-0 focus:!ring-offset-0 focus-visible:!ring-1 focus-visible:!ring-purple-500",
+		"focus:outline-none focus:!ring-0 focus:!ring-offset-0 focus-visible:!ring-1 focus-visible:!ring-primary-600",
 		{
 			"border-red-500 shadow-none": isError
 		}
diff --git a/stories/molecules/inputs/select/Select.tsx b/stories/molecules/inputs/select/Select.tsx
index dd60abd..3946ed6 100644
--- a/stories/molecules/inputs/select/Select.tsx
+++ b/stories/molecules/inputs/select/Select.tsx
@@ -144,10 +144,10 @@ const Select: React.FC<ISelectProps> = ({
 						as="div"
 						className={cn(
 							// The border lives on this wrapper, so it carries the 36px height (matching Button's h-9)
-							// and the focus style: a single 1px border, the same violet-700 as InputField.
+							// and the focus style: a single 1px border, the same primary-600 as InputField.
 							"relative h-9 w-full cursor-default overflow-hidden rounded border bg-white text-left shadow-sm",
 							"focus-within:ring-0",
-							{ "border-red-500": isError, "border-gray-300 focus-within:border-violet-700": !isError }
+							{ "border-red-500": isError, "border-gray-300 focus-within:border-primary-600": !isError }
 						)}
 					>
 						{({ open }) => (
diff --git a/stories/molecules/inputs/tests/FormControlConsistency.test.tsx b/stories/molecules/inputs/tests/FormControlConsistency.test.tsx
index c0ad693..06be00a 100644
--- a/stories/molecules/inputs/tests/FormControlConsistency.test.tsx
+++ b/stories/molecules/inputs/tests/FormControlConsistency.test.tsx
@@ -21,7 +21,7 @@ import DropdownWithMultiSelect from "@/stories/organisms/DropdownWithMultiSelect
 /**
  * Cross-component guard for the form-control consistency rules:
  *  - every single-line input-like control is a fixed 36px (h-9), matching the default Button;
- *  - text-like inputs and select triggers focus with a single 1px violet-700 border and no ring;
+ *  - text-like inputs and select triggers focus with a single 1px primary-600 border and no ring;
  *  - buttons and other non-text controls show a 1px focus ring for keyboard focus (focus-visible) only;
  *    filled buttons add a 1px white offset so the ring stays visible against the fill.
  */
@@ -126,19 +126,19 @@ describe("text-like inputs and select triggers focus with a single 1px violet bo
 	])("%s input: violet border, ring forced to 0", (_, renderControl) => {
 		const { container } = render(renderControl());
 		const input = container.querySelector("input");
-		expect(input).toHaveClass("focus:!ring-0", "focus:outline-none", "focus:!border-violet-700");
+		expect(input).toHaveClass("focus:!ring-0", "focus:outline-none", "focus:!border-primary-600");
 	});
 
 	it("TextInputSelect's native select: violet border, ring forced to 0", () => {
 		render(<TextInputSelect type="text" value="" inputOptions={selectOptions} />);
-		expect(screen.getByRole("combobox")).toHaveClass("focus:!ring-0", "focus:outline-none", "focus:!border-violet-700");
+		expect(screen.getByRole("combobox")).toHaveClass("focus:!ring-0", "focus:outline-none", "focus:!border-primary-600");
 	});
 
 	it("Select wrapper: focus-within violet border, no ring", () => {
 		render(<Select id="sel" options={selectOptions} />);
 		const input = screen.getByRole("combobox");
 		expect(input).toHaveClass("focus:!ring-0");
-		expect(input.parentElement).toHaveClass("focus-within:border-violet-700", "focus-within:ring-0");
+		expect(input.parentElement).toHaveClass("focus-within:border-primary-600", "focus-within:ring-0");
 		expect(input.parentElement).not.toHaveClass("focus-within:ring-1");
 	});
 
@@ -149,7 +149,7 @@ describe("text-like inputs and select triggers focus with a single 1px violet bo
 	])("%s in error keeps its red border on focus", (_, renderControl) => {
 		const { container } = render(renderControl());
 		const input = container.querySelector("input");
-		expect(input).not.toHaveClass("focus:!border-violet-700");
+		expect(input).not.toHaveClass("focus:!border-primary-600");
 	});
 
 	it("TextInput in error marks the input aria-invalid", () => {
@@ -161,7 +161,7 @@ describe("text-like inputs and select triggers focus with a single 1px violet bo
 		render(<Select id="sel" options={selectOptions} isError />);
 		const wrapper = screen.getByRole("combobox").parentElement;
 		expect(wrapper).toHaveClass("border-red-500");
-		expect(wrapper).not.toHaveClass("focus-within:border-violet-700");
+		expect(wrapper).not.toHaveClass("focus-within:border-primary-600");
 	});
 
 	it("NestedInputButton and the multi-select trigger use the violet border for keyboard focus", () => {
@@ -171,8 +171,8 @@ describe("text-like inputs and select triggers focus with a single 1px violet bo
 				<DropdownWithMultiSelect label="Filters" options={[]} />
 			</>
 		);
-		expect(screen.getByRole("button", { name: "Edit" })).toHaveClass("focus-visible:!border-violet-700");
-		expect(screen.getByRole("button", { name: /Filters/ })).toHaveClass("focus-visible:border-violet-700");
+		expect(screen.getByRole("button", { name: "Edit" })).toHaveClass("focus-visible:!border-primary-600");
+		expect(screen.getByRole("button", { name: /Filters/ })).toHaveClass("focus-visible:border-primary-600");
 	});
 });
 
@@ -182,7 +182,7 @@ describe("buttons and toggles ring on keyboard focus only", () => {
 		(actionType) => {
 			render(<Button label="Save" actionType={actionType} />);
 			const button = screen.getByRole("button");
-			expect(button).toHaveClass("focus-visible:ring-1", "focus-visible:ring-purple-600");
+			expect(button).toHaveClass("focus-visible:ring-1", "focus-visible:ring-primary-600");
 			expect(button.className.split(/\s+/).filter((c) => NON_KEYBOARD_RING.test(c))).toEqual([]);
 		}
 	);
@@ -235,7 +235,7 @@ describe("buttons and toggles ring on keyboard focus only", () => {
 		);
 		const [main, trigger] = screen.getAllByRole("button");
 		for (const half of [main, trigger]) {
-			expect(half).toHaveClass("focus-visible:ring-1", "focus-visible:ring-purple-600");
+			expect(half).toHaveClass("focus-visible:ring-1", "focus-visible:ring-primary-600");
 			expect(half.className.split(/\s+/).filter((c) => NON_KEYBOARD_RING.test(c))).toEqual([]);
 		}
 	});
diff --git a/stories/molecules/inputs/textArea/TextArea.tsx b/stories/molecules/inputs/textArea/TextArea.tsx
index 6284e9d..9e880e2 100644
--- a/stories/molecules/inputs/textArea/TextArea.tsx
+++ b/stories/molecules/inputs/textArea/TextArea.tsx
@@ -91,7 +91,7 @@ const Textarea: React.FC<ITextareaProps> = ({
 				id={id}
 				cols={cols}
 				className={cn(
-					"peer block w-full rounded placeholder:text-gray-500 focus:border-purple-500 focus:ring-purple-500 sm:text-sm",
+					"peer block w-full rounded placeholder:text-gray-500 focus:border-primary-600 focus:ring-0 sm:text-sm",
 					{ "border-gray-300 ": !isError },
 					{
 						"border-red-500 outline-red-500 focus:ring-red-500": isError
@@ -128,7 +128,7 @@ const Textarea: React.FC<ITextareaProps> = ({
 					id={id}
 					cols={cols}
 					className={cn(
-						"block w-full rounded placeholder:text-gray-500 focus:border-purple-500 focus:ring-purple-500 sm:text-sm",
+						"block w-full rounded placeholder:text-gray-500 focus:border-primary-600 focus:ring-0 sm:text-sm",
 						{ "border-gray-300 ": !isError },
 						{
 							"border-red-500 outline-red-500 focus:ring-red-500": isError
diff --git a/stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx b/stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx
index a050ead..2081238 100644
--- a/stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx
+++ b/stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx
@@ -52,8 +52,8 @@ const ToggleSwitch: React.FC<IToggleSwitchProps> = ({
 				}}
 				className={cn(
 					{ "w-9 h-4 transition-all": variant === "short", " h-6 w-11": variant === "base" },
-					checked && disabled ? "bg-purple-200" : checked ? "bg-purple-600" : "bg-gray-200",
-					"relative inline-flex items-center rounded-full focus:outline-none focus-visible:ring-1 focus-visible:ring-purple-600"
+					checked && disabled ? "bg-primary-200" : checked ? "bg-primary-600" : "bg-gray-200",
+					"relative inline-flex items-center rounded-full focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-600"
 				)}
 				disabled={disabled}
 			>
diff --git a/stories/organisms/ButtonDropdown/ButtonDropdown.tsx b/stories/organisms/ButtonDropdown/ButtonDropdown.tsx
index c01f95d..984e8be 100644
--- a/stories/organisms/ButtonDropdown/ButtonDropdown.tsx
+++ b/stories/organisms/ButtonDropdown/ButtonDropdown.tsx
@@ -27,8 +27,8 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({
 	className
 }) => {
 	const iconTextColours = {
-		primary: dropDown.disabled ? "text-gray-300" : "text-violet-100",
-		secondary: dropDown.disabled ? "text-gray-400" : "text-purple-700",
+		primary: dropDown.disabled ? "text-gray-300" : "text-primary-100",
+		secondary: dropDown.disabled ? "text-gray-400" : "text-primary-700",
 		alternative: dropDown.disabled ? "text-gray-500" : "text-gray-700"
 	};
 
@@ -62,9 +62,9 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({
 					className={cn(
 						"w-[1px] rt",
 						button.actionType === "primary"
-							? "bg-violet-700 text-violet-100 hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:focus-visible:ring-0"
+							? "bg-primary-700 text-primary-100 hover:border-primary-700 hover:bg-primary-700 disabled:bg-primary-300 disabled:focus-visible:ring-0"
 							: "",
-						button.actionType === "secondary" ? "bg-purple-200 " : "",
+						button.actionType === "secondary" ? "bg-primary-200 " : "",
 						button.actionType === "alternative" ? "bg-gray-300" : ""
 					)}
 				></div>
@@ -79,10 +79,10 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({
 									"h-5 w-5 stroke-1 disabled:!bg-gray-50 disabled:focus-visible:ring-0",
 									{
 										"text-white": button.actionType === "primary",
-										"text-purple-300": dropDown.disabled && button.actionType === "secondary",
+										"text-primary-300": dropDown.disabled && button.actionType === "secondary",
 										"text-gray-300": dropDown.disabled && button.actionType === "alternative",
 
-										"text-purple-700": !dropDown.disabled && button.actionType === "secondary",
+										"text-primary-700": !dropDown.disabled && button.actionType === "secondary",
 										"text-gray-700": !dropDown.disabled && button.actionType === "alternative"
 									},
 									dropDown.iconClassname
@@ -93,20 +93,20 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({
 					buttonClassname: cn(
 						"flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
 						// Focus ring for the trigger only, matching Button's ring style (1px, no offset). !outline-none
-						// beats the outline-purple-500 in the Dropdown's defaultClassNames (plain cn, no twMerge).
+						// beats the outline-primary-600 in the Dropdown's defaultClassNames (plain cn, no twMerge).
 						// relative keeps it in the same paint phase as the (relative) button, so its ring's
 						// left edge isn't painted under the button; z-10 on focus lifts it fully on top.
-						"!outline-none focus-visible:ring-1 focus-visible:ring-purple-600 relative focus-visible:z-10",
+						"!outline-none focus-visible:ring-1 focus-visible:ring-primary-600 relative focus-visible:z-10",
 						button.actionType === "primary"
 							? cn(
-									"border-violet-700 bg-violet-800 focus-visible:ring-offset-1 focus-visible:ring-offset-white !text-white  hover:border-violet-700 hover:bg-violet-700 active:!border-violet-800 active:bg-violet-800 fill-white",
-									"disabled:bg-violet-400 disabled:text-white disabled:hover:none disabled:active:bg-violet-400 disabled:border-violet-400"
+									"border-primary-600 bg-primary-600 focus-visible:ring-offset-1 focus-visible:ring-offset-white !text-white  hover:border-primary-700 hover:bg-primary-700 active:!border-primary-800 active:bg-primary-800 fill-white",
+									"disabled:bg-primary-300 disabled:text-white disabled:hover:none disabled:active:bg-primary-300 disabled:border-primary-300"
 							  )
 							: "",
 						button.actionType === "secondary"
 							? cn(
-									"border-purple-400 bg-purple-50 text-purple-700   hover:bg-purple-100 active:bg-purple-300 fill-purple-700",
-									"disabled:bg-purple-50 disabled:text-grey-50 disabled:hover:none disabled:active:bg-purple-50 "
+									"border-primary-400 bg-primary-50 text-primary-700   hover:bg-primary-100 active:bg-primary-300 fill-primary-700",
+									"disabled:bg-primary-50 disabled:text-grey-50 disabled:hover:none disabled:active:bg-primary-50 "
 							  )
 							: "",
 						button.actionType === "alternative"
@@ -126,7 +126,7 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({
 					...(dropDown as IDropdownProps)
 				}}
 			/>
-			<div className="hidden !bg-purple-100 !text-purple-600 transition-all hover:bg-purple-200 focus:bg-purple-300" />
+			<div className="hidden !bg-primary-100 !text-primary-600 transition-all hover:bg-primary-200 focus:bg-primary-300" />
 		</div>
 	);
 };
diff --git a/stories/organisms/DropdownComponent/DropdownComponent.tsx b/stories/organisms/DropdownComponent/DropdownComponent.tsx
index 19ae25a..97f542d 100644
--- a/stories/organisms/DropdownComponent/DropdownComponent.tsx
+++ b/stories/organisms/DropdownComponent/DropdownComponent.tsx
@@ -66,7 +66,7 @@ export const defaultClassNames = {
 		"group flex font-sans  cursor-pointer items-center px-3 py-1 text-sm transition-all hover:bg-gray-100 hover:text-gray-900 justify-between gap-4 ",
 	activeItemClassname: "block px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 hover:text-gray-900",
 	buttonClassname:
-		"py-[2px] flex items-center  rounded outline-purple-500 transition-all text-gray-400 hover:text-gray-600 ",
+		"py-[2px] flex items-center  rounded outline-primary-600 transition-all text-gray-400 hover:text-gray-600 ",
 	iconClassname: "ml-1 h-5 w-6 stroke-1",
 	iconSpacingClassname: "flex items-center gap-x-2",
 	dividerClassname: "border-b border-b-gray-100"
diff --git a/stories/organisms/DropdownWithMultiSelect/DropdownWithMultiSelect.tsx b/stories/organisms/DropdownWithMultiSelect/DropdownWithMultiSelect.tsx
index 8b95390..3be1885 100644
--- a/stories/organisms/DropdownWithMultiSelect/DropdownWithMultiSelect.tsx
+++ b/stories/organisms/DropdownWithMultiSelect/DropdownWithMultiSelect.tsx
@@ -18,7 +18,7 @@ interface Props {
 const DropdownWithMultiSelect = ({ label, options }: Props) => {
 	return (
 		<Popover className="group">
-			<PopoverButton className="flex h-9 items-center justify-between gap-4 text-sm leading-5 py-0 px-4 rounded-[3px] border border-gray-300 bg-white focus:outline-none focus-visible:border-violet-700">
+			<PopoverButton className="flex h-9 items-center justify-between gap-4 text-sm leading-5 py-0 px-4 rounded-[3px] border border-gray-300 bg-white focus:outline-none focus-visible:border-primary-600">
 				{label}
 				<DynamicIcon
 					icon="IconChevronDown"
diff --git a/stories/organisms/TextInputSelect/InputSelect.tsx b/stories/organisms/TextInputSelect/InputSelect.tsx
index 8f76186..30ab5e9 100644
--- a/stories/organisms/TextInputSelect/InputSelect.tsx
+++ b/stories/organisms/TextInputSelect/InputSelect.tsx
@@ -41,7 +41,7 @@ export const InputSelect: FC<InputSelectProps> = ({
 				"relative z-10 inline-flex h-9 items-center space-x-2 border border-gray-300 bg-white px-4 py-0 pr-7 text-sm leading-5",
 				// Same focus treatment as InputField: a single 1px violet border, no ring.
 				"focus:outline-none focus:!ring-0",
-				isError ? "border-red-500" : "focus:!border-violet-700",
+				isError ? "border-red-500" : "focus:!border-primary-600",
 				align === "right"
 					? "-ml-px rounded-r border-l-white text-gray-700"
 					: align === "left"
diff --git a/tailwind.config.js b/tailwind.config.js
index bd76650..23a577a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,9 @@
+const plenumPreset = require("./tailwind.preset");
+
+// The theme lives in tailwind.preset.js so consumers can load the same one.
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+	presets: [plenumPreset],
 	mode: "development",
 
 	content: [
@@ -33,384 +37,5 @@ module.exports = {
 			pattern:
 				/^(bg|text|border(-(t|r|b|l))?)-((gray)|(red)|(orange)|(yellow)|(blue)|(light-blue)|(cyan)|(green)|(purple)|(teal)|(violet)|(pink)|(rose))-(50|100|200|300|400|500|600|700|800|900)|(mx|my|m|px|py|p)-\d.$/
 		}
-	],
-	theme: {
-		extend: {
-			fontFamily: {
-				sans: ["TTInterphasesPro", "sans-serif"]
-			},
-			backgroundImage: (theme) => ({
-				"label-gradient-focus": "linear-gradient(to top, #FFF 10px, transparent 10px)",
-				"label-gradient-idle": "linear-gradient(to top, #FFF 10px, transparent 10px)"
-			}),
-			gridTemplateColumns: {
-				// Simple 16 column grid
-				mainContainer: "max-content 1fr 1fr"
-			},
-			gridTemplateRows: {
-				// Simple 16 column grid
-				header: "max-content 1fr 1fr"
-			},
-			colors: {
-				"neutral-50": "#F7F7F7",
-				"neutral-100": "#F2F2F2",
-				"neutral-200": "#E5E7EB",
-				"neutral-300": "#D1D5DB",
-				"neutral-400": "#9CA3aF",
-				"neutral-500": "#6B7280",
-				"neutral-600": "#4B5563",
-				"neutral-700": "#374151",
-				"neutral-800": "#1F2937",
-				"neutral-900": "#111827",
-				"neutral-950": "#030712",
-
-				"warm-25": "#FDFCFA",
-				"warm-50": "#FAF9F7",
-				"warm-100": "#F5F4F1",
-				"warm-200": "#EFEDE8",
-				"warm-300": "#E5E2DB",
-
-				"primary-50": "#F7F7F7",
-				"primary-100": "#EDE9FE",
-				"primary-200": "#DDD6FE",
-				"primary-300": "#C4B5FD",
-				"primary-400": "#A78BFA",
-				"primary-500": "#8B5CF6",
-				"primary-600": "#7C3AED",
-				"primary-700": "#6D28D9",
-				"primary-800": "#5B21B6",
-				"primary-900": "#4C1D95",
-
-				"secondary-50": "#FFFAEA",
-				"secondary-100": "#FFF5D4",
-				"secondary-200": "#FFEAA9",
-				"secondary-300": "#FFE07E",
-				"secondary-400": "#FFD553",
-				"secondary-500": "#FFCB28",
-				"secondary-600": "#F2C126",
-				"secondary-700": "#D9AD22",
-				"secondary-800": "#BF981E",
-				"secondary-900": "#997A18",
-				"secondary-950": "#6B5410",
-
-				"success-50": "#ECFDF5",
-				"success-100": "#D1FAE5",
-				"success-200": "#A7F3D0",
-				"success-300": "#6EE7B7",
-				"success-400": "#34D399",
-				"success-500": "#10B981",
-				"success-600": "#059669",
-				"success-700": "#047857",
-				"success-800": "#065F46",
-				"success-900": "#064E3B",
-
-				"orange-50": "#FFF7ED",
-				"orange-100": "#FFEDD5",
-				"orange-200": "#FED7AA",
-				"orange-300": "#FDBA74",
-				"orange-400": "#FB923C",
-				"orange-500": "#F97316",
-				"orange-600": "#EA580C",
-				"orange-700": "#C2410C",
-				"orange-800": "#9A3412",
-				"orange-900": "#7C2D12",
-
-				"warning-50": "#FFF7ED",
-				"warning-100": "#FFEDD5",
-				"warning-200": "#FED7AA",
-				"warning-300": "#FDBA74",
-				"warning-400": "#FB923C",
-				"warning-500": "#F97316",
-				"warning-600": "#EA580C",
-				"warning-700": "#C2410C",
-				"warning-800": "#9A3412",
-				"warning-900": "#7C2D12",
-
-				"red-50": "#FEF2F2",
-				"red-100": "#FEE2E2",
-				"red-200": "#FECACA",
-				"red-300": "#FCA5A5",
-				"red-400": "#F87171",
-				"red-500": "#EF4444",
-				"red-600": "#DC2626",
-				"red-700": "#B91C1C",
-				"red-800": "#991B1B",
-				"red-900": "#7F1D1D",
-
-				"error-50": "#FEF2F2",
-				"error-100": "#FEE2E2",
-				"error-200": "#FECACA",
-				"error-300": "#FCA5A5",
-				"error-400": "#F87171",
-				"error-500": "#EF4444",
-				"error-600": "#DC2626",
-				"error-700": "#B91C1C",
-				"error-800": "#991B1B",
-				"error-900": "#7F1D1D",
-
-				"transparent-white-05": "rgba(255, 255, 255, 0.05)",
-				"transparent-white-10": "rgba(255, 255, 255, 0.1)",
-				"transparent-white-20": "rgba(255, 255, 255, 0.2)",
-				"transparent-white-30": "rgba(255, 255, 255, 0.3)",
-				"transparent-white-40": "rgba(255, 255, 255, 0.4)",
-				"transparent-white-50": "rgba(255, 255, 255, 0.5)",
-				"transparent-white-60": "rgba(255, 255, 255, 0.6)",
-				"transparent-white-70": "rgba(255, 255, 255, 0.7)",
-				"transparent-white-80": "rgba(255, 255, 255, 0.8)",
-				"transparent-white-90": "rgba(255, 255, 255, 0.9)",
-
-				"transparent-black-03": "rgba(0, 0, 0, 0.03)",
-				"transparent-black-05": "rgba(0, 0, 0, 0.05)",
-				"transparent-black-10": "rgba(0, 0, 0, 0.1)",
-				"transparent-black-20": "rgba(0, 0, 0, 0.2)",
-				"transparent-black-30": "rgba(0, 0, 0, 0.3)",
-				"transparent-black-40": "rgba(0, 0, 0, 0.4)",
-				"transparent-black-50": "rgba(0, 0, 0, 0.5)",
-				"transparent-black-60": "rgba(0, 0, 0, 0.6)",
-				"transparent-black-70": "rgba(0, 0, 0, 0.7)",
-				"transparent-black-80": "rgba(0, 0, 0, 0.8)",
-				"transparent-black-90": "rgba(0, 0, 0, 0.9)",
-
-				"gray-50": "#F9FAFB",
-				"gray-100": "#F3F4F6",
-				"gray-200": "#E5E7EB",
-				"gray-300": "#D1D5DB",
-				"gray-400": "#9CA3AF",
-				"gray-500": "#6B7280",
-				"gray-600": "#4B5563",
-				"gray-700": "#374151",
-				"gray-900": "#111827",
-
-				"red-50": "#FEF2F2",
-				"red-100": "#FEE2E2",
-				"red-200": "#FECACA",
-				"red-300": "#FCA5A5",
-				"red-400": "#F87171",
-				"red-500": "#EF4444",
-				"red-600": "#DC2626",
-				"red-700": "#B91C1C",
-				"red-800": "#991B1B",
-				"red-900": "#7F1D1D",
-
-				"orange-50": "#FFF7ED",
-				"orange-100": "#FFEDD5",
-				"orange-200": "#FED7AA",
-				"orange-300": "#FDBA74",
-				"orange-400": "#FB923C",
-				"orange-500": "#F97316",
-				"orange-600": "#EA580C",
-				"orange-700": "#C2410C",
-				"orange-800": "#9A3412",
-				"orange-900": "#7C2D12",
-
-				"yellow-50": "#FFFAEA",
-				"yellow-100": "#FFF5D4",
-				"yellow-200": "#FFEAA9",
-				"yellow-300": "#FFE07E",
-				"yellow-400": "#FFD553",
-				"yellow-500": "#FFCB28",
-				"yellow-600": "#E6B724",
-				"yellow-700": "#B38E1C",
-				"yellow-800": "#997A18",
-				"yellow-900": "#806614",
-				"yellow-950": "#6B5410",
-
-				"amber-50": "#FFFAEA",
-				"amber-100": "#FFF5D4",
-				"amber-200": "#FFEAA9",
-				"amber-300": "#FFE07E",
-				"amber-400": "#FFD553",
-				"amber-500": "#FFCB28",
-				"amber-600": "#E6B724",
-				"amber-700": "#B38E1C",
-				"amber-800": "#997A18",
-				"amber-900": "#806614",
-				"amber-950": "#6B5410",
-
-				"green-50": "#ECFDF5",
-				"green-100": "#D1FAE5",
-				"green-200": "#A7F3D0",
-				"green-300": "#6EE7B7",
-				"green-400": "#34D399",
-				"green-500": "#10B981",
-				"green-600": "#059669",
-				"green-700": "#047857",
-				"green-800": "#065F46",
-				"green-900": "#064E3B",
-
-				"teal-50": "#F0FDFA",
-				"teal-100": "#CCFBF1",
-				"teal-200": "#99F6E4",
-				"teal-300": "#5EEAD4",
-				"teal-400": "#2DD4BF",
-				"teal-500": "#14B8A6",
-				"teal-600": "#0D9488",
-				"teal-700": "#0F766E",
-				"teal-800": "#115E59",
-				"teal-900": "#134E4A",
-
-				"cyan-50": "#ECFEFF",
-				"cyan-100": "#CFFAFE",
-				"cyan-200": "#A5F3FC",
-				"cyan-300": "#67E8F9",
-				"cyan-400": "#22D3EE",
-				"cyan-500": "#06B6D4",
-				"cyan-600": "#0891B2",
-				"cyan-700": "#0E7490",
-				"cyan-800": "#155E75",
-				"cyan-900": "#164E63",
-
-				"lightBlue-50": "#F0F9FF",
-				"lightBlue-100": "#E0F2FE",
-				"lightBlue-200": "#BAE6FD",
-				"lightBlue-300": "#7DD3FC",
-				"lightBlue-400": "#38BDF8",
-				"lightBlue-500": "#0EA5E9",
-				"lightBlue-600": "#0284C7",
-				"lightBlue-700": "#0369A1",
-				"lightBlue-800": "#075985",
-				"lightBlue-900": "#0C4A6E",
-
-				"blue-50": "#EEF4FF",
-				"blue-100": "#D9E6FE",
-				"blue-200": "#BCD2FD",
-				"blue-300": "#8FB2",
-				"blue-400": "#5C8DF8",
-				"blue-500": "#2C6AF2",
-				"blue-600": "#1A56DB",
-				"blue-700": "#1544AE",
-				"blue-800": "#153A8B",
-				"blue-900": "#16336E",
-				"blue-950": "#122A5C",
-
-				"purple-50": "#EEE6FB",
-				"purple-100": "#DECCF6",
-				"purple-200": "#CDB3F2",
-				"purple-300": "#BC99EE",
-				"purple-400": "#9B66E5",
-				"purple-500": "#7933DD",
-				"purple-600": "#691AD8",
-				"purple-700": "#5800D4",
-				"purple-800": "#4F00BF",
-				"purple-900": "#4600AA",
-
-				"violet-50": "#F5F3FF",
-				"violet-100": "#EDE9FE",
-				"violet-200": "#DDD6FE",
-				"violet-300": "#C4B5FD",
-				"violet-400": "#A78BFA",
-				"violet-500": "#8B5CF6",
-				"violet-600": "#7C3AED",
-				"violet-700": "#6D28D9",
-				"violet-800": "#5B21B6",
-				"violet-900": "#4C1D95",
-
-				"pink-50": "#FDF2F8",
-				"pink-100": "#FCE7F3",
-				"pink-200": "#FBCFE8",
-				"pink-300": "#F9A8D4",
-				"pink-400": "#F472B6",
-				"pink-500": "#EC4899",
-				"pink-600": "#DB2777",
-				"pink-700": "#BE185D",
-				"pink-800": "#9D174D",
-				"pink-900": "#831843",
-
-				"rose-50": "#FFF1F2",
-				"rose-100": "#FFE4E6",
-				"rose-200": "#FECDD3",
-				"rose-300": "#FDA4AF",
-				"rose-400": "#FB7185",
-				"rose-500": "#F43F5E",
-				"rose-600": "#E11D48",
-				"rose-700": "#BE123C",
-				"rose-800": "#9F1239",
-				"rose-900": "#881337"
-			},
-			fontWeight: {
-				medium: 500
-			},
-			fontSize: {
-				xs: ["0.75rem", "1rem"],
-				sm: ["0.875rem", "1.25rem"],
-				base: ["1rem", "1.5rem"],
-				lg: ["1.125rem", "1.75rem"],
-				xl: ["1.25rem", "1.75rem"],
-				"2xl": ["1.5rem", "2rem"],
-				"3xl": ["1.875rem", "2.25rem"],
-				"4xl": ["2.25rem", "2.5rem"],
-				"5xl": ["3rem", "3rem"],
-				"6xl": ["3.75rem", "3.75rem"],
-				"7xl": ["4.5rem", "4.5rem"],
-				"8xl": ["6rem", "6rem"],
-				"9xl": ["8rem", "8rem"]
-			},
-			animation: {
-				enter: "fadeInLeft 300ms ease-out",
-				exit: "fadeOutLeft 300ms ease-in forwards",
-				quickBounce: "quickBounce 200ms ease-out forwards",
-				fadeIn: "fadeIn 400ms ease-in-out forwards",
-				spinSlower: "spin 0.8s linear infinite"
-			},
-
-			keyframes: {
-				fadeIn: {
-					"0%": {
-						opacity: "0"
-					},
-					"100%": {
-						opacity: "1"
-					}
-				},
-				fadeInLeft: {
-					"0%": {
-						opacity: "0",
-						transform: "translate(-2rem)"
-					},
-					"100%": {
-						opacity: "1",
-						transform: "translate(0)"
-					}
-				},
-				quickBounce: {
-					"0%": {
-						transform: "translateY(0px)"
-					},
-					"50%": {
-						transform: "translateY(-8px)"
-					},
-					"100%": {
-						transform: "translateY(-4px)"
-					}
-				},
-				fadeOutLeft: {
-					"0%": {
-						opacity: "1",
-						transform: "translate(0)"
-					},
-					"100%": {
-						opacity: "0",
-						transform: "translate(-2rem)"
-					}
-				}
-			},
-			transitionProperty: {
-				left: "left",
-				height: "height"
-			},
-			spacing: {
-				xxsm: "4px",
-				xsm: "8px",
-				sm: "12px",
-				md: "16px",
-				lg: "20px",
-				xlg: "24px",
-				xxlg: "28px",
-				hg: "32px",
-				xhg: "40px",
-				xxhg: "80px"
-			}
-		}
-	},
-	plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography"), require("@headlessui/tailwindcss")]
+	]
 };
diff --git a/tailwind.preset.js b/tailwind.preset.js
new file mode 100644
index 0000000..a9413d4
--- /dev/null
+++ b/tailwind.preset.js
@@ -0,0 +1,420 @@
+/**
+ * The Plenum Tailwind preset: every colour, font and size Plenum's components use.
+ * Load it from a consumer's tailwind config with `presets: [require("@agility/plenum-ui/tailwind.preset")]`
+ * so the consumer's classes match Plenum's.
+ */
+const plugin = require("tailwindcss/plugin");
+
+// The primary colour. Components use primary-* for anything that means "primary", never a palette
+// name such as blue-* or purple-*, so changing the primary is an edit to these values only.
+// Each step is a CSS variable of RGB channels, so opacity modifiers (bg-primary-600/50) still work.
+const primary = {
+	50: "#EEF4FF",
+	100: "#D9E6FE",
+	200: "#BCD2FD",
+	300: "#8FB2FB",
+	400: "#5C8DF8",
+	500: "#2C6AF2",
+	600: "#1A56DB",
+	700: "#1544AE",
+	800: "#153A8B",
+	900: "#16336E",
+	950: "#122A5C"
+};
+
+const toChannels = (hex) => {
+	const h = hex.replace("#", "");
+	return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)).join(" ");
+};
+
+const primaryColours = Object.fromEntries(
+	Object.keys(primary).map((step) => [`primary-${step}`, `rgb(var(--primary-${step}) / <alpha-value>)`])
+);
+
+const primaryVariables = plugin(({ addBase }) => {
+	addBase({
+		":root": Object.fromEntries(
+			Object.entries(primary).map(([step, hex]) => [`--primary-${step}`, toChannels(hex)])
+		)
+	});
+});
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	theme: {
+		extend: {
+			fontFamily: {
+				sans: ["TTInterphasesPro", "sans-serif"]
+			},
+			backgroundImage: (theme) => ({
+				"label-gradient-focus": "linear-gradient(to top, #FFF 10px, transparent 10px)",
+				"label-gradient-idle": "linear-gradient(to top, #FFF 10px, transparent 10px)"
+			}),
+			gridTemplateColumns: {
+				// Simple 16 column grid
+				mainContainer: "max-content 1fr 1fr"
+			},
+			gridTemplateRows: {
+				// Simple 16 column grid
+				header: "max-content 1fr 1fr"
+			},
+			colors: {
+				"neutral-50": "#F7F7F7",
+				"neutral-100": "#F2F2F2",
+				"neutral-200": "#E5E7EB",
+				"neutral-300": "#D1D5DB",
+				"neutral-400": "#9CA3aF",
+				"neutral-500": "#6B7280",
+				"neutral-600": "#4B5563",
+				"neutral-700": "#374151",
+				"neutral-800": "#1F2937",
+				"neutral-900": "#111827",
+				"neutral-950": "#030712",
+
+				"warm-25": "#FDFCFA",
+				"warm-50": "#FAF9F7",
+				"warm-100": "#F5F4F1",
+				"warm-200": "#EFEDE8",
+				"warm-300": "#E5E2DB",
+
+				// The primary scale is a set of CSS variables, defined above.
+				...primaryColours,
+
+				"secondary-50": "#FFFAEA",
+				"secondary-100": "#FFF5D4",
+				"secondary-200": "#FFEAA9",
+				"secondary-300": "#FFE07E",
+				"secondary-400": "#FFD553",
+				"secondary-500": "#FFCB28",
+				"secondary-600": "#F2C126",
+				"secondary-700": "#D9AD22",
+				"secondary-800": "#BF981E",
+				"secondary-900": "#997A18",
+				"secondary-950": "#6B5410",
+
+				"success-50": "#ECFDF5",
+				"success-100": "#D1FAE5",
+				"success-200": "#A7F3D0",
+				"success-300": "#6EE7B7",
+				"success-400": "#34D399",
+				"success-500": "#10B981",
+				"success-600": "#059669",
+				"success-700": "#047857",
+				"success-800": "#065F46",
+				"success-900": "#064E3B",
+
+				"orange-50": "#FFF7ED",
+				"orange-100": "#FFEDD5",
+				"orange-200": "#FED7AA",
+				"orange-300": "#FDBA74",
+				"orange-400": "#FB923C",
+				"orange-500": "#F97316",
+				"orange-600": "#EA580C",
+				"orange-700": "#C2410C",
+				"orange-800": "#9A3412",
+				"orange-900": "#7C2D12",
+
+				"warning-50": "#FFF7ED",
+				"warning-100": "#FFEDD5",
+				"warning-200": "#FED7AA",
+				"warning-300": "#FDBA74",
+				"warning-400": "#FB923C",
+				"warning-500": "#F97316",
+				"warning-600": "#EA580C",
+				"warning-700": "#C2410C",
+				"warning-800": "#9A3412",
+				"warning-900": "#7C2D12",
+
+				"red-50": "#FEF2F2",
+				"red-100": "#FEE2E2",
+				"red-200": "#FECACA",
+				"red-300": "#FCA5A5",
+				"red-400": "#F87171",
+				"red-500": "#EF4444",
+				"red-600": "#DC2626",
+				"red-700": "#B91C1C",
+				"red-800": "#991B1B",
+				"red-900": "#7F1D1D",
+
+				"error-50": "#FEF2F2",
+				"error-100": "#FEE2E2",
+				"error-200": "#FECACA",
+				"error-300": "#FCA5A5",
+				"error-400": "#F87171",
+				"error-500": "#EF4444",
+				"error-600": "#DC2626",
+				"error-700": "#B91C1C",
+				"error-800": "#991B1B",
+				"error-900": "#7F1D1D",
+
+				"transparent-white-05": "rgba(255, 255, 255, 0.05)",
+				"transparent-white-10": "rgba(255, 255, 255, 0.1)",
+				"transparent-white-20": "rgba(255, 255, 255, 0.2)",
+				"transparent-white-30": "rgba(255, 255, 255, 0.3)",
+				"transparent-white-40": "rgba(255, 255, 255, 0.4)",
+				"transparent-white-50": "rgba(255, 255, 255, 0.5)",
+				"transparent-white-60": "rgba(255, 255, 255, 0.6)",
+				"transparent-white-70": "rgba(255, 255, 255, 0.7)",
+				"transparent-white-80": "rgba(255, 255, 255, 0.8)",
+				"transparent-white-90": "rgba(255, 255, 255, 0.9)",
+
+				"transparent-black-03": "rgba(0, 0, 0, 0.03)",
+				"transparent-black-05": "rgba(0, 0, 0, 0.05)",
+				"transparent-black-10": "rgba(0, 0, 0, 0.1)",
+				"transparent-black-20": "rgba(0, 0, 0, 0.2)",
+				"transparent-black-30": "rgba(0, 0, 0, 0.3)",
+				"transparent-black-40": "rgba(0, 0, 0, 0.4)",
+				"transparent-black-50": "rgba(0, 0, 0, 0.5)",
+				"transparent-black-60": "rgba(0, 0, 0, 0.6)",
+				"transparent-black-70": "rgba(0, 0, 0, 0.7)",
+				"transparent-black-80": "rgba(0, 0, 0, 0.8)",
+				"transparent-black-90": "rgba(0, 0, 0, 0.9)",
+
+				"gray-50": "#F9FAFB",
+				"gray-100": "#F3F4F6",
+				"gray-200": "#E5E7EB",
+				"gray-300": "#D1D5DB",
+				"gray-400": "#9CA3AF",
+				"gray-500": "#6B7280",
+				"gray-600": "#4B5563",
+				"gray-700": "#374151",
+				"gray-900": "#111827",
+
+				"red-50": "#FEF2F2",
+				"red-100": "#FEE2E2",
+				"red-200": "#FECACA",
+				"red-300": "#FCA5A5",
+				"red-400": "#F87171",
+				"red-500": "#EF4444",
+				"red-600": "#DC2626",
+				"red-700": "#B91C1C",
+				"red-800": "#991B1B",
+				"red-900": "#7F1D1D",
+
+				"orange-50": "#FFF7ED",
+				"orange-100": "#FFEDD5",
+				"orange-200": "#FED7AA",
+				"orange-300": "#FDBA74",
+				"orange-400": "#FB923C",
+				"orange-500": "#F97316",
+				"orange-600": "#EA580C",
+				"orange-700": "#C2410C",
+				"orange-800": "#9A3412",
+				"orange-900": "#7C2D12",
+
+				"yellow-50": "#FFFAEA",
+				"yellow-100": "#FFF5D4",
+				"yellow-200": "#FFEAA9",
+				"yellow-300": "#FFE07E",
+				"yellow-400": "#FFD553",
+				"yellow-500": "#FFCB28",
+				"yellow-600": "#E6B724",
+				"yellow-700": "#B38E1C",
+				"yellow-800": "#997A18",
+				"yellow-900": "#806614",
+				"yellow-950": "#6B5410",
+
+				"amber-50": "#FFFAEA",
+				"amber-100": "#FFF5D4",
+				"amber-200": "#FFEAA9",
+				"amber-300": "#FFE07E",
+				"amber-400": "#FFD553",
+				"amber-500": "#FFCB28",
+				"amber-600": "#E6B724",
+				"amber-700": "#B38E1C",
+				"amber-800": "#997A18",
+				"amber-900": "#806614",
+				"amber-950": "#6B5410",
+
+				"green-50": "#ECFDF5",
+				"green-100": "#D1FAE5",
+				"green-200": "#A7F3D0",
+				"green-300": "#6EE7B7",
+				"green-400": "#34D399",
+				"green-500": "#10B981",
+				"green-600": "#059669",
+				"green-700": "#047857",
+				"green-800": "#065F46",
+				"green-900": "#064E3B",
+
+				"teal-50": "#F0FDFA",
+				"teal-100": "#CCFBF1",
+				"teal-200": "#99F6E4",
+				"teal-300": "#5EEAD4",
+				"teal-400": "#2DD4BF",
+				"teal-500": "#14B8A6",
+				"teal-600": "#0D9488",
+				"teal-700": "#0F766E",
+				"teal-800": "#115E59",
+				"teal-900": "#134E4A",
+
+				"cyan-50": "#ECFEFF",
+				"cyan-100": "#CFFAFE",
+				"cyan-200": "#A5F3FC",
+				"cyan-300": "#67E8F9",
+				"cyan-400": "#22D3EE",
+				"cyan-500": "#06B6D4",
+				"cyan-600": "#0891B2",
+				"cyan-700": "#0E7490",
+				"cyan-800": "#155E75",
+				"cyan-900": "#164E63",
+
+				"lightBlue-50": "#F0F9FF",
+				"lightBlue-100": "#E0F2FE",
+				"lightBlue-200": "#BAE6FD",
+				"lightBlue-300": "#7DD3FC",
+				"lightBlue-400": "#38BDF8",
+				"lightBlue-500": "#0EA5E9",
+				"lightBlue-600": "#0284C7",
+				"lightBlue-700": "#0369A1",
+				"lightBlue-800": "#075985",
+				"lightBlue-900": "#0C4A6E",
+
+				"blue-50": "#EEF4FF",
+				"blue-100": "#D9E6FE",
+				"blue-200": "#BCD2FD",
+				"blue-300": "#8FB2FB",
+				"blue-400": "#5C8DF8",
+				"blue-500": "#2C6AF2",
+				"blue-600": "#1A56DB",
+				"blue-700": "#1544AE",
+				"blue-800": "#153A8B",
+				"blue-900": "#16336E",
+				"blue-950": "#122A5C",
+
+				"purple-50": "#EEE6FB",
+				"purple-100": "#DECCF6",
+				"purple-200": "#CDB3F2",
+				"purple-300": "#BC99EE",
+				"purple-400": "#9B66E5",
+				"purple-500": "#7933DD",
+				"purple-600": "#691AD8",
+				"purple-700": "#5800D4",
+				"purple-800": "#4F00BF",
+				"purple-900": "#4600AA",
+
+				"violet-50": "#F5F3FF",
+				"violet-100": "#EDE9FE",
+				"violet-200": "#DDD6FE",
+				"violet-300": "#C4B5FD",
+				"violet-400": "#A78BFA",
+				"violet-500": "#8B5CF6",
+				"violet-600": "#7C3AED",
+				"violet-700": "#6D28D9",
+				"violet-800": "#5B21B6",
+				"violet-900": "#4C1D95",
+
+				"pink-50": "#FDF2F8",
+				"pink-100": "#FCE7F3",
+				"pink-200": "#FBCFE8",
+				"pink-300": "#F9A8D4",
+				"pink-400": "#F472B6",
+				"pink-500": "#EC4899",
+				"pink-600": "#DB2777",
+				"pink-700": "#BE185D",
+				"pink-800": "#9D174D",
+				"pink-900": "#831843",
+
+				"rose-50": "#FFF1F2",
+				"rose-100": "#FFE4E6",
+				"rose-200": "#FECDD3",
+				"rose-300": "#FDA4AF",
+				"rose-400": "#FB7185",
+				"rose-500": "#F43F5E",
+				"rose-600": "#E11D48",
+				"rose-700": "#BE123C",
+				"rose-800": "#9F1239",
+				"rose-900": "#881337"
+			},
+			fontWeight: {
+				medium: 500
+			},
+			fontSize: {
+				xs: ["0.75rem", "1rem"],
+				sm: ["0.875rem", "1.25rem"],
+				base: ["1rem", "1.5rem"],
+				lg: ["1.125rem", "1.75rem"],
+				xl: ["1.25rem", "1.75rem"],
+				"2xl": ["1.5rem", "2rem"],
+				"3xl": ["1.875rem", "2.25rem"],
+				"4xl": ["2.25rem", "2.5rem"],
+				"5xl": ["3rem", "3rem"],
+				"6xl": ["3.75rem", "3.75rem"],
+				"7xl": ["4.5rem", "4.5rem"],
+				"8xl": ["6rem", "6rem"],
+				"9xl": ["8rem", "8rem"]
+			},
+			animation: {
+				enter: "fadeInLeft 300ms ease-out",
+				exit: "fadeOutLeft 300ms ease-in forwards",
+				quickBounce: "quickBounce 200ms ease-out forwards",
+				fadeIn: "fadeIn 400ms ease-in-out forwards",
+				spinSlower: "spin 0.8s linear infinite"
+			},
+
+			keyframes: {
+				fadeIn: {
+					"0%": {
+						opacity: "0"
+					},
+					"100%": {
+						opacity: "1"
+					}
+				},
+				fadeInLeft: {
+					"0%": {
+						opacity: "0",
+						transform: "translate(-2rem)"
+					},
+					"100%": {
+						opacity: "1",
+						transform: "translate(0)"
+					}
+				},
+				quickBounce: {
+					"0%": {
+						transform: "translateY(0px)"
+					},
+					"50%": {
+						transform: "translateY(-8px)"
+					},
+					"100%": {
+						transform: "translateY(-4px)"
+					}
+				},
+				fadeOutLeft: {
+					"0%": {
+						opacity: "1",
+						transform: "translate(0)"
+					},
+					"100%": {
+						opacity: "0",
+						transform: "translate(-2rem)"
+					}
+				}
+			},
+			transitionProperty: {
+				left: "left",
+				height: "height"
+			},
+			spacing: {
+				xxsm: "4px",
+				xsm: "8px",
+				sm: "12px",
+				md: "16px",
+				lg: "20px",
+				xlg: "24px",
+				xxlg: "28px",
+				hg: "32px",
+				xhg: "40px",
+				xxhg: "80px"
+			}
+		}
+	},
+	plugins: [
+		require("@tailwindcss/forms"),
+		require("@tailwindcss/typography"),
+		require("@headlessui/tailwindcss"),
+		primaryVariables
+	]
+};