diff --git a/mod.test.ts b/mod.test.ts
index b13c8af..d429e9e 100644
--- a/mod.test.ts
+++ b/mod.test.ts
@@ -1,7 +1,7 @@
 import { assertEquals } from "std/assert/assert_equals.ts";
 
 import { flavorEntries, flavors } from "@catppuccin/palette";
-import palette from "@/palette.json" assert { type: "json" };
+import palette from "@/palette.json" with { type: "json" };
 
 Deno.test("flavorEntries", () => {
   flavorEntries
diff --git a/mod.ts b/mod.ts
index 3073965..0c094ac 100644
--- a/mod.ts
+++ b/mod.ts
@@ -68,6 +68,11 @@ export type CatppuccinFlavor = Readonly<{
    */
   name: string;
 
+  /**
+   * Order of the flavor in the palette spec
+   */
+  order: number;
+
   /**
    * Whether the flavor is a dark theme
    */
@@ -117,6 +122,16 @@ export type Flavors<T> = {
 };
 
 export type ColorFormat = Readonly<{
+  /**
+   * Name of the color
+   */
+  name: string;
+
+  /**
+   * Order of the color in the palette spec
+   */
+  order: number;
+
   /**
    * String-formatted hex value
    * @example "#babbf1"
diff --git a/palette.json b/palette.json
index b520925..cdc546d 100644
--- a/palette.json
+++ b/palette.json
@@ -1,9 +1,12 @@
 {
   "latte": {
     "name": "Latte",
+    "order": 0,
     "dark": false,
     "colors": {
       "rosewater": {
+        "name": "Rosewater",
+        "order": 0,
         "hex": "#dc8a78",
         "rgb": {
           "r": 220,
@@ -18,6 +21,8 @@
         "accent": true
       },
       "flamingo": {
+        "name": "Flamingo",
+        "order": 1,
         "hex": "#dd7878",
         "rgb": {
           "r": 221,
@@ -32,6 +37,8 @@
         "accent": true
       },
       "pink": {
+        "name": "Pink",
+        "order": 2,
         "hex": "#ea76cb",
         "rgb": {
           "r": 234,
@@ -46,6 +53,8 @@
         "accent": true
       },
       "mauve": {
+        "name": "Mauve",
+        "order": 3,
         "hex": "#8839ef",
         "rgb": {
           "r": 136,
@@ -60,6 +69,8 @@
         "accent": true
       },
       "red": {
+        "name": "Red",
+        "order": 4,
         "hex": "#d20f39",
         "rgb": {
           "r": 210,
@@ -74,6 +85,8 @@
         "accent": true
       },
       "maroon": {
+        "name": "Maroon",
+        "order": 5,
         "hex": "#e64553",
         "rgb": {
           "r": 230,
@@ -88,6 +101,8 @@
         "accent": true
       },
       "peach": {
+        "name": "Peach",
+        "order": 6,
         "hex": "#fe640b",
         "rgb": {
           "r": 254,
@@ -102,6 +117,8 @@
         "accent": true
       },
       "yellow": {
+        "name": "Yellow",
+        "order": 7,
         "hex": "#df8e1d",
         "rgb": {
           "r": 223,
@@ -116,6 +133,8 @@
         "accent": true
       },
       "green": {
+        "name": "Green",
+        "order": 8,
         "hex": "#40a02b",
         "rgb": {
           "r": 64,
@@ -130,6 +149,8 @@
         "accent": true
       },
       "teal": {
+        "name": "Teal",
+        "order": 9,
         "hex": "#179299",
         "rgb": {
           "r": 23,
@@ -144,6 +165,8 @@
         "accent": true
       },
       "sky": {
+        "name": "Sky",
+        "order": 10,
         "hex": "#04a5e5",
         "rgb": {
           "r": 4,
@@ -158,6 +181,8 @@
         "accent": true
       },
       "sapphire": {
+        "name": "Sapphire",
+        "order": 11,
         "hex": "#209fb5",
         "rgb": {
           "r": 32,
@@ -172,6 +197,8 @@
         "accent": true
       },
       "blue": {
+        "name": "Blue",
+        "order": 12,
         "hex": "#1e66f5",
         "rgb": {
           "r": 30,
@@ -186,6 +213,8 @@
         "accent": true
       },
       "lavender": {
+        "name": "Lavender",
+        "order": 13,
         "hex": "#7287fd",
         "rgb": {
           "r": 114,
@@ -200,6 +229,8 @@
         "accent": true
       },
       "text": {
+        "name": "Text",
+        "order": 14,
         "hex": "#4c4f69",
         "rgb": {
           "r": 76,
@@ -214,6 +245,8 @@
         "accent": false
       },
       "subtext1": {
+        "name": "Subtext 1",
+        "order": 15,
         "hex": "#5c5f77",
         "rgb": {
           "r": 92,
@@ -228,6 +261,8 @@
         "accent": false
       },
       "subtext0": {
+        "name": "Subtext 0",
+        "order": 16,
         "hex": "#6c6f85",
         "rgb": {
           "r": 108,
@@ -242,6 +277,8 @@
         "accent": false
       },
       "overlay2": {
+        "name": "Overlay 2",
+        "order": 17,
         "hex": "#7c7f93",
         "rgb": {
           "r": 124,
@@ -256,6 +293,8 @@
         "accent": false
       },
       "overlay1": {
+        "name": "Overlay 1",
+        "order": 18,
         "hex": "#8c8fa1",
         "rgb": {
           "r": 140,
@@ -270,6 +309,8 @@
         "accent": false
       },
       "overlay0": {
+        "name": "Overlay 0",
+        "order": 19,
         "hex": "#9ca0b0",
         "rgb": {
           "r": 156,
@@ -284,6 +325,8 @@
         "accent": false
       },
       "surface2": {
+        "name": "Surface 2",
+        "order": 20,
         "hex": "#acb0be",
         "rgb": {
           "r": 172,
@@ -298,6 +341,8 @@
         "accent": false
       },
       "surface1": {
+        "name": "Surface 1",
+        "order": 21,
         "hex": "#bcc0cc",
         "rgb": {
           "r": 188,
@@ -312,6 +357,8 @@
         "accent": false
       },
       "surface0": {
+        "name": "Surface 0",
+        "order": 22,
         "hex": "#ccd0da",
         "rgb": {
           "r": 204,
@@ -326,6 +373,8 @@
         "accent": false
       },
       "base": {
+        "name": "Base",
+        "order": 23,
         "hex": "#eff1f5",
         "rgb": {
           "r": 239,
@@ -340,6 +389,8 @@
         "accent": false
       },
       "mantle": {
+        "name": "Mantle",
+        "order": 24,
         "hex": "#e6e9ef",
         "rgb": {
           "r": 230,
@@ -354,6 +405,8 @@
         "accent": false
       },
       "crust": {
+        "name": "Crust",
+        "order": 25,
         "hex": "#dce0e8",
         "rgb": {
           "r": 220,
@@ -371,9 +424,12 @@
   },
   "frappe": {
     "name": "Frappé",
+    "order": 1,
     "dark": true,
     "colors": {
       "rosewater": {
+        "name": "Rosewater",
+        "order": 0,
         "hex": "#f2d5cf",
         "rgb": {
           "r": 242,
@@ -388,6 +444,8 @@
         "accent": true
       },
       "flamingo": {
+        "name": "Flamingo",
+        "order": 1,
         "hex": "#eebebe",
         "rgb": {
           "r": 238,
@@ -402,6 +460,8 @@
         "accent": true
       },
       "pink": {
+        "name": "Pink",
+        "order": 2,
         "hex": "#f4b8e4",
         "rgb": {
           "r": 244,
@@ -416,6 +476,8 @@
         "accent": true
       },
       "mauve": {
+        "name": "Mauve",
+        "order": 3,
         "hex": "#ca9ee6",
         "rgb": {
           "r": 202,
@@ -430,6 +492,8 @@
         "accent": true
       },
       "red": {
+        "name": "Red",
+        "order": 4,
         "hex": "#e78284",
         "rgb": {
           "r": 231,
@@ -444,6 +508,8 @@
         "accent": true
       },
       "maroon": {
+        "name": "Maroon",
+        "order": 5,
         "hex": "#ea999c",
         "rgb": {
           "r": 234,
@@ -458,6 +524,8 @@
         "accent": true
       },
       "peach": {
+        "name": "Peach",
+        "order": 6,
         "hex": "#ef9f76",
         "rgb": {
           "r": 239,
@@ -472,6 +540,8 @@
         "accent": true
       },
       "yellow": {
+        "name": "Yellow",
+        "order": 7,
         "hex": "#e5c890",
         "rgb": {
           "r": 229,
@@ -486,6 +556,8 @@
         "accent": true
       },
       "green": {
+        "name": "Green",
+        "order": 8,
         "hex": "#a6d189",
         "rgb": {
           "r": 166,
@@ -500,6 +572,8 @@
         "accent": true
       },
       "teal": {
+        "name": "Teal",
+        "order": 9,
         "hex": "#81c8be",
         "rgb": {
           "r": 129,
@@ -514,6 +588,8 @@
         "accent": true
       },
       "sky": {
+        "name": "Sky",
+        "order": 10,
         "hex": "#99d1db",
         "rgb": {
           "r": 153,
@@ -528,6 +604,8 @@
         "accent": true
       },
       "sapphire": {
+        "name": "Sapphire",
+        "order": 11,
         "hex": "#85c1dc",
         "rgb": {
           "r": 133,
@@ -542,6 +620,8 @@
         "accent": true
       },
       "blue": {
+        "name": "Blue",
+        "order": 12,
         "hex": "#8caaee",
         "rgb": {
           "r": 140,
@@ -556,6 +636,8 @@
         "accent": true
       },
       "lavender": {
+        "name": "Lavender",
+        "order": 13,
         "hex": "#babbf1",
         "rgb": {
           "r": 186,
@@ -570,6 +652,8 @@
         "accent": true
       },
       "text": {
+        "name": "Text",
+        "order": 14,
         "hex": "#c6d0f5",
         "rgb": {
           "r": 198,
@@ -584,6 +668,8 @@
         "accent": false
       },
       "subtext1": {
+        "name": "Subtext 1",
+        "order": 15,
         "hex": "#b5bfe2",
         "rgb": {
           "r": 181,
@@ -598,6 +684,8 @@
         "accent": false
       },
       "subtext0": {
+        "name": "Subtext 0",
+        "order": 16,
         "hex": "#a5adce",
         "rgb": {
           "r": 165,
@@ -612,6 +700,8 @@
         "accent": false
       },
       "overlay2": {
+        "name": "Overlay 2",
+        "order": 17,
         "hex": "#949cbb",
         "rgb": {
           "r": 148,
@@ -626,6 +716,8 @@
         "accent": false
       },
       "overlay1": {
+        "name": "Overlay 1",
+        "order": 18,
         "hex": "#838ba7",
         "rgb": {
           "r": 131,
@@ -640,6 +732,8 @@
         "accent": false
       },
       "overlay0": {
+        "name": "Overlay 0",
+        "order": 19,
         "hex": "#737994",
         "rgb": {
           "r": 115,
@@ -654,6 +748,8 @@
         "accent": false
       },
       "surface2": {
+        "name": "Surface 2",
+        "order": 20,
         "hex": "#626880",
         "rgb": {
           "r": 98,
@@ -668,6 +764,8 @@
         "accent": false
       },
       "surface1": {
+        "name": "Surface 1",
+        "order": 21,
         "hex": "#51576d",
         "rgb": {
           "r": 81,
@@ -682,6 +780,8 @@
         "accent": false
       },
       "surface0": {
+        "name": "Surface 0",
+        "order": 22,
         "hex": "#414559",
         "rgb": {
           "r": 65,
@@ -696,6 +796,8 @@
         "accent": false
       },
       "base": {
+        "name": "Base",
+        "order": 23,
         "hex": "#303446",
         "rgb": {
           "r": 48,
@@ -710,6 +812,8 @@
         "accent": false
       },
       "mantle": {
+        "name": "Mantle",
+        "order": 24,
         "hex": "#292c3c",
         "rgb": {
           "r": 41,
@@ -724,6 +828,8 @@
         "accent": false
       },
       "crust": {
+        "name": "Crust",
+        "order": 25,
         "hex": "#232634",
         "rgb": {
           "r": 35,
@@ -741,9 +847,12 @@
   },
   "macchiato": {
     "name": "Macchiato",
+    "order": 2,
     "dark": true,
     "colors": {
       "rosewater": {
+        "name": "Rosewater",
+        "order": 0,
         "hex": "#f4dbd6",
         "rgb": {
           "r": 244,
@@ -758,6 +867,8 @@
         "accent": true
       },
       "flamingo": {
+        "name": "Flamingo",
+        "order": 1,
         "hex": "#f0c6c6",
         "rgb": {
           "r": 240,
@@ -772,6 +883,8 @@
         "accent": true
       },
       "pink": {
+        "name": "Pink",
+        "order": 2,
         "hex": "#f5bde6",
         "rgb": {
           "r": 245,
@@ -786,6 +899,8 @@
         "accent": true
       },
       "mauve": {
+        "name": "Mauve",
+        "order": 3,
         "hex": "#c6a0f6",
         "rgb": {
           "r": 198,
@@ -800,6 +915,8 @@
         "accent": true
       },
       "red": {
+        "name": "Red",
+        "order": 4,
         "hex": "#ed8796",
         "rgb": {
           "r": 237,
@@ -814,6 +931,8 @@
         "accent": true
       },
       "maroon": {
+        "name": "Maroon",
+        "order": 5,
         "hex": "#ee99a0",
         "rgb": {
           "r": 238,
@@ -828,6 +947,8 @@
         "accent": true
       },
       "peach": {
+        "name": "Peach",
+        "order": 6,
         "hex": "#f5a97f",
         "rgb": {
           "r": 245,
@@ -842,6 +963,8 @@
         "accent": true
       },
       "yellow": {
+        "name": "Yellow",
+        "order": 7,
         "hex": "#eed49f",
         "rgb": {
           "r": 238,
@@ -856,6 +979,8 @@
         "accent": true
       },
       "green": {
+        "name": "Green",
+        "order": 8,
         "hex": "#a6da95",
         "rgb": {
           "r": 166,
@@ -870,6 +995,8 @@
         "accent": true
       },
       "teal": {
+        "name": "Teal",
+        "order": 9,
         "hex": "#8bd5ca",
         "rgb": {
           "r": 139,
@@ -884,6 +1011,8 @@
         "accent": true
       },
       "sky": {
+        "name": "Sky",
+        "order": 10,
         "hex": "#91d7e3",
         "rgb": {
           "r": 145,
@@ -898,6 +1027,8 @@
         "accent": true
       },
       "sapphire": {
+        "name": "Sapphire",
+        "order": 11,
         "hex": "#7dc4e4",
         "rgb": {
           "r": 125,
@@ -912,6 +1043,8 @@
         "accent": true
       },
       "blue": {
+        "name": "Blue",
+        "order": 12,
         "hex": "#8aadf4",
         "rgb": {
           "r": 138,
@@ -926,6 +1059,8 @@
         "accent": true
       },
       "lavender": {
+        "name": "Lavender",
+        "order": 13,
         "hex": "#b7bdf8",
         "rgb": {
           "r": 183,
@@ -940,6 +1075,8 @@
         "accent": true
       },
       "text": {
+        "name": "Text",
+        "order": 14,
         "hex": "#cad3f5",
         "rgb": {
           "r": 202,
@@ -954,6 +1091,8 @@
         "accent": false
       },
       "subtext1": {
+        "name": "Subtext 1",
+        "order": 15,
         "hex": "#b8c0e0",
         "rgb": {
           "r": 184,
@@ -968,6 +1107,8 @@
         "accent": false
       },
       "subtext0": {
+        "name": "Subtext 0",
+        "order": 16,
         "hex": "#a5adcb",
         "rgb": {
           "r": 165,
@@ -982,6 +1123,8 @@
         "accent": false
       },
       "overlay2": {
+        "name": "Overlay 2",
+        "order": 17,
         "hex": "#939ab7",
         "rgb": {
           "r": 147,
@@ -996,6 +1139,8 @@
         "accent": false
       },
       "overlay1": {
+        "name": "Overlay 1",
+        "order": 18,
         "hex": "#8087a2",
         "rgb": {
           "r": 128,
@@ -1010,6 +1155,8 @@
         "accent": false
       },
       "overlay0": {
+        "name": "Overlay 0",
+        "order": 19,
         "hex": "#6e738d",
         "rgb": {
           "r": 110,
@@ -1024,6 +1171,8 @@
         "accent": false
       },
       "surface2": {
+        "name": "Surface 2",
+        "order": 20,
         "hex": "#5b6078",
         "rgb": {
           "r": 91,
@@ -1038,6 +1187,8 @@
         "accent": false
       },
       "surface1": {
+        "name": "Surface 1",
+        "order": 21,
         "hex": "#494d64",
         "rgb": {
           "r": 73,
@@ -1052,6 +1203,8 @@
         "accent": false
       },
       "surface0": {
+        "name": "Surface 0",
+        "order": 22,
         "hex": "#363a4f",
         "rgb": {
           "r": 54,
@@ -1066,6 +1219,8 @@
         "accent": false
       },
       "base": {
+        "name": "Base",
+        "order": 23,
         "hex": "#24273a",
         "rgb": {
           "r": 36,
@@ -1080,6 +1235,8 @@
         "accent": false
       },
       "mantle": {
+        "name": "Mantle",
+        "order": 24,
         "hex": "#1e2030",
         "rgb": {
           "r": 30,
@@ -1094,6 +1251,8 @@
         "accent": false
       },
       "crust": {
+        "name": "Crust",
+        "order": 25,
         "hex": "#181926",
         "rgb": {
           "r": 24,
@@ -1111,9 +1270,12 @@
   },
   "mocha": {
     "name": "Mocha",
+    "order": 3,
     "dark": true,
     "colors": {
       "rosewater": {
+        "name": "Rosewater",
+        "order": 0,
         "hex": "#f5e0dc",
         "rgb": {
           "r": 245,
@@ -1128,6 +1290,8 @@
         "accent": true
       },
       "flamingo": {
+        "name": "Flamingo",
+        "order": 1,
         "hex": "#f2cdcd",
         "rgb": {
           "r": 242,
@@ -1142,6 +1306,8 @@
         "accent": true
       },
       "pink": {
+        "name": "Pink",
+        "order": 2,
         "hex": "#f5c2e7",
         "rgb": {
           "r": 245,
@@ -1156,6 +1322,8 @@
         "accent": true
       },
       "mauve": {
+        "name": "Mauve",
+        "order": 3,
         "hex": "#cba6f7",
         "rgb": {
           "r": 203,
@@ -1170,6 +1338,8 @@
         "accent": true
       },
       "red": {
+        "name": "Red",
+        "order": 4,
         "hex": "#f38ba8",
         "rgb": {
           "r": 243,
@@ -1184,6 +1354,8 @@
         "accent": true
       },
       "maroon": {
+        "name": "Maroon",
+        "order": 5,
         "hex": "#eba0ac",
         "rgb": {
           "r": 235,
@@ -1198,6 +1370,8 @@
         "accent": true
       },
       "peach": {
+        "name": "Peach",
+        "order": 6,
         "hex": "#fab387",
         "rgb": {
           "r": 250,
@@ -1212,6 +1386,8 @@
         "accent": true
       },
       "yellow": {
+        "name": "Yellow",
+        "order": 7,
         "hex": "#f9e2af",
         "rgb": {
           "r": 249,
@@ -1226,6 +1402,8 @@
         "accent": true
       },
       "green": {
+        "name": "Green",
+        "order": 8,
         "hex": "#a6e3a1",
         "rgb": {
           "r": 166,
@@ -1240,6 +1418,8 @@
         "accent": true
       },
       "teal": {
+        "name": "Teal",
+        "order": 9,
         "hex": "#94e2d5",
         "rgb": {
           "r": 148,
@@ -1254,6 +1434,8 @@
         "accent": true
       },
       "sky": {
+        "name": "Sky",
+        "order": 10,
         "hex": "#89dceb",
         "rgb": {
           "r": 137,
@@ -1268,6 +1450,8 @@
         "accent": true
       },
       "sapphire": {
+        "name": "Sapphire",
+        "order": 11,
         "hex": "#74c7ec",
         "rgb": {
           "r": 116,
@@ -1282,6 +1466,8 @@
         "accent": true
       },
       "blue": {
+        "name": "Blue",
+        "order": 12,
         "hex": "#89b4fa",
         "rgb": {
           "r": 137,
@@ -1296,6 +1482,8 @@
         "accent": true
       },
       "lavender": {
+        "name": "Lavender",
+        "order": 13,
         "hex": "#b4befe",
         "rgb": {
           "r": 180,
@@ -1310,6 +1498,8 @@
         "accent": true
       },
       "text": {
+        "name": "Text",
+        "order": 14,
         "hex": "#cdd6f4",
         "rgb": {
           "r": 205,
@@ -1324,6 +1514,8 @@
         "accent": false
       },
       "subtext1": {
+        "name": "Subtext 1",
+        "order": 15,
         "hex": "#bac2de",
         "rgb": {
           "r": 186,
@@ -1338,6 +1530,8 @@
         "accent": false
       },
       "subtext0": {
+        "name": "Subtext 0",
+        "order": 16,
         "hex": "#a6adc8",
         "rgb": {
           "r": 166,
@@ -1352,6 +1546,8 @@
         "accent": false
       },
       "overlay2": {
+        "name": "Overlay 2",
+        "order": 17,
         "hex": "#9399b2",
         "rgb": {
           "r": 147,
@@ -1366,6 +1562,8 @@
         "accent": false
       },
       "overlay1": {
+        "name": "Overlay 1",
+        "order": 18,
         "hex": "#7f849c",
         "rgb": {
           "r": 127,
@@ -1380,6 +1578,8 @@
         "accent": false
       },
       "overlay0": {
+        "name": "Overlay 0",
+        "order": 19,
         "hex": "#6c7086",
         "rgb": {
           "r": 108,
@@ -1394,6 +1594,8 @@
         "accent": false
       },
       "surface2": {
+        "name": "Surface 2",
+        "order": 20,
         "hex": "#585b70",
         "rgb": {
           "r": 88,
@@ -1408,6 +1610,8 @@
         "accent": false
       },
       "surface1": {
+        "name": "Surface 1",
+        "order": 21,
         "hex": "#45475a",
         "rgb": {
           "r": 69,
@@ -1422,6 +1626,8 @@
         "accent": false
       },
       "surface0": {
+        "name": "Surface 0",
+        "order": 22,
         "hex": "#313244",
         "rgb": {
           "r": 49,
@@ -1436,6 +1642,8 @@
         "accent": false
       },
       "base": {
+        "name": "Base",
+        "order": 23,
         "hex": "#1e1e2e",
         "rgb": {
           "r": 30,
@@ -1450,6 +1658,8 @@
         "accent": false
       },
       "mantle": {
+        "name": "Mantle",
+        "order": 24,
         "hex": "#181825",
         "rgb": {
           "r": 24,
@@ -1464,6 +1674,8 @@
         "accent": false
       },
       "crust": {
+        "name": "Crust",
+        "order": 25,
         "hex": "#11111b",
         "rgb": {
           "r": 17,
diff --git a/scripts/build_npm.ts b/scripts/build_npm.ts
index 1138348..909397a 100644
--- a/scripts/build_npm.ts
+++ b/scripts/build_npm.ts
@@ -1,7 +1,7 @@
 import { copy, emptyDir } from "std/fs/mod.ts";
 import { build } from "dnt";
 
-import denoJson from "@/deno.json" assert { type: "json" };
+import denoJson from "@/deno.json" with { type: "json" };
 import * as builders from "./builders/mod.ts";
 
 const outDir = "./dist/npm";
diff --git a/scripts/gen_palette.ts b/scripts/gen_palette.ts
index c234e7a..e1bf54e 100644
--- a/scripts/gen_palette.ts
+++ b/scripts/gen_palette.ts
@@ -16,6 +16,35 @@ const entriesFromObject = <T extends object>(obj: T): Entries<T> =>
 
 type Writeable<T> = { -readonly [P in keyof T]: T[P] };
 
+const prettyNames = [
+  "Rosewater",
+  "Flamingo",
+  "Pink",
+  "Mauve",
+  "Red",
+  "Maroon",
+  "Peach",
+  "Yellow",
+  "Green",
+  "Teal",
+  "Sky",
+  "Sapphire",
+  "Blue",
+  "Lavender",
+  "Text",
+  "Subtext 1",
+  "Subtext 0",
+  "Overlay 2",
+  "Overlay 1",
+  "Overlay 0",
+  "Surface 2",
+  "Surface 1",
+  "Surface 0",
+  "Base",
+  "Mantle",
+  "Crust",
+] as const;
+
 const definitions = {
   latte: {
     name: "Latte",
@@ -165,15 +194,18 @@ const accents = [
 ];
 
 const formatted = entriesFromObject(definitions)
-  .reduce((acc, [flavorName, flavor]) => {
+  .reduce((acc, [flavorName, flavor], currentIndex) => {
     acc[flavorName] = {
       name: flavor.name,
+      order: currentIndex,
       dark: flavor.dark,
       colors: entriesFromObject(flavor.colors).reduce(
-        (acc, [colorName, color]) => {
+        (acc, [colorName, color], currentIndex) => {
           const { r, g, b } = tinycolor(color).toRgb();
           const { h, s, l } = tinycolor(color).toHsl();
           acc[colorName] = {
+            name: prettyNames[currentIndex],
+            order: currentIndex,
             hex: color,
             rgb: { r, g, b },
             hsl: { h, s, l },