diff --git a/TODO.md b/TODO.md
index 5382fc350..c98da0dea 100644
--- a/TODO.md
+++ b/TODO.md
@@ -15,6 +15,157 @@ Axe accessibility (2) - axe-core integration
 
 \[color:var\(--color-(.*?)\)\]
 
+## Color vars
+
+brand primary:    #001733
+brand secondary:  #0062B6
+
+src/components: 427
+src/lib: 13
+src/pages: 250
+
+Applies a solid border of currentColor to an element:
+
+ring (1px), ring-2, ring-4
+accent
+
+### text-white
+
+- Button - success button text
+- Button - success button hover text
+- Button - success button focus text
+
+### --color-bg: 57  #f3f4f6
+
+- [tag] - main content background
+
+### --color-bg-offset: 48 #e5e7eb
+
+- Avatar - wrapper for fallback that just shows initials
+- Button - icon button hover background
+- Button - icon button focus background
+- Button - icon button active background
+
+### --color-bg-inverse: 2 #001a39
+
+### --color-text: 141 #374151
+
+- Button - primary button text
+- Button - primary button focus text
+- Button - secondary button text
+- Button - secondary button hover text
+- Button - secondary button focus text
+- Button - icon button text
+- Button - twitter button text
+- [tag] - H1
+
+### --color-text-offset: 103  #9ca3af
+
+- Avatar - test in wrapper for fallback that just shows initials
+- [tag] - header text
+
+### --color-border: 68  #f0f4ff
+
+### --color-primary: 180  #006dca
+
+- Button - primary button background
+- [tag] - header anchor text
+
+### --color-primary-offset: 14  #00386d
+
+- Button - primary button focus background
+- Hamburger Menu Icon - SVG background fill
+
+### --color-primary-bg: 7   #dbeafe
+
+### --color-primary-bg-hover: 1   #bfdbfe
+
+### --color-primary-hover: 15   #0056a3
+
+### --color-secondary: 5    #facc15
+
+- Button - secondary button background
+
+### --color-secondary-offset: 7   #ca8a04
+
+- Button - secondary button hover background
+- Button - secondary button focus background
+- Button - secondary button active background
+
+### --color-secondary-bg: 1   #fef3c7
+
+### --color-success: 19   #16a34a
+
+- Button - success button background
+
+### --color-success-offset: 7   #22c55e
+
+- Button - success button hover background
+- Button - success button focus background
+- Button - success button active background
+
+### --color-success-bg: 6   #dcfce7
+
+### --color-info: 1   #0891b2
+
+### --color-info-bg: 2    #cffafe
+
+### --color-warning: 5    #a16207
+
+- Button - warning button background
+
+### --color-warning-offset: 3   #ca8a04
+
+- Button - warning button hover background
+- Button - warning button focus background
+- Button - warning button active background
+
+### --color-warning-bg: 1   #fef3c7
+
+### --color-danger: 16    #dc2626
+
+### --color-danger-bg: 5    #fecaca
+
+### --color-accent: 10    #7c3aed
+
+### --color-accent-bg: 1    #ede9fe
+
+### --color-link-shadow: 2    #2563eb
+
+--color-share-highlight-text: 1
+--color-share-highlight-bg: 1
+--color-share-highlight-text-active: 1
+--color-share-highlight-bg-active: 1
+--color-share-highlight-tooltip-text: 1
+--color-share-highlight-tooltip-bg: 1
+
+--shiki-theme: 0
+
+### --shadow-sm: 4
+
+- Button - primary button shadow
+
+### --shadow-md: 1
+
+### --shadow-hover: 8
+
+- Button - primary button focus shadow
+
+### --shadow-active: 4
+
+- Button - secondary button active shadow
+
+### --shadow-text: 4
+
+- Button - primary button text-shadow
+
+### --color-twitter: 4
+
+- Button - twitter button background
+- Button - twitter button border
+- Button - twitter button hover background
+- Button - twitter button focus background
+
 ## Axe tags
 
 cat.aria: Rules related to Accessible Rich Internet Applications (ARIA) attributes and roles.
