diff --git a/.github/workflows/build-themes.yaml b/.github/workflows/build-themes.yaml
deleted file mode 100644
index 2b63c93b..00000000
--- a/.github/workflows/build-themes.yaml
+++ /dev/null
@@ -1,46 +0,0 @@
-name: Build Themes
-
-on:
-  workflow_dispatch:
-  push:
-    branches:
-      - 'figma-tokens'
-    paths:
-      - 'styles/src/tokens.json'
-
-jobs:
-  build-themes:
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: write
-      contents: write
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 2
-
-      - name: Use Node.js 22.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22.x
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Build themes
-        run: npm run build:themes
-
-      - uses: EndBug/add-and-commit@v7
-        with:
-          add: ./styles/dist
-          message: 'Update themes from token file'
-          default_author: github_actions
-
-      - name: Create PR if it doesn't exist
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          if [[ $(gh pr list --json "url" -q ".[].url" --head figma-tokens | wc -c) -eq 0 ]]; then
-            gh pr create --base master --head figma-tokens --title "Autogenerate themes from new tokens" --body "This PR is generated by 'build-themes.yaml' when new changes are made to tokens.json"
-          fi
diff --git a/.github/workflows/create-figma-tokens.yaml b/.github/workflows/create-figma-tokens.yaml
deleted file mode 100644
index 4bbdb8de..00000000
--- a/.github/workflows/create-figma-tokens.yaml
+++ /dev/null
@@ -1,15 +0,0 @@
-name: Recreate figma-tokens branch
-
-on:
-  delete:
-    branch: figma-tokens
-
-jobs:
-  recreate-figma-tokens:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: peterjgrainger/action-create-branch@v2.0.1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          branch: 'figma-tokens'
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 8097be5c..6df8d866 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -8,23 +8,39 @@ jobs:
     if:
       "!contains(github.event.head_commit.message, 'ci skip') &&
       !contains(github.event.head_commit.message, 'skip ci')"
+    permissions:
+      pull-requests: write
+      contents: write
     steps:
-      - uses: actions/checkout@v2
-
-      - name: Prepare repository
-        run: git fetch --unshallow --tags
+      - uses: actions/checkout@v5
+      - run: git fetch --unshallow --tags
 
       - name: Use Node.js 22.x
         uses: actions/setup-node@v4
         with:
           node-version: 22.x
