diff --git a/styles/dist/blue.css b/styles/dist/blue.css
index 9b24657..fe0e7d0 100644
--- a/styles/dist/blue.css
+++ b/styles/dist/blue.css
@@ -80,6 +80,18 @@
   --surface-inverse-tertiary-rgb: var(--content-tertiary-rgb);
   --surface-inverse-tertiary: rgb(var(--surface-inverse-tertiary-rgb));
 
+  --surface-info-rgb: var(--theme-info-800-rgb);
+  --surface-info: rgb(var(--surface-info-rgb));
+
+  --surface-info-hover-rgb: var(--theme-info-700-rgb);
+  --surface-info-hover: rgb(var(--surface-info-hover-rgb));
+
+  --surface-info-secondary-rgb: var(--theme-info-200-rgb);
+  --surface-info-secondary: rgb(var(--surface-info-secondary-rgb));
+
+  --surface-info-secondary-hover-rgb: var(--theme-info-300-rgb);
+  --surface-info-secondary-hover: rgb(var(--surface-info-secondary-hover-rgb));
+
   --content-default-rgb: var(--base-neutral-900-rgb);
   --content-default: rgb(var(--content-default-rgb));
 
@@ -167,6 +179,18 @@
   --content-inverse-secondary-rgb: var(--surface-secondary-rgb);
   --content-inverse-secondary: rgb(var(--content-inverse-secondary-rgb));
 
+  --content-info-rgb: var(--theme-info-800-rgb);
+  --content-info: rgb(var(--content-info-rgb));
+
+  --content-info-secondary-rgb: var(--theme-info-700-rgb);
+  --content-info-secondary: rgb(var(--content-info-secondary-rgb));
+
+  --content-info-tertiary-rgb: var(--theme-info-600-rgb);
+  --content-info-tertiary: rgb(var(--content-info-tertiary-rgb));
+
+  --content-info-disabled-rgb: var(--theme-info-500-rgb);
+  --content-info-disabled: rgb(var(--content-info-disabled-rgb));
+
   --stroke-default-rgb: var(--base-neutral-300-rgb);
   --stroke-default: rgb(var(--stroke-default-rgb));
 
@@ -245,6 +269,18 @@
   --stroke-notice-quaternary-rgb: var(--theme-notice-300-rgb);
   --stroke-notice-quaternary: rgb(var(--stroke-notice-quaternary-rgb));
 
+  --stroke-info-rgb: var(--theme-info-800-rgb);
+  --stroke-info: rgb(var(--stroke-info-rgb));
+
+  --stroke-info-secondary-rgb: var(--theme-info-600-rgb);
+  --stroke-info-secondary: rgb(var(--stroke-info-secondary-rgb));
+
+  --stroke-info-tertiary-rgb: var(--theme-info-400-rgb);
+  --stroke-info-tertiary: rgb(var(--stroke-info-tertiary-rgb));
+
+  --stroke-info-quaternary-rgb: var(--theme-info-300-rgb);
+  --stroke-info-quaternary: rgb(var(--stroke-info-quaternary-rgb));
+
   --chart-fill-area-primary: rgba(var(--theme-accent-700-rgb), 0.7019607843137254);
   --chart-fill-area-secondary: rgba(var(--theme-accent-600-rgb), 0.7019607843137254);
   --chart-fill-area-tertiary: rgba(var(--theme-accent-500-rgb), 0.7019607843137254);
@@ -416,4 +452,28 @@
 
   --theme-notice-800-rgb: var(--base-yellow-800-rgb);
   --theme-notice-800: rgb(var(--theme-notice-800-rgb));
+
+  --theme-info-100-rgb: var(--base-blue-100-rgb);
+  --theme-info-100: rgb(var(--theme-info-100-rgb));
+
+  --theme-info-200-rgb: var(--base-blue-200-rgb);
+  --theme-info-200: rgb(var(--theme-info-200-rgb));
+
+  --theme-info-300-rgb: var(--base-blue-300-rgb);
+  --theme-info-300: rgb(var(--theme-info-300-rgb));
+
+  --theme-info-400-rgb: var(--base-blue-400-rgb);
+  --theme-info-400: rgb(var(--theme-info-400-rgb));
+
+  --theme-info-500-rgb: var(--base-blue-500-rgb);
+  --theme-info-500: rgb(var(--theme-info-500-rgb));
+
+  --theme-info-600-rgb: var(--base-blue-600-rgb);
+  --theme-info-600: rgb(var(--theme-info-600-rgb));
+
+  --theme-info-700-rgb: var(--base-blue-700-rgb);
+  --theme-info-700: rgb(var(--theme-info-700-rgb));
+
+  --theme-info-800-rgb: var(--base-blue-800-rgb);
+  --theme-info-800: rgb(var(--theme-info-800-rgb));
 }
