diff --git a/deno.lock b/deno.lock
index 5371c40..2162ea9 100644
--- a/deno.lock
+++ b/deno.lock
@@ -41,6 +41,7 @@
     "npm:mini-svg-data-uri@^1.4.4": "1.4.4",
     "npm:motion@^12.23.12": "12.23.12",
     "npm:polished@^4.3.1": "4.3.1",
+    "npm:scule@^1.3.0": "1.3.0",
     "npm:shiki@^3.8.1": "3.8.1",
     "npm:xstate@^5.20.2": "5.20.2"
   },
@@ -1229,7 +1230,8 @@
         "dependencies": [
           "npm:@terrazzo/parser@~0.10.2",
           "npm:@terrazzo/plugin-css@~0.10.2",
-          "npm:@terrazzo/plugin-js@~0.10.1"
+          "npm:@terrazzo/plugin-js@~0.10.1",
+          "npm:scule@^1.3.0"
         ]
       },
       "packages/wc": {
diff --git a/packages/theme/deno.json b/packages/theme/deno.json
index b175a26..e1022dd 100644
--- a/packages/theme/deno.json
+++ b/packages/theme/deno.json
@@ -8,7 +8,8 @@
   "imports": {
     "@terrazzo/parser": "npm:@terrazzo/parser@^0.10.2",
     "@terrazzo/plugin-css": "npm:@terrazzo/plugin-css@^0.10.2",
-    "@terrazzo/plugin-js": "npm:@terrazzo/plugin-js@^0.10.1"
+    "@terrazzo/plugin-js": "npm:@terrazzo/plugin-js@^0.10.1",
+    "scule": "npm:scule@^1.3.0"
   },
   "tasks": {
     "build": "deno run --allow-env --allow-read --allow-write ./typescript.ts"
diff --git a/packages/theme/tokens.gen.ts b/packages/theme/tokens.gen.ts
index 9400242..af6790b 100644
--- a/packages/theme/tokens.gen.ts
+++ b/packages/theme/tokens.gen.ts
@@ -1,20 +1,23 @@
 import { unsafeCSS } from "lit";
-type TokenName =
-  | "color.base"
-  | "color.surface"
-  | "color.overlay"
-  | "color.muted"
-  | "color.subtle"
-  | "color.text"
-  | "color.danger"
-  | "color.warning"
-  | "color.success"
-  | "color.match"
-  | "color.bright"
-  | "color.link"
-  | "color.highlight.low"
-  | "color.highlight.med"
-  | "color.highlight.high"
-export function token(name: TokenName) {
-  return unsafeCSS(`var(--morkdeck-${name.replace(/\./g, "-")})`);
+
+type ColorName =
+  | "base"
+  | "surface"
+  | "overlay"
+  | "muted"
+  | "subtle"
+  | "text"
+  | "danger"
+  | "warning"
+  | "success"
+  | "match"
+  | "bright"
+  | "link"
+  | "highlight.low"
+  | "highlight.med"
+  | "highlight.high"
+
+
+export function color(id: ColorName) {
+  return unsafeCSS(`var(--morkdeck-color-${id.replace(/\./g, "-")})`);
 };
\ No newline at end of file
diff --git a/packages/theme/typescript.ts b/packages/theme/typescript.ts
index de1c129..e0e3530 100644
--- a/packages/theme/typescript.ts
+++ b/packages/theme/typescript.ts
@@ -5,25 +5,42 @@ import {
   parse,
   type Plugin,
 } from "@terrazzo/parser";
+import { camelCase, pascalCase } from "scule";
 
 function cssVariableFn() {
   return {
     name: "css-variable-fn-typescript",
     build({ tokens, outputFile }) {
-      const output: string[] = [];
-
-      output.push(`import { unsafeCSS } from "lit";`);
-      output.push("type TokenName =");
+      const helpers = new Map<string, string[]>();
 
       for (const token of Object.values(tokens)) {
-        output.push(`  | "${token.$type}.${token.id}"`);
+        const tokenStr = `  | "${token.id}"`;
+        const tokenIds = helpers.get(token.$type);
+
+        if (tokenIds) {
+          tokenIds.push(tokenStr);
+        } else {
+          helpers.set(token.$type, [tokenStr]);
+        }
       }
 
-      output.push(`export function token(name: TokenName) {`);
-      output.push(
-        '  return unsafeCSS(`var(--morkdeck-${name.replace(/\\./g, "-")})`);',
-      );
-      output.push("};");
+      const output = [
+        'import { unsafeCSS } from "lit";\n',
+      ];
+
+      for (const [$type, lines] of helpers.entries()) {
+        const functionName = camelCase($type);
+        const typeName = pascalCase(`${$type}Name`);
+
+        output.push(
+          `type ${typeName} =`,
+          ...lines,
+          "\n",
+          `export function ${functionName}(id: ${typeName}) {`,
+          `  return unsafeCSS(\`var(--morkdeck-${$type}-\${id.replace(/\\./g, "-")})\`);`,
+          "};",
+        );
+      }
 
       outputFile("tokens.gen.ts", output.join("\n"));