diff --git a/deno.json b/deno.json
index a843f76..7040429 100644
--- a/deno.json
+++ b/deno.json
@@ -4,6 +4,7 @@
     "./packages/core",
     "./packages/runtime",
     "./packages/server",
+    "./packages/theme",
     "./packages/wc"
   ],
   "tasks": {
@@ -20,6 +21,7 @@
     ]
   },
   "imports": {
+    "lit": "npm:lit@^3.3.1",
     "xstate": "npm:xstate@^5.20.2"
   }
 }
diff --git a/deno.lock b/deno.lock
index 901bfb7..5371c40 100644
--- a/deno.lock
+++ b/deno.lock
@@ -27,6 +27,9 @@
     "jsr:@std/text@~1.0.7": "1.0.15",
     "npm:@lit/context@^1.1.6": "1.1.6",
     "npm:@markdoc/markdoc@*": "0.5.2",
+    "npm:@terrazzo/parser@~0.10.2": "0.10.2",
+    "npm:@terrazzo/plugin-css@~0.10.2": "0.10.2_@terrazzo+cli@0.10.2",
+    "npm:@terrazzo/plugin-js@~0.10.1": "0.10.1_@terrazzo+cli@0.10.2",
     "npm:@types/blobshape@^1.0.3": "1.0.3",
     "npm:@types/hast@^3.0.4": "3.0.4",
     "npm:@types/node@*": "22.15.15",
@@ -145,6 +148,21 @@
     "@babel/runtime@7.28.3": {
       "integrity": "sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA=="
     },
+    "@clack/core@0.4.1": {
+      "integrity": "sha512-Pxhij4UXg8KSr7rPek6Zowm+5M22rbd2g1nfojHJkxp5YkFqiZ2+YLEM/XGVIzvGOcM0nqjIFxrpDwWRZYWYjA==",
+      "dependencies": [
+        "picocolors",
+        "sisteransi"
+      ]
+    },
+    "@clack/prompts@0.9.1": {
+      "integrity": "sha512-JIpyaboYZeWYlyP0H+OoPPxd6nqueG/CmN6ixBiNFsIDHREevjIf0n0Ohh5gr5C8pEDknzgvz+pIJ8dMhzWIeg==",
+      "dependencies": [
+        "@clack/core",
+        "picocolors",
+        "sisteransi"
+      ]
+    },
     "@esbuild/aix-ppc64@0.25.8": {
       "integrity": "sha512-urAvrUedIqEiFR3FYSLTWQgLu5tb+m0qZw0NBEasUeo6wuqatkMDaRT+1uABiGXEu5vqgPd7FGE1BhsAIy9QVA==",
       "os": ["aix"],
@@ -405,6 +423,15 @@
       "os": ["win32"],
       "cpu": ["x64"]
     },
+    "@hono/node-server@1.18.2_hono@4.8.4": {
+      "integrity": "sha512-icgNvC0vRYivzyuSSaUv9ttcwtN8fDyd1k3AOIBDJgYd84tXRZSS6na8X54CY/oYoFTNhEmZraW/Rb9XYwX4KA==",
+      "dependencies": [
+        "hono"
+      ]
+    },
+    "@humanwhocodes/momoa@3.3.9": {
+      "integrity": "sha512-LHw6Op4bJb3/3KZgOgwflJx5zY9XOy0NU1NuyUFKGdTwHYmP+PbnQGCYQJ8NVNlulLfQish34b0VuUlLYP3AXA=="
+    },
     "@lit-labs/ssr-dom-shim@1.4.0": {
       "integrity": "sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw=="
     },
@@ -473,9 +500,76 @@
     "@shikijs/vscode-textmate@10.0.2": {
       "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="
     },