diff --git a/styles/dist/blue.md b/styles/dist/blue.md
index d9d62ad..b19ae03 100644
--- a/styles/dist/blue.md
+++ b/styles/dist/blue.md
@@ -378,6 +378,7 @@ graph RL
 graph RL
   base-blue-100 --> #171821:::base-blue-100
   theme-accent-100 --> base-blue-100
+  theme-info-100 --> base-blue-100
 
 	classDef base-blue-100 stroke-width:5,stroke:#171821
 ```
@@ -388,7 +389,9 @@ graph RL
 graph RL
   base-blue-200 --> #1E202D:::base-blue-200
   surface-accent-secondary --> theme-accent-200
+  surface-info-secondary --> theme-info-200
   theme-accent-200 --> base-blue-200
+  theme-info-200 --> base-blue-200
 
 	classDef base-blue-200 stroke-width:5,stroke:#1E202D
 ```
@@ -399,8 +402,11 @@ graph RL
 graph RL
   base-blue-300 --> #2D3048:::base-blue-300
   surface-accent-secondary-hover --> theme-accent-300
+  surface-info-secondary-hover --> theme-info-300
   stroke-accent-quaternary --> theme-accent-300
+  stroke-info-quaternary --> theme-info-300
   theme-accent-300 --> base-blue-300
+  theme-info-300 --> base-blue-300
 
 	classDef base-blue-300 stroke-width:5,stroke:#2D3048
 ```
@@ -411,8 +417,10 @@ graph RL
 graph RL
   base-blue-400 --> #3C4366:::base-blue-400
   stroke-accent-tertiary --> theme-accent-400
+  stroke-info-tertiary --> theme-info-400
   chart-fill-item-quaternary --> theme-accent-400
   theme-accent-400 --> base-blue-400
+  theme-info-400 --> base-blue-400
 
 	classDef base-blue-400 stroke-width:5,stroke:#3C4366
 ```
@@ -423,8 +431,10 @@ graph RL
 graph RL
   base-blue-500 --> #515B8F:::base-blue-500
   content-accent-disabled --> theme-accent-500
+  content-info-disabled --> theme-info-500
   chart-fill-item-tertiary --> theme-accent-500
   theme-accent-500 --> base-blue-500
+  theme-info-500 --> base-blue-500
 
 	classDef base-blue-500 stroke-width:5,stroke:#515B8F
 ```
@@ -435,10 +445,13 @@ graph RL
 graph RL
   base-blue-600 --> #6776BB:::base-blue-600
   content-accent-tertiary --> theme-accent-600
+  content-info-tertiary --> theme-info-600
   stroke-accent-secondary --> theme-accent-600
+  stroke-info-secondary --> theme-info-600
   chart-fill-item-secondary --> theme-accent-600
   chart-stroke-line-quaternary --> base-blue-600
   theme-accent-600 --> base-blue-600
+  theme-info-600 --> base-blue-600
 
 	classDef base-blue-600 stroke-width:5,stroke:#6776BB
 ```
@@ -449,10 +462,13 @@ graph RL
 graph RL
   base-blue-700 --> #788ADD:::base-blue-700
   surface-accent-hover --> theme-accent-700
+  surface-info-hover --> theme-info-700
   content-accent-secondary --> theme-accent-700
+  content-info-secondary --> theme-info-700
   chart-fill-item-primary --> theme-accent-700
   chart-stroke-line --> theme-accent-700
   theme-accent-700 --> base-blue-700
+  theme-info-700 --> base-blue-700
 
 	classDef base-blue-700 stroke-width:5,stroke:#788ADD
 ```
@@ -463,9 +479,13 @@ graph RL
 graph RL
   base-blue-800 --> #8BA1FF:::base-blue-800
   surface-accent --> theme-accent-800
+  surface-info --> theme-info-800
   content-accent --> theme-accent-800
+  content-info --> theme-info-800
   stroke-accent --> theme-accent-800
+  stroke-info --> theme-info-800
   theme-accent-800 --> base-blue-800
+  theme-info-800 --> base-blue-800
 
 	classDef base-blue-800 stroke-width:5,stroke:#8BA1FF
 ```
diff --git a/styles/dist/main.css b/styles/dist/main.css
index cea843f..039b1c1 100644
--- a/styles/dist/main.css
+++ b/styles/dist/main.css
@@ -233,6 +233,18 @@
   --surface-inverse-tertiary-rgb: var(--content-tertiary-rgb);
   --surface-inverse-tertiary: rgb(var(--surface-inverse-tertiary-rgb));
 
