diff --git a/apps/website/screens/components/link/overview/images/link-anatomy.png b/apps/website/screens/components/link/overview/images/link-anatomy.png
index 05bfb822c..09a8e27af 100644
Binary files a/apps/website/screens/components/link/overview/images/link-anatomy.png and b/apps/website/screens/components/link/overview/images/link-anatomy.png differ
diff --git a/packages/lib/src/link/Link.tsx b/packages/lib/src/link/Link.tsx
index 5bb8a37b9..dbbdab956 100644
--- a/packages/lib/src/link/Link.tsx
+++ b/packages/lib/src/link/Link.tsx
@@ -30,11 +30,11 @@ const Link = styled.a<{
   font-weight: var(--typography-link-regular);
   text-decoration: none;
   color: ${({ disabled, inheritColor }) =>
-    inheritColor ? "inherit" : !disabled ? "var(--color-fg-secondary-strong)" : "var(--color-fg-neutral-medium)"};
+    inheritColor ? "inherit" : !disabled ? "var(--color-fg-primary-strong)" : "var(--color-fg-neutral-medium)"};
   ${({ disabled }) => (disabled ? "cursor: default;" : "cursor: pointer;")}
   ${({ disabled }) => (disabled ? "pointer-events: none;" : "")}  
   ${({ disabled, inheritColor }) =>
-    !inheritColor && !disabled && "&:visited { color: var(--color-fg-primary-strong); }"};
+    !inheritColor && !disabled && "&:visited { color: var(--color-fg-primary-strongest); }"};
   &:focus {
     outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
     ${({ disabled }) => disabled && "outline: none"}
@@ -52,7 +52,7 @@ const LinkContent = styled.span<{
   padding: var(--spacing-padding-xxxs);
 
   &:hover {
-    color: var(--color-fg-secondary-stronger);
+    color: var(--color-fg-primary-stronger);
     cursor: pointer;
   }
   &:active {