diff --git a/public/colors.css b/public/colors.css
index 1e33743d7..2c50f8dd0 100644
--- a/public/colors.css
+++ b/public/colors.css
@@ -1,12 +1,12 @@
 :root {
-  --color-background-default: #f5f5ff;
-  --color-background-float: #fafaff;
-  --color-background-dip: #f5f5ff;
+  --color-background-default: #ebebff;
+  --color-background-float: #f5f5ff;
+  --color-background-dip: #dbdbff;
   --color-foreground-contrast: #232563;
-  --color-foreground-dim: #6a6a81;
-  --color-foreground-emphasized: #8585ff;
+  --color-foreground-dim: #5c5c70;
+  --color-foreground-emphasized: #7070ff;
   --color-foreground-emphasized-hover: #7070ff;
-  --color-foreground-match-background: #f5f5ff;
+  --color-foreground-match-background: #ebebff;
   --color-foreground-white: #ffffff;
   --color-foreground-black: #000000;
   --color-foreground-primary: #ff55ff;
@@ -16,21 +16,21 @@
   --color-foreground-yellow: #b29401;
   --color-foreground-disabled: #9b9bb1;
   --color-border-hint: #dbdbff;
-  --color-border-default: #dbdbff;
+  --color-border-default: #ccceff;
   --color-border-focus: #7070ff;
-  --color-border-contrast: #24252d;
+  --color-border-contrast: #25262d;
   --color-border-error: #ce97af;
   --color-border-merged: #ffe5ff;
-  --color-border-match-background: #f5f5ff;
+  --color-border-match-background: #ebebff;
   --color-border-primary: #ff1aff;
   --color-border-primary-hover: #ff55ff;
   --color-border-selected: #dbdbff;
   --color-border-warning: #ffe609;
   --color-border-success: #97ceb0;
-  --color-fill-secondary: #7070ff;
-  --color-fill-secondary-hover: #8585ff;
-  --color-fill-ghost: #ebebff;
-  --color-fill-ghost-hover: #f5f5ff;
+  --color-fill-secondary: #5555ff;
+  --color-fill-secondary-hover: #7070ff;
+  --color-fill-ghost: #dbdbff;
+  --color-fill-ghost-hover: #ebebff;
   --color-fill-separator: #dbdbff;
   --color-fill-primary: #ff55ff;
   --color-fill-primary-hover: #ff70ff;
@@ -42,7 +42,7 @@
   --color-fill-yellow: #ffe609;
   --color-fill-yellow-iconic: #ffff55;
   --color-fill-gray: #9b9bb1;
-  --color-fill-secondary-shade: #5555ff;
+  --color-fill-secondary-shade: #4545ef;
   --color-fill-diff-red: #efdce4;
   --color-fill-diff-red-light: #f7eef2;
   --color-fill-success-counter: #97ceb0;
@@ -51,55 +51,55 @@
   --color-fill-success-shade: #408760;
   --color-fill-diff-green: #badeca;
   --color-fill-diff-green-light: #dcefe5;
-  --color-fill-float: #fafaff;
-  --color-fill-float-hover: #dbdbff;
+  --color-fill-float: #f5f5ff;
+  --color-fill-float-hover: #fafaff;
   --color-fill-merged: #ffeeff;
   --color-fill-selected: #ebebff;
   --color-fill-warning: #ffffe5;
-  --color-fill-counter: #fafaff;
-  --color-fill-counter-emphasized: #dbdbff;
+  --color-fill-counter: #dbdbff;
+  --color-fill-counter-emphasized: #ebebff;
   --color-fill-delegate: #ffe5ff;
   --color-fill-private: #fff5d6;
-  --color-fill-secondary-counter: #9497ff;
+  --color-fill-secondary-counter: #b2b5ff;
   --color-fill-primary-counter: #ff8fff;
-  --color-fill-ghost-shade: #dbdbff;
+  --color-fill-ghost-shade: #ccceff;
 }
 
 :root[data-theme="dark"] {
-  --color-background-default: #0a0d10;
-  --color-background-float: #14151a;
+  --color-background-default: #0a0e0f;
+  --color-background-float: #25262d;
   --color-background-dip: #000000;
   --color-foreground-contrast: #f9f9fb;
   --color-foreground-dim: #9b9bb1;
   --color-foreground-emphasized: #7070ff;
-  --color-foreground-emphasized-hover: #8585ff;
-  --color-foreground-match-background: #0a0d10;
+  --color-foreground-emphasized-hover: #b2b5ff;
+  --color-foreground-match-background: #0a0e0f;
   --color-foreground-white: #ffffff;
   --color-foreground-black: #000000;
   --color-foreground-primary: #ff55ff;
   --color-foreground-primary-hover: #ff8fff;
   --color-foreground-success: #4fa877;
-  --color-foreground-red: #aa5078;
+  --color-foreground-red: #be7495;
   --color-foreground-yellow: #e5c001;
-  --color-foreground-disabled: #6a6a81;
-  --color-border-hint: #24252d;
-  --color-border-default: #2e2f38;
+  --color-foreground-disabled: #5c5c70;
+  --color-border-hint: #2e2f38;
+  --color-border-default: #393a46;
   --color-border-focus: #7070ff;
   --color-border-contrast: #ebebff;
   --color-border-error: #6b2b42;
   --color-border-merged: #6b006b;
-  --color-border-match-background: #0a0d10;
+  --color-border-match-background: #0a0e0f;
   --color-border-primary: #ff1aff;
   --color-border-primary-hover: #ff55ff;
   --color-border-selected: #232563;
   --color-border-warning: #4c4000;
   --color-border-success: #2a5a40;
   --color-fill-secondary: #7070ff;
-  --color-fill-secondary-hover: #8585ff;
+  --color-fill-secondary-hover: #b2b5ff;
   --color-fill-secondary-shade: #5555ff;
-  --color-fill-ghost: #24252d;
-  --color-fill-ghost-hover: #2e2f38;
-  --color-fill-separator: #24252d;
+  --color-fill-ghost: #2e2f38;
+  --color-fill-ghost-hover: #393a46;
+  --color-fill-separator: #2e2f38;
   --color-fill-primary: #ff1aff;
   --color-fill-primary-hover: #ff4dff;
   --color-fill-primary-shade: #e500e5;
@@ -118,16 +118,16 @@
   --color-fill-success-shade: #408760;
   --color-fill-diff-green: #183425;
   --color-fill-diff-green-light: #142a1d;
-  --color-fill-float: #14151a;
-  --color-fill-float-hover: #1b1c22;
+  --color-fill-float: #25262d;
+  --color-fill-float-hover: #2e2f38;
   --color-fill-merged: #1a001a;
   --color-fill-selected: #16173d;
   --color-fill-warning: #191500;
   --color-fill-counter: #393a46;
-  --color-fill-counter-emphasized: #16173d;
+  --color-fill-counter-emphasized: #5c5c70;
   --color-fill-delegate: #3d003d;
   --color-fill-private: #4c4000;
-  --color-fill-secondary-counter: #9497ff;
+  --color-fill-secondary-counter: #ccceff;
   --color-fill-primary-counter: #ff8fff;
-  --color-fill-ghost-shade: #1b1c22;
+  --color-fill-ghost-shade: #25262d;
 }