+  --surface-info-rgb: var(--theme-info-800-rgb);
+  --surface-info: rgb(var(--surface-info-rgb));
+
+  --surface-info-hover-rgb: var(--theme-info-700-rgb);
+  --surface-info-hover: rgb(var(--surface-info-hover-rgb));
+
+  --surface-info-secondary-rgb: var(--theme-info-200-rgb);
+  --surface-info-secondary: rgb(var(--surface-info-secondary-rgb));
+
+  --surface-info-secondary-hover-rgb: var(--theme-info-300-rgb);
+  --surface-info-secondary-hover: rgb(var(--surface-info-secondary-hover-rgb));
+
   --content-default-rgb: var(--base-neutral-900-rgb);
   --content-default: rgb(var(--content-default-rgb));
 
@@ -320,6 +332,18 @@
   --content-inverse-secondary-rgb: var(--surface-secondary-rgb);
   --content-inverse-secondary: rgb(var(--content-inverse-secondary-rgb));
 
+  --content-info-rgb: var(--theme-info-800-rgb);
+  --content-info: rgb(var(--content-info-rgb));
+
+  --content-info-secondary-rgb: var(--theme-info-700-rgb);
+  --content-info-secondary: rgb(var(--content-info-secondary-rgb));
+
+  --content-info-tertiary-rgb: var(--theme-info-600-rgb);
+  --content-info-tertiary: rgb(var(--content-info-tertiary-rgb));
+
+  --content-info-disabled-rgb: var(--theme-info-500-rgb);
+  --content-info-disabled: rgb(var(--content-info-disabled-rgb));
+
   --stroke-default-rgb: var(--base-neutral-300-rgb);
   --stroke-default: rgb(var(--stroke-default-rgb));
 
@@ -398,6 +422,18 @@
   --stroke-notice-quaternary-rgb: var(--theme-notice-300-rgb);
   --stroke-notice-quaternary: rgb(var(--stroke-notice-quaternary-rgb));
 
+  --stroke-info-rgb: var(--theme-info-800-rgb);
+  --stroke-info: rgb(var(--stroke-info-rgb));
+
+  --stroke-info-secondary-rgb: var(--theme-info-600-rgb);
+  --stroke-info-secondary: rgb(var(--stroke-info-secondary-rgb));
+
+  --stroke-info-tertiary-rgb: var(--theme-info-400-rgb);
+  --stroke-info-tertiary: rgb(var(--stroke-info-tertiary-rgb));
+
+  --stroke-info-quaternary-rgb: var(--theme-info-300-rgb);
+  --stroke-info-quaternary: rgb(var(--stroke-info-quaternary-rgb));
+
   --chart-fill-area-primary: rgba(var(--theme-accent-700-rgb), 0.7019607843137254);
   --chart-fill-area-secondary: rgba(var(--theme-accent-600-rgb), 0.7019607843137254);
   --chart-fill-area-tertiary: rgba(var(--theme-accent-500-rgb), 0.7019607843137254);
@@ -570,6 +606,30 @@
   --theme-notice-800-rgb: var(--base-yellow-800-rgb);
   --theme-notice-800: rgb(var(--theme-notice-800-rgb));
 
+  --theme-info-100-rgb: var(--base-blue-100-rgb);
+  --theme-info-100: rgb(var(--theme-info-100-rgb));
+
+  --theme-info-200-rgb: var(--base-blue-200-rgb);
+  --theme-info-200: rgb(var(--theme-info-200-rgb));
+
+  --theme-info-300-rgb: var(--base-blue-300-rgb);
+  --theme-info-300: rgb(var(--theme-info-300-rgb));
+
+  --theme-info-400-rgb: var(--base-blue-400-rgb);
+  --theme-info-400: rgb(var(--theme-info-400-rgb));
+
+  --theme-info-500-rgb: var(--base-blue-500-rgb);
+  --theme-info-500: rgb(var(--theme-info-500-rgb));
+
+  --theme-info-600-rgb: var(--base-blue-600-rgb);
+  --theme-info-600: rgb(var(--theme-info-600-rgb));
+
+  --theme-info-700-rgb: var(--base-blue-700-rgb);
+  --theme-info-700: rgb(var(--theme-info-700-rgb));
+
+  --theme-info-800-rgb: var(--base-blue-800-rgb);
+  --theme-info-800: rgb(var(--theme-info-800-rgb));
+
   --border-radius-sm: 0.125rem;
   --border-radius: 0.1875rem;
   --border-radius-lg: 0.375rem;
