diff --git a/scripts/build_themes.sh b/scripts/build_themes.sh
index 0cedd870..000764c1 100755
--- a/scripts/build_themes.sh
+++ b/scripts/build_themes.sh
@@ -12,6 +12,7 @@ STYLES_PATH=styles/src
 TOKENS_PATH=$STYLES_PATH/.tokens
 
 npx token-transformer --preserveRawValue $STYLES_PATH/tokens.json $TOKENS_PATH/main.json global,colors,core,main
+npx token-transformer --preserveRawValue $STYLES_PATH/tokens.json $TOKENS_PATH/green.json global,colors,core,green-accent,main
 npx token-transformer --preserveRawValue $STYLES_PATH/tokens.json $TOKENS_PATH/yellow.json global,colors,core,yellow-accent,main
 npx token-transformer --preserveRawValue $STYLES_PATH/tokens.json $TOKENS_PATH/purple.json global,colors,core,purple-accent,main
 npx token-transformer --preserveRawValue $STYLES_PATH/tokens.json $TOKENS_PATH/blue.json global,colors,core,blue-accent,main
diff --git a/scripts/convert-tokens.ts b/scripts/convert-tokens.ts
index 88a2dbc3..8df27e63 100644
--- a/scripts/convert-tokens.ts
+++ b/scripts/convert-tokens.ts
@@ -15,7 +15,7 @@ import StyleDictionary from 'style-dictionary'
 import dedent from 'ts-dedent'
 import type { KebabCase } from 'type-fest'
 
