diff --git a/css/base.css b/css/base.css
index 94e249f3..7833957a 100644
--- a/css/base.css
+++ b/css/base.css
@@ -12,7 +12,7 @@
     background: var(--surface-1);
     color: var(--text-1);
     font-family: var(--font-sans);
-    line-height: 1.5;
+    line-height: var(--font-lineheight-3);
   }
 
   /* Headings use the serif token (Adelle). Drupal core inserts <h1>–<h6>
@@ -21,7 +21,15 @@
      component or utility if a specific UI surface needs the sans family. */
   h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-serif);
+    line-height: var(--font-lineheight-1);
+    margin-block: var(--size-3);
   }
+  h1 { font-size: var(--font-size-6); }
+  h2 { font-size: var(--font-size-5); }
+  h3 { font-size: var(--font-size-4); }
+  h4 { font-size: var(--font-size-3); }
+  h5 { font-size: var(--font-size-2); }
+  h6 { font-size: var(--font-size-1); }
 
   a {
     color: var(--brand);
diff --git a/css/components/breadcrumb.css b/css/components/breadcrumb.css
index 8ba8352b..9d1694c3 100644
--- a/css/components/breadcrumb.css
+++ b/css/components/breadcrumb.css
@@ -1,33 +1,50 @@
-@layer components {
-
 /**
  * @file
  * Styles for breadcrumbs.
+ *
+ * Markup from templates/navigation/breadcrumb.html.twig:
+ *   <nav class="breadcrumb"><ol><li><a>…</a></li>…<li>current</li></ol></nav>
+ * The current page is the last <li> and is not a link.
  */
+@layer components {
 
-.breadcrumb {
-  padding-bottom: 0.5em;
-}
-.breadcrumb ol {
-  margin: 0;
-  padding: 0;
-}
-[dir="rtl"] .breadcrumb ol {
-  /* This is required to win over specificity of [dir="rtl"] ol */
-  margin-right: 0;
-}
-.breadcrumb li {
-  display: inline;
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-/* IE8 does not support :not() and :last-child. */
-.breadcrumb li::before {
-  content: " \BB ";
-}
-.breadcrumb li:first-child::before {
-  content: none;
-}
+  .breadcrumb {
+    padding-bottom: 0.5em;
+    font-size: 0.875em;
+    color: var(--text-2);
+  }
+  .breadcrumb ol {
+    margin: 0;
+    padding: 0;
+  }
+  [dir="rtl"] .breadcrumb ol {
+    /* Wins over specificity of [dir="rtl"] ol. */
+    margin-right: 0;
+  }
+  .breadcrumb li {
+    display: inline;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .breadcrumb li::before {
+    margin-inline: var(--size-2);
+    content: "\BB";
+    color: var(--text-2);
+  }
+  .breadcrumb li:first-child::before {
+    content: none;
+  }
+  .breadcrumb a {
+    color: var(--text-2);
+    text-decoration: none;
+  }
+  .breadcrumb a:hover {
+    color: var(--upei-red);
+    text-decoration: underline;
+  }
+  .breadcrumb li:last-child {
+    color: var(--text-1);
+  }
 
 }
diff --git a/css/components/button.css b/css/components/button.css
index e20abecd..ec7d8769 100644
--- a/css/components/button.css
+++ b/css/components/button.css
@@ -1,19 +1,92 @@
-@layer components {
-
 /**
  * @file
  * Visual styles for buttons.
+ *
+ * Drupal applies .button — and typically .button--primary for the main
+ * action — automatically to <input type="submit">, <button>, and
+ * <a class="button"> via core RenderElement processing.
+ *
+ * Variants commonly emitted by core/contrib:
+ *   .button             — base, neutral
+ *   .button--primary    — primary action (form submit defaults to this)
+ *   .button--danger     — destructive action
+ *   .button--small      — compact size
+ *   .button[disabled]   — disabled state (.is-disabled in some contexts)
  */
+@layer components {
 
-.button,
-.image-button {
-  margin-right: 1em;
-  margin-left: 1em;
-}
-.button:first-child,
-.image-button:first-child {
-  margin-right: 0;
-  margin-left: 0;
-}
+  .button,
+  .image-button {
+    display: inline-block;
+    padding: var(--size-2) var(--size-3);
+    border: 1px solid var(--text-2);
+    border-radius: var(--radius-2);
+    background-color: var(--surface-1);
+    color: var(--text-1);
+    font: inherit;
+    line-height: 1.2;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      background-color 0.15s var(--ease-out-2),
+      border-color 0.15s var(--ease-out-2),
+      color 0.15s var(--ease-out-2);
+  }
+  .button:not(:first-child),
+  .image-button:not(:first-child) {
+    margin-inline-start: var(--size-3);
+  }
+  .button:hover,
+  .image-button:hover {
+    background-color: var(--surface-2);
+    border-color: var(--text-1);
+  }
+  .button:focus,
+  .image-button:focus {
+    outline: 2px solid var(--upei-red);
+    outline-offset: 2px;
+  }
+
+  /* Primary — brand-colored. Form submits typically get this class. */
+  .button--primary {
+    background-color: var(--upei-red);
+    border-color: var(--upei-red);
+    color: white;
+  }
+  .button--primary:hover {
+    background-color: var(--upei-dark-red);
+    border-color: var(--upei-dark-red);
+  }
+
+  /* Danger — destructive action. Outlined by default, fills on hover. */
+  .button--danger {
+    background-color: var(--surface-1);
+    border-color: var(--upei-red);
+    color: var(--upei-red);
+  }
+  .button--danger:hover {
+    background-color: var(--upei-red);
+    color: white;
+  }
+
+  /* Small variant. */
+  .button--small {
+    padding: var(--size-1) var(--size-2);
+    font-size: 0.875em;
+  }
+
+  /* Disabled. */
+  .button[disabled],
+  .button.is-disabled,
+  .image-button[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .button[disabled]:hover,
+  .button.is-disabled:hover,
+  .image-button[disabled]:hover {
+    background-color: var(--surface-1);
+    border-color: var(--text-2);
+  }
 
 }
diff --git a/css/components/dialog.css b/css/components/dialog.css
index eacef653..e9f34b66 100644
--- a/css/components/dialog.css
+++ b/css/components/dialog.css
@@ -63,7 +63,7 @@
   height: 24px;
   padding: 4px;
   opacity: 0.9;
-  border-radius: 7px;
+  border-radius: var(--radius-2);
   background-color: #232323;
   background-image: url(../../images/icons/loading-small.svg);
   background-repeat: no-repeat;
diff --git a/css/components/footer.css b/css/components/footer.css
new file mode 100644
index 00000000..45eb7797
--- /dev/null
+++ b/css/components/footer.css
@@ -0,0 +1,25 @@
+/**
+ * @file
+ * Site footer — visual styling.
+ *
+ * Padding lives in css/layout.css alongside <main>'s page padding
+ * (footer is a structural region, treated symmetrically with main).
+ * This file handles the skin: dark surface, light text and links.
+ */
+@layer components {
+
+  .footer {
+    background-color: var(--surface-dark);
+    color: var(--text-on-dark);
+
+    a {
+      color: var(--text-on-dark);
+    }
+    a:hover,
+    a.is-active {
+      color: var(--upei-yellow);
+      text-decoration: underline;
+    }
+  }
+
+}
diff --git a/css/components/form.css b/css/components/form.css
index a5405aed..d114c487 100644
--- a/css/components/form.css
+++ b/css/components/form.css
@@ -5,6 +5,48 @@
  * Visual styles for form components.
  */
 
+/* Text-like inputs, select, and textarea — shared baseline.
+   Uses Drupal's Form API class hooks, applied by core to every rendered
+   form element. The .form-textarea-wrapper rule in textarea.css makes
+   textareas full-width inside their wrapper; this file handles the skin. */
+.form-text,
+.form-email,
+.form-tel,
+.form-url,
+.form-password,
+.form-search,
+.form-number,
+.form-date,
+.form-time,
+.form-datetime,
+.form-month,
+.form-week,
+.form-select,
+.form-textarea {
+  padding: var(--size-2) var(--size-3);
+  border: 1px solid var(--border-1);
+  border-radius: var(--radius-2);
+  background-color: var(--surface-1);
+  color: var(--text-1);
+  font: inherit;
+  line-height: 1.4;
+  max-width: 100%;
+
+  &:hover {
+    border-color: var(--text-2);
+  }
+  &:focus {
+    outline: 2px solid var(--upei-red);
+    outline-offset: 2px;
+    border-color: var(--upei-red);
+  }
+}
+
+.form-textarea {
+  min-height: 8em;
+  resize: vertical;
+}
+
 form .field-multiple-table {
   margin: 0;
 }
diff --git a/css/components/pager.css b/css/components/pager.css
index ac493a89..b3e64570 100644
--- a/css/components/pager.css
+++ b/css/components/pager.css
@@ -1,20 +1,58 @@
-@layer components {
-
 /**
  * @file
- * Visual styles for pager.
+ * Visual styles for the pager.
+ *
+ * Markup hooks from templates/navigation/pager.html.twig:
+ *   .pager                 — outer <nav>
+ *   .pager__items          — <ul>
+ *   .pager__item           — each <li>
+ *   .pager__item--first    — "First" link
+ *   .pager__item--previous — "Previous" link
+ *   .pager__item--next     — "Next" link
+ *   .pager__item--last     — "Last" link
+ *   .pager__item--ellipsis — gap between non-adjacent page ranges
+ *   .is-active             — added to the current page <li>
  */
+@layer components {
 
-.pager__items {
-  clear: both;
-  text-align: center;
-}
-.pager__item {
-  display: inline;
-  padding: 0.5em;
-}
-.pager__item.is-active {
-  font-weight: bold;
-}
+  .pager {
+    margin-block: var(--size-4);
+  }
+  .pager__items {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--size-1);
+  }
+  .pager__item a {
+    display: inline-block;
+    min-width: 2.5em;
+    padding: var(--size-1) var(--size-2);
+    border: 1px solid var(--surface-2);
+    border-radius: var(--radius-2);
+    color: var(--text-1);
+    line-height: 1.4;
+    text-align: center;
+    text-decoration: none;
+  }
+  .pager__item a:hover,
+  .pager__item a:focus {
+    background-color: var(--surface-2);
+    border-color: var(--text-2);
+  }
+  .pager__item.is-active a {
+    background-color: var(--upei-red);
+    border-color: var(--upei-red);
+    color: white;
+    font-weight: bold;
+  }
+  .pager__item--ellipsis {
+    align-self: center;
+    padding: var(--size-1) var(--size-2);
+    color: var(--text-2);
+  }
 
 }
diff --git a/css/components/search.css b/css/components/search.css
index e1048195..a6c88975 100644
--- a/css/components/search.css
+++ b/css/components/search.css
@@ -1,16 +1,18 @@
 /**
  * @file
- * Search block — input + submit button styling.
+ * Search block — input styling.
+ *
+ * The submit button inherits from .button / .button--primary (Drupal applies
+ * those classes automatically); see css/components/button.css.
  *
  * Markup hooks come from templates/block/block--search-form-block.html.twig
- * (outer .block-search) and Drupal's Form API (.form-search on the input,
- * .form-submit on the button).
+ * (outer .block-search) and Drupal's Form API (.form-search on the input).
  */
 @layer components {
-
   .block-search .form-search {
     padding: var(--size-2) var(--size-3);
     border: 1px solid var(--surface-2);
+    border: 1px solid #ccc;
     border-radius: var(--radius-2);
     font: inherit;
   }
@@ -19,17 +21,37 @@
     outline-offset: 2px;
   }
 
-  .block-search .form-submit {
-    padding: var(--size-2) var(--size-3);
-    border: none;
-    border-radius: var(--radius-2);
-    background-color: var(--upei-red);
-    color: white;
-    font: inherit;
-    cursor: pointer;
+  /* Icon-on-input treatment: the .block-search__field wrapper (added in
+     templates/block/block--search-form-block.html.twig) provides the
+     positioning context for an absolute-positioned icon overlaid on
+     the left side of the search input.
+
+     The SVG is sized via `width` / `height` here rather than on the
+     <svg> root, which lets the same icon scale to any context just by
+     changing the .block-search__icon size. The `color` property
+     recolors the icon because the SVG uses stroke="currentColor". */
+  .block-search__field {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+  .block-search__icon {
+    position: absolute;
+    left: var(--size-3);
+    top: 50%;
+    width: 1em;
+    height: 1em;
+    transform: translateY(-50%);
+    color: var(--text-2);
+    pointer-events: none;
   }
-  .block-search .form-submit:hover {
-    background-color: var(--upei-dark-red);
+  .block-search__icon svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  .block-search .form-search {
+    padding-left: calc(var(--size-3) * 2 + 1em);
   }
 
 }
diff --git a/css/components/tabs.css b/css/components/tabs.css
index f3786c31..07a61559 100644
--- a/css/components/tabs.css
+++ b/css/components/tabs.css
@@ -30,6 +30,10 @@
     text-decoration: none;
     border-bottom: 2px solid transparent;
     margin-bottom: -1px;
+    transition:
+      background-color 0.15s var(--ease-out-2),
+      border-color 0.15s var(--ease-out-2),
+      color 0.15s var(--ease-out-2);
   }
   .tabs a:hover,
   .tabs a:focus {
diff --git a/css/tokens.css b/css/tokens.css
index b3928737..96a20c97 100644
--- a/css/tokens.css
+++ b/css/tokens.css
@@ -57,15 +57,39 @@
     --sidebar-width: 240px;
 
     /* Border radius */
-    --radius-2: 8px;
+    --radius-1: 4px;
+    --radius-2: 6px;
+    --radius-3: 8px;
 
     /* Surfaces (backgrounds) */
     --surface-1: #ffffff;
     --surface-2: #f5f5f5;
+    --surface-dark: #333;
 
     /* Text colors */
     --text-1: #111;
     --text-2: #555;
+    --text-on-dark: #fff;
+
+    /* Borders / dividers */
+    --border-1: #ccc;
+
+    /* Easing — cherry-picked from Open Props (props.easing.css). */
+    --ease-out-2: cubic-bezier(0, 0, .5, 1);
+
+    /* Typography scale — cherry-picked from Open Props (props.fontsize.css). */
+    --font-size-0: .75rem;
+    --font-size-1: 1rem;
+    --font-size-2: 1.1rem;
+    --font-size-3: 1.25rem;
+    --font-size-4: 1.5rem;
+    --font-size-5: 2rem;
+    --font-size-6: 2.5rem;
+    --font-size-7: 3rem;
+
+    /* Line heights — cherry-picked from Open Props (props.font-lineheight.css). */
+    --font-lineheight-1: 1.25;
+    --font-lineheight-3: 1.5;
 
     /* Brand */
     --upei-yellow: #fdc902;
diff --git a/druid.icons.yml b/druid.icons.yml
new file mode 100644
index 00000000..cdd8e12e
--- /dev/null
+++ b/druid.icons.yml
@@ -0,0 +1,64 @@
+# druid.icons.yml — declares an icon pack for the druid theme.
+#
+# ─────────────────────────────────────────────────────────────────────────
+# How to add a new icon
+# ─────────────────────────────────────────────────────────────────────────
+#
+#   1. Drop the SVG into <theme>/icons/<name>.svg.
+#      Tips:
+#        - Use currentColor for stroke / fill so CSS can recolor it via
+#          the `color` property on the parent element.
+#        - Strip width / height from the <svg> root (keep viewBox); let
+#          CSS size the icon.
+#        - Source: lucide.dev is the easiest free, currentColor-ready set.
+#          phosphoricons.com and tablericons.com also work.
+#
+#   2. Reference it in any Twig template:
+#
+#        {{ icon('druid', 'name') }}
+#
+#      where 'name' matches the filename (without .svg). Example:
+#      icons/arrow-right.svg → {{ icon('druid', 'arrow-right') }}.
+#
+#   3. Clear cache:
+#
+#        drush cr
+#
+#      This is required after ADDING a new file (Drupal's icon discovery
+#      caches the file list). Editing an SVG file's contents does NOT
+#      require a cache clear during development.
+#
+# ─────────────────────────────────────────────────────────────────────────
+# Prerequisites
+# ─────────────────────────────────────────────────────────────────────────
+#
+# The Icon API ships with Drupal core. On Drupal 11.0 it lived in the
+# `experimental_icon` module and needed enabling. On 11.1+ it's stable
+# and on by default. If `{{ icon('druid', '…') }}` errors with
+# "Unknown function icon", enable the core Icon module at
+# /admin/modules.
+#
+# Schema reference:
+#   https://www.drupal.org/docs/develop/theming-drupal/using-the-icon-api
+#
+# ─────────────────────────────────────────────────────────────────────────
+# The pack
+# ─────────────────────────────────────────────────────────────────────────
+#
+# The top-level key ("druid") is the pack id — the first argument to
+# every icon() call. Don't rename it without grep-replacing every usage.
+
+druid:
+  label: 'Druid theme icons'
+  description: 'Theme-local SVG icon set. Add new icons by dropping SVGs into the theme''s icons/ directory.'
+  license:
+    name: 'ISC'
+    url: 'https://lucide.dev/license'
+  extractor: svg
+  # `template` is INLINE Twig source (not a file path). Wraps each icon's
+  # parsed inner SVG content in an outer <svg> that re-applies the
+  # original root attributes (viewBox, fill, stroke, …) via {{ attributes }}.
+  template: '<svg{{ attributes.addClass("icon").setAttribute("aria-hidden", "true") }}>{{ content|raw }}</svg>'
+  config:
+    sources:
+      - icons/{icon_id}.svg
diff --git a/druid.libraries.yml b/druid.libraries.yml
index 82181d77..b43df62a 100644
--- a/druid.libraries.yml
+++ b/druid.libraries.yml
@@ -86,6 +86,8 @@ components:
         weight: -10
       css/components/field.css:
         weight: -10
+      css/components/footer.css:
+        weight: -10
       css/components/form.css:
         weight: -10
       css/components/header.css:
diff --git a/icons/magnifying-glass.svg b/icons/magnifying-glass.svg
new file mode 100644
index 00000000..452bb3e9
--- /dev/null
+++ b/icons/magnifying-glass.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="11" cy="11" r="8"/>
+  <path d="m21 21-4.3-4.3"/>
+</svg>
diff --git a/templates/block/block--search-form-block.html.twig b/templates/block/block--search-form-block.html.twig
index d1cda724..40d8780c 100644
--- a/templates/block/block--search-form-block.html.twig
+++ b/templates/block/block--search-form-block.html.twig
@@ -27,6 +27,16 @@
  * @see search_preprocess_block()
  */
 #}
+{#
+  Icon usage example (Drupal 11 Icon API). The search input gets a
+  magnifying-glass icon overlaid on its left side.
+
+  Pattern for ANY icon in ANY Twig template:
+    {{ icon('druid', 'icon-name') }}
+
+  where 'icon-name' matches a file at <theme>/icons/<icon-name>.svg.
+  See druid.icons.yml (theme root) for the full reference.
+#}
 {%
   set classes = [
     'block',
@@ -41,6 +51,11 @@
   {% endif %}
   {{ title_suffix }}
   {% block content %}
-    {{ content }}
+    <div class="block-search__field">
+      <span class="block-search__icon" aria-hidden="true">
+        {{ icon('druid', 'magnifying-glass') }}
+      </span>
+      {{ content }}
+    </div>
   {% endblock %}
 </div>
diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig
index 0570ba7b..a596900c 100644
--- a/templates/layout/page.html.twig
+++ b/templates/layout/page.html.twig
@@ -109,7 +109,7 @@
   </main>
 
   {% if page.footer %}
-    <footer role="contentinfo">
+    <footer class="footer" role="contentinfo">
       <div class="content-rail">
         {{ page.footer }}
       </div>