diff --git a/styles/dist/main.md b/styles/dist/main.md
index 6986f0e..b3abb87 100644
--- a/styles/dist/main.md
+++ b/styles/dist/main.md
@@ -402,6 +402,7 @@ graph RL
 ```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
 ```
@@ -411,6 +412,8 @@ graph RL
 ```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
 ```
@@ -420,6 +423,9 @@ graph RL
 ```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
 ```
@@ -429,6 +435,8 @@ graph RL
 ```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
 ```
@@ -438,6 +446,8 @@ graph RL
 ```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
 ```
@@ -447,7 +457,10 @@ graph RL
 ```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
 ```
@@ -457,6 +470,9 @@ graph RL
 ```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
 ```
@@ -466,6 +482,10 @@ graph RL
 ```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
 ```
diff --git a/styles/dist/purple.css b/styles/dist/purple.css
index 8ee2697..129a36d 100644
--- a/styles/dist/purple.css
+++ b/styles/dist/purple.css
@@ -80,6 +80,18 @@
   --surface-inverse-tertiary-rgb: var(--content-tertiary-rgb);
   --surface-inverse-tertiary: rgb(var(--surface-inverse-tertiary-rgb));
 
+  --surface-info-rgb: var(--theme-info-800-rgb);
+  --surface-info: rgb(var(--surface-info-rgb));
+
+  --surface-info-hover-rgb: var(--theme-info-700-rgb);
+  --surface-info-hover: rgb(var(--surface-info-hover-rgb));
+
+  --surface-info-secondary-rgb: var(--theme-info-200-rgb);
+  --surface-info-secondary: rgb(var(--surface-info-secondary-rgb));
+
+  --surface-info-secondary-hover-rgb: var(--theme-info-300-rgb);
+  --surface-info-secondary-hover: rgb(var(--surface-info-secondary-hover-rgb));
+
   --content-default-rgb: var(--base-neutral-900-rgb);
   --content-default: rgb(var(--content-default-rgb));
 
@@ -167,6 +179,18 @@
   --content-inverse-secondary-rgb: var(--surface-secondary-rgb);
   --content-inverse-secondary: rgb(var(--content-inverse-secondary-rgb));
 
+  --content-info-rgb: var(--theme-info-800-rgb);
+  --content-info: rgb(var(--content-info-rgb));
+
+  --content-info-secondary-rgb: var(--theme-info-700-rgb);
+  --content-info-secondary: rgb(var(--content-info-secondary-rgb));
+
+  --content-info-tertiary-rgb: var(--theme-info-600-rgb);
+  --content-info-tertiary: rgb(var(--content-info-tertiary-rgb));
+
+  --content-info-disabled-rgb: var(--theme-info-500-rgb);
+  --content-info-disabled: rgb(var(--content-info-disabled-rgb));
+
   --stroke-default-rgb: var(--base-neutral-300-rgb);
   --stroke-default: rgb(var(--stroke-default-rgb));
 
@@ -245,6 +269,18 @@
   --stroke-notice-quaternary-rgb: var(--theme-notice-300-rgb);
   --stroke-notice-quaternary: rgb(var(--stroke-notice-quaternary-rgb));
 
+  --stroke-info-rgb: var(--theme-info-800-rgb);
+  --stroke-info: rgb(var(--stroke-info-rgb));
+
+  --stroke-info-secondary-rgb: var(--theme-info-600-rgb);
+  --stroke-info-secondary: rgb(var(--stroke-info-secondary-rgb));
+
+  --stroke-info-tertiary-rgb: var(--theme-info-400-rgb);
+  --stroke-info-tertiary: rgb(var(--stroke-info-tertiary-rgb));
+
+  --stroke-info-quaternary-rgb: var(--theme-info-300-rgb);
+  --stroke-info-quaternary: rgb(var(--stroke-info-quaternary-rgb));
+
   --chart-fill-area-primary: rgba(var(--theme-accent-700-rgb), 0.7019607843137254);
   --chart-fill-area-secondary: rgba(var(--theme-accent-600-rgb), 0.7019607843137254);
   --chart-fill-area-tertiary: rgba(var(--theme-accent-500-rgb), 0.7019607843137254);
@@ -416,4 +452,28 @@
 
   --theme-notice-800-rgb: var(--base-yellow-800-rgb);
   --theme-notice-800: rgb(var(--theme-notice-800-rgb));