-const THEMES = ['main', 'blue', 'yellow', 'purple', 'red'] as const
+const THEMES = ['main', 'blue', 'yellow', 'purple', 'red', 'green'] as const
 
 const FONT_FAMILIES = {
   'GT America Mono': '"GT America Mono", monospace',
diff --git a/styles/dist/green.css b/styles/dist/green.css
new file mode 100644
index 00000000..cb495ae0
--- /dev/null
+++ b/styles/dist/green.css
@@ -0,0 +1,643 @@
+/* THIS FILE IS AUTOGENERATED, DO NOT EDIT */
+
+.green-theme {
+  --surface-default-rgb: var(--base-neutral-0-rgb);
+  --surface-default-p3: var(--base-neutral-0-p3);
+  --surface-default: rgb(var(--surface-default-rgb));
+
+  --surface-hover-rgb: var(--base-neutral-200-rgb);
+  --surface-hover-p3: var(--base-neutral-200-p3);
+  --surface-hover: rgb(var(--surface-hover-rgb));
+
+  --surface-raise-rgb: var(--base-neutral-50-rgb);
+  --surface-raise-p3: var(--base-neutral-50-p3);
+  --surface-raise: rgb(var(--surface-raise-rgb));
+
+  --surface-secondary-rgb: var(--base-neutral-100-rgb);
+  --surface-secondary-p3: var(--base-neutral-100-p3);
+  --surface-secondary: rgb(var(--surface-secondary-rgb));
+
+  --surface-tertiary-rgb: var(--base-neutral-200-rgb);
+  --surface-tertiary-p3: var(--base-neutral-200-p3);
+  --surface-tertiary: rgb(var(--surface-tertiary-rgb));
+
+  --surface-disabled-rgb: var(--base-neutral-100-rgb);
+  --surface-disabled-p3: var(--base-neutral-100-p3);
+  --surface-disabled: rgb(var(--surface-disabled-rgb));
+
+  --surface-scrim: rgba(var(--base-neutral-0-rgb), 0.4);
+  --surface-scrim-p3: color(display-p3 0.0314 0.0588 0.0667 / 0.4);
+
+  --surface-accent-rgb: var(--theme-accent-800-rgb);
+  --surface-accent-p3: var(--theme-accent-800-p3);
+  --surface-accent: rgb(var(--surface-accent-rgb));
+
+  --surface-accent-hover-rgb: var(--theme-accent-700-rgb);
+  --surface-accent-hover-p3: var(--theme-accent-700-p3);
+  --surface-accent-hover: rgb(var(--surface-accent-hover-rgb));
+
+  --surface-accent-secondary-rgb: var(--theme-accent-200-rgb);
+  --surface-accent-secondary-p3: var(--theme-accent-200-p3);
+  --surface-accent-secondary: rgb(var(--surface-accent-secondary-rgb));
+
+  --surface-accent-secondary-hover-rgb: var(--theme-accent-300-rgb);
+  --surface-accent-secondary-hover-p3: var(--theme-accent-300-p3);
+  --surface-accent-secondary-hover: rgb(var(--surface-accent-secondary-hover-rgb));
+
+  --surface-destructive-rgb: var(--theme-destructive-800-rgb);
+  --surface-destructive-p3: var(--theme-destructive-800-p3);
+  --surface-destructive: rgb(var(--surface-destructive-rgb));
+
+  --surface-destructive-hover-rgb: var(--theme-destructive-700-rgb);
+  --surface-destructive-hover-p3: var(--theme-destructive-700-p3);
+  --surface-destructive-hover: rgb(var(--surface-destructive-hover-rgb));
+
+  --surface-destructive-secondary-rgb: var(--theme-destructive-200-rgb);
+  --surface-destructive-secondary-p3: var(--theme-destructive-200-p3);
+  --surface-destructive-secondary: rgb(var(--surface-destructive-secondary-rgb));
+
+  --surface-destructive-secondary-hover-rgb: var(--theme-destructive-300-rgb);
+  --surface-destructive-secondary-hover-p3: var(--theme-destructive-300-p3);
+  --surface-destructive-secondary-hover: rgb(
+    var(--surface-destructive-secondary-hover-rgb)
+  );
+
+  --surface-notice-rgb: var(--theme-notice-800-rgb);
+  --surface-notice-p3: var(--theme-notice-800-p3);
+  --surface-notice: rgb(var(--surface-notice-rgb));
+
+  --surface-notice-hover-rgb: var(--theme-notice-700-rgb);
+  --surface-notice-hover-p3: var(--theme-notice-700-p3);
+  --surface-notice-hover: rgb(var(--surface-notice-hover-rgb));
+
+  --surface-notice-secondary-rgb: var(--theme-notice-200-rgb);
+  --surface-notice-secondary-p3: var(--theme-notice-200-p3);
+  --surface-notice-secondary: rgb(var(--surface-notice-secondary-rgb));
+
+  --surface-notice-secondary-hover-rgb: var(--theme-notice-300-rgb);
+  --surface-notice-secondary-hover-p3: var(--theme-notice-300-p3);
+  --surface-notice-secondary-hover: rgb(var(--surface-notice-secondary-hover-rgb));
+
+  --surface-success-rgb: var(--theme-success-800-rgb);
+  --surface-success-p3: var(--theme-success-800-p3);
+  --surface-success: rgb(var(--surface-success-rgb));
+
+  --surface-success-secondary-rgb: var(--theme-success-200-rgb);
+  --surface-success-secondary-p3: var(--theme-success-200-p3);
+  --surface-success-secondary: rgb(var(--surface-success-secondary-rgb));
+
+  --surface-error-rgb: var(--theme-error-800-rgb);
+  --surface-error-p3: var(--theme-error-800-p3);
+  --surface-error: rgb(var(--surface-error-rgb));
+
+  --surface-error-secondary-rgb: var(--theme-error-200-rgb);
+  --surface-error-secondary-p3: var(--theme-error-200-p3);
+  --surface-error-secondary: rgb(var(--surface-error-secondary-rgb));
+
+  --surface-inverse-rgb: var(--content-default-rgb);
+  --surface-inverse-p3: var(--content-default-p3);
+  --surface-inverse: rgb(var(--surface-inverse-rgb));
+
+  --surface-inverse-secondary-rgb: var(--content-secondary-rgb);
+  --surface-inverse-secondary-p3: var(--content-secondary-p3);
+  --surface-inverse-secondary: rgb(var(--surface-inverse-secondary-rgb));
+
+  --surface-inverse-tertiary-rgb: var(--content-tertiary-rgb);
+  --surface-inverse-tertiary-p3: var(--content-tertiary-p3);
+  --surface-inverse-tertiary: rgb(var(--surface-inverse-tertiary-rgb));
+
+  --surface-info-rgb: var(--theme-info-800-rgb);
+  --surface-info-p3: var(--theme-info-800-p3);
+  --surface-info: rgb(var(--surface-info-rgb));
+
+  --surface-info-hover-rgb: var(--theme-info-700-rgb);
+  --surface-info-hover-p3: var(--theme-info-700-p3);
+  --surface-info-hover: rgb(var(--surface-info-hover-rgb));
+
+  --surface-info-secondary-rgb: var(--theme-info-200-rgb);
+  --surface-info-secondary-p3: var(--theme-info-200-p3);
+  --surface-info-secondary: rgb(var(--surface-info-secondary-rgb));
+
+  --surface-info-secondary-hover-rgb: var(--theme-info-300-rgb);
+  --surface-info-secondary-hover-p3: var(--theme-info-300-p3);
+  --surface-info-secondary-hover: rgb(var(--surface-info-secondary-hover-rgb));
+
+  --content-default-rgb: var(--base-neutral-900-rgb);
+  --content-default-p3: var(--base-neutral-900-p3);
+  --content-default: rgb(var(--content-default-rgb));
+
+  --content-secondary-rgb: var(--base-neutral-800-rgb);
+  --content-secondary-p3: var(--base-neutral-800-p3);
+  --content-secondary: rgb(var(--content-secondary-rgb));
+
+  --content-tertiary-rgb: var(--base-neutral-700-rgb);
+  --content-tertiary-p3: var(--base-neutral-700-p3);
+  --content-tertiary: rgb(var(--content-tertiary-rgb));
+
+  --content-quaternary-rgb: var(--base-neutral-600-rgb);
+  --content-quaternary-p3: var(--base-neutral-600-p3);
+  --content-quaternary: rgb(var(--content-quaternary-rgb));
+
+  --content-quinary-rgb: var(--base-neutral-500-rgb);
+  --content-quinary-p3: var(--base-neutral-500-p3);
+  --content-quinary: rgb(var(--content-quinary-rgb));
+
+  --content-disabled-rgb: var(--base-neutral-500-rgb);
+  --content-disabled-p3: var(--base-neutral-500-p3);
+  --content-disabled: rgb(var(--content-disabled-rgb));
+
+  --content-accent-rgb: var(--theme-accent-800-rgb);
+  --content-accent-p3: var(--theme-accent-800-p3);
+  --content-accent: rgb(var(--content-accent-rgb));
+
+  --content-accent-secondary-rgb: var(--theme-accent-700-rgb);
+  --content-accent-secondary-p3: var(--theme-accent-700-p3);
+  --content-accent-secondary: rgb(var(--content-accent-secondary-rgb));
+
+  --content-accent-tertiary-rgb: var(--theme-accent-600-rgb);
+  --content-accent-tertiary-p3: var(--theme-accent-600-p3);
+  --content-accent-tertiary: rgb(var(--content-accent-tertiary-rgb));
+
+  --content-accent-disabled-rgb: var(--theme-accent-500-rgb);
+  --content-accent-disabled-p3: var(--theme-accent-500-p3);
+  --content-accent-disabled: rgb(var(--content-accent-disabled-rgb));
+
+  --content-destructive-rgb: var(--theme-destructive-800-rgb);
+  --content-destructive-p3: var(--theme-destructive-800-p3);
+  --content-destructive: rgb(var(--content-destructive-rgb));
+
+  --content-destructive-secondary-rgb: var(--theme-destructive-700-rgb);
+  --content-destructive-secondary-p3: var(--theme-destructive-700-p3);
+  --content-destructive-secondary: rgb(var(--content-destructive-secondary-rgb));
+
+  --content-destructive-tertiary-rgb: var(--theme-destructive-600-rgb);
+  --content-destructive-tertiary-p3: var(--theme-destructive-600-p3);
+  --content-destructive-tertiary: rgb(var(--content-destructive-tertiary-rgb));
+
+  --content-destructive-disabled-rgb: var(--theme-destructive-500-rgb);
+  --content-destructive-disabled-p3: var(--theme-destructive-500-p3);
+  --content-destructive-disabled: rgb(var(--content-destructive-disabled-rgb));
+
+  --content-success-rgb: var(--theme-success-800-rgb);
+  --content-success-p3: var(--theme-success-800-p3);
+  --content-success: rgb(var(--content-success-rgb));
+
+  --content-success-secondary-rgb: var(--theme-success-700-rgb);
+  --content-success-secondary-p3: var(--theme-success-700-p3);
+  --content-success-secondary: rgb(var(--content-success-secondary-rgb));
+
+  --content-success-tertiary-rgb: var(--theme-success-600-rgb);
+  --content-success-tertiary-p3: var(--theme-success-600-p3);
+  --content-success-tertiary: rgb(var(--content-success-tertiary-rgb));
+
+  --content-success-disabled-rgb: var(--theme-success-500-rgb);
+  --content-success-disabled-p3: var(--theme-success-500-p3);
+  --content-success-disabled: rgb(var(--content-success-disabled-rgb));
+
+  --content-error-rgb: var(--theme-error-800-rgb);
+  --content-error-p3: var(--theme-error-800-p3);
+  --content-error: rgb(var(--content-error-rgb));
+
+  --content-error-secondary-rgb: var(--theme-error-700-rgb);
+  --content-error-secondary-p3: var(--theme-error-700-p3);
+  --content-error-secondary: rgb(var(--content-error-secondary-rgb));
+
+  --content-error-tertiary-rgb: var(--theme-error-600-rgb);
+  --content-error-tertiary-p3: var(--theme-error-600-p3);
+  --content-error-tertiary: rgb(var(--content-error-tertiary-rgb));
+
+  --content-error-disabled-rgb: var(--theme-error-500-rgb);
+  --content-error-disabled-p3: var(--theme-error-500-p3);
+  --content-error-disabled: rgb(var(--content-error-disabled-rgb));
+
+  --content-notice-rgb: var(--theme-notice-800-rgb);
+  --content-notice-p3: var(--theme-notice-800-p3);
+  --content-notice: rgb(var(--content-notice-rgb));
+
+  --content-notice-secondary-rgb: var(--theme-notice-700-rgb);
+  --content-notice-secondary-p3: var(--theme-notice-700-p3);
+  --content-notice-secondary: rgb(var(--content-notice-secondary-rgb));
+
+  --content-notice-tertiary-rgb: var(--theme-notice-600-rgb);
+  --content-notice-tertiary-p3: var(--theme-notice-600-p3);
+  --content-notice-tertiary: rgb(var(--content-notice-tertiary-rgb));
+
+  --content-notice-disabled-rgb: var(--theme-notice-500-rgb);
+  --content-notice-disabled-p3: var(--theme-notice-500-p3);
+  --content-notice-disabled: rgb(var(--content-notice-disabled-rgb));
+
+  --content-inverse-rgb: var(--surface-default-rgb);
+  --content-inverse-p3: var(--surface-default-p3);
+  --content-inverse: rgb(var(--content-inverse-rgb));
+
+  --content-inverse-raise-rgb: var(--surface-raise-rgb);
+  --content-inverse-raise-p3: var(--surface-raise-p3);
+  --content-inverse-raise: rgb(var(--content-inverse-raise-rgb));
+
+  --content-inverse-secondary-rgb: var(--surface-secondary-rgb);
+  --content-inverse-secondary-p3: var(--surface-secondary-p3);
+  --content-inverse-secondary: rgb(var(--content-inverse-secondary-rgb));
+
+  --content-info-rgb: var(--theme-info-800-rgb);
+  --content-info-p3: var(--theme-info-800-p3);
+  --content-info: rgb(var(--content-info-rgb));
+
+  --content-info-secondary-rgb: var(--theme-info-700-rgb);
+  --content-info-secondary-p3: var(--theme-info-700-p3);
+  --content-info-secondary: rgb(var(--content-info-secondary-rgb));
+
+  --content-info-tertiary-rgb: var(--theme-info-600-rgb);
+  --content-info-tertiary-p3: var(--theme-info-600-p3);
+  --content-info-tertiary: rgb(var(--content-info-tertiary-rgb));
+
+  --content-info-disabled-rgb: var(--theme-info-500-rgb);
+  --content-info-disabled-p3: var(--theme-info-500-p3);
+  --content-info-disabled: rgb(var(--content-info-disabled-rgb));
+
+  --stroke-default-rgb: var(--base-neutral-300-rgb);
+  --stroke-default-p3: var(--base-neutral-300-p3);
+  --stroke-default: rgb(var(--stroke-default-rgb));
+
+  --stroke-hover-rgb: var(--base-neutral-400-rgb);
+  --stroke-hover-p3: var(--base-neutral-400-p3);
+  --stroke-hover: rgb(var(--stroke-hover-rgb));
+
+  --stroke-secondary-rgb: var(--base-neutral-200-rgb);
+  --stroke-secondary-p3: var(--base-neutral-200-p3);
+  --stroke-secondary: rgb(var(--stroke-secondary-rgb));
+
+  --stroke-tertiary-rgb: var(--base-neutral-100-rgb);
+  --stroke-tertiary-p3: var(--base-neutral-100-p3);
+  --stroke-tertiary: rgb(var(--stroke-tertiary-rgb));
+
+  --stroke-raise-rgb: var(--base-neutral-500-rgb);
+  --stroke-raise-p3: var(--base-neutral-500-p3);
+  --stroke-raise: rgb(var(--stroke-raise-rgb));
+
+  --stroke-surface-rgb: var(--surface-default-rgb);
+  --stroke-surface-p3: var(--surface-default-p3);
+  --stroke-surface: rgb(var(--stroke-surface-rgb));
+
+  --stroke-accent-rgb: var(--theme-accent-800-rgb);
+  --stroke-accent-p3: var(--theme-accent-800-p3);
+  --stroke-accent: rgb(var(--stroke-accent-rgb));
+
+  --stroke-accent-secondary-rgb: var(--theme-accent-600-rgb);
+  --stroke-accent-secondary-p3: var(--theme-accent-600-p3);
+  --stroke-accent-secondary: rgb(var(--stroke-accent-secondary-rgb));
+
+  --stroke-accent-tertiary-rgb: var(--theme-accent-400-rgb);
+  --stroke-accent-tertiary-p3: var(--theme-accent-400-p3);
+  --stroke-accent-tertiary: rgb(var(--stroke-accent-tertiary-rgb));
+
+  --stroke-accent-quaternary-rgb: var(--theme-accent-300-rgb);
+  --stroke-accent-quaternary-p3: var(--theme-accent-300-p3);
+  --stroke-accent-quaternary: rgb(var(--stroke-accent-quaternary-rgb));
+
+  --stroke-destructive-rgb: var(--theme-destructive-800-rgb);
+  --stroke-destructive-p3: var(--theme-destructive-800-p3);
+  --stroke-destructive: rgb(var(--stroke-destructive-rgb));
+
+  --stroke-destructive-secondary-rgb: var(--theme-destructive-600-rgb);
+  --stroke-destructive-secondary-p3: var(--theme-destructive-600-p3);
+  --stroke-destructive-secondary: rgb(var(--stroke-destructive-secondary-rgb));
+
+  --stroke-destructive-tertiary-rgb: var(--theme-destructive-400-rgb);
+  --stroke-destructive-tertiary-p3: var(--theme-destructive-400-p3);
+  --stroke-destructive-tertiary: rgb(var(--stroke-destructive-tertiary-rgb));
+
+  --stroke-destructive-quaternary-rgb: var(--theme-destructive-300-rgb);
+  --stroke-destructive-quaternary-p3: var(--theme-destructive-300-p3);
+  --stroke-destructive-quaternary: rgb(var(--stroke-destructive-quaternary-rgb));
+
+  --stroke-success-rgb: var(--theme-success-800-rgb);
+  --stroke-success-p3: var(--theme-success-800-p3);
+  --stroke-success: rgb(var(--stroke-success-rgb));
+
+  --stroke-success-secondary-rgb: var(--theme-success-600-rgb);
+  --stroke-success-secondary-p3: var(--theme-success-600-p3);
+  --stroke-success-secondary: rgb(var(--stroke-success-secondary-rgb));
+
+  --stroke-success-tertiary-rgb: var(--theme-success-400-rgb);
+  --stroke-success-tertiary-p3: var(--theme-success-400-p3);
+  --stroke-success-tertiary: rgb(var(--stroke-success-tertiary-rgb));
+
+  --stroke-success-quaternary-rgb: var(--theme-success-300-rgb);
+  --stroke-success-quaternary-p3: var(--theme-success-300-p3);
+  --stroke-success-quaternary: rgb(var(--stroke-success-quaternary-rgb));
+
+  --stroke-error-rgb: var(--theme-error-800-rgb);
+  --stroke-error-p3: var(--theme-error-800-p3);
+  --stroke-error: rgb(var(--stroke-error-rgb));
+
+  --stroke-error-secondary-rgb: var(--theme-error-600-rgb);
+  --stroke-error-secondary-p3: var(--theme-error-600-p3);
+  --stroke-error-secondary: rgb(var(--stroke-error-secondary-rgb));
+
+  --stroke-error-tertiary-rgb: var(--theme-error-400-rgb);
+  --stroke-error-tertiary-p3: var(--theme-error-400-p3);
+  --stroke-error-tertiary: rgb(var(--stroke-error-tertiary-rgb));
+
+  --stroke-error-quaternary-rgb: var(--theme-error-300-rgb);
+  --stroke-error-quaternary-p3: var(--theme-error-300-p3);
+  --stroke-error-quaternary: rgb(var(--stroke-error-quaternary-rgb));
+
+  --stroke-notice-rgb: var(--theme-notice-800-rgb);
+  --stroke-notice-p3: var(--theme-notice-800-p3);
+  --stroke-notice: rgb(var(--stroke-notice-rgb));
+
+  --stroke-notice-secondary-rgb: var(--theme-notice-600-rgb);
+  --stroke-notice-secondary-p3: var(--theme-notice-600-p3);
+  --stroke-notice-secondary: rgb(var(--stroke-notice-secondary-rgb));
+
+  --stroke-notice-tertiary-rgb: var(--theme-notice-400-rgb);
+  --stroke-notice-tertiary-p3: var(--theme-notice-400-p3);
+  --stroke-notice-tertiary: rgb(var(--stroke-notice-tertiary-rgb));
+
+  --stroke-notice-quaternary-rgb: var(--theme-notice-300-rgb);
+  --stroke-notice-quaternary-p3: var(--theme-notice-300-p3);
+  --stroke-notice-quaternary: rgb(var(--stroke-notice-quaternary-rgb));
+
+  --stroke-info-rgb: var(--theme-info-800-rgb);
+  --stroke-info-p3: var(--theme-info-800-p3);
+  --stroke-info: rgb(var(--stroke-info-rgb));
+
+  --stroke-info-secondary-rgb: var(--theme-info-600-rgb);
+  --stroke-info-secondary-p3: var(--theme-info-600-p3);
+  --stroke-info-secondary: rgb(var(--stroke-info-secondary-rgb));
+
+  --stroke-info-tertiary-rgb: var(--theme-info-400-rgb);
+  --stroke-info-tertiary-p3: var(--theme-info-400-p3);
+  --stroke-info-tertiary: rgb(var(--stroke-info-tertiary-rgb));
+
+  --stroke-info-quaternary-rgb: var(--theme-info-300-rgb);
+  --stroke-info-quaternary-p3: var(--theme-info-300-p3);
+  --stroke-info-quaternary: rgb(var(--stroke-info-quaternary-rgb));
+
+  --chart-fill-area-primary: rgba(var(--theme-accent-700-rgb), 0.7019607843137254);
+  --chart-fill-area-primary-p3: color(display-p3 0.1255 0.6392 0.4235 / 0.7019607843137254);
+  --chart-fill-area-secondary: rgba(var(--theme-accent-600-rgb), 0.7019607843137254);
+  --chart-fill-area-secondary-p3: color(
+    display-p3 0.1373 0.5412 0.3686 / 0.7019607843137254
+  );
+  --chart-fill-area-tertiary: rgba(var(--theme-accent-500-rgb), 0.7019607843137254);
+  --chart-fill-area-tertiary-p3: color(display-p3 0.1373 0.4157 0.298 / 0.7019607843137254);
+  --chart-fill-area-quaternary: rgba(var(--theme-accent-400-rgb), 0.2);
+  --chart-fill-area-quaternary-p3: color(display-p3 0.1255 0.302 0.2314 / 0.2);
+
+  --chart-fill-item-primary-rgb: var(--theme-accent-700-rgb);
+  --chart-fill-item-primary-p3: var(--theme-accent-700-p3);
+  --chart-fill-item-primary: rgb(var(--chart-fill-item-primary-rgb));
+
+  --chart-fill-item-secondary-rgb: var(--theme-accent-600-rgb);
+  --chart-fill-item-secondary-p3: var(--theme-accent-600-p3);
+  --chart-fill-item-secondary: rgb(var(--chart-fill-item-secondary-rgb));
+
+  --chart-fill-item-tertiary-rgb: var(--theme-accent-500-rgb);
+  --chart-fill-item-tertiary-p3: var(--theme-accent-500-p3);
+  --chart-fill-item-tertiary: rgb(var(--chart-fill-item-tertiary-rgb));
+
+  --chart-fill-item-quaternary-rgb: var(--theme-accent-400-rgb);
+  --chart-fill-item-quaternary-p3: var(--theme-accent-400-p3);
+  --chart-fill-item-quaternary: rgb(var(--chart-fill-item-quaternary-rgb));
+
+  --chart-fill-error-primary-rgb: var(--theme-destructive-700-rgb);
+  --chart-fill-error-primary-p3: var(--theme-destructive-700-p3);
+  --chart-fill-error-primary: rgb(var(--chart-fill-error-primary-rgb));
+
+  --chart-fill-error-secondary-rgb: var(--theme-destructive-600-rgb);
+  --chart-fill-error-secondary-p3: var(--theme-destructive-600-p3);
+  --chart-fill-error-secondary: rgb(var(--chart-fill-error-secondary-rgb));
+
+  --chart-fill-error-tertiary-rgb: var(--theme-destructive-500-rgb);
+  --chart-fill-error-tertiary-p3: var(--theme-destructive-500-p3);
+  --chart-fill-error-tertiary: rgb(var(--chart-fill-error-tertiary-rgb));
+
+  --chart-fill-error-quaternary-rgb: var(--theme-destructive-400-rgb);
+  --chart-fill-error-quaternary-p3: var(--theme-destructive-400-p3);
+  --chart-fill-error-quaternary: rgb(var(--chart-fill-error-quaternary-rgb));
+
+  --chart-fill-inactive-rgb: var(--base-neutral-50-rgb);
+  --chart-fill-inactive-p3: var(--base-neutral-50-p3);
+  --chart-fill-inactive: rgb(var(--chart-fill-inactive-rgb));
+
+  --chart-stroke-line-rgb: var(--theme-accent-700-rgb);
+  --chart-stroke-line-p3: var(--theme-accent-700-p3);
+  --chart-stroke-line: rgb(var(--chart-stroke-line-rgb));
+
+  --chart-stroke-line-secondary-rgb: var(--base-yellow-600-rgb);
+  --chart-stroke-line-secondary-p3: var(--base-yellow-600-p3);
+  --chart-stroke-line-secondary: rgb(var(--chart-stroke-line-secondary-rgb));
+
+  --chart-stroke-line-tertiary-rgb: var(--base-red-600-rgb);
+  --chart-stroke-line-tertiary-p3: var(--base-red-600-p3);
+  --chart-stroke-line-tertiary: rgb(var(--chart-stroke-line-tertiary-rgb));
+
+  --chart-stroke-line-quaternary-rgb: var(--base-blue-600-rgb);
+  --chart-stroke-line-quaternary-p3: var(--base-blue-600-p3);
+  --chart-stroke-line-quaternary: rgb(var(--chart-stroke-line-quaternary-rgb));
+
+  --chart-stroke-y-axis: rgba(var(--stroke-default-rgb), 0.4);
+  --chart-stroke-y-axis-p3: color(display-p3 0.1765 0.2 0.2078 / 0.4);
+  --chart-stroke-item: rgba(var(--theme-accent-700-rgb), 0.4);
+  --chart-stroke-item-p3: color(display-p3 0.1255 0.6392 0.4235 / 0.4);
+
+  --chart-stroke-item-inactive-rgb: var(--base-neutral-200-rgb);
+  --chart-stroke-item-inactive-p3: var(--base-neutral-200-p3);
+  --chart-stroke-item-inactive: rgb(var(--chart-stroke-item-inactive-rgb));
+
+  --chart-stroke-error: rgba(var(--theme-destructive-700-rgb), 0.4);
+  --chart-stroke-error-p3: color(display-p3 0.8549 0.3804 0.4667 / 0.4);
+
+  --theme-accent-100-rgb: var(--base-green-100-rgb);
+  --theme-accent-100-p3: var(--base-green-100-p3);
+  --theme-accent-100: rgb(var(--theme-accent-100-rgb));
+
+  --theme-accent-200-rgb: var(--base-green-200-rgb);
+  --theme-accent-200-p3: var(--base-green-200-p3);
+  --theme-accent-200: rgb(var(--theme-accent-200-rgb));
+
+  --theme-accent-300-rgb: var(--base-green-300-rgb);
+  --theme-accent-300-p3: var(--base-green-300-p3);
+  --theme-accent-300: rgb(var(--theme-accent-300-rgb));
+
+  --theme-accent-400-rgb: var(--base-green-400-rgb);
+  --theme-accent-400-p3: var(--base-green-400-p3);
+  --theme-accent-400: rgb(var(--theme-accent-400-rgb));
+
+  --theme-accent-500-rgb: var(--base-green-500-rgb);
+  --theme-accent-500-p3: var(--base-green-500-p3);
+  --theme-accent-500: rgb(var(--theme-accent-500-rgb));
+
+  --theme-accent-600-rgb: var(--base-green-600-rgb);
+  --theme-accent-600-p3: var(--base-green-600-p3);
+  --theme-accent-600: rgb(var(--theme-accent-600-rgb));
+
+  --theme-accent-700-rgb: var(--base-green-700-rgb);
+  --theme-accent-700-p3: var(--base-green-700-p3);
+  --theme-accent-700: rgb(var(--theme-accent-700-rgb));
+
+  --theme-accent-800-rgb: var(--base-green-800-rgb);
+  --theme-accent-800-p3: var(--base-green-800-p3);
+  --theme-accent-800: rgb(var(--theme-accent-800-rgb));
+
+  --theme-destructive-100-rgb: var(--base-red-100-rgb);
+  --theme-destructive-100-p3: var(--base-red-100-p3);
+  --theme-destructive-100: rgb(var(--theme-destructive-100-rgb));
+
+  --theme-destructive-200-rgb: var(--base-red-200-rgb);
+  --theme-destructive-200-p3: var(--base-red-200-p3);
+  --theme-destructive-200: rgb(var(--theme-destructive-200-rgb));
+
+  --theme-destructive-300-rgb: var(--base-red-300-rgb);
+  --theme-destructive-300-p3: var(--base-red-300-p3);
+  --theme-destructive-300: rgb(var(--theme-destructive-300-rgb));
+
+  --theme-destructive-400-rgb: var(--base-red-400-rgb);
+  --theme-destructive-400-p3: var(--base-red-400-p3);
+  --theme-destructive-400: rgb(var(--theme-destructive-400-rgb));
+
+  --theme-destructive-500-rgb: var(--base-red-500-rgb);
+  --theme-destructive-500-p3: var(--base-red-500-p3);
+  --theme-destructive-500: rgb(var(--theme-destructive-500-rgb));
+
+  --theme-destructive-600-rgb: var(--base-red-600-rgb);
+  --theme-destructive-600-p3: var(--base-red-600-p3);
+  --theme-destructive-600: rgb(var(--theme-destructive-600-rgb));
+
+  --theme-destructive-700-rgb: var(--base-red-700-rgb);
+  --theme-destructive-700-p3: var(--base-red-700-p3);
+  --theme-destructive-700: rgb(var(--theme-destructive-700-rgb));
+
+  --theme-destructive-800-rgb: var(--base-red-800-rgb);
+  --theme-destructive-800-p3: var(--base-red-800-p3);
+  --theme-destructive-800: rgb(var(--theme-destructive-800-rgb));
+
+  --theme-success-100-rgb: var(--base-green-100-rgb);
+  --theme-success-100-p3: var(--base-green-100-p3);
+  --theme-success-100: rgb(var(--theme-success-100-rgb));
+
+  --theme-success-200-rgb: var(--base-green-200-rgb);
+  --theme-success-200-p3: var(--base-green-200-p3);
+  --theme-success-200: rgb(var(--theme-success-200-rgb));
+
+  --theme-success-300-rgb: var(--base-green-300-rgb);
+  --theme-success-300-p3: var(--base-green-300-p3);
+  --theme-success-300: rgb(var(--theme-success-300-rgb));
+
+  --theme-success-400-rgb: var(--base-green-400-rgb);
+  --theme-success-400-p3: var(--base-green-400-p3);
+  --theme-success-400: rgb(var(--theme-success-400-rgb));
+
+  --theme-success-500-rgb: var(--base-green-500-rgb);
+  --theme-success-500-p3: var(--base-green-500-p3);
+  --theme-success-500: rgb(var(--theme-success-500-rgb));
+
+  --theme-success-600-rgb: var(--base-green-600-rgb);
+  --theme-success-600-p3: var(--base-green-600-p3);
+  --theme-success-600: rgb(var(--theme-success-600-rgb));
+
+  --theme-success-700-rgb: var(--base-green-700-rgb);
+  --theme-success-700-p3: var(--base-green-700-p3);
+  --theme-success-700: rgb(var(--theme-success-700-rgb));
+
+  --theme-success-800-rgb: var(--base-green-800-rgb);
+  --theme-success-800-p3: var(--base-green-800-p3);
+  --theme-success-800: rgb(var(--theme-success-800-rgb));
+
+  --theme-error-100-rgb: var(--base-red-100-rgb);
+  --theme-error-100-p3: var(--base-red-100-p3);
+  --theme-error-100: rgb(var(--theme-error-100-rgb));
+
+  --theme-error-200-rgb: var(--base-red-200-rgb);
+  --theme-error-200-p3: var(--base-red-200-p3);
+  --theme-error-200: rgb(var(--theme-error-200-rgb));
+
+  --theme-error-300-rgb: var(--base-red-300-rgb);
+  --theme-error-300-p3: var(--base-red-300-p3);
+  --theme-error-300: rgb(var(--theme-error-300-rgb));
+
+  --theme-error-400-rgb: var(--base-red-400-rgb);
+  --theme-error-400-p3: var(--base-red-400-p3);
+  --theme-error-400: rgb(var(--theme-error-400-rgb));
+
+  --theme-error-500-rgb: var(--base-red-500-rgb);
+  --theme-error-500-p3: var(--base-red-500-p3);
+  --theme-error-500: rgb(var(--theme-error-500-rgb));
+
+  --theme-error-600-rgb: var(--base-red-600-rgb);
+  --theme-error-600-p3: var(--base-red-600-p3);
+  --theme-error-600: rgb(var(--theme-error-600-rgb));
+
+  --theme-error-700-rgb: var(--base-red-700-rgb);
+  --theme-error-700-p3: var(--base-red-700-p3);
+  --theme-error-700: rgb(var(--theme-error-700-rgb));
+
+  --theme-error-800-rgb: var(--base-red-800-rgb);
+  --theme-error-800-p3: var(--base-red-800-p3);
+  --theme-error-800: rgb(var(--theme-error-800-rgb));
+
+  --theme-notice-100-rgb: var(--base-yellow-100-rgb);
+  --theme-notice-100-p3: var(--base-yellow-100-p3);
+  --theme-notice-100: rgb(var(--theme-notice-100-rgb));
+
+  --theme-notice-200-rgb: var(--base-yellow-200-rgb);
+  --theme-notice-200-p3: var(--base-yellow-200-p3);
+  --theme-notice-200: rgb(var(--theme-notice-200-rgb));
+
+  --theme-notice-300-rgb: var(--base-yellow-300-rgb);
+  --theme-notice-300-p3: var(--base-yellow-300-p3);
+  --theme-notice-300: rgb(var(--theme-notice-300-rgb));
+
+  --theme-notice-400-rgb: var(--base-yellow-400-rgb);
+  --theme-notice-400-p3: var(--base-yellow-400-p3);
+  --theme-notice-400: rgb(var(--theme-notice-400-rgb));
+
+  --theme-notice-500-rgb: var(--base-yellow-500-rgb);
+  --theme-notice-500-p3: var(--base-yellow-500-p3);
+  --theme-notice-500: rgb(var(--theme-notice-500-rgb));
+
+  --theme-notice-600-rgb: var(--base-yellow-600-rgb);
+  --theme-notice-600-p3: var(--base-yellow-600-p3);
+  --theme-notice-600: rgb(var(--theme-notice-600-rgb));
+
+  --theme-notice-700-rgb: var(--base-yellow-700-rgb);
+  --theme-notice-700-p3: var(--base-yellow-700-p3);
+  --theme-notice-700: rgb(var(--theme-notice-700-rgb));
+
+  --theme-notice-800-rgb: var(--base-yellow-800-rgb);
+  --theme-notice-800-p3: var(--base-yellow-800-p3);
+  --theme-notice-800: rgb(var(--theme-notice-800-rgb));
+
+  --theme-info-100-rgb: var(--base-blue-100-rgb);
+  --theme-info-100-p3: var(--base-blue-100-p3);
+  --theme-info-100: rgb(var(--theme-info-100-rgb));
+
+  --theme-info-200-rgb: var(--base-blue-200-rgb);
+  --theme-info-200-p3: var(--base-blue-200-p3);
+  --theme-info-200: rgb(var(--theme-info-200-rgb));
+
+  --theme-info-300-rgb: var(--base-blue-300-rgb);
+  --theme-info-300-p3: var(--base-blue-300-p3);
+  --theme-info-300: rgb(var(--theme-info-300-rgb));
+
+  --theme-info-400-rgb: var(--base-blue-400-rgb);
+  --theme-info-400-p3: var(--base-blue-400-p3);
+  --theme-info-400: rgb(var(--theme-info-400-rgb));
+
+  --theme-info-500-rgb: var(--base-blue-500-rgb);
+  --theme-info-500-p3: var(--base-blue-500-p3);
+  --theme-info-500: rgb(var(--theme-info-500-rgb));
+
+  --theme-info-600-rgb: var(--base-blue-600-rgb);
+  --theme-info-600-p3: var(--base-blue-600-p3);
+  --theme-info-600: rgb(var(--theme-info-600-rgb));
+
+  --theme-info-700-rgb: var(--base-blue-700-rgb);
+  --theme-info-700-p3: var(--base-blue-700-p3);
+  --theme-info-700: rgb(var(--theme-info-700-rgb));
+
+  --theme-info-800-rgb: var(--base-blue-800-rgb);
+  --theme-info-800-p3: var(--base-blue-800-p3);
+  --theme-info-800: rgb(var(--theme-info-800-rgb));
+}
diff --git a/styles/dist/green.md b/styles/dist/green.md
new file mode 100644
index 00000000..583bc713
--- /dev/null
+++ b/styles/dist/green.md
@@ -0,0 +1,616 @@
+# `green` Theme
+
+This document shows the relationship of colors within the `green` theme.
+
+## base-green-100
+
+```mermaid
+graph RL
+  base-green-100 --> #131A1C:::base-green-100
+  theme-accent-100 --> base-green-100
+  theme-success-100 --> base-green-100
+
+	classDef base-green-100 stroke-width:5,stroke:#131A1C
+```
+
+## base-green-200
+
+```mermaid
+graph RL
+  base-green-200 --> #162322:::base-green-200
+  surface-accent-secondary --> theme-accent-200
+  surface-success-secondary --> theme-success-200
+  theme-accent-200 --> base-green-200
+  theme-success-200 --> base-green-200
+
+	classDef base-green-200 stroke-width:5,stroke:#162322
+```
+
+## base-green-300
+
+```mermaid
+graph RL
+  base-green-300 --> #1C372E:::base-green-300
+  surface-accent-secondary-hover --> theme-accent-300
+  stroke-accent-quaternary --> theme-accent-300
+  stroke-success-quaternary --> theme-success-300
+  theme-accent-300 --> base-green-300
+  theme-success-300 --> base-green-300
+
+	classDef base-green-300 stroke-width:5,stroke:#1C372E
+```
+
+## base-green-400
+
+```mermaid
+graph RL
+  base-green-400 --> #204D3B:::base-green-400
+  stroke-accent-tertiary --> theme-accent-400
+  stroke-success-tertiary --> theme-success-400
+  chart-fill-item-quaternary --> theme-accent-400
+  theme-accent-400 --> base-green-400
+  theme-success-400 --> base-green-400
+
+	classDef base-green-400 stroke-width:5,stroke:#204D3B
+```
+
+## base-green-500
+
+```mermaid
+graph RL
+  base-green-500 --> #236A4C:::base-green-500
+  content-accent-disabled --> theme-accent-500
+  content-success-disabled --> theme-success-500
+  chart-fill-item-tertiary --> theme-accent-500
+  theme-accent-500 --> base-green-500
+  theme-success-500 --> base-green-500
+
+	classDef base-green-500 stroke-width:5,stroke:#236A4C
+```
+
+## base-green-600
+
+```mermaid
+graph RL
+  base-green-600 --> #238A5E:::base-green-600
+  content-accent-tertiary --> theme-accent-600
+  content-success-tertiary --> theme-success-600
+  stroke-accent-secondary --> theme-accent-600
+  stroke-success-secondary --> theme-success-600
+  chart-fill-item-secondary --> theme-accent-600
+  theme-accent-600 --> base-green-600
+  theme-success-600 --> base-green-600
+
+	classDef base-green-600 stroke-width:5,stroke:#238A5E
+```
+
+## base-green-700
+
+```mermaid
+graph RL
+  base-green-700 --> #20A36C:::base-green-700
+  surface-accent-hover --> theme-accent-700
+  content-accent-secondary --> theme-accent-700
+  content-success-secondary --> theme-success-700
+  chart-fill-item-primary --> theme-accent-700
+  chart-stroke-line --> theme-accent-700
+  theme-accent-700 --> base-green-700
+  theme-success-700 --> base-green-700
+
+	classDef base-green-700 stroke-width:5,stroke:#20A36C
+```
+
+## base-green-800
+
+```mermaid
+graph RL
+  base-green-800 --> #48d597:::base-green-800
+  surface-accent --> theme-accent-800
+  surface-success --> theme-success-800
+  content-accent --> theme-accent-800
+  content-success --> theme-success-800
+  stroke-accent --> theme-accent-800
+  stroke-success --> theme-success-800
+  theme-accent-800 --> base-green-800
+  theme-success-800 --> base-green-800
+
+	classDef base-green-800 stroke-width:5,stroke:#48d597
+```
+
+## base-yellow-100
+
+```mermaid
+graph RL
+  base-yellow-100 --> #20190F:::base-yellow-100
+  theme-notice-100 --> base-yellow-100
+
+	classDef base-yellow-100 stroke-width:5,stroke:#20190F
+```
+
+## base-yellow-200
+
+```mermaid
+graph RL
+  base-yellow-200 --> #292013:::base-yellow-200
+  surface-notice-secondary --> theme-notice-200
+  theme-notice-200 --> base-yellow-200
+
+	classDef base-yellow-200 stroke-width:5,stroke:#292013
+```
+
+## base-yellow-300
+
+```mermaid
+graph RL
+  base-yellow-300 --> #3D3019:::base-yellow-300
+  surface-notice-secondary-hover --> theme-notice-300
+  stroke-notice-quaternary --> theme-notice-300
+  theme-notice-300 --> base-yellow-300
+
+	classDef base-yellow-300 stroke-width:5,stroke:#3D3019
+```
+
+## base-yellow-400
+
+```mermaid
+graph RL
+  base-yellow-400 --> #55421F:::base-yellow-400
+  stroke-notice-tertiary --> theme-notice-400
+  theme-notice-400 --> base-yellow-400
+
+	classDef base-yellow-400 stroke-width:5,stroke:#55421F
+```
+
+## base-yellow-500
+
+```mermaid
+graph RL
+  base-yellow-500 --> #765A27:::base-yellow-500
+  content-notice-disabled --> theme-notice-500
+  theme-notice-500 --> base-yellow-500
+
+	classDef base-yellow-500 stroke-width:5,stroke:#765A27
+```
+
+## base-yellow-600
+
+```mermaid
+graph RL
+  base-yellow-600 --> #997430:::base-yellow-600
+  content-notice-tertiary --> theme-notice-600
+  stroke-notice-secondary --> theme-notice-600
+  chart-stroke-line-secondary --> base-yellow-600
+  theme-notice-600 --> base-yellow-600
+
+	classDef base-yellow-600 stroke-width:5,stroke:#997430
+```
+
+## base-yellow-700
+
+```mermaid
+graph RL
+  base-yellow-700 --> #CA993B:::base-yellow-700
+  surface-notice-hover --> theme-notice-700
+  content-notice-secondary --> theme-notice-700
+  theme-notice-700 --> base-yellow-700
+
+	classDef base-yellow-700 stroke-width:5,stroke:#CA993B
+```
+
+## base-yellow-800
+
+```mermaid
+graph RL
+  base-yellow-800 --> #F5B944:::base-yellow-800
+  surface-notice --> theme-notice-800
+  content-notice --> theme-notice-800
+  stroke-notice --> theme-notice-800
+  theme-notice-800 --> base-yellow-800
+
+	classDef base-yellow-800 stroke-width:5,stroke:#F5B944
+```
+
+## base-red-100
+
+```mermaid
+graph RL
+  base-red-100 --> #1E1314:::base-red-100
+  theme-destructive-100 --> base-red-100
+  theme-error-100 --> base-red-100
+
+	classDef base-red-100 stroke-width:5,stroke:#1E1314
+```
+
+## base-red-200
+
+```mermaid
+graph RL
+  base-red-200 --> #231517:::base-red-200
+  surface-destructive-secondary --> theme-destructive-200
+  surface-error-secondary --> theme-error-200
+  theme-destructive-200 --> base-red-200
+  theme-error-200 --> base-red-200
+
+	classDef base-red-200 stroke-width:5,stroke:#231517
+```
+
+## base-red-300
+
+```mermaid
+graph RL
+  base-red-300 --> #301B1D:::base-red-300
+  surface-destructive-secondary-hover --> theme-destructive-300
+  stroke-destructive-quaternary --> theme-destructive-300
+  stroke-error-quaternary --> theme-error-300
+  theme-destructive-300 --> base-red-300
+  theme-error-300 --> base-red-300
+
+	classDef base-red-300 stroke-width:5,stroke:#301B1D
+```
+
+## base-red-400
+
+```mermaid
+graph RL
+  base-red-400 --> #6A343C:::base-red-400
+  stroke-destructive-tertiary --> theme-destructive-400
+  stroke-error-tertiary --> theme-error-400
+  chart-fill-error-quaternary --> theme-destructive-400
+  theme-destructive-400 --> base-red-400
+  theme-error-400 --> base-red-400
+
+	classDef base-red-400 stroke-width:5,stroke:#6A343C
+```
+
+## base-red-500
+
+```mermaid
+graph RL
+  base-red-500 --> #954553:::base-red-500
+  content-destructive-disabled --> theme-destructive-500
+  content-error-disabled --> theme-error-500
+  chart-fill-error-tertiary --> theme-destructive-500
+  theme-destructive-500 --> base-red-500
+  theme-error-500 --> base-red-500
+
+	classDef base-red-500 stroke-width:5,stroke:#954553
+```
+
+## base-red-600
+
+```mermaid
+graph RL
+  base-red-600 --> #C3576A:::base-red-600
+  content-destructive-tertiary --> theme-destructive-600
+  content-error-tertiary --> theme-error-600
+  stroke-destructive-secondary --> theme-destructive-600
+  stroke-error-secondary --> theme-error-600
+  chart-fill-error-secondary --> theme-destructive-600
+  chart-stroke-line-tertiary --> base-red-600
+  theme-destructive-600 --> base-red-600
+  theme-error-600 --> base-red-600
+
+	classDef base-red-600 stroke-width:5,stroke:#C3576A
+```
+
+## base-red-700
+
+```mermaid
+graph RL
+  base-red-700 --> #DA6177:::base-red-700
+  surface-destructive-hover --> theme-destructive-700
+  content-destructive-secondary --> theme-destructive-700
+  content-error-secondary --> theme-error-700
+  chart-fill-error-primary --> theme-destructive-700
+  theme-destructive-700 --> base-red-700
+  theme-error-700 --> base-red-700
+
+	classDef base-red-700 stroke-width:5,stroke:#DA6177
+```
+
+## base-red-800
+
+```mermaid
+graph RL
+  base-red-800 --> #FB6E88:::base-red-800
+  surface-destructive --> theme-destructive-800
+  surface-error --> theme-error-800
+  content-destructive --> theme-destructive-800
+  content-error --> theme-error-800
+  stroke-destructive --> theme-destructive-800
+  stroke-error --> theme-error-800
+  theme-destructive-800 --> base-red-800
+  theme-error-800 --> base-red-800
+
+	classDef base-red-800 stroke-width:5,stroke:#FB6E88
+```
+
+## base-purple-100
+
+```mermaid
+graph RL
+  base-purple-100 --> #1E1822:::base-purple-100
+
+	classDef base-purple-100 stroke-width:5,stroke:#1E1822
+```
+
+## base-purple-200
+
+```mermaid
+graph RL
+  base-purple-200 --> #251F2B:::base-purple-200
+
+	classDef base-purple-200 stroke-width:5,stroke:#251F2B
+```
+
+## base-purple-300
+
+```mermaid
+graph RL
+  base-purple-300 --> #382D43:::base-purple-300
+
+	classDef base-purple-300 stroke-width:5,stroke:#382D43
+```
+
+## base-purple-400
+
+```mermaid
+graph RL
+  base-purple-400 --> #4D3E5E:::base-purple-400
+
+	classDef base-purple-400 stroke-width:5,stroke:#4D3E5E
+```
+
+## base-purple-500
+
+```mermaid
+graph RL
+  base-purple-500 --> #6C5584:::base-purple-500
+
+	classDef base-purple-500 stroke-width:5,stroke:#6C5584
+```
+
+## base-purple-600
+
+```mermaid
+graph RL
+  base-purple-600 --> #8B6DAC:::base-purple-600
+
+	classDef base-purple-600 stroke-width:5,stroke:#8B6DAC
+```
+
+## base-purple-700
+
+```mermaid
+graph RL
+  base-purple-700 --> #A380CB:::base-purple-700
+
+	classDef base-purple-700 stroke-width:5,stroke:#A380CB
+```
+
+## base-purple-800
+
+```mermaid
+graph RL
+  base-purple-800 --> #BE95EB:::base-purple-800
+
+	classDef base-purple-800 stroke-width:5,stroke:#BE95EB
+```
+
+## base-blue-100
+
+```mermaid
+graph RL
+  base-blue-100 --> #171821:::base-blue-100
+  theme-info-100 --> base-blue-100
+
+	classDef base-blue-100 stroke-width:5,stroke:#171821
+```
+
+## base-blue-200
+
+```mermaid
+graph RL
+  base-blue-200 --> #1E202D:::base-blue-200
+  surface-info-secondary --> theme-info-200
+  theme-info-200 --> base-blue-200
+
+	classDef base-blue-200 stroke-width:5,stroke:#1E202D
+```
+
+## base-blue-300
+
+```mermaid
+graph RL
+  base-blue-300 --> #2D3048:::base-blue-300
+  surface-info-secondary-hover --> theme-info-300
+  stroke-info-quaternary --> theme-info-300
+  theme-info-300 --> base-blue-300
+
+	classDef base-blue-300 stroke-width:5,stroke:#2D3048
+```
+
+## base-blue-400
+
+```mermaid
+graph RL
+  base-blue-400 --> #3C4366:::base-blue-400
+  stroke-info-tertiary --> theme-info-400
+  theme-info-400 --> base-blue-400
+
+	classDef base-blue-400 stroke-width:5,stroke:#3C4366
+```
+
+## base-blue-500
+
+```mermaid
+graph RL
+  base-blue-500 --> #515B8F:::base-blue-500
+  content-info-disabled --> theme-info-500
+  theme-info-500 --> base-blue-500
+
+	classDef base-blue-500 stroke-width:5,stroke:#515B8F
+```
+
+## base-blue-600
+
+```mermaid
+graph RL
+  base-blue-600 --> #6776BB:::base-blue-600
+  content-info-tertiary --> theme-info-600
+  stroke-info-secondary --> theme-info-600
+  chart-stroke-line-quaternary --> base-blue-600
+  theme-info-600 --> base-blue-600
+
+	classDef base-blue-600 stroke-width:5,stroke:#6776BB
+```
+
+## base-blue-700
+
+```mermaid
+graph RL
+  base-blue-700 --> #788ADD:::base-blue-700
+  surface-info-hover --> theme-info-700
+  content-info-secondary --> theme-info-700
+  theme-info-700 --> base-blue-700
+
+	classDef base-blue-700 stroke-width:5,stroke:#788ADD
+```
+
+## base-blue-800
+
+```mermaid
+graph RL
+  base-blue-800 --> #8BA1FF:::base-blue-800
+  surface-info --> theme-info-800
+  content-info --> theme-info-800
+  stroke-info --> theme-info-800
+  theme-info-800 --> base-blue-800
+
+	classDef base-blue-800 stroke-width:5,stroke:#8BA1FF
+```
+
+## base-neutral-0
+
+```mermaid
+graph RL
+  base-neutral-0 --> #080F11:::base-neutral-0
+  surface-default --> base-neutral-0
+  content-inverse --> surface-default
+  stroke-surface --> surface-default
+
+	classDef base-neutral-0 stroke-width:5,stroke:#080F11
+```
+
+## base-neutral-50
+
+```mermaid
+graph RL
+  base-neutral-50 --> #101618:::base-neutral-50
+  surface-raise --> base-neutral-50
+  content-inverse-raise --> surface-raise
+  chart-fill-inactive --> base-neutral-50
+
+	classDef base-neutral-50 stroke-width:5,stroke:#101618
+```
+
+## base-neutral-100
+
+```mermaid
+graph RL
+  base-neutral-100 --> #141B1D:::base-neutral-100
+  surface-secondary --> base-neutral-100
+  surface-disabled --> base-neutral-100
+  content-inverse-secondary --> surface-secondary
+  stroke-tertiary --> base-neutral-100
+
+	classDef base-neutral-100 stroke-width:5,stroke:#141B1D
+```
+
+## base-neutral-200
+
+```mermaid
+graph RL
+  base-neutral-200 --> #1C2225:::base-neutral-200
+  surface-hover --> base-neutral-200
+  surface-tertiary --> base-neutral-200
+  stroke-secondary --> base-neutral-200
+  chart-stroke-item-inactive --> base-neutral-200
+
+	classDef base-neutral-200 stroke-width:5,stroke:#1C2225
+```
+
+## base-neutral-300
+
+```mermaid
+graph RL
+  base-neutral-300 --> #2D3335:::base-neutral-300
+  stroke-default --> base-neutral-300
+
+	classDef base-neutral-300 stroke-width:5,stroke:#2D3335
+```
+
+## base-neutral-400
+
+```mermaid
+graph RL
+  base-neutral-400 --> #404647:::base-neutral-400
+  stroke-hover --> base-neutral-400
+
+	classDef base-neutral-400 stroke-width:5,stroke:#404647
+```
+
+## base-neutral-500
+
+```mermaid
+graph RL
+  base-neutral-500 --> #5B5F61:::base-neutral-500
+  content-quinary --> base-neutral-500
+  content-disabled --> base-neutral-500
+  stroke-raise --> base-neutral-500
+
+	classDef base-neutral-500 stroke-width:5,stroke:#5B5F61
+```
+
+## base-neutral-600
+
+```mermaid
+graph RL
+  base-neutral-600 --> #7e8385:::base-neutral-600
+  content-quaternary --> base-neutral-600
+
+	classDef base-neutral-600 stroke-width:5,stroke:#7e8385
+```
+
+## base-neutral-700
+
+```mermaid
+graph RL
+  base-neutral-700 --> #A1A4A5:::base-neutral-700
+  surface-inverse-tertiary --> content-tertiary
+  content-tertiary --> base-neutral-700
+
+	classDef base-neutral-700 stroke-width:5,stroke:#A1A4A5
+```
+
+## base-neutral-800
+
+```mermaid
+graph RL
+  base-neutral-800 --> #B8BBBC:::base-neutral-800
+  surface-inverse-secondary --> content-secondary
+  content-secondary --> base-neutral-800
+
+	classDef base-neutral-800 stroke-width:5,stroke:#B8BBBC
+```
+
+## base-neutral-900
+
+```mermaid
+graph RL
+  base-neutral-900 --> #E7E7E8:::base-neutral-900
+  surface-inverse --> content-default
+  content-default --> base-neutral-900
+
+	classDef base-neutral-900 stroke-width:5,stroke:#E7E7E8
+```
diff --git a/styles/src/tokens.json b/styles/src/tokens.json
index bec04a10..052d9170 100644
--- a/styles/src/tokens.json
+++ b/styles/src/tokens.json
@@ -846,6 +846,44 @@
       }
     }
   },
