diff --git a/.prettierignore b/.prettierignore
index 222af15c..45ffd4f5 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -13,4 +13,5 @@ website/src/static/css/fonts.css
 .gritmodules
 storybook-static
 tmp
-.@tablecheck
\ No newline at end of file
+.@tablecheck
+.all-contributorsrc
\ No newline at end of file
diff --git a/system/core/src/components/Alert.ts b/system/core/src/components/Alert.ts
index 557c591f..136db95f 100644
--- a/system/core/src/components/Alert.ts
+++ b/system/core/src/components/Alert.ts
@@ -3,7 +3,15 @@ import { css } from '../utils';
 export const element = 'div';
 export const className = 'alert';
 
-const variants = ['success', 'info', 'error', 'warning', 'neutral'] as const;
+const variants = [
+  'tertiary',
+  'ghost',
+  'success',
+  'info',
+  'error',
+  'warning',
+  'neutral'
+] as const;
 
 export type AlertVariant = (typeof variants)[number];
 
@@ -25,6 +33,7 @@ export const fullStyles = css`
   gap: var(--spacing-l1) var(--spacing-l2);
   color: var(--neutral-text);
   background: var(--neutral-surface);
+  border: 1px solid var(--neutral-border);
   border-radius: var(--border-radius-small);
   padding: var(--spacing-l2) var(--spacing-l3);
   align-items: flex-start;
@@ -59,20 +68,34 @@ export const fullStyles = css`
     grid: 'description' 1fr / 1fr;
   }
 
+  &[data-variant='tertiary'] {
+    color: var(--text);
+    background: var(--surface);
+    border-color: var(--border);
+  }
+  &[data-variant='ghost'] {
+    color: var(--text);
+    background: transparent;
+    border-color: var(--border);
+  }
   &[data-variant='error'] {
     color: var(--error-text);
     background: var(--error-surface);
+    border-color: var(--error-border);
   }
   &[data-variant='warning'] {
     color: var(--warning-text);
     background: var(--warning-surface);
+    border-color: var(--warning-border);
   }
   &[data-variant='success'] {
     color: var(--success-text);
     background: var(--success-surface);
+    border-color: var(--success-border);
   }
   &[data-variant='info'] {
     color: var(--info-text);
     background: var(--info-surface);
+    border-color: var(--info-border);
   }
 `;
diff --git a/system/core/src/components/Badge.ts b/system/core/src/components/Badge.ts
index 7b9c3a7a..30b86f11 100644
--- a/system/core/src/components/Badge.ts
+++ b/system/core/src/components/Badge.ts
@@ -14,6 +14,7 @@ export const fullStyles = css`
   border-radius: var(--border-radius-small);
   color: var(--neutral-text);
   background-color: var(--neutral-surface);