+    "@terrazzo/cli@0.10.2": {
+      "integrity": "sha512-LgUwwdW1GvOo5KghWcTg4Xuy951Arr4cimRymyQvUk4IZkYMOyH7btUmMLTEAAO4W7cV5F/U9u1cSPOxh6866A==",
+      "dependencies": [
+        "@clack/prompts",
+        "@hono/node-server",
+        "@humanwhocodes/momoa",
+        "@terrazzo/parser",
+        "@terrazzo/token-tools",
+        "@types/escodegen",
+        "chokidar",
+        "detect-package-manager",
+        "dotenv",
+        "escodegen",
+        "merge-anything",
+        "meriyah",
+        "mime",
+        "picocolors",
+        "yaml-to-momoa"
+      ],
+      "bin": true
+    },
+    "@terrazzo/parser@0.10.2": {
+      "integrity": "sha512-aEJzLWVzS0NF/HJVSySnWkf03MRbUnYmG781P2ytqATnvhBb9YSdjmBW/1e/WTmDOksCWrSEyWjaxomPqss0mQ==",
+      "dependencies": [
+        "@humanwhocodes/momoa",
+        "@terrazzo/token-tools",
+        "@types/babel__code-frame",
+        "@types/culori",
+        "culori",
+        "merge-anything",
+        "picocolors",
+        "scule",
+        "wildcard-match"
+      ]
+    },
+    "@terrazzo/plugin-css@0.10.2_@terrazzo+cli@0.10.2": {
+      "integrity": "sha512-RSkIRMMipz300zfL0gX27HPq9xLRV9PwB5RkQuaryAjzHbjM8Cv5cyAVECukFUC0PDH4/FklCFEvvREG+erFrg==",
+      "dependencies": [
+        "@terrazzo/cli",
+        "@terrazzo/token-tools",
+        "wildcard-match"
+      ]
+    },
+    "@terrazzo/plugin-js@0.10.1_@terrazzo+cli@0.10.2": {
+      "integrity": "sha512-GRIw+BJQLoYXw3nzAZ2I40uyKSuX5hptJiCBMtykQ5pmvdLEe48pjMiiy4nhxWN3oNEVxGOabu/sOH3ygZvRLg==",
+      "dependencies": [
+        "@terrazzo/cli",
+        "@terrazzo/token-tools"
+      ]
+    },
+    "@terrazzo/token-tools@0.10.2": {
+      "integrity": "sha512-flEzbPxB9d9G7/c/wmWWchyzLCf6Lqma3y1ZMgNuXWLKv3Pw+ExOWBGGHac3zofk+cfKVfEBx1s4B57tt+IOiA==",
+      "dependencies": [
+        "@humanwhocodes/momoa",
+        "culori",
+        "wildcard-match"
+      ]
+    },
+    "@types/babel__code-frame@7.0.6": {
+      "integrity": "sha512-Anitqkl3+KrzcW2k77lRlg/GfLZLWXBuNgbEcIOU6M92yw42vsd3xV/Z/yAHEj8m+KUjL6bWOVOFqX8PFPJ4LA=="
+    },
     "@types/blobshape@1.0.3": {
       "integrity": "sha512-jbJZ9AIebK77LoeN8PjPyAs88GJCDKO+ZpWCJlLlV2FXkeYScQsvkZmlGHGvSRk/WFmUOdbGJ75umLATGX1lsw=="
     },
+    "@types/culori@4.0.0": {
+      "integrity": "sha512-aFljQwjb++sl6TAyEXeHTiK/fk9epZOQ+nMmadjnAvzZFIvNoQ0x8XQYfcOaRTBwmDUPUlghhZCJ66MTcqQAsg=="
+    },
+    "@types/escodegen@0.0.10": {
+      "integrity": "sha512-IVvcNLEFbiL17qiGRGzyfx/u9K6lA5w6wcQSIgv2h4JG3ZAFIY1Be9ITTSPuARIxRpzW54s8OvcF6PdonBbDzg=="
+    },
     "@types/hast@3.0.4": {
       "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
       "dependencies": [
@@ -516,6 +610,22 @@
     "@ungap/structured-clone@1.3.0": {
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="
     },
+    "anymatch@3.1.3": {
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dependencies": [
+        "normalize-path",
+        "picomatch"
+      ]
+    },
+    "binary-extensions@2.3.0": {
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="
+    },
+    "braces@3.0.3": {
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dependencies": [
+        "fill-range"
+      ]
+    },
     "ccount@2.0.1": {
       "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="
     },
@@ -525,18 +635,53 @@
     "character-entities-legacy@3.0.0": {
       "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="
     },
