diff --git a/tokens/$metadata.json b/tokens/$metadata.json
index 07b46d20..0cf92c7b 100644
--- a/tokens/$metadata.json
+++ b/tokens/$metadata.json
@@ -12,6 +12,9 @@
     "theme-semantics-dark",
     "theme-semantics-light-hc",
     "theme-semantics-dark-hc",
-    "theme-semantics"
+    "theme-semantics",
+    "theme-m3-light",
+    "theme-m3-dark",
+    "theme-m3-typography"
   ]
 }
\ No newline at end of file
diff --git a/tokens/$themes.json b/tokens/$themes.json
index e9af5111..5d03e36b 100644
--- a/tokens/$themes.json
+++ b/tokens/$themes.json
@@ -1582,5 +1582,36 @@
       "color.bg.canvas.default-level-1": "S:939d26e5073c51a8656a69975c087df7bea3acad,",
       "color.bg.subtle-secondary-level-0": "S:329a9b7516c81e59ed955e2a8be63af59a7533ef,"
     }
+  },
+  {
+    "id": "008a55be10669135dc71f916d5f14e02ce12ce22",
+    "name": "M3 Light",
+    "$figmaStyleReferences": {},
+    "selectedTokenSets": {
+      "theme-light": "source",
+      "theme-semantics-light": "source",
+      "theme-semantics": "source",
+      "theme-m3-light": "enabled"
+    }
+  },
+  {
+    "id": "606e2c16d27574a9cc71921cebd6fc0377bf6700",
+    "name": "M3 Dark",
+    "$figmaStyleReferences": {},
+    "selectedTokenSets": {
+      "theme-semantics": "source",
+      "theme-m3-dark": "enabled",
+      "theme-semantics-dark": "source",
+      "theme-dark": "source"
+    }
+  },
+  {
+    "id": "a1c823ad84d9d8db0ec95a791e1c0f7033e10f70",
+    "name": "M3 Typography",
+    "$figmaStyleReferences": {},
+    "selectedTokenSets": {
+      "platform-android": "source",
+      "theme-m3-typography": "enabled"
+    }
   }
 ]