+
+  --theme-info-100-rgb: var(--base-blue-100-rgb);
+  --theme-info-100: rgb(var(--theme-info-100-rgb));
+
+  --theme-info-200-rgb: var(--base-blue-200-rgb);
+  --theme-info-200: rgb(var(--theme-info-200-rgb));
+
+  --theme-info-300-rgb: var(--base-blue-300-rgb);
+  --theme-info-300: rgb(var(--theme-info-300-rgb));
+
+  --theme-info-400-rgb: var(--base-blue-400-rgb);
+  --theme-info-400: rgb(var(--theme-info-400-rgb));
+
+  --theme-info-500-rgb: var(--base-blue-500-rgb);
+  --theme-info-500: rgb(var(--theme-info-500-rgb));
+
+  --theme-info-600-rgb: var(--base-blue-600-rgb);
+  --theme-info-600: rgb(var(--theme-info-600-rgb));
+
+  --theme-info-700-rgb: var(--base-blue-700-rgb);
+  --theme-info-700: rgb(var(--theme-info-700-rgb));
+
+  --theme-info-800-rgb: var(--base-blue-800-rgb);
+  --theme-info-800: rgb(var(--theme-info-800-rgb));
 }
diff --git a/styles/dist/purple.md b/styles/dist/purple.md
index 2062ca0..1d704ec 100644
--- a/styles/dist/purple.md
+++ b/styles/dist/purple.md
@@ -402,6 +402,7 @@ graph RL
 ```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
 ```
@@ -411,6 +412,8 @@ graph RL
 ```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
 ```
@@ -420,6 +423,9 @@ graph RL
 ```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
 ```
@@ -429,6 +435,8 @@ graph RL
 ```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
 ```
@@ -438,6 +446,8 @@ graph RL
 ```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
 ```
@@ -447,7 +457,10 @@ graph RL
 ```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
 ```
@@ -457,6 +470,9 @@ graph RL
 ```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
 ```
@@ -466,6 +482,10 @@ graph RL
 ```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
 ```
