diff --git a/packages/package.njk b/packages/package.njk
index 4425735f2..1199688d0 100644
--- a/packages/package.njk
+++ b/packages/package.njk
@@ -32,6 +32,36 @@ eleventyComputed:
 {{ pack.stars(pkg.stars) }}
 {{ pack.labels(pkg.platforms, pkg.labels) }}
 
+<h2>Links</h2>
+
+<ul class="button-group links">
+  {% if not "packagecontrol.io" in pkg.homepage | lower and pkg.details != pkg.homepage %}
+  <li>
+    <a class="button" href="{{ pkg.homepage }}">{{ pack.logo('home') }} <span>Website</span></a>
+  </li>
+  {% endif %}
+  {% if pkg.details %}
+  <li>
+    <a class="button" href="{{ pkg.details }}">{{ pack.logo('repo') }} <span>Repository</span></a>
+  </li>
+  {% endif %}
+  {% if pkg.readme %}
+  <li>
+    <a class="button" href="{{ pkg.readme_url | default(pkg.readme) }}">{{ pack.logo('file') }} <span>README</span></a>
+  </li>
+  {% endif %}
+  {% if pkg.issues %}
+    <li>
+    <a class="button" href="{{ pkg.issues }}">{{ pack.logo('bug') }} <span>Issues</span></a>
+  </li>
+  {% endif %}
+  {% if pkg.donate %}
+    <li>
+    <a class="button" href="{{ pkg.donate }}">{{ pack.logo('gift') }} <span>Donate</span></a>
+  </li>
+  {% endif %}
+</ul>
+
 {% if pkg.releases | length > 1 %}
   <h2>Versions</h2>
 {% else %}
@@ -72,36 +102,6 @@ eleventyComputed:
 </details>
 {% endif %}
 
-<h2>Links</h2>
-
-<ul class="button-group links">
-  {% if not "packagecontrol.io" in pkg.homepage | lower and pkg.details != pkg.homepage %}
-  <li>
-    <a class="button" href="{{ pkg.homepage }}">{{ pack.logo('home') }} <span>Website</span></a>
-  </li>
-  {% endif %}
-  {% if pkg.details %}
-  <li>
-    <a class="button" href="{{ pkg.details }}">{{ pack.logo('repo') }} <span>Repository</span></a>
-  </li>
-  {% endif %}
-  {% if pkg.readme %}
-  <li>
-    <a class="button" href="{{ pkg.readme_url | default(pkg.readme) }}">{{ pack.logo('file') }} <span>README</span></a>
-  </li>
-  {% endif %}
-  {% if pkg.issues %}
-    <li>
-    <a class="button" href="{{ pkg.issues }}">{{ pack.logo('bug') }} <span>Issues</span></a>
-  </li>
-  {% endif %}
-  {% if pkg.donate %}
-    <li>
-    <a class="button" href="{{ pkg.donate }}">{{ pack.logo('gift') }} <span>Donate</span></a>
-  </li>
-  {% endif %}
-</ul>
-
 {% if pkg.readme %}
 <section id="md" class="readme" data-readme-url="{{ pkg.readme }}"></section>
 <script src="{{ '/static/readme.js' | bust }}" type="module" async></script>
diff --git a/static/style/buttons.css b/static/style/buttons.css
index 9e6f8e01a..a06c004cc 100644
--- a/static/style/buttons.css
+++ b/static/style/buttons.css
@@ -27,26 +27,26 @@
   margin: 0;
   padding: .2em .66em;
   border-radius: 3px;
-  background: var(--background-darker);
-  color: var(--foreground-lighter);
+  background: var(--background-3);
+  color: var(--foreground-2);
   white-space: nowrap;
   line-height: 1.6;
   cursor: pointer;
   transition: color 0.2s ease-in-out, outline .2s ease-in-out;
 
   &:hover {
-    color: var(--label-highlight);
+    background: var(--background-4);
     text-decoration: none;
   }
 
   &:focus {
-    outline: 2px solid var(--primary-accent);
+    outline: 2px solid var(--orange-1);
   }
 }
 
 span.button {
   cursor: revert;
   &:hover {
-    color: var(--foreground-lighter);
+    background: var(--background-3);
   }
 }
