diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index a4ad6bd3473b..000000000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,254 +0,0 @@
-{
-  "root": true,
-  "extends": [
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "plugin:unicorn/recommended",
-    "xo",
-    "xo/browser"
-  ],
-  "rules": {
-    "arrow-body-style": "off",
-    "capitalized-comments": "off",
-    "comma-dangle": [
-      "error",
-      "never"
-    ],
-    "import/extensions": [
-      "error",
-      "ignorePackages",
-      {
-        "js": "always"
-      }
-    ],
-    "import/first": "error",
-    "import/newline-after-import": "error",
-    "import/no-absolute-path": "error",
-    "import/no-amd": "error",
-    "import/no-cycle": [
-      "error",
-      {
-        "ignoreExternal": true
-      }
-    ],
-    "import/no-duplicates": "error",
-    "import/no-extraneous-dependencies": "error",
-    "import/no-mutable-exports": "error",
-    "import/no-named-as-default": "error",
-    "import/no-named-as-default-member": "error",
-    "import/no-named-default": "error",
-    "import/no-self-import": "error",
-    "import/no-unassigned-import": [
-      "error"
-    ],
-    "import/no-useless-path-segments": "error",
-    "import/order": "error",
-    "indent": [
-      "error",
-      2,
-      {
-        "MemberExpression": "off",
-        "SwitchCase": 1
-      }
-    ],
-    "logical-assignment-operators": "off",
-    "max-params": [
-      "warn",
-      5
-    ],
-    "multiline-ternary": [
-      "error",
-      "always-multiline"
-    ],
-    "new-cap": [
-      "error",
-      {
-        "properties": false
-      }
-    ],
-    "no-console": "error",
-    "no-negated-condition": "off",
-    "object-curly-spacing": [
-      "error",
-      "always"
-    ],
-    "operator-linebreak": [
-      "error",
-      "after"
-    ],
-    "prefer-object-has-own": "off",
-    "prefer-template": "error",
-    "semi": [
-      "error",
-      "never"
-    ],
-    "strict": "error",
-    "unicorn/explicit-length-check": "off",
-    "unicorn/filename-case": "off",
-    "unicorn/no-anonymous-default-export": "off",
-    "unicorn/no-array-callback-reference": "off",
-    "unicorn/no-array-method-this-argument": "off",
-    "unicorn/no-null": "off",
-    "unicorn/no-typeof-undefined": "off",
-    "unicorn/no-unused-properties": "error",
-    "unicorn/numeric-separators-style": "off",
-    "unicorn/prefer-array-flat": "off",
-    "unicorn/prefer-at": "off",
-    "unicorn/prefer-dom-node-dataset": "off",
-    "unicorn/prefer-global-this": "off",
-    "unicorn/prefer-module": "off",
-    "unicorn/prefer-query-selector": "off",
-    "unicorn/prefer-spread": "off",
-    "unicorn/prefer-string-raw": "off",
-    "unicorn/prefer-string-replace-all": "off",
-    "unicorn/prefer-structured-clone": "off",
-    "unicorn/prevent-abbreviations": "off"
-  },
-  "overrides": [
-    {
-      "files": [
-        "build/**"
-      ],
-      "env": {
-        "browser": false,
-        "node": true
-      },
-      "parserOptions": {
-        "sourceType": "module"
-      },
-      "rules": {
-        "no-console": "off",
-        "unicorn/prefer-top-level-await": "off"
-      }
-    },
-    {
-      "files": [
-        "js/**"
-      ],
-      "parserOptions": {
-        "sourceType": "module"
-      }
-    },
-    {
-      "files": [
-        "js/tests/*.js",
-        "js/tests/integration/rollup*.js"
-      ],
-      "env": {
-        "node": true
-      },
-      "parserOptions": {
-        "sourceType": "script"
-      }
-    },
-    {
-      "files": [
-        "js/tests/unit/**"
-      ],
-      "env": {
-        "jasmine": true
-      },
-      "rules": {
-        "no-console": "off",
-        "unicorn/consistent-function-scoping": "off",
-        "unicorn/no-useless-undefined": "off",
-        "unicorn/prefer-add-event-listener": "off"
-      }
-    },
-    {
-      "files": [
-        "js/tests/visual/**"
-      ],
-      "plugins": [
-        "html"
-      ],
-      "settings": {
-        "html/html-extensions": [
-          ".html"
-        ]
-      },
-      "rules": {
-        "no-console": "off",
-        "no-new": "off",
-        "unicorn/no-array-for-each": "off"
-      }
-    },
-    {
-      "files": [
-        "scss/tests/**"
-      ],
-      "env": {
-        "node": true
-      },
-      "parserOptions": {
-        "sourceType": "script"
-      }
-    },
-    {
-      "files": [
-        "site/**"
-      ],
-      "env": {
-        "browser": true,
-        "node": false
-      },
-      "parserOptions": {
-        "sourceType": "script",
-        "ecmaVersion": 2019
-      },
-      "rules": {
-        "no-new": "off",
-        "unicorn/no-array-for-each": "off"
-      }
-    },
-    {
-      "files": [
-        "site/src/assets/application.js",
-        "site/src/assets/partials/*.js",
-        "site/src/assets/search.js",
-        "site/src/assets/snippets.js",
-        "site/src/assets/stackblitz.js",
-        "site/src/plugins/*.js"
-      ],
-      "parserOptions": {
-        "sourceType": "module",
-        "ecmaVersion": 2020
-      }
-    },
-    {
-      "files": [
-        "site/src/assets/examples/cheatsheet/cheatsheet.js",
-        "site/src/assets/examples/sidebars/sidebars.js"
-      ],
-      "parserOptions": {
-        "sourceType": "module",
-        "ecmaVersion": 2020
-      },
-      "rules": {
-        "import/no-unresolved": "off"
-      }
-    },
-    {
-      "files": [
-        "**/*.md"
-      ],
-      "plugins": [
-        "markdown"
-      ],
-      "processor": "markdown/markdown"
-    },
-    {
-      "files": [
-        "**/*.md/*.js",
-        "**/*.md/*.mjs"
-      ],
-      "extends": "plugin:markdown/recommended-legacy",
-      "parserOptions": {
-        "sourceType": "module"
-      },
-      "rules": {
-        "unicorn/prefer-node-protocol": "off"
-      }
-    }
-  ]
-}
diff --git a/eslint.config.js b/eslint.config.js
index 02cbed068584..d807078449a1 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -95,12 +95,12 @@ const localRules = {
   'unicorn/no-unused-properties': 'error',
   'unicorn/numeric-separators-style': 'off',
   'unicorn/prefer-array-flat': 'off',
-  'unicorn/prefer-at': 'off',
+  'unicorn/prefer-at': 'error',
   'unicorn/prefer-dom-node-dataset': 'off',
   'unicorn/prefer-global-this': 'off',
   'unicorn/prefer-module': 'off',
   'unicorn/prefer-query-selector': 'off',
-  'unicorn/prefer-spread': 'off',
+  'unicorn/prefer-spread': 'error',
   'unicorn/prefer-string-raw': 'off',
   'unicorn/prefer-string-replace-all': 'off',
   'unicorn/prefer-structured-clone': 'off',
@@ -266,17 +266,14 @@ const eslintConfig = [
     }
   },
 