diff --git a/styles/dist/tailwind-tokens.js b/styles/dist/tailwind-tokens.js
index 52c9596..0691920 100644
--- a/styles/dist/tailwind-tokens.js
+++ b/styles/dist/tailwind-tokens.js
@@ -194,6 +194,18 @@ module.exports.colorUtilities = {
   '.text-inverse-secondary': {
     color: 'var(--content-inverse-secondary)',
   },
+  '.text-info': {
+    color: 'var(--content-info)',
+  },
+  '.text-info-secondary': {
+    color: 'var(--content-info-secondary)',
+  },
+  '.text-info-tertiary': {
+    color: 'var(--content-info-tertiary)',
+  },
+  '.text-info-disabled': {
+    color: 'var(--content-info-disabled)',
+  },
   '.bg-default': {
     'background-color': 'var(--surface-default)',
   },
@@ -272,6 +284,18 @@ module.exports.colorUtilities = {
   '.bg-inverse-tertiary': {
     'background-color': 'var(--surface-inverse-tertiary)',
   },
+  '.bg-info': {
+    'background-color': 'var(--surface-info)',
+  },
+  '.bg-info-hover': {
+    'background-color': 'var(--surface-info-hover)',
+  },
+  '.bg-info-secondary': {
+    'background-color': 'var(--surface-info-secondary)',
+  },
+  '.bg-info-secondary-hover': {
+    'background-color': 'var(--surface-info-secondary-hover)',
+  },
   '.border-default': {
     'border-color': 'var(--stroke-default)',
   },
@@ -350,6 +374,18 @@ module.exports.colorUtilities = {
   '.border-notice-quaternary': {
     'border-color': 'var(--stroke-notice-quaternary)',
   },
+  '.border-info': {
+    'border-color': 'var(--stroke-info)',
+  },
+  '.border-info-secondary': {
+    'border-color': 'var(--stroke-info-secondary)',
+  },
+  '.border-info-tertiary': {
+    'border-color': 'var(--stroke-info-tertiary)',
+  },
+  '.border-info-quaternary': {
+    'border-color': 'var(--stroke-info-quaternary)',
+  },
   '.border-l-default': {
     'border-left-color': 'var(--stroke-default)',
   },
@@ -428,6 +464,18 @@ module.exports.colorUtilities = {
   '.border-l-notice-quaternary': {
     'border-left-color': 'var(--stroke-notice-quaternary)',
   },
+  '.border-l-info': {
+    'border-left-color': 'var(--stroke-info)',
+  },
+  '.border-l-info-secondary': {
+    'border-left-color': 'var(--stroke-info-secondary)',
+  },
+  '.border-l-info-tertiary': {
+    'border-left-color': 'var(--stroke-info-tertiary)',
+  },
+  '.border-l-info-quaternary': {
+    'border-left-color': 'var(--stroke-info-quaternary)',
+  },
   '.border-r-default': {
     'border-right-color': 'var(--stroke-default)',
   },
@@ -506,6 +554,18 @@ module.exports.colorUtilities = {
   '.border-r-notice-quaternary': {
     'border-right-color': 'var(--stroke-notice-quaternary)',
   },
+  '.border-r-info': {
+    'border-right-color': 'var(--stroke-info)',
+  },
+  '.border-r-info-secondary': {
+    'border-right-color': 'var(--stroke-info-secondary)',
+  },
+  '.border-r-info-tertiary': {
+    'border-right-color': 'var(--stroke-info-tertiary)',
+  },
+  '.border-r-info-quaternary': {
+    'border-right-color': 'var(--stroke-info-quaternary)',
+  },
   '.border-t-default': {
     'border-top-color': 'var(--stroke-default)',
   },
@@ -584,6 +644,18 @@ module.exports.colorUtilities = {
   '.border-t-notice-quaternary': {
     'border-top-color': 'var(--stroke-notice-quaternary)',
   },
+  '.border-t-info': {
+    'border-top-color': 'var(--stroke-info)',
+  },
+  '.border-t-info-secondary': {
+    'border-top-color': 'var(--stroke-info-secondary)',
+  },
+  '.border-t-info-tertiary': {
+    'border-top-color': 'var(--stroke-info-tertiary)',
+  },
+  '.border-t-info-quaternary': {
+    'border-top-color': 'var(--stroke-info-quaternary)',
+  },
   '.border-b-default': {
     'border-bottom-color': 'var(--stroke-default)',
   },
@@ -662,6 +734,18 @@ module.exports.colorUtilities = {
   '.border-b-notice-quaternary': {
     'border-bottom-color': 'var(--stroke-notice-quaternary)',
   },
+  '.border-b-info': {
+    'border-bottom-color': 'var(--stroke-info)',
+  },
+  '.border-b-info-secondary': {
+    'border-bottom-color': 'var(--stroke-info-secondary)',
+  },
+  '.border-b-info-tertiary': {
+    'border-bottom-color': 'var(--stroke-info-tertiary)',
+  },
+  '.border-b-info-quaternary': {
+    'border-bottom-color': 'var(--stroke-info-quaternary)',
+  },
   '.border-x-default': {
     'border-left-color': 'var(--stroke-default)',
     'border-right-color': 'var(--stroke-default)',
@@ -766,6 +850,22 @@ module.exports.colorUtilities = {
     'border-left-color': 'var(--stroke-notice-quaternary)',
     'border-right-color': 'var(--stroke-notice-quaternary)',
   },
+  '.border-x-info': {
+    'border-left-color': 'var(--stroke-info)',
+    'border-right-color': 'var(--stroke-info)',
+  },
+  '.border-x-info-secondary': {
+    'border-left-color': 'var(--stroke-info-secondary)',
+    'border-right-color': 'var(--stroke-info-secondary)',
+  },
+  '.border-x-info-tertiary': {
+    'border-left-color': 'var(--stroke-info-tertiary)',
+    'border-right-color': 'var(--stroke-info-tertiary)',
+  },
+  '.border-x-info-quaternary': {
+    'border-left-color': 'var(--stroke-info-quaternary)',
+    'border-right-color': 'var(--stroke-info-quaternary)',
+  },
   '.border-y-default': {
     'border-top-color': 'var(--stroke-default)',
     'border-bottom-color': 'var(--stroke-default)',
@@ -870,6 +970,22 @@ module.exports.colorUtilities = {
     'border-top-color': 'var(--stroke-notice-quaternary)',
     'border-bottom-color': 'var(--stroke-notice-quaternary)',
   },
+  '.border-y-info': {
+    'border-top-color': 'var(--stroke-info)',
+    'border-bottom-color': 'var(--stroke-info)',
+  },
+  '.border-y-info-secondary': {
+    'border-top-color': 'var(--stroke-info-secondary)',
+    'border-bottom-color': 'var(--stroke-info-secondary)',
+  },
+  '.border-y-info-tertiary': {
+    'border-top-color': 'var(--stroke-info-tertiary)',
+    'border-bottom-color': 'var(--stroke-info-tertiary)',
+  },
+  '.border-y-info-quaternary': {
+    'border-top-color': 'var(--stroke-info-quaternary)',
+    'border-bottom-color': 'var(--stroke-info-quaternary)',
+  },
   '.ring-default': {
     '--tw-ring-color': 'var(--stroke-default)',
   },
@@ -948,6 +1064,18 @@ module.exports.colorUtilities = {
   '.ring-notice-quaternary': {
     '--tw-ring-color': 'var(--stroke-notice-quaternary)',
   },
+  '.ring-info': {
+    '--tw-ring-color': 'var(--stroke-info)',
+  },
+  '.ring-info-secondary': {
+    '--tw-ring-color': 'var(--stroke-info-secondary)',
+  },
+  '.ring-info-tertiary': {
+    '--tw-ring-color': 'var(--stroke-info-tertiary)',
+  },
+  '.ring-info-quaternary': {
+    '--tw-ring-color': 'var(--stroke-info-quaternary)',
+  },
   '.outline-default': {
     'outline-color': 'var(--stroke-default)',
   },
@@ -1026,6 +1154,18 @@ module.exports.colorUtilities = {
   '.outline-notice-quaternary': {
     'outline-color': 'var(--stroke-notice-quaternary)',
   },
+  '.outline-info': {
+    'outline-color': 'var(--stroke-info)',
+  },
+  '.outline-info-secondary': {
+    'outline-color': 'var(--stroke-info-secondary)',
+  },
+  '.outline-info-tertiary': {
+    'outline-color': 'var(--stroke-info-tertiary)',
+  },
+  '.outline-info-quaternary': {
+    'outline-color': 'var(--stroke-info-quaternary)',
+  },
   '.chart-fill-area-primary': {
     fill: 'var(--chart-fill-area-primary)',
   },
diff --git a/styles/dist/yellow.css b/styles/dist/yellow.css
index 2635809..5b9cfaa 100644
--- a/styles/dist/yellow.css
+++ b/styles/dist/yellow.css
@@ -80,6 +80,18 @@
   --surface-inverse-tertiary-rgb: var(--content-tertiary-rgb);
   --surface-inverse-tertiary: rgb(var(--surface-inverse-tertiary-rgb));
 
+  --surface-info-rgb: var(--theme-info-800-rgb);
+  --surface-info: rgb(var(--surface-info-rgb));
+
+  --surface-info-hover-rgb: var(--theme-info-700-rgb);
+  --surface-info-hover: rgb(var(--surface-info-hover-rgb));
+
+  --surface-info-secondary-rgb: var(--theme-info-200-rgb);
+  --surface-info-secondary: rgb(var(--surface-info-secondary-rgb));
+
+  --surface-info-secondary-hover-rgb: var(--theme-info-300-rgb);
+  --surface-info-secondary-hover: rgb(var(--surface-info-secondary-hover-rgb));
+
   --content-default-rgb: var(--base-neutral-900-rgb);
   --content-default: rgb(var(--content-default-rgb));
 
@@ -167,6 +179,18 @@
   --content-inverse-secondary-rgb: var(--surface-secondary-rgb);
   --content-inverse-secondary: rgb(var(--content-inverse-secondary-rgb));
 
+  --content-info-rgb: var(--theme-info-800-rgb);
+  --content-info: rgb(var(--content-info-rgb));
+
+  --content-info-secondary-rgb: var(--theme-info-700-rgb);
+  --content-info-secondary: rgb(var(--content-info-secondary-rgb));
+
+  --content-info-tertiary-rgb: var(--theme-info-600-rgb);
+  --content-info-tertiary: rgb(var(--content-info-tertiary-rgb));
+
+  --content-info-disabled-rgb: var(--theme-info-500-rgb);
+  --content-info-disabled: rgb(var(--content-info-disabled-rgb));
+
   --stroke-default-rgb: var(--base-neutral-300-rgb);
   --stroke-default: rgb(var(--stroke-default-rgb));
 
@@ -245,6 +269,18 @@
   --stroke-notice-quaternary-rgb: var(--theme-notice-300-rgb);
   --stroke-notice-quaternary: rgb(var(--stroke-notice-quaternary-rgb));
 
+  --stroke-info-rgb: var(--theme-info-800-rgb);
+  --stroke-info: rgb(var(--stroke-info-rgb));
+
+  --stroke-info-secondary-rgb: var(--theme-info-600-rgb);
+  --stroke-info-secondary: rgb(var(--stroke-info-secondary-rgb));
+
+  --stroke-info-tertiary-rgb: var(--theme-info-400-rgb);
+  --stroke-info-tertiary: rgb(var(--stroke-info-tertiary-rgb));
+
+  --stroke-info-quaternary-rgb: var(--theme-info-300-rgb);
+  --stroke-info-quaternary: rgb(var(--stroke-info-quaternary-rgb));
+
   --chart-fill-area-primary: rgba(var(--theme-accent-700-rgb), 0.7019607843137254);
   --chart-fill-area-secondary: rgba(var(--theme-accent-600-rgb), 0.7019607843137254);
   --chart-fill-area-tertiary: rgba(var(--theme-accent-500-rgb), 0.7019607843137254);
@@ -416,4 +452,28 @@
 
   --theme-notice-800-rgb: var(--base-yellow-800-rgb);
   --theme-notice-800: rgb(var(--theme-notice-800-rgb));
+
+  --theme-info-100-rgb: var(--base-blue-100-rgb);
+  --theme-info-100: rgb(var(--theme-info-100-rgb));
+
+  --theme-info-200-rgb: var(--base-blue-200-rgb);
+  --theme-info-200: rgb(var(--theme-info-200-rgb));
+
+  --theme-info-300-rgb: var(--base-blue-300-rgb);
+  --theme-info-300: rgb(var(--theme-info-300-rgb));
+
+  --theme-info-400-rgb: var(--base-blue-400-rgb);
+  --theme-info-400: rgb(var(--theme-info-400-rgb));
+
+  --theme-info-500-rgb: var(--base-blue-500-rgb);
+  --theme-info-500: rgb(var(--theme-info-500-rgb));
+
+  --theme-info-600-rgb: var(--base-blue-600-rgb);
+  --theme-info-600: rgb(var(--theme-info-600-rgb));
+
+  --theme-info-700-rgb: var(--base-blue-700-rgb);
+  --theme-info-700: rgb(var(--theme-info-700-rgb));
+
+  --theme-info-800-rgb: var(--base-blue-800-rgb);
+  --theme-info-800: rgb(var(--theme-info-800-rgb));
 }
diff --git a/styles/dist/yellow.md b/styles/dist/yellow.md
index c150f03..0f11147 100644
--- a/styles/dist/yellow.md
+++ b/styles/dist/yellow.md
@@ -402,6 +402,7 @@ graph RL
 ```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
 ```
@@ -411,6 +412,8 @@ graph RL
 ```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
 ```
@@ -420,6 +423,9 @@ graph RL
 ```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
 ```
@@ -429,6 +435,8 @@ graph RL
 ```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
 ```
@@ -438,6 +446,8 @@ graph RL
 ```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
 ```
@@ -447,7 +457,10 @@ graph RL
 ```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
 ```
@@ -457,6 +470,9 @@ graph RL
 ```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
 ```
@@ -466,6 +482,10 @@ graph RL
 ```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
 ```
diff --git a/styles/src/tokens.json b/styles/src/tokens.json
index 081c632..10df3b5 100644
--- a/styles/src/tokens.json
+++ b/styles/src/tokens.json
@@ -741,6 +741,40 @@
           "value": "{base.yellow.800}",
           "type": "color"
         }
+      },
+      "info": {
+        "100": {
+          "value": "{base.blue.100}",
+          "type": "color"
+        },
+        "200": {
+          "value": "{base.blue.200}",
+          "type": "color"
+        },
+        "300": {
+          "value": "{base.blue.300}",
+          "type": "color"
+        },
+        "400": {
+          "value": "{base.blue.400}",
+          "type": "color"
+        },
+        "500": {
+          "value": "{base.blue.500}",
+          "type": "color"
+        },
+        "600": {
+          "value": "{base.blue.600}",
+          "type": "color"
+        },
+        "700": {
+          "value": "{base.blue.700}",
+          "type": "color"
+        },
+        "800": {
+          "value": "{base.blue.800}",
+          "type": "color"
+        }
       }
     }
   },
@@ -976,6 +1010,24 @@
           "value": "{content.tertiary}",
           "type": "color"
         }
+      },
+      "info": {
+        "default": {
+          "value": "{theme.info.800}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{theme.info.700}",
+          "type": "color"
+        },
+        "secondary": {
+          "value": "{theme.info.200}",
+          "type": "color"
+        },
+        "secondary-hover": {
+          "value": "{theme.info.300}",
+          "type": "color"
+        }
       }
     },
     "content": {
@@ -1106,6 +1158,24 @@
           "value": "{surface.secondary}",
           "type": "color"
         }
+      },
+      "info": {
+        "default": {
+          "value": "{theme.info.800}",
+          "type": "color"
+        },
+        "secondary": {
+          "value": "{theme.info.700}",
+          "type": "color"
+        },
+        "tertiary": {
+          "value": "{theme.info.600}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{theme.info.500}",
+          "type": "color"
+        }
       }
     },
     "stroke": {
@@ -1223,6 +1293,24 @@
           "value": "{theme.notice.300}",
           "type": "color"
         }
+      },
+      "info": {
+        "default": {
+          "value": "{theme.info.800}",
+          "type": "color"
+        },
+        "secondary": {
+          "value": "{theme.info.600}",
+          "type": "color"
+        },
+        "tertiary": {
+          "value": "{theme.info.400}",
+          "type": "color"
+        },
+        "quaternary": {
+          "value": "{theme.info.300}",
+          "type": "color"
+        }
       }
     },
     "chart": {