diff --git a/static/style/colors.css b/static/style/colors.css
index f3cb277a5..60be58013 100644
--- a/static/style/colors.css
+++ b/static/style/colors.css
@@ -1,35 +1,49 @@
-/* inspired by monokai neue */
+/*
+  Based on color scheme in https://docs.sublimetext.io
+  but with slightly tweaked contrast progression,
+  and a more contrasty shade of orrange.
+*/
 
 :root {
-  --primary-accent: #fd971f;   /* orange */
-  --secondary-accent: #66d9ef; /* blue */
-  --tertiary-accent: #a6e22e;  /* green */
-
-  --primary-accent-darker: #4694A3;
-
-  --background: #fff;
-  --background-slightly-darker: #fcfcfc;
-  --background-darker: #f2f2f2;
-  --background-darkest: #cacaca;
-
-  --foreground: #586e75;
-  --foreground-darker: #38464b;
-  --foreground-lighter: #839496;
-  --foreground-bright: #c1cfd4;
-
-  --label-highlight: #38464b;
+  /* light */
+  --background-1: rgb(255, 255, 255); /* white */
+  --background-2: rgb(242, 242, 242); /* ..    */
+  --background-3: rgb(230, 230, 230); /* ..    */
+  --background-4: rgb(222, 222, 222); /* grey  */
+
+  --highlight: rgba(222, 222, 222, 0.3); /* inline code */
+
+  --foreground-1: rgb(60, 60, 67);    /* black */
+  --foreground-2: rgb(103, 103, 108); /* ..    */
+  --foreground-3: #8d8d94;            /* grey  */
+
+  --white: #fff;
+
+  --orange-1: #fd971f;
+  --orange-2: #f5901d;
+  --blue-1: #1ebbfc;
+  --blue-2: #1db2f2;
+  --green-1: #a0da2c;
+  --green-2: #97cf29;
 }
 
 :root[data-theme='dark'] {
-  --background: #2b303b;
-  --background-slightly-darker: #383e4d;
-  --background-darker: #3f5157;
-  --background-darkest: #586e75;
-
-  --foreground: #839496;
-  --foreground-darker: #f8f8f2;
-  --foreground-lighter: #9ec7d3;
-  --foreground-bright: #ffffff;
-
-  --label-highlight: #ffffff;
+  /* dark */
+  --background-1: rgb(34, 40, 48);
+  --background-2: #272e37;
+  --background-3: #424c57;
+  --background-4: #4f5964;
+
+  --highlight: rgba(101, 117, 133, 0.16); /* inline code */
+
+  --foreground-1: rgb(223, 223, 214);
+  --foreground-2: rgb(218, 218, 210);
+  --foreground-3: rgb(152, 152, 159);
+
+  --orange-1: #f5901d;
+  --orange-2: #fd971f;
+  --blue-1: #1db2f2;
+  --blue-2: #1ebbfc;
+  --green-1: #97cf29;
+  --green-2: #a0da2c;
 }