-  // site/** — browser, script mode, older ecmaVersion
+  // site/** — browser, script mode
   {
     files: ['site/**'],
     languageOptions: {
       globals: {
         ...globals.browser
       },
-      sourceType: 'script',
-      parserOptions: {
-        ecmaVersion: 2019
-      }
+      sourceType: 'script'
     },
     rules: {
       'no-new': 'off',
@@ -296,10 +293,7 @@ const eslintConfig = [
       'site/src/plugins/*.js'
     ],
     languageOptions: {
-      sourceType: 'module',
-      parserOptions: {
-        ecmaVersion: 2020
-      }
+      sourceType: 'module'
     },
     // These files may have eslint-disable directives for the old import plugin
     linterOptions: {
@@ -322,10 +316,7 @@ const eslintConfig = [
       'site/src/assets/examples/sidebars/sidebars.js'
     ],
     languageOptions: {
-      sourceType: 'module',
-      parserOptions: {
-        ecmaVersion: 2020
-      }
+      sourceType: 'module'
     },
     rules: {
       'import/no-unresolved': 'off'
diff --git a/js/src/combobox.js b/js/src/combobox.js
index fad08043b7ed..9076e13a2418 100644
--- a/js/src/combobox.js
+++ b/js/src/combobox.js
@@ -359,7 +359,7 @@ class Combobox extends BaseComponent {
 
       const items = this._getVisibleItems()
       if (items.length > 0) {
-        const target = key === ARROW_DOWN_KEY ? items[0] : items[items.length - 1]
+        const target = key === ARROW_DOWN_KEY ? items[0] : items.at(-1)
         target.focus()
       }
 
@@ -404,7 +404,7 @@ class Combobox extends BaseComponent {
       event.preventDefault()
       const items = this._getVisibleItems()
       if (items.length > 0) {
-        const targetItem = key === HOME_KEY ? items[0] : items[items.length - 1]
+        const targetItem = key === HOME_KEY ? items[0] : items.at(-1)
         targetItem.focus()
       }
 
diff --git a/js/src/dom/data.js b/js/src/dom/data.js
index 10eee5e22469..6ab30c9bbe2d 100644
--- a/js/src/dom/data.js
+++ b/js/src/dom/data.js
@@ -23,7 +23,7 @@ export default {
     // can be removed later when multiple key/instances are fine to be used
     if (!instanceMap.has(key) && instanceMap.size !== 0) {
       // eslint-disable-next-line no-console
-      console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(instanceMap.keys())[0]}.`)
+      console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${[...instanceMap.keys()][0]}.`)
       return
     }
 
diff --git a/js/src/dom/selector-engine.js b/js/src/dom/selector-engine.js
index d4cee4d811a1..9e83d2064ab2 100644
--- a/js/src/dom/selector-engine.js
+++ b/js/src/dom/selector-engine.js
@@ -34,7 +34,7 @@ const getSelector = element => {
 
 const SelectorEngine = {
   find(selector, element = document.documentElement) {
-    return [].concat(...Element.prototype.querySelectorAll.call(element, selector))
+    return [...Element.prototype.querySelectorAll.call(element, selector)]
   },
 
   findOne(selector, element = document.documentElement) {
@@ -42,7 +42,7 @@ const SelectorEngine = {
   },
 
   children(element, selector) {
-    return [].concat(...element.children).filter(child => child.matches(selector))
+    return [...element.children].filter(child => child.matches(selector))
   },
 
   parents(element, selector) {
diff --git a/js/src/menu.js b/js/src/menu.js
index 3689b3fdddf3..f70a13457606 100644
--- a/js/src/menu.js
+++ b/js/src/menu.js
@@ -186,7 +186,7 @@ class Menu extends BaseComponent {
     this._createFloating()
 
     if ('ontouchstart' in document.documentElement && !this._parent.closest(SELECTOR_NAVBAR_NAV)) {
-      for (const element of [].concat(...document.body.children)) {
+      for (const element of document.body.children) {
         EventHandler.on(element, 'mouseover', noop)
       }
     }
@@ -249,7 +249,7 @@ class Menu extends BaseComponent {
     this._closeAllSubmenus()
 
     if ('ontouchstart' in document.documentElement) {
-      for (const element of [].concat(...document.body.children)) {
+      for (const element of document.body.children) {
         EventHandler.off(element, 'mouseover', noop)
       }
     }
@@ -837,7 +837,7 @@ class Menu extends BaseComponent {
         .filter(element => isVisible(element))
 
       if (items.length) {
-        const targetItem = key === HOME_KEY ? items[0] : items[items.length - 1]
+        const targetItem = key === HOME_KEY ? items[0] : items.at(-1)
         targetItem.focus()
       }
 
diff --git a/js/src/otp-input.js b/js/src/otp-input.js
index 6641eb39cd02..dffa1d97b31d 100644
--- a/js/src/otp-input.js
+++ b/js/src/otp-input.js
@@ -66,7 +66,7 @@ class OtpInput extends BaseComponent {
   }
 
   setValue(value) {
-    const chars = String(value).split('')
+    const chars = [...String(value)]
     for (const [index, input] of this._inputs.entries()) {
       input.value = chars[index] || ''
     }
@@ -136,7 +136,7 @@ class OtpInput extends BaseComponent {
     // Handle multi-character input (some browsers/autofill)
     if (value.length > 1) {
       // Distribute characters across inputs
-      const chars = value.split('')
+      const chars = [...value]
       input.value = chars[0] || ''
 
       for (let i = 1; i < chars.length && index + i < this._inputs.length; i++) {
diff --git a/js/src/tab.js b/js/src/tab.js
index f02519eb97b8..70375ba25d11 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -162,7 +162,7 @@ class Tab extends BaseComponent {
     let nextActiveElement
 
     if ([HOME_KEY, END_KEY].includes(event.key)) {
-      nextActiveElement = children[event.key === HOME_KEY ? 0 : children.length - 1]
+      nextActiveElement = event.key === HOME_KEY ? children[0] : children.at(-1)
     } else {
       const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key)
       nextActiveElement = getNextActiveElement(children, event.target, isNext, true)
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index bf5fadb97710..106085906dc7 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -242,7 +242,7 @@ class Tooltip extends BaseComponent {
     // only needed because of broken event delegation on iOS
     // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
     if ('ontouchstart' in document.documentElement) {
-      for (const element of [].concat(...document.body.children)) {
+      for (const element of document.body.children) {
         EventHandler.on(element, 'mouseover', noop)
       }
     }
@@ -276,7 +276,7 @@ class Tooltip extends BaseComponent {
     // If this is a touch-enabled device we remove the extra
     // empty mouseover listeners we added for iOS support
     if ('ontouchstart' in document.documentElement) {
-      for (const element of [].concat(...document.body.children)) {
+      for (const element of document.body.children) {
         EventHandler.off(element, 'mouseover', noop)
       }
     }
diff --git a/js/src/util/focustrap.js b/js/src/util/focustrap.js
index 158f3d1846d5..7900ab875a1d 100644
--- a/js/src/util/focustrap.js
+++ b/js/src/util/focustrap.js
@@ -97,7 +97,7 @@ class FocusTrap extends Config {
     if (elements.length === 0) {
       trapElement.focus()
     } else if (this._lastTabNavDirection === TAB_NAV_BACKWARD) {
-      elements[elements.length - 1].focus()
+      elements.at(-1).focus()
     } else {
       elements[0].focus()
     }
diff --git a/js/src/util/sanitizer.js b/js/src/util/sanitizer.js
index bcd565a9cfef..cb33633ffd39 100644
--- a/js/src/util/sanitizer.js
+++ b/js/src/util/sanitizer.js
@@ -92,7 +92,7 @@ export function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) {
 
   const domParser = new window.DOMParser()
   const createdDocument = domParser.parseFromString(unsafeHtml, 'text/html')
-  const elements = [].concat(...createdDocument.body.querySelectorAll('*'))
+  const elements = [...createdDocument.body.querySelectorAll('*')]
 
   for (const element of elements) {
     const elementName = element.nodeName.toLowerCase()
@@ -102,8 +102,8 @@ export function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) {
       continue
     }
 
-    const attributeList = [].concat(...element.attributes)
-    const allowedAttributes = [].concat(allowList['*'] || [], allowList[elementName] || [])
+    const attributeList = [...element.attributes]
+    const allowedAttributes = [...(allowList['*'] || []), ...(allowList[elementName] || [])]
 
     for (const attribute of attributeList) {
       if (!allowedAttribute(attribute, allowedAttributes)) {
diff --git a/js/tests/integration/bundle-modularity.js b/js/tests/integration/bundle-modularity.js
index d8f6fc0df844..574f54d219bd 100644
--- a/js/tests/integration/bundle-modularity.js
+++ b/js/tests/integration/bundle-modularity.js
@@ -2,6 +2,6 @@ import Tooltip from '../../dist/tooltip.js'
 import '../../dist/carousel.js' // eslint-disable-line import/no-unassigned-import
 
 window.addEventListener('load', () => {
-  [].concat(...document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+  [...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
     .map(tooltipNode => new Tooltip(tooltipNode))
 })
diff --git a/js/tests/integration/bundle.js b/js/tests/integration/bundle.js
index 0603bfdfb2dc..9f7404142838 100644
--- a/js/tests/integration/bundle.js
+++ b/js/tests/integration/bundle.js
@@ -1,6 +1,6 @@
 import { Tooltip } from '../../../dist/js/bootstrap.js'
 
 window.addEventListener('load', () => {
-  [].concat(...document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+  [...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
     .map(tooltipNode => new Tooltip(tooltipNode))
 })
diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js
index f25d9fc3966b..fddea9c01fb1 100644
--- a/js/tests/unit/collapse.spec.js
+++ b/js/tests/unit/collapse.spec.js
@@ -130,7 +130,7 @@ describe('Collapse', () => {
         const collapseEl1 = fixtureEl.querySelector('#collapse1')
         const collapseEl2 = fixtureEl.querySelector('#collapse2')
 
-        const collapseList = [].concat(...fixtureEl.querySelectorAll('.collapse'))
+        const collapseList = [...fixtureEl.querySelectorAll('.collapse')]
           .map(el => new Collapse(el, {
             parent,
             toggle: false
diff --git a/js/tests/unit/dom/selector-engine.spec.js b/js/tests/unit/dom/selector-engine.spec.js
index 95d9bf8ec9d8..f0ec5faf9a0b 100644
--- a/js/tests/unit/dom/selector-engine.spec.js
+++ b/js/tests/unit/dom/selector-engine.spec.js
@@ -68,7 +68,7 @@ describe('SelectorEngine', () => {
       ].join('')
 
       const list = fixtureEl.querySelector('ul')
-      const liList = [].concat(...fixtureEl.querySelectorAll('li'))
+      const liList = [...fixtureEl.querySelectorAll('li')]
       const result = SelectorEngine.children(list, 'li')
 
       expect(result).toEqual(liList)
@@ -356,7 +356,7 @@ describe('SelectorEngine', () => {
 
       const testEl = fixtureEl.querySelector('#test')
 
-      expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
+      expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual([...fixtureEl.querySelectorAll('.target')])
     })
 
     it('should get elements if several ids are given', () => {
@@ -368,7 +368,7 @@ describe('SelectorEngine', () => {
 
       const testEl = fixtureEl.querySelector('#test')
 
-      expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
+      expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual([...fixtureEl.querySelectorAll('.target')])
     })
 
     it('should get elements if several ids with special chars are given', () => {
@@ -380,7 +380,7 @@ describe('SelectorEngine', () => {
 
       const testEl = fixtureEl.querySelector('#test')
 
-      expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
+      expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual([...fixtureEl.querySelectorAll('.target')])
     })
 
     it('should get elements in array, from href if no data-bs-target set', () => {
@@ -392,7 +392,7 @@ describe('SelectorEngine', () => {
 
       const testEl = fixtureEl.querySelector('#test')
 
-      expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
+      expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual([...fixtureEl.querySelectorAll('.target')])
     })
 
     it('should return empty array if elements not found', () => {
diff --git a/js/tests/visual/datepicker.html b/js/tests/visual/datepicker.html
index 0bf12ec7f072..e9e719edb81e 100644
--- a/js/tests/visual/datepicker.html
+++ b/js/tests/visual/datepicker.html
@@ -8,7 +8,7 @@
   </head>
   <body>
     <div class="container py-5">
-      <h1>Datepicker <small class="text-body-secondary">Bootstrap Visual Test</small></h1>
+      <h1>Datepicker <small class="fg-2">Bootstrap Visual Test</small></h1>
 
       <hr>
 
@@ -94,7 +94,7 @@ <h2>JavaScript Initialization</h2>
             <button type="button" class="btn-solid theme-secondary btn-sm" id="hideBtn">Hide</button>
             <button type="button" class="btn-solid theme-info btn-sm" id="getDatesBtn">Get Dates</button>
           </div>
-          <div id="selectedDatesOutput" class="mt-2 text-body-secondary"></div>
+          <div id="selectedDatesOutput" class="mt-2 fg-2"></div>
         </div>
       </div>
 
diff --git a/js/tests/visual/menu-submenu.html b/js/tests/visual/menu-submenu.html
index 2eb326cfc209..eb07538826ae 100644
--- a/js/tests/visual/menu-submenu.html
+++ b/js/tests/visual/menu-submenu.html
@@ -44,7 +44,7 @@
   </head>
   <body>
     <div class="container py-4">
-      <h1 class="mb-4">Menu Submenus <small class="text-body-secondary">Bootstrap Visual Test</small></h1>
+      <h1 class="mb-4">Menu Submenus <small class="fg-2">Bootstrap Visual Test</small></h1>
 
       <div class="alert theme-info">
         <strong>Keyboard Navigation:</strong>
@@ -59,7 +59,7 @@ <h1 class="mb-4">Menu Submenus <small class="text-body-secondary">Bootstrap Visu
       <!-- Basic Submenu -->
       <section class="test-section">
         <h2>Basic Submenu</h2>
-        <p class="text-body-secondary">Single level submenu with hover and click activation.</p>
+        <p class="fg-2">Single level submenu with hover and click activation.</p>
 
         <div class="demo-box">
           <div>
@@ -89,7 +89,7 @@ <h2>Basic Submenu</h2>
       <!-- Nested Submenus -->
       <section class="test-section">
         <h2>Nested Submenus (Multi-level)</h2>
-        <p class="text-body-secondary">Three levels of nested submenus.</p>
+        <p class="fg-2">Three levels of nested submenus.</p>
 
         <div class="demo-box">
           <div>
@@ -126,7 +126,7 @@ <h2>Nested Submenus (Multi-level)</h2>
       <!-- Multiple Submenus -->
       <section class="test-section">
         <h2>Multiple Submenus at Same Level</h2>
-        <p class="text-body-secondary">Multiple submenu triggers in the same menu - opening one closes the other.</p>
+        <p class="fg-2">Multiple submenu triggers in the same menu - opening one closes the other.</p>
 
         <div class="demo-box">
           <div>
@@ -175,7 +175,7 @@ <h2>Multiple Submenus at Same Level</h2>
       <!-- Viewport Flipping Test -->
       <section class="test-section">
         <h2>Viewport Detection (Flipping)</h2>
-        <p class="text-body-secondary">Submenus flip to the opposite side when there's not enough space. Try the one on the right.</p>
+        <p class="fg-2">Submenus flip to the opposite side when there's not enough space. Try the one on the right.</p>
 
         <div class="demo-box" style="justify-content: space-between;">
           <div>
@@ -220,7 +220,7 @@ <h2>Viewport Detection (Flipping)</h2>
       <!-- Navbar Integration -->
       <section class="test-section">
         <h2>Navbar Integration</h2>
-        <p class="text-body-secondary">Submenus work within navbar menus.</p>
+        <p class="fg-2">Submenus work within navbar menus.</p>
 
         <nav class="navbar lg:navbar-expand bg-body-tertiary rounded">
           <div class="container-fluid">
@@ -274,7 +274,7 @@ <h2>Navbar Integration</h2>
       <!-- Dropup with Submenus -->
       <section class="test-section">
         <h2>Dropup with Submenus</h2>
-        <p class="text-body-secondary">Submenus work with dropup direction.</p>
+        <p class="fg-2">Submenus work with dropup direction.</p>
 
         <div class="demo-box demo-box-center" style="min-height: 200px;">
           <div class="btn-group dropup">
@@ -301,7 +301,7 @@ <h2>Dropup with Submenus</h2>
       <!-- With Icons -->
       <section class="test-section">
         <h2>With Icons</h2>
-        <p class="text-body-secondary">Submenus with icons in menu items.</p>
+        <p class="fg-2">Submenus with icons in menu items.</p>
 
         <div class="demo-box">
           <div>
@@ -345,7 +345,7 @@ <h2>With Icons</h2>
       <!-- Mobile Test -->
       <section class="test-section">
         <h2>Mobile Mode</h2>
-        <p class="text-body-secondary">
+        <p class="fg-2">
           Resize your browser to &lt;768px width to see slide-over behavior.
           On mobile, submenus slide in from the side with a back button.
         </p>
@@ -384,7 +384,7 @@ <h2>Mobile Mode</h2>
       <!-- Disabled Items -->
       <section class="test-section">
         <h2>With Disabled Items</h2>
-        <p class="text-body-secondary">Keyboard navigation skips disabled items.</p>
+        <p class="fg-2">Keyboard navigation skips disabled items.</p>
 
         <div class="demo-box">
           <div>
diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
index a1b6927c5ee1..d12f78559d62 100644
--- a/js/tests/visual/toast.html
+++ b/js/tests/visual/toast.html
@@ -41,7 +41,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
         <div class="toast-header">
           <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
           <strong class="me-auto">Bootstrap</strong>
-          <small class="text-body-secondary">2 seconds ago</small>
+          <small class="fg-2">2 seconds ago</small>
           <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
         </div>
         <div class="toast-body">
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index 2bb02d38bdaa..74f6f7be30cb 100644
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -20,7 +20,7 @@
     <div class="container">
       <h1>Tooltip <small>Bootstrap Visual Test</small></h1>
 
-      <p class="text-body-secondary">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">freegan cred</a> raw denim single-origin coffee viral.</p>
+      <p class="fg-2">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">freegan cred</a> raw denim single-origin coffee viral.</p>
 
       <hr>
 
diff --git a/scss/_alert.scss b/scss/_alert.scss
index 20a79e2d95e2..1094ee18f36b 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -9,10 +9,10 @@ $alert-tokens: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $alert-tokens: defaults(
   (
-    --alert-gap: #{$spacer * .75},
+    --alert-gap: var(--spacer-3),
     --alert-bg: var(--theme-bg-subtle, var(--bg-1)),
-    --alert-padding-x: #{$spacer},
-    --alert-padding-y: #{$spacer},
+    --alert-padding-x: var(--spacer),
+    --alert-padding-y: var(--spacer),
     --alert-color: var(--theme-fg, inherit),
     --alert-border-color: var(--theme-border, var(--border-color)),
     --alert-border: var(--border-width) solid var(--alert-border-color),
diff --git a/scss/_card.scss b/scss/_card.scss
index 7814d495e378..406696168d04 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -11,24 +11,24 @@ $card-tokens: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $card-tokens: defaults(
   (
-    --card-spacer-y: #{$spacer},
-    --card-spacer-x: #{$spacer},
+    --card-spacer-y: var(--spacer-5),
+    --card-spacer-x: var(--spacer-5),
     --card-subtitle-color: inherit,
     --card-border-width: var(--border-width),
     --card-border-color: var(--border-color-translucent),
     --card-border-radius: var(--border-radius-lg),
     --card-box-shadow: none,
     --card-inner-border-radius: calc(var(--border-radius-lg) - var(--border-width)),
-    --card-cap-padding-y: #{$spacer * .75},
-    --card-cap-padding-x: #{$spacer},
+    --card-cap-padding-y: var(--spacer-3),
+    --card-cap-padding-x: var(--spacer),
     --card-cap-bg: var(--bg-1),
     --card-cap-color: inherit,
     --card-height: auto,
     --card-color: inherit,
     --card-bg: var(--bg-body),
-    --card-img-overlay-padding: #{$spacer},
+    --card-img-overlay-padding: var(--card-spacer-y),
     --card-group-margin: #{$grid-gutter-x * .5},
-    --card-body-gap: #{$spacer * .5},
+    --card-body-gap: calc(var(--card-spacer-y) * .5),
   ),
   $card-tokens
 );
@@ -262,11 +262,13 @@ $card-tokens: defaults(
             @include border-end-radius(0);
 
             > .card-img-top,
-            > .card-header {
+            > .card-header,
+            > .card-body {
               border-start-end-radius: 0;
             }
             > .card-img-bottom,
-            > .card-footer {
+            > .card-footer,
+            > .card-body {
               border-end-end-radius: 0;
             }
           }
@@ -275,11 +277,13 @@ $card-tokens: defaults(
             @include border-start-radius(0);
 
             > .card-img-top,
-            > .card-header {
+            > .card-header,
+            > .card-body {
               border-start-start-radius: 0;
             }
             > .card-img-bottom,
-            > .card-footer {
+            > .card-footer,
+            > .card-body {
               border-end-start-radius: 0;
             }
           }
diff --git a/scss/_config.scss b/scss/_config.scss
index 2c35a4f6dd37..81c0f17bb9c8 100644
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -290,7 +290,7 @@ $font-sizes: defaults(
 // scss-docs-end font-sizes
 
 // scss-docs-start headings-variables
-$headings-margin-bottom:      $spacer * .5 !default;
+$headings-margin-bottom:      var(--spacer-2) !default;
 $headings-font-family:        null !default;
 $headings-font-style:         null !default;
 $headings-font-weight:        500 !default;
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index acc59cd03c1f..8052ccfb2e0e 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -16,8 +16,8 @@ $list-group-tokens: defaults(
     --list-group-border-color: var(--border-color),
     --list-group-border-width: var(--border-width),
     --list-group-border-radius: var(--border-radius),
-    --list-group-item-padding-x: #{$spacer},
-    --list-group-item-padding-y: #{$spacer * .5},
+    --list-group-item-padding-x: var(--spacer),
+    --list-group-item-padding-y: var(--spacer-2),
     --list-group-action-color: var(--fg-2),
     --list-group-action-hover-color: var(--fg-1),
     --list-group-action-hover-bg: var(--bg-1),
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 89406fc0b2c3..c3b6334e3a8d 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -20,13 +20,13 @@ $popover-tokens: defaults(
     --popover-border-radius: var(--border-radius-lg),
     --popover-inner-border-radius: calc(var(--border-radius-lg) - var(--border-width)),
     --popover-box-shadow: var(--box-shadow),
-    --popover-header-padding-x: #{$spacer},
-    --popover-header-padding-y: #{$spacer * .75},
+    --popover-header-padding-x: var(--spacer),
+    --popover-header-padding-y: var(--spacer-3),
     --popover-header-font-size: var(--font-size-sm),
     --popover-header-color: #{$headings-color},
     --popover-header-bg: var(--bg-1),
-    --popover-body-padding-x: #{$spacer},
-    --popover-body-padding-y: #{$spacer * .75},
+    --popover-body-padding-x: var(--spacer),
+    --popover-body-padding-y: var(--spacer-3),
     --popover-body-color: var(--fg-body),
     --popover-arrow-width: 1rem,
     --popover-arrow-height: .5rem,
diff --git a/scss/_root.scss b/scss/_root.scss
index 54f3c7675499..4abe148b66b8 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -162,6 +162,11 @@ $root-tokens: defaults(
   $root-tokens: map.set($root-tokens, --breakpoint-#{$name}, $value);
 }
 
+// Generate spacer tokens
+@each $key, $value in $spacers {
+  $root-tokens: map.set($root-tokens, --spacer-#{$key}, $value);
+}
+
 :root {
   @include tokens($root-tokens);
 
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 1da400b819c3..6a88e44e4e79 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -12,8 +12,8 @@ $tooltip-tokens: defaults(
   (
     --tooltip-zindex: #{$zindex-tooltip},
     --tooltip-max-width: 200px,
-    --tooltip-padding-x: #{$spacer * .75},
-    --tooltip-padding-y: #{$spacer * .375},
+    --tooltip-padding-x: var(--spacer-3),
+    --tooltip-padding-y: calc(var(--spacer) * .375),
     --tooltip-font-size: var(--font-size-sm),
     --tooltip-color: var(--bg-body),
     --tooltip-bg: var(--fg-body),
diff --git a/scss/content/_tables.scss b/scss/content/_tables.scss
index de6bf0cf2264..781d1f2c797e 100644
--- a/scss/content/_tables.scss
+++ b/scss/content/_tables.scss
@@ -54,7 +54,7 @@ $table-striped-columns-order: even !default;
     // End of reset
 
     width: 100%;
-    margin-bottom: $spacer;
+    margin-bottom: var(--spacer);
     vertical-align: var(--table-cell-vertical-align);
     border-color: var(--theme-border, var(--table-border-color));
 
diff --git a/site/src/assets/examples/album/index.astro b/site/src/assets/examples/album/index.astro
index 041d5f833570..39c0d6bf29ef 100644
--- a/site/src/assets/examples/album/index.astro
+++ b/site/src/assets/examples/album/index.astro
@@ -11,7 +11,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
       <div class="row">
         <div class="sm:col-8 md:col-7 py-4">
           <h4>About</h4>
-          <p class="text-body-secondary">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
+          <p class="fg-2">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
         </div>
         <div class="sm:col-4 md:offset-1 py-4">
           <h4>Contact</h4>
@@ -43,7 +43,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
     <div class="row lg:py-5">
       <div class="lg:col-6 md:col-8 mx-auto">
         <h1 class="fw-light">Album example</h1>
-        <p class="lead text-body-secondary">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
+        <p class="lead fg-2">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
         <p>
           <a href="#" class="btn-solid theme-primary my-2">Main call to action</a>
           <a href="#" class="btn-solid theme-secondary my-2">Secondary action</a>
@@ -66,7 +66,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
                 </div>
-                <small class="text-body-secondary">9 mins</small>
+                <small class="fg-2">9 mins</small>
               </div>
             </div>
           </div>
@@ -81,7 +81,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
                 </div>
-                <small class="text-body-secondary">9 mins</small>
+                <small class="fg-2">9 mins</small>
               </div>
             </div>
           </div>
@@ -96,7 +96,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
                 </div>
-                <small class="text-body-secondary">9 mins</small>
+                <small class="fg-2">9 mins</small>
               </div>
             </div>
           </div>
@@ -112,7 +112,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
                 </div>
-                <small class="text-body-secondary">9 mins</small>
+                <small class="fg-2">9 mins</small>
               </div>
             </div>
           </div>
@@ -127,7 +127,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
                 </div>
-                <small class="text-body-secondary">9 mins</small>
+                <small class="fg-2">9 mins</small>
               </div>
             </div>
           </div>
@@ -142,7 +142,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
                 </div>
-                <small class="text-body-secondary">9 mins</small>
+                <small class="fg-2">9 mins</small>
               </div>
             </div>
           </div>
@@ -158,7 +158,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
                 </div>
-                <small class="text-body-secondary">9 mins</small>
+                <small class="fg-2">9 mins</small>
               </div>
             </div>
           </div>
@@ -173,7 +173,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
                 </div>
-                <small class="text-body-secondary">9 mins</small>
+                <small class="fg-2">9 mins</small>
               </div>
             </div>
           </div>
@@ -188,7 +188,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
                 </div>
-                <small class="text-body-secondary">9 mins</small>
+                <small class="fg-2">9 mins</small>
               </div>
             </div>
           </div>
@@ -199,7 +199,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 
 </main>
 
-<footer class="text-body-secondary py-5">
+<footer class="fg-2 py-5">
   <div class="container">
     <p class="float-end mb-1">
       <a href="#">Back to top</a>
diff --git a/site/src/assets/examples/blog/index.astro b/site/src/assets/examples/blog/index.astro
index 258aa63d80eb..ca81e687e703 100644
--- a/site/src/assets/examples/blog/index.astro
+++ b/site/src/assets/examples/blog/index.astro
@@ -68,7 +68,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         <div class="col p-4 d-flex flex-column position-static">
           <strong class="d-inline-block mb-2 text-primary-emphasis">World</strong>
           <h3 class="mb-0">Featured post</h3>
-          <div class="mb-1 text-body-secondary">Nov 12</div>
+          <div class="mb-1 fg-2">Nov 12</div>
           <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
           <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
             Continue reading
@@ -85,7 +85,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         <div class="col p-4 d-flex flex-column position-static">
           <strong class="d-inline-block mb-2 text-success-emphasis">Design</strong>
           <h3 class="mb-0">Post title</h3>
-          <div class="mb-1 text-body-secondary">Nov 11</div>
+          <div class="mb-1 fg-2">Nov 11</div>
           <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
           <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
             Continue reading
@@ -242,7 +242,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
                 <Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
                 <div class="lg:col-8">
                   <h6 class="mb-0">Example blog post title</h6>
-                  <small class="text-body-secondary">January 15, 2024</small>
+                  <small class="fg-2">January 15, 2024</small>
                 </div>
               </a>
             </li>
@@ -251,7 +251,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
                 <Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
                 <div class="lg:col-8">
                   <h6 class="mb-0">This is another blog post title</h6>
-                  <small class="text-body-secondary">January 14, 2024</small>
+                  <small class="fg-2">January 14, 2024</small>
                 </div>
               </a>
             </li>
@@ -260,7 +260,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
                 <Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
                 <div class="lg:col-8">
                   <h6 class="mb-0">Longer blog post title: This one has multiple lines!</h6>
-                  <small class="text-body-secondary">January 13, 2024</small>
+                  <small class="fg-2">January 13, 2024</small>
                 </div>
               </a>
             </li>
@@ -299,7 +299,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 
 </main>
 
-<footer class="py-5 text-center text-body-secondary bg-body-tertiary">
+<footer class="py-5 text-center fg-2 bg-body-tertiary">
   <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://x.com/mdo">@mdo</a>.</p>
   <p class="mb-0">
     <a href="#">Back to top</a>
diff --git a/site/src/assets/examples/carousel/index.astro b/site/src/assets/examples/carousel/index.astro
index 35325ce42bd9..269fbdd91222 100644
--- a/site/src/assets/examples/carousel/index.astro
+++ b/site/src/assets/examples/carousel/index.astro
@@ -118,7 +118,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 
     <div class="row featurette">
       <div class="md:col-7">
-        <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="text-body-secondary">It’ll blow your mind.</span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="fg-2">It’ll blow your mind.</span></h2>
         <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
       </div>
       <div class="md:col-5">
@@ -130,7 +130,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 
     <div class="row featurette">
       <div class="md:col-7 md:order-2">
-        <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="text-body-secondary">See for yourself.</span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="fg-2">See for yourself.</span></h2>
         <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
       </div>
       <div class="md:col-5 md:order-1">
@@ -142,7 +142,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 
     <div class="row featurette">
       <div class="md:col-7">
-        <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class="text-body-secondary">Checkmate.</span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class="fg-2">Checkmate.</span></h2>
         <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
       </div>
       <div class="md:col-5">
diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro
index 80e14a7909bf..5d5617f7c904 100644
--- a/site/src/assets/examples/cheatsheet/index.astro
+++ b/site/src/assets/examples/cheatsheet/index.astro
@@ -18,7 +18,7 @@ export const body_class = 'bg-body-tertiary'
     </h1>
   </div>
 </header>
-<aside class="bd-aside xl:sticky-top text-body-secondary align-self-start mb-3 xl:mb-5 px-2">
+<aside class="bd-aside xl:sticky-top fg-2 align-self-start mb-3 xl:mb-5 px-2">
   <h2 class="h6 pt-4 pb-3 mb-4 border-bottom">On this page</h2>
   <nav class="small" id="toc">
     <ul class="list-unstyled">
@@ -809,7 +809,7 @@ export const body_class = 'bg-body-tertiary'
                   <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                   <a href="#" class="btn-solid theme-primary">Go somewhere</a>
                 </div>
-                <div class="card-footer text-body-secondary">
+                <div class="card-footer fg-2">
                   2 days ago
                 </div>
               </div>
@@ -841,7 +841,7 @@ export const body_class = 'bg-body-tertiary'
                     <div class="card-body">
                       <h5 class="card-title">Card title</h5>
                       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-                      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+                      <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
                     </div>
                   </div>
                 </div>
@@ -1474,7 +1474,7 @@ export const body_class = 'bg-body-tertiary'
           <div class="toast-header">
             <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
             <strong class="me-auto">Bootstrap</strong>
-            <small class="text-body-secondary">11 mins ago</small>
+            <small class="fg-2">11 mins ago</small>
             <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
           </div>
           <div class="toast-body">
diff --git a/site/src/assets/examples/checkout/index.astro b/site/src/assets/examples/checkout/index.astro
index fa4d1d40ba84..e9296fadf703 100644
--- a/site/src/assets/examples/checkout/index.astro
+++ b/site/src/assets/examples/checkout/index.astro
@@ -25,23 +25,23 @@ export const body_class = 'bg-body-tertiary'
           <li class="list-group-item d-flex justify-content-between lh-sm">
             <div>
               <h6 class="my-0">Product name</h6>
-              <small class="text-body-secondary">Brief description</small>
+              <small class="fg-2">Brief description</small>
             </div>
-            <span class="text-body-secondary">$12</span>
+            <span class="fg-2">$12</span>
           </li>
           <li class="list-group-item d-flex justify-content-between lh-sm">
             <div>
               <h6 class="my-0">Second product</h6>
-              <small class="text-body-secondary">Brief description</small>
+              <small class="fg-2">Brief description</small>
             </div>
-            <span class="text-body-secondary">$8</span>
+            <span class="fg-2">$8</span>
           </li>
           <li class="list-group-item d-flex justify-content-between lh-sm">
             <div>
               <h6 class="my-0">Third item</h6>
-              <small class="text-body-secondary">Brief description</small>
+              <small class="fg-2">Brief description</small>
             </div>
-            <span class="text-body-secondary">$5</span>
+            <span class="fg-2">$5</span>
           </li>
           <li class="list-group-item d-flex justify-content-between bg-body-tertiary">
             <div class="text-success">
@@ -95,7 +95,7 @@ export const body_class = 'bg-body-tertiary'
             </div>
 
             <div class="col-12">
-              <label for="email" class="form-label">Email <span class="text-body-secondary">(Optional)</span></label>
+              <label for="email" class="form-label">Email <span class="fg-2">(Optional)</span></label>
               <input type="email" class="form-control" id="email" placeholder="you@example.com">
               <div class="invalid-feedback">
                 Please enter a valid email address for shipping updates.
@@ -111,7 +111,7 @@ export const body_class = 'bg-body-tertiary'
             </div>
 
             <div class="col-12">
-              <label for="address2" class="form-label">Address 2 <span class="text-body-secondary">(Optional)</span></label>
+              <label for="address2" class="form-label">Address 2 <span class="fg-2">(Optional)</span></label>
               <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
             </div>
 
@@ -193,7 +193,7 @@ export const body_class = 'bg-body-tertiary'
             <div class="md:col-6">
               <label for="cc-name" class="form-label">Name on card</label>
               <input type="text" class="form-control" id="cc-name" placeholder="" required>
-              <small class="text-body-secondary">Full name as displayed on card</small>
+              <small class="fg-2">Full name as displayed on card</small>
               <div class="invalid-feedback">
                 Name on card is required
               </div>
@@ -232,7 +232,7 @@ export const body_class = 'bg-body-tertiary'
     </div>
   </main>
 
-  <footer class="my-5 pt-5 text-body-secondary text-center text-small">
+  <footer class="my-5 pt-5 fg-2 text-center text-small">
     <p class="mb-1">&copy; 2017–{new Date().getFullYear()} Company Name</p>
     <ul class="list-inline">
       <li class="list-inline-item"><a href="#">Privacy</a></li>
diff --git a/site/src/assets/examples/dashboard/index.astro b/site/src/assets/examples/dashboard/index.astro
index 1158d574f466..f516d07facb0 100644
--- a/site/src/assets/examples/dashboard/index.astro
+++ b/site/src/assets/examples/dashboard/index.astro
@@ -126,7 +126,7 @@ export const extra_js = [
             </li>
           </ul>
 
-          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
+          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 fg-2 text-uppercase">
             <span>Saved reports</span>
             <a class="link-secondary" href="#" aria-label="Add a new report">
               <svg class="bi" aria-hidden="true"><use href="#plus-circle"/></svg>
diff --git a/site/src/assets/examples/dialogs/index.astro b/site/src/assets/examples/dialogs/index.astro
index c36a7a1edf9a..4086c250acbf 100644
--- a/site/src/assets/examples/dialogs/index.astro
+++ b/site/src/assets/examples/dialogs/index.astro
@@ -49,7 +49,7 @@ export const extra_css = ['dialogs.css']
   <dialog class="dialog dialog-example rounded-4 shadow w-340px" open data-bs-theme="light">
     <div class="dialog-body text-center py-4">
       <h5 class="fw-bold mb-2">Enable this setting?</h5>
-      <p class="text-body-secondary mb-0">You can always change your mind in your account settings.</p>
+      <p class="fg-2 mb-0">You can always change your mind in your account settings.</p>
     </div>
     <div class="dialog-footer p-0 border-top">
       <button type="button" class="btn btn-link text-primary flex-fill py-3 m-0 rounded-0 border-end text-decoration-none fw-semibold">Yes, enable</button>
@@ -69,24 +69,24 @@ export const extra_css = ['dialogs.css']
     <div class="dialog-body">
       <ul class="list-unstyled mb-0">
         <li class="d-flex gap-3 mb-3">
-          <svg class="bi text-body-secondary flex-shrink-0" width="48" height="48"><use href="#grid-fill"/></svg>
+          <svg class="bi fg-2 flex-shrink-0" width="48" height="48"><use href="#grid-fill"/></svg>
           <div>
             <h6 class="mb-1 fw-bold">Grid view</h6>
-            <p class="mb-0 text-body-secondary">Not into lists? Try the new grid view.</p>
+            <p class="mb-0 fg-2">Not into lists? Try the new grid view.</p>
           </div>
         </li>
         <li class="d-flex gap-3 mb-3">
           <svg class="bi text-warning flex-shrink-0" width="48" height="48"><use href="#bookmark-star"/></svg>
           <div>
             <h6 class="mb-1 fw-bold">Bookmarks</h6>
-            <p class="mb-0 text-body-secondary">Save items you love for easy access later.</p>
+            <p class="mb-0 fg-2">Save items you love for easy access later.</p>
           </div>
         </li>
         <li class="d-flex gap-3">
           <svg class="bi text-primary flex-shrink-0" width="48" height="48"><use href="#film"/></svg>
           <div>
             <h6 class="mb-1 fw-bold">Video embeds</h6>
-            <p class="mb-0 text-body-secondary">Share videos wherever you go.</p>
+            <p class="mb-0 fg-2">Share videos wherever you go.</p>
           </div>
         </li>
       </ul>
@@ -117,7 +117,7 @@ export const extra_css = ['dialogs.css']
           <label for="floatingPassword">Password</label>
         </div>
         <button class="btn-solid theme-primary w-100 py-2 mb-2" type="submit">Sign up</button>
-        <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
+        <small class="fg-2">By clicking Sign up, you agree to the terms of use.</small>
         <hr class="my-4">
         <h6 class="fw-bold mb-3">Or use a third-party</h6>
         <button type="button" class="btn-outline theme-inverse w-100 py-2 mb-2">
diff --git a/site/src/assets/examples/drawer-navbar/index.astro b/site/src/assets/examples/drawer-navbar/index.astro
index 4635e6a46bcd..39e6572cc562 100644
--- a/site/src/assets/examples/drawer-navbar/index.astro
+++ b/site/src/assets/examples/drawer-navbar/index.astro
@@ -75,21 +75,21 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 
   <div class="my-3 p-3 bg-body rounded shadow-sm">
     <h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
-    <div class="d-flex text-body-secondary pt-3">
+    <div class="d-flex fg-2 pt-3">
       <Placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" />
       <p class="pb-3 mb-0 small lh-sm border-bottom">
         <strong class="d-block text-gray-dark">@username</strong>
         Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps?
       </p>
     </div>
-    <div class="d-flex text-body-secondary pt-3">
+    <div class="d-flex fg-2 pt-3">
       <Placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" />
       <p class="pb-3 mb-0 small lh-sm border-bottom">
         <strong class="d-block text-gray-dark">@username</strong>
         Some more representative placeholder content, related to this other user. Another status update, perhaps.
       </p>
     </div>
-    <div class="d-flex text-body-secondary pt-3">
+    <div class="d-flex fg-2 pt-3">
       <Placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" />
       <p class="pb-3 mb-0 small lh-sm border-bottom">
         <strong class="d-block text-gray-dark">@username</strong>
@@ -103,7 +103,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 
   <div class="my-3 p-3 bg-body rounded shadow-sm">
     <h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
-    <div class="d-flex text-body-secondary pt-3">
+    <div class="d-flex fg-2 pt-3">
       <Placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" />
       <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div class="d-flex justify-content-between">
@@ -113,7 +113,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         <span class="d-block">@username</span>
       </div>
     </div>
-    <div class="d-flex text-body-secondary pt-3">
+    <div class="d-flex fg-2 pt-3">
       <Placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" />
       <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div class="d-flex justify-content-between">
@@ -123,7 +123,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         <span class="d-block">@username</span>
       </div>
     </div>
-    <div class="d-flex text-body-secondary pt-3">
+    <div class="d-flex fg-2 pt-3">
       <Placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" />
       <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div class="d-flex justify-content-between">
diff --git a/site/src/assets/examples/features/index.astro b/site/src/assets/examples/features/index.astro
index 1e1247e23862..98709bb15022 100644
--- a/site/src/assets/examples/features/index.astro
+++ b/site/src/assets/examples/features/index.astro
@@ -219,56 +219,56 @@ export const extra_css = ['features.css']
 
     <div class="row row-cols-1 sm:row-cols-2 md:row-cols-3 lg:row-cols-4 g-4 py-5">
       <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#bootstrap"/></svg>
+        <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#bootstrap"/></svg>
         <div>
           <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#cpu-fill"/></svg>
+        <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#cpu-fill"/></svg>
         <div>
           <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#calendar3"/></svg>
+        <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#calendar3"/></svg>
         <div>
           <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#home"/></svg>
+        <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#home"/></svg>
         <div>
           <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#speedometer2"/></svg>
+        <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#speedometer2"/></svg>
         <div>
           <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#toggles2"/></svg>
+        <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#toggles2"/></svg>
         <div>
           <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#geo-fill"/></svg>
+        <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#geo-fill"/></svg>
         <div>
           <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#tools"/></svg>
+        <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#tools"/></svg>
         <div>
           <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
@@ -285,7 +285,7 @@ export const extra_css = ['features.css']
     <div class="row row-cols-1 md:row-cols-2 md:align-items-center g-5 py-5">
       <div class="col d-flex flex-column align-items-start gap-2">
         <h2 class="fw-bold text-body-emphasis">Left-aligned title explaining these awesome features</h2>
-        <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
+        <p class="fg-2">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="btn-solid theme-primary btn-lg">Primary button</a>
       </div>
 
@@ -298,7 +298,7 @@ export const extra_css = ['features.css']
               </svg>
             </div>
             <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
-            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
+            <p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
 
           <div class="col d-flex flex-column gap-2">
@@ -308,7 +308,7 @@ export const extra_css = ['features.css']
               </svg>
             </div>
             <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
-            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
+            <p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
 
           <div class="col d-flex flex-column gap-2">
@@ -318,7 +318,7 @@ export const extra_css = ['features.css']
               </svg>
             </div>
             <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
-            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
+            <p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
 
           <div class="col d-flex flex-column gap-2">
@@ -328,7 +328,7 @@ export const extra_css = ['features.css']
               </svg>
             </div>
             <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
-            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
+            <p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
         </div>
       </div>
diff --git a/site/src/assets/examples/footers/index.astro b/site/src/assets/examples/footers/index.astro
index 85f75f02674b..f9dc9b70178b 100644
--- a/site/src/assets/examples/footers/index.astro
+++ b/site/src/assets/examples/footers/index.astro
@@ -17,18 +17,18 @@ export const title = 'Footers'
 
 <div class="container">
   <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
-    <p class="md:col-4 mb-0 text-body-secondary">&copy; {new Date().getFullYear()} Company, Inc</p>
+    <p class="md:col-4 mb-0 fg-2">&copy; {new Date().getFullYear()} Company, Inc</p>
 
     <a href="/" class="md:col-4 d-flex align-items-center justify-content-center mb-3 md:mb-0 md:me-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
       <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
     </a>
 
     <ul class="nav md:col-4 justify-content-end">
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">Home</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">Features</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">Pricing</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">FAQs</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">About</a></li>
     </ul>
   </footer>
 </div>
@@ -38,15 +38,15 @@ export const title = 'Footers'
 <div class="container">
   <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
     <div class="md:col-4 d-flex align-items-center">
-      <a href="/" class="mb-3 me-2 md:mb-0 text-body-secondary text-decoration-none lh-1" aria-label="Bootstrap">
+      <a href="/" class="mb-3 me-2 md:mb-0 fg-2 text-decoration-none lh-1" aria-label="Bootstrap">
         <svg class="bi" width="30" height="24" aria-hidden="true"><use href="#bootstrap"/></svg>
       </a>
-      <span class="mb-3 md:mb-0 text-body-secondary">&copy; {new Date().getFullYear()} Company, Inc</span>
+      <span class="mb-3 md:mb-0 fg-2">&copy; {new Date().getFullYear()} Company, Inc</span>
     </div>
 
     <ul class="nav md:col-4 justify-content-end list-unstyled d-flex">
-      <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24" aria-hidden="true"><use href="#instagram"/></svg></a></li>
-      <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24"><use href="#facebook"/></svg></a></li>
+      <li class="ms-3"><a class="fg-2" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24" aria-hidden="true"><use href="#instagram"/></svg></a></li>
+      <li class="ms-3"><a class="fg-2" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24"><use href="#facebook"/></svg></a></li>
     </ul>
   </footer>
 </div>
@@ -56,13 +56,13 @@ export const title = 'Footers'
 <div class="container">
   <footer class="py-3 my-4">
     <ul class="nav justify-content-center border-bottom pb-3 mb-3">
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">Home</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">Features</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">Pricing</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">FAQs</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">About</a></li>
     </ul>
-    <p class="text-center text-body-secondary">&copy; {new Date().getFullYear()} Company, Inc</p>
+    <p class="text-center fg-2">&copy; {new Date().getFullYear()} Company, Inc</p>
   </footer>
 </div>
 
@@ -74,7 +74,7 @@ export const title = 'Footers'
       <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none" aria-label="Bootstrap">
         <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
       </a>
-      <p class="text-body-secondary">&copy; {new Date().getFullYear()}</p>
+      <p class="fg-2">&copy; {new Date().getFullYear()}</p>
     </div>
 
     <div class="col mb-3">
@@ -84,33 +84,33 @@ export const title = 'Footers'
     <div class="col mb-3">
       <h5>Section</h5>
       <ul class="nav flex-column">
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Home</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Features</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Pricing</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">FAQs</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">About</a></li>
       </ul>
     </div>
 
     <div class="col mb-3">
       <h5>Section</h5>
       <ul class="nav flex-column">
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Home</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Features</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Pricing</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">FAQs</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">About</a></li>
       </ul>
     </div>
 
     <div class="col mb-3">
       <h5>Section</h5>
       <ul class="nav flex-column">
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Home</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Features</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Pricing</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">FAQs</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">About</a></li>
       </ul>
     </div>
   </footer>
@@ -125,33 +125,33 @@ export const title = 'Footers'
       <div class="col-6 md:col-2 mb-3">
         <h5>Section</h5>
         <ul class="nav flex-column">
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Home</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Features</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Pricing</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">FAQs</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">About</a></li>
         </ul>
       </div>
 
       <div class="col-6 md:col-2 mb-3">
         <h5>Section</h5>
         <ul class="nav flex-column">
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Home</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Features</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Pricing</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">FAQs</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">About</a></li>
         </ul>
       </div>
 
       <div class="col-6 md:col-2 mb-3">
         <h5>Section</h5>
         <ul class="nav flex-column">
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Home</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Features</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Pricing</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">FAQs</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">About</a></li>
         </ul>
       </div>
 
diff --git a/site/src/assets/examples/heroes/index.astro b/site/src/assets/examples/heroes/index.astro
index a2065b29865f..2ca408ea0923 100644
--- a/site/src/assets/examples/heroes/index.astro
+++ b/site/src/assets/examples/heroes/index.astro
@@ -86,7 +86,7 @@ export const extra_css = ['heroes.css']
           </div>
           <button class="w-100 btn-solid theme-primary btn-lg" type="submit">Sign up</button>
           <hr class="my-4">
-          <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
+          <small class="fg-2">By clicking Sign up, you agree to the terms of use.</small>
         </form>
       </div>
     </div>
diff --git a/site/src/assets/examples/jumbotron/index.astro b/site/src/assets/examples/jumbotron/index.astro
index eaa25692e338..50802b02d6a4 100644
--- a/site/src/assets/examples/jumbotron/index.astro
+++ b/site/src/assets/examples/jumbotron/index.astro
@@ -36,7 +36,7 @@ export const title = 'Jumbotron example'
       </div>
     </div>
 
-    <footer class="pt-3 mt-4 text-body-secondary border-top">
+    <footer class="pt-3 mt-4 fg-2 border-top">
       &copy; {new Date().getFullYear()}
     </footer>
   </div>
diff --git a/site/src/assets/examples/list-groups/index.astro b/site/src/assets/examples/list-groups/index.astro
index 84a3b4e3253e..c8d3f5eed2b1 100644
--- a/site/src/assets/examples/list-groups/index.astro
+++ b/site/src/assets/examples/list-groups/index.astro
@@ -68,7 +68,7 @@ export const extra_css = ['list-groups.css']
       </div>
       <span>
         First checkbox
-        <small class="d-block text-body-secondary">With support text underneath to add more detail</small>
+        <small class="d-block fg-2">With support text underneath to add more detail</small>
       </span>
     </label>
     <label class="list-group-item d-flex gap-2">
@@ -81,7 +81,7 @@ export const extra_css = ['list-groups.css']
       </div>
       <span>
         Second checkbox
-        <small class="d-block text-body-secondary">Some other text goes here</small>
+        <small class="d-block fg-2">Some other text goes here</small>
       </span>
     </label>
     <label class="list-group-item d-flex gap-2">
@@ -94,7 +94,7 @@ export const extra_css = ['list-groups.css']
       </div>
       <span>
         Third checkbox
-        <small class="d-block text-body-secondary">And we end with another snippet of text</small>
+        <small class="d-block fg-2">And we end with another snippet of text</small>
       </span>
     </label>
   </div>
@@ -104,21 +104,21 @@ export const extra_css = ['list-groups.css']
       <input class="radio flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked>
       <span>
         First radio
-        <small class="d-block text-body-secondary">With support text underneath to add more detail</small>
+        <small class="d-block fg-2">With support text underneath to add more detail</small>
       </span>
     </label>
     <label class="list-group-item d-flex gap-2">
       <input class="radio flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios2" value="">
       <span>
         Second radio
-        <small class="d-block text-body-secondary">Some other text goes here</small>
+        <small class="d-block fg-2">Some other text goes here</small>
       </span>
     </label>
     <label class="list-group-item d-flex gap-2">
       <input class="radio flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios3" value="">
       <span>
         Third radio
-        <small class="d-block text-body-secondary">And we end with another snippet of text</small>
+        <small class="d-block fg-2">And we end with another snippet of text</small>
       </span>
     </label>
   </div>
@@ -138,7 +138,7 @@ export const extra_css = ['list-groups.css']
       </div>
       <span class="pt-1 form-checked-content">
         <strong>Finish sales report</strong>
-        <small class="d-block text-body-secondary">
+        <small class="d-block fg-2">
           <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use href="#calendar-event"/></svg>
           1:00–2:00pm
         </small>
@@ -154,7 +154,7 @@ export const extra_css = ['list-groups.css']
       </div>
       <span class="pt-1 form-checked-content">
         <strong>Weekly All Hands</strong>
-        <small class="d-block text-body-secondary">
+        <small class="d-block fg-2">
           <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use href="#calendar-event"/></svg>
           2:00–2:30pm
         </small>
@@ -170,7 +170,7 @@ export const extra_css = ['list-groups.css']
       </div>
       <span class="pt-1 form-checked-content">
         <strong>Out of office</strong>
-        <small class="d-block text-body-secondary">
+        <small class="d-block fg-2">
           <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Reminder"><use href="#alarm"/></svg>
           Tomorrow
         </small>
@@ -186,7 +186,7 @@ export const extra_css = ['list-groups.css']
       </div>
       <span class="pt-1 form-checked-content">
         <span contenteditable="true" class="w-100">Add new task...</span>
-        <small class="d-block text-body-secondary">
+        <small class="d-block fg-2">
           <svg class="bi me-1" width="1em" height="1em" aria-hidden="true"><use href="#list-check"/></svg>
           Choose list...
         </small>
diff --git a/site/src/assets/examples/masonry/index.astro b/site/src/assets/examples/masonry/index.astro
index be30c72b73db..496c592563de 100644
--- a/site/src/assets/examples/masonry/index.astro
+++ b/site/src/assets/examples/masonry/index.astro
@@ -38,7 +38,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
           <blockquote class="blockquote">
             <p>A well-known quote, contained in a blockquote element.</p>
           </blockquote>
-          <figcaption class="blockquote-footer mb-0 text-body-secondary">
+          <figcaption class="blockquote-footer mb-0 fg-2">
             Someone famous in <cite title="Source Title">Source Title</cite>
           </figcaption>
         </figure>
@@ -50,7 +50,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         <div class="card-body">
           <h5 class="card-title">Card title</h5>
           <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-          <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+          <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
         </div>
       </div>
     </div>
@@ -71,7 +71,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         <div class="card-body">
           <h5 class="card-title">Card title</h5>
           <p class="card-text">This card has a regular title and short paragraph of text below it.</p>
-          <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+          <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
         </div>
       </div>
     </div>
@@ -86,7 +86,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
           <blockquote class="blockquote">
             <p>A well-known quote, contained in a blockquote element.</p>
           </blockquote>
-          <figcaption class="blockquote-footer mb-0 text-body-secondary">
+          <figcaption class="blockquote-footer mb-0 fg-2">
             Someone famous in <cite title="Source Title">Source Title</cite>
           </figcaption>
         </figure>
@@ -97,7 +97,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         <div class="card-body">
           <h5 class="card-title">Card title</h5>
           <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
-          <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+          <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
         </div>
       </div>
     </div>
diff --git a/site/src/assets/examples/menus/index.astro b/site/src/assets/examples/menus/index.astro
index a60cca4a62f3..13312292f8d4 100644
--- a/site/src/assets/examples/menus/index.astro
+++ b/site/src/assets/examples/menus/index.astro
@@ -199,7 +199,7 @@ export const extra_css = ['menus.css']
             <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-short"/></svg>
           </button>
         </div>
-        <div class="cal-weekdays text-body-secondary">
+        <div class="cal-weekdays fg-2">
           <div class="cal-weekday">Sun</div>
           <div class="cal-weekday">Mon</div>
           <div class="cal-weekday">Tue</div>
@@ -278,7 +278,7 @@ export const extra_css = ['menus.css']
             <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-short"/></svg>
           </button>
         </div>
-        <div class="cal-weekdays text-body-secondary">
+        <div class="cal-weekdays fg-2">
           <div class="cal-weekday">Sun</div>
           <div class="cal-weekday">Mon</div>
           <div class="cal-weekday">Tue</div>
diff --git a/site/src/assets/examples/pricing/index.astro b/site/src/assets/examples/pricing/index.astro
index 63e69a2c263e..9e8bcbf42fe9 100644
--- a/site/src/assets/examples/pricing/index.astro
+++ b/site/src/assets/examples/pricing/index.astro
@@ -30,7 +30,7 @@ export const extra_css = ['pricing.css']
 
     <div class="pricing-header p-3 md:pb-4 mx-auto text-center">
       <h1 class="display-4 fw-normal text-body-emphasis">Pricing</h1>
-      <p class="fs-5 text-body-secondary">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
+      <p class="fs-5 fg-2">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
     </div>
   </header>
 
@@ -42,7 +42,7 @@ export const extra_css = ['pricing.css']
             <h4 class="my-0 fw-normal">Free</h4>
           </div>
           <div class="card-body">
-            <h1 class="card-title pricing-card-title">$0<small class="text-body-secondary fw-light">/mo</small></h1>
+            <h1 class="card-title pricing-card-title">$0<small class="fg-2 fw-light">/mo</small></h1>
             <ul class="list-unstyled mt-3 mb-4">
               <li>10 users included</li>
               <li>2 GB of storage</li>
@@ -59,7 +59,7 @@ export const extra_css = ['pricing.css']
             <h4 class="my-0 fw-normal">Pro</h4>
           </div>
           <div class="card-body">
-            <h1 class="card-title pricing-card-title">$15<small class="text-body-secondary fw-light">/mo</small></h1>
+            <h1 class="card-title pricing-card-title">$15<small class="fg-2 fw-light">/mo</small></h1>
             <ul class="list-unstyled mt-3 mb-4">
               <li>20 users included</li>
               <li>10 GB of storage</li>
@@ -76,7 +76,7 @@ export const extra_css = ['pricing.css']
             <h4 class="my-0 fw-normal">Enterprise</h4>
           </div>
           <div class="card-body">
-            <h1 class="card-title pricing-card-title">$29<small class="text-body-secondary fw-light">/mo</small></h1>
+            <h1 class="card-title pricing-card-title">$29<small class="fg-2 fw-light">/mo</small></h1>
             <ul class="list-unstyled mt-3 mb-4">
               <li>30 users included</li>
               <li>15 GB of storage</li>
@@ -150,7 +150,7 @@ export const extra_css = ['pricing.css']
     <div class="row">
       <div class="col-12 md:col">
         <img class="mb-2" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="24" height="19">
-        <small class="d-block mb-3 text-body-secondary">&copy; 2017–{new Date().getFullYear()}</small>
+        <small class="d-block mb-3 fg-2">&copy; 2017–{new Date().getFullYear()}</small>
       </div>
       <div class="col-6 md:col">
         <h5>Features</h5>
diff --git a/site/src/assets/examples/product/index.astro b/site/src/assets/examples/product/index.astro
index 9ad502f8ae11..4eb5a858d354 100644
--- a/site/src/assets/examples/product/index.astro
+++ b/site/src/assets/examples/product/index.astro
@@ -143,7 +143,7 @@ export const extra_css = ['product.css']
   <div class="row">
     <div class="col-12 md:col">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
-      <small class="d-block mb-3 text-body-secondary">&copy; 2017–{new Date().getFullYear()}</small>
+      <small class="d-block mb-3 fg-2">&copy; 2017–{new Date().getFullYear()}</small>
     </div>
     <div class="col-6 md:col">
       <h5>Features</h5>
diff --git a/site/src/assets/examples/sidebars/index.astro b/site/src/assets/examples/sidebars/index.astro
index 70f46652e27d..36e9718c25f6 100644
--- a/site/src/assets/examples/sidebars/index.astro
+++ b/site/src/assets/examples/sidebars/index.astro
@@ -270,14 +270,14 @@ export const extra_js = [{src: 'sidebars.js'}]
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-body-secondary">Tues</small>
+          <small class="fg-2">Tues</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-body-secondary">Mon</small>
+          <small class="fg-2">Mon</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
@@ -285,63 +285,63 @@ export const extra_js = [{src: 'sidebars.js'}]
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-body-secondary">Wed</small>
+          <small class="fg-2">Wed</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-body-secondary">Tues</small>
+          <small class="fg-2">Tues</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-body-secondary">Mon</small>
+          <small class="fg-2">Mon</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-body-secondary">Wed</small>
+          <small class="fg-2">Wed</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-body-secondary">Tues</small>
+          <small class="fg-2">Tues</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-body-secondary">Mon</small>
+          <small class="fg-2">Mon</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-body-secondary">Wed</small>
+          <small class="fg-2">Wed</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-body-secondary">Tues</small>
+          <small class="fg-2">Tues</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-body-secondary">Mon</small>
+          <small class="fg-2">Mon</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
diff --git a/site/src/assets/examples/sidebars/sidebars.js b/site/src/assets/examples/sidebars/sidebars.js
index 072c38e85b74..6b3177aa433e 100644
--- a/site/src/assets/examples/sidebars/sidebars.js
+++ b/site/src/assets/examples/sidebars/sidebars.js
@@ -1,6 +1,6 @@
 import { Tooltip } from '../../dist/js/bootstrap.bundle.js'
 
-const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+const tooltipTriggerList = [...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
 tooltipTriggerList.forEach(tooltipTriggerEl => {
   new Tooltip(tooltipTriggerEl)
 })
diff --git a/site/src/assets/examples/sign-in/index.astro b/site/src/assets/examples/sign-in/index.astro
index 016dd15fe62b..5b937c184bf9 100644
--- a/site/src/assets/examples/sign-in/index.astro
+++ b/site/src/assets/examples/sign-in/index.astro
@@ -33,6 +33,6 @@ export const body_class = 'd-flex align-items-center py-4 bg-body-tertiary'
       </label>
     </div>
     <button class="btn-solid theme-primary w-100 py-2" type="submit">Sign in</button>
-    <p class="mt-5 mb-3 text-body-secondary">&copy; 2017–{new Date().getFullYear()}</p>
+    <p class="mt-5 mb-3 fg-2">&copy; 2017–{new Date().getFullYear()}</p>
   </form>
 </main>
diff --git a/site/src/assets/examples/starter-template/index.astro b/site/src/assets/examples/starter-template/index.astro
index ea7bf20d55f9..d51559fad856 100644
--- a/site/src/assets/examples/starter-template/index.astro
+++ b/site/src/assets/examples/starter-template/index.astro
@@ -102,7 +102,7 @@ export const title = 'Starter Template'
       </div>
     </div>
   </main>
-  <footer class="pt-5 my-5 text-body-secondary border-top">
+  <footer class="pt-5 my-5 fg-2 border-top">
     Created by the Bootstrap team &middot; &copy; {new Date().getFullYear()}
   </footer>
 </div>
diff --git a/site/src/assets/examples/sticky-footer-navbar/index.astro b/site/src/assets/examples/sticky-footer-navbar/index.astro
index a8087f73db89..2b248be0b9b3 100644
--- a/site/src/assets/examples/sticky-footer-navbar/index.astro
+++ b/site/src/assets/examples/sticky-footer-navbar/index.astro
@@ -47,6 +47,6 @@ export const body_class = 'd-flex flex-column h-100'
 
 <footer class="footer mt-auto py-3 bg-body-tertiary">
   <div class="container">
-    <span class="text-body-secondary">Place sticky footer content here.</span>
+    <span class="fg-2">Place sticky footer content here.</span>
   </div>
 </footer>
diff --git a/site/src/assets/examples/sticky-footer/index.astro b/site/src/assets/examples/sticky-footer/index.astro
index b436ad0c4d9a..fb7ccf8d1ef4 100644
--- a/site/src/assets/examples/sticky-footer/index.astro
+++ b/site/src/assets/examples/sticky-footer/index.astro
@@ -18,6 +18,6 @@ export const body_class = 'd-flex flex-column h-100'
 
 <footer class="footer mt-auto py-3 bg-body-tertiary">
   <div class="container">
-    <span class="text-body-secondary">Place sticky footer content here.</span>
+    <span class="fg-2">Place sticky footer content here.</span>
   </div>
 </footer>
diff --git a/site/src/assets/stackblitz.js b/site/src/assets/stackblitz.js
index 1ca38d1949ef..a944ef8a0053 100644
--- a/site/src/assets/stackblitz.js
+++ b/site/src/assets/stackblitz.js
@@ -31,7 +31,7 @@ export default () => {
       const htmlSnippet = exampleEl.innerHTML
       const jsSnippet = codeSnippet.querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
       // Get extra classes for this example
-      const classes = Array.from(exampleEl.classList).join(' ')
+      const classes = [...exampleEl.classList].join(' ')
 
       openBootstrapSnippet(htmlSnippet, jsSnippet, classes)
     })
diff --git a/site/src/components/footer/Footer.astro b/site/src/components/footer/Footer.astro
index fc51526c84b3..cf018d610295 100644
--- a/site/src/components/footer/Footer.astro
+++ b/site/src/components/footer/Footer.astro
@@ -5,7 +5,7 @@ import { getVersionedDocsPath } from '@libs/path'
 ---
 
 <footer class="bd-footer py-4 md:py-5 mt-5 bg-body-tertiary">
-  <div class="container py-4 md:py-5 px-4 md:px-3 text-body-secondary">
+  <div class="container py-4 md:py-5 px-4 md:px-3 fg-2">
     <div class="row">
       <div class="lg:col-3 mb-3">
         <a
diff --git a/site/src/components/home/ComponentUtilities.astro b/site/src/components/home/ComponentUtilities.astro
index e5c0644e7ada..47c155329dfa 100644
--- a/site/src/components/home/ComponentUtilities.astro
+++ b/site/src/components/home/ComponentUtilities.astro
@@ -8,7 +8,7 @@ import Code from '@shortcodes/Code.astro'
     <div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);">
       <svg class="bi fs-1" aria-hidden="true"><use href="#menu-button-wide-fill"></use></svg>
     </div>
-    <svg class="bi me-2 fs-2 text-body-secondary" aria-hidden="true"><use href="#plus"></use></svg>
+    <svg class="bi me-2 fs-2 fg-2" aria-hidden="true"><use href="#plus"></use></svg>
     <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);">
       <svg class="bi fs-1" aria-hidden="true"><use href="#braces-asterisk"></use></svg>
     </div>
diff --git a/site/src/components/home/MastHead.astro b/site/src/components/home/MastHead.astro
index f4341b7d7185..f4547bc4caf7 100644
--- a/site/src/components/home/MastHead.astro
+++ b/site/src/components/home/MastHead.astro
@@ -45,7 +45,7 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
           Read the docs
         </a>
       </div>
-      <p class="text-body-secondary mb-0">
+      <p class="fg-2 mb-0">
         Currently <strong>v{getConfig().current_version}</strong>
         <span class="px-1">&middot;</span>
         <a href={getVersionedDocsPath('getting-started/install')} class="link-secondary">Download</a>
diff --git a/site/src/components/home/Plugins.astro b/site/src/components/home/Plugins.astro
index 4fa8f967b20a..37a2b97a5a4e 100644
--- a/site/src/components/home/Plugins.astro
+++ b/site/src/components/home/Plugins.astro
@@ -74,7 +74,7 @@ const plugins = getData('plugins')
               <div class="sm:col-6 mb-2">
                 <a class="d-block lg:pe-4 text-decoration-none lh-sm" href={getVersionedDocsPath(plugin.link)}>
                   <h4 class="mb-0 fs-5 fw-semibold">{plugin.name}</h4>
-                  <small class="text-body-secondary">{plugin.description}</small>
+                  <small class="fg-2">{plugin.description}</small>
                 </a>
               </div>
             )
diff --git a/site/src/content/docs/about/brand.mdx b/site/src/content/docs/about/brand.mdx
index 8b562725f504..8aaf46934ed1 100644
--- a/site/src/content/docs/about/brand.mdx
+++ b/site/src/content/docs/about/brand.mdx
@@ -35,7 +35,7 @@ Bootstrap should always be referred to as just **Bootstrap**. No capital _s_.
     <strong class="text-success">Correct</strong>
   </div>
   <div class="bd-brand-item w-100 px-2 py-5">
-    <div class="h3 text-body-secondary">BootStrap</div>
+    <div class="h3 fg-2">BootStrap</div>
     <strong class="text-danger">Incorrect</strong>
   </div>
 </div>
diff --git a/site/src/content/docs/components/card.mdx b/site/src/content/docs/components/card.mdx
index cb963aefa9a8..43d64d28fab2 100644
--- a/site/src/content/docs/components/card.mdx
+++ b/site/src/content/docs/components/card.mdx
@@ -8,7 +8,7 @@ css_media: viewport
 
 import { getData } from '@libs/data'
 
-Cards are flexible and extensible content containers. They include options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. **Cards have no fixed width to start**, so they’ll naturally fill the full width of its parent element, or slot into your grid columns. This is easily customized with our various [sizing options](#width).
+Cards are flexible and extensible content containers with support for headers and footers, a wide variety of content, contextual background colors, and additional display options. **Cards have no fixed width to start**, so they’ll naturally fill the width of their parent element, or slot into your grid columns.
 
 <Example code={`<section class="card" style="width: 280px">
     <Placeholder width="100%" height="180" class="card-img-top" text="Image cap" />
@@ -25,9 +25,11 @@ Cards are built with as little markup and styles as possible, but still manage t
 
 - Cards are built with flexbox, so they offer easy alignment via [flexbox utilities]([[docsref:/utilities/flex]]) and [grid column classes]([[docsref:/layout/grid#column-classes]]).
 
-- Cards have no `margin` by default, so use [margin utilities]([[docsref:/utilities/margin]]) as needed.
+- **Cards require both `.card` and `.card-body`** to best support perfect borders, rounded corners, and various content and layout options.
 
-- Cards are broken down into three categories of sub-components: header, body, and footer. Headers and footers are optional while the body is required. Images can also serve as headers and footers.
+- Cards have no `margin` by default, so use [margin utilities]([[docsref:/utilities/margin]]) or [gap utilities]([[docsref:/utilities/gap]]) as needed.
+
+- Cards are broken down into three categories of sub-components: header, body, and footer. Headers and footers are optional while **the body is required**. Images can also serve as headers and footers.
 
 - Card and card body are both `flex` containers, so content can be aligned and stretched as needed with utilities and whatever HTML you require.
 
@@ -37,8 +39,6 @@ Cards are built with as little markup and styles as possible, but still manage t
 
 ## Content types
 
-Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.
-
 ### Body
 
 The building block of a card is the `.card-body`. Use it whenever you need a padded section within a card.
@@ -49,6 +49,12 @@ The building block of a card is the `.card-body`. Use it whenever you need a pad
     </div>
   </div>`} />
 
+For simple cards, you can use the `.card-body` class directly on the card element.
+
+<Example code={`<div class="card card-body">
+    This is some text within a card body.
+  </div>`} />
+
 ### Titles, text, and links
 
 Titles, text, and links within cards all have required class names for managing alignment. Size and color is up to you to manage.
@@ -101,7 +107,7 @@ When combined with other card sub-components, use `.card-list` to manage borders
     <div class="card-header">
       Featured
     </div>
-    <ul class="list-group list-group-flush card-list">
+    <ul class="list-group list-group-flush card-list"><!-- [!code highlight] -->
       <li class="list-group-item">An item</li>
       <li class="list-group-item">A second item</li>
       <li class="list-group-item">A third item</li>
@@ -109,7 +115,7 @@ When combined with other card sub-components, use `.card-list` to manage borders
   </div>`} />
 
 <Example code={`<div class="card" style="width: 18rem;">
-    <ul class="list-group list-group-flush card-list">
+    <ul class="list-group list-group-flush card-list"><!-- [!code highlight] -->
       <li class="list-group-item">An item</li>
       <li class="list-group-item">A second item</li>
       <li class="list-group-item">A third item</li>
@@ -182,16 +188,16 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
     </div>
   </div>`} />
 
-<Example code={`<div class="card text-center">
+<Example code={`<div class="card text-center"><!-- [!code highlight] -->
     <div class="card-header">
       Featured
     </div>
     <div class="card-body">
       <h4 class="card-title">Special title treatment</h4>
       <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-      <a href="#" class="btn-solid theme-primary">Go somewhere</a>
+      <a href="#" class="btn-solid theme-primary mx-auto">Go somewhere</a><!-- [!code highlight] -->
     </div>
-    <div class="card-footer text-body-secondary">
+    <div class="card-footer fg-2">
       2 days ago
     </div>
   </div>`} />
@@ -278,7 +284,7 @@ Add some navigation to a card’s header (or block) with Bootstrap’s [nav comp
     <div class="card-body">
       <h5 class="card-title">Special title treatment</h5>
       <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-      <a href="#" class="btn-solid theme-primary">Go somewhere</a>
+      <a href="#" class="btn-solid theme-primary mx-auto">Go somewhere</a>
     </div>
   </div>`} />
 
@@ -301,7 +307,7 @@ This works with `.nav-pills` as well.
     <div class="card-body">
       <h5 class="card-title">Special title treatment</h5>
       <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-      <a href="#" class="btn-solid theme-primary">Go somewhere</a>
+      <a href="#" class="btn-solid theme-primary mx-auto">Go somewhere</a>
     </div>
   </div>`} />
 
@@ -318,14 +324,14 @@ Similar to headers and footers, cards can include top and bottom “image caps
     <div class="card-body">
       <h4 class="card-title">Card title</h4>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+      <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
     </div>
   </div>
   <div class="card">
     <div class="card-body">
       <h4 class="card-title">Card title</h4>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+      <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
     </div>
     <Placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" />
   </div>`} />
@@ -356,7 +362,7 @@ Use the `.card-row` class to make a card horizontal. For image caps, use the `.c
     <div class="card-body">
       <h4 class="card-title">Card title</h4>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+      <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
     </div>
   </div>`} />
 
@@ -366,7 +372,7 @@ And with the reverse layout:
     <div class="card-body">
       <h4 class="card-title">Card title</h4>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+      <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
     </div>
     <Placeholder width="100%" height="250" text="Image" class="card-img-end" />
   </div>`} />
@@ -375,7 +381,7 @@ And with the reverse layout:
 
 Customize cards by using our theme color utilities. By default, cards use `bg` for their background and border colors when applying a theme color. Use `.card-subtle` to swap the background and border colors for a more subtle look.
 
-<Example class="d-grid grid md:grid-cols-3" code={getData('theme-colors').map((themeColor) => `<div class="card theme-${themeColor.name}">
+<Example class="d-grid grid grid-cols-1 md:grid-cols-2 gap-4" code={getData('theme-colors').map((themeColor) => `<div class="card theme-${themeColor.name}">
     <div class="card-header">${themeColor.title}</div>
     <div class="card-body">
       <h4 class="card-title">Card title</h4>
@@ -383,7 +389,7 @@ Customize cards by using our theme color utilities. By default, cards use `bg` f
     </div>
   </div>`)} customMarkup={getData('theme-colors').map((themeColor) => `<div class="card card-${themeColor.name}">…</div>`)} />
 
-<Example class="d-grid grid md:grid-cols-3" code={getData('theme-colors').map((themeColor) => `<div class="card card-subtle theme-${themeColor.name}">
+<Example class="d-grid grid grid-cols-1 md:grid-cols-2 gap-4" code={getData('theme-colors').map((themeColor) => `<div class="card card-subtle theme-${themeColor.name}">
     <div class="card-header">${themeColor.title}</div>
     <div class="card-body">
       <h4 class="card-title">Card title</h4>
@@ -412,7 +418,7 @@ Add `.card-translucent` to blur and saturate the background of a card. Header an
       <p class="card-text">Headers and footers are also made translucent to maintain a consistent look.</p>
       <a href="#" class="btn-solid theme-primary">Go somewhere</a>
     </div>
-    <div class="card-footer text-body-secondary">
+    <div class="card-footer fg-2">
       2 days ago
     </div>
   </div>`} />
@@ -431,7 +437,7 @@ Use card groups to render cards as a single, attached element with equal width a
       <div class="card-body">
         <h4 class="card-title">Card title</h4>
         <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+        <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
       </div>
     </div>
     <div class="card">
@@ -439,7 +445,7 @@ Use card groups to render cards as a single, attached element with equal width a
       <div class="card-body">
         <h4 class="card-title">Card title</h4>
         <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+        <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
       </div>
     </div>
     <div class="card">
@@ -447,7 +453,7 @@ Use card groups to render cards as a single, attached element with equal width a
       <div class="card-body">
         <h4 class="card-title">Card title</h4>
         <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
-        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+        <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
       </div>
     </div>
   </div>`} />
@@ -462,7 +468,7 @@ When using card groups with footers, their content will automatically line up.
         <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
       </div>
       <div class="card-footer">
-        <small class="text-body-secondary">Last updated 3 mins ago</small>
+        <small class="fg-2">Last updated 3 mins ago</small>
       </div>
     </div>
     <div class="card">
@@ -472,7 +478,7 @@ When using card groups with footers, their content will automatically line up.
         <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
       </div>
       <div class="card-footer">
-        <small class="text-body-secondary">Last updated 3 mins ago</small>
+        <small class="fg-2">Last updated 3 mins ago</small>
       </div>
     </div>
     <div class="card">
@@ -482,7 +488,7 @@ When using card groups with footers, their content will automatically line up.
         <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
       </div>
       <div class="card-footer">
-        <small class="text-body-secondary">Last updated 3 mins ago</small>
+        <small class="fg-2">Last updated 3 mins ago</small>
       </div>
     </div>
   </div>`} />
@@ -623,7 +629,7 @@ Just like with card groups, card footers will automatically line up.
           <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
         </div>
         <div class="card-footer">
-          <small class="text-body-secondary">Last updated 3 mins ago</small>
+          <small class="fg-2">Last updated 3 mins ago</small>
         </div>
       </div>
     </div>
@@ -635,7 +641,7 @@ Just like with card groups, card footers will automatically line up.
           <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
         </div>
         <div class="card-footer">
-          <small class="text-body-secondary">Last updated 3 mins ago</small>
+          <small class="fg-2">Last updated 3 mins ago</small>
         </div>
       </div>
     </div>
@@ -647,16 +653,12 @@ Just like with card groups, card footers will automatically line up.
           <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
         </div>
         <div class="card-footer">
-          <small class="text-body-secondary">Last updated 3 mins ago</small>
+          <small class="fg-2">Last updated 3 mins ago</small>
         </div>
       </div>
     </div>
   </div>`} />
 
-### Masonry
-
-In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we’ve made a [demo example]([[docsref:/examples/masonry]]) to help you get started.
-
 ## CSS
 
 ### Variables
diff --git a/site/src/content/docs/components/list-group.mdx b/site/src/content/docs/components/list-group.mdx
index 32a90c9f9372..ba40744078f8 100644
--- a/site/src/content/docs/components/list-group.mdx
+++ b/site/src/content/docs/components/list-group.mdx
@@ -187,18 +187,18 @@ Add nearly any HTML within, even for linked list groups like the one below, with
     <a href="#" class="list-group-item list-group-item-action">
       <div class="d-flex w-100 justify-content-between">
         <h5 class="mb-1">List group item heading</h5>
-        <small class="text-body-secondary">3 days ago</small>
+        <small class="fg-2">3 days ago</small>
       </div>
       <p class="mb-1">Some placeholder content in a paragraph.</p>
-      <small class="text-body-secondary">And some muted small print.</small>
+      <small class="fg-2">And some muted small print.</small>
     </a>
     <a href="#" class="list-group-item list-group-item-action">
       <div class="d-flex w-100 justify-content-between">
         <h5 class="mb-1">List group item heading</h5>
-        <small class="text-body-secondary">3 days ago</small>
+        <small class="fg-2">3 days ago</small>
       </div>
       <p class="mb-1">Some placeholder content in a paragraph.</p>
-      <small class="text-body-secondary">And some muted small print.</small>
+      <small class="fg-2">And some muted small print.</small>
     </a>
   </div>`} />
 
diff --git a/site/src/content/docs/components/menu.mdx b/site/src/content/docs/components/menu.mdx
index 6e6856b3ecf5..7a74ae41af87 100644
--- a/site/src/content/docs/components/menu.mdx
+++ b/site/src/content/docs/components/menu.mdx
@@ -332,7 +332,7 @@ Separate groups of related menu items with a divider.
 
 Place any freeform text within a menu with text and use [margin]([[docsref:/utilities/margin]]) and [padding]([[docsref:/utilities/padding]]) utilities. Note that you'll likely need additional sizing styles to constrain the menu width.
 
-<Example code={`<div class="menu show position-static p-3 text-body-secondary"
+<Example code={`<div class="menu show position-static p-3 fg-2"
        style="--bs-menu-min-width: 240px;">
     <p>
       Some example text that's free-flowing within the menu.
diff --git a/site/src/content/docs/components/navbar.mdx b/site/src/content/docs/components/navbar.mdx
index f2e4b3f2457d..3e1b7bf1e41e 100644
--- a/site/src/content/docs/components/navbar.mdx
+++ b/site/src/content/docs/components/navbar.mdx
@@ -718,7 +718,7 @@ Sometimes you want to use the drawer plugin to trigger a container element for c
       <CloseButton dismiss="drawer" />
     </div>
     <div class="drawer-body">
-      <span class="text-body-secondary">Toggleable via the navbar toggler.</span>
+      <span class="fg-2">Toggleable via the navbar toggler.</span>
     </div>
   </dialog>
   <nav class="navbar bg-body" data-bs-theme="dark">
diff --git a/site/src/content/docs/components/toasts.mdx b/site/src/content/docs/components/toasts.mdx
index 32ba562c6c81..df14d1c1fc81 100644
--- a/site/src/content/docs/components/toasts.mdx
+++ b/site/src/content/docs/components/toasts.mdx
@@ -93,7 +93,7 @@ Toasts are slightly translucent to blend in with what’s below them.
     <div class="toast-header">
       <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
       <strong class="me-auto">Bootstrap</strong>
-      <small class="text-body-secondary">11 mins ago</small>
+      <small class="fg-2">11 mins ago</small>
       <CloseButton dismiss="toast" />
     </div>
     <div class="toast-body">
@@ -107,7 +107,7 @@ Add `.toast-translucent` to enhance the translucency with a backdrop blur and sa
     <div class="toast-header">
       <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
       <strong class="me-auto">Bootstrap</strong>
-      <small class="text-body-secondary">11 mins ago</small>
+      <small class="fg-2">11 mins ago</small>
       <CloseButton dismiss="toast" />
     </div>
     <div class="toast-body">
@@ -124,7 +124,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
       <div class="toast-header">
         <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
         <strong class="me-auto">Bootstrap</strong>
-        <small class="text-body-secondary">just now</small>
+        <small class="fg-2">just now</small>
         <CloseButton dismiss="toast" />
       </div>
       <div class="toast-body">
@@ -136,7 +136,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
       <div class="toast-header">
         <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
         <strong class="me-auto">Bootstrap</strong>
-        <small class="text-body-secondary">2 seconds ago</small>
+        <small class="fg-2">2 seconds ago</small>
         <CloseButton dismiss="toast" />
       </div>
       <div class="toast-body">
@@ -277,7 +277,7 @@ For systems that generate more notifications, consider using a wrapping element
         <div class="toast-header">
           <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
           <strong class="me-auto">Bootstrap</strong>
-          <small class="text-body-secondary">just now</small>
+          <small class="fg-2">just now</small>
           <CloseButton dismiss="toast" />
         </div>
         <div class="toast-body">
@@ -289,7 +289,7 @@ For systems that generate more notifications, consider using a wrapping element
         <div class="toast-header">
           <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
           <strong class="me-auto">Bootstrap</strong>
-          <small class="text-body-secondary">2 seconds ago</small>
+          <small class="fg-2">2 seconds ago</small>
           <CloseButton dismiss="toast" />
         </div>
         <div class="toast-body">
diff --git a/site/src/content/docs/layout/containers.mdx b/site/src/content/docs/layout/containers.mdx
index 8d2465e19e57..d3c7863f9695 100644
--- a/site/src/content/docs/layout/containers.mdx
+++ b/site/src/content/docs/layout/containers.mdx
@@ -21,13 +21,13 @@ See them in action and compare them in our [Grid example]([[docsref:/examples/gr
 <BsTable>
 |  | Extra small<div class="fw-normal">&lt;576px</div> | Small<div class="fw-normal">&ge;576px</div> | Medium<div class="fw-normal">&ge;768px</div> | Large<div class="fw-normal">&ge;1024px</div> | X-Large<div class="fw-normal">&ge;1280px</div> | 2X-Large<div class="fw-normal">&ge;1536px</div> |
 | --- | --- | --- | --- | --- | --- | --- |
-| `.container` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1440px |
-| `.sm:container` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1440px |
-| `.md:container` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1440px |
-| `.lg:container` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 960px | 1140px | 1440px |
-| `.xl:container` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1140px | 1440px |
-| `.2xl:container` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1440px |
-| `.container-fluid` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> |
+| `.container` | <span class="fg-2">100%</span> | 540px | 720px | 960px | 1140px | 1440px |
+| `.sm:container` | <span class="fg-2">100%</span> | 540px | 720px | 960px | 1140px | 1440px |
+| `.md:container` | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | 720px | 960px | 1140px | 1440px |
+| `.lg:container` | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | 960px | 1140px | 1440px |
+| `.xl:container` | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | 1140px | 1440px |
+| `.2xl:container` | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | 1440px |
+| `.container-fluid` | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> |
 </BsTable>
 
 ## Default container
diff --git a/site/src/layouts/partials/ExamplesMain.astro b/site/src/layouts/partials/ExamplesMain.astro
index ec27a077047a..b7566559345d 100644
--- a/site/src/layouts/partials/ExamplesMain.astro
+++ b/site/src/layouts/partials/ExamplesMain.astro
@@ -31,7 +31,7 @@ import { getSlug } from '@libs/utils'
                         {example.name}
                       </a>
                     </h3>
-                    <p class="text-body-secondary">{example.description}</p>
+                    <p class="fg-2">{example.description}</p>
                     <p>
                       <a
                         class="icon-link small link-secondary link-offset-1"
@@ -80,7 +80,7 @@ import { getSlug } from '@libs/utils'
                   />
                   <h3 class="h5 mb-1">{example.name}</h3>
                 </a>
-                <p class="text-body-secondary">{example.description}</p>
+                <p class="fg-2">{example.description}</p>
               </article>
             )
           })}
diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index 8c2d5998ce78..346b2f53d08f 100644
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -1,4 +1,3 @@
-@use "../../../scss/config" as *;
 @use "../../../scss/layout/breakpoints" as *;
 @use "../../../scss/mixins/border-radius" as *;
 
@@ -82,7 +81,7 @@
     }
 
     > hr:last-child {
-      margin-bottom: $spacer;
+      margin-bottom: var(--spacer);
     }
 
     // Images