+    "chokidar@3.6.0": {
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dependencies": [
+        "anymatch",
+        "braces",
+        "glob-parent",
+        "is-binary-path",
+        "is-glob",
+        "normalize-path",
+        "readdirp"
+      ],
+      "optionalDependencies": [
+        "fsevents"
+      ]
+    },
     "comma-separated-tokens@2.0.3": {
       "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="
     },
+    "cross-spawn@7.0.6": {
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dependencies": [
+        "path-key",
+        "shebang-command",
+        "which"
+      ]
+    },
+    "culori@4.0.2": {
+      "integrity": "sha512-1+BhOB8ahCn4O0cep0Sh2l9KCOfOdY+BXJnKMHFFzDEouSr/el18QwXEMRlOj9UY5nCeA8UN3a/82rUWRBeyBw=="
+    },
     "dequal@2.0.3": {
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
     },
+    "detect-package-manager@3.0.2": {
+      "integrity": "sha512-8JFjJHutStYrfWwzfretQoyNGoZVW1Fsrp4JO9spa7h/fBfwgTMEIy4/LBzRDGsxwVPHU0q+T9YvwLDJoOApLQ==",
+      "dependencies": [
+        "execa"
+      ]
+    },
     "devlop@1.1.0": {
       "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
       "dependencies": [
         "dequal"
       ]
     },
+    "dotenv@16.6.1": {
+      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow=="
+    },
     "esbuild@0.25.8": {
       "integrity": "sha512-vVC0USHGtMi8+R4Kz8rt6JhEWLxsv9Rnu/lGYbPR8u47B+DCBksq9JarW0zOO7bs37hyOK1l2/oqtbciutL5+Q==",
       "optionalDependencies": [
@@ -603,6 +748,48 @@
       "scripts": true,
       "bin": true
     },
+    "escodegen@2.1.0": {
+      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "dependencies": [
+        "esprima",
+        "estraverse",
+        "esutils"
+      ],
+      "optionalDependencies": [
+        "source-map"
+      ],
+      "bin": true
+    },
+    "esprima@4.0.1": {
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "bin": true
+    },
+    "estraverse@5.3.0": {
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="
+    },
+    "esutils@2.0.3": {
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
+    },
+    "execa@5.1.1": {
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dependencies": [
+        "cross-spawn",
+        "get-stream",
+        "human-signals",
+        "is-stream",
+        "merge-stream",
+        "npm-run-path",
+        "onetime",
+        "signal-exit",
+        "strip-final-newline"
+      ]
+    },
+    "fill-range@7.1.1": {
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dependencies": [
+        "to-regex-range"
+      ]
+    },
     "framer-motion@12.23.12": {
       "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==",
       "dependencies": [
@@ -611,6 +798,20 @@
         "tslib"
       ]
     },
+    "fsevents@2.3.3": {
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "os": ["darwin"],
+      "scripts": true
+    },
+    "get-stream@6.0.1": {
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="
+    },
+    "glob-parent@5.1.2": {
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": [
+        "is-glob"
+      ]
+    },
     "hast-util-is-element@3.0.0": {
       "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
       "dependencies": [
@@ -639,9 +840,42 @@
         "@types/hast"
       ]
     },
+    "hono@4.8.4": {
+      "integrity": "sha512-KOIBp1+iUs0HrKztM4EHiB2UtzZDTBihDtOF5K6+WaJjCPeaW4Q92R8j63jOhvJI5+tZSMuKD9REVEXXY9illg=="
+    },
     "html-void-elements@3.0.0": {
       "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg=="
     },
+    "human-signals@2.1.0": {
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
+    },
+    "is-binary-path@2.1.0": {
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": [
+        "binary-extensions"
+      ]
+    },
+    "is-extglob@2.1.1": {
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
+    },
+    "is-glob@4.0.3": {
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dependencies": [
+        "is-extglob"
+      ]
+    },
+    "is-number@7.0.0": {
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+    },
+    "is-stream@2.0.1": {
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg=="
+    },
+    "is-what@4.1.16": {
+      "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A=="
+    },
+    "isexe@2.0.0": {
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+    },
     "lit-element@4.2.1": {
       "integrity": "sha512-WGAWRGzirAgyphK2urmYOV72tlvnxw7YfyLDgQ+OZnM9vQQBQnumQ7jUJe6unEzwGU3ahFOjuz1iz1jjrpCPuw==",
       "dependencies": [
@@ -678,6 +912,18 @@
         "vfile"
       ]
     },