\ No newline at end of file
diff --git a/tokens/platform-web.json b/tokens/platform-web.json
index 3890abba..36ccc977 100644
--- a/tokens/platform-web.json
+++ b/tokens/platform-web.json
@@ -350,4 +350,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/theme-m3-dark.json b/tokens/theme-m3-dark.json
new file mode 100644
index 00000000..ffe5e90c
--- /dev/null
+++ b/tokens/theme-m3-dark.json
@@ -0,0 +1,621 @@
+{
+  "sys": {
+    "primary": {
+      "value": "{color.bg.action.primary.rest}",
+      "type": "color"
+    },
+    "on-primary": {
+      "value": "{color.text.on-solid.primary}",
+      "type": "color"
+    },
+    "primary-container": {
+      "value": "{color.bg.canvas.default}",
+      "type": "color"
+    },
+    "on-primary-container": {
+      "value": "{color.text.primary}",
+      "type": "color"
+    },
+    "secondary": {
+      "value": "{color.text.secondary}",
+      "type": "color"
+    },
+    "on-secondary": {
+      "value": "{color.text.on-solid.primary}",
+      "type": "color"
+    },
+    "secondary-container": {
+      "value": "{color.bg.subtle-primary}",
+      "type": "color"
+    },
+    "on-secondary-container": {
+      "value": "{color.text.primary}",
+      "type": "color"
+    },
+    "tertiary-container": {
+      "value": "{color.bg.action.primary.rest}",
+      "type": "color"
+    },
+    "on-tertiary-container": {
+      "value": "{color.text.on-solid.primary}",
+      "type": "color"
+    },
+    "error": {
+      "value": "{color.text.critical.primary}",
+      "type": "color"
+    },
+    "on-error": {
+      "value": "{color.text.on-solid.primary}",
+      "type": "color",
+      "description": "color.theme.bg"
+    },
+    "surface": {
+      "value": "{color.bg.canvas.default}",
+      "type": "color"
+    },
+    "on-surface": {
+      "value": "{color.text.primary}",
+      "type": "color"
+    },
+    "on-surface-variant": {
+      "value": "{color.text.secondary}",
+      "type": "color"
+    },
+    "surface-tint": {
+      "value": "{color.gray.1000}",
+      "type": "color",
+      "description": "Not consumed directly in components but is used to calculate the color of surface layers."
+    },
+    "inverse-surface": {
+      "value": "{color.gray.1300}",
+      "type": "color"
+    },
+    "inverse-on-surface": {
+      "value": "{color.text.on-solid.primary}",
+      "type": "color"
+    },
+    "inverse-primary": {
+      "value": "{color.text.on-solid.primary}",
+      "type": "color"
+    },
+    "outline": {
+      "value": "{color.border.interactive.primary}",
+      "type": "color"
+    },
+    "outline-variant": {
+      "value": "{color.alpha.gray.400}",
+      "type": "color"
+    },
+    "surface-container-highest": {
+      "value": "#eeeff0",
+      "type": "color",
+      "description": "Autogenerated by M3."
+    },
+    "surface-container-high": {
+      "value": "#f0f0f1",
+      "type": "color",
+      "description": "Autogenerated by M3."
+    },
+    "surface-container": {
+      "value": "#f1f2f2",
+      "type": "color",
+      "description": "Autogenerated by M3."
+    },
+    "surface-container-low": {
+      "value": "#f3f4f4",
+      "type": "color",
+      "description": "Autogenerated by M3."
+    },
+    "tertiary": {
+      "value": "{color.text.secondary}",
+      "type": "color",
+      "description": "ColorScheme token not found in official Figma kit components."
+    },
+    "on-tertiary": {
+      "value": "{color.text.on-solid.primary}",
+      "type": "color",
+      "description": "ColorScheme token not found in official Figma kit components."
+    },
+    "error-container": {
+      "value": "{color.red.400}",
+      "type": "color",
+      "description": "ColorScheme token not found in official Figma kit components."
+    },
+    "on-error-container": {
+      "value": "{color.text.critical.primary}",
+      "type": "color",
+      "description": "ColorScheme token not found in official Figma kit components."
+    },
+    "background": {
+      "value": "{color.bg.canvas.default}",
+      "type": "color",
+      "description": "ColorScheme token not found in official Figma kit components."
+    },
+    "on-background": {
+      "value": "{color.text.primary}",
+      "type": "color",
+      "description": "ColorScheme token not found in official Figma kit components."
+    },
+    "surface-variant": {
+      "value": "{color.bg.subtle-secondary}",
+      "type": "color",
+      "description": "ColorScheme token not found in official Figma kit components."
+    },
+    "scrim": {
+      "value": "{color.gray.300}",
+      "type": "color",
+      "description": "ColorScheme token not found in official Figma kit components."
+    }
+  },
+  "state-layers": {
+    "primary": {
+      "opacity-008": {
+        "value": "{sys.primary}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.primary}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-016": {
+        "value": "{sys.primary}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.16",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "on-primary": {
+      "opacity-008": {
+        "value": "{sys.on-primary}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.on-primary}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "on-primary-container": {
+      "opacity-008": {
+        "value": "{sys.on-primary-container}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.on-primary-container}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "on-secondary-container": {
+      "opacity-008": {
+        "value": "{sys.on-secondary-container}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.on-secondary-container}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-016": {
+        "value": "{sys.on-secondary-container}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.16",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "on-tertiary-container": {
+      "opacity-008": {
+        "value": "{sys.on-tertiary-container}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.on-tertiary-container}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "error": {
+      "opacity-008": {
+        "value": "{sys.error}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.error}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "on-surface": {
+      "opacity-008": {
+        "value": "{sys.on-surface}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.on-surface}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-016": {
+        "value": "{sys.on-surface}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.16",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "on-surface-variant": {
+      "opacity-008": {
+        "value": "{sys.on-surface-variant}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.on-surface-variant}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-016": {
+        "value": "{sys.on-surface-variant}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.16",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "inverse-on-surface": {
+      "opacity-008": {
+        "value": "{sys.inverse-on-surface}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.inverse-on-surface}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "inverse-primary": {
+      "opacity-008": {
+        "value": "{sys.inverse-primary}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.inverse-primary}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "outline": {
+      "opacity-012": {
+        "value": "{sys.outline}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "surface-variant": {
+      "opacity-012": {
+        "value": "{sys.surface-variant}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    }
+  },
+  "elevation": {
+    "1": {
+      "value": [
+        {
+          "color": "#00000026",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 1,
+          "blur": 3,
+          "spread": 1
+        },
+        {
+          "color": "#0000004d",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 1,
+          "blur": 2,
+          "spread": 0
+        }
+      ],
+      "type": "boxShadow"
+    },
+    "2": {
+      "value": [
+        {
+          "color": "#00000026",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 2,
+          "blur": 6,
+          "spread": 2
+        },
+        {
+          "color": "#0000004d",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 1,
+          "blur": 2,
+          "spread": 0
+        }
+      ],
+      "type": "boxShadow"
+    },
+    "3": {
+      "value": [
+        {
+          "color": "#00000026",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 4,
+          "blur": 8,
+          "spread": 3
+        },
+        {
+          "color": "#0000004d",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 1,
+          "blur": 3,
+          "spread": 0
+        }
+      ],
+      "type": "boxShadow"
+    },
+    "4": {
+      "value": [
+        {
+          "color": "#00000026",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 6,
+          "blur": 10,
+          "spread": 4
+        },
+        {
+          "color": "#0000004d",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 2,
+          "blur": 3,
+          "spread": 0
+        }
+      ],
+      "type": "boxShadow"
+    },
+    "5": {
+      "value": [
+        {
+          "color": "#00000026",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 8,
+          "blur": 12,
+          "spread": 6
+        },
+        {
+          "color": "#0000004d",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 4,
+          "blur": 4,
+          "spread": 0
+        }
+      ],
+      "type": "boxShadow"
+    }
+  }
+}
\ No newline at end of file
diff --git a/tokens/theme-m3-light.json b/tokens/theme-m3-light.json
new file mode 100644
index 00000000..715628b2
--- /dev/null
+++ b/tokens/theme-m3-light.json
@@ -0,0 +1,621 @@
+{
+  "sys": {
+    "primary": {
+      "value": "{color.bg.action.primary.rest}",
+      "type": "color"
+    },
+    "on-primary": {
+      "value": "{color.text.on-solid.primary}",
+      "type": "color"
+    },
+    "primary-container": {
+      "value": "{color.bg.canvas.default}",
+      "type": "color"
+    },
+    "on-primary-container": {
+      "value": "{color.text.primary}",
+      "type": "color"
+    },
+    "secondary": {
+      "value": "{color.text.secondary}",
+      "type": "color"
+    },
+    "on-secondary": {
+      "value": "{color.text.on-solid.primary}",
+      "type": "color"
+    },
+    "secondary-container": {
+      "value": "{color.bg.subtle-primary}",
+      "type": "color"
+    },
+    "on-secondary-container": {
+      "value": "{color.text.primary}",
+      "type": "color"
+    },
+    "tertiary-container": {
+      "value": "{color.bg.action.primary.rest}",
+      "type": "color"
+    },
+    "on-tertiary-container": {
+      "value": "{color.text.on-solid.primary}",
+      "type": "color"
+    },
+    "error": {
+      "value": "{color.text.critical.primary}",
+      "type": "color"
+    },
+    "on-error": {
+      "value": "{color.text.on-solid.primary}",
+      "type": "color",
+      "description": "color.theme.bg"
+    },
+    "surface": {
+      "value": "{color.bg.canvas.default}",
+      "type": "color"
+    },
+    "on-surface": {
+      "value": "{color.text.primary}",
+      "type": "color"
+    },
+    "on-surface-variant": {
+      "value": "{color.text.secondary}",
+      "type": "color"
+    },
+    "surface-tint": {
+      "value": "{color.gray.1000}",
+      "type": "color",
+      "description": "Not consumed directly in components but is used to calculate the color of surface layers."
+    },
+    "inverse-surface": {
+      "value": "{color.gray.1300}",
+      "type": "color"
+    },
+    "inverse-on-surface": {
+      "value": "{color.text.on-solid.primary}",
+      "type": "color"
+    },
+    "inverse-primary": {
+      "value": "{color.text.on-solid.primary}",
+      "type": "color"
+    },
+    "outline": {
+      "value": "{color.border.interactive.primary}",
+      "type": "color"
+    },
+    "outline-variant": {
+      "value": "{color.alpha.gray.400}",
+      "type": "color"
+    },
+    "surface-container-highest": {
+      "value": "#eeeff0",
+      "type": "color",
+      "description": "Autogenerated by M3."
+    },
+    "surface-container-high": {
+      "value": "#f0f0f1",
+      "type": "color",
+      "description": "Autogenerated by M3."
+    },
+    "surface-container": {
+      "value": "#f1f2f2",
+      "type": "color",
+      "description": "Autogenerated by M3."
+    },
+    "surface-container-low": {
+      "value": "#f3f4f4",
+      "type": "color",
+      "description": "Autogenerated by M3."
+    },
+    "tertiary": {
+      "value": "{color.text.secondary}",
+      "type": "color",
+      "description": "ColorScheme token not found in official Figma kit components."
+    },
+    "on-tertiary": {
+      "value": "{color.text.on-solid.primary}",
+      "type": "color",
+      "description": "ColorScheme token not found in official Figma kit components."
+    },
+    "error-container": {
+      "value": "{color.red.400}",
+      "type": "color",
+      "description": "ColorScheme token not found in official Figma kit components."
+    },
+    "on-error-container": {
+      "value": "{color.text.critical.primary}",
+      "type": "color",
+      "description": "ColorScheme token not found in official Figma kit components."
+    },
+    "background": {
+      "value": "{color.bg.canvas.default}",
+      "type": "color",
+      "description": "ColorScheme token not found in official Figma kit components."
+    },
+    "on-background": {
+      "value": "{color.text.primary}",
+      "type": "color",
+      "description": "ColorScheme token not found in official Figma kit components."
+    },
+    "surface-variant": {
+      "value": "{color.bg.subtle-secondary}",
+      "type": "color",
+      "description": "ColorScheme token not found in official Figma kit components."
+    },
+    "scrim": {
+      "value": "{color.gray.1400}",
+      "type": "color",
+      "description": "ColorScheme token not found in official Figma kit components."
+    }
+  },
+  "state-layers": {
+    "primary": {
+      "opacity-008": {
+        "value": "{sys.primary}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.primary}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-016": {
+        "value": "{sys.primary}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.16",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "on-primary": {
+      "opacity-008": {
+        "value": "{sys.on-primary}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.on-primary}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "on-primary-container": {
+      "opacity-008": {
+        "value": "{sys.on-primary-container}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.on-primary-container}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "on-secondary-container": {
+      "opacity-008": {
+        "value": "{sys.on-secondary-container}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.on-secondary-container}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-016": {
+        "value": "{sys.on-secondary-container}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.16",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "on-tertiary-container": {
+      "opacity-008": {
+        "value": "{sys.on-tertiary-container}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.on-tertiary-container}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "error": {
+      "opacity-008": {
+        "value": "{sys.error}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.error}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "on-surface": {
+      "opacity-008": {
+        "value": "{sys.on-surface}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.on-surface}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-016": {
+        "value": "{sys.on-surface}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.16",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "on-surface-variant": {
+      "opacity-008": {
+        "value": "{sys.on-surface-variant}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.on-surface-variant}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-016": {
+        "value": "{sys.on-surface-variant}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.16",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "inverse-on-surface": {
+      "opacity-008": {
+        "value": "{sys.inverse-on-surface}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.inverse-on-surface}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "inverse-primary": {
+      "opacity-008": {
+        "value": "{sys.inverse-primary}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.08",
+              "space": "hsl"
+            }
+          }
+        }
+      },
+      "opacity-012": {
+        "value": "{sys.inverse-primary}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "outline": {
+      "opacity-012": {
+        "value": "{sys.outline}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    },
+    "surface-variant": {
+      "opacity-012": {
+        "value": "{sys.surface-variant}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.12",
+              "space": "hsl"
+            }
+          }
+        }
+      }
+    }
+  },
+  "elevation": {
+    "1": {
+      "value": [
+        {
+          "color": "#00000026",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 1,
+          "blur": 3,
+          "spread": 1
+        },
+        {
+          "color": "#0000004d",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 1,
+          "blur": 2,
+          "spread": 0
+        }
+      ],
+      "type": "boxShadow"
+    },
+    "2": {
+      "value": [
+        {
+          "color": "#00000026",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 2,
+          "blur": 6,
+          "spread": 2
+        },
+        {
+          "color": "#0000004d",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 1,
+          "blur": 2,
+          "spread": 0
+        }
+      ],
+      "type": "boxShadow"
+    },
+    "3": {
+      "value": [
+        {
+          "color": "#00000026",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 4,
+          "blur": 8,
+          "spread": 3
+        },
+        {
+          "color": "#0000004d",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 1,
+          "blur": 3,
+          "spread": 0
+        }
+      ],
+      "type": "boxShadow"
+    },
+    "4": {
+      "value": [
+        {
+          "color": "#00000026",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 6,
+          "blur": 10,
+          "spread": 4
+        },
+        {
+          "color": "#0000004d",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 2,
+          "blur": 3,
+          "spread": 0
+        }
+      ],
+      "type": "boxShadow"
+    },
+    "5": {
+      "value": [
+        {
+          "color": "#00000026",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 8,
+          "blur": 12,
+          "spread": 6
+        },
+        {
+          "color": "#0000004d",
+          "type": "dropShadow",
+          "x": 0,
+          "y": 4,
+          "blur": 4,
+          "spread": 0
+        }
+      ],
+      "type": "boxShadow"
+    }
+  }
+}
\ No newline at end of file
diff --git a/tokens/theme-m3-typography.json b/tokens/theme-m3-typography.json
new file mode 100644
index 00000000..ac76a391
--- /dev/null
+++ b/tokens/theme-m3-typography.json
@@ -0,0 +1,123 @@
+{
+  "display": {
+    "large": {
+      "value": {
+        "fontFamily": "Roboto",
+        "fontWeight": "Regular",
+        "lineHeight": "64",
+        "fontSize": "57",
+        "letterSpacing": "-0.25"
+      },
+      "type": "typography",
+      "description": "No direct counterpart in Compound."
+    },
+    "medium": {
+      "value": {
+        "fontFamily": "Roboto",
+        "fontWeight": "Regular",
+        "lineHeight": "52",
+        "fontSize": "45",
+        "letterSpacing": "0%"
+      },
+      "type": "typography",
+      "description": "No direct counterpart in Compound."
+    },
+    "small": {
+      "value": {
+        "fontFamily": "Roboto",
+        "fontWeight": "Regular",
+        "lineHeight": "44",
+        "fontSize": "36",
+        "letterSpacing": "0%",
+        "description": "No direct counterpart in Compound."
+      },
+      "type": "typography",
+      "description": "No direct counterpart in Compound."
+    }
+  },
+  "headline": {
+    "large": {
+      "value": "{font.heading.xl.regular}",
+      "type": "typography"
+    },
+    "medium": {
+      "value": "{font.heading.lg.regular}",
+      "type": "typography"
+    },
+    "small": {
+      "value": {
+        "fontFamily": "Roboto",
+        "fontWeight": "Regular",
+        "lineHeight": "32",
+        "fontSize": "24",
+        "letterSpacing": "0%"
+      },
+      "type": "typography",
+      "description": "No direct counterpart in Compound."
+    }
+  },
+  "title": {
+    "large": {
+      "value": "{font.heading.md.regular}",
+      "type": "typography"
+    },
+    "medium": {
+      "value": "{font.body.lg.medium}",
+      "type": "typography"
+    },
+    "small": {
+      "value": "{font.body.md.medium}",
+      "type": "typography"
+    }
+  },
+  "body": {
+    "large": {
+      "value": "{font.body.lg.regular}",
+      "type": "typography"
+    },
+    "medium": {
+      "value": "{font.body.md.regular}",
+      "type": "typography"
+    },
+    "small": {
+      "value": "{font.body.sm.regular}",
+      "type": "typography"
+    }
+  },
+  "label": {
+    "large - prominent": {
+      "value": {
+        "fontFamily": "Roboto",
+        "fontWeight": "SemiBold",
+        "lineHeight": "20",
+        "fontSize": "14",
+        "letterSpacing": "0.1"
+      },
+      "type": "typography",
+      "description": "No direct counterpart in Compound."
+    },
+    "large": {
+      "value": "{font.body.md.medium}",
+      "type": "typography"
+    },
+    "medium - prominent": {
+      "value": {
+        "fontFamily": "Roboto",
+        "fontWeight": "SemiBold",
+        "lineHeight": "17",
+        "fontSize": "12",
+        "letterSpacing": "0.5"
+      },
+      "type": "typography",
+      "description": "No direct counterpart in Compound."
+    },
+    "medium": {
+      "value": "{font.body.sm.medium}",
+      "type": "typography"
+    },
+    "small": {
+      "value": "{font.body.xs.medium}",
+      "type": "typography"
+    }
+  }
+}
\ No newline at end of file