Refactor header styles to align with GOV.UK design system

rjsteixeira · rjsteixeira · commit d8302fb51a58 · 2026-05-14T06:39:14.000+01:00
diff --git a/static/css/app.css b/static/css/app.css
@@ -106,69 +106,61 @@ main {
   font-size: 16px;
 }
 
-/* ---------- App header ---------- */
+/* ---------- GOV.UK header overrides ---------- */
 
-.app-header__brand {
+/* Standard border is 1px transparent; ours is the 10px white bar */
+.govuk-header {
+  border-bottom: 10px solid #fff;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+
+/* Standard container is block with 0 15px padding; we need flex + our padding */
+.govuk-header__container--full-width {
+  max-width: 1600px;
+  margin: 0 auto;
+  padding: 14px 24px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+/* Standard logo div stacks; we need it to flex the link + h1 side by side */
+.govuk-header__logo {
   display: flex;
   align-items: flex-end;
   gap: 16px;
+  padding: 0;
 }
 
-.app-header__logo {
-  color: #fff;
-  text-decoration: none;
-  flex-shrink: 0;
+/* Standard link is display:inline; we need flex + right-side divider */
+.govuk-header__homepage-link {
   display: flex;
   align-items: flex-end;
   padding-right: 16px;
   padding-bottom: 2px;
   border-right: 1px solid rgba(255, 255, 255, 0.4);
+  margin-bottom: 0;
 }
 
-.app-header__logo svg {
-  display: block;
+/* Reset the -3px offset from the standard logotype */
+.govuk-header__logotype {
+  top: 0;
   width: 150px;
   height: 28px;
-  flex-shrink: 0;
-}
-
-.app-header__logo:focus-visible {
-  outline: 3px solid var(--govuk-yellow);
-  outline-offset: 2px;
-}
-
-.govuk-logo-dot {
-  fill: #00ffe0;
-}
-
-.app-header {
-  background: var(--govuk-blue);
-  color: #fff;
-  border-bottom: 10px solid #fff;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-  font-family: "GDS Transport", arial, sans-serif;
-}
-
-.app-header__inner {
-  max-width: 1600px;
-  margin: 0 auto;
-  padding: 14px 24px;
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 24px;
-  flex-wrap: wrap;
 }
 
-.app-header h1 {
+/* No design-system equivalent for a separate h1 beside the logo */
+.govuk-header h1 {
   margin: 0;
   font-size: 24px;
   line-height: 1.1;
   font-weight: 700;
   letter-spacing: -0.01em;
 }
 
-.app-header .status {
+.govuk-header .status {
   margin: 4px 0 0;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.85);
diff --git a/templates/base.html b/templates/base.html
@@ -9,11 +9,11 @@
     {% block extra_head %}{% endblock %}
   </head>
   <body>
-    <header class="app-header">
-      <div class="app-header__inner">
-        <div class="app-header__brand">
-          <a href="{{ url_for('visualisations_page') }}" class="app-header__logo" aria-label="GOV.UK">
-            <svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324 60" height="28" width="150" fill="currentColor" aria-label="GOV.UK">
+    <header class="govuk-header">
+      <div class="govuk-header__container govuk-header__container--full-width">
+        <div class="govuk-header__logo">
+          <a href="{{ url_for('visualisations_page') }}" class="govuk-header__homepage-link" aria-label="GOV.UK">
+            <svg class="govuk-header__logotype" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324 60" height="28" width="150" fill="currentColor" aria-label="GOV.UK">
               <title>GOV.UK</title>
               <g>
                 <circle cx="20" cy="17.6" r="3.7" />