+    "merge-anything@5.1.7": {
+      "integrity": "sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==",
+      "dependencies": [
+        "is-what"
+      ]
+    },
+    "merge-stream@2.0.0": {
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+    },
+    "meriyah@6.1.4": {
+      "integrity": "sha512-Sz8FzjzI0kN13GK/6MVEsVzMZEPvOhnmmI1lU5+/1cGOiK3QUahntrNNtdVeihrO7t9JpoH75iMNXg6R6uWflQ=="
+    },
     "micromark-util-character@2.1.1": {
       "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
       "dependencies": [
@@ -702,6 +948,13 @@
     "micromark-util-types@2.0.2": {
       "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA=="
     },
+    "mime@4.0.7": {
+      "integrity": "sha512-2OfDPL+e03E0LrXaGYOtTFIYhiuzep94NSsuhrNULq+stylcJedcHdzHtz0atMUuGwJfFYs0YL5xeC/Ca2x0eQ==",
+      "bin": true
+    },
+    "mimic-fn@2.1.0": {
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
+    },
     "mini-svg-data-uri@1.4.4": {
       "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
       "bin": true
@@ -722,6 +975,21 @@
         "tslib"
       ]
     },
+    "normalize-path@3.0.0": {
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+    },
+    "npm-run-path@4.0.1": {
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dependencies": [
+        "path-key"
+      ]
+    },
+    "onetime@5.1.2": {
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dependencies": [
+        "mimic-fn"
+      ]
+    },
     "oniguruma-parser@0.12.1": {
       "integrity": "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w=="
     },
@@ -733,6 +1001,15 @@
         "regex-recursion"
       ]
     },
+    "path-key@3.1.1": {
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
+    },
+    "picocolors@1.1.1": {
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+    },
+    "picomatch@2.3.1": {
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
+    },
     "polished@4.3.1": {
       "integrity": "sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==",
       "dependencies": [
@@ -742,6 +1019,12 @@
     "property-information@7.1.0": {
       "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ=="
     },
+    "readdirp@3.6.0": {
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": [
+        "picomatch"
+      ]
+    },
     "regex-recursion@6.0.2": {
       "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==",
       "dependencies": [
@@ -757,6 +1040,18 @@
         "regex-utilities"
       ]
     },
+    "scule@1.3.0": {
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g=="
+    },
+    "shebang-command@2.0.0": {
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dependencies": [
+        "shebang-regex"
+      ]
+    },
+    "shebang-regex@3.0.0": {
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
+    },
     "shiki@3.8.1": {
       "integrity": "sha512-+MYIyjwGPCaegbpBeFN9+oOifI8CKiKG3awI/6h3JeT85c//H2wDW/xCJEGuQ5jPqtbboKNqNy+JyX9PYpGwNg==",
       "dependencies": [
@@ -770,6 +1065,15 @@
         "@types/hast"
       ]
     },
+    "signal-exit@3.0.7": {
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
+    },
+    "sisteransi@1.0.5": {
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
+    },
+    "source-map@0.6.1": {
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    },
     "space-separated-tokens@2.0.2": {
       "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q=="
     },
@@ -780,6 +1084,15 @@
         "character-entities-legacy"
       ]
     },
+    "strip-final-newline@2.0.0": {
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA=="
+    },
+    "to-regex-range@5.0.1": {
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": [
+        "is-number"
+      ]
+    },
     "trim-lines@3.0.1": {
       "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg=="
     },
@@ -836,9 +1149,30 @@
         "vfile-message"
       ]
     },