diff --git a/public/index.css b/public/index.css
index 371c14514..d45683c19 100644
--- a/public/index.css
+++ b/public/index.css
@@ -67,7 +67,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--color-fill-ghost-hover);
+  background-color: var(--color-fill-counter);
   clip-path: var(--1px-corner-fill);
   height: 1.5rem;
   padding: 0 0.5rem;
diff --git a/src/components/CommentToggleInput.svelte b/src/components/CommentToggleInput.svelte
index 34c94e466..2c97ce742 100644
--- a/src/components/CommentToggleInput.svelte
+++ b/src/components/CommentToggleInput.svelte
@@ -47,6 +47,7 @@
     {disallowEmptyBody}
     {rid}
     {placeholder}
+    borderVariant="ghost"
     submitInProgress={state === "submit"}
     {focus}
     stylePadding="0.5rem 0.75rem"
@@ -69,7 +70,7 @@
   <Border
     hoverable
     styleCursor="text"
-    variant="float"
+    variant="ghost"
     styleHeight="2.5rem"
     styleWidth="100%"
     onclick={e => {
diff --git a/src/components/Diff.svelte b/src/components/Diff.svelte
index 9599a6b43..2fc542259 100644
--- a/src/components/Diff.svelte
+++ b/src/components/Diff.svelte
@@ -239,10 +239,10 @@
     cursor: default;
   }
   .addition {
-    background-color: var(--color-fill-diff-green-light);
+    background-color: var(--color-fill-diff-green);
   }
   .deletion {
-    background-color: var(--color-fill-diff-red-light);
+    background-color: var(--color-fill-diff-red);
   }
   .addition > .left,
   .addition > .right,
@@ -299,17 +299,17 @@
     align-self: flex-start;
   }
   .thread {
-    background-color: var(--color-fill-float-hover);
+    background-color: var(--color-background-default);
+    box-shadow: inset 0 0 0 2px var(--color-border-hint);
     padding: 0.5rem;
-    margin-bottom: 1rem;
   }
   .comment-form {
-    background-color: var(--color-fill-float-hover);
+    background-color: var(--color-background-default);
+    box-shadow: inset 0 0 0 2px var(--color-border-default);
     font-family: var(--font-family-sans-serif);
     display: flex;
     flex-direction: column;
     padding: 1rem;
-    margin-bottom: 1rem;
   }
   .comment-header {
     display: flex;
diff --git a/src/components/Discussion.svelte b/src/components/Discussion.svelte
index 760152e84..565a5e4ec 100644
--- a/src/components/Discussion.svelte
+++ b/src/components/Discussion.svelte
@@ -88,7 +88,7 @@
     width: 2px;
     height: 1rem;
     margin-left: 1.25rem;
-    background-color: var(--color-background-float);
+    background-color: var(--color-border-hint);
   }
 </style>
 
