diff --git a/src/_includes/navigation-sub.html b/src/_includes/prev-next.html
similarity index 94%
rename from src/_includes/navigation-sub.html
rename to src/_includes/prev-next.html
index d5f7777a60..806c09c17f 100644
--- a/src/_includes/navigation-sub.html
+++ b/src/_includes/prev-next.html
@@ -1,5 +1,5 @@
 {% if nextpage.url or prevpage.url %}
-<nav id="subnav">
+<nav id="prev-next">
   <ul>
     <li class="previous">
       {% if prevpage.url %}
diff --git a/src/_layouts/default.html b/src/_layouts/default.html
index 9d7cd8ef10..bd11b21b6f 100644
--- a/src/_layouts/default.html
+++ b/src/_layouts/default.html
@@ -8,7 +8,7 @@
     {% endif -%}
   {% endif -%}
   <body class="{{layout}}{% if toc %}{% if toc == false %} hide_toc{% endif %}{% endif %}{% if obsolete %}{% if obsolete == true %} obsolete{% endif %}{% endif %}{% if body_class %} {{ body_class }}{% endif %}">
-    <a id="skip" href="#site-content-title" tabindex="1">Skip to main content</a>
+    <a id="skip-to-main" class="filled-button" href="#site-content-title" tabindex="1">Skip to main content</a>
     {% render 'cookie-notice.html' %}
     {% render 'gtags.html' %}
     {% include 'page-header.html', obsolete:obsolete %}
@@ -35,7 +35,7 @@ <h1>{{title }}</h1>
             {% include 'navigation-toc-top.html', tocContents:tocContents -%}
             {% endif -%}
             {{ content }}
-            {% render 'navigation-sub.html', prevpage:prevpage, nextpage:nextpage %}
+            {% render 'prev-next.html', prevpage:prevpage, nextpage:nextpage %}
 
             {% include 'page-github-links.html' -%}
           </div>
diff --git a/src/_sass/_books.scss b/src/_sass/_books.scss
deleted file mode 100644
index 950462e79e..0000000000
--- a/src/_sass/_books.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.book-img-with-details {
-  margin-bottom: 1.5rem;
-
-  img {
-    width: 100%;
-    max-width: 200px;
-
-    @media (min-width: 768px) {
-      max-width: unset;
-    }
-  }
-
-  .details {
-    .title {
-      margin-bottom: 0;
-
-      @media (min-width: 768px) {
-        margin-top: 0;
-      }
-    }
-  }
-}
diff --git a/src/_sass/_dartvm.scss b/src/_sass/_dartvm.scss
deleted file mode 100644
index 8cd4b2bbea..0000000000
--- a/src/_sass/_dartvm.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-#stable,
-#beta,
-#dev {
-  tbody {
-    tr {
-      transition: all .25s ease-in-out;
-
-      &.hidden {
-        display: none;
-      }
-    }
-  }
-}
diff --git a/src/_sass/_site.scss b/src/_sass/_site.scss
index fe15f08593..9647035ea2 100644
--- a/src/_sass/_site.scss
+++ b/src/_sass/_site.scss
@@ -1,815 +1,37 @@
 // Must be imported first to ensure that
 // the reset is applied before any other styles are applied.
-@use 'core/reset';
+@use 'base/reset';
 
-@use 'core/variables' as *;
-@use 'core/mixins' as *;
+@use 'base/variables' as *;
+@use 'base/mixins' as *;
 
-@use 'core/base';
-@use 'core/utils';
+@use 'base/base';
+@use 'base/layout';
+@use 'base/utils';
 
 @use 'components/alert';
 @use 'components/banner';
+@use 'components/breadcrumbs';
 @use 'components/card';
 @use 'components/code';
+@use 'components/content';
 @use 'components/cookie-notice';
+@use 'components/footer';
 @use 'components/form';
+@use 'components/glossary';
 @use 'components/header';
 @use 'components/linter-rules';
+@use 'components/misc';
+@use 'components/os-tabs';
+@use 'components/pagination';
 @use 'components/search';
-@use 'components/sidebar';
+@use 'components/sidenav';
 @use 'components/tags';
 @use 'components/toc';
 
-@use 'dartvm';
-@use 'books';
-@use 'os-tabs';
-@use 'dash';
+@use 'pages/dash';
+@use 'pages/error';
 
 // Must be imported last to ensure that
 // the print overrides take priority over earlier defined styles.
