diff --git a/package.json b/package.json
index 7caad0313a..c835c546f0 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,6 @@
     "build-site-for-staging": "PRODUCTION=false eleventy",
     "build-site-for-production": "PRODUCTION=true OPTIMIZE=true eleventy"
   },
-  "dependencies": {
-    "bootstrap-scss": "^4.6.2"
-  },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
     "firebase-tools": "^13.22.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f1525bf601..4ac95de0ec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,10 +7,6 @@ settings:
 importers:
 
   .:
-    dependencies:
-      bootstrap-scss:
-        specifier: ^4.6.2
-        version: 4.6.2
     devDependencies:
       '@11ty/eleventy':
         specifier: ^3.0.0
@@ -601,9 +597,6 @@ packages:
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
-  bootstrap-scss@4.6.2:
-    resolution: {integrity: sha512-emVpCI/S9aeFV1/qqKrztPZLiyow4XfRWLxOAu2SR/67Vau0y6IHNRukQrTx8+OUQ+aVPDhql40eDHSxGoAceA==}
-
   boxen@5.1.2:
     resolution: {integrity: sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==}
     engines: {node: '>=10'}
@@ -3686,8 +3679,6 @@ snapshots:
 
   boolbase@1.0.0: {}
 
-  bootstrap-scss@4.6.2: {}
-
   boxen@5.1.2:
     dependencies:
       ansi-align: 3.0.1
diff --git a/src/_11ty/plugins/highlight.js b/src/_11ty/plugins/highlight.js
index 56325784d1..c0fe5a0386 100644
--- a/src/_11ty/plugins/highlight.js
+++ b/src/_11ty/plugins/highlight.js
@@ -1,4 +1,5 @@
 import {getSingletonHighlighter} from 'shiki';