diff --git a/src/components/Head/index.astro b/src/components/Head/index.astro
index 669b7aa75..ddfd103b5 100644
--- a/src/components/Head/index.astro
+++ b/src/components/Head/index.astro
@@ -62,7 +62,8 @@ const {
     : (prefersDark ? 'dark' : 'default')
   document.documentElement.setAttribute('data-theme', theme)
   document.documentElement.setAttribute('lang', 'en')
-</script><script>
+</script>
+<script>
   {/* Be careful adding script here. It runs before any script tags in components. */}
   import { SentryBootstrap } from '@components/Scripts/sentry/client'
   import { PUBLIC_SENTRY_DSN } from 'astro:env/client'
diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
index 3cf53b54f..445629943 100644
--- a/src/layouts/MarkdownLayout.astro
+++ b/src/layouts/MarkdownLayout.astro
@@ -2,14 +2,14 @@
 /**
  * Layout for Markdown/MDX content files
  */
-import Footer from '@components/Layout/Markdown/Footer/index.astro'
+import BaseLayout from './BaseLayout.astro'
+ import Footer from '@components/Layout/Markdown/Footer/index.astro'
 import Lead from '@components/Layout/Markdown/Lead/index.astro'
 import Subtitle from '@components/Layout/Markdown/Subtitle/index.astro'
 import Title from '@components/Layout/Markdown/Title/index.astro'
 import Toc from '@components/Layout/Markdown/Toc/index.astro'
 
 /** Components made available for use in MDX */
-import BaseLayout from './BaseLayout.astro'
 import Avatar from '@components/Avatar/index.astro'
 import Callout from '@components/Callout/index.astro'
 import Contact from '@components/CallToAction/Contact/index.astro'
diff --git a/src/styles/index.css b/src/styles/index.css
index 805dc3ce1..3c1b6cac6 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -2,6 +2,7 @@
 
 /** Import CSS files - order matters */
 @import "./themes.css";
+@import "./newthemes.css";
 @import "./reset.css";
 @import "./fonts.css";
 @import "./typography.css";
diff --git a/src/styles/newthemes.css b/src/styles/newthemes.css
new file mode 100644
index 000000000..3bc6e8de1
--- /dev/null
+++ b/src/styles/newthemes.css
@@ -0,0 +1,91 @@
+@theme inline {
+  /**
+   * Set of colors to use to style main page elements
+   */
+
+  /** A solid fill color for page page elements */
+  --color-page-base: #f3f4f6; /** --color-bg */
+  /** A shade of the page color for hover and focus states */
+  --color-page-base-offset: #e5e7eb; /** --color-bg-offset */
+  /** A text color for use in page elements */
+  --color-page-content: #374151; /** --color-text */
+  /** A shade of the text color for hover and focus states */
+  --color-page-content-offset: #9ca3af; /** --color-text-offset */
+  /** A border color for use with page elements */
+  --color-page-ring: #000;
+  /** A shade of the border color for hover and focus states */
+  --color-page-ring-offset: #000;
+  /** A color for use in page accent elements */
+  --color-page-accent: #000;
+  /** A shade of the accent color for hover and focus states */
+  --color-page-accent-offset: #000;
+
+  /**
+   * Set of colors to use to style primary page elements
+   */
+
+  /** The primary brand color for use in the logo and wordmarks */
+  --color-primary-brand: #001733;
+  /** A solid fill color for primary page elements */
+  --color-primary-base: #000;
+  /** A shade of the primary color for hover and focus states */
+  --color-primary-base-offset: #000;
+  /** A text color for use in primary page elements */
+  --color-primary-content: #f0f4ff;
+  /** A shade of the text color for hover and focus states */
+  --color-primary-content-offset: #000;
+  /** A border color for use with primary page elements */
+  --color-primary-ring: #000;
+  /** A shade of the border color for hover and focus states */
+  --color-primary-ring-offset: #000;
+  /** A color for use in primary page accent elements */
+  --color-primary-accent: #000;
+  /** A shade of the accent color for hover and focus states */
+  --color-primary-accent-offset: #000;
+
+  /**
+   * Set of colors to use to style secondary page elements
+   */
+
+  /** The secondary brand color for use in the logo and wordmarks */
+  --color-secondary-brand: #0062B6; /** --color-primary */
+  /** A solid fill color for secondary page elements */
+  --color-secondary-base: #000;
+  /** A shade of the secondary color for hover and focus states */
+  --color-secondary-base-offset: #000;
+  /** A text color for use in secondary page elements */
+  --color-secondary-content: #000;
+  /** A shade of the text color for hover and focus states */
+  --color-secondary-content-offset: #000;
+  /** A border color for use with secondary page elements */
+  --color-secondary-ring: #000;
+  /** A shade of the border color for hover and focus states */
+  --color-secondary-ring-offset: #000;
+  /** A color for use in secondary page accent elements */
+  --color-secondary-accent: #000;
+  /** A shade of the accent color for hover and focus states */
+  --color-secondary-accent-offset: #000;
+
+  /** Success colors */
+  /** --color-success: var(--light-color-success); */
+  /** --color-success-offset: var(--light-color-success-offset); */
+  /** --color-success-bg: var(--light-color-success-bg); */
+
+  /** Info colors */
+  /** --color-info: var(--light-color-info); */
+  /** --color-info-bg: var(--light-color-info-bg); */
+
+  /** Warning colors */
+  /** --color-warning: var(--light-color-warning); */
+  /** --color-warning-offset: var(--light-color-warning-offset); */
+  /** --color-warning-bg: var(--light-color-warning-bg); */
+
+  /** Danger colors */
+  /** --color-danger: var(--light-color-danger); */
+  /** --color-danger-bg: var(--light-color-danger-bg); */
+
+  /**
+   * Vendor colors
+   */
+  /** --color-twitter: var(--light-color-twitter); */
+}
diff --git a/src/styles/themes.css b/src/styles/themes.css
index 4e0c095cd..ecb2bc978 100644
--- a/src/styles/themes.css
+++ b/src/styles/themes.css
@@ -65,39 +65,52 @@ transparent: 'transparent';
   --color-bg: var(--light-color-bg);
   --color-bg-offset: var(--light-color-bg-offset);
   --color-bg-inverse: var(--light-color-bg-inverse);
+
   --color-text: var(--light-color-text);
   --color-text-offset: var(--light-color-text-offset);
+
   --color-border: var(--light-color-border);
+
   --color-primary: var(--light-color-primary);
   --color-primary-offset: var(--light-color-primary-offset);
   --color-primary-bg: var(--light-color-primary-bg);
   --color-primary-bg-hover: var(--light-color-primary-bg-hover);
   --color-primary-hover: var(--light-color-primary-hover);
+
   --color-secondary: var(--light-color-secondary);
   --color-secondary-offset: var(--light-color-secondary-offset);
   --color-secondary-bg: var(--light-color-secondary-bg);
+
   --color-success: var(--light-color-success);
   --color-success-offset: var(--light-color-success-offset);
   --color-success-bg: var(--light-color-success-bg);
+
   --color-info: var(--light-color-info);
   --color-info-bg: var(--light-color-info-bg);
+
   --color-warning: var(--light-color-warning);
   --color-warning-offset: var(--light-color-warning-offset);
   --color-warning-bg: var(--light-color-warning-bg);
+
   --color-danger: var(--light-color-danger);
   --color-danger-bg: var(--light-color-danger-bg);
+
   --color-twitter: var(--light-color-twitter);
-  --color-modal-background: var(--light-color-modal-background);
+
   --color-accent: var(--light-color-accent);
   --color-accent-bg: var(--light-color-accent-bg);
+
   --color-link-shadow: var(--light-color-link-shadow);
+
   --color-share-highlight-text: var(--light-color-share-highlight-text);
   --color-share-highlight-bg: var(--light-color-share-highlight-bg);
   --color-share-highlight-text-active: var(--light-color-share-highlight-text-active);
   --color-share-highlight-bg-active: var(--light-color-share-highlight-bg-active);
   --color-share-highlight-tooltip-text: var(--light-color-share-highlight-tooltip-text);
   --color-share-highlight-tooltip-bg: var(--light-color-share-highlight-tooltip-bg);
+
   --shiki-theme: var(--light-shiki-theme);
+
   --shadow-sm: var(--light-shadow-sm);
   --shadow-md: var(--light-shadow-md);
   --shadow-hover: var(--light-shadow-hover);
@@ -116,39 +129,52 @@ transparent: 'transparent';
   --light-color-bg: #f3f4f6;
   --light-color-bg-offset: #e5e7eb;
   --light-color-bg-inverse: #001a39;
+
   --light-color-text: #374151;
   --light-color-text-offset: #9ca3af;
+
   --light-color-border: #f0f4ff;
+
   --light-color-primary: #006dca;
   --light-color-primary-offset: #00386d;
   --light-color-primary-bg: #dbeafe;
   --light-color-primary-bg-hover: #bfdbfe;
   --light-color-primary-hover: #0056a3;
+
   --light-color-secondary: #facc15;
   --light-color-secondary-offset: #ca8a04;
   --light-color-secondary-bg: #fef3c7;
+
   --light-color-success: #16a34a;
   --light-color-success-offset: #22c55e;
   --light-color-success-bg: #dcfce7;
+
   --light-color-info: #0891b2;
   --light-color-info-bg: #cffafe;
+
   --light-color-warning: #a16207;
   --light-color-warning-offset: #ca8a04;
   --light-color-warning-bg: #fef3c7;
+
   --light-color-danger: #dc2626;
   --light-color-danger-bg: #fecaca;
+
   --light-color-twitter: #1da1f2;
-  --light-color-modal-background: #f3f4f6;
+
   --light-color-accent: #7c3aed;
   --light-color-accent-bg: #ede9fe;
+
   --light-color-link-shadow: #2563eb; /* blue-600 for link underline shadow */
+
   --light-color-share-highlight-text: #111827; /* gray-900 */
   --light-color-share-highlight-bg: #e5e7eb; /* gray-200 */
   --light-color-share-highlight-text-active: #ffffff; /* white */
   --light-color-share-highlight-bg-active: #2563eb; /* blue-600 */
   --light-color-share-highlight-tooltip-text: #ffffff; /* white */
   --light-color-share-highlight-tooltip-bg: #111827; /* gray-900 */
+
   --light-shiki-theme: 'github-light';
+
   --light-shadow-sm: 0 2px 16px #000026;
   --light-shadow-md: 0 4px 6px #32325d1c, 0 1px 3px #000014;
   --light-shadow-hover: 0 7px 14px #3232321a, 0 3px 6px #000014;
@@ -189,7 +215,6 @@ transparent: 'transparent';
   --dark-color-danger: #dc2626;
   --dark-color-danger-bg: #7f1d1d;
   --dark-color-twitter: #1da1f2;
-  --dark-color-modal-background: #f3f4f6;
   --dark-color-accent: #8b5cf6;
   --dark-color-accent-bg: #2e1065;
   --dark-color-link-shadow: #60a5fa;
@@ -239,7 +264,6 @@ transparent: 'transparent';
   --color-danger: var(--dark-color-danger);
   --color-danger-bg: var(--dark-color-danger-bg);
   --color-twitter: var(--dark-color-twitter);
-  --color-modal-background: var(--dark-color-modal-background);
   --color-accent: var(--dark-color-accent);
   --color-accent-bg: var(--dark-color-accent-bg);
   --color-link-shadow: var(--dark-color-link-shadow);
@@ -287,7 +311,6 @@ transparent: 'transparent';
   --color-danger: #dc2626;
   --color-danger-bg: #7f1d1d;
   --color-twitter: #1da1f2;
-  --color-modal-background: #0f172a;
   --color-accent: #fbbf24;
   --color-accent-bg: #451a03;
   --color-link-shadow: #2563eb; /* blue-600 for link underline shadow */
@@ -339,7 +362,6 @@ transparent: 'transparent';
     --color-danger: var(--dark-color-danger);
     --color-danger-bg: var(--dark-color-danger-bg);
     --color-twitter: var(--dark-color-twitter);
-    --color-modal-background: var(--dark-color-modal-background);
     --color-accent: var(--dark-color-accent);
     --color-accent-bg: var(--dark-color-accent-bg);
     --color-link-shadow: var(--dark-color-link-shadow);