diff --git a/static/style/footer.css b/static/style/footer.css
index e882ff5a7..931ecc4bc 100644
--- a/static/style/footer.css
+++ b/static/style/footer.css
@@ -1,9 +1,10 @@
 footer {
   padding: 3.2rem 1rem;
   text-align: center;
+  color: var(--foreground-2);
 
   p {
-    color: var(--foreground-lighter);
+    color: var(--foreground-3);
   }
 
   nav {
diff --git a/static/style/grid.css b/static/style/grid.css
index a4bad6ff3..e5534c398 100644
--- a/static/style/grid.css
+++ b/static/style/grid.css
@@ -25,11 +25,13 @@
 }
 
 .card {
-  background: var(--background-slightly-darker);
-  border: 1px solid var(--background-darker);
+  background: var(--background-1);
+  color: var(--foreground-2);
+  border-radius: 6px;
   padding: 1rem;
   position: relative;
-  transition: border-color .3s ease-in-out;
+  outline: 2px solid transparent;
+  transition: outline .3s ease-in-out;
 
   .grid & {
     /* stretch cards vertically across the grid cells */
@@ -39,11 +41,12 @@
 
   &:has(h3 a:hover),
   &:has(h3 a:focus) {
-    border-color: var(--primary-accent);
-    transition: border-color .1s ease-in-out;
+    outline: 2px solid var(--orange-1);
+    transition: outline .2s ease-in-out;
   }
 
   h3 {
+    color: var(--foreground-1);
     padding-top: 0;
     padding-right: 2em;
     margin-top: 0;
@@ -59,10 +62,9 @@
 
   h3 a,
   a[href*="q=author"] {
-    color: var(--foreground);
+    color: var(--foreground-1);
     &:hover {
-      text-decoration: none;
-      color: var(--foreground-darker);
+      color: var(--orange-1);
     }
   }
 
@@ -75,6 +77,7 @@
     top: 26px;
     right: 1rem;
     font-size: calc(1rem / 1.33);
+    color: var(--foreground-3);
     svg {
       width: 12px;
       height: 12px;
@@ -91,4 +94,11 @@
   .list & .labels {
     justify-content: flex-start;
   }
+
+  .button:not(.platform) {
+    background: var(--background-2);
+    &:hover:not(:disabled) {
+      background: var(--background-3);
+    }
+  }
 }
diff --git a/static/style/header.css b/static/style/header.css
index 31895024a..90749b7c8 100644
--- a/static/style/header.css
+++ b/static/style/header.css
@@ -1,7 +1,7 @@
 header {
   margin-bottom: 22px;
   padding: 4px var(--side-padding);
-  color: var(--foreground-lighter);
+  color: var(--foreground-3);
 
   .inner {
     max-width: 92rem;
@@ -19,7 +19,7 @@ header {
   }
 
   h2 a {
-    color: var(--foreground);
+    color: var(--foreground-2);
   }
 
   nav {
diff --git a/static/style/pagination.css b/static/style/pagination.css
index 39d4f86ae..8680c4d98 100644
--- a/static/style/pagination.css
+++ b/static/style/pagination.css
@@ -1,7 +1,7 @@
 .pagination {
   text-align: center;
   margin: 3.2rem 0 1.6rem 0;
-  color: var(--foreground-lighter);
+  color: var(--foreground-2);
 }
 
 .pagination-controls {
@@ -11,17 +11,16 @@
 }
 
 .pagination-controls .button {
+  background: var(--background-3);
   &:hover:not(:disabled) {
-    background: var(--primary-accent);
-    color: var(--background);
-    border-color: var(--primary-accent);
+    background: var(--background-4);
   }
 
   /* disabled because it's the current page */
   &:disabled {
-    background: var(--primary-accent);
-    color: var(--background);
-    border-color: var(--primary-accent);
+    background: var(--orange-1);
+    color: var(--foreground-1);
+    border-color: var(--orange-1);
     cursor: revert;
   }
 }
diff --git a/static/style/search.css b/static/style/search.css
index 8a87bc745..5e7c5332a 100644
--- a/static/style/search.css
+++ b/static/style/search.css
@@ -1,7 +1,7 @@
 input {
-  background: var(--background);
-  color: var(--foreground);
-  border: 1px solid var(--background-darkest);
+  background: var(--background-1);
+  color: var(--foreground-1);
+  border: 1px solid var(--background-3);
   border-radius: 3px;
   padding: 8px;
   margin-bottom: 11px;
@@ -12,9 +12,9 @@ input {
 select {
   appearance: none;
   all: unset;
-  background: var(--background);
-  color: var(--foreground);
-  border: 1px solid var(--background-darkest);
+  background: var(--background-1);
+  color: var(--foreground-1);
+  border: 1px solid var(--background-3);
   border-radius: 3px;
   padding: 8px;
   font-size: 1rem;
@@ -26,13 +26,18 @@ select {
   display: flex;
   align-items: stretch;
   margin-bottom: 11px;
+  background: var(--background-1);
   border-radius: 3px;
-  border: 1px solid var(--background-darkest);
+  border: 1px solid var(--background-3);
   transition: border .2s ease-in-out, outline .2s ease-in-out;
 
   &:has(input:focus) {
-    border-color: var(--primary-accent);
-    outline: 1px solid var(--primary-accent);
+    border-color: var(--orange-1);
+    outline: 1px solid var(--orange-1);
+  }
+
+  label {
+    color: var(--foreground-3);
   }
 
   input {
@@ -55,7 +60,7 @@ select {
     margin: 6px;
 
     &:has(select:focus) {
-      outline: 2px solid var(--primary-accent);
+      outline: 2px solid var(--orange-1);
     }
 
     @media (max-width: 600px) {
diff --git a/static/style/theme-toggle.css b/static/style/theme-toggle.css
new file mode 100644
index 000000000..f8f32cb0f
--- /dev/null
+++ b/static/style/theme-toggle.css
@@ -0,0 +1,53 @@
+#theme-toggle {
+  appearance: none;
+  all: unset;
+  width: 52px;
+  height: 26px;
+  background: var(--background-1);
+  border: 2px solid var(--background-1);
+  border-radius: 1.6rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  margin: 0 auto;
+  position: relative;
+
+  .icon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100%;
+    background: var(--foreground-3);
+    color: var(--background-1);
+    padding: 1px;
+    margin: 0 2px;
+    transition: transform .2s ease-in-out;
+    will-change: transform;
+  }
+
+  span {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .dark {
+    display: none;
+  }
+
+  :root[data-theme='dark'] & {
+    .icon {
+      transform: translateX(26px);
+    }
+    .dark {
+      display: flex;
+    }
+    .light {
+      display: none;
+    }
+  }
+}
diff --git a/static/style/typography.css b/static/style/typography.css
index a68d523e6..078c48379 100644
--- a/static/style/typography.css
+++ b/static/style/typography.css
@@ -17,7 +17,7 @@
 
 code {
   font-family: "IBM Plex Mono", monospace;
-  font-size: 0.92em;
+  font-size: 0.94em;
 }
 
 html,
diff --git a/static/styles.css b/static/styles.css
index cbcd3a762..8c3cce06e 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -6,6 +6,7 @@
 @import url('style/grid.css');
 @import url('style/pagination.css');
 @import url('style/search.css');
+@import url('style/theme-toggle.css');
 
 html {
   height: 100%;
@@ -25,8 +26,8 @@ html {
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
+  background: var(--background-2);
+  color: var(--foreground-1);
   margin: 0;
   padding: 0;
 }
@@ -44,7 +45,7 @@ main {
 }
 
 a {
-  color: var(--primary-accent-darker);
+  color: var(--orange-2);
   text-decoration: none;
 
   &:hover {
@@ -60,18 +61,17 @@ svg {
   fill: currentColor;
 }
 
-section {
+.home section {
   padding-top: 14px;
 
   h2 {
-    color: var(--foreground-lighter);
+    color: var(--foreground-2);
   }
 }
 
 code {
-  background: var(--background-darker);
-  border: 1px solid var(--background-darkest);
-  padding: 0 4px;
+  background: var(--highlight);
+  padding: 1px 6px;
   border-radius: 3px;
   overflow-wrap: anywhere;
 }
@@ -79,9 +79,8 @@ code {
 pre {
   white-space: break-spaces;
   overflow-x: auto;
-  background: var(--background-darker);
+  background: var(--background-3);
   &:not(.fallback) {
-    border: 1px solid var(--background-darkest);
     padding: 1rem;
   }
   code {
@@ -96,7 +95,7 @@ pre {
 .clipboard-wrapper {
   position: relative;
   &.copied pre {
-    background: var(--background-darkest);
+    background: var(--background-4);
   }
   pre {
     transition: background .1s ease-out;
@@ -110,7 +109,10 @@ pre {
     margin: 0;
     padding: 0;
     background: transparent;
-    color: var(--primary-accent-darker);
+    &:hover {
+      background: transparent;
+      color: var(--orange-1);
+    }
   }
 }
 
@@ -124,7 +126,7 @@ pre {
 }
 
 .hot {
-  color: var(--primary-accent);
+  color: var(--orange-1);
   font-style: italic;
 }
 
@@ -146,7 +148,7 @@ pre {
   font-weight: bold;
 }
 .requirement {
-  color: var(--foreground-lighter);
+  color: var(--foreground-3);
 }
 
 dl {
@@ -155,7 +157,7 @@ dl {
   align-content: center;
   align-items: center;
   line-height: 1;
-  color: var(--foreground-lighter);
+  color: var(--foreground-2);
   > * {
     display: flex;
     margin: 0;
@@ -166,31 +168,37 @@ dl {
   a,
   span {
     &.platform {
-      background: var(--secondary-accent);
-      color: var(--background);
+      background: var(--blue-1);
+      color: var(--white);
+      &:hover {
+        background: var(--blue-2);
+      }
     }
     &.platform-windows,
     &.platform-windows-x32,
     &.platform-windows-x64 {
-      background: var(--primary-accent);
+      background: var(--orange-1);
+      &:hover {
+        background: var(--orange-2);
+      }
     }
     &.platform-linux,
     &.platform-linux-x32,
     &.platform-linux-x64,
     &.platform-linux-arm64 {
-      background: var(--tertiary-accent);
+      background: var(--green-1);
+      &:hover {
+        background: var(--green-2);
+      }
     }
   }
-  a.platform:hover {
-    color: var(--label-highlight);
-  }
 }
 
 .readme {
   margin-top: 3.2rem;
   padding: 1.6em;
-  border-top: 4px solid var(--background-darker);
-  background: var(--background-slightly-darker);
+  border-radius: 6px;
+  background: var(--background-1);
 
   &:empty {
     display: none;
@@ -202,64 +210,15 @@ dl {
   }
 
   code {
-    background: var(--background);
-    border-color: var(--background-darker);
+    background: var(--highlight);
   }
 
   pre {
-    background: var(--background);
-  }
-}
-
-#theme-toggle {
-  appearance: none;
-  all: unset;
-  width: 52px;
-  height: 26px;
-  background: var(--background-darker);
-  border: 2px solid var(--background-darker);
-  border-radius: 1.6rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  margin: 0 auto;
-  position: relative;
-
-  .icon {
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 100%;
-    background: var(--background);
-    padding: 1px;
-    margin: 0 2px;
-    transition: transform .2s ease-in-out;
-    will-change: transform;
+    border-radius: 6px;
+    background: var(--background-2);
   }
-
-  span {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .dark {
-    display: none;
-  }
-
-  :root[data-theme='dark'] & {
-    .icon {
-      transform: translateX(26px);
-    }
-    .dark {
-      display: flex;
-    }
-    .light {
-      display: none;
-    }
+  pre code {
+    background: var(--background-2);
   }
 }
+