diff --git a/src/components/Id.svelte b/src/components/Id.svelte
index 32749505a..e90555c6f 100644
--- a/src/components/Id.svelte
+++ b/src/components/Id.svelte
@@ -65,8 +65,8 @@
     justify-content: center;
     z-index: 20;
     bottom: 1.5rem;
-    background: var(--color-fill-ghost);
-    color: var(--color-fill-gray);
+    background: var(--color-fill-counter);
+    color: var(--color-foreground-contrast);
     box-shadow: var(--elevation-low);
     font-family: var(--font-family-sans-serif);
     font-size: var(--font-size-small);
diff --git a/src/components/PatchesSecondColumn.svelte b/src/components/PatchesSecondColumn.svelte
index 56910aa91..2c0c80c17 100644
--- a/src/components/PatchesSecondColumn.svelte
+++ b/src/components/PatchesSecondColumn.svelte
@@ -54,7 +54,7 @@
     color: var(--color-fill-success);
   }
   .archived {
-    color: var(--color-fill-yellow-iconic);
+    color: var(--color-foreground-yellow);
   }
   .merged {
     color: var(--color-foreground-primary);
diff --git a/src/components/Reviews.svelte b/src/components/Reviews.svelte
index b30b59431..38c85e846 100644
--- a/src/components/Reviews.svelte
+++ b/src/components/Reviews.svelte
@@ -199,7 +199,7 @@
   </div>
 
   {#if revision.reviews && revision.reviews.length}
-    <div style:display={hideReviews ? "none" : "revert"} class="review-list">
+    <div style:display={hideReviews ? "none" : "flex"} class="review-list">
       {#each revision.reviews as review, idx}
         <ReviewTeaser
           {rid}
diff --git a/src/components/Thread.svelte b/src/components/Thread.svelte
index c2ea12998..4bfc436e8 100644
--- a/src/components/Thread.svelte
+++ b/src/components/Thread.svelte
@@ -166,11 +166,13 @@
   </div>
   {#if replies.length > 0 || (createReply && showReplyForm)}
     {#if inline}
-      <div style:background-color="var(--color-background-float)">
+      <div
+        style:background-color="var(--color-background-deafult)"
+        style:border="2px solid var(--color-border-hint)">
         {@render repliesSnippet()}
       </div>
     {:else}
-      <Border variant="float" styleOverflow="hidden" flatTop={!inline}>
+      <Border variant="ghost" styleOverflow="hidden" flatTop={!inline}>
         {@render repliesSnippet()}
       </Border>
     {/if}
diff --git a/src/views/repo/Patch.svelte b/src/views/repo/Patch.svelte
index 64e792eeb..fe04479b9 100644
--- a/src/views/repo/Patch.svelte
+++ b/src/views/repo/Patch.svelte
@@ -367,11 +367,16 @@
 
   {#snippet secondColumn()}
     <div
+      class="txt-medium global-flex"
+      style:font-weight="var(--font-weight-medium)"
       style:min-width="450px"
-      class="txt-regular txt-semibold global-flex"
       style:min-height="2.5rem"
       style:margin-bottom="1rem">
-      <div class="global-flex" style:gap="4px">
+      <div
+        class="global-flex"
+        style:font-weight="var(--font-weight-medium)"
+        style:gap="4px"
+        style:white-space="nowrap">
         {project.data.name}
         <Icon name="chevron-right" />
         <Link