diff --git a/preview/app/components/colours_list_component.rb b/preview/app/components/colours_list_component.rb
index 8e6078f00..af09aa330 100644
--- a/preview/app/components/colours_list_component.rb
+++ b/preview/app/components/colours_list_component.rb
@@ -35,9 +35,10 @@ def colours
           { bg: 'bg-gui-error', name: "Error", hex: '#fb0c0c' },
           { bg: 'bg-gui-default', name: "Default", hex: '#0073e6' },
           { bg: 'bg-gui-hover', name: "Hover", hex: '#0867c4' },
-          { bg: 'bg-gui-focus', name: "Focus", hex: '#80b9f2' },
+          { bg: 'bg-gui-focus', name: "Focus", hex: '#0073e6' },
+          { bg: 'bg-gui-focus-outline', name: "Focus Outline", hex: '#80b9f2' },
           { bg: 'bg-gui-active', name: "Active", hex: '#074095' },
-          { bg: 'bg-gui-viewed', name: "Viewed", hex: '#4887c2' },
+          { bg: 'bg-gui-visited', name: "Visited", hex: '#4887c2' },
           { bg: 'bg-gui-unavailable', name: "Unavailable", hex: '#a8a8a8' }
         ]
       }
diff --git a/preview/app/views/pages/index.html.erb b/preview/app/views/pages/index.html.erb
index f706f342a..d6de2f4fa 100644
--- a/preview/app/views/pages/index.html.erb
+++ b/preview/app/views/pages/index.html.erb
@@ -219,6 +219,10 @@
               <div class="p-16 mb-16 mr-16 border rounded bg-cool-black">
                 <p class="font-sans ui-text-p1 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, <a href="/123" class="ui-link">per inceptos himenaeos</a>.</p>
               </div>
+
+              <div class="p-16 mb-16 mr-16 border rounded bg-jazzy-pink">
+                <p class="font-sans ui-text-p1 text-charcoal-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, <a href="/123" class="ui-link-neutral">per inceptos himenaeos</a>.</p>
+              </div>
             </div>
           </div>
 
diff --git a/src/core/Code/component.css b/src/core/Code/component.css
index 953ac4507..b10607993 100644
--- a/src/core/Code/component.css
+++ b/src/core/Code/component.css
@@ -1,6 +1,4 @@
-@layer base {
-  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap");
-}
+@import "../fonts/source-code-pro.css";
 
 @layer components {
   .hljs {
diff --git a/src/core/fonts/source-code-pro.css b/src/core/fonts/source-code-pro.css
new file mode 100644
index 000000000..7c8bf7575
--- /dev/null
+++ b/src/core/fonts/source-code-pro.css
@@ -0,0 +1,3 @@
+@layer base {
+  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap");
+}
diff --git a/src/core/styles/properties.css b/src/core/styles/properties.css
index 6d55e1a6b..be82c1ebc 100644
--- a/src/core/styles/properties.css
+++ b/src/core/styles/properties.css
@@ -15,9 +15,10 @@
     --color-charcoal-grey: #292831;
     --color-gui-default: #0073e6;
     --color-gui-hover: #0867c4;
-    --color-gui-focus: #80b9f2;
+    --color-gui-focus: #0073e6;
+    --color-gui-focus-outline: #80b9f2;
     --color-gui-active: #074095;
-    --color-gui-viewed: #4887c2;
+    --color-gui-visited: #4887c2;
     --color-gui-unavailable: #a8a8a8;
     --color-gui-error: #fb0c0c;
     --color-gui-success: #11cb24;
@@ -155,7 +156,7 @@
     /* In components, when looking at implementing viewport margin and spacing between elements,
        the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
        alternatively, look for ui-grid-* helpers. */
-    --bp-xs: 375px; /* gutters 8px, side-margin 24px */
+    --bp-xs: 428px; /* gutters 8px, side-margin 24px */
     --bp-sm: 768px; /* gutters 16px, side-margin 32px */
     --bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
     --bp-lg: 1280px; /* gutters 24px, side-margin 64px */
diff --git a/src/core/styles/text.css b/src/core/styles/text.css
index 3a5dbd863..3625bd620 100644
--- a/src/core/styles/text.css
+++ b/src/core/styles/text.css
@@ -30,17 +30,17 @@
   }
 
   .ui-text-p1 {
-    @apply font-sans font-light text-cool-black;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-sans font-light text-cool-black;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-sans font-light text-cool-black;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p3;
   }
 
@@ -146,21 +146,17 @@
     @apply list-square;
   }
 
-  /* visited needs to come before :hover et all else it overrides them */
-  .ui-link:visited {
-    @apply text-gui-viewed;
-  }
-
   .ui-link {
-    @apply hover:text-active-orange active:text-red-orange;
-    text-decoration-color: var(--color-active-orange);
-    text-underline-offset: 4px; /* px used here as behaves weird with rem's */
-    text-decoration-line: underline;
-    text-decoration-thickness: 0.125rem;
+    @apply visited:text-gui-visited;
+    @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
+    @apply focus:text-gui-focus focus:outline-gui-focus;
+    @apply underline;
   }
 
-  .ui-link:focus {
-    @apply focus:text-white focus:bg-active-orange focus:outline-none;
-    text-decoration: none;
+  .ui-link-neutral {
+    @apply visited:text-dark-grey;
+    @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
+    @apply focus:text-gui-focus focus:outline-gui-focus-neutral;
+    @apply underline;
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 4e9dec97a..a005f2a12 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,7 +17,7 @@ module.exports = {
   theme: {
     screens: {
       // CSS custom properties can't be used in media queries
-      xs: "375px",
+      xs: "428px",
       sm: "768px",
       md: "1040px",
       lg: "1280px",
@@ -74,7 +74,7 @@ module.exports = {
       "gui-hover": "var(--color-gui-hover)",
       "gui-focus": "var(--color-gui-focus)",
       "gui-active": "var(--color-gui-active)",
-      "gui-viewed": "var(--color-gui-viewed)",
+      "gui-visited": "var(--color-gui-visited)",
       "gui-unavailable": "var(--color-gui-unavailable)",
       "gui-error": "var(--color-gui-error)",
       "gui-success": "var(--color-gui-success)",
@@ -181,7 +181,8 @@ module.exports = {
         filter: "filter",
       },
       outline: {
-        "gui-focus": "4px solid var(--color-gui-focus)",
+        "gui-focus": "1.5px solid var(--color-gui-focus-outline)",
+        "gui-focus-neutral": "2px solid var(--color-white)",
       },
       width: {
         "extend-8": "calc(100% + var(--spacing-8))",
@@ -208,7 +209,14 @@ module.exports = {
   variants: {
     extend: {
       borderColor: ["hover", "focus", "active", "group-focus", "disabled"],
-      textColor: ["hover", "focus", "active", "group-focus", "disabled"],
+      textColor: [
+        "hover",
+        "focus",
+        "active",
+        "group-focus",
+        "disabled",
+        "visited",
+      ],
       display: ["group-focus"],
       backgroundColor: ["hover", "focus", "active", "group-focus", "disabled"],
       backgroundImage: ["hover", "active", "focus"],