+    "which@2.0.2": {
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dependencies": [
+        "isexe"
+      ],
+      "bin": true
+    },
+    "wildcard-match@5.1.4": {
+      "integrity": "sha512-wldeCaczs8XXq7hj+5d/F38JE2r7EXgb6WQDM84RVwxy81T/sxB5e9+uZLK9Q9oNz1mlvjut+QtvgaOQFPVq/g=="
+    },
     "xstate@5.20.2": {
       "integrity": "sha512-GZmLmc+WPKfFRxuTDAxCg0cUhS/ZnWaRD86DO8MKizeK4a050jd5k7UNnIQ2jJDWRig2/r0tmVXeezUNIhoz5Q=="
     },
+    "yaml-to-momoa@0.0.6": {
+      "integrity": "sha512-H6OxymcTIB5fTCQV7/+ETO9Wh6v1vpBDpmW94XnscKE+jQl6x58us/G6r6z5IiPCi5wuSvJ+0wipUsp0s2/Yyg==",
+      "dependencies": [
+        "@humanwhocodes/momoa",
+        "yaml"
+      ]
+    },
+    "yaml@2.8.0": {
+      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
+      "bin": true
+    },
     "zwitch@2.0.4": {
       "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="
     }
@@ -858,6 +1192,7 @@
   },
   "workspace": {
     "dependencies": [
+      "npm:lit@^3.3.1",
       "npm:xstate@^5.20.2"
     ],
     "members": {
@@ -890,6 +1225,13 @@
           "npm:esbuild@~0.25.9"
         ]
       },