+          cache: npm
 
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Commit theme changes if needed
+        run: |
+          git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git add ./styles/dist
+          if ! git diff --staged --quiet; then
+            git commit -m "Update themes from token file [ci skip]"
+            git push
+          else
+            echo "No changes to commit"
+          fi
 
       - name: Create Release
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: |
-          npm run build && npm run release
+        run: npm run release
diff --git a/.gitignore b/.gitignore
index bf7e4a95..ae783a8c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,6 +35,5 @@ Thumbs.db
 # Ignore temporary script files
 scripts/*.md.mjs
 
-styles/dist
 components/dist
-dist/
+/dist/
diff --git a/styles/dist/blue.css b/styles/dist/blue.css
new file mode 100644
index 00000000..ff283c30
--- /dev/null
+++ b/styles/dist/blue.css
@@ -0,0 +1,180 @@
+.blue-theme {
+  --surface-default: var(--color-neutral-0);
+  --surface-hover: var(--color-neutral-200);
+  --surface-raise: var(--color-neutral-50);
+  --surface-secondary: var(--color-neutral-100);
+  --surface-tertiary: var(--color-neutral-200);
+  --surface-disabled: var(--color-neutral-100);
+  --surface-scrim: color(
+    display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4
+  ); /* #080f1166 with alpha 0.4 */
+  --surface-accent: var(--theme-accent-800);
+  --surface-accent-hover: var(--theme-accent-700);
+  --surface-accent-secondary: var(--theme-accent-200);
+  --surface-accent-secondary-hover: var(--theme-accent-300);
+  --surface-destructive: var(--theme-destructive-800);
+  --surface-destructive-hover: var(--theme-destructive-700);
+  --surface-destructive-secondary: var(--theme-destructive-200);
+  --surface-destructive-secondary-hover: var(--theme-destructive-300);
+  --surface-notice: var(--theme-notice-800);
+  --surface-notice-hover: var(--theme-notice-700);
+  --surface-notice-secondary: var(--theme-notice-200);
+  --surface-notice-secondary-hover: var(--theme-notice-300);
+  --surface-success: var(--theme-success-800);
+  --surface-success-secondary: var(--theme-success-200);
+  --surface-error: var(--theme-error-800);
+  --surface-error-secondary: var(--theme-error-200);
+  --surface-inverse-raise: var(--content-raise);
+  --surface-inverse-primary: var(--content-default);
+  --surface-inverse-secondary: var(--content-secondary);
+  --surface-info: var(--theme-info-800);
+  --surface-info-hover: var(--theme-info-700);
+  --surface-info-secondary: var(--theme-info-200);
+  --surface-info-secondary-hover: var(--theme-info-300);
+  --content-raise: var(--color-neutral-900);
+  --content-default: var(--color-neutral-800);
+  --content-secondary: var(--color-neutral-700);
+  --content-tertiary: var(--color-neutral-600);
+  --content-quaternary: var(--color-neutral-500);
+  --content-disabled: var(--color-neutral-500);
+  --content-accent: var(--theme-accent-800);
+  --content-accent-secondary: var(--theme-accent-700);
+  --content-accent-tertiary: var(--theme-accent-600);
+  --content-accent-disabled: var(--theme-accent-500);
+  --content-destructive: var(--theme-destructive-800);
+  --content-destructive-secondary: var(--theme-destructive-700);
+  --content-destructive-tertiary: var(--theme-destructive-600);
+  --content-destructive-disabled: var(--theme-destructive-500);
+  --content-success: var(--theme-success-800);
+  --content-success-secondary: var(--theme-success-700);
+  --content-success-tertiary: var(--theme-success-600);
+  --content-success-disabled: var(--theme-success-500);
+  --content-error: var(--theme-error-800);
+  --content-error-secondary: var(--theme-error-700);
+  --content-error-tertiary: var(--theme-error-600);
+  --content-error-disabled: var(--theme-error-500);
+  --content-notice: var(--theme-notice-800);
+  --content-notice-secondary: var(--theme-notice-700);
+  --content-notice-tertiary: var(--theme-notice-600);
+  --content-notice-disabled: var(--theme-notice-500);
+  --content-inverse: var(--surface-default);
+  --content-inverse-raise: var(--surface-raise);
+  --content-inverse-secondary: var(--surface-secondary);
+  --content-info: var(--theme-info-800);
+  --content-info-secondary: var(--theme-info-700);
+  --content-info-tertiary: var(--theme-info-600);
+  --content-info-disabled: var(--theme-info-500);
+  --stroke-default: var(--color-neutral-300);
+  --stroke-hover: var(--color-neutral-400);
+  --stroke-secondary: var(--color-neutral-200);
+  --stroke-tertiary: var(--color-neutral-100);
+  --stroke-raise: var(--color-neutral-500);
+  --stroke-surface: var(--surface-default);
+  --stroke-accent: var(--theme-accent-800);
+  --stroke-accent-secondary: var(--theme-accent-600);
+  --stroke-accent-tertiary: var(--theme-accent-400);
+  --stroke-accent-quaternary: var(--theme-accent-300);
+  --stroke-destructive: var(--theme-destructive-800);
+  --stroke-destructive-secondary: var(--theme-destructive-600);
+  --stroke-destructive-tertiary: var(--theme-destructive-400);
+  --stroke-destructive-quaternary: var(--theme-destructive-300);
+  --stroke-success: var(--theme-success-800);
+  --stroke-success-secondary: var(--theme-success-600);
+  --stroke-success-tertiary: var(--theme-success-400);
+  --stroke-success-quaternary: var(--theme-success-300);
+  --stroke-error: var(--theme-error-800);
+  --stroke-error-secondary: var(--theme-error-600);
+  --stroke-error-tertiary: var(--theme-error-400);
+  --stroke-error-quaternary: var(--theme-error-300);
+  --stroke-notice: var(--theme-notice-800);
+  --stroke-notice-secondary: var(--theme-notice-600);
+  --stroke-notice-tertiary: var(--theme-notice-400);
+  --stroke-notice-quaternary: var(--theme-notice-300);
+  --stroke-info: var(--theme-info-800);
+  --stroke-info-secondary: var(--theme-info-600);
+  --stroke-info-tertiary: var(--theme-info-400);
+  --stroke-info-quaternary: var(--theme-info-300);
+  --chart-fill-area-primary: color(
+    display-p3 0.4840760759909391 0.5390189657729598 0.8433696459850775 / 0.7
+  ); /* #788addb3 with alpha 0.7 */
+  --chart-fill-area-secondary: color(
+    display-p3 0.4151256342009877 0.46094099659707627 0.713805186697585 / 0.7
+  ); /* #6776bbb3 with alpha 0.7 */
+  --chart-fill-area-tertiary: color(
+    display-p3 0.32502672686325673 0.3556441327376487 0.5459647947277517 / 0.7
+  ); /* #515b8fb3 with alpha 0.7 */
+  --chart-fill-area-quaternary: color(
+    display-p3 0.24043055576084826 0.2618867246658045 0.3897751920628703 / 0.2
+  ); /* #3c436633 with alpha 0.2 */
+  --chart-fill-item-primary: var(--theme-accent-700);
+  --chart-fill-item-secondary: var(--theme-accent-600);
+  --chart-fill-item-tertiary: var(--theme-accent-500);
+  --chart-fill-item-quaternary: var(--theme-accent-400);
+  --chart-fill-error-primary: var(--theme-destructive-700);
+  --chart-fill-error-secondary: var(--theme-destructive-600);
+  --chart-fill-error-tertiary: var(--theme-destructive-500);
+  --chart-fill-error-quaternary: var(--theme-destructive-400);
+  --chart-fill-inactive: var(--color-neutral-50);
+  --chart-stroke-line: var(--theme-accent-700);
+  --chart-stroke-line-secondary: var(--color-yellow-600);
+  --chart-stroke-line-tertiary: var(--color-red-600);
+  --chart-stroke-line-quaternary: var(--color-blue-600);
+  --chart-stroke-y-axis: color(
+    display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4
+  ); /* #2d333566 with alpha 0.4 */
+  --chart-stroke-item: color(
+    display-p3 0.4840760759909391 0.5390189657729598 0.8433696459850775 / 0.4
+  ); /* #788add66 with alpha 0.4 */
+  --chart-stroke-item-inactive: var(--color-neutral-200);
+  --chart-stroke-error: color(
+    display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4
+  ); /* #da617766 with alpha 0.4 */
+  --theme-accent-100: var(--color-blue-100);
+  --theme-accent-200: var(--color-blue-200);
+  --theme-accent-300: var(--color-blue-300);
+  --theme-accent-400: var(--color-blue-400);
+  --theme-accent-500: var(--color-blue-500);
+  --theme-accent-600: var(--color-blue-600);
+  --theme-accent-700: var(--color-blue-700);
+  --theme-accent-800: var(--color-blue-800);
+  --theme-destructive-100: var(--color-red-100);
+  --theme-destructive-200: var(--color-red-200);
+  --theme-destructive-300: var(--color-red-300);
+  --theme-destructive-400: var(--color-red-400);
+  --theme-destructive-500: var(--color-red-500);
+  --theme-destructive-600: var(--color-red-600);
+  --theme-destructive-700: var(--color-red-700);
+  --theme-destructive-800: var(--color-red-800);
+  --theme-success-100: var(--color-green-100);
+  --theme-success-200: var(--color-green-200);
+  --theme-success-300: var(--color-green-300);
+  --theme-success-400: var(--color-green-400);
+  --theme-success-500: var(--color-green-500);
+  --theme-success-600: var(--color-green-600);
+  --theme-success-700: var(--color-green-700);
+  --theme-success-800: var(--color-green-800);
+  --theme-error-100: var(--color-red-100);
+  --theme-error-200: var(--color-red-200);
+  --theme-error-300: var(--color-red-300);
+  --theme-error-400: var(--color-red-400);
+  --theme-error-500: var(--color-red-500);
+  --theme-error-600: var(--color-red-600);
+  --theme-error-700: var(--color-red-700);
+  --theme-error-800: var(--color-red-800);
+  --theme-notice-100: var(--color-yellow-100);
+  --theme-notice-200: var(--color-yellow-200);
+  --theme-notice-300: var(--color-yellow-300);
+  --theme-notice-400: var(--color-yellow-400);
+  --theme-notice-500: var(--color-yellow-500);
+  --theme-notice-600: var(--color-yellow-600);
+  --theme-notice-700: var(--color-yellow-700);
+  --theme-notice-800: var(--color-yellow-800);
+  --theme-info-100: var(--color-blue-100);
+  --theme-info-200: var(--color-blue-200);
+  --theme-info-300: var(--color-blue-300);
+  --theme-info-400: var(--color-blue-400);
+  --theme-info-500: var(--color-blue-500);
+  --theme-info-600: var(--color-blue-600);
+  --theme-info-700: var(--color-blue-700);
+  --theme-info-800: var(--color-blue-800);
+}
diff --git a/styles/dist/green.css b/styles/dist/green.css
new file mode 100644
index 00000000..56d343e2
--- /dev/null
+++ b/styles/dist/green.css
@@ -0,0 +1,180 @@
+.green-theme {
+  --surface-default: var(--color-neutral-0);
+  --surface-hover: var(--color-neutral-200);
+  --surface-raise: var(--color-neutral-50);
+  --surface-secondary: var(--color-neutral-100);
+  --surface-tertiary: var(--color-neutral-200);
+  --surface-disabled: var(--color-neutral-100);
+  --surface-scrim: color(
+    display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4
+  ); /* #080f1166 with alpha 0.4 */
+  --surface-accent: var(--theme-accent-800);
+  --surface-accent-hover: var(--theme-accent-700);
+  --surface-accent-secondary: var(--theme-accent-200);
+  --surface-accent-secondary-hover: var(--theme-accent-300);
+  --surface-destructive: var(--theme-destructive-800);
+  --surface-destructive-hover: var(--theme-destructive-700);
+  --surface-destructive-secondary: var(--theme-destructive-200);
+  --surface-destructive-secondary-hover: var(--theme-destructive-300);
+  --surface-notice: var(--theme-notice-800);
+  --surface-notice-hover: var(--theme-notice-700);
+  --surface-notice-secondary: var(--theme-notice-200);
+  --surface-notice-secondary-hover: var(--theme-notice-300);
+  --surface-success: var(--theme-success-800);
+  --surface-success-secondary: var(--theme-success-200);
+  --surface-error: var(--theme-error-800);
+  --surface-error-secondary: var(--theme-error-200);
+  --surface-inverse-raise: var(--content-raise);
+  --surface-inverse-primary: var(--content-default);
+  --surface-inverse-secondary: var(--content-secondary);
+  --surface-info: var(--theme-info-800);
+  --surface-info-hover: var(--theme-info-700);
+  --surface-info-secondary: var(--theme-info-200);
+  --surface-info-secondary-hover: var(--theme-info-300);
+  --content-raise: var(--color-neutral-900);
+  --content-default: var(--color-neutral-800);
+  --content-secondary: var(--color-neutral-700);
+  --content-tertiary: var(--color-neutral-600);
+  --content-quaternary: var(--color-neutral-500);
+  --content-disabled: var(--color-neutral-500);
+  --content-accent: var(--theme-accent-800);
+  --content-accent-secondary: var(--theme-accent-700);
+  --content-accent-tertiary: var(--theme-accent-600);
+  --content-accent-disabled: var(--theme-accent-500);
+  --content-destructive: var(--theme-destructive-800);
+  --content-destructive-secondary: var(--theme-destructive-700);
+  --content-destructive-tertiary: var(--theme-destructive-600);
+  --content-destructive-disabled: var(--theme-destructive-500);
+  --content-success: var(--theme-success-800);
+  --content-success-secondary: var(--theme-success-700);
+  --content-success-tertiary: var(--theme-success-600);
+  --content-success-disabled: var(--theme-success-500);
+  --content-error: var(--theme-error-800);
+  --content-error-secondary: var(--theme-error-700);
+  --content-error-tertiary: var(--theme-error-600);
+  --content-error-disabled: var(--theme-error-500);
+  --content-notice: var(--theme-notice-800);
+  --content-notice-secondary: var(--theme-notice-700);
+  --content-notice-tertiary: var(--theme-notice-600);
+  --content-notice-disabled: var(--theme-notice-500);
+  --content-inverse: var(--surface-default);
+  --content-inverse-raise: var(--surface-raise);
+  --content-inverse-secondary: var(--surface-secondary);
+  --content-info: var(--theme-info-800);
+  --content-info-secondary: var(--theme-info-700);
+  --content-info-tertiary: var(--theme-info-600);
+  --content-info-disabled: var(--theme-info-500);
+  --stroke-default: var(--color-neutral-300);
+  --stroke-hover: var(--color-neutral-400);
+  --stroke-secondary: var(--color-neutral-200);
+  --stroke-tertiary: var(--color-neutral-100);
+  --stroke-raise: var(--color-neutral-500);
+  --stroke-surface: var(--surface-default);
+  --stroke-accent: var(--theme-accent-800);
+  --stroke-accent-secondary: var(--theme-accent-600);
+  --stroke-accent-tertiary: var(--theme-accent-400);
+  --stroke-accent-quaternary: var(--theme-accent-300);
+  --stroke-destructive: var(--theme-destructive-800);
+  --stroke-destructive-secondary: var(--theme-destructive-600);
+  --stroke-destructive-tertiary: var(--theme-destructive-400);
+  --stroke-destructive-quaternary: var(--theme-destructive-300);
+  --stroke-success: var(--theme-success-800);
+  --stroke-success-secondary: var(--theme-success-600);
+  --stroke-success-tertiary: var(--theme-success-400);
+  --stroke-success-quaternary: var(--theme-success-300);
+  --stroke-error: var(--theme-error-800);
+  --stroke-error-secondary: var(--theme-error-600);
+  --stroke-error-tertiary: var(--theme-error-400);
+  --stroke-error-quaternary: var(--theme-error-300);
+  --stroke-notice: var(--theme-notice-800);
+  --stroke-notice-secondary: var(--theme-notice-600);
+  --stroke-notice-tertiary: var(--theme-notice-400);
+  --stroke-notice-quaternary: var(--theme-notice-300);
+  --stroke-info: var(--theme-info-800);
+  --stroke-info-secondary: var(--theme-info-600);
+  --stroke-info-tertiary: var(--theme-info-400);
+  --stroke-info-quaternary: var(--theme-info-300);
+  --chart-fill-area-primary: color(
+    display-p3 0.30729539326874494 0.6299054596145268 0.440831736604609 / 0.7
+  ); /* #20a36cb3 with alpha 0.7 */
+  --chart-fill-area-secondary: color(
+    display-p3 0.2692940449440336 0.5334053150097006 0.38200477116356163 / 0.7
+  ); /* #238a5eb3 with alpha 0.7 */
+  --chart-fill-area-tertiary: color(
+    display-p3 0.21921823824294856 0.40988544994958725 0.3065549544047547 / 0.7
+  ); /* #236a4cb3 with alpha 0.7 */
+  --chart-fill-area-quaternary: color(
+    display-p3 0.17205281115427723 0.2979531244804644 0.23597564991643089 / 0.2
+  ); /* #204d3b33 with alpha 0.2 */
+  --chart-fill-item-primary: var(--theme-accent-700);
+  --chart-fill-item-secondary: var(--theme-accent-600);
+  --chart-fill-item-tertiary: var(--theme-accent-500);
+  --chart-fill-item-quaternary: var(--theme-accent-400);
+  --chart-fill-error-primary: var(--theme-destructive-700);
+  --chart-fill-error-secondary: var(--theme-destructive-600);
+  --chart-fill-error-tertiary: var(--theme-destructive-500);
+  --chart-fill-error-quaternary: var(--theme-destructive-400);
+  --chart-fill-inactive: var(--color-neutral-50);
+  --chart-stroke-line: var(--theme-accent-700);
+  --chart-stroke-line-secondary: var(--color-yellow-600);
+  --chart-stroke-line-tertiary: var(--color-red-600);
+  --chart-stroke-line-quaternary: var(--color-blue-600);
+  --chart-stroke-y-axis: color(
+    display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4
+  ); /* #2d333566 with alpha 0.4 */
+  --chart-stroke-item: color(
+    display-p3 0.30729539326874494 0.6299054596145268 0.440831736604609 / 0.4
+  ); /* #20a36c66 with alpha 0.4 */
+  --chart-stroke-item-inactive: var(--color-neutral-200);
+  --chart-stroke-error: color(
+    display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4
+  ); /* #da617766 with alpha 0.4 */
+  --theme-accent-100: var(--color-green-100);
+  --theme-accent-200: var(--color-green-200);
+  --theme-accent-300: var(--color-green-300);
+  --theme-accent-400: var(--color-green-400);
+  --theme-accent-500: var(--color-green-500);
+  --theme-accent-600: var(--color-green-600);
+  --theme-accent-700: var(--color-green-700);
+  --theme-accent-800: var(--color-green-800);
+  --theme-destructive-100: var(--color-red-100);
+  --theme-destructive-200: var(--color-red-200);
+  --theme-destructive-300: var(--color-red-300);
+  --theme-destructive-400: var(--color-red-400);
+  --theme-destructive-500: var(--color-red-500);
+  --theme-destructive-600: var(--color-red-600);
+  --theme-destructive-700: var(--color-red-700);
+  --theme-destructive-800: var(--color-red-800);
+  --theme-success-100: var(--color-green-100);
+  --theme-success-200: var(--color-green-200);
+  --theme-success-300: var(--color-green-300);
+  --theme-success-400: var(--color-green-400);
+  --theme-success-500: var(--color-green-500);
+  --theme-success-600: var(--color-green-600);
+  --theme-success-700: var(--color-green-700);
+  --theme-success-800: var(--color-green-800);
+  --theme-error-100: var(--color-red-100);
+  --theme-error-200: var(--color-red-200);
+  --theme-error-300: var(--color-red-300);
+  --theme-error-400: var(--color-red-400);
+  --theme-error-500: var(--color-red-500);
+  --theme-error-600: var(--color-red-600);
+  --theme-error-700: var(--color-red-700);
+  --theme-error-800: var(--color-red-800);
+  --theme-notice-100: var(--color-yellow-100);
+  --theme-notice-200: var(--color-yellow-200);
+  --theme-notice-300: var(--color-yellow-300);
+  --theme-notice-400: var(--color-yellow-400);
+  --theme-notice-500: var(--color-yellow-500);
+  --theme-notice-600: var(--color-yellow-600);
+  --theme-notice-700: var(--color-yellow-700);
+  --theme-notice-800: var(--color-yellow-800);
+  --theme-info-100: var(--color-blue-100);
+  --theme-info-200: var(--color-blue-200);
+  --theme-info-300: var(--color-blue-300);
+  --theme-info-400: var(--color-blue-400);
+  --theme-info-500: var(--color-blue-500);
+  --theme-info-600: var(--color-blue-600);
+  --theme-info-700: var(--color-blue-700);
+  --theme-info-800: var(--color-blue-800);
+}
diff --git a/styles/dist/main.css b/styles/dist/main.css
new file mode 100644
index 00000000..5d4ebb70
--- /dev/null
+++ b/styles/dist/main.css
@@ -0,0 +1,659 @@
+/* THIS FILE IS AUTOGENERATED, DO NOT EDIT */
+@import 'tailwindcss';
+
+:root {
+  --color-neutral-1000: color(
+    display-p3 0.9967761539452785 0.9998701540262044 0.9999331805514878
+  ); /* #FEFFFF */
+  --color-neutral-900: color(
+    display-p3 0.8438352319511949 0.8469290330354962 0.8505640360063605
+  ); /* #D7D8D9 */
+  --color-neutral-800: color(
+    display-p3 0.7236755020156038 0.7329467520722801 0.7367074499372497
+  ); /* #B8BBBC */
+  --color-neutral-700: color(
+    display-p3 0.6334818103070252 0.6427511817107786 0.6465119387581825
+  ); /* #A1A4A5 */
+  --color-neutral-600: color(
+    display-p3 0.4976701084474386 0.5130897614687101 0.5205515394637789
+  ); /* #7e8385 */
+  --color-neutral-500: color(
+    display-p3 0.3597085003581039 0.3720412109254131 0.3794431797850346
+  ); /* #5B5F61 */
+  --color-neutral-400: color(
+    display-p3 0.2553413105536939 0.27376625441340496 0.27770648130844244
+  ); /* #404647 */
+  --color-neutral-300: color(
+    display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162
+  ); /* #2D3335 */
+  --color-neutral-200: color(
+    display-p3 0.11431963155657676 0.13261753531957074 0.143744402534617
+  ); /* #1C2225 */
+  --color-neutral-100: color(
+    display-p3 0.08386952946123807 0.10507459422019316 0.1126540913483059
+  ); /* #141B1D */
+  --color-neutral-50: color(
+    display-p3 0.06739284393097031 0.08558006444336808 0.0931064989053643
+  ); /* #101618 */
+  --color-neutral-0: color(
+    display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541
+  ); /* #080F11 */
+  --color-blue-800: color(
+    display-p3 0.5616641479260542 0.6287493953124766 0.9734821327451663
+  ); /* #8BA1FF */
+  --color-blue-700: color(
+    display-p3 0.4840760759909391 0.5390189657729598 0.8433696459850775
+  ); /* #788ADD */
+  --color-blue-600: color(
+    display-p3 0.4151256342009877 0.46094099659707627 0.713805186697585
+  ); /* #6776BB */
+  --color-blue-500: color(
+    display-p3 0.32502672686325673 0.3556441327376487 0.5459647947277517
+  ); /* #515B8F */
+  --color-blue-400: color(
+    display-p3 0.24043055576084826 0.2618867246658045 0.3897751920628703
+  ); /* #3C4366 */
+  --color-blue-300: color(
+    display-p3 0.1786200923014884 0.1878574995226226 0.2752857688446367
+  ); /* #2D3048 */
+  --color-blue-200: color(
+    display-p3 0.11907577529357963 0.12523747486865994 0.17245027907531774
+  ); /* #1E202D */
+  --color-blue-100: color(
+    display-p3 0.09090310464814949 0.09398978491029422 0.12658653445006884
+  ); /* #171821 */
+  --color-purple-800: color(
+    display-p3 0.7199041089606463 0.5905777966739129 0.8997851881994727
+  ); /* #BE95EB */
+  --color-purple-700: color(
+    display-p3 0.6176620043485992 0.5072919661927223 0.7770451092818965
+  ); /* #A380CB */
+  --color-purple-600: color(
+    display-p3 0.5266029147263402 0.43201348221720354 0.658472257647523
+  ); /* #8B6DAC */
+  --color-purple-500: color(
+    display-p3 0.40927836765624315 0.3368069077031495 0.5055688506059814
+  ); /* #6C5584 */
+  --color-purple-400: color(
+    display-p3 0.2925207541619176 0.24535487188954597 0.3602153988663625
+  ); /* #4D3E5E */
+  --color-purple-300: color(
+    display-p3 0.21265042602455625 0.17808591248874042 0.25689800139783175
+  ); /* #382D43 */
+  --color-purple-200: color(
+    display-p3 0.14120618453185496 0.1224209120935679 0.165300467987632
+  ); /* #251F2B */
+  --color-purple-100: color(
+    display-p3 0.11380102321850455 0.0949832101380699 0.13061626398927353
+  ); /* #1E1822 */
+  --color-red-800: color(
+    display-p3 0.9168165401949406 0.46465535927403595 0.5390081507653561
+  ); /* #FB6E88 */
+  --color-red-700: color(
+    display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213
+  ); /* #DA6177 */
+  --color-red-600: color(
+    display-p3 0.7123368412346623 0.3659764657543945 0.42018168321468297
+  ); /* #C3576A */
+  --color-red-500: color(
+    display-p3 0.54467993913213 0.2881585750532095 0.32859275026896756
+  ); /* #954553 */
+  --color-red-400: color(
+    display-p3 0.3880353956012564 0.21503505622273383 0.2377024955644162
+  ); /* #6A343C */
+  --color-red-300: color(
+    display-p3 0.17652197603839365 0.10959767370210685 0.11485879231717566
+  ); /* #301B1D */
+  --color-red-200: color(
+    display-p3 0.129140055434958 0.08468327014966448 0.09064241222767869
+  ); /* #231517 */
+  --color-red-100: color(
+    display-p3 0.1111091592090036 0.07627289273638779 0.07896469636558265
+  ); /* #1E1314 */
+  --color-yellow-800: color(
+    display-p3 0.9246726761147905 0.7349322400144668 0.35478568923303233
+  ); /* #F5B944 */
+  --color-yellow-700: color(
+    display-p3 0.7625685956908921 0.60767449881825 0.2994621129781391
+  ); /* #CA993B */
+  --color-yellow-600: color(
+    display-p3 0.577577081670476 0.46066704465450065 0.23478898502532436
+  ); /* #997430 */
+  --color-yellow-500: color(
+    display-p3 0.4456676007915647 0.3572643913038676 0.1862111103866858
+  ); /* #765A27 */
+  --color-yellow-400: color(
+    display-p3 0.32158715205107063 0.26170195700266397 0.14269771287346764
+  ); /* #55421F */
+  --color-yellow-300: color(
+    display-p3 0.231079570994478 0.1901717568816926 0.11084081717589886
+  ); /* #3D3019 */
+  --color-yellow-200: color(
+    display-p3 0.1551157651257713 0.12681932912773047 0.08123881916988879
+  ); /* #292013 */
+  --color-yellow-100: color(
+    display-p3 0.12104842543229768 0.09906271231243746 0.063859934590173
+  ); /* #20190F */
+  --color-green-800: color(
+    display-p3 0.4509664622561616 0.8240810849465557 0.6105978837942857
+  ); /* #48d597 */
+  --color-green-700: color(
+    display-p3 0.30729539326874494 0.6299054596145268 0.440831736604609
+  ); /* #20A36C */
+  --color-green-600: color(
+    display-p3 0.2692940449440336 0.5334053150097006 0.38200477116356163
+  ); /* #238A5E */
+  --color-green-500: color(
+    display-p3 0.21921823824294856 0.40988544994958725 0.3065549544047547
+  ); /* #236A4C */
+  --color-green-400: color(
+    display-p3 0.17205281115427723 0.2979531244804644 0.23597564991643089
+  ); /* #204D3B */
+  --color-green-300: color(
+    display-p3 0.13497680842452758 0.21306259957523738 0.18224720796629387
+  ); /* #1C372E */
+  --color-green-200: color(
+    display-p3 0.09712693532459268 0.13585807676438863 0.13295269910261515
+  ); /* #162322 */
+  --color-green-100: color(
+    display-p3 0.07996460795736646 0.10115556161740791 0.10873484064468295
+  ); /* #131A1C */
+  --surface-default: var(--color-neutral-0);
+  --surface-hover: var(--color-neutral-200);
+  --surface-raise: var(--color-neutral-50);
+  --surface-secondary: var(--color-neutral-100);
+  --surface-tertiary: var(--color-neutral-200);
+  --surface-disabled: var(--color-neutral-100);
+  --surface-scrim: color(
+    display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4
+  ); /* #080f1166 with alpha 0.4 */
+  --surface-accent: var(--theme-accent-800);
+  --surface-accent-hover: var(--theme-accent-700);
+  --surface-accent-secondary: var(--theme-accent-200);
+  --surface-accent-secondary-hover: var(--theme-accent-300);
+  --surface-destructive: var(--theme-destructive-800);
+  --surface-destructive-hover: var(--theme-destructive-700);
+  --surface-destructive-secondary: var(--theme-destructive-200);
+  --surface-destructive-secondary-hover: var(--theme-destructive-300);
+  --surface-notice: var(--theme-notice-800);
+  --surface-notice-hover: var(--theme-notice-700);
+  --surface-notice-secondary: var(--theme-notice-200);
+  --surface-notice-secondary-hover: var(--theme-notice-300);
+  --surface-success: var(--theme-success-800);
+  --surface-success-secondary: var(--theme-success-200);
+  --surface-error: var(--theme-error-800);
+  --surface-error-secondary: var(--theme-error-200);
+  --surface-inverse-raise: var(--content-raise);
+  --surface-inverse-primary: var(--content-default);
+  --surface-inverse-secondary: var(--content-secondary);
+  --surface-info: var(--theme-info-800);
+  --surface-info-hover: var(--theme-info-700);
+  --surface-info-secondary: var(--theme-info-200);
+  --surface-info-secondary-hover: var(--theme-info-300);
+  --content-raise: var(--color-neutral-900);
+  --content-default: var(--color-neutral-800);
+  --content-secondary: var(--color-neutral-700);
+  --content-tertiary: var(--color-neutral-600);
+  --content-quaternary: var(--color-neutral-500);
+  --content-disabled: var(--color-neutral-500);
+  --content-accent: var(--theme-accent-800);
+  --content-accent-secondary: var(--theme-accent-700);
+  --content-accent-tertiary: var(--theme-accent-600);
+  --content-accent-disabled: var(--theme-accent-500);
+  --content-destructive: var(--theme-destructive-800);
+  --content-destructive-secondary: var(--theme-destructive-700);
+  --content-destructive-tertiary: var(--theme-destructive-600);
+  --content-destructive-disabled: var(--theme-destructive-500);
+  --content-success: var(--theme-success-800);
+  --content-success-secondary: var(--theme-success-700);
+  --content-success-tertiary: var(--theme-success-600);
+  --content-success-disabled: var(--theme-success-500);
+  --content-error: var(--theme-error-800);
+  --content-error-secondary: var(--theme-error-700);
+  --content-error-tertiary: var(--theme-error-600);
+  --content-error-disabled: var(--theme-error-500);
+  --content-notice: var(--theme-notice-800);
+  --content-notice-secondary: var(--theme-notice-700);
+  --content-notice-tertiary: var(--theme-notice-600);
+  --content-notice-disabled: var(--theme-notice-500);
+  --content-inverse: var(--surface-default);
+  --content-inverse-raise: var(--surface-raise);
+  --content-inverse-secondary: var(--surface-secondary);
+  --content-info: var(--theme-info-800);
+  --content-info-secondary: var(--theme-info-700);
+  --content-info-tertiary: var(--theme-info-600);
+  --content-info-disabled: var(--theme-info-500);
+  --stroke-default: var(--color-neutral-300);
+  --stroke-hover: var(--color-neutral-400);
+  --stroke-secondary: var(--color-neutral-200);
+  --stroke-tertiary: var(--color-neutral-100);
+  --stroke-raise: var(--color-neutral-500);
+  --stroke-surface: var(--surface-default);
+  --stroke-accent: var(--theme-accent-800);
+  --stroke-accent-secondary: var(--theme-accent-600);
+  --stroke-accent-tertiary: var(--theme-accent-400);
+  --stroke-accent-quaternary: var(--theme-accent-300);
+  --stroke-destructive: var(--theme-destructive-800);
+  --stroke-destructive-secondary: var(--theme-destructive-600);
+  --stroke-destructive-tertiary: var(--theme-destructive-400);
+  --stroke-destructive-quaternary: var(--theme-destructive-300);
+  --stroke-success: var(--theme-success-800);
+  --stroke-success-secondary: var(--theme-success-600);
+  --stroke-success-tertiary: var(--theme-success-400);
+  --stroke-success-quaternary: var(--theme-success-300);
+  --stroke-error: var(--theme-error-800);
+  --stroke-error-secondary: var(--theme-error-600);
+  --stroke-error-tertiary: var(--theme-error-400);
+  --stroke-error-quaternary: var(--theme-error-300);
+  --stroke-notice: var(--theme-notice-800);
+  --stroke-notice-secondary: var(--theme-notice-600);
+  --stroke-notice-tertiary: var(--theme-notice-400);
+  --stroke-notice-quaternary: var(--theme-notice-300);
+  --stroke-info: var(--theme-info-800);
+  --stroke-info-secondary: var(--theme-info-600);
+  --stroke-info-tertiary: var(--theme-info-400);
+  --stroke-info-quaternary: var(--theme-info-300);
+  --chart-fill-area-primary: color(
+    display-p3 0.30729539326874494 0.6299054596145268 0.440831736604609 / 0.7
+  ); /* #20a36cb3 with alpha 0.7 */
+  --chart-fill-area-secondary: color(
+    display-p3 0.2692940449440336 0.5334053150097006 0.38200477116356163 / 0.7
+  ); /* #238a5eb3 with alpha 0.7 */
+  --chart-fill-area-tertiary: color(
+    display-p3 0.21921823824294856 0.40988544994958725 0.3065549544047547 / 0.7
+  ); /* #236a4cb3 with alpha 0.7 */
+  --chart-fill-area-quaternary: color(
+    display-p3 0.17205281115427723 0.2979531244804644 0.23597564991643089 / 0.2
+  ); /* #204d3b33 with alpha 0.2 */
+  --chart-fill-item-primary: var(--theme-accent-700);
+  --chart-fill-item-secondary: var(--theme-accent-600);
+  --chart-fill-item-tertiary: var(--theme-accent-500);
+  --chart-fill-item-quaternary: var(--theme-accent-400);
+  --chart-fill-error-primary: var(--theme-destructive-700);
+  --chart-fill-error-secondary: var(--theme-destructive-600);
+  --chart-fill-error-tertiary: var(--theme-destructive-500);
+  --chart-fill-error-quaternary: var(--theme-destructive-400);
+  --chart-fill-inactive: var(--color-neutral-50);
+  --chart-stroke-line: var(--theme-accent-700);
+  --chart-stroke-line-secondary: var(--color-yellow-600);
+  --chart-stroke-line-tertiary: var(--color-red-600);
+  --chart-stroke-line-quaternary: var(--color-blue-600);
+  --chart-stroke-y-axis: color(
+    display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4
+  ); /* #2d333566 with alpha 0.4 */
+  --chart-stroke-item: color(
+    display-p3 0.30729539326874494 0.6299054596145268 0.440831736604609 / 0.4
+  ); /* #20a36c66 with alpha 0.4 */
+  --chart-stroke-item-inactive: var(--color-neutral-200);
+  --chart-stroke-error: color(
+    display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4
+  ); /* #da617766 with alpha 0.4 */
+  --theme-accent-100: var(--color-green-100);
+  --theme-accent-200: var(--color-green-200);
+  --theme-accent-300: var(--color-green-300);
+  --theme-accent-400: var(--color-green-400);
+  --theme-accent-500: var(--color-green-500);
+  --theme-accent-600: var(--color-green-600);
+  --theme-accent-700: var(--color-green-700);
+  --theme-accent-800: var(--color-green-800);
+  --theme-destructive-100: var(--color-red-100);
+  --theme-destructive-200: var(--color-red-200);
+  --theme-destructive-300: var(--color-red-300);
+  --theme-destructive-400: var(--color-red-400);
+  --theme-destructive-500: var(--color-red-500);
+  --theme-destructive-600: var(--color-red-600);
+  --theme-destructive-700: var(--color-red-700);
+  --theme-destructive-800: var(--color-red-800);
+  --theme-success-100: var(--color-green-100);
+  --theme-success-200: var(--color-green-200);
+  --theme-success-300: var(--color-green-300);
+  --theme-success-400: var(--color-green-400);
+  --theme-success-500: var(--color-green-500);
+  --theme-success-600: var(--color-green-600);
+  --theme-success-700: var(--color-green-700);
+  --theme-success-800: var(--color-green-800);
+  --theme-error-100: var(--color-red-100);
+  --theme-error-200: var(--color-red-200);
+  --theme-error-300: var(--color-red-300);
+  --theme-error-400: var(--color-red-400);
+  --theme-error-500: var(--color-red-500);
+  --theme-error-600: var(--color-red-600);
+  --theme-error-700: var(--color-red-700);
+  --theme-error-800: var(--color-red-800);
+  --theme-notice-100: var(--color-yellow-100);
+  --theme-notice-200: var(--color-yellow-200);
+  --theme-notice-300: var(--color-yellow-300);
+  --theme-notice-400: var(--color-yellow-400);
+  --theme-notice-500: var(--color-yellow-500);
+  --theme-notice-600: var(--color-yellow-600);
+  --theme-notice-700: var(--color-yellow-700);
+  --theme-notice-800: var(--color-yellow-800);
+  --theme-info-100: var(--color-blue-100);
+  --theme-info-200: var(--color-blue-200);
+  --theme-info-300: var(--color-blue-300);
+  --theme-info-400: var(--color-blue-400);
+  --theme-info-500: var(--color-blue-500);
+  --theme-info-600: var(--color-blue-600);
+  --theme-info-700: var(--color-blue-700);
+  --theme-info-800: var(--color-blue-800);
+}
+
+@theme inline {
+  --font-sans: SuisseIntl, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
+  --font-mono: 'GT America Mono', monospace;
+
+  --background-color-default: var(--surface-default);
+  --background-color-hover: var(--surface-hover);
+  --background-color-raise: var(--surface-raise);
+  --background-color-secondary: var(--surface-secondary);
+  --background-color-tertiary: var(--surface-tertiary);
+  --background-color-disabled: var(--surface-disabled);
+  --background-color-scrim: var(--surface-scrim);
+  --background-color-accent: var(--surface-accent);
+  --background-color-accent-hover: var(--surface-accent-hover);
+  --background-color-accent-secondary: var(--surface-accent-secondary);
+  --background-color-accent-secondary-hover: var(--surface-accent-secondary-hover);
+  --background-color-destructive: var(--surface-destructive);
+  --background-color-destructive-hover: var(--surface-destructive-hover);
+  --background-color-destructive-secondary: var(--surface-destructive-secondary);
+  --background-color-destructive-secondary-hover: var(
+    --surface-destructive-secondary-hover
+  );
+  --background-color-notice: var(--surface-notice);
+  --background-color-notice-hover: var(--surface-notice-hover);
+  --background-color-notice-secondary: var(--surface-notice-secondary);
+  --background-color-notice-secondary-hover: var(--surface-notice-secondary-hover);
+  --background-color-success: var(--surface-success);
+  --background-color-success-secondary: var(--surface-success-secondary);
+  --background-color-error: var(--surface-error);
+  --background-color-error-secondary: var(--surface-error-secondary);
+  --background-color-inverse-raise: var(--surface-inverse-raise);
+  --background-color-inverse-primary: var(--surface-inverse-primary);
+  --background-color-inverse-secondary: var(--surface-inverse-secondary);
+  --background-color-info: var(--surface-info);
+  --background-color-info-hover: var(--surface-info-hover);
+  --background-color-info-secondary: var(--surface-info-secondary);
+  --background-color-info-secondary-hover: var(--surface-info-secondary-hover);
+  --text-color-raise: var(--content-raise);
+  --text-color-default: var(--content-default);
+  --text-color-secondary: var(--content-secondary);
+  --text-color-tertiary: var(--content-tertiary);
+  --text-color-quaternary: var(--content-quaternary);
+  --text-color-disabled: var(--content-disabled);
+  --text-color-accent: var(--content-accent);
+  --text-color-accent-secondary: var(--content-accent-secondary);
+  --text-color-accent-tertiary: var(--content-accent-tertiary);
+  --text-color-accent-disabled: var(--content-accent-disabled);
+  --text-color-destructive: var(--content-destructive);
+  --text-color-destructive-secondary: var(--content-destructive-secondary);
+  --text-color-destructive-tertiary: var(--content-destructive-tertiary);
+  --text-color-destructive-disabled: var(--content-destructive-disabled);
+  --text-color-success: var(--content-success);
+  --text-color-success-secondary: var(--content-success-secondary);
+  --text-color-success-tertiary: var(--content-success-tertiary);
+  --text-color-success-disabled: var(--content-success-disabled);
+  --text-color-error: var(--content-error);
+  --text-color-error-secondary: var(--content-error-secondary);
+  --text-color-error-tertiary: var(--content-error-tertiary);
+  --text-color-error-disabled: var(--content-error-disabled);
+  --text-color-notice: var(--content-notice);
+  --text-color-notice-secondary: var(--content-notice-secondary);
+  --text-color-notice-tertiary: var(--content-notice-tertiary);
+  --text-color-notice-disabled: var(--content-notice-disabled);
+  --text-color-inverse: var(--content-inverse);
+  --text-color-inverse-raise: var(--content-inverse-raise);
+  --text-color-inverse-secondary: var(--content-inverse-secondary);
+  --text-color-info: var(--content-info);
+  --text-color-info-secondary: var(--content-info-secondary);
+  --text-color-info-tertiary: var(--content-info-tertiary);
+  --text-color-info-disabled: var(--content-info-disabled);
+  --border-color-default: var(--stroke-default);
+  --ring-color-default: var(--stroke-default);
+  --outline-color-default: var(--stroke-default);
+  --border-color-hover: var(--stroke-hover);
+  --ring-color-hover: var(--stroke-hover);
+  --outline-color-hover: var(--stroke-hover);
+  --border-color-secondary: var(--stroke-secondary);
+  --ring-color-secondary: var(--stroke-secondary);
+  --outline-color-secondary: var(--stroke-secondary);
+  --border-color-tertiary: var(--stroke-tertiary);
+  --ring-color-tertiary: var(--stroke-tertiary);
+  --outline-color-tertiary: var(--stroke-tertiary);
+  --border-color-raise: var(--stroke-raise);
+  --ring-color-raise: var(--stroke-raise);
+  --outline-color-raise: var(--stroke-raise);
+  --border-color-surface: var(--stroke-surface);
+  --ring-color-surface: var(--stroke-surface);
+  --outline-color-surface: var(--stroke-surface);
+  --border-color-accent: var(--stroke-accent);
+  --ring-color-accent: var(--stroke-accent);
+  --outline-color-accent: var(--stroke-accent);
+  --border-color-accent-secondary: var(--stroke-accent-secondary);
+  --ring-color-accent-secondary: var(--stroke-accent-secondary);
+  --outline-color-accent-secondary: var(--stroke-accent-secondary);
+  --border-color-accent-tertiary: var(--stroke-accent-tertiary);
+  --ring-color-accent-tertiary: var(--stroke-accent-tertiary);
+  --outline-color-accent-tertiary: var(--stroke-accent-tertiary);
+  --border-color-accent-quaternary: var(--stroke-accent-quaternary);
+  --ring-color-accent-quaternary: var(--stroke-accent-quaternary);
+  --outline-color-accent-quaternary: var(--stroke-accent-quaternary);
+  --border-color-destructive: var(--stroke-destructive);
+  --ring-color-destructive: var(--stroke-destructive);
+  --outline-color-destructive: var(--stroke-destructive);
+  --border-color-destructive-secondary: var(--stroke-destructive-secondary);
+  --ring-color-destructive-secondary: var(--stroke-destructive-secondary);
+  --outline-color-destructive-secondary: var(--stroke-destructive-secondary);
+  --border-color-destructive-tertiary: var(--stroke-destructive-tertiary);
+  --ring-color-destructive-tertiary: var(--stroke-destructive-tertiary);
+  --outline-color-destructive-tertiary: var(--stroke-destructive-tertiary);
+  --border-color-destructive-quaternary: var(--stroke-destructive-quaternary);
+  --ring-color-destructive-quaternary: var(--stroke-destructive-quaternary);
+  --outline-color-destructive-quaternary: var(--stroke-destructive-quaternary);
+  --border-color-success: var(--stroke-success);
+  --ring-color-success: var(--stroke-success);
+  --outline-color-success: var(--stroke-success);
+  --border-color-success-secondary: var(--stroke-success-secondary);
+  --ring-color-success-secondary: var(--stroke-success-secondary);
+  --outline-color-success-secondary: var(--stroke-success-secondary);
+  --border-color-success-tertiary: var(--stroke-success-tertiary);
+  --ring-color-success-tertiary: var(--stroke-success-tertiary);
+  --outline-color-success-tertiary: var(--stroke-success-tertiary);
+  --border-color-success-quaternary: var(--stroke-success-quaternary);
+  --ring-color-success-quaternary: var(--stroke-success-quaternary);
+  --outline-color-success-quaternary: var(--stroke-success-quaternary);
+  --border-color-error: var(--stroke-error);
+  --ring-color-error: var(--stroke-error);
+  --outline-color-error: var(--stroke-error);
+  --border-color-error-secondary: var(--stroke-error-secondary);
+  --ring-color-error-secondary: var(--stroke-error-secondary);
+  --outline-color-error-secondary: var(--stroke-error-secondary);
+  --border-color-error-tertiary: var(--stroke-error-tertiary);
+  --ring-color-error-tertiary: var(--stroke-error-tertiary);
+  --outline-color-error-tertiary: var(--stroke-error-tertiary);
+  --border-color-error-quaternary: var(--stroke-error-quaternary);
+  --ring-color-error-quaternary: var(--stroke-error-quaternary);
+  --outline-color-error-quaternary: var(--stroke-error-quaternary);
+  --border-color-notice: var(--stroke-notice);
+  --ring-color-notice: var(--stroke-notice);
+  --outline-color-notice: var(--stroke-notice);
+  --border-color-notice-secondary: var(--stroke-notice-secondary);
+  --ring-color-notice-secondary: var(--stroke-notice-secondary);
+  --outline-color-notice-secondary: var(--stroke-notice-secondary);
+  --border-color-notice-tertiary: var(--stroke-notice-tertiary);
+  --ring-color-notice-tertiary: var(--stroke-notice-tertiary);
+  --outline-color-notice-tertiary: var(--stroke-notice-tertiary);
+  --border-color-notice-quaternary: var(--stroke-notice-quaternary);
+  --ring-color-notice-quaternary: var(--stroke-notice-quaternary);
+  --outline-color-notice-quaternary: var(--stroke-notice-quaternary);
+  --border-color-info: var(--stroke-info);
+  --ring-color-info: var(--stroke-info);
+  --outline-color-info: var(--stroke-info);
+  --border-color-info-secondary: var(--stroke-info-secondary);
+  --ring-color-info-secondary: var(--stroke-info-secondary);
+  --outline-color-info-secondary: var(--stroke-info-secondary);
+  --border-color-info-tertiary: var(--stroke-info-tertiary);
+  --ring-color-info-tertiary: var(--stroke-info-tertiary);
+  --outline-color-info-tertiary: var(--stroke-info-tertiary);
+  --border-color-info-quaternary: var(--stroke-info-quaternary);
+  --ring-color-info-quaternary: var(--stroke-info-quaternary);
+  --outline-color-info-quaternary: var(--stroke-info-quaternary);
+  --fill-color-area-primary: var(--chart-fill-area-primary);
+  --fill-color-area-secondary: var(--chart-fill-area-secondary);
+  --fill-color-area-tertiary: var(--chart-fill-area-tertiary);
+  --fill-color-area-quaternary: var(--chart-fill-area-quaternary);
+  --fill-color-item-primary: var(--chart-fill-item-primary);
+  --fill-color-item-secondary: var(--chart-fill-item-secondary);
+  --fill-color-item-tertiary: var(--chart-fill-item-tertiary);
+  --fill-color-item-quaternary: var(--chart-fill-item-quaternary);
+  --fill-color-error-primary: var(--chart-fill-error-primary);
+  --fill-color-error-secondary: var(--chart-fill-error-secondary);
+  --fill-color-error-tertiary: var(--chart-fill-error-tertiary);
+  --fill-color-error-quaternary: var(--chart-fill-error-quaternary);
+  --fill-color-inactive: var(--chart-fill-inactive);
+  --stroke-color-line: var(--chart-stroke-line);
+  --stroke-color-line-secondary: var(--chart-stroke-line-secondary);
+  --stroke-color-line-tertiary: var(--chart-stroke-line-tertiary);
+  --stroke-color-line-quaternary: var(--chart-stroke-line-quaternary);
+  --stroke-color-y-axis: var(--chart-stroke-y-axis);
+  --stroke-color-item: var(--chart-stroke-item);
+  --stroke-color-item-inactive: var(--chart-stroke-item-inactive);
+  --stroke-color-error: var(--chart-stroke-error);
+
+  --radius-sm: 0.125rem;
+  --radius: 0.1875rem;
+  --radius-lg: 0.375rem;
+  --radius-xl: 0.75rem;
+  --radius-full: 624.9375rem;
+}
+
+@utility elevation-0 {
+  box-shadow: none;
+}
+@utility elevation-1 {
+  box-shadow: 0px 1px 2px #00000099;
+}
+@utility elevation-2 {
+  box-shadow: 0px 2.188px 4.625px #00000021, 0px 10px 13px #00000033,
+    0px 25.313px 34.875px #00000045, 0px 50px 80px #00000066;
+}
+@utility elevation-3 {
+  box-shadow: 0px 4.375px 4.625px #00000021, 0px 20px 13px #00000033,
+    0px 50.625px 34.875px #00000045, 0px 100px 80px #00000066;
+}
+
+@utility text-mono-xs {
+  font-family: var(--font-mono);
+  font-weight: 400;
+  line-height: 1rem;
+  font-size: 0.6875rem;
+  letter-spacing: 0.04rem;
+  text-transform: uppercase;
+  font-feature-settings: 'ss02' on, 'ss03' on, 'ss09' on, 'ss06' on, 'ss07' on, 'ss08' on,
+    'calt' off;
+}
+@utility text-mono-sm {
+  font-family: var(--font-mono);
+  font-weight: 400;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.04rem;
+  text-transform: uppercase;
+  font-feature-settings: 'ss02' on, 'ss03' on, 'ss09' on, 'ss06' on, 'ss07' on, 'ss08' on,
+    'calt' off;
+}
+@utility text-mono-code {
+  font-family: var(--font-mono);
+  font-weight: 400;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0rem;
+  font-feature-settings: 'ss02' on, 'ss03' on, 'ss09' on, 'ss06' on, 'ss07' on, 'ss08' on,
+    'calt' off;
+}
+@utility text-mono-md {
+  font-family: var(--font-mono);
+  font-weight: 400;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.04rem;
+  text-transform: uppercase;
+  font-feature-settings: 'ss02' on, 'ss03' on, 'ss09' on, 'ss06' on, 'ss07' on, 'ss08' on,
+    'calt' off;
+}
+@utility text-sans-sm {
+  font-family: var(--font-sans);
+  font-weight: 400;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.04rem;
+}
+@utility text-sans-md {
+  font-family: var(--font-sans);
+  font-weight: 400;
+  line-height: 1.125rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.04rem;
+}
+@utility text-sans-lg {
+  font-family: var(--font-sans);
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 1rem;
+  letter-spacing: 0.03rem;
+}
+@utility text-sans-xl {
+  font-family: var(--font-sans);
+  font-weight: 400;
+  line-height: 1.625rem;
+  font-size: 1.125rem;
+  letter-spacing: 0.02rem;
+}
+@utility text-sans-2xl {
+  font-family: var(--font-sans);
+  font-weight: 400;
+  line-height: 2rem;
+  font-size: 1.5625rem;
+  letter-spacing: 0.015rem;
+}
+@utility text-sans-3xl {
+  font-family: var(--font-sans);
+  font-weight: 400;
+  line-height: 2.625rem;
+  font-size: 2.25rem;
+  letter-spacing: 0.005rem;
+}
+@utility text-sans-4xl {
+  font-family: var(--font-sans);
+  font-weight: 400;
+  line-height: 3.625rem;
+  font-size: 3.25rem;
+  letter-spacing: -0.01rem;
+}
+@utility text-sans-semi-sm {
+  font-family: var(--font-sans);
+  font-weight: 500;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.04rem;
+}
+@utility text-sans-semi-md {
+  font-family: var(--font-sans);
+  font-weight: 500;
+  line-height: 1.125rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.04rem;
+}
+@utility text-sans-semi-lg {
+  font-family: var(--font-sans);
+  font-weight: 500;
+  line-height: 1.5rem;
+  font-size: 1rem;
+  letter-spacing: 0.03rem;
+}
+@utility text-sans-semi-xl {
+  font-family: var(--font-sans);
+  font-weight: 500;
+  line-height: 1.625rem;
+  font-size: 1.125rem;
+  letter-spacing: 0.02rem;
+}
diff --git a/styles/dist/purple.css b/styles/dist/purple.css
new file mode 100644
index 00000000..e3ed6769
--- /dev/null
+++ b/styles/dist/purple.css
@@ -0,0 +1,180 @@
+.purple-theme {
+  --surface-default: var(--color-neutral-0);
+  --surface-hover: var(--color-neutral-200);
+  --surface-raise: var(--color-neutral-50);
+  --surface-secondary: var(--color-neutral-100);
+  --surface-tertiary: var(--color-neutral-200);
+  --surface-disabled: var(--color-neutral-100);
+  --surface-scrim: color(
+    display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4
+  ); /* #080f1166 with alpha 0.4 */
+  --surface-accent: var(--theme-accent-800);
+  --surface-accent-hover: var(--theme-accent-700);
+  --surface-accent-secondary: var(--theme-accent-200);
+  --surface-accent-secondary-hover: var(--theme-accent-300);
+  --surface-destructive: var(--theme-destructive-800);
+  --surface-destructive-hover: var(--theme-destructive-700);
+  --surface-destructive-secondary: var(--theme-destructive-200);
+  --surface-destructive-secondary-hover: var(--theme-destructive-300);
+  --surface-notice: var(--theme-notice-800);
+  --surface-notice-hover: var(--theme-notice-700);
+  --surface-notice-secondary: var(--theme-notice-200);
+  --surface-notice-secondary-hover: var(--theme-notice-300);
+  --surface-success: var(--theme-success-800);
+  --surface-success-secondary: var(--theme-success-200);
+  --surface-error: var(--theme-error-800);
+  --surface-error-secondary: var(--theme-error-200);
+  --surface-inverse-raise: var(--content-raise);
+  --surface-inverse-primary: var(--content-default);
+  --surface-inverse-secondary: var(--content-secondary);
+  --surface-info: var(--theme-info-800);
+  --surface-info-hover: var(--theme-info-700);
+  --surface-info-secondary: var(--theme-info-200);
+  --surface-info-secondary-hover: var(--theme-info-300);
+  --content-raise: var(--color-neutral-900);
+  --content-default: var(--color-neutral-800);
+  --content-secondary: var(--color-neutral-700);
+  --content-tertiary: var(--color-neutral-600);
+  --content-quaternary: var(--color-neutral-500);
+  --content-disabled: var(--color-neutral-500);
+  --content-accent: var(--theme-accent-800);
+  --content-accent-secondary: var(--theme-accent-700);
+  --content-accent-tertiary: var(--theme-accent-600);
+  --content-accent-disabled: var(--theme-accent-500);
+  --content-destructive: var(--theme-destructive-800);
+  --content-destructive-secondary: var(--theme-destructive-700);
+  --content-destructive-tertiary: var(--theme-destructive-600);
+  --content-destructive-disabled: var(--theme-destructive-500);
+  --content-success: var(--theme-success-800);
+  --content-success-secondary: var(--theme-success-700);
+  --content-success-tertiary: var(--theme-success-600);
+  --content-success-disabled: var(--theme-success-500);
+  --content-error: var(--theme-error-800);
+  --content-error-secondary: var(--theme-error-700);
+  --content-error-tertiary: var(--theme-error-600);
+  --content-error-disabled: var(--theme-error-500);
+  --content-notice: var(--theme-notice-800);
+  --content-notice-secondary: var(--theme-notice-700);
+  --content-notice-tertiary: var(--theme-notice-600);
+  --content-notice-disabled: var(--theme-notice-500);
+  --content-inverse: var(--surface-default);
+  --content-inverse-raise: var(--surface-raise);
+  --content-inverse-secondary: var(--surface-secondary);
+  --content-info: var(--theme-info-800);
+  --content-info-secondary: var(--theme-info-700);
+  --content-info-tertiary: var(--theme-info-600);
+  --content-info-disabled: var(--theme-info-500);
+  --stroke-default: var(--color-neutral-300);
+  --stroke-hover: var(--color-neutral-400);
+  --stroke-secondary: var(--color-neutral-200);
+  --stroke-tertiary: var(--color-neutral-100);
+  --stroke-raise: var(--color-neutral-500);
+  --stroke-surface: var(--surface-default);
+  --stroke-accent: var(--theme-accent-800);
+  --stroke-accent-secondary: var(--theme-accent-600);
+  --stroke-accent-tertiary: var(--theme-accent-400);
+  --stroke-accent-quaternary: var(--theme-accent-300);
+  --stroke-destructive: var(--theme-destructive-800);
+  --stroke-destructive-secondary: var(--theme-destructive-600);
+  --stroke-destructive-tertiary: var(--theme-destructive-400);
+  --stroke-destructive-quaternary: var(--theme-destructive-300);
+  --stroke-success: var(--theme-success-800);
+  --stroke-success-secondary: var(--theme-success-600);
+  --stroke-success-tertiary: var(--theme-success-400);
+  --stroke-success-quaternary: var(--theme-success-300);
+  --stroke-error: var(--theme-error-800);
+  --stroke-error-secondary: var(--theme-error-600);
+  --stroke-error-tertiary: var(--theme-error-400);
+  --stroke-error-quaternary: var(--theme-error-300);
+  --stroke-notice: var(--theme-notice-800);
+  --stroke-notice-secondary: var(--theme-notice-600);
+  --stroke-notice-tertiary: var(--theme-notice-400);
+  --stroke-notice-quaternary: var(--theme-notice-300);
+  --stroke-info: var(--theme-info-800);
+  --stroke-info-secondary: var(--theme-info-600);
+  --stroke-info-tertiary: var(--theme-info-400);
+  --stroke-info-quaternary: var(--theme-info-300);
+  --chart-fill-area-primary: color(
+    display-p3 0.6176620043485992 0.5072919661927223 0.7770451092818965 / 0.7
+  ); /* #a380cbb3 with alpha 0.7 */
+  --chart-fill-area-secondary: color(
+    display-p3 0.5266029147263402 0.43201348221720354 0.658472257647523 / 0.7
+  ); /* #8b6dacb3 with alpha 0.7 */
+  --chart-fill-area-tertiary: color(
+    display-p3 0.40927836765624315 0.3368069077031495 0.5055688506059814 / 0.7
+  ); /* #6c5584b3 with alpha 0.7 */
+  --chart-fill-area-quaternary: color(
+    display-p3 0.2925207541619176 0.24535487188954597 0.3602153988663625 / 0.2
+  ); /* #4d3e5e33 with alpha 0.2 */
+  --chart-fill-item-primary: var(--theme-accent-700);
+  --chart-fill-item-secondary: var(--theme-accent-600);
+  --chart-fill-item-tertiary: var(--theme-accent-500);
+  --chart-fill-item-quaternary: var(--theme-accent-400);
+  --chart-fill-error-primary: var(--theme-destructive-700);
+  --chart-fill-error-secondary: var(--theme-destructive-600);
+  --chart-fill-error-tertiary: var(--theme-destructive-500);
+  --chart-fill-error-quaternary: var(--theme-destructive-400);
+  --chart-fill-inactive: var(--color-neutral-50);
+  --chart-stroke-line: var(--theme-accent-700);
+  --chart-stroke-line-secondary: var(--color-yellow-600);
+  --chart-stroke-line-tertiary: var(--color-red-600);
+  --chart-stroke-line-quaternary: var(--color-blue-600);
+  --chart-stroke-y-axis: color(
+    display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4
+  ); /* #2d333566 with alpha 0.4 */
+  --chart-stroke-item: color(
+    display-p3 0.6176620043485992 0.5072919661927223 0.7770451092818965 / 0.4
+  ); /* #a380cb66 with alpha 0.4 */
+  --chart-stroke-item-inactive: var(--color-neutral-200);
+  --chart-stroke-error: color(
+    display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4
+  ); /* #da617766 with alpha 0.4 */
+  --theme-accent-100: var(--color-purple-100);
+  --theme-accent-200: var(--color-purple-200);
+  --theme-accent-300: var(--color-purple-300);
+  --theme-accent-400: var(--color-purple-400);
+  --theme-accent-500: var(--color-purple-500);
+  --theme-accent-600: var(--color-purple-600);
+  --theme-accent-700: var(--color-purple-700);
+  --theme-accent-800: var(--color-purple-800);
+  --theme-destructive-100: var(--color-red-100);
+  --theme-destructive-200: var(--color-red-200);
+  --theme-destructive-300: var(--color-red-300);
+  --theme-destructive-400: var(--color-red-400);
+  --theme-destructive-500: var(--color-red-500);
+  --theme-destructive-600: var(--color-red-600);
+  --theme-destructive-700: var(--color-red-700);
+  --theme-destructive-800: var(--color-red-800);
+  --theme-success-100: var(--color-green-100);
+  --theme-success-200: var(--color-green-200);
+  --theme-success-300: var(--color-green-300);
+  --theme-success-400: var(--color-green-400);
+  --theme-success-500: var(--color-green-500);
+  --theme-success-600: var(--color-green-600);
+  --theme-success-700: var(--color-green-700);
+  --theme-success-800: var(--color-green-800);
+  --theme-error-100: var(--color-red-100);
+  --theme-error-200: var(--color-red-200);
+  --theme-error-300: var(--color-red-300);
+  --theme-error-400: var(--color-red-400);
+  --theme-error-500: var(--color-red-500);
+  --theme-error-600: var(--color-red-600);
+  --theme-error-700: var(--color-red-700);
+  --theme-error-800: var(--color-red-800);
+  --theme-notice-100: var(--color-yellow-100);
+  --theme-notice-200: var(--color-yellow-200);
+  --theme-notice-300: var(--color-yellow-300);
+  --theme-notice-400: var(--color-yellow-400);
+  --theme-notice-500: var(--color-yellow-500);
+  --theme-notice-600: var(--color-yellow-600);
+  --theme-notice-700: var(--color-yellow-700);
+  --theme-notice-800: var(--color-yellow-800);
+  --theme-info-100: var(--color-blue-100);
+  --theme-info-200: var(--color-blue-200);
+  --theme-info-300: var(--color-blue-300);
+  --theme-info-400: var(--color-blue-400);
+  --theme-info-500: var(--color-blue-500);
+  --theme-info-600: var(--color-blue-600);
+  --theme-info-700: var(--color-blue-700);
+  --theme-info-800: var(--color-blue-800);
+}
diff --git a/styles/dist/red.css b/styles/dist/red.css
new file mode 100644
index 00000000..60142793
--- /dev/null
+++ b/styles/dist/red.css
@@ -0,0 +1,180 @@
+.red-theme {
+  --surface-default: var(--color-neutral-0);
+  --surface-hover: var(--color-neutral-200);
+  --surface-raise: var(--color-neutral-50);
+  --surface-secondary: var(--color-neutral-100);
+  --surface-tertiary: var(--color-neutral-200);
+  --surface-disabled: var(--color-neutral-100);
+  --surface-scrim: color(
+    display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4
+  ); /* #080f1166 with alpha 0.4 */
+  --surface-accent: var(--theme-accent-800);
+  --surface-accent-hover: var(--theme-accent-700);
+  --surface-accent-secondary: var(--theme-accent-200);
+  --surface-accent-secondary-hover: var(--theme-accent-300);
+  --surface-destructive: var(--theme-destructive-800);
+  --surface-destructive-hover: var(--theme-destructive-700);
+  --surface-destructive-secondary: var(--theme-destructive-200);
+  --surface-destructive-secondary-hover: var(--theme-destructive-300);
+  --surface-notice: var(--theme-notice-800);
+  --surface-notice-hover: var(--theme-notice-700);
+  --surface-notice-secondary: var(--theme-notice-200);
+  --surface-notice-secondary-hover: var(--theme-notice-300);
+  --surface-success: var(--theme-success-800);
+  --surface-success-secondary: var(--theme-success-200);
+  --surface-error: var(--theme-error-800);
+  --surface-error-secondary: var(--theme-error-200);
+  --surface-inverse-raise: var(--content-raise);
+  --surface-inverse-primary: var(--content-default);
+  --surface-inverse-secondary: var(--content-secondary);
+  --surface-info: var(--theme-info-800);
+  --surface-info-hover: var(--theme-info-700);
+  --surface-info-secondary: var(--theme-info-200);
+  --surface-info-secondary-hover: var(--theme-info-300);
+  --content-raise: var(--color-neutral-900);
+  --content-default: var(--color-neutral-800);
+  --content-secondary: var(--color-neutral-700);
+  --content-tertiary: var(--color-neutral-600);
+  --content-quaternary: var(--color-neutral-500);
+  --content-disabled: var(--color-neutral-500);
+  --content-accent: var(--theme-accent-800);
+  --content-accent-secondary: var(--theme-accent-700);
+  --content-accent-tertiary: var(--theme-accent-600);
+  --content-accent-disabled: var(--theme-accent-500);
+  --content-destructive: var(--theme-destructive-800);
+  --content-destructive-secondary: var(--theme-destructive-700);
+  --content-destructive-tertiary: var(--theme-destructive-600);
+  --content-destructive-disabled: var(--theme-destructive-500);
+  --content-success: var(--theme-success-800);
+  --content-success-secondary: var(--theme-success-700);
+  --content-success-tertiary: var(--theme-success-600);
+  --content-success-disabled: var(--theme-success-500);
+  --content-error: var(--theme-error-800);
+  --content-error-secondary: var(--theme-error-700);
+  --content-error-tertiary: var(--theme-error-600);
+  --content-error-disabled: var(--theme-error-500);
+  --content-notice: var(--theme-notice-800);
+  --content-notice-secondary: var(--theme-notice-700);
+  --content-notice-tertiary: var(--theme-notice-600);
+  --content-notice-disabled: var(--theme-notice-500);
+  --content-inverse: var(--surface-default);
+  --content-inverse-raise: var(--surface-raise);
+  --content-inverse-secondary: var(--surface-secondary);
+  --content-info: var(--theme-info-800);
+  --content-info-secondary: var(--theme-info-700);
+  --content-info-tertiary: var(--theme-info-600);
+  --content-info-disabled: var(--theme-info-500);
+  --stroke-default: var(--color-neutral-300);
+  --stroke-hover: var(--color-neutral-400);
+  --stroke-secondary: var(--color-neutral-200);
+  --stroke-tertiary: var(--color-neutral-100);
+  --stroke-raise: var(--color-neutral-500);
+  --stroke-surface: var(--surface-default);
+  --stroke-accent: var(--theme-accent-800);
+  --stroke-accent-secondary: var(--theme-accent-600);
+  --stroke-accent-tertiary: var(--theme-accent-400);
+  --stroke-accent-quaternary: var(--theme-accent-300);
+  --stroke-destructive: var(--theme-destructive-800);
+  --stroke-destructive-secondary: var(--theme-destructive-600);
+  --stroke-destructive-tertiary: var(--theme-destructive-400);
+  --stroke-destructive-quaternary: var(--theme-destructive-300);
+  --stroke-success: var(--theme-success-800);
+  --stroke-success-secondary: var(--theme-success-600);
+  --stroke-success-tertiary: var(--theme-success-400);
+  --stroke-success-quaternary: var(--theme-success-300);
+  --stroke-error: var(--theme-error-800);
+  --stroke-error-secondary: var(--theme-error-600);
+  --stroke-error-tertiary: var(--theme-error-400);
+  --stroke-error-quaternary: var(--theme-error-300);
+  --stroke-notice: var(--theme-notice-800);
+  --stroke-notice-secondary: var(--theme-notice-600);
+  --stroke-notice-tertiary: var(--theme-notice-400);
+  --stroke-notice-quaternary: var(--theme-notice-300);
+  --stroke-info: var(--theme-info-800);
+  --stroke-info-secondary: var(--theme-info-600);
+  --stroke-info-tertiary: var(--theme-info-400);
+  --stroke-info-quaternary: var(--theme-info-300);
+  --chart-fill-area-primary: color(
+    display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.7
+  ); /* #da6177b3 with alpha 0.7 */
+  --chart-fill-area-secondary: color(
+    display-p3 0.7123368412346623 0.3659764657543945 0.42018168321468297 / 0.7
+  ); /* #c3576ab3 with alpha 0.7 */
+  --chart-fill-area-tertiary: color(
+    display-p3 0.54467993913213 0.2881585750532095 0.32859275026896756 / 0.7
+  ); /* #954553b3 with alpha 0.7 */
+  --chart-fill-area-quaternary: color(
+    display-p3 0.3880353956012564 0.21503505622273383 0.2377024955644162 / 0.2
+  ); /* #6a343c33 with alpha 0.2 */
+  --chart-fill-item-primary: var(--theme-accent-700);
+  --chart-fill-item-secondary: var(--theme-accent-600);
+  --chart-fill-item-tertiary: var(--theme-accent-500);
+  --chart-fill-item-quaternary: var(--theme-accent-400);
+  --chart-fill-error-primary: var(--theme-destructive-700);
+  --chart-fill-error-secondary: var(--theme-destructive-600);
+  --chart-fill-error-tertiary: var(--theme-destructive-500);
+  --chart-fill-error-quaternary: var(--theme-destructive-400);
+  --chart-fill-inactive: var(--color-neutral-50);
+  --chart-stroke-line: var(--theme-accent-700);
+  --chart-stroke-line-secondary: var(--color-yellow-600);
+  --chart-stroke-line-tertiary: var(--color-red-600);
+  --chart-stroke-line-quaternary: var(--color-blue-600);
+  --chart-stroke-y-axis: color(
+    display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4
+  ); /* #2d333566 with alpha 0.4 */
+  --chart-stroke-item: color(
+    display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4
+  ); /* #da617766 with alpha 0.4 */
+  --chart-stroke-item-inactive: var(--color-neutral-200);
+  --chart-stroke-error: color(
+    display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4
+  ); /* #da617766 with alpha 0.4 */
+  --theme-accent-100: var(--color-red-100);
+  --theme-accent-200: var(--color-red-200);
+  --theme-accent-300: var(--color-red-300);
+  --theme-accent-400: var(--color-red-400);
+  --theme-accent-500: var(--color-red-500);
+  --theme-accent-600: var(--color-red-600);
+  --theme-accent-700: var(--color-red-700);
+  --theme-accent-800: var(--color-red-800);
+  --theme-destructive-100: var(--color-red-100);
+  --theme-destructive-200: var(--color-red-200);
+  --theme-destructive-300: var(--color-red-300);
+  --theme-destructive-400: var(--color-red-400);
+  --theme-destructive-500: var(--color-red-500);
+  --theme-destructive-600: var(--color-red-600);
+  --theme-destructive-700: var(--color-red-700);
+  --theme-destructive-800: var(--color-red-800);
+  --theme-success-100: var(--color-green-100);
+  --theme-success-200: var(--color-green-200);
+  --theme-success-300: var(--color-green-300);
+  --theme-success-400: var(--color-green-400);
+  --theme-success-500: var(--color-green-500);
+  --theme-success-600: var(--color-green-600);
+  --theme-success-700: var(--color-green-700);
+  --theme-success-800: var(--color-green-800);
+  --theme-error-100: var(--color-red-100);
+  --theme-error-200: var(--color-red-200);
+  --theme-error-300: var(--color-red-300);
+  --theme-error-400: var(--color-red-400);
+  --theme-error-500: var(--color-red-500);
+  --theme-error-600: var(--color-red-600);
+  --theme-error-700: var(--color-red-700);
+  --theme-error-800: var(--color-red-800);
+  --theme-notice-100: var(--color-yellow-100);
+  --theme-notice-200: var(--color-yellow-200);
+  --theme-notice-300: var(--color-yellow-300);
+  --theme-notice-400: var(--color-yellow-400);
+  --theme-notice-500: var(--color-yellow-500);
+  --theme-notice-600: var(--color-yellow-600);
+  --theme-notice-700: var(--color-yellow-700);
+  --theme-notice-800: var(--color-yellow-800);
+  --theme-info-100: var(--color-blue-100);
+  --theme-info-200: var(--color-blue-200);
+  --theme-info-300: var(--color-blue-300);
+  --theme-info-400: var(--color-blue-400);
+  --theme-info-500: var(--color-blue-500);
+  --theme-info-600: var(--color-blue-600);
+  --theme-info-700: var(--color-blue-700);
+  --theme-info-800: var(--color-blue-800);
+}
diff --git a/styles/dist/tailwind.css b/styles/dist/tailwind.css
new file mode 100644
index 00000000..f95bd76d
--- /dev/null
+++ b/styles/dist/tailwind.css
@@ -0,0 +1,51 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role='button'] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+@theme {
+  --color-*: initial; /* disable default colors */
+
+  --breakpoint-300: 300px;
+  --breakpoint-400: 400px;
+  --breakpoint-500: 500px;
+  --breakpoint-600: 600px;
+  --breakpoint-700: 700px;
+  --breakpoint-800: 800px;
+  --breakpoint-900: 900px;
+  --breakpoint-1000: 1000px;
+  --breakpoint-1200: 1200px;
+  --breakpoint-1400: 1400px;
+  --breakpoint-1600: 1600px;
+
+  --container-300: 300px;
+  --container-400: 400px;
+  --container-500: 500px;
+  --container-600: 600px;
+  --container-700: 700px;
+  --container-800: 800px;
+  --container-900: 900px;
+  --container-1000: 1000px;
+  --container-1200: 1200px;
+  --container-1400: 1400px;
+  --container-1600: 1600px;
+}
diff --git a/styles/dist/yellow.css b/styles/dist/yellow.css
new file mode 100644
index 00000000..4033d764
--- /dev/null
+++ b/styles/dist/yellow.css
@@ -0,0 +1,180 @@
+.yellow-theme {
+  --surface-default: var(--color-neutral-0);
+  --surface-hover: var(--color-neutral-200);
+  --surface-raise: var(--color-neutral-50);
+  --surface-secondary: var(--color-neutral-100);
+  --surface-tertiary: var(--color-neutral-200);
+  --surface-disabled: var(--color-neutral-100);
+  --surface-scrim: color(
+    display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4
+  ); /* #080f1166 with alpha 0.4 */
+  --surface-accent: var(--theme-accent-800);
+  --surface-accent-hover: var(--theme-accent-700);
+  --surface-accent-secondary: var(--theme-accent-200);
+  --surface-accent-secondary-hover: var(--theme-accent-300);
+  --surface-destructive: var(--theme-destructive-800);
+  --surface-destructive-hover: var(--theme-destructive-700);
+  --surface-destructive-secondary: var(--theme-destructive-200);
+  --surface-destructive-secondary-hover: var(--theme-destructive-300);
+  --surface-notice: var(--theme-notice-800);
+  --surface-notice-hover: var(--theme-notice-700);
+  --surface-notice-secondary: var(--theme-notice-200);
+  --surface-notice-secondary-hover: var(--theme-notice-300);
+  --surface-success: var(--theme-success-800);
+  --surface-success-secondary: var(--theme-success-200);
+  --surface-error: var(--theme-error-800);
+  --surface-error-secondary: var(--theme-error-200);
+  --surface-inverse-raise: var(--content-raise);
+  --surface-inverse-primary: var(--content-default);
+  --surface-inverse-secondary: var(--content-secondary);
+  --surface-info: var(--theme-info-800);
+  --surface-info-hover: var(--theme-info-700);
+  --surface-info-secondary: var(--theme-info-200);
+  --surface-info-secondary-hover: var(--theme-info-300);
+  --content-raise: var(--color-neutral-900);
+  --content-default: var(--color-neutral-800);
+  --content-secondary: var(--color-neutral-700);
+  --content-tertiary: var(--color-neutral-600);
+  --content-quaternary: var(--color-neutral-500);
+  --content-disabled: var(--color-neutral-500);
+  --content-accent: var(--theme-accent-800);
+  --content-accent-secondary: var(--theme-accent-700);
+  --content-accent-tertiary: var(--theme-accent-600);
+  --content-accent-disabled: var(--theme-accent-500);
+  --content-destructive: var(--theme-destructive-800);
+  --content-destructive-secondary: var(--theme-destructive-700);
+  --content-destructive-tertiary: var(--theme-destructive-600);
+  --content-destructive-disabled: var(--theme-destructive-500);
+  --content-success: var(--theme-success-800);
+  --content-success-secondary: var(--theme-success-700);
+  --content-success-tertiary: var(--theme-success-600);
+  --content-success-disabled: var(--theme-success-500);
+  --content-error: var(--theme-error-800);
+  --content-error-secondary: var(--theme-error-700);
+  --content-error-tertiary: var(--theme-error-600);
+  --content-error-disabled: var(--theme-error-500);
+  --content-notice: var(--theme-notice-800);
+  --content-notice-secondary: var(--theme-notice-700);
+  --content-notice-tertiary: var(--theme-notice-600);
+  --content-notice-disabled: var(--theme-notice-500);
+  --content-inverse: var(--surface-default);
+  --content-inverse-raise: var(--surface-raise);
+  --content-inverse-secondary: var(--surface-secondary);
+  --content-info: var(--theme-info-800);
+  --content-info-secondary: var(--theme-info-700);
+  --content-info-tertiary: var(--theme-info-600);
+  --content-info-disabled: var(--theme-info-500);
+  --stroke-default: var(--color-neutral-300);
+  --stroke-hover: var(--color-neutral-400);
+  --stroke-secondary: var(--color-neutral-200);
+  --stroke-tertiary: var(--color-neutral-100);
+  --stroke-raise: var(--color-neutral-500);
+  --stroke-surface: var(--surface-default);
+  --stroke-accent: var(--theme-accent-800);
+  --stroke-accent-secondary: var(--theme-accent-600);
+  --stroke-accent-tertiary: var(--theme-accent-400);
+  --stroke-accent-quaternary: var(--theme-accent-300);
+  --stroke-destructive: var(--theme-destructive-800);
+  --stroke-destructive-secondary: var(--theme-destructive-600);
+  --stroke-destructive-tertiary: var(--theme-destructive-400);
+  --stroke-destructive-quaternary: var(--theme-destructive-300);
+  --stroke-success: var(--theme-success-800);
+  --stroke-success-secondary: var(--theme-success-600);
+  --stroke-success-tertiary: var(--theme-success-400);
+  --stroke-success-quaternary: var(--theme-success-300);
+  --stroke-error: var(--theme-error-800);
+  --stroke-error-secondary: var(--theme-error-600);
+  --stroke-error-tertiary: var(--theme-error-400);
+  --stroke-error-quaternary: var(--theme-error-300);
+  --stroke-notice: var(--theme-notice-800);
+  --stroke-notice-secondary: var(--theme-notice-600);
+  --stroke-notice-tertiary: var(--theme-notice-400);
+  --stroke-notice-quaternary: var(--theme-notice-300);
+  --stroke-info: var(--theme-info-800);
+  --stroke-info-secondary: var(--theme-info-600);
+  --stroke-info-tertiary: var(--theme-info-400);
+  --stroke-info-quaternary: var(--theme-info-300);
+  --chart-fill-area-primary: color(
+    display-p3 0.7625685956908921 0.60767449881825 0.2994621129781391 / 0.7
+  ); /* #ca993bb3 with alpha 0.7 */
+  --chart-fill-area-secondary: color(
+    display-p3 0.577577081670476 0.46066704465450065 0.23478898502532436 / 0.7
+  ); /* #997430b3 with alpha 0.7 */
+  --chart-fill-area-tertiary: color(
+    display-p3 0.4456676007915647 0.3572643913038676 0.1862111103866858 / 0.7
+  ); /* #765a27b3 with alpha 0.7 */
+  --chart-fill-area-quaternary: color(
+    display-p3 0.32158715205107063 0.26170195700266397 0.14269771287346764 / 0.2
+  ); /* #55421f33 with alpha 0.2 */
+  --chart-fill-item-primary: var(--theme-accent-700);
+  --chart-fill-item-secondary: var(--theme-accent-600);
+  --chart-fill-item-tertiary: var(--theme-accent-500);
+  --chart-fill-item-quaternary: var(--theme-accent-400);
+  --chart-fill-error-primary: var(--theme-destructive-700);
+  --chart-fill-error-secondary: var(--theme-destructive-600);
+  --chart-fill-error-tertiary: var(--theme-destructive-500);
+  --chart-fill-error-quaternary: var(--theme-destructive-400);
+  --chart-fill-inactive: var(--color-neutral-50);
+  --chart-stroke-line: var(--theme-accent-700);
+  --chart-stroke-line-secondary: var(--color-yellow-600);
+  --chart-stroke-line-tertiary: var(--color-red-600);
+  --chart-stroke-line-quaternary: var(--color-blue-600);
+  --chart-stroke-y-axis: color(
+    display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4
+  ); /* #2d333566 with alpha 0.4 */
+  --chart-stroke-item: color(
+    display-p3 0.7625685956908921 0.60767449881825 0.2994621129781391 / 0.4
+  ); /* #ca993b66 with alpha 0.4 */
+  --chart-stroke-item-inactive: var(--color-neutral-200);
+  --chart-stroke-error: color(
+    display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4
+  ); /* #da617766 with alpha 0.4 */
+  --theme-accent-100: var(--color-yellow-100);
+  --theme-accent-200: var(--color-yellow-200);
+  --theme-accent-300: var(--color-yellow-300);
+  --theme-accent-400: var(--color-yellow-400);
+  --theme-accent-500: var(--color-yellow-500);
+  --theme-accent-600: var(--color-yellow-600);
+  --theme-accent-700: var(--color-yellow-700);
+  --theme-accent-800: var(--color-yellow-800);
+  --theme-destructive-100: var(--color-red-100);
+  --theme-destructive-200: var(--color-red-200);
+  --theme-destructive-300: var(--color-red-300);
+  --theme-destructive-400: var(--color-red-400);
+  --theme-destructive-500: var(--color-red-500);
+  --theme-destructive-600: var(--color-red-600);
+  --theme-destructive-700: var(--color-red-700);
+  --theme-destructive-800: var(--color-red-800);
+  --theme-success-100: var(--color-green-100);
+  --theme-success-200: var(--color-green-200);
+  --theme-success-300: var(--color-green-300);
+  --theme-success-400: var(--color-green-400);
+  --theme-success-500: var(--color-green-500);
+  --theme-success-600: var(--color-green-600);
+  --theme-success-700: var(--color-green-700);
+  --theme-success-800: var(--color-green-800);
+  --theme-error-100: var(--color-red-100);
+  --theme-error-200: var(--color-red-200);
+  --theme-error-300: var(--color-red-300);
+  --theme-error-400: var(--color-red-400);
+  --theme-error-500: var(--color-red-500);
+  --theme-error-600: var(--color-red-600);
+  --theme-error-700: var(--color-red-700);
+  --theme-error-800: var(--color-red-800);
+  --theme-notice-100: var(--color-yellow-100);
+  --theme-notice-200: var(--color-yellow-200);
+  --theme-notice-300: var(--color-yellow-300);
+  --theme-notice-400: var(--color-yellow-400);
+  --theme-notice-500: var(--color-yellow-500);
+  --theme-notice-600: var(--color-yellow-600);
+  --theme-notice-700: var(--color-yellow-700);
+  --theme-notice-800: var(--color-yellow-800);
+  --theme-info-100: var(--color-blue-100);
+  --theme-info-200: var(--color-blue-200);
+  --theme-info-300: var(--color-blue-300);
+  --theme-info-400: var(--color-blue-400);
+  --theme-info-500: var(--color-blue-500);
+  --theme-info-600: var(--color-blue-600);
+  --theme-info-700: var(--color-blue-700);
+  --theme-info-800: var(--color-blue-800);
+}