+import dashDarkTheme from '../syntax/dash-dark.js';
 import dashLightTheme from '../syntax/dash-light.js';
 
 const _terminalLanguages = {
@@ -49,7 +50,7 @@ export async function configureHighlighting(markdown) {
       'csharp',
       'cmake',
     ],
-    themes: [dashLightTheme],
+    themes: [dashLightTheme, dashDarkTheme],
   });
 
   markdown.renderer.rules.fence = function (tokens, index) {
@@ -168,7 +169,10 @@ function _highlight(
 
   return highlighter.codeToHtml(content, {
     lang: language,
-    theme: 'dash-light',
+    themes: {
+      light: 'dash-light',
+      dark: 'dash-dark',
+    },
     transformers: [
       {
         pre(preElement) {
diff --git a/src/_11ty/plugins/markdown.js b/src/_11ty/plugins/markdown.js
index dcb28f331f..cf35aeacb1 100644
--- a/src/_11ty/plugins/markdown.js
+++ b/src/_11ty/plugins/markdown.js
@@ -25,7 +25,7 @@ export const markdown = (() => {
         assistiveText: title => `Link to '${title}' section`,
         symbol: '#',
         class: 'heading-link',
-        wrapper: ['<div class="header-wrapper">', '</div>']
+        wrapper: ['<div class="heading-wrapper">', '</div>']
       }),
     });
 
@@ -67,15 +67,19 @@ function _registerAside(markdown, id, defaultTitle, icon, style) {
     render: function (tokens, index) {
       if (tokens[index].nesting === 1) {
         const parsedArgs = /\s+(.*)/.exec(tokens[index].info);
-
         const title = parsedArgs?.[1] ?? defaultTitle;
-        return `<aside class="alert ${style}">
-<div class="alert-header">
-${icon !== null ? `<i class="material-symbols" aria-hidden="true">${icon}</i>` : ''}
-<span>${title ?? ''}</span>
-</div>
-<div class="alert-content">
-`;
+
+        let aside = `<aside class="alert ${style}">`;
+        if (title !== null) {
+          aside += `<div class="alert-header">
+            ${icon !== null ? `<i class="material-symbols" aria-hidden="true">${icon}</i>` : ''}
+            <span>${title}</span>
+          </div>`;
+        }
+
+        aside += `<div class="alert-content">`;
+
+        return aside;
       } else {
         return '</div></aside>\n';
       }
diff --git a/src/_11ty/shortcodes.js b/src/_11ty/shortcodes.js
index 65146c0d60..f80f5b5f32 100644
--- a/src/_11ty/shortcodes.js
+++ b/src/_11ty/shortcodes.js
@@ -10,7 +10,7 @@ function _setupMedia(eleventyConfig) {
     let embedMarkup = `<iframe ${fullWidth ? 'class="full-width"' : 'width="560" height="315"'} 
         src="https://www.youtube.com/embed/${id}" title="${title}" frameborder="0" 
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
-        allowfullscreen loading="lazy"></iframe><br>`;
+        allowfullscreen loading="lazy"></iframe>`;
 
     if (!skipAlternativeLink) {
       embedMarkup += `<p><a href="https://www.youtube.com/watch/${id}" target="_blank" rel="noopener" title="Open '${title}' video in new tab">${title}</a></p>`;
diff --git a/src/_11ty/syntax/dash-dark.js b/src/_11ty/syntax/dash-dark.js
new file mode 100644
index 0000000000..4e932b9aa4
--- /dev/null
+++ b/src/_11ty/syntax/dash-dark.js
@@ -0,0 +1,140 @@
+// This is the dark mode version of the
+// syntax highlighting theme for code blocks on the website.
+// It's imported and used by `src/_11ty/plugins/highlight.js`.
+export default {
+  name: 'dash-dark',
+  colors: {
+    'editor.background': '#1D2026',
+    'editor.foreground': '#C2C6D6',
+  },
+  tokenColors: [
+    {
+      settings: {
+        background: '#1D2026',
+        foreground: '#C2C6D6',
+      },
+    },
+    {
+      scope: 'emphasis',
+      settings: {
+        fontStyle: 'italic',
+      },
+    },
+    {
+      scope: 'strong',
+      settings: {
+        fontStyle: 'bold',
+      },
+    },
+    {
+      scope: [
+        'punctuation',
+        'punctuation.separator.inheritance-clause',
+        'storage.modifier.package.java',
+      ],
+      settings: {
+        foreground: '#C2C6D6',
+      },
+    },
+    {
+      scope: ['comment', 'punctuation.definition.comment'],
+      settings: {
+        foreground: '#8b95a7',
+      },
+    },
+    {
+      scope: 'constant',
+      settings: {
+        foreground: '#1CDAC5',
+      },
+    },
+    {
+      scope: [
+        'keyword',
+        'storage.modifier',
+        'storage.type',
+        'variable.language',
+      ],
+      settings: {
+        foreground: '#E5C07B',
+      },
+    },
+    {
+      scope: [
+        'keyword.operator',
+        'string.interpolated.expression',
+        'constant.character.escape',
+      ],
+      settings: {
+        foreground: '#E1E2EC',
+      },
+    },
+    {
+      scope: ['string', 'string.interpolated', 'punctuation.definition.string'],
+      settings: {
+        foreground: '#1CDAC5',
+      },
+    },
+    {
+      scope: [
+        'entity.name.function',
+        'support.function',
+        'entity.other.attribute-name',
+      ],
+      settings: {
+        foreground: '#C678DD',
+      },
+    },
+    {
+      scope: [
+        'entity.name.class',
+        'entity.name.type',
+        'entity.name.type.class',
+        'entity.name.type.enum',
+        'entity.name.type.protocol',
+        'support.class',
+        'support.type',
+        'entity.name.tag',
+      ],
+      settings: {
+        foreground: '#61AFEF',
+      },
+    },
+    {
+      scope: ['variable', 'variable.other'],
+      settings: {
+        foreground: '#E1E2EC',
+      },
+    },
+    {
+      scope: 'markup.underline',
+      settings: {
+        fontStyle: 'underline',
+      },
+    },
+    {
+      scope: 'markup.bold',
+      settings: {
+        fontStyle: 'bold',
+      },
+    },
+    {
+      scope: 'markup.heading',
+      settings: {
+        fontStyle: 'bold',
+      },
+    },
+    {
+      scope: 'markup.italic',
+      settings: {
+        fontStyle: 'italic',
+      },
+    },
+    {
+      scope: 'markup.strikethrough',
+      settings: {
+        fontStyle: 'strikethrough',
+      },
+    },
+  ],
+};
diff --git a/src/_11ty/syntax/dash-light.js b/src/_11ty/syntax/dash-light.js
index 4508c5761c..36830228f5 100644
--- a/src/_11ty/syntax/dash-light.js
+++ b/src/_11ty/syntax/dash-light.js
@@ -4,14 +4,14 @@
 export default {
   name: 'dash-light',
   colors: {
-    'editor.background': '#F8F9FA',
-    'editor.foreground': '#222222',
+    'editor.background': '#ECEDF7',
+    'editor.foreground': '#191C22',
   },
   tokenColors: [
     {
       settings: {
-        background: '#F8F9FA',
-        foreground: '#222222',
+        background: '#ECEDF7',
+        foreground: '#191C22',
       },
     },
     {
@@ -33,19 +33,19 @@ export default {
         'storage.modifier.package.java',
       ],
       settings: {
-        foreground: '#222222',
+        foreground: '#191C22',
       },
     },
     {
       scope: ['comment', 'punctuation.definition.comment'],
       settings: {
-        foreground: '#6E6E70',
+        foreground: '#59616E',
       },
     },
     {
       scope: 'constant',
       settings: {
-        foreground: '#0c7064',
+        foreground: '#0C7064',
       },
     },
     {
@@ -56,7 +56,7 @@ export default {
         'variable.language',
       ],
       settings: {
-        foreground: '#bd2314',
+        foreground: '#BD2314',
       },
     },
     {
@@ -66,13 +66,13 @@ export default {
         'constant.character.escape',
       ],
       settings: {
-        foreground: '#222222',
+        foreground: '#191C22',
       },
     },
     {
       scope: ['string', 'string.interpolated', 'punctuation.definition.string'],
       settings: {
-        foreground: '#0c7064',
+        foreground: '#0C7064',
       },
     },
     {
@@ -103,7 +103,7 @@ export default {
     {
       scope: ['variable', 'variable.other'],
       settings: {
-        foreground: '#222222',
+        foreground: '#191C22',
       },
     },
     {
diff --git a/src/_includes/banner.html b/src/_includes/banner.html
index 6f697d4069..a62ac1a614 100644
--- a/src/_includes/banner.html
+++ b/src/_includes/banner.html
@@ -1,8 +1,6 @@
 {% comment %}
   For headings use h3 elements.
 {% endcomment -%}
-<div class="site-banner site-banner--default" role="alert">
-  <a href="https://medium.com/flutter/flutter-3-24-dart-3-5-204b7d20c45d">Flutter 3.24 and Dart 3.5</a> are here!
-  Check out <a href="/release/whats-new">what's new</a> on the website.
-</div>
+<a href="https://medium.com/flutter/flutter-3-24-dart-3-5-204b7d20c45d">Flutter 3.24 and Dart 3.5</a> are here!
+Check out <a href="/release/whats-new">what's new</a> on the website.
 
diff --git a/src/_includes/breadcrumbs.html b/src/_includes/breadcrumbs.html
index 59401753ba..9fb4b859df 100644
--- a/src/_includes/breadcrumbs.html
+++ b/src/_includes/breadcrumbs.html
@@ -12,19 +12,17 @@
 {% assign breadcrumbs = page | breadcrumbsForPage -%}
 {% if breadcrumbs -%}
 <nav class="breadcrumbs" aria-label="breadcrumb">
-  <ol class="breadcrumb-list" vocab="https://schema.org/" typeof="BreadcrumbList">
+  <ol vocab="https://schema.org/" typeof="BreadcrumbList">
     {% for crumb in breadcrumbs -%}
     <li class="breadcrumb-item {%- if forloop.last %} active {%- endif %}"
         property="itemListElement" typeof="ListItem"
         {%- if forloop.last %} aria-current="page"{% endif %}>
-      {%- comment %}Avoid spaces here, it messes up formatting{% endcomment -%}
-      <a href="{{ crumb.url | regex_replace: '/index$|/index.html$|/$' }}" property="item" typeof="WebPage">
-        {%- comment %}Avoid spaces here, it messes up formatting{% endcomment -%}
+      <a href="{{ crumb.url | regex_replace: '/index$|/index.html$|/$' }}" property="item" typeof="WebPage" {%- if forloop.last %} aria-disabled="true" {%- endif %}>
         <span property="name">{{crumb.title}}</span>
       </a>
       <meta property="position" content="{{forloop.index0}}" />
       {%- if not forloop.last %}
-      <span class="material-symbols-outlined child-icon" aria-hidden="true">chevron_right</span>
+      <span class="material-symbols child-icon" aria-hidden="true">chevron_right</span>
       {% endif %}
     </li>
     {% endfor %}
diff --git a/src/_includes/cookie-notice.html b/src/_includes/cookie-notice.html
index 27275c27c6..0c7646db60 100644
--- a/src/_includes/cookie-notice.html
+++ b/src/_includes/cookie-notice.html
@@ -1,9 +1,7 @@
 <section id="cookie-notice">
-  <div class="container">
-    <p>docs.flutter.dev uses cookies from Google to deliver and
-      enhance the quality of its services and to analyze traffic.
-      <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">Learn more</a>.
-    </p>
-    <button id="cookie-consent" class="btn btn-primary">OK, got it</button>
-  </div>
+  <p>docs.flutter.dev uses cookies from Google to deliver and
+    enhance the quality of its services and to analyze traffic.
+    <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">Learn more</a>.
+  </p>
+  <button id="cookie-consent" class="filled-button">OK, got it</button>
 </section>
diff --git a/src/_includes/docs/android-ios-figure-pair.md b/src/_includes/docs/android-ios-figure-pair.md
index c30022e790..c3d7b67f55 100644
--- a/src/_includes/docs/android-ios-figure-pair.md
+++ b/src/_includes/docs/android-ios-figure-pair.md
@@ -1,4 +1,4 @@
-<figure class="site-figure">
+<figure>
   <div class="site-figure-container">
       <img src='/assets/images/docs/get-started/android/{{include.image}}' alt='{{include.alt}} on Android' class='{{include.class}}'>
       <figcaption class="figure-caption">Android</figcaption>
diff --git a/src/_includes/docs/app-figure.md b/src/_includes/docs/app-figure.md
index 65c39d9ffb..f774ec9019 100644
--- a/src/_includes/docs/app-figure.md
+++ b/src/_includes/docs/app-figure.md
@@ -11,7 +11,7 @@
 {% assign height = '' -%}
 {% endif -%}
 
-<figure class="site-figure {{class}}">
+<figure class="{{class}}">
   <div class="site-figure-container">
     <img src='/assets/images/docs/{{image}}' class='{{img-class}}' alt='{{alt}}' style='{{width}} {{height}}'>
     {% if caption -%}
diff --git a/src/_includes/docs/catalog-page-material.md b/src/_includes/docs/catalog-page-material.md
index a9c14e8068..06adc41faa 100644
--- a/src/_includes/docs/catalog-page-material.md
+++ b/src/_includes/docs/catalog-page-material.md
@@ -16,15 +16,15 @@
   {% for comp in components -%}
   <div class="card">
     <a href="{{comp.link}}">
-      <div class="card-image-holder-material-3" style="--bg-color: {{sub.color}}">
-        <img alt="Rendered example of the {{comp.name}} Material widget." src="{{comp.image.src}}">
-        <div class="card-image-material-3-hover">
+      <div class="card-image-holder" style="--bg-color: {{sub.color}}; height: 8rem;">
+        <div class="card-image-hover">
           <img alt="Decorated background for material widget visualizations." src="{{comp.hoverBackground.src}}" aria-hidden="true">
         </div>
+        <img alt="Rendered example of the {{comp.name}} Material widget." src="{{comp.image.src}}">
       </div>
     </a>
     <div class="card-body">
-      <a href="{{comp.link}}"><header class="card-title card-title-material-3">{{comp.name}}</header></a>
+      <a href="{{comp.link}}"><header class="card-title">{{comp.name}}</header></a>
       <p class="card-text">{{ comp.description | truncatewords: 25 }}</p>
     </div>
   </div>
diff --git a/src/_includes/docs/code-and-image.md b/src/_includes/docs/code-and-image.md
index 014661a8ef..b6940b3b22 100644
--- a/src/_includes/docs/code-and-image.md
+++ b/src/_includes/docs/code-and-image.md
@@ -12,19 +12,17 @@
 {% endif -%}
 
 
-<figure class="{{class}}">
-  <div class="row {{figure-class}}">
-      <div class="col-md-7 {{code-class}}" style="padding-right:12px"> 
-        {{code}}
-      </div>
-      <div class="col-md-5" style="padding-left:0">
-        <img src='/assets/images/docs/{{image}}' class='{{img-class}}' alt='{{alt}}' style='{{width}} {{height}}'>
-         {% if caption -%}
-           <figcaption class="figure-caption {{figcaption-class}}" style="margin-top: 6px">
-            {{caption}}
-           </figcaption>
-        {% endif -%}
-      </div>
+<figure class="code-and-image {{class}}">
+  <div class="{{code-class}}"> 
+    {{code}}
+  </div>
+  <div>
+    <img src='/assets/images/docs/{{image}}' class='{{img-class}}' alt='{{alt}}' style='{{width}} {{height}}'>
+     {% if caption -%}
+     <figcaption class="figure-caption {{figcaption-class}}">
+       {{caption}}
+     </figcaption>
+    {% endif -%}
   </div>
 </figure>
 
diff --git a/src/_includes/docs/install/deprecated/get-sdk-linux.md b/src/_includes/docs/install/deprecated/get-sdk-linux.md
index f4961371d5..9d1babc72d 100644
--- a/src/_includes/docs/install/deprecated/get-sdk-linux.md
+++ b/src/_includes/docs/install/deprecated/get-sdk-linux.md
@@ -35,7 +35,7 @@ If you aren't using `snapd`, follow these steps to install Flutter.
 1. Download the installation bundle for the latest
    {{site.sdk.channel}} release of the Flutter SDK:
 
-   [(loading...)](#){:.download-latest-link-{{os}} .btn .btn-primary}
+   [(loading...)](#){:.download-latest-link-{{os}} .filled-button}
 
    You can find older builds and other release channels in the [SDK archive][].
 
diff --git a/src/_includes/docs/install/deprecated/get-sdk-mac.md b/src/_includes/docs/install/deprecated/get-sdk-mac.md
index c0b4c2f2b1..c6488c017b 100644
--- a/src/_includes/docs/install/deprecated/get-sdk-mac.md
+++ b/src/_includes/docs/install/deprecated/get-sdk-mac.md
@@ -7,7 +7,7 @@
 
     |Intel | | <span class="apple-silicon">Apple Silicon</span> |
     |------| | ---------------|
-    |[(loading...)](#){:.download-latest-link-{{os}} .btn .btn-primary} | | [(loading...)](#){:.download-latest-link-{{os}}-arm64 .apple-silicon .btn .btn-primary} |
+    |[(loading...)](#){:.download-latest-link-{{os}} .filled-button} | | [(loading...)](#){:.download-latest-link-{{os}}-arm64 .apple-silicon .filled-button} |
 
     <br>
     For other release channels, and older builds,
diff --git a/src/_includes/docs/install/deprecated/get-sdk-win.md b/src/_includes/docs/install/deprecated/get-sdk-win.md
index 1aa91d5f1d..caba1678f7 100644
--- a/src/_includes/docs/install/deprecated/get-sdk-win.md
+++ b/src/_includes/docs/install/deprecated/get-sdk-win.md
@@ -7,7 +7,7 @@
  1. Download the following installation bundle to get the latest
     {{site.sdk.channel}} release of the Flutter SDK:
 
-    [(loading...)](#){:.download-latest-link-{{os}} .btn .btn-primary}
+    [(loading...)](#){:.download-latest-link-{{os}} .filled-button}
 
     For other release channels, and older builds,
     check out the [SDK archive][].
diff --git a/src/_includes/docs/install/flutter/download.md b/src/_includes/docs/install/flutter/download.md
index ec1dc36787..3127240530 100644
--- a/src/_includes/docs/install/flutter/download.md
+++ b/src/_includes/docs/install/flutter/download.md
@@ -57,13 +57,13 @@ then extract the SDK.
 
    {% if include.os=='macOS' %}
 
-   | Intel Processor                                                     | Apple Silicon                                                                             |
-   |---------------------------------------------------------------------|-------------------------------------------------------------------------------------------|
-   | [(loading...)](#){:.download-latest-link-{{osl}} .btn .btn-primary} | [(loading...)](#){:.download-latest-link-{{osl}}-arm64 .apple-silicon .btn .btn-primary}  |
+   | Intel Processor                                                  | Apple Silicon                                                                         |
+   |------------------------------------------------------------------|---------------------------------------------------------------------------------------|
+   | [(loading...)](#){:.download-latest-link-{{osl}} .filled-button} | [(loading...)](#){:.download-latest-link-{{osl}}-arm64 .apple-silicon .filled-button} |
 
    {% else %}
 
-   [(loading...)](#){:.download-latest-link-{{osl}} .btn .btn-primary}
+   [(loading...)](#){:.download-latest-link-{{osl}} .filled-button}
 
    {% endif -%}
 
diff --git a/src/_includes/docs/install/test-drive/androidstudio.md b/src/_includes/docs/install/test-drive/androidstudio.md
index 342ed02320..f36e71f22e 100644
--- a/src/_includes/docs/install/test-drive/androidstudio.md
+++ b/src/_includes/docs/install/test-drive/androidstudio.md
@@ -1,5 +1,3 @@
-<div class="tab-pane" id="androidstudio" role="tabpanel" aria-labelledby="androidstudio-tab">
-
 ### Create a sample Flutter app {:#create-app-android-studio}
 
 1. Launch the IDE.
@@ -76,5 +74,3 @@ uses [Material Components][].
 
 [Main IntelliJ toolbar]: /assets/images/docs/tools/android-studio/main-toolbar.png
 [Material Components]: {{site.material}}/components
-
-</div>
diff --git a/src/_includes/docs/install/test-drive/terminal.md b/src/_includes/docs/install/test-drive/terminal.md
index 212764f8b3..d55f45191d 100644
--- a/src/_includes/docs/install/test-drive/terminal.md
+++ b/src/_includes/docs/install/test-drive/terminal.md
@@ -1,5 +1,3 @@
-<div class="tab-pane" id="terminal" role="tabpanel" aria-labelledby="terminal-tab">
-
 ### Create your sample Flutter app {:#create-app-terminal}
 
 To create a new Flutter app, run the following commands in your shell or Terminal.
@@ -43,5 +41,3 @@ To create a new Flutter app, run the following commands in your shell or Termina
 {% endcapture %}
 
 {% include docs/install/test-drive/try-hot-reload.md save_changes=save_changes  ide="VS Code" %}
-
-</div>
diff --git a/src/_includes/docs/install/test-drive/vscode.md b/src/_includes/docs/install/test-drive/vscode.md
index 5a9cb46e71..0c66081a76 100644
--- a/src/_includes/docs/install/test-drive/vscode.md
+++ b/src/_includes/docs/install/test-drive/vscode.md
@@ -1,5 +1,3 @@
-<div class="tab-pane active" id="vscode" role="tabpanel" aria-labelledby="vscode-tab">
-
 ### Create a sample Flutter app {:#create-app-vs-code}
 
 1. To use Flutter DevTools from VS Code, install the
@@ -75,8 +73,6 @@ hot reload at this time.
 
 [Material Components]: {{site.material}}/components
 
-</div>
-
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     const specialKey = navigator.userAgent.includes('Mac')? 'Command' : 'Control';
diff --git a/src/_includes/docs/release/archive-release_os.md b/src/_includes/docs/release/archive-release_os.md
index dcb4dbc0c6..1c73abf84b 100644
--- a/src/_includes/docs/release/archive-release_os.md
+++ b/src/_includes/docs/release/archive-release_os.md
@@ -10,7 +10,7 @@ Select from the following scrollable list:
 <div class="scrollable-table">
   <table id="downloads-{{id}}-{{channel}}" class="table table-striped">
   <thead><tr><th>Flutter version</th><th>Architecture</th><th>Ref</th><th class="date">Release Date</th><th>Dart version</th><th>Provenance</th></tr></thead>
-  <tr class="loading"><td colspan="6">Loading...</td></tr>
+  <tbody><tr class="loading"><td colspan="6">Loading...</td></tr></tbody>
   </table>
 </div>
 
diff --git a/src/_includes/docs/swift-package-manager/migrate-ios-project-manually.md b/src/_includes/docs/swift-package-manager/migrate-ios-project-manually.md
index 93921e2157..31ccadd891 100644
--- a/src/_includes/docs/swift-package-manager/migrate-ios-project-manually.md
+++ b/src/_includes/docs/swift-package-manager/migrate-ios-project-manually.md
@@ -26,7 +26,7 @@ the following files in your issue:
    image:"development/packages-and-plugins/swift-package-manager/package-dependencies.png",
    caption:"The project's package dependencies" %}
 
-1. Click <span class="material-symbols-outlined">add</span>.
+1. Click <span class="material-symbols">add</span>.
 1. In the dialog that opens, click **Add Local...**.
 1. Navigate to `ios/Flutter/ephemeral/Packages/FlutterGeneratedPluginSwiftPackage`
    and click **Add Package**.
@@ -50,7 +50,7 @@ the following files in your issue:
 1. Go to **Product > Scheme > Edit Scheme**.
 1. Expand the **Build** section in the left side bar.
 1. Click **Pre-actions**.
-1. Click <span class="material-symbols-outlined">add</span> and
+1. Click <span class="material-symbols">add</span> and
    select **New Run Script Action** from the menu.
 1. Click the **Run Script** title and change it to:
 
diff --git a/src/_includes/docs/swift-package-manager/migrate-macos-project-manually.md b/src/_includes/docs/swift-package-manager/migrate-macos-project-manually.md
index 4145399a12..b89b579eef 100644
--- a/src/_includes/docs/swift-package-manager/migrate-macos-project-manually.md
+++ b/src/_includes/docs/swift-package-manager/migrate-macos-project-manually.md
@@ -26,7 +26,7 @@ the following files in your issue:
    image:"development/packages-and-plugins/swift-package-manager/package-dependencies.png",
    caption:"The project's package dependencies" %}
 
-1. Click <span class="material-symbols-outlined">add</span>.
+1. Click <span class="material-symbols">add</span>.
 1. In the dialog that opens, click the **Add Local...**.
 1. Navigate to `macos/Flutter/ephemeral/Packages/FlutterGeneratedPluginSwiftPackage`
    and click the **Add Package**.
@@ -50,7 +50,7 @@ the following files in your issue:
 1. Go to **Product > Scheme > Edit Scheme**.
 1. Expand the **Build** section in the left side bar.
 1. Click **Pre-actions**.
-1. Click the <span class="material-symbols-outlined">add</span> button
+1. Click the <span class="material-symbols">add</span> button
    and select **New Run Script Action** from the menu.
 1. Click the **Run Script** title and change it to:
 
diff --git a/src/_includes/footer.html b/src/_includes/footer.html
deleted file mode 100644
index 3520b8f674..0000000000
--- a/src/_includes/footer.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<footer class="site-footer">
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-md-12 site-footer__wrapper">
-        <div class="site-footer__logo">
-          <img src="/assets/images/branding/flutter/logo/flutter-mono-81x100.png" alt="Flutter Logo" width="81" height="100">
-        </div>
-        <div class="site-footer__content">
-          <ul class="site-footer__link-list">
-              <li><a href="/tos">terms</a></li>
-              <li><a href="/brand">brand usage</a></li>
-              <li><a href="/security">security</a></li>
-              <li><a href="https://www.google.com/intl/en/policies/privacy">privacy</a></li>
-              <li><a href="https://esflutter.dev/">español</a></li>
-              <li><a href="https://flutter.cn" class="text-nowrap">社区中文资源</a></li> 
-              <li><a href="https://blog.google/inside-google/company-announcements/standing-with-black-community">We stand in solidarity with the Black community. Black Lives Matter.</a></li>
-          </ul>
-          <p class="licenses">
-            Except as otherwise noted,
-            this work is licensed under a
-            <a rel="license" href="https://creativecommons.org/licenses/by/4.0">Creative
-            Commons Attribution 4.0 International License</a>,
-            and code samples are licensed under the BSD License.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</footer>
diff --git a/src/_includes/header.html b/src/_includes/header.html
index 9e104de113..3d7ed17489 100644
--- a/src/_includes/header.html
+++ b/src/_includes/header.html
@@ -1,158 +1,93 @@
-{% assign route = page.url|regex_replace:'/index$|/index\.html$|\.html$|/$' %}
-
-<header class="site-header">
-  <nav class="navbar navbar-expand-md justify-content-start justify-content-md-between">
-    <button
-      class="navbar-toggler"
-      type="button"
-      data-toggle="collapse"
-      data-target="#navbarSupportedContent"
-      aria-controls="navbarSupportedContent"
-      aria-expanded="false"
-      aria-label="Toggle navigation">
-      <i class="material-symbols">menu</i>
-    </button>
-
-    <a class="navbar-brand" href="/">
-      <img
-        src='/assets/images/branding/flutter/logo+text/horizontal/default.svg'
-        alt='Flutter logo'
-        height="37"
-        width="129"
-        class="align-middle">
+<header id="site-header">
+  <div id="header-leading">
+    <div id="menu-button">
+      <button class="icon-button" title="Toggle menu" aria-label="Toggle menu">
+        <span class="material-symbols" aria-hidden="true">menu</span>
+        <span class="material-symbols" aria-hidden="true">menu_open</span>
+      </button>
+    </div>
+    <a class="flutter-logo" href="https://flutter.dev" title="Navigate to the Flutter homepage">
+      <img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="32" height="40">
+      <span>Flutter</span>
+    </a>
+    <a id="docs-button" href="/" title="Navigate to the docs homepage">Docs</a>
+  </div>
+  <div id="header-trailing">
+    <search id="header-search">
+      <button class="icon-button" aria-label="Submit the entered search query">
+        <span class="material-symbols" aria-hidden="true">search</span>
+      </button>
+      <input type="search" placeholder="Search Flutter docs...">
+    </search>
+    <a id="open-search" class="icon-button" href="/search" title="Navigate to search page" aria-label="Navigate to search page">
+      <span class="material-symbols" aria-hidden="true">search</span>
     </a>
-
-    <div
-      id="navbarSupportedContent"
-      class="collapse navbar-collapse flex-grow-0">
-      <div
-        class="site-header__sheet-bg"
-        data-toggle="collapse"
-        data-target="#navbarSupportedContent"
-        aria-controls="navbarSupportedContent"
-        aria-expanded="false"
-        aria-label="Toggle navigation">
+    <div style="--from-right: 1">
+      <button id="theme-switcher" popovertarget="theme-menu" class="icon-button" title="Select a theme" aria-label="Select a theme">
+        <span class="material-symbols" aria-hidden="true">contrast</span>
+      </button>
+      <div class="dropdown-menu" id="theme-menu" popover>
+        <ul>
+          <li>
+            <button data-theme="light" title="Switch to light mode" aria-label="Switch to light mode">
+              <span class="material-symbols" aria-hidden="true">light_mode</span>
+              <span>Light</span>
+            </button>
+          </li>
+          <li>
+            <button data-theme="dark" title="Switch to dark mode" aria-label="Switch to dark mode">
+              <span class="material-symbols" aria-hidden="true">dark_mode</span>
+              <span>Dark</span>
+            </button>
+          </li>
+          <li>
+            <button data-theme="auto" title="Follow the device theme" aria-label="Follow the device theme">
+              <span class="material-symbols" aria-hidden="true">night_sight_auto</span>
+              <span>Automatic</span>
+            </button>
+          </li>
+        </ul>
       </div>
-      <div class="site-header__sheet">
-        <ul class="navbar-nav">
-          <div class="site-sidebar site-sidebar--header d-md-none">
-            {% render sidenav-level-1.html, url:page.url, nav:sidenav, base_id:"header", active_nav:activeNav %}
-          </div>
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" id="platform-navbar-dropdown"
-               href="{{site.main-url}}/multi-platform"
-               role="button" data-toggle="dropdown"
-               aria-haspopup="true" aria-expanded="false">
-               Multi-Platform
+    </div>
+    <div style="--from-right: 0">
+      <button id="more-links-button" popovertarget="more-links" class="icon-button" title="View more links" aria-label="View more links">
+        <span class="material-symbols" aria-hidden="true">more_vert</span>
+      </button>
+      <div class="dropdown-menu" id="more-links" popover>
+        <ul>
+          <li>
+            <a href="https://flutter.dev" target="_blank" rel="noopener">
+              <span class="material-symbols" aria-hidden="true">home</span>
+              <span>Homepage</span>
             </a>
-            <div class="dropdown-menu" aria-labelledby="platform-navbar-dropdown">
-              <a class="dropdown-item" href="{{site.main-url}}/multi-platform/mobile">Mobile</a>
-              <a class="dropdown-item" href="{{site.main-url}}/multi-platform/web">Web</a>
-              <a class="dropdown-item" href="{{site.main-url}}/multi-platform/desktop">Desktop</a>
-              <a class="dropdown-item" href="{{site.main-url}}/multi-platform/embedded">Embedded</a>
-            </div>
           </li>
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" id="dev-navbar-dropdown"
-               href="{{site.main-url}}/"
-               role="button" data-toggle="dropdown"
-               aria-haspopup="true" aria-expanded="false">
-               Development
+          <li>
+            <a href="https://flutter.dev/ecosystem" target="_blank" rel="noopener">
+              <span class="material-symbols" aria-hidden="true">diversity_3</span>
+              <span>Community</span>
             </a>
-            <div class="dropdown-menu" aria-labelledby="dev-navbar-dropdown">
-              <a class="dropdown-item" href="{{site.main-url}}/learn">Learn</a>
-              <a class="dropdown-item" href="https://pub.dev/flutter/favorites" target="_blank">Flutter Favorites</a>
-              <a class="dropdown-item" href="https://pub.dev/" target="_blank">Packages</a>
-              <a class="dropdown-item" href="{{site.main-url}}/monetization">Monetization</a>
-              <a class="dropdown-item" href="{{site.main-url}}/games">Games</a>
-              <a class="dropdown-item" href="{{site.main-url}}/news">News</a>
-            </div>
           </li>
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" id="ecosystem-navbar-dropdown"
-               href="{{site.main-url}}/ecosystem"
-               role="button" data-toggle="dropdown"
-               aria-haspopup="true" aria-expanded="false">
-               Ecosystem
+          <li>
+            <a href="https://pub.dev" target="_blank" rel="noopener">
+              <span class="material-symbols" aria-hidden="true">package_2</span>
+              <span>Packages</span>
             </a>
-            <div class="dropdown-menu" aria-labelledby="ecosystem-navbar-dropdown">
-              <a class="dropdown-item" href="{{site.main-url}}/community">Community</a>
-              <a class="dropdown-item" href="{{site.main-url}}/events">Events</a>
-              <a class="dropdown-item" href="{{site.main-url}}/culture">Culture</a>
-            </div>
           </li>
-          <li class="nav-item">
-            <a class="nav-link" href="{{site.main-url}}/showcase">Showcase</a>
+          <li>
+            <a href="https://api.flutter.dev" target="_blank" rel="noopener">
+              <span class="material-symbols" aria-hidden="true">description</span>
+              <span>API docs</span>
+            </a>
           </li>
-          <li class="nav-item dropdown docs-item">
-            <a class="nav-link dropdown-toggle{% if route == '/' %} active{% endif %}"
-               id="docs-navbar-dropdown"
-               href="/"
-               role="button" data-toggle="dropdown"
-               aria-haspopup="true" aria-expanded="false">
-               Docs
+          <li>
+            <a href="https://docs.flutter.cn" target="_blank" rel="noopener">
+              <span class="material-symbols" aria-hidden="true">language</span>
+              <span>社区中文文档</span>
             </a>
-            <div class="dropdown-menu" aria-labelledby="docs-navbar-dropdown">
-              <a class="dropdown-item {% if route == '/release/whats-new' %} active{% endif %}"
-                 href="/release/whats-new">What's new</a>
-              <a class="dropdown-item {% if route contains '/get-started/editor' %} active{% endif %}"
-                 href="/get-started/editor">Editor support</a>
-              <a class="dropdown-item {% if route contains '/tools/hot-reload' %} active{% endif %}"
-                 href="/tools/hot-reload">Hot reload</a>
-              <a class="dropdown-item {% if route contains '/perf/ui-performance' %} active{% endif %}"
-                 href="/perf/ui-performance">Profiling</a>
-              <a class="dropdown-item {% if route contains '/get-started/install' %} active{% endif %}"
-                 href="/get-started/install">Install Flutter</a>
-              <a class="dropdown-item {% if route contains '/tools/devtools' %} active{% endif %}"
-                 href="/tools/devtools">DevTools</a>
-              <a class="dropdown-item {% if route contains '/cookbook' %} active{% endif %}"
-                 href="/cookbook">Cookbook</a>
-              <a class="dropdown-item {% if route contains '/codelabs' %} active{% endif %}"
-                 href="/codelabs">Codelabs</a>
-            </div>
           </li>
         </ul>
-        <form action="/search/" class="site-header__search form-inline">
-          <input
-            class="site-header__searchfield form-control search-field"
-            type="search" name="q" id="q" autocomplete="off"
-            placeholder="Search" aria-label="Search">
-        </form>
       </div>
     </div>
-    <div class="site-header__social navbar-nav flex-row">
-      <a
-        class="nav-item nav-link nav-icon"
-        href="{{site.social.twitter}}"
-        aria-label="Open Flutter's X (Twitter) in a new tab"
-        target="_blank" rel="noreferrer">
-        <svg><use href="/assets/images/social/x.svg#x"></use></svg>
-      </a>
-      <a
-        class="nav-item nav-link nav-icon"
-        href="{{site.social.youtube}}"
-        aria-label="Open Flutter's YouTube in a new tab"
-        target="_blank" rel="noreferrer">
-        <svg><use href="/assets/images/social/youtube.svg#youtube"></use></svg>
-      </a>
-      <a
-        class="nav-item nav-link nav-icon"
-        href="{{site.flutter-medium}}"
-        aria-label="Open Flutter's Medium blog in a new tab"
-        target="_blank" rel="noreferrer">
-        <svg><use href="/assets/images/social/medium.svg#medium"></use></svg>
-      </a>
-      <a
-        class="nav-item nav-link nav-icon"
-        href="{{site.repo.organization}}"
-        aria-label="Open Flutter's GitHub in a new tab"
-        target="_blank" rel="noreferrer">
-        <svg><use href="/assets/images/social/github.svg#github"></use></svg>
-      </a>
-    </div>
-    <a
-      class="site-header__cta btn btn-primary"
-      href="/get-started/install/">Get started
-    </a>
-  </nav>
+  </div>
 </header>
+  
\ No newline at end of file
diff --git a/src/_includes/inline-toc.html b/src/_includes/inline-toc.html
deleted file mode 100644
index 0827b05ac4..0000000000
--- a/src/_includes/inline-toc.html
+++ /dev/null
@@ -1,40 +0,0 @@
-{% assign itemCount = tocContents.count %}
-{% if itemCount > 1 %}
-{% if itemCount > 10 %}
-{% assign collapsible = true %}
-{% endif -%}
-
-{% if collapsible %}
-{% assign topStyle = ' toc-collapsible toc-collapsed' %}
-{% else %}
-{% assign topStyle = '' %}
-{% endif -%}
-<div id="site-toc--inline" class="site-toc{{topStyle}}">
-  <header class="site-toc__title">
-    Contents
-    {% if collapsible %}
-    <span class="site-toc--inline__toggle toc-toggle-down" title="Expand table of contents"><i class="material-symbols" aria-hidden="true">keyboard_arrow_down</i></span>
-    <span class="site-toc--inline__toggle toc-toggle-up" title="Collapse table of contents"><i class="material-symbols" aria-hidden="true">keyboard_arrow_up</i></span>
-    {% endif -%}
-  </header>
-  <ul class="section-nav">
-    {% for topLevel in tocContents.toc %}
-    <li class="toc-entry toc-h2">
-      <a href="{{topLevel.id}}">{{topLevel.text}}</a>
-      {% if topLevel.children and topLevel.children.size > 0 %}
-      <ul>
-        {% for child in topLevel.children %}
-        <li class="toc-entry toc-h3">
-          <a href="{{child.id}}">{{child.text}}</a>
-        </li>
-        {% endfor -%}
-      </ul>
-      {% endif -%}
-    </li>
-    {% endfor -%}
-  </ul>
-  {% if collapsible %}
-  <span class="site-toc--inline__toggle toc-toggle-more-items" title="Expand table of contents"><i class="material-symbols" aria-hidden="true">more_horiz</i></span>
-  {% endif -%}
-</div>
-{% endif -%}
diff --git a/src/_includes/next-prev-nav.html b/src/_includes/next-prev-nav.html
index 192044a050..8876c85db9 100644
--- a/src/_includes/next-prev-nav.html
+++ b/src/_includes/next-prev-nav.html
@@ -1,21 +1,27 @@
-{% if include.next or include.prev -%}
-  {% if include.next and include.prev -%}
+{% if next or prev -%}
+  {% if next and prev -%}
     {% assign nav_class = 'site-nextprev-nav' -%}
   {% else -%}
     {% assign nav_class = 'site-nextprev-nav__single' -%}
   {% endif -%}
-  <nav class="{{nav_class}}">
-    <ul>
-      {% if include.prev.path -%}
-      <li class="prev">
-          <a href="{{ include.prev.path }}">{{ include.prev.title }}</a>
-      </li>
-      {% endif -%}
-      {% if include.next.path -%}
-      <li class="next">
-          <a href="{{ include.next.path }}">{{ include.next.title }}</a>
-      </li>
-      {% endif -%}
-    </ul>
+  <nav id="site-prev-next">
+    {% if prev.path -%}
+    <a class="prev" href="{{ prev.path }}">
+      <span class="material-symbols" aria-hidden="true">chevron_left</span>
+      <div>
+        <span>Previous</span>
+        <span>{{ prev.title}}</span>
+      </div>
+    </a>
+    {% endif -%}
+    {% if next.path -%}
+    <a class="next" href="{{ next.path }}">
+      <div>
+        <span>Next</span>
+        <span>{{ next.title}}</span>
+      </div>
+      <span class="material-symbols" aria-hidden="true">chevron_right</span>
+    </a>
+    {% endif -%}
   </nav>
 {% endif -%}
diff --git a/src/_includes/side-toc.html b/src/_includes/side-toc.html
index f360e45784..99d0d3e6c1 100644
--- a/src/_includes/side-toc.html
+++ b/src/_includes/side-toc.html
@@ -1,17 +1,17 @@
-{% if tocContents.count > 1 -%}
-<div id="site-toc--side" class="site-toc fixed-col col-xl-2 order-3" data-fixed-column>
-  <header class="site-toc__title">
-    Contents
+<nav id="toc-side">
+  <header>
+    <span class="material-symbols" aria-hidden="true">list</span>
+    <span>On this page</span>
   </header>
-  <ul class="section-nav">
+  <ul>
     {% for topLevel in tocContents.toc %}
-    <li class="toc-entry nav-item toc-h2">
-      <a class="nav-link" href="{{topLevel.id}}">{{topLevel.text}}</a>
+    <li>
+      <span class="sidenav-item"><a href="{{topLevel.id}}">{{topLevel.text}}</a></span>
       {% if topLevel.children and topLevel.children.size > 0 %}
-      <ul class="nav">
+      <ul>
         {% for child in topLevel.children %}
-        <li class="toc-entry nav-item toc-h3">
-          <a class="nav-link" href="{{child.id}}">{{child.text}}</a>
+        <li>
+          <span class="sidenav-item"><a href="{{child.id}}">{{child.text}}</a></span>
         </li>
         {% endfor -%}
       </ul>
@@ -19,5 +19,4 @@
     </li>
     {% endfor -%}
   </ul>
-</div>
-{% endif -%}
+</nav>
diff --git a/src/_includes/sidenav-level-1.html b/src/_includes/sidenav-level-1.html
index 8d234f7767..b4c15901fb 100644
--- a/src/_includes/sidenav-level-1.html
+++ b/src/_includes/sidenav-level-1.html
@@ -4,7 +4,7 @@
 <ul class="nav flex-column">
   {%- for entry in nav -%}
     {% if entry == 'divider' -%}
-      <li aria-hidden="true"><div class="sidebar-primary-divider"></div></li>
+      <li aria-hidden="true"><div class="sidenav-divider"></div></li>
     {% elsif entry.header -%}
       <li class="nav-header">{{entry.header}}</li>
     {% else -%}
@@ -26,7 +26,10 @@
           {% assign show = '' -%}
         {% endif -%}
         <li class="nav-item">
-          <a class="nav-link {{class}} collapsible" data-toggle="collapse" href="#{{id}}" role="button" aria-expanded="{{expanded}}" aria-controls="{{id}}">{{entry.title}}</a>
+          <a class="nav-link {{class}} collapsible" data-toggle="collapse" href="#{{id}}" role="button" aria-expanded="{{expanded}}" aria-controls="{{id}}">
+            <span>{{entry.title}}</span>
+            <span class="material-symbols expander" aria-hidden="true">expand_more</span>
+          </a>
           <ul class="nav flex-column flex-nowrap collapse {{show}}" id="{{id}}">
             {% if isActive -%}
             {%- render sidenav-level-2.html, parent_id:id, children:entry.children, active_entries:active_entries -%}
@@ -44,7 +47,10 @@
         <li class="nav-item">
           <a class="nav-link {{class}}" href="{{entry.permalink}}"
              {%- if isExternal %} target="_blank" rel="noopener" {%- endif -%}>
-            {{entry.title}}
+            <div>
+              <span>{{entry.title}}</span>
+              {%- if isExternal %}<span class="material-symbols" aria-hidden="true">open_in_new</span>{%- endif -%}
+            </div>
           </a>
         </li>
       {% endif -%}
diff --git a/src/_includes/sidenav-level-2.html b/src/_includes/sidenav-level-2.html
index 765b8fc105..249d7bae3c 100644
--- a/src/_includes/sidenav-level-2.html
+++ b/src/_includes/sidenav-level-2.html
@@ -10,7 +10,7 @@
 
 
 {% if entry == 'divider' -%}
-  <div class="dropdown-divider"></div>
+  <div class="sidenav-divider"></div>
 {% elsif entry.header -%}
   <li class="nav-header">{{entry.header}}</li>
 {%- elsif entry.children -%}
@@ -36,7 +36,10 @@
     <a class="{{class}}"
       data-toggle="collapse" data-target="#{{id}}"
       href="{{href}}" role="button"
-      aria-expanded="{{expanded}}" aria-controls="{{id}}">{{entry.title}}</a>
+      aria-expanded="{{expanded}}" aria-controls="{{id}}">
+      <span>{{entry.title}}</span>
+      <span class="material-symbols expander" aria-hidden="true">expand_more</span>
+    </a>
     <ul class="nav flex-column flex-nowrap collapse {{show}}" id="{{id}}">
       {% if isActive -%}
         {% render sidenav-level-3.html, parent_id:id, children:entry.children, active_entries:active_entries -%}
@@ -55,7 +58,10 @@
   <li class="nav-item">
     <a class="{{class}}" href="{{entry.permalink}}"
        {%- if isExternal %} target="_blank" rel="noopener" {%- endif -%}>
-      {{entry.title}}
+      <div>
+        <span>{{entry.title}}</span>
+        {%- if isExternal %}<span class="material-symbols" aria-hidden="true">open_in_new</span>{%- endif -%}
+      </div>
     </a>
   </li>
 
diff --git a/src/_includes/sidenav-level-3.html b/src/_includes/sidenav-level-3.html
index 63e40f4014..edaa98d714 100644
--- a/src/_includes/sidenav-level-3.html
+++ b/src/_includes/sidenav-level-3.html
@@ -9,7 +9,7 @@
 {% endif -%}
 
 {% if entry == 'divider' -%}
-  <div class="dropdown-divider"></div>
+  <div class="sidenav-divider"></div>
 {%- elsif entry.children -%}
   {% assign class = class | append: ' collapsible' -%}
 
@@ -31,7 +31,10 @@
   <li class="nav-item">
     <a class="{{class}}" data-toggle="collapse" data-target="#{{id}}"
       href="{{href}}" role="button"
-      aria-expanded="{{expanded}}" aria-controls="{{id}}">{{entry.title}}</a>
+      aria-expanded="{{expanded}}" aria-controls="{{id}}">
+      <span>{{entry.title}}</span>
+      <span class="material-symbols expander" aria-hidden="true">expand_more</span>
+    </a>
     <ul class="nav flex-column flex-nowrap collapse {{show}}" id="{{id}}">
       {% if isActive -%}
         {% render sidenav-level-4.html, parent_id:id, children:entry.children, active_entries:active_entries -%}
@@ -50,7 +53,10 @@
   <li class="nav-item">
     <a class="{{class}}" href="{{entry.permalink}}"
        {%- if isExternal %} target="_blank" rel="noopener" {%- endif -%}>
-      {{entry.title}}
+      <div>
+        <span>{{entry.title}}</span>
+        {%- if isExternal %}<span class="material-symbols" aria-hidden="true">open_in_new</span>{%- endif -%}
+      </div>
     </a>
   </li>
 
diff --git a/src/_includes/sidenav-level-4.html b/src/_includes/sidenav-level-4.html
index b8c3dee80e..6bbf2ed35a 100644
--- a/src/_includes/sidenav-level-4.html
+++ b/src/_includes/sidenav-level-4.html
@@ -18,7 +18,10 @@
   <li class="nav-item">
     <a class="{{class}}" href="{{entry.permalink}}"
        {%- if isExternal %} target="_blank" rel="noopener" {%- endif -%}>
-      {{entry.title}}
+      <div>
+        <span>{{entry.title}}</span>
+        {%- if isExternal %}<span class="material-symbols" aria-hidden="true">open_in_new</span>{%- endif -%}
+      </div>
     </a>
   </li>
   {% endif -%}
diff --git a/src/_layouts/base.html b/src/_layouts/base.html
index 5e856b120f..2a41b988cf 100644
--- a/src/_layouts/base.html
+++ b/src/_layouts/base.html
@@ -68,47 +68,93 @@
     {% for cssFile in css -%}
       {% assign asset_path = '/assets/css/{{cssFile}}' -%}
       <link rel="stylesheet" href="{{ asset_path | append: cache_bust }}">
+    <link rel="stylesheet" href="../../../../../../Downloads/css/light.css">
     {% endfor -%}
     {% endif -%}
   </head>
   <body{% if body_class %} class="{{ body_class }}"{% endif %}>
-  <a href="#site-content-title" id="skip">
-    Skip to main content
-  </a>
-
-    {% render cookie-notice.html %}
-
     {%- if isProduction == true -%}
-      <noscript>
-        <iframe
-          src="https://www.googletagmanager.com/ns.html?id={{ site.google_tag_manager_id }}"
-          height="0" width="0" style="display:none;visibility:hidden">
-        </iframe>
-      </noscript>
+    <noscript>
+      <iframe
+        src="https://www.googletagmanager.com/ns.html?id={{ site.google_tag_manager_id }}"
+        height="0" width="0" style="display:none;visibility:hidden">
+      </iframe>
+    </noscript>
     {% endif -%}
 
-    <div id="overlay-under-drawer"></div>
-
-    {% include header.html %}
-
-    {% render banner.html %}
-
-    {{ content }}
+    <a href="#document-title" id="skip-to-main" class="filled-button">
+      Skip to main content
+    </a>
 
-    {% render footer.html %}
+    {% render cookie-notice.html %}
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js" integrity="sha512-7rusk8kGPFynZWu26OKbTeI+QPoYchtxsmPeBqkHIEXJxeun4yJ4ISYe7C6sz9wdxeE1Gk3VxsIWgCZTc+vX3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    {% render header.html %}
+
+    <div id="site-below-header">
+      <div id="site-main-row">
+        <nav id="sidenav">
+          {% render sidenav-level-1.html, url:page.url, nav:sidenav, base_id:"side", active_nav:activeNav %}
+        </nav>
+        <div id="content-and-toc">
+          <div id="site-primary">
+            {{ content }}
+          </div>
+          {% if toc != false -%}
+            {% assign tocContents = content | generate_toc %}
+            {% unless tocContents == null or tocContents == '' or tocContents.count < 2 -%}
+            <aside id="side-menu">
+              {% render side-toc.html, tocContents: tocContents %}
+            </aside>
+            {% endunless %}
+          {% endif -%}
+        </div>
+        <div class="invisible-flex-item" aria-hidden="true"></div>
+      </div>
+      <footer id="site-footer">
+        <div class="footer-main">
+          <a class="flutter-logo" href="https://flutter.dev">
+            <img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo">
+            <span>Flutter</span>
+          </a>
+          <div class="footer-social-links">
+            <a href="https://medium.com/flutter" target="_blank" rel="noopener" title="Medium blog">
+              <svg><use href="/assets/images/social/medium.svg#medium"></use></svg>
+            </a>
+            <a href="https://youtube.com/@flutterdev" target="_blank" rel="noopener" title="YouTube">
+              <svg><use href="/assets/images/social/youtube.svg#youtube"></use></svg>
+            </a>
+            <a href="https://github.com/flutter" target="_blank" rel="noopener" title="GitHub">
+              <svg><use href="/assets/images/social/github.svg#github"></use></svg>
+            </a>
+            <a href="https://twitter.com/FlutterDev" target="_blank" rel="noopener" title="X (Twitter)">
+              <svg><use href="/assets/images/social/x.svg#x"></use></svg>
+            </a>
+          </div>
+        </div>
+        <div class="footer-tray">
+          <div class="footer-licenses">Except as otherwise noted, this site is licensed under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>, and code samples are licensed under the <a href="https://opensource.org/licenses/BSD-3-Clause">3-Clause BSD License</a>.</div>
+          <div class="footer-utility-links">
+            <ul>
+              <li><a href="/tos" title="Terms of use">Terms</a></li>
+              <li><a href="/brand" title="Brand usage guidelines">Brand</a></li>
+              <li><a href="https://policies.google.com/privacy" target="_blank" rel="noopener" title="Privacy policy">Privacy</a></li>
+              <li><a href="/security" title="Security philosophy and practices">Security</a></li>
+            </ul>
+          </div>
+        </div>
+      </footer>
+    </div>
 
     <script src="{{ '/assets/js/tabs.js' | append: cache_bust }}"></script>
-    <script src="{{ '/assets/js/archive.js' | append: cache_bust }}"></script>
     <script src="{{ '/assets/js/main.js' | append: cache_bust }}"></script>
+    <script src="{{ '/assets/js/archive.js' | append: cache_bust }}"></script>
+
+    <script src="https://cdn.jsdelivr.net/npm/@oddbird/popover-polyfill@0.4.4/dist/popover.iife.min.js" integrity="sha512-ZiY64DaZxw9hJpLzrbQWfah5I5vyHZTG5EgsZ5bb3c5U9bCK5+t51p1DYt7fG8hR/ns+KuWBXFdTxjehQsFOoA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
     {% if js -%}
     {% for jsFile in js -%}
       <script src="{{ jsFile.url | default: js }}" {% if jsFile.defer %}defer{% endif %}></script>
     {% endfor -%}
     {% endif -%}
-
   </body>
 </html>
\ No newline at end of file
diff --git a/src/_layouts/default.html b/src/_layouts/default.html
index 4e9f21543f..942adb825b 100644
--- a/src/_layouts/default.html
+++ b/src/_layouts/default.html
@@ -2,52 +2,25 @@
 layout: base
 ---
 
-{% if toc != false -%}
-{% assign tocContents = content | generate_toc %}
-{% if tocContents == null or tocContents == '' -%}
-{% assign toc = false %}
-{% endif -%}
-{% endif -%}
-
-{% assign sidebar-col = 'col-12 col-md-3 col-xl-2' -%}
-{% if toc != false -%}
-{% assign main-col = 'col-12 col-md-9 offset-md-3 col-xl-8 offset-xl-2 col-xxl-8 offset-xxl-2' -%}
-{% comment %}Side toc is col-xl-2{% endcomment -%}
-{% else -%}
-{% assign main-col = 'col-12 col-md-9 offset-md-3 col-xl-10 offset-xl-2 col-xxl-8 offset-xxl-2' -%}
+{% if show_banner != false -%}
+<div id="site-banner" role="alert">
+  <p>{% render banner.html %}</p>
+  <button id="banner-close-button" class="icon-button" title="Close banner" aria-label="Close banner">
+    <span class="material-symbols" hidden="hidden">close</span>
+  </button>
+</div>
 {% endif -%}
 
-<div class="container-fluid position-relative">
-  <div class="row flex-xl-nowrap">
-    <div class="fixed-col site-sidebar site-sidebar--fixed {{sidebar-col}} d-none d-md-block" data-fixed-column>
-      {% assign route = page.url | regex_replace:'/index$|/index\.html$|\.html$|/$' %}
-      {% render sidenav-level-1.html, url:page.url, nav:sidenav, base_id:"fixed", active_nav:activeNav %}
-    </div>
-
-    <main class="site-content {{main-col}}">
-      {% if toc != false -%}
-      {% include side-toc.html tocContents=tocContents %}
-      {% endif -%}
-      <div class="container">
+<main id="site-content">
+  <header>
+    <h1 id="document-title">{{title}}</h1>
+    {% if show_breadcrumbs != false -%}
+    {% include breadcrumbs.html %}
+    {% endif -%}
+  </header>
+  {{ content }}
 
-        {% include next-prev-nav.html prev=prev next=next %}
+  {% render next-prev-nav.html, prev:prev, next:next %}
 
-        <header class="site-content__title" id="site-content-title">
-          <h1>{{ title }}</h1>
-          {% if show_breadcrumbs != false -%}
-          {% include breadcrumbs.html %}
-          {% endif -%}
-        </header>
-
-        {% if toc != false -%}
-        {% include inline-toc.html tocContents=tocContents -%}
-        {% endif -%}
-        {{ content }}
-
-        {% include next-prev-nav.html prev=prev, next=next %}
-
-        {% include page-github-links.html %}
-      </div>
-    </main>
-  </div>
-</div>
+  {% include page-github-links.html %}
+</main>
diff --git a/src/_layouts/landing.html b/src/_layouts/landing.html
deleted file mode 100644
index 9bc3fc5b37..0000000000
--- a/src/_layouts/landing.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
-layout: base
----
-
-<div class="container">
-  <div class="row">
-    <main class="col-12">
-      {{content}}
-    </main>
-  </div>
-</div>
diff --git a/src/_sass/base/_base.scss b/src/_sass/base/_base.scss
deleted file mode 100644
index 2761965767..0000000000
--- a/src/_sass/base/_base.scss
+++ /dev/null
@@ -1,481 +0,0 @@
-@use 'variables' as *;
-@use '../vendor/bootstrap';
-
-body {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  overflow-x: hidden;
-}
-
-.container main {
-  overflow-x: hidden;
-}
-
-h1 {
-  margin-bottom: bootstrap.bs-spacer(12);
-}
-
-h2 {
-  clear: both;
-}
-
-dd {
-  margin-bottom: .75rem;
-  margin-left: 1rem;
-}
-
-img {
-  max-width: 100%;
-  max-height: 75vh;
-
-  &[width][height] {
-    height: auto;
-  }
-}
-
-picture {
-  max-height: 100%;
-}
-
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
-  grid-auto-rows: 1fr;
-  gap: 1rem;
-  margin-bottom: 1rem;
-
-  .card {
-    overflow: hidden;
-    max-width: 50vw;
-  }
-
-  .card-body img {
-    width: 72px;
-    height: 72px;
-  }
-
-  .card-image-holder {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 12rem;
-
-    img {
-      max-width: 100%;
-      max-height: 100%;
-      width: auto;
-      z-index: 1;
-    }
-
-    svg {
-      height: 100%;
-      width: 100%;
-    }
-  }
-
-  &.wide {
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-  }
-
-  &.narrow {
-    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
-  }
-}
-
-.card-footer.card-footer--transparent {
-  border: none;
-  background-color: transparent;
-}
-
-.card-footer.card-footer--links {
-  > *:not(:last-child) {
-    margin-right: bootstrap.bs-spacer(4);
-  }
-}
-
-.card-title-material-3 {
-  color: $site-color-body;
-}
-
-.d-block.h1 > .material-symbols {
-  font-size: 3rem;
-}
-
-.card-image-holder-material-3 {
-  align-items: center;
-  z-index: -1;
-  background-size: 0;
-  opacity: .999;
-  background-color: var(--bg-color, white);
-
-  img {
-    max-width: 100%;
-    max-height: 100%;
-    width: auto;
-    z-index: 1;
-  }
-}
-
-.card-image-material-3-hover {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  opacity: 0;
-  transition: .25s ease;
-  z-index: -1;
-
-  img {
-    width: 100%;
-    max-height: 100%;
-    z-index: -1;
-  }
-}
-
-.card-image-holder-material-3:hover .card-image-material-3-hover {
-  opacity: 1;
-}
-
-.card-app-type {
-  border-color: $site-color-nav-links;
-}
-
-.fixed-col {
-  @include bootstrap.media-breakpoint-up(md) {
-    bottom: 0;
-    overflow-y: auto;
-    position: absolute; // position will be fixed once js has initialized
-    top: 0;
-  }
-}
-
-.material-symbols {
-  font-family: $site-font-family-icon;
-  font-variation-settings:
-          'FILL' 0,
-          'wght' 400,
-          'GRAD' 0,
-          'opsz' 24;
-
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  vertical-align: middle;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
-
-.site-mobile-screenshot {
-  display: block;
-  margin: 0 auto;
-  max-height: none;
-  max-width: 100%;
-  @include bootstrap.media-breakpoint-up(xs) {
-    max-width: bootstrap.breakpoint-min(xxs);
-  }
-
-  &--border { border: 1px solid $site-color-light-grey; }
-}
-
-.site-image-right {
-  display: block;
-  margin: 0 auto;
-  max-height: 60vh;
-  max-width: 100%;
-
-  &.site-figure {
-    max-height: none;
-  }
-
-  @include bootstrap.media-breakpoint-up(md) {
-    float: right;
-    margin: 0 0 bootstrap.bs-spacer(10) bootstrap.bs-spacer(10);
-    max-height: none;
-    max-width: calc((100%/2.5) - #{bootstrap.bs-spacer(10)});
-  }
-}
-
-.site-figure {
-  display: flex;
-  justify-content: center;
-
-  .site-figure-container {
-    flex: 0 1 auto;
-    max-width: 100%;
-
-    img { width: 100%; }
-
-    figcaption {
-      margin-top: bootstrap.bs-spacer(4);
-      text-align: center;
-    }
-  }
-  .site-figure-container-lg {
-    flex: 0 1 auto;
-    width: 100%;
-
-    img { width: 100%; }
-
-    figcaption {
-      margin-top: bootstrap.bs-spacer(4);
-      text-align: center;
-    }
-  }
-}
-
-.list-image {
-  width: 48px;
-  margin: 0.25rem;
-}
-
-.text-icon {
-  margin: 0 0.125rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  vertical-align: text-bottom;
-}
-
-.site-illustration {
-  // Illustrations should be visible in their entirety without the need
-  // for scrolling up and down.
-  max-height: 60vh;
-}
-
-.btn.btn-icon {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-
-  .material-symbols {
-    margin-right: bootstrap.bs-spacer(2);
-  }
-}
-
-.btn.btn-cta {
-    font-size: 18px;
-    font-weight: 500;
-    padding: bootstrap.bs-spacer(4) bootstrap.bs-spacer(6);
-
-    @include bootstrap.media-breakpoint-up(sm) {
-      min-width: 250px;
-    }
-  }
-
-.embedded-video-wrapper {
-  width: 100%;
-  padding-bottom: 56.25%; // 16:9 aspect ratio
-  position: relative;
-
-  &__frame {
-    height: 100%;
-    position: absolute;
-    width: 100%;
-  }
-}
-
-.table-wrapper {
-  overflow-x: auto;
-}
-
-// If table head has empty children, just hide it
-// since markdown-it-table doesn't support headless tables.
-thead:has(th:empty) {
-  display: none;
-}
-
-.searchbar {
-  > * {
-    max-width: 640px;
-    width:100%
-  }
-}
-
-.install-help {
-  text-align: right;
-  margin-top: -2.5rem;
-
-  a {
-    display: inline-flex;
-    align-items: center;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  .material-symbols {
-    font-size: 20px;
-    margin-right: 0.125rem;
-  }
-}
-
-blockquote {
-  background-color: $site-color-codeblock-bg;
-  padding: bootstrap.bs-spacer(3) bootstrap.bs-spacer(4);
-  border-left: solid 5px bootstrap.$border-color;
-  margin-bottom: bootstrap.bs-spacer(4);
-
-  p {
-    margin-bottom: 0;
-  }
-}
-
-details {
-  margin-bottom: 0.75rem;
-
-  > summary {
-    font-weight: 500;
-    user-select: none;
-
-    &:hover {
-      color: $site-color-primary;
-    }
-  }
-
-  &[open] {
-    margin-bottom: unset;
-
-    > summary {
-      margin-bottom: 0.75rem;
-    }
-  }
-
-  > :not(:first-child) {
-    margin-left: 0.75rem;
-    margin-right: 0.75rem;
-  }
-}
-
-summary {
-  margin-bottom: 1rem;
-}
-
-main {
-  ol + img, ul + img, ol + p, ul + p, p + p + img,
-  li:not(.toc-entry, .breadcrumb-item, .nav-item):last-child, ul + p:last-child {
-    margin-bottom: 1rem;
-  }
-}
-
-td ol, td ul, td dl, td p {
-  margin-bottom: 0;
-}
-
-p + ul, p + ol, p + dl {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
-}
-
-td ol, td ul, td dl, td p {
-  margin-bottom: 0;
-}
-
-.figure-caption {
-  font-size: bootstrap.$font-size-sm;
-  font-style: italic;
-  color: #041E3C;
-}
-
-aside {
-  .alert {
-    h2, h3, h4, h5, h6 {
-      margin: 0.5rem 0;
-      font-size: 1.5rem;
-    }  
-  }
-}
-
-.card-os-bug {
-  position: relative;
-  ::before {
-    content: "";
-    position: absolute;
-    top: 0.5rem; 
-    left: 0.5rem; 
-    width: 24px; 
-    height: 24px;
-    background-position: center center;
-    background-size: contain;
-    background-color: transparent;
-    background-repeat: no-repeat;
-    z-index: 1; /* Place in front of card */
-  }
-}
-
-.card-macos {
-  @extend .card-os-bug;
-  ::before {
-    background-image: url("/assets/images/docs/brand-svg/macos-bug.svg");
-  }
-}
-
-.card-windows {
-  @extend .card-os-bug;
-  ::before {
-    background-image: url("/assets/images/docs/brand-svg/windows-bug.svg");
-  }
-}
-
-.card-linux {
-  @extend .card-os-bug;
-  ::before {
-    background-image: url("/assets/images/docs/brand-svg/linux.svg");
-  }
-}
-
-.card-chromeos {
-  @extend .card-os-bug;
-  ::before {
-    background-image: url("/assets/images/docs/brand-svg/chromeos.svg");
-  }
-}
-
-#skip {
-  top: 10px;
-  left: 10px;
-  position: absolute;
-  z-index: 2000;
-  padding: 1rem;
-  background-color: $site-color-primary;
-  color: $site-color-white;
-  border-radius: 0.5rem;
-  transform: translateY(-5rem);
-}
-
-#skip:focus {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-#site-content-title {
-  scroll-margin-top: 5rem;
-}
-
-.video-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  align-items: center;
-
-  .video-intro {
-    font-weight: 500;
-    padding: 0 0.75rem;
-    text-wrap: pretty;
-  }
-}
-
-.footnote-ref a {
-  scroll-margin-top: 6rem;
-}
-
-.footnote-item {
-  scroll-margin-top: 5rem;
-}
diff --git a/src/_sass/base/_content.scss b/src/_sass/base/_content.scss
new file mode 100644
index 0000000000..2ce99205b8
--- /dev/null
+++ b/src/_sass/base/_content.scss
@@ -0,0 +1,99 @@
+main {
+  background-color: var(--site-surface);
+  overflow-x: hidden;
+  width: 100%;
+
+  border-radius: var(--site-square-radius);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  padding: 1rem;
+
+  @media(max-width: 576px) {
+    border-radius: 0;
+  }
+
+  ol, ul, p, pre, aside, iframe, img, figure, .card-grid, .table-wrapper {
+    margin-bottom: 1rem;
+  }
+
+  li, dd {
+    > p, img, aside, .code-block-wrapper, figure, ul, ol {
+      margin-bottom: 0.75rem;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  ol, ul {
+    padding-left: 2rem;
+  }
+
+  dl {
+    dt {
+      font-weight: 500;
+    }
+
+    dd {
+      margin-bottom: 1rem;
+    }
+  }
+
+  details {
+    margin-bottom: 0.75rem;
+
+    > summary {
+      font-weight: 500;
+      user-select: none;
+      cursor: pointer;
+      margin-bottom: 1rem;
+
+      &:hover {
+        color: #0468d7;
+      }
+
+      &:active {
+        color: #03448c;
+      }
+    }
+
+    &[open] {
+      margin-bottom: unset;
+
+      > summary {
+        margin-bottom: 0.75rem;
+      }
+    }
+
+    > :not(:first-child) {
+      margin-left: 0.75rem;
+      margin-right: 0.75rem;
+    }
+  }
+
+  blockquote {
+    background-color: var(--site-surface-container-high);
+    padding: 1rem;
+    border-left: solid 0.25rem var(--site-outline-variant);
+    margin-bottom: 1rem;
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+
+  .row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    gap: 0.5rem;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .footnote-ref a, .footnote-item {
+    scroll-margin-top: 1.25rem;
+  }
+}
diff --git a/src/_sass/base/_layout.scss b/src/_sass/base/_layout.scss
new file mode 100644
index 0000000000..4b83907803
--- /dev/null
+++ b/src/_sass/base/_layout.scss
@@ -0,0 +1,79 @@
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+#site-below-header {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  max-height: 100%;
+  overflow-y: auto;
+  max-width: 100vw;
+}
+
+#site-main-row {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin: 1rem;
+
+  @media(max-width: 576px) {
+    margin: 0;
+    border-radius: 0;
+
+    aside.alert {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+}
+
+#content-and-toc {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  max-width: 100%;
+  min-width: 0;
+}
+
+#site-primary {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin: 0;
+  gap: 1rem;
+  max-width: 58rem;
+  min-width: 0;
+}
+
+@media(max-width: 960px) {
+  .invisible-flex-item {
+    display: none;
+  }
+}
+
+@media(min-width: 769px) {
+  body.menu-wide-toggled {
+    #site-main-row {
+      justify-content: center;
+    }
+
+    #sidenav {
+      display: none;
+    }
+
+    #menu-button button > span {
+      &:first-child {
+        display: unset;
+      }
+
+      &:last-child {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/src/_sass/base/_material-colors.scss b/src/_sass/base/_material-colors.scss
deleted file mode 100644
index 9b896706d4..0000000000
--- a/src/_sass/base/_material-colors.scss
+++ /dev/null
@@ -1,154 +0,0 @@
-// Material Design Colors
-//
-// Colors based off the material design palette
-// https://material.google.com/style/color.html#color-color-palette
-
-$amber-50: #FFF8E1;
-$amber-100: #FFECB3;
-$amber-200: #FFE082;
-$amber-300: #FFD54F;
-$amber-400: #FFCA28;
-$amber-500: #FFC107;
-$amber-600: #FFB300;
-$amber-700: #FFA000;
-$amber-800: #FF8F00;
-$amber-900: #FF6F00;
-$amber-A100: #FFE57F;
-$amber-A200: #FFD740;
-$amber-A400: #FFC400;
-$amber-A700: #FFAB00;
-
-$blue-50: #E3F2FD;
-$blue-100: #BBDEFB;
-$blue-200: #90CAF9;
-$blue-300: #64B5F6;
-$blue-400: #42A5F5;
-$blue-500: #2196F3;
-$blue-600: #1E88E5;
-$blue-700: #1976D2;
-$blue-800: #1565C0;
-$blue-900: #0D47A1;
-$blue-A100: #82B1FF;
-$blue-A200: #448AFF;
-$blue-A400: #2979FF;
-$blue-A700: #2962FF;
-
-$blue-grey-50: #ECEFF1;
-$blue-grey-100: #CFD8DC;
-$blue-grey-200: #B0BEC5;
-$blue-grey-300: #90A4AE;
-$blue-grey-400: #78909C;
-$blue-grey-500: #607D8B;
-$blue-grey-600: #546E7A;
-$blue-grey-700: #455A64;
-$blue-grey-800: #37474F;
-$blue-grey-900: #263238;
-
-$cyan-50: #E0F7FA;
-$cyan-100: #B2EBF2;
-$cyan-200: #80DEEA;
-$cyan-300: #4DD0E1;
-$cyan-400: #26C6DA;
-$cyan-500: #00BCD4;
-$cyan-600: #00ACC1;
-$cyan-700: #0097A7;
-$cyan-800: #00838F;
-$cyan-900: #006064;
-$cyan-A100: #84FFFF;
-$cyan-A200: #18FFFF;
-$cyan-A400: #00E5FF;
-$cyan-A700: #00B8D4;
-
-$grey-400: #BDBDBD;
-$grey-500: #9E9E9E;
-$grey-900: #212121;
-
-$green-50: #E8F5E9;
-$green-100: #C8E6C9;
-$green-200: #A5D6A7;
-$green-300: #81C784;
-$green-400: #66BB6A;
-$green-500: #4CAF50;
-$green-600: #43A047;
-$green-700: #388E3C;
-$green-800: #2E7D32;
-$green-900: #1B5E20;
-$green-A100: #B9F6CA;
-$green-A200: #69F0AE;
-$green-A400: #00E676;
-$green-A700: #00C853;
-
-$light-green-50: #F1F8E9;
-$light-green-100: #DCEDC8;
-$light-green-200: #C5E1A5;
-$light-green-300: #AED581;
-$light-green-400: #9CCC65;
-$light-green-500: #8BC34A;
-$light-green-600: #7CB342;
-$light-green-700: #689F38;
-$light-green-800: #558B2F;
-$light-green-900: #33691E;
-$light-green-A100: #CCFF90;
-$light-green-A200: #B2FF59;
-$light-green-A400: #76FF03;
-$light-green-A700: #64DD17;
-
-$pink-50: #FCE4EC;
-$pink-100: #F8BBD0;
-$pink-200: #F48FB1;
-$pink-300: #F06292;
-$pink-400: #EC407A;
-$pink-500: #E91E63;
-$pink-600: #D81B60;
-$pink-700: #C2185B;
-$pink-800: #AD1457;
-$pink-900: #880E4F;
-$pink-A100: #FF80AB;
-$pink-A200: #FF4081;
-$pink-A400: #F50057;
-$pink-A700: #C51162;
-
-$purple-50: #F3E5F5;
-$purple-100: #E1BEE7;
-$purple-200: #CE93D8;
-$purple-300: #BA68C8;
-$purple-400: #AB47BC;
-$purple-500: #9C27B0;
-$purple-600: #8E24AA;
-$purple-700: #7B1FA2;
-$purple-800: #6A1B9A;
-$purple-900: #4A148C;
-$purple-A100: #EA80FC;
-$purple-A200: #E040FB;
-$purple-A400: #D500F9;
-$purple-A700: #AA00FF;
-
-$red-50: #FFEBEE;
-$red-100: #FFCDD2;
-$red-200: #EF9A9A;
-$red-300: #E57373;
-$red-400: #EF5350;
-$red-500: #F44336;
-$red-600: #E53935;
-$red-700: #D32F2F;
-$red-800: #C62828;
-$red-900: #B71C1C;
-$red-A100: #FF8A80;
-$red-A200: #FF5252;
-$red-A400: #FF1744;
-$red-A700: #D50000;
-
-$teal-50: #E0F2F1;
-$teal-100: #B2DFDB;
-$teal-200: #80CBC4;
-$teal-300: #4DB6AC;
-$teal-400: #26A69A;
-$teal-500: #009688;
-$teal-600: #00897B;
-$teal-700: #00796B;
-$teal-800: #00695C;
-$teal-900: #004D40;
-$teal-A100: #A7FFEB;
-$teal-A200: #64FFDA;
-$teal-A400: #1DE9B6;
-$teal-A700: #00BFA5;
diff --git a/src/_sass/base/_print-overrides.scss b/src/_sass/base/_print-overrides.scss
deleted file mode 100644
index 4b122a6c89..0000000000
--- a/src/_sass/base/_print-overrides.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-// Overrides for printing so only page content is printed
-@media print {
-  // Ignore navigation elements and other non-necessary interactive ones
-  .site-header, .subnav, .site-footer, .site-sidebar, .navbar,
-  #site-toc--side, #page-github-links, #cookie-notice, .site-banner,
-  .code-excerpt__copy-btn, .breadcrumb {
-    display: none !important;
-  }
-
-  // Make sure content fills up 100% of width
-  .site-content {
-    max-width: 100% !important;
-    margin-left: 0;
-    padding-left: 0;
-    border: none;
-    flex: 1;
-  }
-
-  // Remove DartPad iframes since they are not functional.
-  iframe[src^="https://dartpad"]:not(#try-dart-pad) {
-    display: none;
-  }
-
-  // Display underlines under links
-  a {
-    text-decoration: underline;
-  }
-
-  // Show borders around notes and code blocks
-  .alert, pre {
-    border: 1px solid black;
-  }
-}
diff --git a/src/_sass/base/_reset.scss b/src/_sass/base/_reset.scss
new file mode 100644
index 0000000000..83918e3965
--- /dev/null
+++ b/src/_sass/base/_reset.scss
@@ -0,0 +1,26 @@
+*, ::before, ::after {
+  box-sizing: border-box;
+  border-width: 0;
+  margin: 0;
+}
+
+html, body {
+  padding: 0;
+}
+
+*:focus-visible {
+  outline: 2px solid var(--site-primary-container);
+}
+
+button, input, select, textarea {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
diff --git a/src/_sass/base/_root.scss b/src/_sass/base/_root.scss
new file mode 100644
index 0000000000..f4e351ee77
--- /dev/null
+++ b/src/_sass/base/_root.scss
@@ -0,0 +1,105 @@
+body {
+  --site-ui-font-family: 'Google Sans', 'Roboto', ui-sans, sans-serif;
+  --site-body-font-family: 'Google Sans Text', 'Roboto', ui-sans, sans-serif;
+  --site-code-font-family: 'Google Sans Mono', 'Roboto Mono', ui-monospace, monospace;
+
+  --site-square-radius: 0.4rem;
+
+  --site-surface: rgb(249 249 255);
+  --site-on-surface: rgb(25 28 34);
+  --site-surface-variant: rgb(222 226 242);
+  --site-on-surface-variant: rgb(66 71 83);
+
+  --site-primary: rgb(0 69 148);
+  --site-surface-tint: rgb(0 91 191);
+  --site-on-primary: rgb(255 255 255);
+
+  --site-inverse-primary: rgb(172 199 255);
+  --site-on-inverse-primary: rgb(0 47 104);
+
+  --site-primary-container: rgb(4 104 215);
+  --site-on-primary-container: rgb(255 255 255);
+  --site-secondary: rgb(72 94 137);
+  --site-on-secondary: rgb(255 255 255);
+  --site-secondary-container: rgb(192 211 255);
+  --site-on-secondary-container: rgb(39 62 103);
+
+  --site-surface-container-lowest: rgb(255 255 255);
+  --site-surface-container-low: rgb(242 243 253); // Outside content
+  --site-surface-container: rgb(236 237 247); // Card background
+  --site-surface-container-high: rgb(230 232 241); // Search, button, modal
+  --site-surface-container-highest: rgb(225 226 236); // (bright) button
+
+  --site-outline: rgb(114 119 133); // Button border
+  --site-outline-variant: rgb(194 198 214);
+
+  --site-interaction-base-values: 0 0 0;
+
+  --flutter-wordmark-color: rgb(74 74 74);
+
+  --code-highlight-bg-color: rgba(255, 245, 156, 0.8);
+  --alert-info: #cbebf9;
+  --alert-tip: #b0eda6;
+  --alert-important: #e2dbff;
+  --alert-warning: #fbe5a5;
+  --alert-error: #fde9ee;
+
+  &:not(.dark-mode) .dark-mode-visible {
+    display: none;
+  }
+
+  &.dark-mode {
+    --site-surface: rgb(16 19 26);
+    --site-on-surface: rgb(225 226 236);
+    --site-surface-variant: rgb(66 71 83); // Divider
+    --site-on-surface-variant: rgb(194 198 214);
+
+    --site-primary: rgb(172 199 255);
+    --site-surface-tint: rgb(172 199 255);
+    --site-on-primary: rgb(0 47 104);
+
+    --site-inverse-primary: rgb(0 91 191);
+    --site-on-inverse-primary: rgb(255 255 255);
+
+    --site-primary-container: rgb(0 95 198);
+    --site-on-primary-container: rgb(255 255 255);
+    --site-secondary: rgb(176 199 248);
+    --site-on-secondary: rgb(24 48 88);
+    --site-secondary-container: rgb(38 61 102);
+    --site-on-secondary-container: rgb(188 209 255);
+
+    --site-surface-container-lowest: rgb(11 14 21);
+    --site-surface-container-low: rgb(25 28 34); // Outside content
+    --site-surface-container: rgb(29 32 38); // Card background
+    --site-surface-container-high: rgb(39 42 49); // Search, button, modal
+    --site-surface-container-highest: rgb(50 53 60); // (bright) button
+
+    --site-outline: rgb(140 144 159); // Button border
+    --site-outline-variant: rgb(66 71 83);
+
+    --site-interaction-base-values: 255 255 255;
+
+    --flutter-wordmark-color: rgb(255 255 255);
+
+    --code-highlight-bg-color: rgba(185, 174, 0, 0.2);
+    --alert-info: #043875;
+    --alert-tip: #065517;
+    --alert-important: #4a00b4;
+    --alert-warning: #663f09;
+    --alert-error: #7a0c17;
+
+    .light-mode-visible {
+      display: none;
+    }
+
+    .shiki, .shiki span {
+      color: var(--shiki-dark) !important;
+      font-style: var(--shiki-dark-font-style) !important;
+      font-weight: var(--shiki-dark-font-weight) !important;
+      text-decoration: var(--shiki-dark-text-decoration) !important;
+    }
+  }
+
+  background-color: var(--site-surface-container);
+  color: var(--site-on-surface);
+}
\ No newline at end of file
diff --git a/src/_sass/base/_typography.scss b/src/_sass/base/_typography.scss
new file mode 100644
index 0000000000..392327f362
--- /dev/null
+++ b/src/_sass/base/_typography.scss
@@ -0,0 +1,98 @@
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  font-family: var(--site-body-font-family), ui-sans, sans-serif;
+}
+
+code, kbd, samp, pre {
+  font-family: var(--site-code-font-family), monospace;
+}
+
+b, strong {
+  font-weight: bolder;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--site-ui-font-family), sans-serif;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+h2, h3, h4, h5, h6 {
+  scroll-margin-top: 1rem;
+  max-width: 90%;
+}
+
+h1 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  text-wrap: balance;
+  scroll-margin-top: 1rem;
+}
+
+.heading-wrapper {
+  display: flex;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  align-items: center;
+
+  &:hover .heading-link {
+    opacity: 0.75;
+  }
+
+  .heading-link {
+    margin-left: .4rem;
+    line-height: 1;
+    transition: all .15s ease-in-out;
+    overflow: hidden;
+    color: var(--site-on-surface-variant);
+    opacity: 0;
+    text-decoration: none;
+    user-select: none;
+
+    &:focus-visible {
+      opacity: 0.75;
+    }
+
+    &:hover {
+      opacity: 0.9;
+    }
+
+    &:active {
+      opacity: 1;
+    }
+  }
+
+  h2 {
+    font-size: 2.25rem;
+    text-wrap: balance;
+
+    & + .heading-link {
+      font-size: 1.75rem;
+    }
+  }
+
+  h3 {
+    font-size: 1.875rem;
+
+    & + .heading-link {
+      font-size: 1.375rem;
+    }
+  }
+
+  h4 {
+    font-size: 1.5rem;
+
+    & + .heading-link {
+      font-size: 1.25rem;
+    }
+  }
+
+  h5 {
+    font-size: 1.25rem;
+
+    & + .heading-link {
+      font-size: 1rem;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/_sass/base/_utils.scss b/src/_sass/base/_utils.scss
new file mode 100644
index 0000000000..fd324a18b9
--- /dev/null
+++ b/src/_sass/base/_utils.scss
@@ -0,0 +1,3 @@
+@mixin interaction-style($percentage: 4%) {
+  background-image: linear-gradient(rgb(var(--site-interaction-base-values) / $percentage) 0 0);
+}
diff --git a/src/_sass/base/_variables.scss b/src/_sass/base/_variables.scss
deleted file mode 100644
index c6d8b62b10..0000000000
--- a/src/_sass/base/_variables.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-@use 'sass:color';
-
-// Colors
-$flutter-color-blue: #043875;
-$flutter-color-teal: #158477;
-$flutter-color-blue-on-dark: #B8EAFE;
-$flutter-color-blue-500: #0468D7;
-$flutter-color-blue-600: #0553B1;
-$flutter-color-dark-blue: #042B59;
-$flutter-color-grey-500: #E8EAED;
-$flutter-color-fuchsia: #E64637;
-$flutter-color-yellow: #FFF275;
-$flutter-color-yellow-300: #FFF59C;
-$flutter-color-light-blue: #E7F8FF;
-$flutter-dark-blue-texture: #232C33;
-$site-color-black: #000;
-$site-color-white: #FFF;
-$site-color-codeblock-bg: #F8F9FA;
-$site-color-light-grey: #DADCE0;
-$site-color-sub-grey: #8d9399;
-$site-color-nav-links: #6E7274;
-$site-color-body: #212121; // Poor contrast with links
-$site-color-body-light: color.scale($site-color-body, $lightness: 20%);
-$site-color-footer: #303c42;
-$site-color-primary: $flutter-color-blue-500;
-$twitter-color: #60CAF6;
-
-// Fonts
-$font-size-base-weight: 400;
-$site-font-family-base: 'Google Sans Text', 'Roboto', sans-serif;
-$site-font-family-alt: 'Google Sans', 'Google Sans Text', 'Roboto', sans-serif;
-$site-font-family-icon: 'Material Symbols Outlined';
-$site-font-family-monospace: 'Google Sans Mono', 'Roboto Mono', monospace;
-$site-font-icon: 24px/1 $site-font-family-icon;
-
-// Layout
-$site-header-height: 66px;
-$site-footer-md-default-height: 140px;
-$site-content-top-padding: 40px;
-$site-content-max-width: 960px;
-$site-sidebar-top-padding: 16px;
-$site-sidebar-side-padding: 16px;
-$site-nav-mobile-side-padding: 20px;
-$site-spacer: 1rem;
-
-// Alerts
-$alert-success-bg:        #f1fbf9;
-$alert-success-fg:        #155723;
-$alert-info-bg:           #e7f8ff;
-$alert-warning-bg:        #fcf8e3;
-$alert-danger-bg:         #fef3f6;
-$alert-danger-fg:         #cb1425;
diff --git a/src/_sass/components/_asides.scss b/src/_sass/components/_asides.scss
new file mode 100644
index 0000000000..82752a38c9
--- /dev/null
+++ b/src/_sass/components/_asides.scss
@@ -0,0 +1,45 @@
+aside.alert {
+  padding: 0.75rem;
+
+  .alert-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+    font-family: var(--site-ui-font-family), sans-serif;
+    font-size: 1.125rem;
+    font-weight: 500;
+    -webkit-font-smoothing: antialiased;
+
+    .material-symbols {
+      font-size: 1.25em;
+      user-select: none;
+    }
+  }
+
+  .alert-content {
+    > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  &.alert-success {
+    background-color: var(--alert-tip);
+  }
+
+  &.alert-warning {
+    background-color: var(--alert-warning);
+  }
+
+  &.alert-info {
+    background-color: var(--alert-info);
+  }
+
+  &.alert-secondary {
+    background-color: var(--site-surface-container-high);
+  }
+}
diff --git a/src/_sass/components/_banner.scss b/src/_sass/components/_banner.scss
index 98e9accda7..87a0ab5722 100644
--- a/src/_sass/components/_banner.scss
+++ b/src/_sass/components/_banner.scss
@@ -1,52 +1,30 @@
-@use '../base/variables' as *;
-@use '../vendor/bootstrap';
-
-.site-banner {
-  background-color: $flutter-color-blue;
-  color: $site-color-white;
-  font-family: $site-font-family-alt;
-  font-size: bootstrap.$font-size-lg;
-  padding: bootstrap.bs-spacer(5);
-  position: relative;
+#site-banner {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  gap: 0.5rem;
+  padding: 0.75rem;
   text-align: center;
-  z-index: bootstrap.$zindex-sticky;
+  background-color: var(--site-secondary-container);
+  color: var(--site-on-secondary-container);
 
   p {
-    margin-bottom: bootstrap.bs-spacer(3);
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
+    overflow-wrap: anywhere;
+    word-break: normal;
+    margin: 0;
+    flex-grow: 1;
   }
 
-  a {
-    color: $flutter-color-blue-on-dark;
+  border-radius: var(--site-square-radius);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
-    &:hover {
-      color: $flutter-color-blue-on-dark;
-    }
+  @media(max-width: 576px) {
+    border-radius: 0;
   }
+}
 
-  // customizations per banner
-
-  &.site-banner--default {
-    &:before,
-    &:after {
-      background-image: url('/assets/images/flutter-chevron-bg.svg');
-      background-position: right center;
-      background-repeat: no-repeat;
-      background-size: auto 100%;
-      content: '';
-      height: 100%;
-      left: 0;
-      pointer-events: none;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
-
-    &:before {
-      transform: scaleX(-1);
-    }
-  }
+#banner-close-button {
+  margin-left: auto;
 }
diff --git a/src/_sass/components/_books.scss b/src/_sass/components/_books.scss
deleted file mode 100644
index 9fedc315f9..0000000000
--- a/src/_sass/components/_books.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use '../vendor/bootstrap';
-
-.book-img-with-details {
-  margin-bottom: 1.5rem;
-
-  img {
-    @include bootstrap.media-breakpoint-down(sm) { max-width: 200px; }
-    width: 100%;
-  }
-
-  .details {
-    .title {
-      @include bootstrap.media-breakpoint-up(sm) { margin-top: 0; }
-      margin-bottom: 0;
-    }
-  }
-}
diff --git a/src/_sass/components/_breadcrumbs.scss b/src/_sass/components/_breadcrumbs.scss
new file mode 100644
index 0000000000..c63fb68657
--- /dev/null
+++ b/src/_sass/components/_breadcrumbs.scss
@@ -0,0 +1,40 @@
+#site-content nav.breadcrumbs {
+  align-items: center;
+  margin-bottom: 1rem;
+
+  > ol {
+    background-color: var(--site-surface-container-high);
+    border-radius: var(--site-square-radius);
+    padding: 0.375rem;
+
+    align-items: center;
+    list-style: none;
+
+    font-family: var(--site-ui-font-family), sans-serif;
+
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+
+    li.breadcrumb-item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      & a {
+        padding: 0.125rem;
+        border-radius: 0.125rem;
+      }
+
+      &.active a {
+        color: var(--site-on-surface);
+        cursor: default;
+        text-decoration: none;
+      }
+    }
+
+    .child-icon {
+      user-select: none;
+    }
+  }
+}
diff --git a/src/_sass/components/_buttons.scss b/src/_sass/components/_buttons.scss
new file mode 100644
index 0000000000..5b60e562cf
--- /dev/null
+++ b/src/_sass/components/_buttons.scss
@@ -0,0 +1,67 @@
+@use '../base/utils';
+
+a {
+  color: var(--site-primary);
+  border-radius: 0.25rem;
+
+  &:hover {
+    color: var(--site-primary);
+    text-decoration: underline;
+  }
+
+  &:has(code):focus-visible {
+    outline: none;
+
+    code {
+      outline: 2px solid var(--site-primary-container);
+    }
+  }
+}
+
+a, button {
+  text-decoration: none;
+
+  &.filled-button {
+    font-weight: 500;
+    padding: 0.5rem;
+    background-color: var(--site-primary-container);
+    color: var(--site-on-primary-container);
+    text-decoration: none;
+    border-radius: var(--site-square-radius);
+    cursor: pointer;
+
+    &:hover {
+      @include utils.interaction-style(8%);
+    }
+
+    &:active {
+      @include utils.interaction-style(16%);
+    }
+  }
+
+  &.icon-button {
+    border-radius: var(--site-square-radius);
+    padding: 0.375rem;
+    color: var(--site-on-surface-variant);
+    text-decoration: none;
+
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    background: none;
+
+    > span {
+      font-size: 1.75rem;
+    }
+
+    &:hover {
+      @include utils.interaction-style(4%);
+    }
+
+    &:active {
+      @include utils.interaction-style(8%);
+    }
+  }
+}
diff --git a/src/_sass/components/_cards.scss b/src/_sass/components/_cards.scss
new file mode 100644
index 0000000000..f9c13f3ecf
--- /dev/null
+++ b/src/_sass/components/_cards.scss
@@ -0,0 +1,184 @@
+@use '../base/utils';
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  grid-auto-rows: 1fr;
+  gap: 1rem;
+
+  &.wide {
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));;
+  }
+
+  &.narrow {
+    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));;
+  }
+
+  .card-image-holder {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 12rem;
+    background-color: var(--bg-color);
+    overflow: hidden;
+
+    img {
+      position: relative;
+      max-width: 100%;
+      max-height: 100%;
+      width: auto;
+      margin-bottom: 0;
+    }
+
+    svg {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  .card-image-hover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: .3s ease-in-out;
+    opacity: 0;
+    width: 100%;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  a.card {
+    &:hover {
+      @include utils.interaction-style(3%);
+      text-decoration: none;
+    }
+
+    &:active {
+      @include utils.interaction-style(6%);
+    }
+  }
+
+  .card {
+    background-color: var(--site-surface-container);
+    color: var(--site-on-surface);
+    border-radius: var(--site-square-radius);
+    overflow: hidden;
+
+    .card-body {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      padding: 0.75rem;
+
+      img {
+        width: 4.5rem;
+        height: 4.5rem;
+      }
+    }
+
+    .card-text {
+      color: var(--site-on-surface-variant);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .card-title {
+      font-family: var(--site-ui-font-family), sans-serif;
+      font-size: 1.25rem;
+      color: var(--site-primary);
+
+      img {
+        margin-top: 0.5rem;
+      }
+    }
+
+    .card-muted {
+      color: var(--site-on-surface-variant);
+    }
+
+    .card-subtitle {
+      font-size: 0.875rem;
+    }
+
+    .card-center {
+      text-align: center;
+      white-space: nowrap;
+
+      > span {
+        display: block;
+      }
+
+      img {
+        margin-bottom: 0;
+      }
+
+      .material-symbols {
+        font-size: 3rem;
+        line-height: unset;
+      }
+    }
+
+    &:hover {
+      .card-image-hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+// TODO(parlough): Replace the following or share CSS.
+
+.card-os-bug {
+  position: relative;
+
+  ::before {
+    content: "";
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    background-position: center center;
+    background-size: contain;
+    background-color: transparent;
+    background-repeat: no-repeat;
+  }
+}
+
+.card-macos {
+  @extend .card-os-bug;
+
+  ::before {
+    background-image: url("/assets/images/docs/brand-svg/macos-bug.svg");
+  }
+}
+
+.card-windows {
+  @extend .card-os-bug;
+
+  ::before {
+    background-image: url("/assets/images/docs/brand-svg/windows-bug.svg");
+  }
+}
+
+.card-linux {
+  @extend .card-os-bug;
+
+  ::before {
+    background-image: url("/assets/images/docs/brand-svg/linux.svg");
+  }
+}
+
+.card-chromeos {
+  @extend .card-os-bug;
+
+  ::before {
+    background-image: url("/assets/images/docs/brand-svg/chromeos.svg");
+  }
+}
diff --git a/src/_sass/components/_code.scss b/src/_sass/components/_code.scss
index 9f90cf2f02..0c4d9fd5a1 100644
--- a/src/_sass/components/_code.scss
+++ b/src/_sass/components/_code.scss
@@ -1,12 +1,25 @@
 @use 'sass:color';
 
-@use '../base/variables' as *;
-@use '../vendor/bootstrap';
+*:not(pre) > code {
+  font-size: 0.875em;
+  line-height: 1.25em;
+  padding: 0 0.15rem;
+  margin-left: 0.05rem;
+  margin-right: 0.05rem;
+  background-color: var(--site-surface-container-low);
+  background-color: color-mix(in srgb, var(--site-surface-container) 80%, transparent);
+
+  border: 1px solid var(--site-outline-variant);
+  border-radius: 0.25rem;
+  word-wrap: break-word;
+  white-space: nowrap;
+}
 
 pre {
+  overflow: auto;
   margin-bottom: 1rem;
-  font-size: 0.9375rem;
-  font-weight: bootstrap.$font-weight-normal;
+  font-size: 0.9125rem;
+  font-weight: 400;
   padding: 1.25rem;
 
   a {
@@ -15,13 +28,13 @@ pre {
   }
 
   .highlight {
-    background: $flutter-color-yellow-300;
+    background-color: var(--code-highlight-bg-color);
     padding: 0.1em;
   }
 
   .highlight-diagnostics & {
     .highlight {
-      border-bottom: 2px $flutter-color-fuchsia dashed;
+      border-bottom: 2px #E64637 dashed;
       background: inherit;
       padding: 0;
     }
@@ -39,47 +52,8 @@ pre {
     border-left: 2px solid transparent;
 
     &.highlighted-line {
-      background: color.change($site-color-primary, $alpha: 0.05);
-      border-left-color: $site-color-primary;
-    }
-
-    &.added-line, &.removed-line {
-      padding-left: 0.25rem;
-
-      &::before {
-        display: inline-block;
-        user-select: none;
-        width: 0.75rem;
-        margin-right: 0.25rem;
-        text-align: right;
-      }
-    }
-
-    &.added-line {
-      background: color.change($flutter-color-teal, $alpha: 0.03);
-      border-left-color: $flutter-color-teal;
-
-      &::before {
-        content: '+';
-        color: color.mix($site-color-sub-grey, $flutter-color-teal);
-      }
-    }
-
-    &.removed-line {
-      background: color.change($alert-danger-fg, $alpha: 0.03);
-      border-left-color: $alert-danger-fg;
-
-      &::before {
-        content: '-';
-        color: color.mix($site-color-sub-grey, $alert-danger-fg);
-      }
-    }
-
-    .terminal-command::before {
-      color: $site-color-sub-grey;
-      content: "$";
-      content: "$" / "";
-      padding-right: 0.5rem;
+      background: color.change(#0468D7, $alpha: 0.05);
+      border-left-color: #0468D7;
     }
   }
 
@@ -93,7 +67,7 @@ pre {
         width: 2em;
         margin-right: 0.5rem;
         text-align: right;
-        color: $site-color-sub-grey;
+        color: #8d9399;
       }
     }
   }
@@ -110,30 +84,32 @@ pre {
   gap: 0.2rem;
 
   button {
-    padding: 0.2rem;
     appearance: none;
+    padding: 0.2rem;
     border: none;
-    color: $site-color-nav-links;
+    color: #6E7274;
     background: none;
     opacity: 0;
     transition: opacity 0.4s;
+    cursor: pointer;
+    border-radius: var(--site-square-radius);
 
-    &:hover, &:focus {
-      color: $site-color-primary;
+    &:hover, &:focus-visible {
+      color: #0468D7;
       opacity: 1;
     }
 
     &:active {
-      color: $flutter-color-blue;
+      color: #043875;
     }
   }
 }
 
 .code-block-language {
-  font-family: $site-font-family-monospace;
+  font-family: var(--site-code-font-family), monospace;
   user-select: none;
   font-size: 0.8125rem;
-  color: $site-color-nav-links;
+  color: #6E7274;
   opacity: 1;
   transition: opacity 0.25s;
 
@@ -143,7 +119,7 @@ pre {
   z-index: 5;
 
   .highlight-languages .language-dart & {
-    color: $site-color-primary;
+    color: #0468D7;
   }
 
   .highlight-languages .language-js & {
@@ -162,7 +138,7 @@ pre {
 }
 
 .code-block-tag {
-  font-family: $site-font-family-monospace;
+  font-family: var(--site-code-font-family), monospace;
   font-size: 0.8125rem;
   font-weight: 500;
   position: absolute;
@@ -170,22 +146,22 @@ pre {
   left: 6px;
 
   .tag-good &, .tag-passes-sa &, .tag-runtime-success & {
-    color: $alert-success-fg;
+    color: #155723;
   }
 
   .tag-bad &, .tag-fails-sa &, .tag-runtime-fail & {
-    color: $alert-danger-fg;
+    color: #cb1425;
   }
 }
 
 .code-block-wrapper {
   margin-bottom: 1rem;
-  border: 1px solid $flutter-color-grey-500;
+  border: 1px solid var(--site-outline-variant);
 
   .code-block-header {
-    background-color: #e9ecef;
-    border-bottom: 1px solid $flutter-color-grey-500;
-    font-size: 0.9375rem;
+    background-color: var(--site-surface-container-highest);
+    border-bottom: 1px solid var(--site-outline-variant);
+    font-size: 0.9125rem;
     font-weight: 500;
     overflow-x: hidden;
     text-overflow: ellipsis;
@@ -194,7 +170,7 @@ pre {
 
   .code-block-body {
     position: relative;
-    background-color: $site-color-codeblock-bg;
+    background-color: var(--site-surface-container);
 
     &:hover, &:focus-within {
       .code-block-language {
@@ -207,16 +183,16 @@ pre {
     }
 
     &.tag-good, &.tag-passes-sa, &.tag-runtime-success {
-      background-color: $alert-success-bg;
+      background-color: #f1fbf9;
     }
 
     &.tag-bad, &.tag-fails-sa, &.tag-runtime-fail {
-      background-color: $alert-danger-bg;
+      background-color: #fef3f6;
     }
   }
 
   &:has(:focus-visible) {
-    border-color: #1389FD;
+    border-color: var(--site-primary-container);
   }
 
   pre {
@@ -226,7 +202,6 @@ pre {
 
     code {
       display: block;
-      min-width: fit-content;
       width: 100%;
     }
 
@@ -235,12 +210,3 @@ pre {
     }
   }
 }
-
-// Border and resizability for dartpad
-iframe[src^="https://dartpad"] {
-  border: 1px solid #ccc;
-  margin-bottom: 1rem;
-  min-height: 400px;
-  resize: vertical;
-  width: 100%;
-}
diff --git a/src/_sass/components/_content.scss b/src/_sass/components/_content.scss
deleted file mode 100644
index 7fb20bf6cd..0000000000
--- a/src/_sass/components/_content.scss
+++ /dev/null
@@ -1,177 +0,0 @@
-@use '../base/variables' as *;
-@use '../vendor/bootstrap';
-
-// Material design icons
-@mixin md-icon-content($icon-name, $width: '', $bottom: true) {
-  font-family: $site-font-family-icon;
-  content: $icon-name;
-  @if $width != '' {
-    max-width: $width; // Improves UX by minimizing flicker due to delay in font rendering
-  }
-  @if $bottom {
-    vertical-align: bottom;
-  }
-}
-
-@mixin md-icon-before($icon-name, $bottom: true) {
-  &:before { @include md-icon-content($icon-name, '', $bottom); }
-}
-
-.site-content {
-  padding-bottom: $site-content-top-padding;
-  padding-top: $site-content-top-padding;
-
-  .container {
-    max-width: $site-content-max-width;
-
-    img {
-      object-fit: contain;
-    }
-
-    > img, > p > img:not(.text-icon) {
-      margin-bottom: 1rem;
-    }
-  }
-
-  @include bootstrap.media-breakpoint-up(md) {
-    border-left: 1px solid $site-color-light-grey;
-    min-height: calc(100vh - #{$site-header-height} - #{$site-footer-md-default-height});
-  }
-
-  &__title {
-    margin-bottom: bootstrap.bs-spacer(8);
-
-    h1 {
-      margin-bottom: 0;
-    }
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    text-wrap: balance;
-    scroll-margin-top: 5rem;
-  }
-
-  .header-wrapper {
-    display: flex;
-    margin-top: 1.5rem;
-    margin-bottom: 0.75rem;
-    align-items: center;
-
-    h1, h2, h3, h4, h5, h6 {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .heading-link {
-      margin-left: 0.4rem;
-      font-size: 1.3rem;
-      line-height: 1;
-      transition: all 0.15s ease-in-out;
-      overflow: hidden;
-      color: #4a4a4a;
-      opacity: 0;
-      text-decoration: none;
-
-      &:hover {
-        color: $site-color-primary;
-      }
-
-      &:focus {
-        opacity: 1
-      }
-
-      &:active {
-        color: $flutter-color-dark-blue;
-      }
-    }
-
-    &:hover {
-      .heading-link {
-        opacity: 1
-      }
-    }
-  }
-
-  // Embedded DartPad
-  iframe {
-    border: 1px solid #ccc;
-    max-width: 100%;
-  }
-}
-
-nav.breadcrumbs {
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-ol.breadcrumb-list {
-  border-radius: 0.375rem;
-  padding: 0.375rem 0;
-
-  align-items: center;
-  list-style: none;
-
-  font-family: $site-font-family-alt;
-
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-
-  li.breadcrumb-item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 0;
-
-    & a {
-      padding: 0.125rem;
-      border-radius: 0.125rem;
-    }
-
-    &.active a {
-      color: $site-color-nav-links;
-      cursor: default;
-      text-decoration: none;
-    }
-
-    &:before {
-      display: none;
-    }
-  }
-
-  .child-icon {
-    user-select: none;
-  }
-}
-
-#page-github-links {
-  font-style: italic;
-  font-size: 0.75rem;
-  padding-top: 0.25rem;
-
-  border-top: 0.05rem solid $site-color-light-grey;
-}
-
-.video-card {
-  flex: 0 0 calc((100% / 2) - 1rem);
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: #fff;
-  background-clip: border-box;
-  border: 1px solid rgba(0, 0, 0, 0.125);
-  border-radius: 4px;
-  margin-bottom: 1rem;
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
-
-.full-width {
-  width: 100%;
-}
-
-iframe.full-width {
-  aspect-ratio: 16 / 9;
-}
diff --git a/src/_sass/components/_cookie-notice.scss b/src/_sass/components/_cookie-notice.scss
index 88218100b7..1affd26355 100644
--- a/src/_sass/components/_cookie-notice.scss
+++ b/src/_sass/components/_cookie-notice.scss
@@ -1,52 +1,33 @@
-@use '../vendor/bootstrap';
-
 #cookie-notice {
-  background-color: white;
-  padding: 2.5rem 0;
   position: fixed;
   bottom: 0;
-  left: 0;
-  width: 100%;
-  box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.3);
-  opacity: 0;
   display: none;
-  z-index: bootstrap.$zindex-popover;
+  width: 100%;
 
-  @keyframes fadein {
-      0% { opacity: 0; }
-    100% { opacity: 1; }
-  }
+  background-color: var(--site-secondary-container);
+  color: var(--site-on-secondary-container);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 
-  a.btn {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
+  z-index: 100;
+  padding: 1.5rem;
 
-  button {
-    text-wrap: nowrap;
-  }
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  line-height: 1.5;
 
-  &.show {
-    display: block;
-    animation-duration: 500ms;
-    animation-delay: 200ms;
-    animation-name: fadein;
-    animation-iteration-count: 1;
-    animation-timing-function: ease;
-    animation-fill-mode: forwards;
+  p {
+    max-width: 48rem;
   }
 
-  .container {
+  &.show {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    max-width: 1080px;
+  }
 
-    p {
-      font-size: 1rem;
-      line-height: 1.6;
-      margin-right: 1.5rem;
-      margin-bottom: 0;
-    }
+  button {
+    white-space: nowrap;
+    background-color: var(--site-secondary);
+    color: var(--site-on-secondary);
   }
 }
diff --git a/src/_sass/components/_d2h.scss b/src/_sass/components/_d2h.scss
deleted file mode 100644
index e309d4cec4..0000000000
--- a/src/_sass/components/_d2h.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.d2h-wrapper {
-    margin: 1.5rem 0;
-}
-
-.d2h-file-header {
-    display: none;
-}
diff --git a/src/_sass/components/_dropdown.scss b/src/_sass/components/_dropdown.scss
new file mode 100644
index 0000000000..e813e13cb9
--- /dev/null
+++ b/src/_sass/components/_dropdown.scss
@@ -0,0 +1,78 @@
+@use '../base/utils';
+
+.dropdown-menu {
+  position: absolute;
+  inset: unset;
+  right: calc(0.7rem + (var(--from-right) * 2rem));
+  top: 3.5rem;
+  border-radius: var(--site-square-radius);
+  padding: 0;
+  background-color: var(--site-surface-container-low);
+  box-shadow: 0 0 2px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
+  font-family: var(--site-ui-font-family);
+  user-select: none;
+
+  @at-root body.dark-mode & {
+    box-shadow: none;
+    border: 1px solid var(--site-outline-variant);
+  }
+
+  ul {
+    list-style-type: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    padding: 0.5rem;
+
+    a, button {
+      display: flex;
+      gap: 0.5rem;
+      padding: 0.375rem;
+      padding-right: 2rem;
+      text-decoration: none;
+      align-items: center;
+      border-radius: var(--site-square-radius);
+      color: var(--site-on-surface);
+      font-size: 0.875rem;
+      background: none;
+      cursor: pointer;
+      width: 100%;
+
+      .material-symbols {
+        color: var(--site-primary);
+        font-size: 1.25rem;
+      }
+
+      @at-root body {
+        &:not(.auto-mode):not(.dark-mode) {
+          #theme-menu button[data-theme='light'] {
+            background-color: var(--site-secondary-container);
+            color: var(--site-on-secondary-container);   
+          }
+        }
+
+        &.dark-mode:not(.auto-mode) {
+          #theme-menu button[data-theme='dark'] {
+            background-color: var(--site-secondary-container);
+            color: var(--site-on-secondary-container);  
+          }
+        }
+        
+        &.auto-mode {
+          #theme-menu button[data-theme='auto'] {
+            background-color: var(--site-secondary-container);
+            color: var(--site-on-secondary-container);  
+          }
+        }
+      }
+
+      &:hover {
+        @include utils.interaction-style(4%);
+      }
+
+      &:active {
+        @include utils.interaction-style(8%);
+      }
+    }
+  }
+}
diff --git a/src/_sass/components/_footer.scss b/src/_sass/components/_footer.scss
index dc6d28d98d..b4c9c84987 100644
--- a/src/_sass/components/_footer.scss
+++ b/src/_sass/components/_footer.scss
@@ -1,57 +1,111 @@
-@use '../base/variables' as *;
-@use '../vendor/bootstrap';
+@use '../base/utils';
 
-.site-footer {
-  background-color: $site-color-footer;
-  color: $site-color-white;
-  padding: bootstrap.bs-spacer(5) 0;
+#site-footer {
   position: relative;
-  z-index: bootstrap.$zindex-sticky;
+  background-color: var(--site-surface);
+  padding: 1rem;
+  border-radius: var(--site-square-radius);
+  margin: 0 1rem 1rem;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  font-size: 14px;
+  font-family: var(--site-ui-font-family), sans-serif;
 
-  &__logo {
-    height: 100px;
-    width: 81px;
+  @media(max-width: 576px) {
+    margin: 1rem 0 0;
+    border-radius: 0;
   }
 
-  &__wrapper {
-    align-items: center;
+  > div {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: space-between;
+    text-align: left;
+    width: 100%;
+
+    @media(max-width: 768px) {
+      flex-direction: column;
+      text-align: center;
 
-    @include bootstrap.media-breakpoint-up(sm) {
-      flex-direction: row;
+      ul {
+        text-align: center;
+      }
     }
   }
 
-  &__content {
-    font-size: bootstrap.$font-size-sm;
-    margin: bootstrap.bs-spacer(5) 0;
+  .footer-main {
+    margin-bottom: 1rem;
+    align-items: center;
+  }
+
+  .footer-tray {
+    border-top: 1px solid var(--site-outline-variant);
+    padding-top: 1.25rem;
+    width: 100%;
+
+    .footer-licenses {
+      width: 70%;
+
+      @media(max-width: 768px) {
+        width: 100%;
+      }
+    }
 
     a {
-      color: $site-color-white;
+      color: var(--site-on-surface-variant);
+
+      &:hover {
+        color: #0468d7;
+      }
     }
+  }
+
+  .footer-social-links {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    align-items: center;
+
+    a {
+      color: var(--site-on-surface-variant);
+      padding: 0.375rem;
+
+      svg {
+        height: 1.75rem;
+        width: 1.75rem;
+      }
+
+      &:hover {
+        text-decoration: none;
+        @include utils.interaction-style(3%);
+      }
 
-    .licenses {
-      font-size: 10px;
+      &:active {
+        @include utils.interaction-style(6%);
+      }
     }
 
-    @include bootstrap.media-breakpoint-up(sm) {
-      margin: 0 bootstrap.bs-spacer(5);
-      flex-grow: 1;
+    @media(max-width: 768px) {
+      margin-top: 1rem;
     }
   }
 
-  &__link-list {
-    list-style: none;
+  ul {
+    list-style-type: none;
+    margin: 0;
     padding: 0;
+    text-align: right;
 
     li {
-      &:not(:last-child):after {
-        content: '\2022'; // &bull;
-        padding-left: bootstrap.bs-spacer(1);
-      }
       display: inline;
-      padding-right: bootstrap.bs-spacer(1);
+      margin-left: .75rem;
+    }
+
+    @media(max-width: 768px) {
+      margin-top: .75rem;
+
+      li:first-child {
+        margin-left: 0;
+      }
     }
   }
 }
diff --git a/src/_sass/components/_header.scss b/src/_sass/components/_header.scss
index 3e04bc6716..b2c8d1ba85 100644
--- a/src/_sass/components/_header.scss
+++ b/src/_sass/components/_header.scss
@@ -1,291 +1,153 @@
-@use '../base/variables' as *;
-@use '../vendor/bootstrap';
-
-.site-header {
-  background-color: $site-color-white;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
-  font-family: $site-font-family-alt;
-  position: sticky;
+@use '../base/utils';
+
+#site-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: var(--site-surface-container-low);
+  gap: 1rem;
+  align-items: center;
+  min-height: 4rem;
+  max-height: 5rem;
   top: 0;
-  z-index: bootstrap.$zindex-fixed;
-
-  .navbar {
-    font-size: bootstrap.$font-size-lg;
-    min-height: $site-header-height;
-
-    @include bootstrap.media-breakpoint-up(md) {
-      font-size: bootstrap.$font-size-base;
-    }
-
-    .navbar-toggler {
-      color: $site-color-body;
-      margin-right: bootstrap.bs-spacer(4);
-      padding: 0;
-
-      .material-symbols {
-        font-size: 28px;
-      }
-    }
-
-    .navbar-brand {
-      margin-right: auto;
-
-      img {
-        width: 129px;
-        height: 37px;
-      }
-    }
-
-    .nav-link {
-      color: $site-color-body-light;
-      padding: bootstrap.bs-spacer(5) 0;
-      position: relative;
-
-      @include bootstrap.media-breakpoint-up(md) {
-        padding: 0 bootstrap.bs-spacer(4);
-      }
+  position: sticky;
+  z-index: 10;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 
-      &.active {
-        color: $site-color-body;
-        font-weight: 500;
+  @at-root body.dark-mode & {
+    box-shadow: none;
+    border-bottom: 1px solid var(--site-outline-variant);
+  }
+}
 
-        @include bootstrap.media-breakpoint-up(md) {
-          &:after {
-            $nav-active-marker-thickness: 3px;
-            background-color: $site-color-primary;
-            content: '';
-            display: block;
-            height: $nav-active-marker-thickness;
-            left: 0;
-            position: absolute;
-            top: calc(50% + (#{$site-header-height} / 2) - #{$nav-active-marker-thickness});
-            width: 100%;
-          }
-        }
-      }
+#header-leading {
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
+  justify-self: start;
+  align-items: center;
+  user-select: none;
+
+  font-variant-ligatures: none;
+  font-size: 1.75rem;
+  line-height: 2.5rem;
+  font-family: var(--site-ui-font-family), sans-serif;
+
+  .flutter-logo > span {
+    @media(max-width: 768px) {
+      display: none;
     }
   }
+}
 
-  .navbar-collapse {
-    bottom: 0;
-    height: auto !important; // override bootstrap's height calculation
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    transition-duration: 0s;
-    z-index: bootstrap.$zindex-fixed;
-
-    @include bootstrap.media-breakpoint-down(sm) {
-      pointer-events: none;
-
-      &:not(.show) {
-        display: block;
-      }
+#header-trailing {
+  justify-self: end;
+  display: grid;
+  grid-auto-flow: column;
+  gap: 0.5rem;
 
-      &.show {
-        pointer-events: auto;
-        transition-duration: 0.35s;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 
-        .site-header__sheet {
-          transform: translateX(0);
-        }
-        .site-header__sheet-bg {
-          opacity: 1;
-        }
+  search {
+    display: flex;
+    flex-direction: row;
+    height: 2.5rem;
+    border-radius: var(--site-square-radius);
+    padding: 0.5rem;
+    margin-right: 0.5rem;
+    width: 15rem;
+
+    font-family: var(--site-ui-font-family);
+    background-color: var(--site-surface-container-high);
+    transition: 0.25s width ease-in-out;
+
+    .icon-button {
+      background-image: none;
+
+      &:hover {
+        color: var(--site-primary);
       }
 
-      .navbar-nav {
-        margin-bottom: bootstrap.bs-spacer(5);
-        overflow-y: auto;
-        overscroll-behavior: contain;
+      > span {
+        font-size: 1.5rem;
       }
     }
 
-    @include bootstrap.media-breakpoint-up(md) {
-      position: static;
+    &:hover {
+      @include utils.interaction-style(2%);
     }
-  }
-
-  &__sheet {
-    display: flex;
-    z-index: bootstrap.$zindex-modal;
 
-    @include bootstrap.media-breakpoint-down(sm) {
-      background: $site-color-white;
-      bottom: 0;
-      flex-direction: column;
-      left: 0;
-      position: absolute;
-      right: 60px;
-      top: 0;
-      transform: translateX(-100%);
-      transition: transform 0.35s ease-in-out;
-
-      > * {
-        margin: 0 $site-nav-mobile-side-padding;
+    &:focus-within {
+      outline: 2px solid var(--site-primary-container);
+      @media(min-width: 621px) {
+        width: 18rem;
       }
-    }
-
-    @include bootstrap.media-breakpoint-up(md) {
-      align-items: center;
-      flex-direction: row;
-    }
-  }
-
-  &__sheet-bg {
-    cursor: pointer; // needed for iOS to recognize the div as clickable
-    z-index: bootstrap.$zindex-modal-backdrop;
-
-    @include bootstrap.media-breakpoint-down(sm) {
-      background: rgba(0, 0, 0, .4);
-      bottom: 0;
-      left: 0;
-      opacity: 0;
-      position: absolute;
-      right: 0;
-      top: 0;
-      transition: opacity 0.35s ease-in-out;
-    }
-  }
 
-  &__cta {
-    margin-left: bootstrap.bs-spacer(2);
-    padding: bootstrap.bs-spacer(2) bootstrap.bs-spacer(4) !important;
-
-    @include bootstrap.media-breakpoint-down(sm) { display: none; }
-  }
-
-  &__search {
-    position: relative;
-
-    &::before {
-      content: 'search';
-      content: 'search' / '';
-      font: $site-font-icon;
-      pointer-events: none;
-      position: absolute;
-      left: bootstrap.bs-spacer(1);
-    }
-
-    @include bootstrap.media-breakpoint-down(sm) {
-      border-bottom: 1px solid $site-color-light-grey;
-      flex-shrink: 0;
-      margin: 0;
-      order: -1;
-      padding: 0 $site-nav-mobile-side-padding;
-
-      &::before {
-        left: $site-nav-mobile-side-padding;
+      @media(min-width: 769px) {
+        width: 22rem;
       }
-    }
 
-    @include bootstrap.media-breakpoint-up(md) {
-      margin-left: bootstrap.bs-spacer(4);
-    }
-  }
-
-  &__searchfield {
-    border: 0;
-    font-size: bootstrap.$font-size-sm;
-    padding-left: bootstrap.bs-spacer(8);
-
-    @include bootstrap.media-breakpoint-down(md) {
-      font-size: bootstrap.$font-size-lg;
-      height: 66px;
-      width: 100% !important;
+      @media(min-width: 961px) {
+        width: 30rem;
+      }
     }
 
-    @include bootstrap.media-breakpoint-up(md) {
-      transition: width .35s ease-in-out;
-      width: 24px !important;
+    input {
+      border-radius: var(--site-square-radius);
+      caret-color: var(--site-primary-container);
+      padding: 0.5rem;
+      background: none;
+      text-overflow: ellipsis;
+      width: 100%;
+      overscroll-behavior: contain;
 
       &:focus {
-        width: 220px !important;
+        outline: none;
       }
     }
-  }
-
-  &__social {
-    .nav-item.nav-link {
-      padding: 0 bootstrap.bs-spacer(2);
-
-      @include bootstrap.media-breakpoint-down(sm) {
-        padding: 0 bootstrap.bs-spacer(1);
-        font-size: smaller;
-      }
-
-      &.nav-icon {
-        color: $site-color-nav-links;
-
-        &:hover {
-          color: $site-color-body-light;
-        }
 
-        svg {
-          height: 24px;
-          width: 24px;
-        }
-      }
+    @media(max-width: 576px) {
+      display: none;
     }
   }
-}
-
-
-header.site-header {
 
-  .dropdown-menu {
-    top: 32px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
-    border-radius: 4px;
-    padding: 0.75rem;
-    border: 1px solid #eee;
+  #open-search {
+    @media(min-width: 577px) {
+      display: none;
+    }
   }
+}
 
-  .dropdown-item {
-    padding: 0.55rem 1.2rem;
-    font-size: 14px;
-    color: #444;
-    border-radius: 4px;
+#docs-button {
+  padding: 0 0.25rem;
+  border-radius: var(--site-square-radius);
 
-    &:hover,
-    &.active {
-      color: #000;
-      background-color: #f6f6f6;
-      transition: background-color 300ms ease;
-    }
+  background-color: var(--site-secondary-container);
+  color: var(--site-on-surface);
 
-    &.active {
-      font-weight: 500;
-    }
+  &:hover {
+    text-decoration: none;
+    @include utils.interaction-style(4%);
   }
 
-  .dropdown-toggle::after {
-    position: relative;
-    top: 1px;
+  &:active {
+    @include utils.interaction-style(8%);
   }
+}
 
-  @include bootstrap.media-breakpoint-down(sm) {
-    .navbar-collapse {
-      .navbar-nav {
-        margin-top: 1.5rem;
-        margin-bottom: 1.5rem;
-      }
-    }
+#menu-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    .site-header__sheet > * {
-      margin: 0;
-    }
-  }
+  height: 100%;
+  margin-left: 0.5rem;
 
-  @include bootstrap.media-breakpoint-down(md) {
-    .site-header__sheet .navbar-nav > .nav-item {
-      display: none;
-    }
-  }
+  > button {
+    padding: 0.5rem;
 
-  @include bootstrap.media-breakpoint-down(lg) {
-    .site-header__sheet .navbar-nav .nav-item.docs-item {
+    > span:first-child {
       display: none;
     }
   }
diff --git a/src/_sass/components/_icons.scss b/src/_sass/components/_icons.scss
new file mode 100644
index 0000000000..1c9ce22a37
--- /dev/null
+++ b/src/_sass/components/_icons.scss
@@ -0,0 +1,63 @@
+@use '../base/utils';
+
+.material-symbols {
+  //noinspection CssNoGenericFontName
+  font-family: 'Material Symbols Outlined';
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  vertical-align: middle;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+
+  &.ms-filled {
+    font-variation-settings: 'FILL' 1;
+  }
+}
+
+.flutter-logo {
+  padding: 0.25rem;
+  border-radius: var(--site-square-radius);
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+
+  font-variant-ligatures: none;
+  color: var(--flutter-wordmark-color);
+  font-size: 1.75rem;
+  line-height: 2.5rem;
+  font-family: var(--site-ui-font-family), sans-serif;
+
+  > img {
+    height: 2.25rem;
+    margin-right: 0.6rem;
+  }
+
+  &:hover {
+    text-decoration: none;
+    color: var(--flutter-wordmark-color);
+
+    @include utils.interaction-style(4%);
+  }
+
+  &:active {
+    @include utils.interaction-style(7%);
+  }
+}
+
+img.text-icon {
+  margin: 0;
+  height: 24px;
+  width: 24px;
+  vertical-align: text-bottom;
+}
diff --git a/src/_sass/components/_juicy-button.scss b/src/_sass/components/_juicy-button.scss
deleted file mode 100644
index eecdf18ed4..0000000000
--- a/src/_sass/components/_juicy-button.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-// A big button centered on top of an image.
-//
-// The container is typically a <div> element. The div has only 2 children:
-// an <img> element (the background) and a <a class="btn"> button.
-//
-// The image should be very bright and slightly blurred so that the button
-// stands out.
-.juicy-button-container {
-  position: relative;
-  width: 100%;
-  padding: 2em 0;
-
-  img {
-    // Take available space in the container.
-    width: 100%;
-    height: auto;
-  }
-
-  .btn {
-    // Center the button in the container.
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-
-    // Add a white "glow" that separates the button from the background.
-    box-shadow: 0 0 10px 10px white ;
-
-    // Make the button extra large.
-    @media (min-width: 600px) {
-      font-size: 150%;
-      padding: 0.7rem;
-    }
-
-    @media (min-width: 900px) {
-      font-size: 200%;
-      padding: 1.0rem;
-    }
-  }
-}
diff --git a/src/_sass/components/_media.scss b/src/_sass/components/_media.scss
new file mode 100644
index 0000000000..76feba6302
--- /dev/null
+++ b/src/_sass/components/_media.scss
@@ -0,0 +1,99 @@
+img, iframe, svg, figure {
+  max-width: 100%;
+  object-fit: contain;
+}
+
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+iframe {
+  max-width: 100%;
+
+  &[src*="youtube.com"] {
+    aspect-ratio: auto;
+    border-radius: var(--site-square-radius);;
+    margin-bottom: 0.25rem;
+  }
+
+  &[src*="dartpad.dev"], &[src*="dartpad.cn"] {
+    width: 100%;
+    min-height: 20rem;
+    border: 1px solid var(--site-outline-variant);
+    border-radius: var(--site-square-radius);
+    resize: vertical;
+    overflow-y: auto;
+  }
+}
+
+.video-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+
+  .video-intro {
+    font-weight: 500;
+    padding: 0 0.75rem;
+    text-wrap: pretty;
+  }
+}
+
+figure {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  img {
+    margin-bottom: 0.5rem;
+    max-width: 25rem;
+  }
+
+  figcaption {
+    font-size: 0.875em;
+    font-style: italic;
+    text-align: center;
+  }
+
+  .site-figure-container {
+    text-align: center;
+  }
+
+  &.code-and-image {
+    gap: 0.25rem;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    > div {
+      width: 100%;
+
+      &:last-child {
+        text-align: center;
+      }
+    }
+
+    @media(min-width: 769px) {
+      > div {
+        &:first-child {
+          flex: 0 0 50%;
+          max-width: 50%;
+        }
+
+        &:last-child {
+          flex: 0 0 47%;
+          max-width: 47%;
+        }
+      }
+
+      figcaption {
+        text-align: left;
+      }
+
+      img {
+        max-width: 100%;
+      }
+    }
+  }
+}
diff --git a/src/_sass/components/_misc.scss b/src/_sass/components/_misc.scss
new file mode 100644
index 0000000000..2aedf5d320
--- /dev/null
+++ b/src/_sass/components/_misc.scss
@@ -0,0 +1,82 @@
+.install-help {
+  text-align: right;
+  margin-top: -2.5rem;
+
+  a {
+    display: inline-flex;
+    align-items: center;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .material-symbols {
+    font-size: 20px;
+    margin-right: 0.125rem;
+  }
+}
+
+#skip-to-main {
+  position: absolute;
+  top: 1rem;
+  left: -24rem;
+  opacity: 0;
+  width: 0;
+  z-index: 100;
+
+  &:focus {
+    width: auto;
+    opacity: 1;
+    transform: translateX(25rem);
+  }
+}
+
+#page-github-links {
+  font-style: italic;
+  font-size: 0.75rem;
+  padding-top: 0.25rem;
+  margin-bottom: 0;
+
+  border-top: 0.05rem solid var(--site-outline-variant);
+}
+
+// A big button centered on top of an image.
+//
+// The container is typically a <div> element. The div has only 2 children:
+// an <img> element (the background) and a <a class="filled-button"> button.
+//
+// The image should be very bright and slightly blurred so that the button
+// stands out.
+.juicy-button-container {
+  position: relative;
+  padding: 2em 0;
+
+  img {
+    width: 100%;
+    height: auto;
+    margin-bottom: 0;
+  }
+
+  .filled-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    white-space: nowrap;
+
+    // Add a white "glow" that separates the button from the background.
+    box-shadow: 0 0 10px 10px white;
+
+    // Make the button extra large.
+    @media (min-width: 600px) {
+      font-size: 150%;
+      padding: 0.7rem;
+    }
+
+    @media (min-width: 900px) {
+      font-size: 200%;
+      padding: 1rem;
+    }
+  }
+}
diff --git a/src/_sass/components/_next-prev-nav.scss b/src/_sass/components/_next-prev-nav.scss
deleted file mode 100644
index 77158e21e1..0000000000
--- a/src/_sass/components/_next-prev-nav.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@use '../vendor/bootstrap';
-
-.site-nextprev-nav, // Nav with both links
-.site-nextprev-nav__single // Nav with single link
-{
-  clear: both;
-
-  ul {
-    $spacer-base: bootstrap.bs-spacer(3);
-
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-
-    li {
-      display: flex;
-      margin-bottom: $spacer-base;
-      white-space: nowrap;
-
-      a {
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-
-      &.prev:before {
-        color: bootstrap.$primary;
-        content: "\2329"; // &lang;
-        padding-right: $spacer-base * 0.5;
-      }
-
-      &.next {
-        justify-content: flex-end;
-        text-align: right;
-      }
-
-      &.next:after {
-        color: bootstrap.$primary;
-        content: "\232A"; // &rang;
-        padding-left: $spacer-base * 0.5;
-      }
-    }
-  }
-}
-
-.site-nextprev-nav > ul > li {
-  width: 49%;
-
-  &.prev { float: left; }
-}
-
-.site-nextprev-nav__single > ul > li {
-  &.prev { width: 100%; }
-
-  &.next {
-    float: right;
-    width: 100%;
-  }
-}
diff --git a/src/_sass/components/_prev-next.scss b/src/_sass/components/_prev-next.scss
new file mode 100644
index 0000000000..fc23a2fcfd
--- /dev/null
+++ b/src/_sass/components/_prev-next.scss
@@ -0,0 +1,60 @@
+@use '../base/utils';
+
+#site-prev-next {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+
+  .prev {
+    text-align: left;
+    justify-content: flex-start;
+  }
+
+  .next {
+    text-align: right;
+    justify-content: flex-end;
+    margin-left: auto;
+  }
+
+  .prev:only-child, .next:only-child {
+    max-width: 50%;
+  }
+
+  a {
+    overflow-x: hidden;
+    flex-basis: 100%;
+
+    text-decoration: none;
+    background-color: var(--site-surface);
+    color: var(--site-on-surface);
+    border: 1px solid var(--site-outline-variant);
+    border-radius: var(--site-square-radius);
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.5rem;
+    min-height: 100%;
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      padding: 0.5rem;
+
+      :first-child {
+        font-size: 0.75rem;
+        line-height: 0.75rem;
+      }
+    }
+
+    &:hover {
+      @include utils.interaction-style(3%);
+    }
+
+    &:active {
+      @include utils.interaction-style(5%);
+    }
+  }
+}
diff --git a/src/_sass/components/_side-menu.scss b/src/_sass/components/_side-menu.scss
new file mode 100644
index 0000000000..8be5ccc7e6
--- /dev/null
+++ b/src/_sass/components/_side-menu.scss
@@ -0,0 +1,87 @@
+#side-menu {
+  position: sticky;
+  top: 1rem;
+  max-height: calc(100vh - 80px);
+  padding-bottom: 1rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  height: fit-content;
+  min-width: 13rem;
+  max-width: 13rem;
+  overflow-y: auto;
+  font-family: var(--site-ui-font-family), sans-serif;
+
+  @media(max-width: 1216px) {
+    display: none;
+  }
+
+  > nav {
+    header {
+      font-size: 1rem;
+      margin-block-end: 0.25rem;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 0.25rem;
+
+      span.material-symbols {
+        color: var(--site-primary);
+        user-select: none;
+      }
+    }
+
+    > ul {
+      --toc-indent: 0;
+
+      > li {
+        li {
+          --toc-indent: 1;
+
+          > li {
+            --toc-indent: 2;
+          }
+        }
+      }
+    }
+
+    ul {
+      padding: 0;
+      font-size: 0.875rem;
+      list-style: none;
+
+      li {
+        span.sidenav-item {
+          display: block;
+          margin-left: 12px;
+          border-radius: 0;
+          border-inline-start: 2px solid var(--site-outline-variant);
+          padding: 0.125rem 0.125rem 0.125rem calc(0.75rem + var(--toc-indent) * 0.5rem);
+          margin-right: 0.25rem;
+
+          &.active {
+            border-inline-start: 3px solid #1967d2;
+            margin-left: 11px;
+          }
+        }
+
+        a {
+          color: var(--site-on-surface-variant);
+          display: block;
+          text-decoration: none;
+          padding: 0.2rem;
+
+          &:hover {
+            color: #0468d7;
+          }
+
+          &:active {
+            color: #03448c;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/_sass/components/_sidebar.scss b/src/_sass/components/_sidebar.scss
deleted file mode 100644
index ab9c420e1a..0000000000
--- a/src/_sass/components/_sidebar.scss
+++ /dev/null
@@ -1,193 +0,0 @@
-@use 'sass:color';
-
-@use '../base/variables' as *;
-@use '../vendor/bootstrap';
-
-.site-sidebar {
-  font-family: $site-font-family-alt;
-  padding: $site-sidebar-top-padding 0 ($site-sidebar-top-padding * 2);
-
-  // Customization for sidebar in mobile nav
-  &.site-sidebar--header {
-    padding: 0;
-
-    > .nav > .nav-item {
-      font-size: bootstrap.$font-size-base;
-    }
-
-    > .nav > .nav-item,
-    > .nav > .nav-item .nav .nav-item {
-      .nav-link {
-        padding-top: bootstrap.bs-spacer(2);
-        padding-bottom: bootstrap.bs-spacer(1);
-
-        &.collapsible {
-          padding-bottom: bootstrap.bs-spacer(2);
-        }
-      }
-    }
-  }
-
-  .sidebar-primary-divider {
-    height: 0;
-    margin-top: bootstrap.bs-spacer(1);
-    margin-bottom: bootstrap.bs-spacer(1);
-    overflow: hidden;
-    border-top: 1px solid $site-color-light-grey;
-  }
-
-  @mixin nav-link-active-style {
-    &.active {
-      font-weight: bootstrap.$font-weight-bold;
-
-      &:not(.collapsible) {
-        color: $site-color-primary;
-
-        &:hover {
-          color: $flutter-color-dark-blue;
-        }
-      }
-    }
-  }
-
-  @mixin nav-link-not-active-hover {
-    &:not(.disabled) {
-      &:hover {
-        color: $site-color-primary;
-      }
-    }
-  }
-
-  .nav-header {
-    font-weight: bootstrap.$font-weight-bolder;
-    font-size: bootstrap.$font-size-base;
-    user-select: none;
-    color: color.scale($site-color-body-light, $lightness: 15%);
-  }
-
-  .nav-link {
-    display: flex;
-    position: relative;
-    align-items: center;
-
-    padding: bootstrap.bs-spacer(1) 0;
-    color: inherit;
-    &.disabled { opacity: 0.5; }
-
-    @include nav-link-active-style;
-
-    @include nav-link-not-active-hover;
-  }
-
-  @mixin collapsible() {
-    align-items: flex-end;
-    display: flex;
-    justify-content: space-between;
-
-    &::after {
-      // Duplicated since Firefox doesn't support content alt text.
-      content: 'keyboard_arrow_down';
-      content: 'keyboard_arrow_down' / '';
-      font: $site-font-icon;
-      transition: transform .25s ease-in-out;
-    }
-
-    &:not(.collapsed) {
-      &::after {
-        content: 'keyboard_arrow_down' / '';
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  // Top-level nav item
-  > .nav {
-    > .nav-item, > .nav-header {
-      padding: 0 $site-sidebar-side-padding;
-    }
-
-    > .nav-header:first-child {
-      padding-top: 0;
-    }
-
-    > .nav-item {
-      > .nav-link {
-        @include nav-link-active-style;
-
-        &.collapsible {
-          padding: bootstrap.bs-spacer(2) 0;
-
-          @include collapsible();
-
-          @include nav-link-not-active-hover;
-        }
-
-        &:not(.collapsible) {
-          padding: bootstrap.bs-spacer(1) 0;
-        }
-      }
-
-      &:first-child {
-        > .nav-link {
-          padding-top: 0;
-        }
-      }
-    }
-
-    > .nav-header {
-      padding-top: bootstrap.bs-spacer(1);
-
-      & + .nav-item {
-        // The first item after a top-level header should have
-        // consistent padding, no matter if it's a link or collapsible.
-        .nav-link {
-          padding-top: bootstrap.bs-spacer(2);
-        }
-      }
-    }
-  }
-
-  // Sub navs
-  > .nav .nav {
-    padding-left: bootstrap.bs-spacer(4);
-    margin-bottom: bootstrap.bs-spacer(1);
-
-    .nav-header {
-      font-size: bootstrap.$font-size-sm;
-
-      &:not(:first-child) {
-        margin-top: bootstrap.bs-spacer(2);
-      }
-    }
-
-    .nav-item {
-      font-size: bootstrap.$font-size-sm;
-
-      > .nav-link {
-        color: $site-color-body-light;
-
-        @include nav-link-not-active-hover;
-        @include nav-link-active-style;
-
-        &.collapsible {
-          &::before {
-            // Duplicated since Firefox doesn't support content alt text.
-            content: 'arrow_drop_down';
-            content: 'arrow_drop_down' / '';
-            font: $site-font-icon;
-            left: -24px;
-            position: absolute;
-            transition: transform .25s ease-in-out;
-          }
-
-          &.collapsed {
-            &::before {
-              content: 'arrow_drop_down' / '';
-              transform: rotate(-90deg);
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/_sass/components/_sidenav.scss b/src/_sass/components/_sidenav.scss
new file mode 100644
index 0000000000..d11a6e7b06
--- /dev/null
+++ b/src/_sass/components/_sidenav.scss
@@ -0,0 +1,164 @@
+@use '../base/utils';
+
+#sidenav {
+  margin: 0;
+  overflow-y: auto;
+  min-width: 16rem;
+  width: 16rem;
+  max-height: calc(100vh - 80px);
+  padding-right: 1rem;
+  padding-left: 0.5rem;
+  padding-bottom: 2rem;
+  font-family: var(--site-ui-font-family), sans-serif;
+  position: sticky;
+  top: 1rem;
+
+  .nav-header {
+    font-weight: bolder;
+    padding: 0.25rem 0.4rem 0;
+    color: var(--site-on-surface-variant);
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .sidenav-divider {
+    background-color: var(--site-surface-variant);
+    border-radius: 0.5rem;
+    width: 100%;
+    height: 0.125rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  li {
+    margin: 0;
+    padding: 0;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    width: 100%;
+    user-select: none;
+
+    .nav-header:not(:first-child) {
+      margin-top: 0.5rem;
+    }
+
+    a.nav-link {
+      text-wrap: pretty;
+      padding: 0.25rem 0.4rem;
+      margin-top: 0.25rem;
+      margin-bottom: 0.25rem;
+
+      border-radius: var(--site-square-radius);
+
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+
+      cursor: pointer;
+
+      color: var(--site-on-surface);
+      text-decoration: none;
+
+      > div {
+        display: inline-block;
+
+        .material-symbols {
+          font-size: 0.875rem;
+          margin-left: 0.125rem;
+        }
+      }
+
+      span {
+        vertical-align: middle;
+      }
+
+      .expander {
+        color: var(--site-on-surface-variant);
+        transition: transform cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+      }
+
+      + ul {
+        display: none;
+      }
+
+      &:hover {
+        @include utils.interaction-style(6%);
+      }
+
+      &:active {
+        @include utils.interaction-style(8%);
+      }
+
+      &:not(.collapsed) {
+        .expander {
+          transform: rotate(180deg);
+        }
+
+        + ul {
+          display: block;
+        }
+      }
+
+      &.active {
+        background-color: var(--site-surface-container-highest);
+        color: var(--site-on-surface);
+
+        &:not(.collapsible) {
+          background-color: var(--site-secondary-container);
+          color: var(--site-on-secondary-container);
+        }
+      }
+    }
+  }
+
+  > ul {
+    ul {
+      margin-left: 0.5rem;
+    }
+  }
+}
+
+@media(max-width: 768px) {
+  #sidenav {
+    display: none;
+  }
+
+  #menu-button button > span {
+    &:first-child {
+      display: unset;
+    }
+
+    &:last-child {
+      display: none;
+    }
+  }
+
+  body.menu-narrow-toggled {
+    #sidenav {
+      display: unset;
+      width: 100%;
+      padding: 0 0.5rem 1rem;
+      max-height: unset;
+      margin-top: 0.5rem;
+    }
+
+    #content-and-toc, #site-footer {
+      display: none;
+    }
+
+    #menu-button button > span {
+      &:first-child {
+        display: none;
+      }
+
+      &:last-child {
+        display: unset;
+      }
+    }
+  }
+}
diff --git a/src/_sass/components/_tables.scss b/src/_sass/components/_tables.scss
new file mode 100644
index 0000000000..ee7572dd3b
--- /dev/null
+++ b/src/_sass/components/_tables.scss
@@ -0,0 +1,48 @@
+table.table {
+  border-spacing: 0;
+  width: 100%;
+
+  thead {
+    background-color: var(--site-surface-container-highest);
+    border-top-right-radius: var(--site-square-radius);
+  }
+
+  th:first-of-type {
+    border-top-left-radius: var(--site-square-radius);
+  }
+
+  th:last-of-type {
+    border-top-right-radius: var(--site-square-radius);
+  }
+
+  td, th {
+    padding: 0.75rem;
+  }
+
+  td {
+    border-top: 1px solid var(--site-outline-variant);
+  }
+
+  &.table-striped tbody tr:nth-of-type(odd) {
+    background-color: var(--site-surface-container);
+  }
+}
+
+.table-wrapper, .scrollable-table {
+  border-radius: var(--site-square-radius);
+  border: 1px solid var(--site-outline-variant);
+  overflow-x: auto;
+
+  img {
+    margin-bottom: 0.5rem; 
+  }
+}
+
+.scrollable-table {
+  overflow-y: scroll;
+  max-height: 20rem;
+
+  table {
+    width: 100%;
+  }
+}
diff --git a/src/_sass/components/_tabs.scss b/src/_sass/components/_tabs.scss
new file mode 100644
index 0000000000..fdd7190498
--- /dev/null
+++ b/src/_sass/components/_tabs.scss
@@ -0,0 +1,51 @@
+@use '../base/utils';
+
+.tab-pane {
+  display: none;
+
+  &.active {
+    display: block;
+  }
+}
+
+ul.nav-tabs {
+  list-style: none;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  padding: 0.5rem;
+  border-radius: var(--site-square-radius);
+  background-color: var(--site-surface-container-high);
+  gap: 0.5rem;
+
+  a {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+    padding: 0.375rem;
+    border-radius: var(--site-square-radius);
+
+    &:hover {
+      background-color: var(--site-surface-container-highest);
+    }
+
+    &.active {
+      background-color: var(--site-secondary-container);
+      color: var(--site-on-secondary-container);
+
+      &:hover {
+        @include utils.interaction-style(5%);
+      }
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--site-primary-container);
+
+      a {
+        outline: none;
+      }
+    }
+  }
+}
diff --git a/src/_sass/components/_toc.scss b/src/_sass/components/_toc.scss
deleted file mode 100644
index 7ae014c6ca..0000000000
--- a/src/_sass/components/_toc.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-@use '../base/variables' as *;
-@use '../vendor/bootstrap';
-
-.site-toc {
-  ul {
-    padding-left: 0;
-    margin-left: 0;
-    list-style: none;
-    flex-direction: column;
-  }
-
-  &__title {
-    font-family: $site-font-family-alt;
-    font-size: 18px;
-    margin-bottom: bootstrap.bs-spacer(2);
-  }
-}
-
-#site-toc--side {
-  padding: $site-content-top-padding 20px bootstrap.bs-spacer(2) 28px;
-
-  display: none;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  width: 246px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  overflow-wrap: break-word;
-  z-index: 5;
-
-  @include bootstrap.media-breakpoint-up(xl) {
-    display: block;
-  }
-
-  .toc-entry {
-    padding-bottom: bootstrap.bs-spacer(2);
-    font-size: bootstrap.$font-size-sm;
-
-    .nav {
-      padding-top: 0.5rem;
-      padding-left: 1rem;
-      display: block;
-    }
-  }
-
-  .nav-link {
-    color: $site-color-body-light;
-    font-size: bootstrap.$font-size-sm;;
-    line-height: normal;
-    padding: 1px 0;
-
-    &:hover {
-      color: $site-color-primary;
-    }
-
-    &.active {
-      color: $site-color-primary;
-
-      &:hover {
-        color: $flutter-color-dark-blue;
-      }
-    }
-  }
-
-  body.hide_toc & {
-    display: none;
-  }
-}
-
-#site-toc--inline {
-  background: #f5f5f7;
-  padding: 1rem 1.5rem;
-  margin-bottom: 1rem;
-
-  @include bootstrap.media-breakpoint-up(xl) {
-    display: none;
-  }
-
-  .toc-entry ul {
-    padding-left: 1rem;
-  }
-
-  > .section-nav {
-    margin-bottom: 0.25rem;
-  }
-
-  &.toc-collapsible {
-    .site-toc--inline__toggle {
-      float: right;
-    }
-
-    .toc-toggle-down, .toc-toggle-more-items {
-      display: none;
-    }
-
-    .toc-toggle-more-items {
-      float: unset;
-    }
-
-    .toc-toggle-up, .toc-toggle-down, .toc-toggle-more-items {
-      user-select: none;
-      cursor: pointer;
-    }
-
-    &.toc-collapsed {
-      .section-nav {
-        max-height: 72px;
-        overflow: hidden;
-      }
-
-      .toc-toggle-up {
-        display: none;
-      }
-
-      .toc-toggle-down, .toc-toggle-more-items {
-        display: inline-block;
-      }
-    }
-  }
-}
diff --git a/src/_sass/pages/_not-found.scss b/src/_sass/pages/_not-found.scss
index 4f4cf2b304..8bf5841696 100644
--- a/src/_sass/pages/_not-found.scss
+++ b/src/_sass/pages/_not-found.scss
@@ -1,43 +1,35 @@
-@use '../base/variables' as *;
-@use '../vendor/bootstrap';
-
-.not-found {
-  font-size: 20px;
-
-  h1 {
-    color: $flutter-color-dark-blue;
-    font-size: 80px;
-    margin-bottom: bootstrap.bs-spacer(3);
-  }
-
-  &__wrapper {
-    padding: bootstrap.bs-spacer(10) 0;
-    text-align: center;
+.site-not-found main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: calc(100vh - 6rem);
+  text-align: center;
+  padding: 2rem;
+
+  img {
+    width: 40rem;
   }
 
-  &__image {
-    margin-bottom: bootstrap.bs-spacer(4);
-    max-width: 600px;
-    width: 100%;
+  p {
+    font-size: 1.25rem;
+    margin: 0 1rem 1rem;
+    max-width: 30rem;
   }
 
-  &__link-list {
-    list-style: none;
-    margin: bootstrap.bs-spacer(8) auto 0;
-    max-width: 680px;
-    padding: 0;
+  ul {
+    font-size: 1.25rem;
+    list-style-type: none;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 1rem;
+    row-gap: 0.5rem;
     text-align: left;
+    white-space: nowrap;
+    padding: 0.5rem;
+    margin-bottom: 0;
 
-    @include bootstrap.media-breakpoint-up(xs) {
-      column-count: 2;
-    }
-
-    @include bootstrap.media-breakpoint-up(sm) {
-      column-count: 3;
-    }
-
-    li {
-      margin-bottom: bootstrap.bs-spacer(2);
+    @media(max-width: 576px) {
+      grid-template-columns: repeat(2, 1fr);
     }
   }
 }
diff --git a/src/_sass/pages/_search.scss b/src/_sass/pages/_search.scss
new file mode 100644
index 0000000000..33f13578dd
--- /dev/null
+++ b/src/_sass/pages/_search.scss
@@ -0,0 +1,7 @@
+#search-body {
+  margin-bottom: 1rem;
+
+  .gsc-control-cse {
+    border-radius: var(--site-square-radius);
+  }
+}
diff --git a/src/_sass/site.scss b/src/_sass/site.scss
index cfb13ec0ba..06c2c0b85f 100644
--- a/src/_sass/site.scss
+++ b/src/_sass/site.scss
@@ -1,30 +1,33 @@
-// -- Vars/config
-@use 'base/variables';
-@use 'base/material-colors';
+// Must be imported first to ensure that
+// the reset is applied before any other styles are applied.
+@use 'base/reset';
 
-// -- Vendor
-@use 'vendor/bootstrap';
+// Must be imported second to ensure that
+// the root variables exist before any other styles are applied.
+@use 'base/root';
 
-// -- Base
-@use 'base/base';
+@use 'base/content';
+@use 'base/layout';
+@use 'base/typography';
 
-// -- Components
-// (alpha ordered)
+@use 'components/asides';
 @use 'components/banner';
-@use 'components/books';
+@use 'components/breadcrumbs';
+@use 'components/buttons';
+@use 'components/cards';
 @use 'components/code';
-@use 'components/content';
 @use 'components/cookie-notice';
-@use 'components/d2h';
+@use 'components/dropdown';
 @use 'components/footer';
 @use 'components/header';
-@use 'components/juicy-button';
-@use 'components/next-prev-nav';
-@use 'components/sidebar';
-@use 'components/toc';
+@use 'components/icons';
+@use 'components/media';
+@use 'components/misc';
+@use 'components/prev-next';
+@use 'components/side-menu';
+@use 'components/sidenav';
+@use 'components/tables';
+@use 'components/tabs';
 
-// -- Pages (alpha ordered)
 @use 'pages/not-found';
-
-// -- Overrides
-@use 'base/print-overrides';
+@use 'pages/search';
diff --git a/src/_sass/vendor/_bootstrap.scss b/src/_sass/vendor/_bootstrap.scss
deleted file mode 100644
index 6c7f7b96a4..0000000000
--- a/src/_sass/vendor/_bootstrap.scss
+++ /dev/null
@@ -1,242 +0,0 @@
-@use 'sass:color';
-
-@use '../base/variables' as *;
-
-// Import from NPM library directly
-@forward '../../../node_modules/bootstrap-scss/bootstrap' with (
-  $primary: $site-color-primary,
-  $body-color: $site-color-body,
-
-  // Font config
-  $font-family-sans-serif: $site-font-family-base,
-  $font-family-monospace: $site-font-family-monospace,
-  $font-weight-base: $font-size-base-weight,
-  $font-weight-bold: 500,
-  $headings-font-family: $site-font-family-alt,
-  $headings-font-weight: $font-size-base-weight,
-  $dt-font-weight: $font-size-base-weight,
-
-  // Code config
-  $code-color: color.scale($flutter-color-teal, $lightness: -10%, $saturation: 10%),
-  $kbd-font-size: 0.75rem,
-
-  // Layout config
-  $container-max-widths: (
-          sm: 540px,
-          md: 720px,
-          lg: 960px,
-          xl: 1140px,
-          xxl: 1330px
-  ),
-  $grid-breakpoints: (
-          0: 0,
-          xxs: 320px,
-          xs: 480px,
-          sm: 576px,
-          md: 768px,
-          lg: 992px,
-          xl: 1200px,
-          xxl: 1440px
-  ),
-  $spacers: (
-          1: ($site-spacer * 0.25),
-          2: ($site-spacer * 0.5),
-          3: ($site-spacer * 0.75),
-          4: $site-spacer,
-          5: ($site-spacer * 1.25),
-          6: ($site-spacer * 1.5),
-          7: ($site-spacer * 1.75),
-          8: ($site-spacer * 2),
-          9: ($site-spacer * 2.25),
-          10: ($site-spacer * 2.5),
-          11: ($site-spacer * 2.75),
-          12: ($site-spacer * 3),
-  ),
-
-  // Component config
-
-  $alert-padding-y: $site-spacer * 1.5,
-  $alert-padding-x: $site-spacer * 1.5,
-
-  $border-radius: 0,
-  $border-radius-lg: 0,
-  $border-radius-sm: 0,
-
-  $breadcrumb-divider: 'chevron_right',
-  $breadcrumb-bg: none,
-  $breadcrumb-padding-x: 0,
-
-  $card-border-radius: 4px,
-  $card-group-margin: $site-spacer * 0.5,
-
-  $grid-gutter-width: 50px,
-
-  $nav-tabs-link-active-color: $site-color-body,
-  $nav-tabs-link-active-border-color: transparent transparent $site-color-primary,
-
-  $tooltip-bg: #343a40,
-);
-
-@use '../../../node_modules/bootstrap-scss/bootstrap';
-
-@function bs-spacer($key: 3) {
-  @return map-get(bootstrap.$spacers, $key);
-}
-
-// Bootstrap adjustments
-
-.alert {
-  border: none;
-  border-radius: 0;
-  color: $site-color-body;
-  margin-top: 1rem;
-  padding: 1.25rem;
-
-  .alert-header {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-family: $site-font-family-alt;
-    font-size: 1.125rem;
-    font-weight: 500;
-  }
-
-  .alert-content {
-    margin-top: 0.5rem;
-  }
-
-  i.material-symbols {
-    font-size: 1.25em;
-    user-select: none;
-  }
-
-  code {
-    background-color: transparent;
-  }
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  &.alert-success {
-    width: auto;
-    background-color: $alert-success-bg;
-  }
-
-  &.alert-info {
-    width: auto;
-    background-color: $alert-info-bg;
-  }
-
-  &.alert-secondary {
-    width: auto;
-    background-color: $flutter-color-grey-500;
-  }
-
-  &.alert-warning {
-    width: auto;
-    background-color: $alert-warning-bg;
-  }
-
-  &.alert-danger {
-    width: auto;
-    background-color: $alert-danger-bg;
-  }
-}
-
-a.card {
-  color: inherit;
-
-  .card-title { color: $site-color-primary; }
-
-  .card-subtitle {
-    font-size: bootstrap.$font-size-sm;
-  }
-
-  &.card-highlight {
-    border: 1px solid rgba(0, 0, 0, 0.5);
-  }
-
-  &:hover {
-    $border-height: 0.25rem;
-
-    border-bottom: $border-height solid $site-color-primary;
-    text-decoration: none;
-
-    .card-body {
-      padding-bottom: bootstrap.$card-spacer-x - $border-height;
-    }
-  }
-}
-
-.card-title {
-  font-family: $site-font-family-alt;
-  font-size: bootstrap.$font-size-lg;
-  margin-bottom: bs-spacer(2);
-}
-
-// The nav bar for viewing code samples on GitHub / DartPad
-.navbar-code {
-  flex-direction: row;
-}
-
-// The nav bar for viewing code samples on GitHub / DartPad
-.btn-navbar-code {
-  font-size: bootstrap.$font-size-sm;
-  color: $site-color-primary;
-  background-color: $site-color-white;
-  font-weight: bold;
-  margin-left: bs-spacer(1);
-}
-
-.btn {
-  font-family: $site-font-family-alt;
-  font-weight: 500;
-  padding: bs-spacer(2);
-  white-space: normal;
-}
-
-.btn-link {
-  &:hover, &:focus {
-    text-decoration: none;
-  }
-}
-
-.nav-tabs {
-  font-family: $site-font-family-alt;
-  margin-bottom: 0.75rem;
-
-  .nav-item {
-    &:not(:last-child) {
-      margin-right: bs-spacer(8);
-    }
-
-    a {
-      color: $site-color-nav-links;
-      padding: bs-spacer(4) 0;
-    }
-  }
-
-  .nav-link {
-    &, &:hover {
-      border: none;
-      border-bottom: 2px solid transparent;
-    }
-
-    &.active, &:active {
-      border-color: $site-color-primary;
-      background-color: unset;
-    }
-  }
-}
-
-@mixin reset-carousel-animation {
-  .carousel-item-next,
-  .carousel-item-prev {
-    display: none;
-  }
-  .carousel-item-left,
-  .carousel-item-right {
-    transform: none;
-  }
-}
diff --git a/src/content/404.html b/src/content/404.html
index 3d0037f143..6d943bf776 100644
--- a/src/content/404.html
+++ b/src/content/404.html
@@ -1,25 +1,26 @@
 ---
 title: Page not found
 description: Page not found
-layout: landing
-body_class: not-found
+layout: base
+body_class: site-not-found menu-wide-toggled
 permalink: /404.html
 sitemap: false
 ---
 
-<div class="not-found__wrapper">
-  <p id="site-content-title">Sorry, we couldn't find that page…</p>
-  <img src='/assets/images/404/dash_404.png' class='not-found__image' alt="Dash pointing you in the right direction">
+<main id="site-not-found">
+  <header>
+    <h1 id="document-title">Sorry, we couldn't find that page...</h1>
+  </header>
+  <img src='/assets/images/404/dash_404.png' alt="Dash pointing you in the right direction">
   <p>But Dash is here to help - maybe one of these will point you in the right direction?</p>
-  <ul class="not-found__link-list">
+  <ul>
     <li><a href="{{site.main-url}}/">Homepage</a></li>
     <li><a href="{{site.pub}}/">Package site</a></li>
     <li><a href="{{site.api}}/">API reference</a></li>
     <li><a href="/">Documentation</a></li>
-    <li><a href="https://flutter.github.io/samples">Samples</a></li>
     <li><a href="{{site.main-url}}/community">Community</a></li>
     <li><a href="{{site.medium}}/flutter">Medium</a></li>
     <li><a href="{{site.social.twitter}}/">X (Twitter)</a></li>
     <li><a href="/resources/faq">FAQ</a></li>
   </ul>
-</div>
+</main>
diff --git a/src/content/add-to-app/index.md b/src/content/add-to-app/index.md
index bcc81b691b..e87229f863 100644
--- a/src/content/add-to-app/index.md
+++ b/src/content/add-to-app/index.md
@@ -124,21 +124,21 @@ Android and iOS:
 <div class="card-grid">
   <a class="card" href="/add-to-app/android/project-setup">
     <div class="card-body">
-      <header class="card-title text-center">
+      <header class="card-title card-center">
         Android
       </header>
     </div>
   </a>
   <a class="card" href="/add-to-app/ios/project-setup">
     <div class="card-body">
-      <header class="card-title text-center">
+      <header class="card-title card-center">
         iOS
       </header>
     </div>
   </a>
   <a class="card" href="/platform-integration/web/embedding-flutter-web#embedded-mode">
     <div class="card-body">
-      <header class="card-title text-center">
+      <header class="card-title card-center">
         Web
       </header>
     </div>
@@ -153,21 +153,21 @@ see our API usage guides at the following links:
 <div class="card-grid">
   <a class="card" href="/add-to-app/android/add-flutter-screen">
     <div class="card-body">
-      <header class="card-title text-center">
+      <header class="card-title card-center">
         Android
       </header>
     </div>
   </a>
   <a class="card" href="/add-to-app/ios/add-flutter-screen">
     <div class="card-body">
-      <header class="card-title text-center">
+      <header class="card-title card-center">
         iOS
       </header>
     </div>
   </a>
   <a class="card" href="/platform-integration/web/embedding-flutter-web#manage-flutter-views-from-js">
     <div class="card-body">
-      <header class="card-title text-center">
+      <header class="card-title card-center">
         Web
       </header>
     </div>
diff --git a/src/content/assets/js/archive.js b/src/content/assets/js/archive.js
index 7d020b8da3..3d5bd31bfd 100644
--- a/src/content/assets/js/archive.js
+++ b/src/content/assets/js/archive.js
@@ -25,7 +25,6 @@ function fetchFlutterReleases(os, callback, errorCallback) {
 
 function updateTable(releases, os) {
   const releaseData = releases.releases;
-
   for (const channel in releases.current_release) {
     const table = document.getElementById(`downloads-${os}-${channel}`);
 
@@ -34,8 +33,10 @@ function updateTable(releases, os) {
       continue;
     }
 
+    const tableBody = table.querySelector('tbody');
+
     table.classList.add('collapsed');
-    const loadingElements = table.querySelectorAll('.loading');
+    const loadingElements = tableBody.querySelectorAll('.loading');
     loadingElements.forEach(function (element) {
       element.remove();
     });
@@ -61,14 +62,13 @@ function updateTable(releases, os) {
         cell.colSpan = 6;
         cell.appendChild(showAll);
         row.appendChild(cell);
-        table.appendChild(row);
+        tableBody.appendChild(row);
       }
 
       const row = document.createElement('tr');
       if (index >= releasesToShow) {
         row.classList.add('overflow');
       }
-      table.appendChild(row);
 
       const hashLabel = document.createElement('span');
       hashLabel.textContent = release.hash.substr(0, 7);
@@ -89,7 +89,6 @@ function updateTable(releases, os) {
 
       const provenance = getProvenanceLink(os, release, date, channel);
 
-
       const cells = [
         createTableCell(downloadLink),
         createTableCell(dartSdkArch),
@@ -102,6 +101,8 @@ function updateTable(releases, os) {
       cells.forEach(function (cell) {
         row.appendChild(cell);
       });
+
+      tableBody.appendChild(row);
     });
   }
 }
diff --git a/src/content/assets/js/main.js b/src/content/assets/js/main.js
index 40a37bfbf9..dd9a8a8bcc 100644
--- a/src/content/assets/js/main.js
+++ b/src/content/assets/js/main.js
@@ -1,100 +1,123 @@
-document.addEventListener("DOMContentLoaded", function(_) {
-  adjustToc();
-  setupInlineToc();
-  initFixedColumns();
-  scrollSidebarIntoView();
-  initCookieNotice();
-  setUpCodeBlockButtons();
+const _prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
+
+function setupTheme() {
+  const storedTheme = window.localStorage.getItem('theme') ?? 'light-mode';
+  document.body.classList.add(storedTheme);
+  _switchToPreferenceIfAuto();
+
+  const themeMenu = document.getElementById('theme-menu');
+  if (themeMenu) {
+    const themeButtons = themeMenu.querySelectorAll('button');
+    themeButtons.forEach((button) => {
+      button.addEventListener('click', (event) => {
+        document.body.classList.remove('auto-mode');
+        document.body.classList.remove('dark-mode');
+        document.body.classList.remove('light-mode');
+        const newMode = `${button.dataset.theme}-mode`;
+        document.body.classList.add(newMode);
+        window.localStorage.setItem('theme', newMode);
+        _switchToPreferenceIfAuto();
+        themeMenu.hidePopover();
+      });  
+    });
+  }
 
-  setupSearch();
-  setupTabs();
-});
+  _prefersDarkMode.addEventListener('change', _switchToPreferenceIfAuto);
+}
 
-/**
- * Get the user's current operating system, or
- * `null` if not of one "macos", "windows", "linux", or "chromeos".
- *
- * @returns {'macos'|'linux'|'windows'|'chromeos'|null}
- */
-function getOS() {
-  const userAgent = window.navigator.userAgent;
-  if (userAgent.indexOf('Mac') !== -1) {
-    // macOS or iPhone
-    return 'macos';
+function _switchToPreferenceIfAuto() {
+  if (document.body.classList.contains('auto-mode')) {
+    if (_prefersDarkMode.matches) {
+      document.body.classList.remove('light-mode');
+      document.body.classList.add('dark-mode');
+    } else {
+      document.body.classList.remove('dark-mode');
+      document.body.classList.add('light-mode');
+    }
   }
+}
 
-  if (userAgent.indexOf('Win') !== -1) {
-    // Windows
-    return 'windows';
-  }
+function setupMenuToggle() {
+  const menuToggle = document.querySelector('#menu-button button');
+  if (!menuToggle) return;
 
-  if ((userAgent.indexOf('Linux') !== -1 || userAgent.indexOf("X11") !== -1)
-    && userAgent.indexOf('Android') === -1) {
-    // Linux, but not Android
-    return 'linux';
+  const menuWideToggledClass = 'menu-wide-toggled';
+  const storedWideToggled = window.localStorage.getItem(menuWideToggledClass);
+  if (storedWideToggled === 'true') {
+    document.body.classList.add(menuWideToggledClass);
   }
 
-  if (userAgent.indexOf('CrOS') !== -1) {
-    // ChromeOS
-    return 'chromeos';
-  }
+  menuToggle.addEventListener('click', (e) => {
+    e.preventDefault();
 
-  // Anything else
-  return null;
+    if (document.body.clientWidth > 768) {
+      if (document.body.classList.toggle(menuWideToggledClass)) {
+        window.localStorage.setItem(menuWideToggledClass, 'true');
+      } else {
+        window.localStorage.removeItem(menuWideToggledClass);
+      }
+    } else {
+      document.body.classList.toggle('menu-narrow-toggled');
+    }
+  });
 }
 
-function scrollSidebarIntoView() {
-  const fixedSidebar = document.querySelector('.site-sidebar--fixed');
-
-  if (!fixedSidebar) {
+function scrollSidenavIntoView() {
+  const sidenav = document.getElementById('sidenav');
+  if (!sidenav) {
     return;
   }
 
-  const activeEntries = fixedSidebar.querySelectorAll('a.nav-link.active');
-
+  const activeEntries = sidenav.querySelectorAll('a.nav-link.active');
   if (activeEntries.length > 0) {
     const activeEntry = activeEntries[activeEntries.length - 1];
 
-    fixedSidebar.scrollTo({
+    sidenav.scrollTo({
       top: activeEntry.offsetTop - window.innerHeight / 3,
     });
   }
 }
 
-/**
- * Adjusts the behavior of the table of contents (TOC) on the page.
- * 
- * This function enables a "scrollspy" feature on the TOC, 
- * where the active link in the TOC is updated
- * based on the currently visible section in the page.
- * 
- * Enables a "back to top" button in the TOC header.
- */
-function adjustToc() {
-  const tocId = '#site-toc--side';
+function setupBanner() {
+  const bannerClose = document.getElementById('banner-close-button');
+  const siteBanner = document.getElementById('site-banner');
+  if (!bannerClose || !siteBanner) return;
+  const bannerContents = siteBanner.querySelector('p')?.textContent;
+  const closedBannerContents = window.localStorage.getItem('banner-contents');
+  if (bannerContents == null || bannerContents === closedBannerContents) {
+    siteBanner.remove();
+    return;
+  }
 
-  const tocHeader = document.querySelector(tocId + ' header');
+  bannerClose.addEventListener('click', (_) => {
+    window.localStorage.setItem('banner-contents', bannerContents);
+    document.getElementById('site-banner')?.remove();
+  });
+  siteBanner.hidden = false;
+}
 
-  if (tocHeader) {
-    tocHeader.addEventListener('click', (_) => {
-      _scrollToTop();
-    });
-  }
+function setupSearch() {
+  const headerSearch = document.getElementById('header-search');
+  if (!headerSearch) return;
+  const submitButton = headerSearch.querySelector('button');
+  const input = headerSearch.querySelector('input');
 
-  // This will not be migrated for now until we migrate 
-  // the entire site to Bootstrap 5.
-  // see https://github.com/flutter/website/pull/9167#discussion_r1286457246
-  $('body').scrollspy({ offset: 100, target: tocId });
+  function submitSearch(e) {
+    e.preventDefault();
+    const query = input.value;
+    const url = new URL(window.location);
+    url.pathname = '/search';
+    url.searchParams.set('q', query);
+    window.location = url.toString();
+  }
 
-  function _scrollToTop() {
-    const distanceBetweenTop = document.documentElement.scrollTop || document.body.scrollTop;
-    if (distanceBetweenTop > 0) {
-      window.scrollTo({ top: 0, behavior: 'smooth' });
+  submitButton.addEventListener('click', submitSearch);
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      submitSearch(e);
     }
-  }
-}
+  });
 
-function setupSearch() {
   document.addEventListener('keydown', handleSearchShortcut);
 }
 
@@ -111,7 +134,7 @@ function handleSearchShortcut(event) {
   const bodySearch = document.querySelector('input.gsc-input');
   // Otherwise, focus the search field in the navbar.
   const searchElement = bodySearch ? bodySearch : document
-      .querySelector('input.search-field');
+      .querySelector('#header-search input');
 
   // If we successfully found a search field, focus that.
   if (searchElement) {
@@ -121,55 +144,75 @@ function handleSearchShortcut(event) {
   }
 }
 
-function initFixedColumns() {
-  const fixedColumnsSelector = '[data-fixed-column]';
-  const bannerSelector = '.site-banner';
-  const footerSelector = 'footer.site-footer';
-  const headerSelector = '.site-header';
-  const fixedColumns = $(fixedColumnsSelector);
+document.addEventListener("DOMContentLoaded", function(_) {
+  setupTheme();
+  setupBanner();
+  scrollSidenavIntoView();
+  setupNav();
+  setUpCodeBlockButtons();
 
-  function adjustFixedColumns() {
-    // only change values if the fixed col is visible
-    if ($(fixedColumnsSelector).css('display') == 'none') {
-      return;
-    }
+  setupSearch();
+  setupTabs();
+  setupInlineToc();
+  setupMenuToggle();
+  initCookieNotice();
+});
 
-    const headerHeight = $(headerSelector).outerHeight();
-    let bannerVisibleHeight = 0;
-    // First, make sure the banner element even exists on the page.
-    const siteBanner = $(bannerSelector);
-    if (siteBanner.length > 0) {
-      const bannerHeight = siteBanner.outerHeight();
-      const bannerOffset = siteBanner.offset().top;
-      const bannerPosition = bannerOffset - $(window).scrollTop();
-      bannerVisibleHeight =
-        Math.max(bannerHeight - (headerHeight - bannerPosition), 0);
-    }
-    const topOffset = headerHeight + bannerVisibleHeight;
+function setupNav() {
+  const toggles = document.querySelectorAll('a.nav-link.collapsible');
+  toggles.forEach(function (toggle) {
+    toggle.addEventListener('click', (e) => {
+      toggle.classList.toggle('collapsed');
+      e.preventDefault();
+    });
+  });
+}
 
-    const footerOffset = $(footerSelector).offset().top;
-    const footerPosition = footerOffset - $(window).scrollTop();
-    const footerVisibleHeight = $(window).height() - footerPosition;
+function setupInlineToc() {
+  // Set up the inline TOC's ability to expand and collapse.
+  const toggles = document.querySelectorAll('.site-toc--inline__toggle');
+  toggles.forEach(function (toggle) {
+    toggle.addEventListener('click', (_) => {
+      const inlineToc = document.getElementById('site-toc--inline');
+      if (inlineToc) {
+        inlineToc.classList.toggle('toc-collapsed');
+      }
+    });
+  });
+}
 
-    const fixedColumnsMaxHeight = $(window).height() - topOffset - footerVisibleHeight;
+/**
+ * Get the user's current operating system, or * `null` if not of one "macos", "windows", "linux", or "chromeos".
+ *
+ * @returns {'macos'|'linux'|'windows'|'chromeos'|null}
+ */
+function getOS() {
+  const userAgent = window.navigator.userAgent;
+  if (userAgent.indexOf('Mac') !== -1) {
+    // macOS or iPhone
+    return 'macos';
+  }
 
-    $(fixedColumnsSelector).css('max-height', fixedColumnsMaxHeight);
-    $(fixedColumnsSelector).css('top', topOffset);
+  if (userAgent.indexOf('Win') !== -1) {
+    // Windows
+    return 'windows';
   }
 
-  if (fixedColumns.length) {
-    $(fixedColumnsSelector).css('position', 'fixed');
+  if ((userAgent.indexOf('Linux') !== -1 || userAgent.indexOf("X11") !== -1)
+    && userAgent.indexOf('Android') === -1) {
+    // Linux, but not Android
+    return 'linux';
+  }
 
-    // listen for scroll and execute once
-    $(window).scroll(adjustFixedColumns);
-    $(window).resize(adjustFixedColumns);
-    adjustFixedColumns();
+  if (userAgent.indexOf('CrOS') !== -1) {
+    // ChromeOS
+    return 'chromeos';
   }
+
+  // Anything else
+  return null;
 }
 
-/**
- * Activate the cookie notice footer.
- */
 function initCookieNotice() {
   const cookieKey = 'cookie-consent';
   const currentDate = Date.now();
@@ -198,19 +241,6 @@ function initCookieNotice() {
   notice.classList.add(activeClass);
 }
 
-function setupInlineToc() {
-  // Set up the inline TOC's ability to expand and collapse.
-  const toggle = document.querySelectorAll('.site-toc--inline__toggle');
-  toggle.forEach(function (toggle) {
-    toggle.addEventListener('click', (_) => {
-      const inlineToc = document.getElementById('site-toc--inline');
-      if (inlineToc) {
-        inlineToc.classList.toggle('toc-collapsed');
-      }
-    });
-  });
-}
-
 // A pattern to remove terminal command markers when copying code blocks.
 const terminalReplacementPattern = /^(\s*\$\s*)|(C:\\(.*)>\s*)/gm;
 
diff --git a/src/content/assets/js/page/install-current.js b/src/content/assets/js/page/install-current.js
index 0e45fee876..7c6470dbfc 100644
--- a/src/content/assets/js/page/install-current.js
+++ b/src/content/assets/js/page/install-current.js
@@ -13,7 +13,7 @@ document.addEventListener("DOMContentLoaded", function(_) {
 
   const header = osButton.querySelector('.card-title');
   if (!header) return;
-  const currentSubtitle = document.createElement('div');
+  const currentSubtitle = document.createElement('span');
   currentSubtitle.textContent = 'Current device';
   currentSubtitle.classList.add('card-subtitle');
   header.appendChild(currentSubtitle);
diff --git a/src/content/brand/index.md b/src/content/brand/index.md
index 6889ffa34e..d69842ccb0 100644
--- a/src/content/brand/index.md
+++ b/src/content/brand/index.md
@@ -2,6 +2,7 @@
 title: Flutter Brand Guidelines
 description: >
   The guidelines governing the usage of the Flutter trademarks and assets.
+show_breadcrumbs: false  
 ---
 
 The "Flutter" name and logo are trademarks owned by Google.
diff --git a/src/content/get-started/codelab.md b/src/content/get-started/codelab.md
index 49f40b7869..7984174114 100644
--- a/src/content/get-started/codelab.md
+++ b/src/content/get-started/codelab.md
@@ -25,7 +25,7 @@ that works on mobile, desktop, and web.
     Unicode character.
     The non-breaking space after it makes the button look nicer.
   {% endcomment -%}
-  <a class="btn btn-primary"
+  <a class="filled-button"
      target="_blank"
      href="https://codelabs.developers.google.com/codelabs/flutter-codelab-first">
     &#9654;&nbsp; Start codelab
diff --git a/src/content/get-started/install/chromeos/index.md b/src/content/get-started/install/chromeos/index.md
index ebe677ad03..abcc106275 100644
--- a/src/content/get-started/install/chromeos/index.md
+++ b/src/content/get-started/install/chromeos/index.md
@@ -16,8 +16,8 @@ js: [{url: '/assets/js/temp/chromeos-install-redirector.js'}]
 {% for target in target-list %}
   <a class="card card-app-type card-chromeos" id="install-{{os | remove: ' ' | downcase}}" href="/get-started/install/{{os | remove: ' ' | downcase}}/{{target | downcase}}">
     <div class="card-body">
-      <header class="card-title text-center">
-        <span class="d-block h1">
+      <header class="card-title card-center">
+        <span>
           {% assign icon = target | downcase -%}
           {% if icon == 'android' -%}
             <span class="material-symbols">phone_android</span>
@@ -25,7 +25,7 @@ js: [{url: '/assets/js/temp/chromeos-install-redirector.js'}]
             <span class="material-symbols">web</span>
           {% endif -%}
         </span>
-        <span class="text-muted text-nowrap">{{target}}</span>
+        <span class="card-muted">{{target}}</span>
         {% if icon == 'android' -%}
           <div class="card-subtitle">Recommended</div>
         {% endif -%}
diff --git a/src/content/get-started/install/index.md b/src/content/get-started/install/index.md
index c2e896f97d..fdd03e5dbe 100644
--- a/src/content/get-started/install/index.md
+++ b/src/content/get-started/install/index.md
@@ -10,12 +10,12 @@ js: [{url: '/assets/js/page/install-current.js'}]
 {% for os in os-list %}
   <a class="card" id="install-{{os | remove: ' ' | downcase}}" href="/get-started/install/{{os | remove: ' ' | downcase}}">
     <div class="card-body">
-      <header class="card-title text-center">
-        <span class="d-block h1">
+      <header class="card-title card-center">
+        <span>
           {% assign icon = os | downcase -%}
-            <img src="/assets/images/docs/brand-svg/{{icon}}.svg" width="72" height="72" aria-hidden="true" alt="{{os}} logo"> 
+          <img src="/assets/images/docs/brand-svg/{{icon}}.svg" width="72" height="72" aria-hidden="true" alt="{{os}} logo"> 
         </span>
-        <span class="text-muted text-nowrap">{{os}}</span>
+        <span class="card-muted">{{os}}</span>
       </header>
     </div>
   </a>
diff --git a/src/content/get-started/install/linux/index.md b/src/content/get-started/install/linux/index.md
index 04e7a1e7dd..52ef410a84 100644
--- a/src/content/get-started/install/linux/index.md
+++ b/src/content/get-started/install/linux/index.md
@@ -16,8 +16,8 @@ js: [{url: '/assets/js/temp/linux-install-redirector.js'}]
 {% for target in target-list %}
   <a class="card card-app-type card-linux" id="install-{{os | remove: ' ' | downcase}}" href="/get-started/install/{{os | remove: ' ' | downcase}}/{{target | downcase}}">
     <div class="card-body">
-      <header class="card-title text-center">
-        <span class="d-block h1">
+      <header class="card-title card-center">
+        <span>
           {% assign icon = target | downcase -%}
           {% if icon == 'desktop' -%}
             <span class="material-symbols">desktop_windows</span>
@@ -27,7 +27,7 @@ js: [{url: '/assets/js/temp/linux-install-redirector.js'}]
             <span class="material-symbols">web</span>
           {% endif -%}
         </span>
-        <span class="text-muted text-nowrap">{{target}}</span>
+        <span class="card-muted">{{target}}</span>
         {% if icon == 'android' -%}
           <div class="card-subtitle">Recommended</div>
         {% endif -%}
diff --git a/src/content/get-started/install/macos/index.md b/src/content/get-started/install/macos/index.md
index b081d9db09..8b86d82911 100644
--- a/src/content/get-started/install/macos/index.md
+++ b/src/content/get-started/install/macos/index.md
@@ -23,21 +23,19 @@ js: [{url: '/assets/js/temp/macos-install-redirector.js'}]
 
   <a class="card card-app-type card-macos" id="install-{{os | downcase}}" href="/get-started/install/{{os | downcase}}/{{targetlink}}">
     <div class="card-body">
-      <header class="card-title text-center">
-        <span class="d-block h1">
-          {% assign icon = target | downcase -%}
-          {% case icon %}
-          {% when 'desktop' -%}
-            <span class="material-symbols">laptop_mac</span>
-          {% when 'ios' -%}
-            <span class="material-symbols">phone_iphone</span>
-          {% when 'android' -%}
-            <span class="material-symbols">phone_android</span>
-          {% when 'web' -%}
-            <span class="material-symbols">web</span>
-          {% endcase -%}
-        </span>
-        <span class="text-muted">{{ target }}</span>
+      <header class="card-title card-center">
+        {% assign icon = target | downcase -%}
+        {% case icon %}
+        {% when 'desktop' -%}
+          <span class="material-symbols">laptop_mac</span>
+        {% when 'ios' -%}
+          <span class="material-symbols">phone_iphone</span>
+        {% when 'android' -%}
+          <span class="material-symbols">phone_android</span>
+        {% when 'web' -%}
+          <span class="material-symbols">web</span>
+        {% endcase -%}
+        <span class="card-muted">{{ target }}</span>
         {% if icon == 'ios' -%}
           <div class="card-subtitle">Recommended</div>
         {% endif -%}
diff --git a/src/content/get-started/install/windows/index.md b/src/content/get-started/install/windows/index.md
index 208074a833..25dc8e96f2 100644
--- a/src/content/get-started/install/windows/index.md
+++ b/src/content/get-started/install/windows/index.md
@@ -22,8 +22,8 @@ js: [{url: '/assets/js/temp/windows-install-redirector.js'}]
   {% endcase %}
   <a class="card card-app-type card-windows" id="install-{{os | downcase}}" href="/get-started/install/{{os | downcase}}/{{targetlink}}">
     <div class="card-body">
-      <header class="card-title text-center">
-        <span class="d-block h1">
+      <header class="card-title card-center">
+        <span>
           {% assign icon = target | downcase -%}
           {% case icon %}
           {% when 'desktop' -%}
@@ -34,7 +34,7 @@ js: [{url: '/assets/js/temp/windows-install-redirector.js'}]
             <span class="material-symbols">web</span>
           {% endcase -%}
         </span>
-        <span class="text-muted text-nowrap">{{target}}</span>
+        <span class="card-muted">{{target}}</span>
         {% if icon == 'android' -%}
           <div class="card-subtitle">Recommended</div>
         {% endif -%}
diff --git a/src/content/index.md b/src/content/index.md
index cbf4ab0f34..319f6fd5b9 100644
--- a/src/content/index.md
+++ b/src/content/index.md
@@ -123,6 +123,6 @@ see our [videos][] page.
 
 We release new videos almost every week on the Flutter YouTube channel:
 
-<a class="btn btn-primary" target="_blank" href="https://www.youtube.com/@flutterdev">Explore more Flutter videos</a>
+<a class="filled-button" target="_blank" href="https://www.youtube.com/@flutterdev">Explore more Flutter videos</a>
 
 [videos]: /resources/videos
diff --git a/src/content/packages-and-plugins/swift-package-manager/for-app-developers.md b/src/content/packages-and-plugins/swift-package-manager/for-app-developers.md
index fc3976bbaf..e36539fd51 100644
--- a/src/content/packages-and-plugins/swift-package-manager/for-app-developers.md
+++ b/src/content/packages-and-plugins/swift-package-manager/for-app-developers.md
@@ -112,7 +112,7 @@ To undo this migration:
 1. Navigate to **Package Dependencies** for the project.
 
 1. Click the `FlutterGeneratedPluginSwiftPackage` package, then click
-   <span class="material-symbols-outlined">remove</span>.
+   <span class="material-symbols">remove</span>.
 
    {% render docs/captioned-image.liquid,
    image:"development/packages-and-plugins/swift-package-manager/remove-generated-package.png",
@@ -122,7 +122,7 @@ To undo this migration:
    target.
 
 1. Click `FlutterGeneratedPluginSwiftPackage`, then click the
-   <span class="material-symbols-outlined">remove</span>.
+   <span class="material-symbols">remove</span>.
 
    {% render docs/captioned-image.liquid,
    image:"development/packages-and-plugins/swift-package-manager/remove-generated-framework.png",
diff --git a/src/content/packages-and-plugins/swift-package-manager/for-plugin-authors.md b/src/content/packages-and-plugins/swift-package-manager/for-plugin-authors.md
index 2cc180adf5..d77cbed221 100644
--- a/src/content/packages-and-plugins/swift-package-manager/for-plugin-authors.md
+++ b/src/content/packages-and-plugins/swift-package-manager/for-plugin-authors.md
@@ -126,7 +126,7 @@ To update your unit tests:
       caption:"The `Link Binary With Libraries` Build Phase in the `RunnerTests` target" %}
 
       If the build phase doesn't exist already, create one.
-      Click the <span class="material-symbols-outlined">add</span> and
+      Click the <span class="material-symbols">add</span> and
       then click **New Link Binary With Libraries Phase**.
 
       {% render docs/captioned-image.liquid,
@@ -135,7 +135,7 @@ To update your unit tests:
 
    1. Navigate to **Package Dependencies** for the project.
 
-   1. Click <span class="material-symbols-outlined">add</span>.
+   1. Click <span class="material-symbols">add</span>.
 
    1. In the dialog that opens, click the **Add Local...** button.
 
diff --git a/src/content/platform-integration/android/install-android/index.md b/src/content/platform-integration/android/install-android/index.md
index f221fabad7..546680d006 100644
--- a/src/content/platform-integration/android/install-android/index.md
+++ b/src/content/platform-integration/android/install-android/index.md
@@ -25,8 +25,8 @@ or the platform you already have set up.
 
   <a class="card card-app-type {{bug}}" id="install-{{target | downcase}}" href="{{targetLink}}">
     <div class="card-body">
-      <header class="card-title text-center">
-        <span class="d-block h1">
+      <header class="card-title card-center">
+        <span>
           {% assign icon = target | downcase | replace: " ", "-" -%}
           {% case icon %}
           {% when 'macos' -%}
@@ -41,7 +41,7 @@ or the platform you already have set up.
           <span class="material-symbols">add</span>
           <span class="material-symbols">phone_android</span>
         </span>
-        <span class="text-muted d-block">
+        <span class="card-muted">
         Make Android and
         {% if target contains "iOS" -%}
         {{target}} apps on macOS
diff --git a/src/content/platform-integration/ios/app-extensions.md b/src/content/platform-integration/ios/app-extensions.md
index ae824ad015..f50c3b8236 100644
--- a/src/content/platform-integration/ios/app-extensions.md
+++ b/src/content/platform-integration/ios/app-extensions.md
@@ -39,7 +39,7 @@ add the extension point *target* to your Xcode project.
    Flutter project directory.
 1. In Xcode, select **File -> New -> Target** from the menu bar. 
 
-    <figure class="site-figure">
+    <figure>
     <div class="site-figure-container">
         <img src='/assets/images/docs/development/platform-integration/app-extensions/xcode-new-target.png' alt='Opening the File -> New menu, then selecting Target in Xcode.' height='300'>
     </div>
@@ -141,7 +141,7 @@ share content with other apps,
 such as sharing a picture to create
 a new post on a social media app.
 
-<figure class="site-figure">
+<figure>
     <div class="site-figure-container">
         <img src='/assets/images/docs/development/platform-integration/app-extensions/share-extension.png' alt='An example of an entry added to the share menu by a Flutter app' height='300'>
     </div>
@@ -179,7 +179,7 @@ use an iOS simulator to test your extension in debug mode.
    share extension's frameworks and libraries list.
    Make sure the embed column says "Embed & Sign".
 
-   <figure class="site-figure">
+   <figure>
        <div class="site-figure-container">
            <img src='/assets/images/docs/development/platform-integration/app-extensions/embed-framework.png' alt='The Flutter.xcframework file being marked as Embed & Sign in Xcode.' height='300'>
        </div>
@@ -196,7 +196,7 @@ use an iOS simulator to test your extension in debug mode.
       **Based on configuration file** drop-down menu for your
       extension matches the one selected for the normal app target.
 
-    <figure class="site-figure">
+    <figure>
         <div class="site-figure-container">
             <img src='/assets/images/docs/development/platform-integration/app-extensions/xcode-configurations.png' alt='An example Xcode Runner configuration with each property set to: Based on configuration file.' height='300'>
         </div>
@@ -215,7 +215,7 @@ use an iOS simulator to test your extension in debug mode.
        you should omit the `<YourShareExtensionTargetName>.`
        portion.<br>
 
-    <figure class="site-figure">
+    <figure>
         <div class="site-figure-container">
             <img src='/assets/images/docs/development/platform-integration/app-extensions/share-extension-info.png' alt='Setting the NSExtensionPrincipalClass property in the Info.plist file within Xcode.' height='300'>
         </div>
diff --git a/src/content/platform-integration/ios/install-ios/index.md b/src/content/platform-integration/ios/install-ios/index.md
index 996f2d2bff..5b622ff48c 100644
--- a/src/content/platform-integration/ios/install-ios/index.md
+++ b/src/content/platform-integration/ios/install-ios/index.md
@@ -14,8 +14,8 @@ or the platform you already have set up.
 {% assign targetLink = '/platform-integration/ios/install-ios/install-ios-from-' | append: target | downcase %}
   <a class="card card-app-type card-macos" id="install-{{target | downcase}}" href="{{targetLink}}">
     <div class="card-body">
-      <header class="card-title text-center">
-        <span class="d-block h1">
+      <header class="card-title card-center">
+        <span>
           {% assign icon = target | downcase -%}
           {% case icon %}
           {% when 'macos' -%}
@@ -28,7 +28,7 @@ or the platform you already have set up.
           <span class="material-symbols">add</span>
           <span class="material-symbols">phone_iphone</span>
         </span>
-        <span class="text-muted d-block">
+        <span class="card-muted">
         Make iOS and {{ target }}{% if target == 'macOS' %} desktop{% endif %} apps
         </span>
       </header>
diff --git a/src/content/platform-integration/linux/install-linux/index.md b/src/content/platform-integration/linux/install-linux/index.md
index a63e865349..2de5ce77fc 100644
--- a/src/content/platform-integration/linux/install-linux/index.md
+++ b/src/content/platform-integration/linux/install-linux/index.md
@@ -14,8 +14,8 @@ or the platform you already have set up.
 {% assign targetLink = '/platform-integration/linux/install-linux/install-linux-from-' | append: target | downcase %}
   <a class="card card-app-type card-linux" id="install-{{target | downcase}}" href="{{targetLink}}">
     <div class="card-body">
-      <header class="card-title text-center">
-        <span class="d-block h1">
+      <header class="card-title card-center">
+        <span>
           {% assign icon = target | downcase -%}
           {% case icon %}
           {% when 'android' -%}
@@ -24,7 +24,7 @@ or the platform you already have set up.
             <span class="material-symbols">web</span>
           {% endcase -%}
         </span>
-        <span class="text-muted d-block">
+        <span class="card-muted">
         Make {{ target }} and Linux desktop apps
         </span>
       </header>
diff --git a/src/content/platform-integration/macos/install-macos/index.md b/src/content/platform-integration/macos/install-macos/index.md
index b31611fbe7..cd02749494 100644
--- a/src/content/platform-integration/macos/install-macos/index.md
+++ b/src/content/platform-integration/macos/install-macos/index.md
@@ -14,8 +14,8 @@ or the platform you already have set up.
 {% assign targetLink = '/platform-integration/macos/install-macos/install-macos-from-' | append: target | downcase %}
   <a class="card card-app-type card-macos" id="install-{{target | downcase}}" href="{{targetLink}}">
     <div class="card-body">
-      <header class="card-title text-center">
-        <span class="d-block h1">
+      <header class="card-title card-center">
+        <span>
           {% assign icon = target | downcase -%}
           {% case icon %}
           {% when 'ios' -%}
@@ -28,7 +28,7 @@ or the platform you already have set up.
           <span class="material-symbols">add</span>
           <span class="material-symbols">laptop_mac</span>
         </span>
-        <span class="text-muted d-block">
+        <span class="card-muted">
         Make {{ target }} and macOS desktop apps
         </span>
       </header>
diff --git a/src/content/platform-integration/platform-adaptations.md b/src/content/platform-integration/platform-adaptations.md
index 44e63e3b07..ca3e04d895 100644
--- a/src/content/platform-integration/platform-adaptations.md
+++ b/src/content/platform-integration/platform-adaptations.md
@@ -28,8 +28,8 @@ architecture structures on Android and iOS but sharing
 the same content code, see the [platform_design code samples][].
 
 :::secondary
-Preliminary guides addressing case 2 
-are being added to the UI components section. 
+Preliminary guides addressing case 2
+are being added to the UI components section.
 You can request additional guides by commenting on [issue #8427][8427].
 :::
 
@@ -62,32 +62,30 @@ On **iOS**:
   is true. This represents iOS's Present/Modal style
   transition and is typically used on fullscreen modal pages.
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img style="border-radius: 12px;" src="/assets/images/docs/platform-adaptations/navigation-android.gif" class="figure-img img-fluid" alt="An animation of the bottom-up page transition on Android" />
-        <figcaption class="figure-caption">
-          Android page transition
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img style="border-radius: 22px;" src="/assets/images/docs/platform-adaptations/navigation-ios.gif" class="figure-img img-fluid" alt="An animation of the end-start style push page transition on iOS" />
-        <figcaption class="figure-caption">
-          iOS push transition
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img style="border-radius: 22px;" src="/assets/images/docs/platform-adaptations/navigation-ios-modal.gif" class="figure-img img-fluid" alt="An animation of the bottom-up style present page transition on iOS" />
-        <figcaption class="figure-caption">
-          iOS present transition
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img style="border-radius: 12px;" src="/assets/images/docs/platform-adaptations/navigation-android.gif" class="figure-img img-fluid" alt="An animation of the bottom-up page transition on Android" />
+      <figcaption class="figure-caption">
+        Android page transition
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img style="border-radius: 22px;" src="/assets/images/docs/platform-adaptations/navigation-ios.gif" class="figure-img img-fluid" alt="An animation of the end-start style push page transition on iOS" />
+      <figcaption class="figure-caption">
+        iOS push transition
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img style="border-radius: 22px;" src="/assets/images/docs/platform-adaptations/navigation-ios-modal.gif" class="figure-img img-fluid" alt="An animation of the bottom-up style present page transition on iOS" />
+      <figcaption class="figure-caption">
+        iOS present transition
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -108,24 +106,22 @@ automatically animate each subcomponent to its corresponding
 subcomponent on the next or previous page's
 `CupertinoNavigationBar` or `CupertinoSliverNavigationBar`.
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm">
-      <figure class="figure text-center">
-      <img style="border-radius: 12px; height: 400px;" class="figure-img img-fluid" height="400" width="185" alt="An animation of the page transition on Android" src="/assets/images/docs/platform-adaptations/android-zoom-animation.png" />
-        <figcaption class="figure-caption">
-          Android
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm">
-      <figure class="figure text-center">
-        <img style="border-radius: 22px;" src="/assets/images/docs/platform-adaptations/navigation-ios-nav-bar.gif" class="figure-img img-fluid" alt="An animation of the nav bar transitions during a page transition on iOS" />
-        <figcaption class="figure-caption">
-          iOS Nav Bar
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm">
+    <figure class="figure text-center">
+    <img style="border-radius: 12px; height: 400px;" class="figure-img img-fluid" height="400" width="185" alt="An animation of the page transition on Android" src="/assets/images/docs/platform-adaptations/android-zoom-animation.png" />
+      <figcaption class="figure-caption">
+        Android
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm">
+    <figure class="figure text-center">
+      <img style="border-radius: 22px;" src="/assets/images/docs/platform-adaptations/navigation-ios-nav-bar.gif" class="figure-img img-fluid" alt="An animation of the nav bar transitions during a page transition on iOS" />
+      <figcaption class="figure-caption">
+        iOS Nav Bar
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -142,24 +138,22 @@ and pops the top route of the [`WidgetsApp`][]'s Navigator.
 On **iOS**,
 an edge swipe gesture can be used to pop the top route.
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img style="border-radius: 12px;" src="/assets/images/docs/platform-adaptations/navigation-android-back.gif" class="figure-img img-fluid" alt="A page transition triggered by the Android back button" />
-        <figcaption class="figure-caption">
-          Android back button
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm">
-      <figure class="figure text-center">
-        <img style="border-radius: 22px;" src="/assets/images/docs/platform-adaptations/navigation-ios-back.gif" class="figure-img img-fluid" alt="A page transition triggered by an iOS back swipe gesture" />
-        <figcaption class="figure-caption">
-          iOS back swipe gesture
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img style="border-radius: 12px;" src="/assets/images/docs/platform-adaptations/navigation-android-back.gif" class="figure-img img-fluid" alt="A page transition triggered by the Android back button" />
+      <figcaption class="figure-caption">
+        Android back button
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm">
+    <figure class="figure text-center">
+      <img style="border-radius: 22px;" src="/assets/images/docs/platform-adaptations/navigation-ios-back.gif" class="figure-img img-fluid" alt="A page transition triggered by an iOS back swipe gesture" />
+      <figcaption class="figure-caption">
+        iOS back swipe gesture
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -180,32 +174,30 @@ dynamic friction but Android has more static friction.
 Therefore iOS gains high speed more gradually but stops
 less abruptly and is more slippery at slow speeds.
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img src="/assets/images/docs/platform-adaptations/scroll-soft.gif" class="figure-img img-fluid rounded" alt="A soft fling where the iOS scrollable slid longer at lower speed than Android" />
-        <figcaption class="figure-caption">
-          Soft fling comparison
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm">
-      <figure class="figure text-center">
-        <img src="/assets/images/docs/platform-adaptations/scroll-medium.gif" class="figure-img img-fluid rounded" alt="A medium force fling where the Android scrollable reached speed faster and stopped more abruptly after reaching a longer distance" />
-        <figcaption class="figure-caption">
-          Medium fling comparison
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm">
-      <figure class="figure text-center">
-        <img src="/assets/images/docs/platform-adaptations/scroll-strong.gif" class="figure-img img-fluid rounded" alt="A strong fling where the Android scrollable reach speed faster and reached significantly more distance" />
-        <figcaption class="figure-caption">
-          Strong fling comparison
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img src="/assets/images/docs/platform-adaptations/scroll-soft.gif" class="figure-img img-fluid rounded" alt="A soft fling where the iOS scrollable slid longer at lower speed than Android" />
+      <figcaption class="figure-caption">
+        Soft fling comparison
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm">
+    <figure class="figure text-center">
+      <img src="/assets/images/docs/platform-adaptations/scroll-medium.gif" class="figure-img img-fluid rounded" alt="A medium force fling where the Android scrollable reached speed faster and stopped more abruptly after reaching a longer distance" />
+      <figcaption class="figure-caption">
+        Medium fling comparison
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm">
+    <figure class="figure text-center">
+      <img src="/assets/images/docs/platform-adaptations/scroll-strong.gif" class="figure-img img-fluid rounded" alt="A strong fling where the Android scrollable reach speed faster and reached significantly more distance" />
+      <figcaption class="figure-caption">
+        Strong fling comparison
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -219,24 +211,22 @@ of the current Material theme).
 On **iOS**, scrolling past the edge of a scrollable
 [overscrolls][] with increasing resistance and snaps back.
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img src="/assets/images/docs/platform-adaptations/scroll-overscroll.gif" class="figure-img img-fluid rounded" alt="Android and iOS scrollables being flung past their edge and exhibiting platform specific overscroll behavior" />
-        <figcaption class="figure-caption">
-          Dynamic overscroll comparison
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img src="/assets/images/docs/platform-adaptations/scroll-static-overscroll.gif" class="figure-img img-fluid rounded" alt="Android and iOS scrollables being overscrolled from a resting position and exhibiting platform specific overscroll behavior" />
-        <figcaption class="figure-caption">
-          Static overscroll comparison
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img src="/assets/images/docs/platform-adaptations/scroll-overscroll.gif" class="figure-img img-fluid rounded" alt="Android and iOS scrollables being flung past their edge and exhibiting platform specific overscroll behavior" />
+      <figcaption class="figure-caption">
+        Dynamic overscroll comparison
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img src="/assets/images/docs/platform-adaptations/scroll-static-overscroll.gif" class="figure-img img-fluid rounded" alt="Android and iOS scrollables being overscrolled from a resting position and exhibiting platform specific overscroll behavior" />
+      <figcaption class="figure-caption">
+        Static overscroll comparison
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -250,16 +240,14 @@ repeated flings in the same direction stacks momentum
 and builds more speed with each successive fling.
 There is no equivalent behavior on Android.
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img src="/assets/images/docs/platform-adaptations/scroll-momentum-ios.gif" class="figure-img img-fluid rounded" alt="Repeated scroll flings building momentum on iOS" />
-        <figcaption class="figure-caption">
-          iOS scroll momentum
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img src="/assets/images/docs/platform-adaptations/scroll-momentum-ios.gif" class="figure-img img-fluid rounded" alt="Repeated scroll flings building momentum on iOS" />
+      <figcaption class="figure-caption">
+        iOS scroll momentum
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -270,16 +258,14 @@ tapping the OS status bar scrolls the primary
 scroll controller to the top position.
 There is no equivalent behavior on Android.
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img style="border-radius: 22px;" src="/assets/images/docs/platform-adaptations/scroll-tap-to-top-ios.gif" class="figure-img img-fluid" alt="Tapping the status bar scrolls the primary scrollable back to the top" />
-        <figcaption class="figure-caption">
-          iOS status bar tap to top
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img style="border-radius: 22px;" src="/assets/images/docs/platform-adaptations/scroll-tap-to-top-ios.gif" class="figure-img img-fluid" alt="Tapping the status bar scrolls the primary scrollable back to the top" />
+      <figcaption class="figure-caption">
+        iOS status bar tap to top
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -305,24 +291,22 @@ widgets to match the default text styling on iOS.
 You can see widget-specific examples in the 
 [UI Component section](#ui-components).
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img src="/assets/images/docs/platform-adaptations/typography-android.png" class="figure-img img-fluid rounded" alt="Roboto font on Android" />
-        <figcaption class="figure-caption">
-          Roboto on Android
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm">
-      <figure class="figure text-center">
-        <img src="/assets/images/docs/platform-adaptations/typography-ios.png" class="figure-img img-fluid rounded" alt="San Francisco font on iOS" />
-        <figcaption class="figure-caption">
-          San Francisco on iOS
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img src="/assets/images/docs/platform-adaptations/typography-android.png" class="figure-img img-fluid rounded" alt="Roboto font on Android" />
+      <figcaption class="figure-caption">
+        Roboto on Android
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm">
+    <figure class="figure text-center">
+      <img src="/assets/images/docs/platform-adaptations/typography-ios.png" class="figure-img img-fluid rounded" alt="San Francisco font on iOS" />
+      <figcaption class="figure-caption">
+        San Francisco on iOS
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -338,24 +322,22 @@ are horizontal on iOS and vertical on Android.
 The back button is a simple chevron on iOS and
 has a stem/shaft on Android.
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img src="/assets/images/docs/platform-adaptations/iconography-android.png" class="figure-img img-fluid rounded" alt="Android appropriate icons" />
-        <figcaption class="figure-caption">
-          Icons on Android
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm">
-      <figure class="figure text-center">
-        <img src="/assets/images/docs/platform-adaptations/iconography-ios.png" class="figure-img img-fluid rounded" alt="iOS appropriate icons" />
-        <figcaption class="figure-caption">
-          Icons on iOS
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img src="/assets/images/docs/platform-adaptations/iconography-android.png" class="figure-img img-fluid rounded" alt="Android appropriate icons" />
+      <figcaption class="figure-caption">
+        Icons on Android
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm">
+    <figure class="figure text-center">
+      <img src="/assets/images/docs/platform-adaptations/iconography-ios.png" class="figure-img img-fluid rounded" alt="iOS appropriate icons" />
+      <figcaption class="figure-caption">
+        Icons on iOS
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -398,24 +380,22 @@ a force-press-drag gesture could be made on the soft
 keyboard to move the cursor in 2D via a floating cursor.
 This works on both Material and Cupertino text fields.
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img src="/assets/images/docs/platform-adaptations/text-keyboard-move-android.gif" class="figure-img img-fluid rounded" alt="Moving the cursor via the space key on Android" />
-        <figcaption class="figure-caption">
-          Android space key cursor move
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm">
-      <figure class="figure text-center">
-        <img src="/assets/images/docs/platform-adaptations/text-keyboard-move-ios.gif" class="figure-img img-fluid rounded" alt="Moving the cursor via 3D Touch drag on the keyboard on iOS" />
-        <figcaption class="figure-caption">
-          iOS 3D Touch drag cursor move
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img src="/assets/images/docs/platform-adaptations/text-keyboard-move-android.gif" class="figure-img img-fluid rounded" alt="Moving the cursor via the space key on Android" />
+      <figcaption class="figure-caption">
+        Android space key cursor move
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm">
+    <figure class="figure text-center">
+      <img src="/assets/images/docs/platform-adaptations/text-keyboard-move-ios.gif" class="figure-img img-fluid rounded" alt="Moving the cursor via 3D Touch drag on the keyboard on iOS" />
+      <figcaption class="figure-caption">
+        iOS 3D Touch drag cursor move
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -429,24 +409,22 @@ With **Material on iOS** or when using **Cupertino**,
 the iOS style selection toolbar is shown when a text
 selection is made in a text field.
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img src="/assets/images/docs/platform-adaptations/text-toolbar-android.png" class="figure-img img-fluid rounded" alt="Android appropriate text toolbar" />
-        <figcaption class="figure-caption">
-          Android text selection toolbar
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm">
-      <figure class="figure text-center">
-        <img src="/assets/images/docs/platform-adaptations/text-toolbar-ios.png" class="figure-img img-fluid rounded" alt="iOS appropriate text toolbar" />
-        <figcaption class="figure-caption">
-          iOS text selection toolbar
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img src="/assets/images/docs/platform-adaptations/text-toolbar-android.png" class="figure-img img-fluid rounded" alt="Android appropriate text toolbar" />
+      <figcaption class="figure-caption">
+        Android text selection toolbar
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm">
+    <figure class="figure text-center">
+      <img src="/assets/images/docs/platform-adaptations/text-toolbar-ios.png" class="figure-img img-fluid rounded" alt="iOS appropriate text toolbar" />
+      <figcaption class="figure-caption">
+        iOS text selection toolbar
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -465,24 +443,22 @@ nearest edge of the word tapped.
 
 Collapsed text selections don't have draggable handles on iOS.
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img src="/assets/images/docs/platform-adaptations/text-single-tap-android.gif" class="figure-img img-fluid rounded" alt="Moving the cursor to the tapped position on Android" />
-        <figcaption class="figure-caption">
-          Android tap
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm">
-      <figure class="figure text-center">
-        <img src="/assets/images/docs/platform-adaptations/text-single-tap-ios.gif" class="figure-img img-fluid rounded" alt="Moving the cursor to the nearest edge of the tapped word on iOS" />
-        <figcaption class="figure-caption">
-          iOS tap
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img src="/assets/images/docs/platform-adaptations/text-single-tap-android.gif" class="figure-img img-fluid rounded" alt="Moving the cursor to the tapped position on Android" />
+      <figcaption class="figure-caption">
+        Android tap
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm">
+    <figure class="figure text-center">
+      <img src="/assets/images/docs/platform-adaptations/text-single-tap-ios.gif" class="figure-img img-fluid rounded" alt="Moving the cursor to the nearest edge of the tapped word on iOS" />
+      <figcaption class="figure-caption">
+        iOS tap
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -496,24 +472,22 @@ With **Material on iOS** or when using **Cupertino**,
 a long press places the cursor at the location of the
 long press. The selection toolbar is shown upon release.
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img src="/assets/images/docs/platform-adaptations/text-long-press-android.gif" class="figure-img img-fluid rounded" alt="Selecting a word via long press on Android" />
-        <figcaption class="figure-caption">
-          Android long press
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm">
-      <figure class="figure text-center">
-        <img src="/assets/images/docs/platform-adaptations/text-long-press-ios.gif" class="figure-img img-fluid rounded" alt="Selecting a position via long press on iOS" />
-        <figcaption class="figure-caption">
-          iOS long press
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img src="/assets/images/docs/platform-adaptations/text-long-press-android.gif" class="figure-img img-fluid rounded" alt="Selecting a word via long press on Android" />
+      <figcaption class="figure-caption">
+        Android long press
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm">
+    <figure class="figure text-center">
+      <img src="/assets/images/docs/platform-adaptations/text-long-press-ios.gif" class="figure-img img-fluid rounded" alt="Selecting a position via long press on iOS" />
+      <figcaption class="figure-caption">
+        iOS long press
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -525,24 +499,22 @@ dragging while holding the long press expands the words selected.
 With **Material on iOS** or when using **Cupertino**,
 dragging while holding the long press moves the cursor.
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img src="/assets/images/docs/platform-adaptations/text-long-press-drag-android.gif" class="figure-img img-fluid rounded" alt="Expanding word selection via long press drag on Android" />
-        <figcaption class="figure-caption">
-          Android long press drag
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm">
-      <figure class="figure text-center">
-        <img src="/assets/images/docs/platform-adaptations/text-long-press-drag-ios.gif" class="figure-img img-fluid rounded" alt="Moving the cursor via long press drag on iOS" />
-        <figcaption class="figure-caption">
-          iOS long press drag
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img src="/assets/images/docs/platform-adaptations/text-long-press-drag-android.gif" class="figure-img img-fluid rounded" alt="Expanding word selection via long press drag on Android" />
+      <figcaption class="figure-caption">
+        Android long press drag
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm">
+    <figure class="figure text-center">
+      <img src="/assets/images/docs/platform-adaptations/text-long-press-drag-ios.gif" class="figure-img img-fluid rounded" alt="Moving the cursor via long press drag on iOS" />
+      <figcaption class="figure-caption">
+        iOS long press drag
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -552,24 +524,22 @@ On both Android and iOS,
 a double tap selects the word receiving the
 double tap and shows the selection toolbar.
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img src="/assets/images/docs/platform-adaptations/text-double-tap-android.gif" class="figure-img img-fluid rounded" alt="Selecting a word via double tap on Android" />
-        <figcaption class="figure-caption">
-          Android double tap
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm">
-      <figure class="figure text-center">
-        <img src="/assets/images/docs/platform-adaptations/text-double-tap-ios.gif" class="figure-img img-fluid rounded" alt="Selecting a word via double tap on iOS" />
-        <figcaption class="figure-caption">
-          iOS double tap
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img src="/assets/images/docs/platform-adaptations/text-double-tap-android.gif" class="figure-img img-fluid rounded" alt="Selecting a word via double tap on Android" />
+      <figcaption class="figure-caption">
+        Android double tap
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm">
+    <figure class="figure text-center">
+      <img src="/assets/images/docs/platform-adaptations/text-double-tap-ios.gif" class="figure-img img-fluid rounded" alt="Selecting a word via double tap on iOS" />
+      <figcaption class="figure-caption">
+        iOS double tap
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -604,6 +574,8 @@ Therefore, we recommend that you follow platform conventions.
 |<img src="/assets/images/docs/platform-adaptations/m3-radio.png" class="figure-img img-fluid rounded" alt="Radio in Material 3" /> <br/>`Radio`|<img src="/assets/images/docs/platform-adaptations/hig-radio.png" class="figure-img img-fluid rounded" alt="Radio in HIG" /><br/>`CupertinoRadio`|[`Radio.adaptive()`][]|
 |<img src="/assets/images/docs/platform-adaptations/m3-alert.png" class="figure-img img-fluid rounded" alt="AlertDialog in Material 3" /> <br/>`AlertDialog`|<img src="/assets/images/docs/platform-adaptations/cupertino-alert.png" class="figure-img img-fluid rounded" alt="AlertDialog in HIG" /><br/>`CupertinoAlertDialog`|[`AlertDialog.adaptive()`][]|
 
+{:.text-center .table .table-striped}
+
 [`AlertDialog.adaptive()`]: {{site.api}}/flutter/material/AlertDialog/AlertDialog.adaptive.html
 [`Checkbox.adaptive()`]: {{site.api}}/flutter/material/Checkbox/Checkbox.adaptive.html
 [`Radio.adaptive()`]: {{site.api}}/flutter/material/Radio/Radio.adaptive.html
@@ -618,26 +590,24 @@ bars follows the design guidelines defined in [Material 3][mat-appbar].
 On iOS, an equivalent component called "Navigation Bars" 
 is defined in [Apple's Human Interface Guidelines][hig-appbar] (HIG). 
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img src="/assets/images/docs/platform-adaptations/mat-appbar.png" 
-        class="figure-img img-fluid rounded" alt=" Top App Bar in Material 3 " />
-        <figcaption class="figure-caption">
-          Top App Bar in Material 3 
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm">
-      <figure class="figure text-center">
-        <img src="/assets/images/docs/platform-adaptations/hig-appbar.png" 
-        class="figure-img img-fluid rounded" alt="Navigation Bar in Human Interface Guidelines" />
-        <figcaption class="figure-caption">
-          Navigation Bar in Human Interface Guidelines
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img src="/assets/images/docs/platform-adaptations/mat-appbar.png" 
+      class="figure-img img-fluid rounded" alt=" Top App Bar in Material 3 " />
+      <figcaption class="figure-caption">
+        Top App Bar in Material 3 
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm">
+    <figure class="figure text-center">
+      <img src="/assets/images/docs/platform-adaptations/hig-appbar.png" 
+      class="figure-img img-fluid rounded" alt="Navigation Bar in Human Interface Guidelines" />
+      <figcaption class="figure-caption">
+        Navigation Bar in Human Interface Guidelines
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -693,26 +663,24 @@ bars follow the design guidelines defined in [Material 3][mat-navbar].
 On iOS, an equivalent component called "Tab Bars" 
 is defined in [Apple's Human Interface Guidelines][hig-tabbar] (HIG). 
 
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img src="/assets/images/docs/platform-adaptations/mat-navbar.png" 
-        class="figure-img img-fluid rounded" alt="Bottom Navigation Bar in Material 3 " />
-        <figcaption class="figure-caption">
-          Bottom Navigation Bar in Material 3 
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm">
-      <figure class="figure text-center">
-        <img src="/assets/images/docs/platform-adaptations/hig-tabbar.png" 
-        class="figure-img img-fluid rounded" alt="Tab Bar in Human Interface Guidelines" />
-        <figcaption class="figure-caption">
-         Tab Bar in Human Interface Guidelines
-        </figcaption>
-      </figure>
-    </div>
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img src="/assets/images/docs/platform-adaptations/mat-navbar.png" 
+      class="figure-img img-fluid rounded" alt="Bottom Navigation Bar in Material 3 " />
+      <figcaption class="figure-caption">
+        Bottom Navigation Bar in Material 3 
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm">
+    <figure class="figure text-center">
+      <img src="/assets/images/docs/platform-adaptations/hig-tabbar.png" 
+      class="figure-img img-fluid rounded" alt="Tab Bar in Human Interface Guidelines" />
+      <figcaption class="figure-caption">
+        Tab Bar in Human Interface Guidelines
+      </figcaption>
+    </figure>
   </div>
 </div>
 
@@ -775,28 +743,26 @@ Scaffold(
 Since Android 12, text fields follow the
 [Material 3][m3-text-field] (M3) design guidelines. 
 On iOS, Apple's [Human Interface Guidelines][hig-text-field] (HIG) define
-an equivalent component. 
-
-<div class="container">
-  <div class="row">
-    <div class="col-sm text-center">
-      <figure class="figure">
-        <img src="/assets/images/docs/platform-adaptations/m3-text-field.png" 
-        class="figure-img img-fluid rounded" alt="Text Field in Material 3" />
-        <figcaption class="figure-caption">
-          Text Field in Material 3
-        </figcaption>
-      </figure>
-    </div>
-    <div class="col-sm">
-      <figure class="figure text-center">
-        <img src="/assets/images/docs/platform-adaptations/hig-text-field.png" 
-        class="figure-img img-fluid rounded" alt="Text Field in Human Interface Guidelines" />
-        <figcaption class="figure-caption">
-          Text Field in HIG
-        </figcaption>
-      </figure>
-    </div>
+an equivalent component.
+
+<div class="row">
+  <div class="col-sm text-center">
+    <figure class="figure">
+      <img src="/assets/images/docs/platform-adaptations/m3-text-field.png" 
+      class="figure-img img-fluid rounded" alt="Text Field in Material 3" />
+      <figcaption class="figure-caption">
+        Text Field in Material 3
+      </figcaption>
+    </figure>
+  </div>
+  <div class="col-sm">
+    <figure class="figure text-center">
+      <img src="/assets/images/docs/platform-adaptations/hig-text-field.png" 
+      class="figure-img img-fluid rounded" alt="Text Field in Human Interface Guidelines" />
+      <figcaption class="figure-caption">
+        Text Field in HIG
+      </figcaption>
+    </figure>
   </div>
 </div>
 
diff --git a/src/content/platform-integration/web/install-web/index.md b/src/content/platform-integration/web/install-web/index.md
index db4d72de8f..59906902d5 100644
--- a/src/content/platform-integration/web/install-web/index.md
+++ b/src/content/platform-integration/web/install-web/index.md
@@ -24,8 +24,8 @@ or the platform you already have set up.
 
   <a class="card card-app-type {{bug}}" id="install-{{target | downcase}}" href="{{targetLink}}">
     <div class="card-body">
-      <header class="card-title text-center">
-        <span class="d-block h1">
+      <header class="card-title card-center">
+        <span>
           {% assign icon = target | downcase -%}
           {% case icon %}
           {% when 'macos-desktop' -%}
@@ -40,7 +40,7 @@ or the platform you already have set up.
           <span class="material-symbols">add</span>
           <span class="material-symbols">web</span>
         </span>
-        <span class="text-muted d-block">
+        <span class="card-muted">
         Make web and
         {{ target | replace: "-", " " | capitalize | replace: "Macos",
         "macOS" | replace: "macos", "macOS" | replace: "Ios", "iOS" |
diff --git a/src/content/platform-integration/windows/install-windows/index.md b/src/content/platform-integration/windows/install-windows/index.md
index 0e4c2c9e64..b80a7c2f6a 100644
--- a/src/content/platform-integration/windows/install-windows/index.md
+++ b/src/content/platform-integration/windows/install-windows/index.md
@@ -14,8 +14,8 @@ or the platform you already have set up.
 {% assign targetLink = '/platform-integration/windows/install-windows/install-windows-from-' | append: target | downcase %}
   <a class="card card-app-type card-windows" id="install-{{target | downcase}}" href="{{targetLink}}">
     <div class="card-body">
-      <header class="card-title text-center">
-        <span class="d-block h1">
+      <header class="card-title card-center">
+        <span>
           {% assign icon = target | downcase -%}
           {% case icon %}
           {% when 'android' -%}
@@ -26,7 +26,7 @@ or the platform you already have set up.
           <span class="material-symbols">add</span>
           <span class="material-symbols">desktop_windows</span>
         </span>
-        <span class="text-muted d-block">
+        <span class="card-muted">
         Make Windows desktop and {{ target }} apps
         </span>
       </header>
diff --git a/src/content/release/archive.md b/src/content/release/archive.md
index 8e4c10f162..362fcdf35f 100644
--- a/src/content/release/archive.md
+++ b/src/content/release/archive.md
@@ -5,13 +5,6 @@ description: "All current Flutter SDK releases: stable, beta, and main."
 toc: false
 ---
 
-<style>
-.scrollable-table {
-  overflow-y: scroll;
-  max-height: 20rem;
-}
-</style>
-
 The {{site.sdk.channel | capitalize }} channel contains the
 most stable Flutter builds.
 To learn more, check out [Flutter's channels][].
diff --git a/src/content/search-all.html b/src/content/search-all.html
index 2551f6657e..d9aba5029b 100644
--- a/src/content/search-all.html
+++ b/src/content/search-all.html
@@ -1,7 +1,9 @@
 ---
-title: Search more sites
-description: Search flutter.dev, api.flutter.dev, dart.dev, and more.
-toc: false
+title: Search all Flutter sites
+description: Search docs.flutter.dev, api.flutter.dev, dart.dev, and more.
+body_class: menu-wide-toggled
+show_breadcrumbs: false
+show_banner: false
 ---
 
 <p>
@@ -12,7 +14,7 @@
 Want only results from flutter.dev? <a href="/search">Search flutter.dev.</a>
 </p>
 
-<div class="d-flex searchbar">
+<div id="search-body">
   <script async src="https://cse.google.com/cse.js?cx=946ac142e5c252cbc"></script>
   <div class="gcse-search"></div>
 </div>
diff --git a/src/content/search.html b/src/content/search.html
index 1139681a17..0536bd3e10 100644
--- a/src/content/search.html
+++ b/src/content/search.html
@@ -1,14 +1,18 @@
 ---
-title: Search flutter.dev
+title: Search Flutter docs
 short-title: Search
-description: The search page for flutter.dev.
-toc: false
+description: The search page for docs.flutter.dev.
+body_class: menu-wide-toggled
+show_breadcrumbs: false
+show_banner: false
 ---
 
-Want results from additional Flutter-related sites, like api.flutter.dev and dart.dev?
-<a href="/search-all">Search more sites.</a>
+<p>
+  Want results from additional Flutter-related sites, like api.flutter.dev and dart.dev?
+  <a href="/search-all">Search more sites.</a>
+</p>
 
-<div class="d-flex searchbar">
+<div id="search-body">
   <script async src="https://cse.google.com/cse.js?cx=d67ad728b5ad14785"></script>
   <div class="gcse-search"></div>
 </div>
diff --git a/src/content/ui/navigation/deep-linking.md b/src/content/ui/navigation/deep-linking.md
index cebe6c8d65..d4f0401e4a 100644
--- a/src/content/ui/navigation/deep-linking.md
+++ b/src/content/ui/navigation/deep-linking.md
@@ -41,14 +41,14 @@ To get started, see our cookbooks for Android and iOS:
 <div class="card-grid">
   <a class="card" href="/cookbook/navigation/set-up-app-links">
     <div class="card-body">
-      <header class="card-title text-center">
+      <header class="card-title card-center">
         Android
       </header>
     </div>
   </a>
   <a class="card" href="/cookbook/navigation/set-up-universal-links">
     <div class="card-body">
-      <header class="card-title text-center">
+      <header class="card-title card-center">
         iOS
       </header>
     </div>
diff --git a/src/content/ui/widgets/index.md b/src/content/ui/widgets/index.md
index 7e73f16dc7..596e74c05b 100644
--- a/src/content/ui/widgets/index.md
+++ b/src/content/ui/widgets/index.md
@@ -19,12 +19,12 @@ on [pub.dev]({{site.pub}}), the package repository for Dart and Flutter.
 {% assign categories = catalog.index | sort: 'name' -%}
 {% for section in categories %}
     {%- if section.name == "Cupertino" or section.name == "Material components" -%}
-        <div class="card">
+        <a class="card" href="{{page.url}}{{section.id}}">
             <div class="card-body">
-                <a href="{{page.url}}{{section.id}}"><header class="card-title">{{section.name}}</header></a>
+                <header class="card-title">{{section.name}}</header>
                 <p class="card-text">{{section.description}}</p>
             </div>
-        </div>
+        </a>
     {% endif -%}
 {% endfor %}
 </div>
@@ -38,12 +38,12 @@ like input, layout, and text.
 {% assign categories = catalog.index | sort: 'name' -%}
 {% for section in categories %}
     {%- if section.name != "Cupertino" and section.name != "Material components" and section.name != "Material 2 components" -%}
-        <div class="card">
+        <a class="card" href="{{page.url}}{{section.id}}">
             <div class="card-body">
-                <a href="{{page.url}}{{section.id}}"><header class="card-title">{{section.name}}</header></a>
+                <header class="card-title">{{section.name}}</header>
                 <p class="card-text">{{section.description}}</p>
             </div>
-        </div>
+        </a>
     {% endif -%}
 {% endfor %}
 </div>
@@ -86,6 +86,6 @@ help you quickly get started with Flutter widgets.
     </div>
 </div>
 
-<a class="btn btn-primary full-width" target="_blank" href="{{site.yt.playlist}}PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG">Watch more widget of the week videos</a>
+<a class="filled-button full-width" target="_blank" href="{{site.yt.playlist}}PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG">Watch more widget of the week videos</a>
 
 [widget index]: /reference/widgets