+      "packages/theme": {
+        "dependencies": [
+          "npm:@terrazzo/parser@~0.10.2",
+          "npm:@terrazzo/plugin-css@~0.10.2",
+          "npm:@terrazzo/plugin-js@~0.10.1"
+        ]
+      },
       "packages/wc": {
         "dependencies": [
           "jsr:@es-toolkit/es-toolkit@^1.39.9",
diff --git a/packages/core/favicon.ts b/packages/core/favicon.ts
index 3c9d172..3243e23 100644
--- a/packages/core/favicon.ts
+++ b/packages/core/favicon.ts
@@ -19,17 +19,18 @@ export async function generateFavicon(
   const encoder = new TextEncoder();
   const hash = await crypto.subtle.digest("SHA-256", encoder.encode(content));
   const hashStr = encodeHex(hash);
-  
+
   // Generate colors
   const baseColor = hsl(...colorHash.hsl(hashStr));
   const complementaryColor = adjustHue(180, baseColor);
-  
+
   // Generate shapes and construct SVG directly
   const rectRadius = size * 0.25;
   const center = size / 2;
   const circleRadius = size * 0.25;
-  
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewbox="0 0 ${size} ${size}">` +
+
+  const svg =
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewbox="0 0 ${size} ${size}">` +
     `<path d="M ${rectRadius.toFixed(2)} 0 ` +
     `L ${(size - rectRadius).toFixed(2)} 0 ` +
     `Q ${size} 0 ${size} ${rectRadius.toFixed(2)} ` +
@@ -39,8 +40,10 @@ export async function generateFavicon(
     `Q 0 ${size} 0 ${(size - rectRadius).toFixed(2)} ` +
     `L 0 ${rectRadius.toFixed(2)} ` +
     `Q 0 0 ${rectRadius.toFixed(2)} 0 Z" fill="${baseColor}" />` +
-    `<circle cx="${center}" cy="${center}" r="${circleRadius.toFixed(2)}" fill="${complementaryColor}" />` +
+    `<circle cx="${center}" cy="${center}" r="${
+      circleRadius.toFixed(2)
+    }" fill="${complementaryColor}" />` +
     `</svg>`;
 
   return svgToUri(svg);
-}
\ No newline at end of file
+}
diff --git a/packages/core/renderer.ts b/packages/core/renderer.ts
index 5bffd2f..01bcf72 100644
--- a/packages/core/renderer.ts
+++ b/packages/core/renderer.ts
@@ -3,6 +3,7 @@ import { createMarkdocConfig } from "./markdoc-config.ts";
 import { generateFavicon } from "./favicon.ts";
 import { Eta } from "@eta-dev/eta";
 import { resolve } from "@std/path";
+import { compileCss } from "@morkdeck/theme";
 import type { RenderOptions } from "./types.ts";
 
 const eta = new Eta({
@@ -13,7 +14,6 @@ export async function renderPresentationHtml(
   path: string,
   options?: RenderOptions,
 ) {
-  const encoder = new TextEncoder();
   const file = await Deno.readTextFile(path);
   const ast = Markdoc.parse(file);
 
@@ -48,11 +48,13 @@ export async function renderPresentationHtml(
 
   // Generate favicon
   const favicon = await generateFavicon(file, 16);
+  const tokens = await compileCss();
 
   return eta.render("presentation", {
     body: Markdoc.renderers.html(await Promise.resolve(tree)),
     title,
     includes,
     favicon,
+    tokens,
   });
 }
diff --git a/packages/core/templates/partials/slide-styles.eta b/packages/core/templates/partials/slide-styles.eta
index eebdf1c..6e9dbe6 100644
--- a/packages/core/templates/partials/slide-styles.eta
+++ b/packages/core/templates/partials/slide-styles.eta
@@ -3,17 +3,19 @@
 <link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet">
 
 <style>
+  <%= it.tokens %>
+
   body {
     margin: 0;
     box-sizing: border-box;
     font-family: "Recursive", sans-serif;
-    background-color: #191724;
-    color: #908caa;
+    background-color: var(--morkdeck-color-base);
+    color: var(--morkdeck-color-subtle);
   }
 
   h1, h2, h3, h4, h5, h6 {
     display: block;
-    color: #e0def4;
+    color: var(--morkdeck-color-text);
     margin-bottom: 2cqi;
   }
 
diff --git a/packages/core/templates/presentation.eta b/packages/core/templates/presentation.eta
index 3fdf92c..3b829eb 100644
--- a/packages/core/templates/presentation.eta
+++ b/packages/core/templates/presentation.eta
@@ -5,7 +5,7 @@
 
     <%~ include("./partials/favicon", { favicon: it.favicon }) %>
 
-    <%~ include("./partials/slide-styles") %>
+    <%~ include("./partials/slide-styles", { tokens: it.tokens }) %>
 
     <script src="static/bundle.js"></script>
   </head>
diff --git a/packages/theme/deno.json b/packages/theme/deno.json
new file mode 100644
index 0000000..b175a26
--- /dev/null
+++ b/packages/theme/deno.json
@@ -0,0 +1,16 @@
+{
+  "name": "@morkdeck/theme",
+  "version": "0.0.0",
+  "exports": {
+    ".": "./mod.ts",
+    "./css": "./tokens.gen.ts"
+  },
+  "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"
+  },
+  "tasks": {
+    "build": "deno run --allow-env --allow-read --allow-write ./typescript.ts"
+  }
+}
diff --git a/packages/theme/mod.ts b/packages/theme/mod.ts
new file mode 100644
index 0000000..d13772c
--- /dev/null
+++ b/packages/theme/mod.ts
@@ -0,0 +1 @@
+export * from "./stylesheet.ts";
diff --git a/packages/theme/stylesheet.ts b/packages/theme/stylesheet.ts
new file mode 100644
index 0000000..8cd16bd
--- /dev/null
+++ b/packages/theme/stylesheet.ts
@@ -0,0 +1,53 @@
+import {
+  build,
+  type Config,
+  defineConfig,
+  parse,
+  type TokenNormalized,
+} from "@terrazzo/parser";
+import pluginCss from "@terrazzo/plugin-css";
+
+export function prefixToken(token: TokenNormalized) {
+  return `--morkdeck-${token.$type}-${token.id.replace(/\./g, "-")}`;
+}
+
+const configBase: Config = {
+  plugins: [
+    pluginCss({
+      variableName: prefixToken,
+      baseSelector: ":root",
+    }),
+  ],
+};
+
+export async function compileCss(themePath?: string) {
+  const config = defineConfig(configBase, {
+    cwd: new URL(import.meta.url),
+  });
+
+  const tokensUrl = new URL("./tokens", import.meta.url);
+  const files: Array<{ src: string; filename: URL }> = [];
+  const tokenSources = Deno.readDir(tokensUrl);
+  for await (const source of tokenSources) {
+    if (source.isFile) {
+      const filename = new URL(`tokens/${source.name}`, tokensUrl);
+      files.push({
+        filename,
+        src: await Deno.readTextFile(filename),
+      });
+    }
+  }
+
+  if (themePath) {
+    const themeUrl = new URL(themePath, Deno.cwd());
+    files.push({
+      filename: new URL(themePath, Deno.cwd()),
+      src: await Deno.readTextFile(themeUrl),
+    });
+  }
+
+  const { tokens, sources } = await parse(files, { config });
+  const buildResult = await build(tokens, { sources, config });
+
+  return buildResult.outputFiles.map((f) => f.contents).join("\n\n");
+}
diff --git a/packages/theme/tokens.gen.ts b/packages/theme/tokens.gen.ts
new file mode 100644
index 0000000..9400242
--- /dev/null
+++ b/packages/theme/tokens.gen.ts
@@ -0,0 +1,20 @@
+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, "-")})`);
+};
\ No newline at end of file
diff --git a/packages/theme/tokens/colors.json b/packages/theme/tokens/colors.json
new file mode 100644
index 0000000..4efb8c0
--- /dev/null
+++ b/packages/theme/tokens/colors.json
@@ -0,0 +1,124 @@
+{
+  "base": {
+    "$type": "color",
+    "$value": {
+      "colorSpace": "hsl",
+      "components": [249, 22, 12],
+      "hex": "#191724"
+    }
+  },
+  "surface": {
+    "$type": "color",
+    "$value": {
+      "colorSpace": "hsl",
+      "components": [247, 23, 15],
+      "hex": "#1f1d2e"
+    }
+  },
+  "overlay": {
+    "$type": "color",
+    "$value": {
+      "colorSpace": "hsl",
+      "components": [248, 25, 18],
+      "hex": "#26233a"
+    }
+  },
+  "muted": {
+    "$type": "color",
+    "$value": {
+      "colorSpace": "hsl",
+      "components": [249, 12, 47],
+      "hex": "#6e6a86"
+    }
+  },
+  "subtle": {
+    "$type": "color",
+    "$value": {
+      "colorSpace": "hsl",
+      "components": [248, 15, 61],
+      "hex": "#908caa"
+    }
+  },
+  "text": {
+    "$type": "color",
+    "$value": {
+      "colorSpace": "hsl",
+      "components": [245, 50, 91],
+      "hex": "#e0def4"
+    }
+  },
+  "danger": {
+    "$type": "color",
+    "$value": {
+      "colorSpace": "hsl",
+      "components": [343, 76, 68],
+      "hex": "#eb6f92"
+    }
+  },
+  "warning": {
+    "$type": "color",
+    "$value": {
+      "colorSpace": "hsl",
+      "components": [35, 88, 72],
+      "hex": "#f6c177"
+    }
+  },
+  "success": {
+    "$type": "color",
+    "$value": {
+      "colorSpace": "hsl",
+      "components": [197, 49, 38],
+      "hex": "#31748f"
+    }
+  },
+  "match": {
+    "$type": "color",
+    "$value": {
+      "colorSpace": "hsl",
+      "components": [2, 55, 83],
+      "hex": "#ebbcba"
+    }
+  },
+  "bright": {
+    "$type": "color",
+    "$value": {
+      "colorSpace": "hsl",
+      "components": [189, 43, 73],
+      "hex": "#9ccfd8"
+    }
+  },
+  "link": {
+    "$type": "color",
+    "$value": {
+      "colorSpace": "hsl",
+      "components": [267, 57, 78],
+      "hex": "#c4a7e7"
+    }
+  },
+  "highlight": {
+    "low": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "hsl",
+        "components": [244, 18, 15],
+        "hex": "#21202e"
+      }
+    },
+    "med": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "hsl",
+        "components": [249, 15, 28],
+        "hex": "#403d52"
+      }
+    },
+    "high": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "hsl",
+        "components": [248, 13, 36],
+        "hex": "#524f67"
+      }
+    }
+  }
+}
diff --git a/packages/theme/typescript.ts b/packages/theme/typescript.ts
new file mode 100644
index 0000000..de1c129
--- /dev/null
+++ b/packages/theme/typescript.ts
@@ -0,0 +1,67 @@
+import {
+  build,
+  type Config,
+  defineConfig,
+  parse,
+  type Plugin,
+} from "@terrazzo/parser";
+
+function cssVariableFn() {
+  return {
+    name: "css-variable-fn-typescript",
+    build({ tokens, outputFile }) {
+      const output: string[] = [];
+
+      output.push(`import { unsafeCSS } from "lit";`);
+      output.push("type TokenName =");
+
+      for (const token of Object.values(tokens)) {
+        output.push(`  | "${token.$type}.${token.id}"`);
+      }
+
+      output.push(`export function token(name: TokenName) {`);
+      output.push(
+        '  return unsafeCSS(`var(--morkdeck-${name.replace(/\\./g, "-")})`);',
+      );
+      output.push("};");
+
+      outputFile("tokens.gen.ts", output.join("\n"));
+
+      return Promise.resolve();
+    },
+  } satisfies Plugin;
+}
+
+const configBase: Config = {
+  plugins: [
+    cssVariableFn(),
+  ],
+};
+
+export async function compileJs() {
+  const config = defineConfig(configBase, {
+    cwd: new URL(import.meta.url),
+  });
+
+  const tokensUrl = new URL("./tokens", import.meta.url);
+  const files: Array<{ src: string; filename: URL }> = [];
+  const tokenSources = Deno.readDir(tokensUrl);
+  for await (const source of tokenSources) {
+    if (source.isFile) {
+      const filename = new URL(`tokens/${source.name}`, tokensUrl);
+      files.push({
+        filename,
+        src: await Deno.readTextFile(filename),
+      });
+    }
+  }
+
+  const { tokens, sources } = await parse(files, { config });
+  const buildResult = await build(tokens, { sources, config });
+
+  for (const { filename, contents } of buildResult.outputFiles) {
+    await Deno.writeTextFile(new URL(filename, import.meta.url), contents);
+  }
+}
+
+if (import.meta.main) await compileJs();
diff --git a/packages/wc/components/slide.ts b/packages/wc/components/slide.ts
index 6248dd5..48b3f66 100644
--- a/packages/wc/components/slide.ts
+++ b/packages/wc/components/slide.ts
@@ -1,6 +1,7 @@
 import { css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { consume } from "@lit/context";
+import { token } from "@morkdeck/theme/css";
 import { observerContext } from "../context.ts";
 import { MorkdeckElement } from "../element.ts";
 
@@ -31,7 +32,7 @@ export class Slide extends MorkdeckElement {
       align-items: center;
 
       padding: 6cqmin;
-      background: #1f1d2e;
+      background: ${token("color.surface")};
     }
   `;
 
diff --git a/packages/wc/components/toolbar.ts b/packages/wc/components/toolbar.ts
index 438c139..1b09e12 100644
--- a/packages/wc/components/toolbar.ts
+++ b/packages/wc/components/toolbar.ts
@@ -1,6 +1,7 @@
+import { css, html } from "lit";
 import { customElement } from "lit/decorators.js";
+import { token } from "@morkdeck/theme/css";
 import { MorkdeckElement, subscribe } from "../element.ts";
-import { css, html } from "lit";
 
 @customElement("morkdeck-toolbar")
 export class Toolbar extends MorkdeckElement {
@@ -37,15 +38,15 @@ export class Toolbar extends MorkdeckElement {
       grid-row-start: 2;
       align-items: center;
       justify-content: space-between;
-      background-color: #26233a;
-      border-top: 1px solid #403d52;
+      background-color: ${token("color.overlay")};
+      border-top: 1px solid ${token("color.highlight.med")};
       transition: transform var(--presentation-spring);
     }
 
     .toolset {
       border-left: 1px solid;
       border-right: 1px solid;
-      border-color: #403d52;
+      border-color: ${token("color.highlight.med")};
       display: grid;
       grid-auto-columns: auto;
       grid-auto-flow: column;
@@ -55,7 +56,7 @@ export class Toolbar extends MorkdeckElement {
 
     .toolset > * + * {
       border-left: 1px solid;
-      border-color: #403d52;
+      border-color: ${token("color.highlight.med")};
     }
 
     .tool {