diff --git a/styles/src/themes/staff/ayu-mirage.ts b/styles/src/themes/staff/ayu-mirage.ts
new file mode 100644
index 0000000000..5b832699b4
--- /dev/null
+++ b/styles/src/themes/staff/ayu-mirage.ts
@@ -0,0 +1,31 @@
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
+
+const name = "Ayu"
+const author = "Konstantin Pschera <me@kons.ch>"
+const url = "https://github.com/ayu-theme/ayu-colors"
+const license = {
+    type: "MIT",
+    url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
+}
+
+export const dark = createColorScheme(`${name} Mirage`, false, {
+    neutral: chroma.scale([
+        "#171B24",
+        "#1F2430",
+        "#242936",
+        "#707A8C",
+        "#8A9199",
+        "#CCCAC2",
+        "#D9D7CE",
+        "#F3F4F5",
+    ]),
+    red: colorRamp(chroma("#F28779")),
+    orange: colorRamp(chroma("#FFAD66")),
+    yellow: colorRamp(chroma("#FFD173")),
+    green: colorRamp(chroma("#D5FF80")),
+    cyan: colorRamp(chroma("#95E6CB")),
+    blue: colorRamp(chroma("#5CCFE6")),
+    violet: colorRamp(chroma("#D4BFFF")),
+    magenta: colorRamp(chroma("#F29E74")),
+})
diff --git a/styles/src/themes/staff/ayu.ts b/styles/src/themes/staff/ayu.ts
new file mode 100644
index 0000000000..24fcdb951b
--- /dev/null
+++ b/styles/src/themes/staff/ayu.ts
@@ -0,0 +1,52 @@
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
+
+const name = "Ayu"
+const author = "Konstantin Pschera <me@kons.ch>"
+const url = "https://github.com/ayu-theme/ayu-colors"
+const license = {
+    type: "MIT",
+    url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
+}
+
+export const dark = createColorScheme(`${name} Dark`, false, {
+    neutral: chroma.scale([
+        "#0F1419",
+        "#131721",
+        "#272D38",
+        "#3E4B59",
+        "#BFBDB6",
+        "#E6E1CF",
+        "#E6E1CF",
+        "#F3F4F5",
+    ]),
+    red: colorRamp(chroma("#F07178")),
+    orange: colorRamp(chroma("#FF8F40")),
+    yellow: colorRamp(chroma("#FFB454")),
+    green: colorRamp(chroma("#B8CC52")),
+    cyan: colorRamp(chroma("#95E6CB")),
+    blue: colorRamp(chroma("#59C2FF")),
+    violet: colorRamp(chroma("#D2A6FF")),
+    magenta: colorRamp(chroma("#E6B673")),
+})
+
+export const light = createColorScheme(`${name} Light`, true, {
+    neutral: chroma.scale([
+        "#1A1F29",
+        "#242936",
+        "#5C6773",
+        "#828C99",
+        "#ABB0B6",
+        "#F8F9FA",
+        "#F3F4F5",
+        "#FAFAFA",
+    ]),
+    red: colorRamp(chroma("#F07178")),
+    orange: colorRamp(chroma("#FA8D3E")),
+    yellow: colorRamp(chroma("#F2AE49")),
+    green: colorRamp(chroma("#86B300")),
+    cyan: colorRamp(chroma("#4CBF99")),
+    blue: colorRamp(chroma("#36A3D9")),
+    violet: colorRamp(chroma("#A37ACC")),
+    magenta: colorRamp(chroma("#E6BA7E")),
+})