+  "green-accent": {
+    "theme": {
+      "accent": {
+        "100": {
+          "value": "{base.green.100}",
+          "type": "color"
+        },
+        "200": {
+          "value": "{base.green.200}",
+          "type": "color"
+        },
+        "300": {
+          "value": "{base.green.300}",
+          "type": "color"
+        },
+        "400": {
+          "value": "{base.green.400}",
+          "type": "color"
+        },
+        "500": {
+          "value": "{base.green.500}",
+          "type": "color"
+        },
+        "600": {
+          "value": "{base.green.600}",
+          "type": "color"
+        },
+        "700": {
+          "value": "{base.green.700}",
+          "type": "color"
+        },
+        "800": {
+          "value": "{base.green.800}",
+          "type": "color"
+        }
+      }
+    }
+  },
   "purple-accent": {
     "theme": {
       "accent": {
@@ -1494,7 +1532,8 @@
         "colors": "enabled",
         "core": "enabled",
         "purple-accent": "enabled",
-        "main": "enabled"
+        "main": "enabled",
+        "green-accent": "disabled"
       },
       "$figmaStyleReferences": {
         "base.green.100": "S:0489faab878fbca66f9616cea11b9e725e5fe092,",
@@ -1694,7 +1733,8 @@
         "colors": "enabled",
         "core": "enabled",
         "blue-accent": "enabled",
-        "main": "enabled"
+        "main": "enabled",
+        "green-accent": "disabled"
       },
       "$figmaStyleReferences": {
         "base.green.100": "S:ccdfd9e9721254e92c0449a62cfa760215020ae3,",
@@ -1893,7 +1933,8 @@
         "global": "enabled",
         "colors": "enabled",
         "core": "enabled",
-        "main": "enabled"
+        "main": "enabled",
+        "green-accent": "disabled"
       },
       "$figmaStyleReferences": {
         "base.green.900": "S:49ddc0a374e58df41fbe46dd23dbda2023675f7b,",
@@ -2163,7 +2204,8 @@
         "colors": "enabled",
         "core": "enabled",
         "main": "enabled",
-        "yellow-accent": "enabled"
+        "yellow-accent": "enabled",
+        "green-accent": "disabled"
       },
       "$figmaStyleReferences": {
         "surface.default": "S:4fdcaaf6e71f70bf97e4a223c112e24c78c9f709,",
@@ -2406,7 +2448,8 @@
         "colors": "enabled",
         "core": "enabled",
         "red-accent": "source",
-        "main": "enabled"
+        "main": "enabled",
+        "green-accent": "disabled"
       }
     }
   ],
@@ -2416,6 +2459,7 @@
       "colors",
       "core",
       "yellow-accent",
+      "green-accent",
       "purple-accent",
       "blue-accent",
       "red-accent",