-@use 'core/print';
-
-/* -----------------------------------------
-  DOM
-  ----------------------------------------- */
-
-#page-header {
-  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
-}
-
-#page-content {
-  min-height: calc(100vh - $site-header-height);
-  min-width: 0;
-  width: 100%;
-
-  &:not(.focused) {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-  }
-
-  body.obsolete & {
-    border: 0.5rem solid $alert-warning-bg;
-    border-top: none;
-  }
-
-  > article {
-    min-width: 8rem;
-
-    > .content {
-      max-width: 58rem;
-      margin-left: auto;
-      margin-right: auto;
-      padding-top: $site-content-top-padding;
-    }
-  }
-}
-
-#site-below-header {
-  display: flex;
-  flex-direction: column;
-  max-height: calc(100vh - $site-header-height);
-  overflow-y: auto;
-}
-
-#site-main-row {
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-#site-content-title {
-  margin-bottom: 1.5rem;
-  scroll-margin: 2rem;
-}
-
-#page-footer {
-  position: relative;
-  z-index: 1000;
-  background-color: $site-color-footer;
-  padding: 32px;
-
-  color: $site-color-light-grey;
-  font-weight: 400;
-  font-family: $site-font-family-alt;
-  font-size: $font-size-small;
-
-  .brand {
-    width: 176px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0.125rem;
-  }
-
-  .footer-section {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    justify-content: space-between;
-    text-align: left;
-
-    @media(max-width: 768px) {
-      flex-direction: column;
-      text-align: center;
-    }
-  }
-
-  .footer-main {
-    margin-bottom: 24px;
-    align-items: center;
-  }
-
-  .footer-tray {
-    border-top: 1px solid #82878c;
-    padding-top: 24px;
-
-    .footer-licenses {
-      width: 70%;
-      max-width: 720px;
-
-      @media(max-width: 768px) {
-        width: 100%;
-      }
-    }
-  }
-
-  .footer-social-links {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-
-    a {
-      display: inline-flex;
-      text-align: center;
-      padding: 0.25rem;
-      align-items: center;
-      justify-content: center;
-      text-decoration: none;
-
-      svg {
-        height: 2rem;
-        width: 2rem;
-      }
-    }
-
-    @media(max-width: 768px) {
-      margin-top: 24px;
-    }
-  }
-
-  ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-
-    li {
-      display: inline;
-      margin-left: 16px;
-    }
-
-    @media(max-width: 768px) {
-      margin-top: 12px;
-
-      li:first-child {
-        margin-left: 0;
-      }
-    }
-  }
-
-  a {
-    color: $site-color-light-grey;
-    font-family: $site-font-family-alt;
-
-    &:hover, &:focus, &:active {
-      color: $site-color-white;
-    }
-  }
-}
-
-// Navigation
-#menu-toggle {
-  display: none;
-  align-items: center;
-  line-height: $site-header-height;
-  margin-left: 20px;
-  padding-right: 10px;
-  cursor: pointer;
-  z-index: 100;
-  user-select: none;
-
-  span {
-    font-size: 32px;
-  }
-}
-
-#mainnav {
-  background-color: $site-color-header;
-  color: $site-color-header-text;
-  display: flex;
-  align-items: center;
-
-  ul {
-    margin: 0 0 0 auto;
-    padding: 0;
-    list-style: none;
-
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-
-    li {
-      padding: 0 0.75rem;
-
-      a {
-        color: $site-color-header-text;
-        display: inline-block;
-        padding: 0 6px;
-        font-size: $site-font-size-header;
-        font-weight: 400;
-        font-family: $site-font-family-alt;
-
-        &:hover, &:active {
-          color: $site-color-card-link;
-        }
-      }
-
-      &.searchfield {
-        position: relative;
-
-        form {
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
-  }
-
-  .brand {
-    display: flex;
-    width: 5.5rem;
-    overflow: hidden;
-    margin-left: 1.25rem;
-    align-items: center;
-  }
-}
-
-#subnav {
-  min-height: 32px;
-  line-height: 32px;
-  margin-bottom: 10px;
-
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-
-    li {
-      display: inline-block;
-      width: 49%;
-
-      a {
-        display: block;
-        padding-left: 5px;
-        padding-right: 5px;
-      }
-
-      &.next {
-        float: right;
-        text-align: right;
-      }
-    }
-  }
-}
-
-
-/* -----------------------------------------
- Anchor links
- ----------------------------------------- */
-$icon-size: 24px;
-$anchor-padding: 4px;
-
-main .content {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    // Push # link targets clear of page header.
-    &[id] {
-      scroll-margin: 1.5rem;
-    }
-
-    // Let the wrapper set the bottom margin.
-    margin-bottom: 0;
-  }
-
-  // Push # link targets clear of page header.
-  a[id] {
-    scroll-margin: 1.5rem;
-  }
-
-  .header-wrapper {
-    display: flex;
-    margin-block-start: 1.5rem;
-    margin-block-end: 0.75rem;
-    align-items: center;
-
-    .heading-link {
-      border-radius: 0.125rem;
-      margin-left: 0.4rem;
-      font-size: 1.3rem;
-      line-height: 1;
-      @include transition(.1s);
-      overflow: hidden;
-      color: #4a4a4a;
-      opacity: 0;
-      text-decoration: none;
-
-      &:hover {
-        color: $brand-primary;
-      }
-
-      &:focus {
-        opacity: 1;
-      }
-
-      &:active {
-        color: $flutter-color-blue-700;
-      }
-    }
-
-    &:hover {
-      .heading-link {
-        opacity: 1
-      }
-    }
-  }
-}
-
-
-/* -----------------------------------------
-  Utility Classes
- ----------------------------------------- */
-
-.content {
-  position: relative;
-  padding: 2rem;
-}
-
-.button {
-  padding: 5px 10px;
-  color: $blue;
-  border-radius: 8px;
-}
-
-// Columns
-.cols2 {
-  list-style: none;
-  column-count: 2;
-  column-gap: 0;
-  padding-left: $font-size-base * 0.5;
-
-  li {
-    page-break-inside: avoid;
-    padding: $font-size-base * 0.5;
-    font-size: $font-size-small;
-  }
-}
-
-.logo-link-grids {
-  list-style-type: none;
-  padding: 0;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
-  gap: 1rem;
-  margin-left: 1rem;
-
-  a {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-
-    span {
-      font-weight: 500;
-    }
-  }
-
-  img {
-    width: 3rem;
-    margin: 0.25rem;
-  }
-}
-
-// Callouts for related lints in Effective Dart guidelines.
-.linter-rule {
-  margin-block-start: -0.375rem;
-  font-size: 0.9em;
-  font-style: italic;
-}
-
-.list-image {
-  width: 48px;
-  margin: 0.25rem;
-}
-
-.text-icon {
-  margin: 0 0.25rem;
-  width: 20px;
-  height: 20px;
-}
-
-.muted {
-  color: $gray;
-}
-
-.footnote {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-
-  li {
-    counter-increment: step-counter;
-    margin-bottom: 10px;
-    position: relative;
-
-    &:before {
-      content: counter(step-counter);
-      position: absolute;
-      left: -25px;
-      top: -3px;
-      font-size: 20px;
-      font-weight: bold;
-      padding: 3px 8px;
-    }
-  }
-}
-
-.container {
-  position: relative;
-  max-width: 100%;
-  width: 1280px;
-  margin: 0 auto;
-}
-
-.table {
-  width: 100%;
-  border-spacing: 0;
-
-  thead {
-    vertical-align: bottom;
-
-    th {
-      border-top: 1px solid $site-color-light-grey;
-      border-bottom: 2px solid $site-color-light-grey;
-      text-align: start;
-    }
-  }
-
-  tbody {
-    tr {
-      vertical-align: top;
-
-      &:nth-of-type(odd) {
-        background-color: rgba(0, 0, 0, 0.05);
-      }
-    }
-  }
-
-  td, th {
-    border: none;
-    padding: .75rem;
-  }
-}
-
-// If table head has empty children, just hide it
-// since markdown-it's tables don't support headless tables.
-thead:has(th:empty) {
-  display: none;
-}
-
-.table-wrapper {
-  overflow-x: auto;
-  margin-block-start: 1rem;
-  margin-block-end: 1rem;
-}
-
-.material-symbols {
-  font-family: $site-font-family-icon;
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
-
-/* Used for inlined icon markers, usually at the start of a paragraph */
-.content > p {
-  > i.material-symbols, > span.material-symbols {
-    vertical-align: bottom;
-    user-select: none;
-  }
-}
-
-// Make icons used in system requirements table unselectable.
-.system-support {
-  user-select: none;
-}
-
-nav.breadcrumbs {
-  align-items: center;
-  margin-block-start: 1rem;
-  margin-block-end: 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;
-}
-
-ul.nav-list {
-  list-style: none;
-  padding: 0;
-
-  li {
-    border-bottom: 1px solid $gray-light;
-
-    h2 {
-      font-weight: 400;
-      font-size: 20px;
-      margin-bottom: 0;
-    }
-  }
-}
-
-
-/* -----------------------------------------
-  Templates
- ----------------------------------------- */
-
-// Homepage
-body.homepage {
-  #sidenav {
-    display: none;
-  }
-}
-
-// Error Page
-body.error {
-  #sidenav {
-    display: none;
-  }
-
-  .banner {
-    display: none;
-  }
-
-  background-color: #132030;
-  background-image: url('/assets/img/404-bg-pattern.jpg');
-  color: #8d9399;
-
-  @media(min-width: 1600px) {
-    background-size: cover;
-  }
-
-  h1 {
-    color: white;
-    font-family: $site-font-family-gsans-display;
-    font-size: 100px;
-    margin: 0 auto;
-  }
-
-  h2 {
-    color: white;
-    font-family: $site-font-family-gsans;
-    font-size: 24px;
-    margin: 8px auto 16px;
-  }
-
-  #in-content-search {
-    input[type="search"] {
-      display: inline-block;
-      background: #35404d;
-      color: white;
-      font-size: 20px;
-      padding: 10px 40px;
-      border-radius: 30px;
-      height: 70px;
-      line-height: 70px;
-      width: 100%;
-      max-width: 880px;
-      margin: 0 auto 88px;
-    }
-  }
-
-  .content {
-    a {
-      color: $site-color-card-link;
-    }
-  }
-}
-
-// Top-level Page
-body.top {
-  #sidenav {
-    display: none;
-  }
-
-  #site-toc--inline {
-    display: block;
-  }
-
-  #site-toc--side {
-    display: none;
-  }
-}
-
-body.obsolete {
-  #page-header {
-    .alert {
-      margin: 0;
-
-      h4 {
-        margin-bottom: 0;
-        margin-top: 0;
-      }
-    }
-  }
-}
-
-
-/* -----------------------------------------
-  Media Queries
- ----------------------------------------- */
-
-@media(max-width: 1024px) {
-  #menu-toggle {
-    display: flex;
-  }
-
-  #sidenav {
-    width: 100%;
-    background: #fff;
-    z-index: 100;
-
-    .site-header__search {
-      display: flex;
-    }
-  }
-
-  body.open_menu {
-    &:before {
-      content: '';
-      display: block;
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 100%;
-      z-index: 5;
-      background-color: rgba($gray-base, 0.4);
-      cursor: pointer;
-      pointer-events: none;
-      @include transition(0.5s);
-    }
-
-    // Hide the body content and only show the sidenav.
-    #page-content {
-      display: none;
-    }
-
-    #sidenav {
-      display: block;
-    }
-  }
-}
-
-@media(max-width: 960px) {
-  #mainnav {
-    ul {
-      li {
-        display: none;
-
-        &.searchfield {
-          display: block;
-        }
-      }
-    }
-  }
-}
-
-@media(max-width: 600px) {
-  .card {
-    width: 100%;
-  }
-}
-
-@media(max-width: 479px) {
-  #menu-toggle {
-    order: 2;
-  }
-
-  #mainnav {
-    ul {
-      li {
-        &.searchfield {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-dd {
-  margin-left: 1rem;
-}
-
-/* -----------------------------------------
-  Headings in tab boxes
- ----------------------------------------- */
-
-div.tabs__content h1, h2, h3, h4, h5, h6 {
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-#skip {
-  top: 10px;
-  left: 10px;
-  position: absolute;
-  z-index: $site-z-skip;
-  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);
-}
-
-.glossary-page {
- .term-separator {
-   border-top: 0.05rem solid $site-color-light-grey;
- }
-}
+@use 'base/print';
diff --git a/src/_sass/core/_base.scss b/src/_sass/base/_base.scss
similarity index 87%
rename from src/_sass/core/_base.scss
rename to src/_sass/base/_base.scss
index dd81271f83..1ff01206c7 100644
--- a/src/_sass/core/_base.scss
+++ b/src/_sass/base/_base.scss
@@ -1,5 +1,5 @@
-@use '../core/variables' as *;
-@use '../core/mixins' as *;
+@use 'variables' as *;
+@use 'mixins' as *;
 
 :root {
   --site-interaction-base-values: 0 0 0;
@@ -35,6 +35,22 @@ h1, .h1 {
   margin-bottom: 0;
 }
 
+.material-symbols {
+  font-family: $site-font-family-icon;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
 h2, .h2 {
   font-size: 1.5rem;
 }
@@ -55,6 +71,10 @@ h6, .h6 {
   font-size: 0.9375rem;
 }
 
+dd {
+  margin-left: 1rem;
+}
+
 dt {
   a {
     font-weight: 500;
diff --git a/src/_sass/base/_layout.scss b/src/_sass/base/_layout.scss
new file mode 100644
index 0000000000..2bb3b5ae5d
--- /dev/null
+++ b/src/_sass/base/_layout.scss
@@ -0,0 +1,55 @@
+@use '../base/variables' as *;
+
+#page-header {
+  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
+}
+
+#page-content {
+  min-height: calc(100vh - $site-header-height);
+  min-width: 0;
+  width: 100%;
+
+  &:not(.focused) {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  body.obsolete & {
+    border: 0.5rem solid $alert-warning-bg;
+    border-top: none;
+  }
+
+  > article {
+    min-width: 8rem;
+
+    > .content {
+      max-width: 58rem;
+      margin-left: auto;
+      margin-right: auto;
+      padding: $site-content-top-padding;
+    }
+  }
+}
+
+#site-below-header {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - $site-header-height);
+  overflow-y: auto;
+}
+
+#site-main-row {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.container {
+  position: relative;
+  max-width: 100%;
+  width: 1280px;
+  margin: 0 auto;
+}
diff --git a/src/_sass/core/_mixins.scss b/src/_sass/base/_mixins.scss
similarity index 93%
rename from src/_sass/core/_mixins.scss
rename to src/_sass/base/_mixins.scss
index 973d7be19b..c09ea19690 100644
--- a/src/_sass/core/_mixins.scss
+++ b/src/_sass/base/_mixins.scss
@@ -1,4 +1,4 @@
-@use '../core/variables' as *;
+@use 'variables' as *;
 
 @mixin transition($duration: 0.3s, $property: all, $effect: ease-in-out) {
   transition: $property $duration $effect;
diff --git a/src/_sass/core/_print.scss b/src/_sass/base/_print.scss
similarity index 90%
rename from src/_sass/core/_print.scss
rename to src/_sass/base/_print.scss
index 2468750a64..f1f415a5a2 100644
--- a/src/_sass/core/_print.scss
+++ b/src/_sass/base/_print.scss
@@ -2,7 +2,7 @@
 
 @media print {
   // Don't display navigation aids when printing.
-  #page-header, #sidenav, #subnav, #page-footer, .banner,
+  #page-header, #sidenav, #prev-next, #page-footer, .banner,
   #site-toc--inline, #site-toc--side, #page-github-links, #cookie-notice {
     display: none !important;
   }
diff --git a/src/_sass/core/_reset.scss b/src/_sass/base/_reset.scss
similarity index 93%
rename from src/_sass/core/_reset.scss
rename to src/_sass/base/_reset.scss
index ffd29e391a..686713cefb 100644
--- a/src/_sass/core/_reset.scss
+++ b/src/_sass/base/_reset.scss
@@ -1,4 +1,4 @@
-@use '../core/variables' as *;
+@use 'variables' as *;
 
 *, ::before, ::after {
   box-sizing: border-box;
diff --git a/src/_sass/core/_utils.scss b/src/_sass/base/_utils.scss
similarity index 100%
rename from src/_sass/core/_utils.scss
rename to src/_sass/base/_utils.scss
diff --git a/src/_sass/core/_variables.scss b/src/_sass/base/_variables.scss
similarity index 100%
rename from src/_sass/core/_variables.scss
rename to src/_sass/base/_variables.scss
diff --git a/src/_sass/components/_alert.scss b/src/_sass/components/_alert.scss
index 75c2b27608..f51d173196 100644
--- a/src/_sass/components/_alert.scss
+++ b/src/_sass/components/_alert.scss
@@ -1,4 +1,4 @@
-@use '../core/variables' as *;
+@use '../base/variables' as *;
 
 aside.alert {
   --alert-info-fgColor: #2058b7;
diff --git a/src/_sass/components/_banner.scss b/src/_sass/components/_banner.scss
index 64643f314b..afcb1c09d1 100644
--- a/src/_sass/components/_banner.scss
+++ b/src/_sass/components/_banner.scss
@@ -1,6 +1,6 @@
 @use 'sass:color';
 
-@use '../core/variables' as *;
+@use '../base/variables' as *;
 
 #site-banner {
   display: flex;
diff --git a/src/_sass/components/_breadcrumbs.scss b/src/_sass/components/_breadcrumbs.scss
new file mode 100644
index 0000000000..ab7245d5f5
--- /dev/null
+++ b/src/_sass/components/_breadcrumbs.scss
@@ -0,0 +1,47 @@
+@use '../base/variables' as *;
+
+nav.breadcrumbs {
+  align-items: center;
+  margin-block-start: 1rem;
+  margin-block-end: 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;
+    }
+  }
+}
diff --git a/src/_sass/components/_card.scss b/src/_sass/components/_card.scss
index 9cb73e1828..6519ec20f0 100644
--- a/src/_sass/components/_card.scss
+++ b/src/_sass/components/_card.scss
@@ -1,5 +1,5 @@
-@use '../core/mixins' as *;
-@use '../core/variables' as *;
+@use '../base/mixins' as *;
+@use '../base/variables' as *;
 
 .card-grid {
   display: grid;
diff --git a/src/_sass/components/_code.scss b/src/_sass/components/_code.scss
index 59090f2c8f..1394e6a582 100644
--- a/src/_sass/components/_code.scss
+++ b/src/_sass/components/_code.scss
@@ -1,6 +1,6 @@
 @use 'sass:color';
 
-@use '../core/variables' as *;
+@use '../base/variables' as *;
 
 *:not(pre) > code {
   font-size: 0.9em;
diff --git a/src/_sass/components/_content.scss b/src/_sass/components/_content.scss
new file mode 100644
index 0000000000..8f3110659e
--- /dev/null
+++ b/src/_sass/components/_content.scss
@@ -0,0 +1,137 @@
+@use '../base/variables' as *;
+@use '../base/mixins' as mixins;
+
+article {
+  .table {
+    width: 100%;
+    border-spacing: 0;
+
+    thead {
+      vertical-align: bottom;
+
+      th {
+        border-top: 1px solid $site-color-light-grey;
+        border-bottom: 2px solid $site-color-light-grey;
+        text-align: start;
+      }
+    }
+
+    tbody {
+      tr {
+        vertical-align: top;
+
+        &:nth-of-type(odd) {
+          background-color: rgba(0, 0, 0, 0.05);
+        }
+      }
+    }
+
+    td, th {
+      border: none;
+      padding: .75rem;
+    }
+  }
+
+  // If table head has empty children, just hide it
+  // since markdown-it's tables don't support headless tables.
+  thead:has(th:empty) {
+    display: none;
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+    margin-block-start: 1rem;
+    margin-block-end: 1rem;
+  }
+
+  #site-content-title {
+    margin-bottom: 1.5rem;
+    scroll-margin: 2rem;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    // Push # link targets clear of page header.
+    &[id] {
+      scroll-margin: 1.5rem;
+    }
+
+    // Let the wrapper set the bottom margin.
+    margin-bottom: 0;
+  }
+
+  // Push # link targets clear of page header.
+  a[id] {
+    scroll-margin: 1.5rem;
+  }
+
+  .header-wrapper {
+    display: flex;
+    margin-block-start: 1.5rem;
+    margin-block-end: 0.75rem;
+    align-items: center;
+
+    .heading-link {
+      border-radius: 0.125rem;
+      margin-left: 0.4rem;
+      font-size: 1.3rem;
+      line-height: 1;
+      @include mixins.transition(.1s);
+      overflow: hidden;
+      color: #4a4a4a;
+      opacity: 0;
+      text-decoration: none;
+
+      &:hover {
+        color: $brand-primary;
+      }
+
+      &:focus {
+        opacity: 1;
+      }
+
+      &:active {
+        color: $flutter-color-blue-700;
+      }
+    }
+
+    &:hover {
+      .heading-link {
+        opacity: 1
+      }
+    }
+  }
+
+  .footnote {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    li {
+      counter-increment: step-counter;
+      margin-bottom: 10px;
+      position: relative;
+
+      &:before {
+        content: counter(step-counter);
+        position: absolute;
+        left: -25px;
+        top: -3px;
+        font-size: 20px;
+        font-weight: bold;
+        padding: 3px 8px;
+      }
+    }
+  }
+
+  .content > p {
+    > i.material-symbols, > span.material-symbols {
+      vertical-align: bottom;
+      user-select: none;
+    }
+  }
+}
diff --git a/src/_sass/components/_cookie-notice.scss b/src/_sass/components/_cookie-notice.scss
index 96af482183..2f20585426 100644
--- a/src/_sass/components/_cookie-notice.scss
+++ b/src/_sass/components/_cookie-notice.scss
@@ -1,4 +1,4 @@
-@use '../core/variables' as *;
+@use '../base/variables' as *;
 
 #cookie-notice {
   display: none;
diff --git a/src/_sass/components/_footer.scss b/src/_sass/components/_footer.scss
new file mode 100644
index 0000000000..c900004a9d
--- /dev/null
+++ b/src/_sass/components/_footer.scss
@@ -0,0 +1,110 @@
+@use '../base/variables' as *;
+
+#page-footer {
+  position: relative;
+  z-index: 1000;
+  background-color: $site-color-footer;
+  padding: 2rem;
+
+  color: $site-color-light-grey;
+  font-weight: 400;
+  font-family: $site-font-family-alt;
+  font-size: $font-size-small;
+
+  .brand {
+    width: 176px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.125rem;
+  }
+
+  .footer-section {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    flex-direction: column;
+    text-align: center;
+
+    @media (min-width: 768px) {
+      flex-direction: row;
+      text-align: left;
+    }
+  }
+
+  .footer-main {
+    margin-bottom: 1.5rem;
+    align-items: center;
+  }
+
+  .footer-tray {
+    border-top: 1px solid #82878c;
+    padding-top: 1.5rem;
+
+    .footer-licenses {
+      width: 100%;
+      max-width: 720px;
+
+      @media (min-width: 768px) {
+        width: 70%;
+      }
+    }
+  }
+
+  .footer-social-links {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    margin-top: 1.5rem;
+
+    a {
+      display: inline-flex;
+      text-align: center;
+      padding: 0.25rem;
+      align-items: center;
+      justify-content: center;
+      text-decoration: none;
+
+      svg {
+        height: 2rem;
+        width: 2rem;
+      }
+    }
+
+    @media (min-width: 768px) {
+      margin-top: 0;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 12px 0 0;
+    padding: 0;
+
+    li {
+      display: inline;
+      margin-left: 16px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    @media (min-width: 768px) {
+      margin-top: 0;
+
+      li:first-child {
+        margin-left: 16px;
+      }
+    }
+  }
+
+  a {
+    color: $site-color-light-grey;
+    font-family: $site-font-family-alt;
+
+    &:hover, &:focus, &:active {
+      color: $site-color-white;
+    }
+  }
+}
diff --git a/src/_sass/components/_form.scss b/src/_sass/components/_form.scss
index 0256a1563f..c6ad2adbf0 100644
--- a/src/_sass/components/_form.scss
+++ b/src/_sass/components/_form.scss
@@ -1,5 +1,5 @@
-@use '../core/variables' as *;
-@use '../core/mixins' as *;
+@use '../base/variables' as *;
+@use '../base/mixins' as *;
 
 form {
   .muted {
diff --git a/src/_sass/components/_glossary.scss b/src/_sass/components/_glossary.scss
new file mode 100644
index 0000000000..860f66b053
--- /dev/null
+++ b/src/_sass/components/_glossary.scss
@@ -0,0 +1,7 @@
+@use '../base/variables' as *;
+
+.glossary-page {
+  .term-separator {
+    border-top: 0.05rem solid $site-color-light-grey;
+  }
+}
diff --git a/src/_sass/components/_header.scss b/src/_sass/components/_header.scss
index 05137f13a8..e6ec11063d 100644
--- a/src/_sass/components/_header.scss
+++ b/src/_sass/components/_header.scss
@@ -1,4 +1,88 @@
-@use '../core/variables' as *;
+@use '../base/variables' as *;
+
+#mainnav {
+  background-color: $site-color-header;
+  color: $site-color-header-text;
+  display: flex;
+  align-items: center;
+
+  ul {
+    margin: 0 0 0 auto;
+    padding: 0;
+    list-style: none;
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+
+    li {
+      padding: 0 0.75rem;
+
+      a {
+        color: $site-color-header-text;
+        display: inline-block;
+        padding: 0 6px;
+        font-size: $site-font-size-header;
+        font-weight: 400;
+        font-family: $site-font-family-alt;
+
+        &:hover, &:active {
+          color: $site-color-card-link;
+        }
+      }
+
+      &.searchfield {
+        position: relative;
+
+        form {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
+
+  .brand {
+    display: flex;
+    width: 5.5rem;
+    overflow: hidden;
+    margin-left: 1.25rem;
+    align-items: center;
+  }
+}
+
+// TODO(parlough): Reverse and simplify these media queries.
+@media(max-width: 960px) {
+  #mainnav {
+    ul {
+      li {
+        display: none;
+
+        &.searchfield {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+@media(max-width: 479px) {
+  #menu-toggle {
+    order: 2;
+  }
+
+  #mainnav {
+    ul {
+      li {
+        &.searchfield {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
 
 .site-header {
   background-color: $site-color-white;
@@ -95,3 +179,27 @@
     }
   }
 }
+
+#menu-toggle {
+  display: none;
+  align-items: center;
+  line-height: $site-header-height;
+  margin-left: 20px;
+  padding-right: 10px;
+  cursor: pointer;
+  z-index: 100;
+  user-select: none;
+
+  span {
+    font-size: 32px;
+  }
+
+  // TODO(parlough): Reverse and simplify these media queries.
+  @media(max-width: 479px) {
+    order: 2;
+  }
+
+  @media(max-width: 1024px) {
+    display: flex;
+  }
+}
diff --git a/src/_sass/components/_linter-rules.scss b/src/_sass/components/_linter-rules.scss
index 3a6132ee27..76726c04c4 100644
--- a/src/_sass/components/_linter-rules.scss
+++ b/src/_sass/components/_linter-rules.scss
@@ -1,4 +1,4 @@
-@use '../core/mixins' as *;
+@use '../base/mixins' as *;
 
 body.linter-rules {
   --filled-button-container-color: #06599C;
diff --git a/src/_sass/components/_misc.scss b/src/_sass/components/_misc.scss
new file mode 100644
index 0000000000..5bfee4b50d
--- /dev/null
+++ b/src/_sass/components/_misc.scss
@@ -0,0 +1,155 @@
+@use '../base/variables' as *;
+
+#skip-to-main {
+  position: absolute;
+  top: 0.75rem;
+  left: -24rem;
+  z-index: 1080;
+  transform: translateX(0);
+
+  &:focus {
+    transform: translateX(25rem);
+  }
+}
+
+.text-icon {
+  margin: 0 0.25rem;
+  width: 20px;
+  height: 20px;
+}
+
+// Used on the custom repositories page for
+// listing third-party repository options.
+.logo-link-grids {
+  list-style-type: none;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+  gap: 1rem;
+  margin-left: 1rem;
+
+  a {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    span {
+      font-weight: 500;
+    }
+  }
+
+  img {
+    width: 3rem;
+    margin: 0.25rem;
+  }
+}
+
+// Callouts for related lints in Effective Dart guidelines.
+.linter-rule {
+  margin-block-start: -0.375rem;
+  font-size: 0.9em;
+  font-style: italic;
+}
+
+// Columns of tools on the tool index page.
+.cols2 {
+  list-style: none;
+  column-count: 2;
+  column-gap: 0;
+  padding-left: $font-size-base * 0.5;
+
+  li {
+    page-break-inside: avoid;
+    padding: $font-size-base * 0.5;
+    font-size: $font-size-small;
+  }
+}
+
+.book-img-with-details {
+  margin-block-start: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  column-gap: 2rem;
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+    margin-block-start: 1.5rem;
+  }
+
+  img {
+    min-width: 0;
+    width: 160px;
+    max-width: 240px;
+
+    @media (min-width: 768px) {
+      width: 200px;
+    }
+  }
+
+  .header-wrapper {
+    margin-block-start: 0.25rem;
+  }
+
+  h3 {
+    margin-block-start: 0;
+  }
+
+  .authors {
+    margin-block-start: -0.5rem;
+  }
+
+  h3.title {
+    font-size: 1.5rem;
+  }
+}
+
+// Used for third-party entries on tools index page.
+.list-image {
+  width: 48px;
+  margin: 0.25rem;
+}
+
+// Make icons used in system requirements table unselectable.
+.system-support {
+  user-select: none;
+}
+
+// Used for lightening entries on the SDK archive.
+.muted {
+  color: $gray;
+}
+
+// Elements on the archive for each channel.
+#stable, #beta, #dev {
+  tbody {
+    tr {
+      transition: all .25s ease-in-out;
+
+      &.hidden {
+        display: none;
+      }
+    }
+  }
+}
+
+#page-github-links {
+  font-style: italic;
+  font-size: 0.75rem;
+  padding-top: 0.25rem;
+
+  border-top: 0.05rem solid $site-color-light-grey;
+}
+
+body.obsolete {
+  #page-header {
+    .alert {
+      margin: 0;
+
+      h4 {
+        margin-bottom: 0;
+        margin-top: 0;
+      }
+    }
+  }
+}
diff --git a/src/_sass/_os-tabs.scss b/src/_sass/components/_os-tabs.scss
similarity index 74%
rename from src/_sass/_os-tabs.scss
rename to src/_sass/components/_os-tabs.scss
index e726a67dfc..550f78c702 100644
--- a/src/_sass/_os-tabs.scss
+++ b/src/_sass/components/_os-tabs.scss
@@ -1,4 +1,4 @@
-@use 'core/variables' as *;
+@use '../base/variables' as *;
 
 $tab-accent-color: $brand-primary;
 
@@ -12,6 +12,14 @@ $tab-accent-color: $brand-primary;
     &.current {
       display: inherit;
     }
+
+    > .header-wrapper:first-child {
+      margin-block-start: 0.25rem;
+
+      h1, h2, h3, h4, h5, h6 {
+        margin-block-start: 0;
+      }
+    }
   }
 
   &__top-bar {
diff --git a/src/_sass/components/_pagination.scss b/src/_sass/components/_pagination.scss
new file mode 100644
index 0000000000..4341753633
--- /dev/null
+++ b/src/_sass/components/_pagination.scss
@@ -0,0 +1,27 @@
+#prev-next {
+  min-height: 32px;
+  line-height: 32px;
+  margin-bottom: 10px;
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    li {
+      display: inline-block;
+      width: 49%;
+
+      a {
+        display: block;
+        padding-left: 5px;
+        padding-right: 5px;
+      }
+
+      &.next {
+        float: right;
+        text-align: right;
+      }
+    }
+  }
+}
diff --git a/src/_sass/components/_search.scss b/src/_sass/components/_search.scss
index a52ea83bb8..cd3f9ef82d 100644
--- a/src/_sass/components/_search.scss
+++ b/src/_sass/components/_search.scss
@@ -1,4 +1,4 @@
-@use '../core/variables' as *;
+@use '../base/variables' as *;
 
 .site-header__search {
   &::before {
diff --git a/src/_sass/components/_sidebar.scss b/src/_sass/components/_sidenav.scss
similarity index 77%
rename from src/_sass/components/_sidebar.scss
rename to src/_sass/components/_sidenav.scss
index 3bea05a81a..910a551103 100644
--- a/src/_sass/components/_sidebar.scss
+++ b/src/_sass/components/_sidenav.scss
@@ -1,5 +1,5 @@
-@use '../core/variables' as *;
-@use '../core/mixins';
+@use '../base/variables' as *;
+@use '../base/mixins';
 
 $sidenav-divider-color: #e7e8ed;
 
@@ -16,6 +16,44 @@ $sidenav-divider-color: #e7e8ed;
 
   border-right: 0.1rem solid $sidenav-divider-color;
 
+  // TODO(parlough): Reverse and simplify these media queries.
+  @media (max-width: 1024px) {
+    width: 100%;
+    background: #fff;
+    z-index: 100;
+
+    .site-header__search {
+      display: flex;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    display: block;
+
+    @at-root body.open_menu {
+      &:before {
+        content: '';
+        display: block;
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 100%;
+        z-index: 5;
+        background-color: rgba($gray-base, 0.4);
+        cursor: pointer;
+        pointer-events: none;
+        @include mixins.transition(0.5s);
+      }
+
+      // Hide the body content and only show the sidenav.
+      #page-content {
+        display: none;
+      }
+    }
+  }
+
   .nav-header {
     font-weight: bolder;
     padding: 0.25rem 0.4rem 0;
diff --git a/src/_sass/components/_tags.scss b/src/_sass/components/_tags.scss
index 1232a94507..d0f5e99064 100644
--- a/src/_sass/components/_tags.scss
+++ b/src/_sass/components/_tags.scss
@@ -1,4 +1,4 @@
-@use '../core/variables' as *;
+@use '../base/variables' as *;
 
 .tag-label {
   user-select: none;
diff --git a/src/_sass/components/_toc.scss b/src/_sass/components/_toc.scss
index 94225890fe..80c48035f2 100644
--- a/src/_sass/components/_toc.scss
+++ b/src/_sass/components/_toc.scss
@@ -1,5 +1,5 @@
-@use '../core/variables' as *;
-@use '../core/mixins' as *;
+@use '../base/variables' as *;
+@use '../base/mixins' as *;
 
 .site-toc {
   ul {
diff --git a/src/_sass/_dash.scss b/src/_sass/pages/_dash.scss
similarity index 99%
rename from src/_sass/_dash.scss
rename to src/_sass/pages/_dash.scss
index 8953e26fb2..6538337ef7 100644
--- a/src/_sass/_dash.scss
+++ b/src/_sass/pages/_dash.scss
@@ -1,4 +1,4 @@
-@use 'core/variables' as *;
+@use '../base/variables' as *;
 
 // Homepage styles
 
@@ -6,6 +6,10 @@
 $dash-max-width: 1330px;
 
 body.homepage {
+  #sidenav {
+    display: none;
+  }
+
   .dash-header-callout {
     font-family: $site-font-family-alt;
     background-color: $dash-callout;
diff --git a/src/_sass/pages/_error.scss b/src/_sass/pages/_error.scss
new file mode 100644
index 0000000000..97ec9fc391
--- /dev/null
+++ b/src/_sass/pages/_error.scss
@@ -0,0 +1,55 @@
+@use '../base/variables' as *;
+
+body.error {
+  #sidenav {
+    display: none;
+  }
+
+  .banner {
+    display: none;
+  }
+
+  background-color: #132030;
+  background-image: url('/assets/img/404-bg-pattern.jpg');
+  color: #8d9399;
+
+  @media(min-width: 1600px) {
+    background-size: cover;
+  }
+
+  h1 {
+    color: white;
+    font-family: $site-font-family-gsans-display;
+    font-size: 100px;
+    margin: 0 auto;
+  }
+
+  h2 {
+    color: white;
+    font-family: $site-font-family-gsans;
+    font-size: 24px;
+    margin: 8px auto 16px;
+  }
+
+  #in-content-search {
+    input[type="search"] {
+      display: inline-block;
+      background: #35404d;
+      color: white;
+      font-size: 20px;
+      padding: 10px 40px;
+      border-radius: 30px;
+      height: 70px;
+      line-height: 70px;
+      width: 100%;
+      max-width: 880px;
+      margin: 0 auto 88px;
+    }
+  }
+
+  .content {
+    a {
+      color: $site-color-card-link;
+    }
+  }
+}
diff --git a/src/content/resources/books.md b/src/content/resources/books.md
index a8e97de1e9..66eb46862c 100644
--- a/src/content/resources/books.md
+++ b/src/content/resources/books.md
@@ -21,17 +21,17 @@ and new developer tools.
 
 {% for book in books-dart %}
 
-<div class="book-img-with-details row">
-<a href="{{book.link}}" title="{{book.title}}" class="col-sm-3">
+<div class="book-img-with-details">
+<a href="{{book.link}}" title="{{book.title}}">
   <img src="/assets/img/cover/{{book.cover}}" alt="{{book.title}}">
 </a>
-<div class="details col-sm-9">
+<div class="details">
 
 ### [{{book.title}}]({{book.link}})
 {:.title}
 
 by {{book.authors | arrayToSentenceString}}
-{:.authors.h4}
+{:.authors}
 
 {{book.desc}}
 