+  border: 1px solid var(--neutral-border);
 
   &[data-size='x-small'] {
     padding: 2px 6px;
@@ -41,10 +42,12 @@ export interface Props {
 }
 
 const variants = [
+  'tertiary',
+  'ghost',
   'success',
-  'warning',
   'info',
   'error',
+  'warning',
   'neutral',
   'purple',
   'orange',
@@ -53,19 +56,36 @@ const variants = [
 
 export type BadgeVariant = (typeof variants)[number];
 
+function getVariantStyles(key: BadgeVariant): string {
+  if (key === 'disabled')
+    return css`
+      color: var(--text-disabled);
+      background-color: var(--surface-disabled);
+      border-color: transparent;
+    `;
+  if (key === 'tertiary')
+    return css`
+      color: var(--text);
+      background-color: var(--surface);
+      border-color: var(--border);
+    `;
+  if (key === 'ghost')
+    return css`
+      color: var(--text);
+      background-color: transparent;
+      border-color: var(--border);
+    `;
+  return css`
+    color: var(--${key}-text);
+    background-color: var(--${key}-surface);
+    border-color: var(--${key}-border);
+  `;
+}
+
 export const variantStyles = variants.reduce(
   (result, key) => ({
     ...result,
-    [key]:
-      key === 'disabled'
-        ? css`
-            color: var(--text-disabled);
-            background-color: var(--surface-disabled);
-          `
-        : css`
-            color: var(--${key}-text);
-            background-color: var(--${key}-surface);
-          `
+    [key]: getVariantStyles(key)
   }),
   {} as Record<BadgeVariant, string>
 );
diff --git a/system/core/src/components/Banner.ts b/system/core/src/components/Banner.ts
index dcec869b..3064a913 100644
--- a/system/core/src/components/Banner.ts
+++ b/system/core/src/components/Banner.ts
@@ -5,6 +5,7 @@ export const className = 'banner';
 export const fullStyles = css`
   padding: var(--spacing-l4);
   background-color: var(--neutral-surface);
+  border: 1px solid var(--neutral-border);
   display: grid;
   grid-template-columns: min-content auto min-content;
   grid-template-areas: 'icon title close' 'icon content content' 'icon actions actions';
@@ -41,16 +42,41 @@ export interface Props {
   'data-variant'?: BannerVariant;
 }
 
-const variants = ['success', 'warning', 'info', 'neutral'] as const;
+const variants = [
+  'tertiary',
+  'ghost',
+  'success',
+  'warning',
+  'info',
+  'neutral'
+] as const;
 
 export type BannerVariant = (typeof variants)[number];
 
+function getVariantStyles(key: BannerVariant): string {
+  if (key === 'tertiary')
+    return css`
+      color: var(--text);
+      background-color: var(--surface);
+      border-color: var(--border);
+    `;
+  if (key === 'ghost')
+    return css`
+      color: var(--text);
+      background-color: transparent;
+      border-color: var(--border);
+    `;
+  return css`
+    color: var(--${key}-text);
+    background-color: var(--${key}-surface);
+    border-color: var(--${key}-border);
+  `;
+}
+
 export const variantStyles = variants.reduce(
   (result, key) => ({
     ...result,
-    [key]: css`
-      background-color: var(--${key}-surface);
-    `
+    [key]: getVariantStyles(key)
   }),
   {} as Record<BannerVariant, string>
 );
diff --git a/system/core/src/components/Button.ts b/system/core/src/components/Button.ts
index b1916772..69b0fecb 100644
--- a/system/core/src/components/Button.ts
+++ b/system/core/src/components/Button.ts
@@ -73,7 +73,7 @@ export const variantStyles = {
     }
   `,
   secondary: css`
-    --tk-button-color: var(--surface-secondary-text);
+    --tk-button-color: var(--text-secondary);
     --tk-button-background-color: var(--surface-secondary);
     --tk-button-border-color: var(--surface-secondary);
     &[data-pseudo='hover'],
diff --git a/system/core/src/components/InputAlert.ts b/system/core/src/components/InputAlert.ts
index 39f6bfcb..8b29b427 100644
--- a/system/core/src/components/InputAlert.ts
+++ b/system/core/src/components/InputAlert.ts
@@ -43,16 +43,19 @@ export const fullStyles = css`
 
   &[data-variant='error'] {
     background: var(--error-surface);
+    border: 1px solid var(--error-border);
     color: var(--error-text);
   }
 
   &[data-variant='warning'] {
     background: var(--warning-surface);
+    border: 1px solid var(--warning-border);
     color: var(--warning-text);
   }
 
   &[data-variant='info'] {
     background: var(--info-surface);
+    border: 1px solid var(--info-border);
     color: var(--info-text);
   }
 `;
diff --git a/system/core/src/themeVariables/theme.ts b/system/core/src/themeVariables/theme.ts
index e9d7b2d4..67a94651 100644
--- a/system/core/src/themeVariables/theme.ts
+++ b/system/core/src/themeVariables/theme.ts
@@ -29,33 +29,39 @@ export const lightColors = css`
   --brand-secondary-active: var(--purple-200);
   --brand-secondary-hover: var(--purple-200);
   --error: rgba(204, 0, 0, 1);
-  --error-surface: rgba(254, 223, 223, 1);
+  --error-border: var(--danger-200);
+  --error-surface: var(--danger-100);
   --error-surface-hover: rgba(254, 205, 205, 1);
-  --error-text: rgba(204, 0, 0, 1);
+  --error-text: var(--danger-700);
   --field: var(--white);
   --focus: rgba(0, 23, 231, 1);
   --info: rgba(0, 102, 204, 1);
-  --info-surface: rgba(223, 239, 254, 1);
+  --info-border: var(--info-300);
+  --info-surface: var(--info-100);
   --info-surface-hover: rgba(205, 229, 254, 1);
-  --info-text: rgba(0, 102, 204, 1);
+  --info-text: var(--info-700);
   --link: var(--purple-600);
   --link-disabled: var(--grey-500);
   --link-hover: var(--purple-500);
   --link-visited: rgba(200, 0, 204, 1);
   --neutral: var(--grey-800);
+  --neutral-border: var(--grey-400);
   --neutral-surface: var(--grey-200);
   --neutral-surface-hover: var(--grey-300);
   --neutral-text: var(--grey-800);
-  --orange-surface: rgba(255, 237, 202, 1);
+  --orange-border: var(--orange-300);
+  --orange-surface: var(--orange-100);
   --orange-surface-hover: rgba(252, 230, 187, 1);
-  --orange-text: rgba(175, 93, 0, 1);
-  --purple-surface: rgba(245, 216, 255, 1);
+  --orange-text: var(--orange-700);
+  --purple-border: var(--purple-200);
+  --purple-surface: var(--purple-100);
   --purple-surface-hover: rgba(240, 198, 254, 1);
-  --purple-text: rgba(113, 0, 153, 1);
+  --purple-text: var(--purple-700);
   --success: rgba(6, 121, 0, 1);
-  --success-surface: rgba(233, 254, 223, 1);
+  --success-border: var(--success-300);
+  --success-surface: var(--success-100);
   --success-surface-hover: rgba(220, 254, 205, 1);
-  --success-text: rgba(6, 121, 0, 1);
+  --success-text: var(--success-700);
   --surface: var(--white);
   --surface-active: var(--grey-200);
   --surface-disabled: var(--grey-150);
@@ -81,9 +87,10 @@ export const lightColors = css`
   --toggle-disabled: var(--grey-200);
   --toggle-inactive: var(--grey-500);
   --warning: rgba(232, 183, 47, 1);
-  --warning-surface: rgba(255, 250, 223, 1);
+  --warning-border: var(--warning-300);
+  --warning-surface: var(--warning-100);
   --warning-surface-hover: rgba(255, 248, 212, 1);
-  --warning-text: rgba(146, 107, 7, 1);
+  --warning-text: var(--warning-700);
 `;
 
 export const lightColorsObject = {
@@ -98,33 +105,39 @@ export const lightColorsObject = {
   'brand-secondary-active': 'var(--purple-200)',
   'brand-secondary-hover': 'var(--purple-200)',
   error: 'rgba(204, 0, 0, 1)',
-  'error-surface': 'rgba(254, 223, 223, 1)',
+  'error-border': 'var(--danger-200)',
+  'error-surface': 'var(--danger-100)',
   'error-surface-hover': 'rgba(254, 205, 205, 1)',
-  'error-text': 'rgba(204, 0, 0, 1)',
+  'error-text': 'var(--danger-700)',
   field: 'var(--white)',
   focus: 'rgba(0, 23, 231, 1)',
   info: 'rgba(0, 102, 204, 1)',
-  'info-surface': 'rgba(223, 239, 254, 1)',
+  'info-border': 'var(--info-300)',
+  'info-surface': 'var(--info-100)',
   'info-surface-hover': 'rgba(205, 229, 254, 1)',
-  'info-text': 'rgba(0, 102, 204, 1)',
+  'info-text': 'var(--info-700)',
   link: 'var(--purple-600)',
   'link-disabled': 'var(--grey-500)',
   'link-hover': 'var(--purple-500)',
   'link-visited': 'rgba(200, 0, 204, 1)',
   neutral: 'var(--grey-800)',
+  'neutral-border': 'var(--grey-400)',
   'neutral-surface': 'var(--grey-200)',
   'neutral-surface-hover': 'var(--grey-300)',
   'neutral-text': 'var(--grey-800)',
-  'orange-surface': 'rgba(255, 237, 202, 1)',
+  'orange-border': 'var(--orange-300)',
+  'orange-surface': 'var(--orange-100)',
   'orange-surface-hover': 'rgba(252, 230, 187, 1)',
-  'orange-text': 'rgba(175, 93, 0, 1)',
-  'purple-surface': 'rgba(245, 216, 255, 1)',
+  'orange-text': 'var(--orange-700)',
+  'purple-border': 'var(--purple-200)',
+  'purple-surface': 'var(--purple-100)',
   'purple-surface-hover': 'rgba(240, 198, 254, 1)',
-  'purple-text': 'rgba(113, 0, 153, 1)',
+  'purple-text': 'var(--purple-700)',
   success: 'rgba(6, 121, 0, 1)',
-  'success-surface': 'rgba(233, 254, 223, 1)',
+  'success-border': 'var(--success-300)',
+  'success-surface': 'var(--success-100)',
   'success-surface-hover': 'rgba(220, 254, 205, 1)',
-  'success-text': 'rgba(6, 121, 0, 1)',
+  'success-text': 'var(--success-700)',
   surface: 'var(--white)',
   'surface-active': 'var(--grey-200)',
   'surface-disabled': 'var(--grey-150)',
@@ -150,9 +163,10 @@ export const lightColorsObject = {
   'toggle-disabled': 'var(--grey-200)',
   'toggle-inactive': 'var(--grey-500)',
   warning: 'rgba(232, 183, 47, 1)',
-  'warning-surface': 'rgba(255, 250, 223, 1)',
+  'warning-border': 'var(--warning-300)',
+  'warning-surface': 'var(--warning-100)',
   'warning-surface-hover': 'rgba(255, 248, 212, 1)',
-  'warning-text': 'rgba(146, 107, 7, 1)'
+  'warning-text': 'var(--warning-700)'
 };
 
 export const darkColors = css`
@@ -167,33 +181,39 @@ export const darkColors = css`
   --brand-secondary-active: var(--purple-900);
   --brand-secondary-hover: var(--purple-900);
   --error: rgba(239, 72, 72, 1);
-  --error-surface: rgba(140, 0, 0, 1);
+  --error-border: var(--danger-900);
+  --error-surface: var(--danger-700);
   --error-surface-hover: rgba(159, 0, 0, 1);
-  --error-text: rgba(254, 223, 223, 1);
+  --error-text: var(--danger-100);
   --field: var(--grey-900);
   --focus: rgba(104, 119, 253, 1);
   --info: rgba(72, 155, 239, 1);
-  --info-surface: rgba(0, 70, 140, 1);
+  --info-border: var(--info-900);
+  --info-surface: var(--info-700);
   --info-surface-hover: rgba(0, 88, 175, 1);
-  --info-text: rgba(223, 239, 254, 1);
+  --info-text: var(--info-100);
   --link: var(--purple-300);
   --link-disabled: var(--grey-700);
   --link-hover: var(--purple-400);
   --link-visited: rgba(181, 11, 215, 1);
   --neutral: var(--grey-750);
+  --neutral-border: var(--grey-900);
   --neutral-surface: var(--grey-850);
   --neutral-surface-hover: var(--grey-900);
   --neutral-text: var(--grey-400);
-  --orange-surface: rgba(175, 93, 0, 1);
+  --orange-border: var(--orange-800);
+  --orange-surface: var(--orange-700);
   --orange-surface-hover: rgba(197, 109, 10, 1);
-  --orange-text: rgba(255, 237, 202, 1);
-  --purple-surface: rgba(113, 0, 153, 1);
+  --orange-text: var(--orange-100);
+  --purple-border: var(--purple-800);
+  --purple-surface: var(--purple-700);
   --purple-surface-hover: rgba(136, 8, 182, 1);
-  --purple-text: rgba(245, 216, 255, 1);
+  --purple-text: var(--purple-100);
   --success: rgba(20, 175, 0, 1);
-  --success-surface: rgba(3, 102, 0, 1);
+  --success-border: var(--success-900);
+  --success-surface: var(--success-700);
   --success-surface-hover: rgba(6, 121, 0, 1);
-  --success-text: rgba(233, 254, 223, 1);
+  --success-text: var(--success-100);
   --surface: var(--grey-950);
   --surface-active: var(--grey-900);
   --surface-disabled: var(--grey-800);
@@ -219,9 +239,10 @@ export const darkColors = css`
   --toggle-disabled: var(--grey-850);
   --toggle-inactive: var(--grey-750);
   --warning: rgba(239, 194, 72, 1);
-  --warning-surface: rgba(140, 103, 0, 1);
+  --warning-border: var(--warning-900);
+  --warning-surface: var(--warning-700);
   --warning-surface-hover: rgba(159, 116, 0, 1);
-  --warning-text: rgba(254, 246, 223, 1);
+  --warning-text: var(--warning-100);
 `;
 
 export const darkColorsObject = {
@@ -236,33 +257,39 @@ export const darkColorsObject = {
   'brand-secondary-active': 'var(--purple-900)',
   'brand-secondary-hover': 'var(--purple-900)',
   error: 'rgba(239, 72, 72, 1)',
-  'error-surface': 'rgba(140, 0, 0, 1)',
+  'error-border': 'var(--danger-900)',
+  'error-surface': 'var(--danger-700)',
   'error-surface-hover': 'rgba(159, 0, 0, 1)',
-  'error-text': 'rgba(254, 223, 223, 1)',
+  'error-text': 'var(--danger-100)',
   field: 'var(--grey-900)',
   focus: 'rgba(104, 119, 253, 1)',
   info: 'rgba(72, 155, 239, 1)',
-  'info-surface': 'rgba(0, 70, 140, 1)',
+  'info-border': 'var(--info-900)',
+  'info-surface': 'var(--info-700)',
   'info-surface-hover': 'rgba(0, 88, 175, 1)',
-  'info-text': 'rgba(223, 239, 254, 1)',
+  'info-text': 'var(--info-100)',
   link: 'var(--purple-300)',
   'link-disabled': 'var(--grey-700)',
   'link-hover': 'var(--purple-400)',
   'link-visited': 'rgba(181, 11, 215, 1)',
   neutral: 'var(--grey-750)',
+  'neutral-border': 'var(--grey-900)',
   'neutral-surface': 'var(--grey-850)',
   'neutral-surface-hover': 'var(--grey-900)',
   'neutral-text': 'var(--grey-400)',
-  'orange-surface': 'rgba(175, 93, 0, 1)',
+  'orange-border': 'var(--orange-800)',
+  'orange-surface': 'var(--orange-700)',
   'orange-surface-hover': 'rgba(197, 109, 10, 1)',
-  'orange-text': 'rgba(255, 237, 202, 1)',
-  'purple-surface': 'rgba(113, 0, 153, 1)',
+  'orange-text': 'var(--orange-100)',
+  'purple-border': 'var(--purple-800)',
+  'purple-surface': 'var(--purple-700)',
   'purple-surface-hover': 'rgba(136, 8, 182, 1)',
-  'purple-text': 'rgba(245, 216, 255, 1)',
+  'purple-text': 'var(--purple-100)',
   success: 'rgba(20, 175, 0, 1)',
-  'success-surface': 'rgba(3, 102, 0, 1)',
+  'success-border': 'var(--success-900)',
+  'success-surface': 'var(--success-700)',
   'success-surface-hover': 'rgba(6, 121, 0, 1)',
-  'success-text': 'rgba(233, 254, 223, 1)',
+  'success-text': 'var(--success-100)',
   surface: 'var(--grey-950)',
   'surface-active': 'var(--grey-900)',
   'surface-disabled': 'var(--grey-800)',
@@ -288,14 +315,23 @@ export const darkColorsObject = {
   'toggle-disabled': 'var(--grey-850)',
   'toggle-inactive': 'var(--grey-750)',
   warning: 'rgba(239, 194, 72, 1)',
-  'warning-surface': 'rgba(140, 103, 0, 1)',
+  'warning-border': 'var(--warning-900)',
+  'warning-surface': 'var(--warning-700)',
   'warning-surface-hover': 'rgba(159, 116, 0, 1)',
-  'warning-text': 'rgba(254, 246, 223, 1)'
+  'warning-text': 'var(--warning-100)'
 };
 
 export const utilityColors = css`
   --black: rgba(0, 0, 0, 1);
   --brand-static: rgba(121, 53, 210, 1);
+  --danger-100: rgba(254, 223, 223, 1);
+  --danger-200: rgba(245, 206, 206, 1);
+  --danger-300: rgba(238, 171, 171, 1);
+  --danger-500: rgba(226, 112, 112, 1);
+  --danger-600: rgba(218, 70, 70, 1);
+  --danger-700: rgba(204, 0, 0, 1);
+  --danger-800: rgba(175, 0, 0, 1);
+  --danger-900: rgba(136, 3, 3, 1);
   --grey: rgba(26, 26, 26, 1);
   --grey-100: rgba(249, 249, 249, 1);
   --grey-150: rgba(247, 247, 247, 1);
@@ -312,6 +348,22 @@ export const utilityColors = css`
   --grey-850: rgba(58, 58, 58, 1);
   --grey-900: rgba(41, 41, 41, 1);
   --grey-950: rgba(30, 30, 30, 1);
+  --info-100: rgba(223, 239, 254, 1);
+  --info-200: rgba(203, 227, 249, 1);
+  --info-300: rgba(182, 214, 245, 1);
+  --info-500: rgba(127, 180, 233, 1);
+  --info-600: rgba(55, 136, 216, 1);
+  --info-700: rgba(0, 102, 204, 1);
+  --info-800: rgba(0, 82, 163, 1);
+  --info-900: rgba(0, 61, 122, 1);
+  --orange-100: rgba(255, 237, 202, 1);
+  --orange-200: rgba(250, 222, 178, 1);
+  --orange-300: rgba(239, 208, 161, 1);
+  --orange-500: rgba(210, 146, 73, 1);
+  --orange-600: rgba(191, 125, 51, 1);
+  --orange-700: rgba(175, 93, 0, 1);
+  --orange-800: rgba(140, 74, 0, 1);
+  --orange-900: rgba(114, 60, 0, 1);
   --purple-100: rgba(241, 229, 255, 1);
   --purple-150: rgba(226, 204, 255, 1);
   --purple-200: rgba(220, 193, 255, 1);
@@ -324,12 +376,36 @@ export const utilityColors = css`
   --purple-800: rgba(84, 38, 142, 1);
   --purple-900: rgba(61, 31, 98, 1);
   --purple-950: rgba(49, 25, 78, 1);
+  --success-100: rgba(233, 254, 223, 1);
+  --success-200: rgba(221, 247, 211, 1);
+  --success-300: rgba(203, 236, 193, 1);
+  --success-500: rgba(105, 178, 97, 1);
+  --success-600: rgba(65, 155, 58, 1);
+  --success-700: rgba(6, 121, 0, 1);
+  --success-800: rgba(5, 103, 0, 1);
+  --success-900: rgba(4, 85, 0, 1);
+  --warning-100: rgba(255, 250, 229, 1);
+  --warning-200: rgba(247, 238, 204, 1);
+  --warning-300: rgba(239, 229, 191, 1);
+  --warning-500: rgba(231, 192, 92, 1);
+  --warning-600: rgba(197, 158, 59, 1);
+  --warning-700: rgba(146, 107, 7, 1);
+  --warning-800: rgba(129, 85, 0, 1);
+  --warning-900: rgba(115, 68, 0, 1);
   --white: rgba(255, 255, 255, 1);
 `;
 
 export const utilityColorsObject = {
   black: 'rgba(0, 0, 0, 1)',
   'brand-static': 'rgba(121, 53, 210, 1)',
+  'danger-100': 'rgba(254, 223, 223, 1)',
+  'danger-200': 'rgba(245, 206, 206, 1)',
+  'danger-300': 'rgba(238, 171, 171, 1)',
+  'danger-500': 'rgba(226, 112, 112, 1)',
+  'danger-600': 'rgba(218, 70, 70, 1)',
+  'danger-700': 'rgba(204, 0, 0, 1)',
+  'danger-800': 'rgba(175, 0, 0, 1)',
+  'danger-900': 'rgba(136, 3, 3, 1)',
   grey: 'rgba(26, 26, 26, 1)',
   'grey-100': 'rgba(249, 249, 249, 1)',
   'grey-150': 'rgba(247, 247, 247, 1)',
@@ -346,6 +422,22 @@ export const utilityColorsObject = {
   'grey-850': 'rgba(58, 58, 58, 1)',
   'grey-900': 'rgba(41, 41, 41, 1)',
   'grey-950': 'rgba(30, 30, 30, 1)',
+  'info-100': 'rgba(223, 239, 254, 1)',
+  'info-200': 'rgba(203, 227, 249, 1)',
+  'info-300': 'rgba(182, 214, 245, 1)',
+  'info-500': 'rgba(127, 180, 233, 1)',
+  'info-600': 'rgba(55, 136, 216, 1)',
+  'info-700': 'rgba(0, 102, 204, 1)',
+  'info-800': 'rgba(0, 82, 163, 1)',
+  'info-900': 'rgba(0, 61, 122, 1)',
+  'orange-100': 'rgba(255, 237, 202, 1)',
+  'orange-200': 'rgba(250, 222, 178, 1)',
+  'orange-300': 'rgba(239, 208, 161, 1)',
+  'orange-500': 'rgba(210, 146, 73, 1)',
+  'orange-600': 'rgba(191, 125, 51, 1)',
+  'orange-700': 'rgba(175, 93, 0, 1)',
+  'orange-800': 'rgba(140, 74, 0, 1)',
+  'orange-900': 'rgba(114, 60, 0, 1)',
   'purple-100': 'rgba(241, 229, 255, 1)',
   'purple-150': 'rgba(226, 204, 255, 1)',
   'purple-200': 'rgba(220, 193, 255, 1)',
@@ -358,6 +450,22 @@ export const utilityColorsObject = {
   'purple-800': 'rgba(84, 38, 142, 1)',
   'purple-900': 'rgba(61, 31, 98, 1)',
   'purple-950': 'rgba(49, 25, 78, 1)',
+  'success-100': 'rgba(233, 254, 223, 1)',
+  'success-200': 'rgba(221, 247, 211, 1)',
+  'success-300': 'rgba(203, 236, 193, 1)',
+  'success-500': 'rgba(105, 178, 97, 1)',
+  'success-600': 'rgba(65, 155, 58, 1)',
+  'success-700': 'rgba(6, 121, 0, 1)',
+  'success-800': 'rgba(5, 103, 0, 1)',
+  'success-900': 'rgba(4, 85, 0, 1)',
+  'warning-100': 'rgba(255, 250, 229, 1)',
+  'warning-200': 'rgba(247, 238, 204, 1)',
+  'warning-300': 'rgba(239, 229, 191, 1)',
+  'warning-500': 'rgba(231, 192, 92, 1)',
+  'warning-600': 'rgba(197, 158, 59, 1)',
+  'warning-700': 'rgba(146, 107, 7, 1)',
+  'warning-800': 'rgba(129, 85, 0, 1)',
+  'warning-900': 'rgba(115, 68, 0, 1)',
   white: 'rgba(255, 255, 255, 1)'
 };
 
@@ -384,16 +492,16 @@ export const spacingObject = {
 };
 
 export const borderRadius = css`
+  --border-radius-full: 999px;
   --border-radius-large: 8px;
   --border-radius-micro: 2px;
-  --border-radius-full: 999px;
   --border-radius-small: 4px;
 `;
 
 export const borderRadiusObject = {
+  'border-radius-full': 999,
   'border-radius-large': 8,
   'border-radius-micro': 2,
-  'border-radius-full': 999,
   'border-radius-small': 4
 };
 
diff --git a/system/core/src/themeVariables/types.gen.ts b/system/core/src/themeVariables/types.gen.ts
index 03e5ff9a..2697af58 100644
--- a/system/core/src/themeVariables/types.gen.ts
+++ b/system/core/src/themeVariables/types.gen.ts
@@ -5,9 +5,9 @@ export interface TableKitCSSProperties {
   '--black'?: string;
   '--border'?: string;
   '--border-active'?: string;
+  '--border-radius-full'?: string;
   '--border-radius-large'?: string;
   '--border-radius-micro'?: string;
-  '--border-radius-full'?: string;
   '--border-radius-small'?: string;
   '--border-transparent'?: string;
   '--brand-primary'?: string;
@@ -18,7 +18,16 @@ export interface TableKitCSSProperties {
   '--brand-secondary-active'?: string;
   '--brand-secondary-hover'?: string;
   '--brand-static'?: string;
+  '--danger-100'?: string;
+  '--danger-200'?: string;
+  '--danger-300'?: string;
+  '--danger-500'?: string;
+  '--danger-600'?: string;
+  '--danger-700'?: string;
+  '--danger-800'?: string;
+  '--danger-900'?: string;
   '--error'?: string;
+  '--error-border'?: string;
   '--error-surface'?: string;
   '--error-surface-hover'?: string;
   '--error-text'?: string;
@@ -41,6 +50,15 @@ export interface TableKitCSSProperties {
   '--grey-900'?: string;
   '--grey-950'?: string;
   '--info'?: string;
+  '--info-100'?: string;
+  '--info-200'?: string;
+  '--info-300'?: string;
+  '--info-500'?: string;
+  '--info-600'?: string;
+  '--info-700'?: string;
+  '--info-800'?: string;
+  '--info-900'?: string;
+  '--info-border'?: string;
   '--info-surface'?: string;
   '--info-surface-hover'?: string;
   '--info-text'?: string;
@@ -49,9 +67,19 @@ export interface TableKitCSSProperties {
   '--link-hover'?: string;
   '--link-visited'?: string;
   '--neutral'?: string;
+  '--neutral-border'?: string;
   '--neutral-surface'?: string;
   '--neutral-surface-hover'?: string;
   '--neutral-text'?: string;
+  '--orange-100'?: string;
+  '--orange-200'?: string;
+  '--orange-300'?: string;
+  '--orange-500'?: string;
+  '--orange-600'?: string;
+  '--orange-700'?: string;
+  '--orange-800'?: string;
+  '--orange-900'?: string;
+  '--orange-border'?: string;
   '--orange-surface'?: string;
   '--orange-surface-hover'?: string;
   '--orange-text'?: string;
@@ -67,6 +95,7 @@ export interface TableKitCSSProperties {
   '--purple-800'?: string;
   '--purple-900'?: string;
   '--purple-950'?: string;
+  '--purple-border'?: string;
   '--purple-surface'?: string;
   '--purple-surface-hover'?: string;
   '--purple-text'?: string;
@@ -79,6 +108,15 @@ export interface TableKitCSSProperties {
   '--spacing-l7'?: string;
   '--spacing-l8'?: string;
   '--success'?: string;
+  '--success-100'?: string;
+  '--success-200'?: string;
+  '--success-300'?: string;
+  '--success-500'?: string;
+  '--success-600'?: string;
+  '--success-700'?: string;
+  '--success-800'?: string;
+  '--success-900'?: string;
+  '--success-border'?: string;
   '--success-surface'?: string;
   '--success-surface-hover'?: string;
   '--success-text'?: string;
@@ -107,6 +145,15 @@ export interface TableKitCSSProperties {
   '--toggle-disabled'?: string;
   '--toggle-inactive'?: string;
   '--warning'?: string;
+  '--warning-100'?: string;
+  '--warning-200'?: string;
+  '--warning-300'?: string;
+  '--warning-500'?: string;
+  '--warning-600'?: string;
+  '--warning-700'?: string;
+  '--warning-800'?: string;
+  '--warning-900'?: string;
+  '--warning-border'?: string;
   '--warning-surface'?: string;
   '--warning-surface-hover'?: string;
   '--warning-text'?: string;
diff --git a/system/react-css/src/config.tsx b/system/react-css/src/config.tsx
index cb78a54d..56769f1e 100644
--- a/system/react-css/src/config.tsx
+++ b/system/react-css/src/config.tsx
@@ -46,7 +46,15 @@ export function configureDefaults(defaults: CoreConfigDefaults): void {
 }
 
 export function getSentimentIcon(
-  variant: 'success' | 'error' | 'neutral' | 'info' | 'warning' | 'default',
+  variant:
+    | 'success'
+    | 'error'
+    | 'neutral'
+    | 'info'
+    | 'warning'
+    | 'default'
+    | 'tertiary'
+    | 'ghost',
   size = getConfigDefault('iconSize')
 ): JSX.Element {
   switch (variant) {
@@ -59,6 +67,8 @@ export function getSentimentIcon(
     case 'neutral':
     case 'info':
     case 'default':
+    case 'tertiary':
+    case 'ghost':
       return <Information size={size} />;
   }
 }
diff --git a/system/react/src/config.tsx b/system/react/src/config.tsx
index cb78a54d..56769f1e 100644
--- a/system/react/src/config.tsx
+++ b/system/react/src/config.tsx
@@ -46,7 +46,15 @@ export function configureDefaults(defaults: CoreConfigDefaults): void {
 }
 
 export function getSentimentIcon(
-  variant: 'success' | 'error' | 'neutral' | 'info' | 'warning' | 'default',
+  variant:
+    | 'success'
+    | 'error'
+    | 'neutral'
+    | 'info'
+    | 'warning'
+    | 'default'
+    | 'tertiary'
+    | 'ghost',
   size = getConfigDefault('iconSize')
 ): JSX.Element {
   switch (variant) {
@@ -59,6 +67,8 @@ export function getSentimentIcon(
     case 'neutral':
     case 'info':
     case 'default':
+    case 'tertiary':
+    case 'ghost':
       return <Information size={size} />;
   }
 }
diff --git a/system/stories/.storybook/preview.tsx b/system/stories/.storybook/preview.tsx
index 7d6b2d19..c3c4cb36 100644
--- a/system/stories/.storybook/preview.tsx
+++ b/system/stories/.storybook/preview.tsx
@@ -147,6 +147,7 @@ const Code = styled.pre`
   border: 1px solid var(--info);
   border-radius: var(--border-radius-small);
   background: var(--info-surface);
+  border: 1px solid var(--info-border);
   color: var(--info-text);
 `;
 
diff --git a/system/stories/src/Alert.stories.tsx b/system/stories/src/Alert.stories.tsx
index 6a677bca..0f9215f9 100644
--- a/system/stories/src/Alert.stories.tsx
+++ b/system/stories/src/Alert.stories.tsx
@@ -5,6 +5,8 @@ import * as css from '@tablecheck/tablekit-react-css';
 import * as React from 'react';
 
 const contentVariants: emotion.AlertProps['data-variant'][] = [
+  'tertiary',
+  'ghost',
   'success',
   'info',
   'error',
diff --git a/system/stories/src/DatePicker/Calendar.stories.tsx b/system/stories/src/DatePicker/Calendar.stories.tsx
index 4c9b5289..da989f9b 100644
--- a/system/stories/src/DatePicker/Calendar.stories.tsx
+++ b/system/stories/src/DatePicker/Calendar.stories.tsx
@@ -130,6 +130,7 @@ const DemoRow = styled.div`
       padding: var(--spacing-l2);
       color: var(--info-text);
       background-color: var(--info-surface);
+      border: 1px solid var(--info-border);
       justify-self: flex-start;
       border-bottom: 1px solid var(--info);
       text-align: center;
diff --git a/system/stories/src/Theming.stories.tsx b/system/stories/src/Theming.stories.tsx
index 8edec8b0..3258d0ff 100644
--- a/system/stories/src/Theming.stories.tsx
+++ b/system/stories/src/Theming.stories.tsx
@@ -123,7 +123,7 @@ export const Palette: StoryFn = () => (
         const [, rootKey] = key.match(/^(text|toggle)-?/) ?? [];
         if (rootKey) return rootKey;
         return key.replace(
-          /-(active|focus|text|transparent|hover|surface|disabled|visited)/gi,
+          /-(active|focus|text|transparent|hover|surface|disabled|visited|border)/gi,
           ''
         );
       })
@@ -140,12 +140,21 @@ export const Palette: StoryFn = () => (
       </React.Fragment>
     ))}
     <h2>Utility Colors</h2>
-    {Object.keys(utilityColorsObject).map((key, _, keys) => (
-      <PaletteColor
-        key={key}
-        color={key}
-        background={getBackground(keys, key)}
-      />
+    {Object.entries(
+      groupBy(Object.keys(utilityColorsObject), (key) =>
+        key.match(/-[0-9]+$/gi) ? key.replace(/-[0-9]+$/gi, '') : 'basic'
+      )
+    ).map(([groupKey, keys]) => (
+      <React.Fragment key={groupKey}>
+        {groupKey !== 'basic' ? <h4>{groupKey.replace(/-/gi, ' ')}</h4> : null}
+        {keys.map((key) => (
+          <PaletteColor
+            key={key}
+            color={key}
+            background={getBackground(keys, key)}
+          />
+        ))}
+      </React.Fragment>
     ))}
   </>
 );