diff --git a/astro.config.mjs b/astro.config.mjs
index 5b836a71..ee2b1232 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -57,7 +57,7 @@ export default defineConfig({
           delBackground: "color-mix(in oklab, var(--red) 25%, var(--mantle));",
           delBorderColor: "var(--surface0)",
         },
-        codePaddingInline: "var(--space-md)",
+        codePaddingInline: "2ch",
         uiFontSize: "1.5rem",
         codeFontSize: "1.4rem",
         codeBackground: "var(--mantle)",
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
new file mode 100644
index 00000000..772973f1
--- /dev/null
+++ b/src/components/Button.svelte
@@ -0,0 +1,148 @@
+<script lang="ts">
+
+  import type { Snippet } from "svelte";
+  import { phosphorIcon } from "@data/icons";
+  import Icon from "@iconify/svelte";
+
+
+  interface Props {
+    children: Snippet;
+    style?: 'mauve' | 'peach' | 'blue' | 'green' | 'transparent';
+    small?: boolean;
+    phIconName?: string;
+    disabled?: boolean;
+  }
+
+  let { children, style, small, phIconName, disabled }: Props = $props();
+
+
+  let phIcon = {
+    body: "",
+    width: 0,
+    height: 0
+  }
+
+  let phIconSize = 24;
+
+  if (phIconName != null) phIcon = phosphorIcon(phIconName);
+  if (small) phIconSize = 16;
+
+
+</script>
+
+
+
+<button {disabled}
+  class="
+    btn
+    {style == null ? 'btn-default' : ''}
+    {style == 'mauve' ? 'btn-mauve' : ''}
+    {style == 'peach' ? 'btn-peach' : ''}
+    {style == 'green' ? 'btn-green' : ''}
+    {style == 'blue' ? 'btn-blue' : ''}
+    {style == 'transparent' ? 'btn-transparent' : ''}
+    {phIconName != null ? 'btn-has-icon' : ''}
+    {small ? 'btn-small' : ''}
+  "
+>
+  {#if phIconName != null}
+    <Icon
+      width={phIconSize}
+      height={phIconSize}
+      icon={{
+        body: phIcon.body,
+        width: phIcon.width,
+        height: phIcon.height,
+      }}
+    />
+  {/if}
+  {@render children()}
+</button>
+
+
+
+<style lang="scss">
+
+@use "../styles/utils" as *;
+
+  :global(.btn-group) {
+    display: flex;
+    gap: space(sm);
+    flex-wrap: wrap;
+  }
+
+  .btn {
+    padding: space(sm) space(lg);
+
+    border-radius: 9999px;
+    border: none;
+    background-color: var(--surface0);
+
+    font-size: 1.6rem;
+    font-weight: 500;
+    color: var(--text);
+
+    transition: all 350ms ease-in-out;
+    cursor: pointer;
+
+    &-small {
+      padding: space(xs);
+      border-radius: var(--border-radius-normal);
+    }
+
+    &-transparent {
+      background-color: transparent;
+    }
+
+    &-transparent:hover,
+    &-transparent:focus {
+      background-color: color-mix(in srgb, transparent, var(--text) 10%);
+    }
+
+    &-has-icon {
+      display: flex;
+      align-items: center;
+      gap: space(sm);
+    }
+
+    &-peach,
+    &-mauve,
+    &-green,
+    &-blue {
+      background-size: 150% 100%;
+      background-position: top left;
+      font-weight: 600;
+      color: var(--inverted-text);
+
+      &:hover,
+      &:focus {
+        background-position: top right;
+      }
+    }
+
+    &-peach {
+      background-color: var(--peach);
+      background-image: linear-gradient(120deg, var(--peach), var(--red));
+    }
+
+    &-mauve {
+      background-color: var(--mauve);
+      background-image: linear-gradient(120deg, var(--pink), var(--mauve));
+    }
+
+    &-green {
+      background-color: var(--green);
+      background-image: linear-gradient(120deg, var(--teal), var(--green));
+    }
+
+    &-blue {
+      background-color: var(--blue);
+      background-image: linear-gradient(120deg, var(--blue), var(--sky));
+    }
+  }
+
+  .btn {
+    transition: background-position 350ms ease-in-out;
+  }
+
+</style>
diff --git a/src/components/PageIntro.astro b/src/components/PageIntro.astro
index 56b29c65..1264096a 100644
--- a/src/components/PageIntro.astro
+++ b/src/components/PageIntro.astro
@@ -13,8 +13,10 @@ const { title } = Astro.props;
 </section>
 
 <style lang="scss">
+  @use "@styles/utils" as *;
+
   .page-intro {
-    margin-block-end: var(--space-lg);
+    margin-block-end: space(xl);
   }
 
   .page-intro h1 {
diff --git a/src/components/Pills.svelte b/src/components/Pills.svelte
index 451752e4..111b350e 100644
--- a/src/components/Pills.svelte
+++ b/src/components/Pills.svelte
@@ -9,10 +9,10 @@
 </ul>
 
 <style lang="scss">
-  @use "../styles/utils";
+  @use "../styles/utils" as *;
 
   .pill-list {
-    @include utils.flex($gap: var(--space-xs));
+    @include flexbox($gap: space(xs));
 
     margin: 0;
     padding: 0;
@@ -22,7 +22,7 @@
   }
 
   .pill {
-    @include utils.containerPadding(xxs-y);
+    padding: space(xs) space(sm);
 
     border-radius: 9999px;
     background-color: color-mix(in srgb, var(--base), var(--subtext0) 20%);
diff --git a/src/data/icons.ts b/src/data/icons.ts
index cb86083e..f62178d7 100644
--- a/src/data/icons.ts
+++ b/src/data/icons.ts
@@ -10,7 +10,7 @@ const phIcons = phIconsJson as IconifyJSONIconsData;
 
 const DEFAULT_VIEWBOX = 16;
 
-const phosphorIcon = (name: string) => {
+export const phosphorIcon = (name: string) => {
   const icon = phIcons.icons[name];
   return {
     body: icon.body,
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index a70a0982..d5fff94b 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -22,28 +22,21 @@ const { title, description, ogImage, accent, enableViewTransition } = Astro.prop
 <Skeleton>
   <Head slot="seo" {title} {description} {ogImage} {accent} {enableViewTransition} />
 
-  <section class="header-container">
-    <div class="content-wrapper no-padding">
-      <Navigation />
-    </div>
-  </section>
+  <Navigation />
 
-  <div class="content-wrapper main-container">
-    <slot />
-  </div>
+  <slot />
 
-  <section class="footer-container">
-    <div class="content-wrapper no-padding">
-      <Footer />
-    </div>
+  <section class="full-width footer-container">
+    <Footer />
     <AccentBar />
   </section>
 </Skeleton>
 
 <style lang="scss">
-  .main-container {
-    container-type: inline-size;
-    margin-block-end: var(--space-xl);
-    min-height: 100vh;
+  @use "@styles/utils" as *;
+
+  .footer-container {
+    margin-block-start: space(xl);
+    background-color: var(--mantle);
   }
 </style>
diff --git a/src/layouts/Landing.astro b/src/layouts/Landing.astro
index d611adb5..5b22b8b5 100644
--- a/src/layouts/Landing.astro
+++ b/src/layouts/Landing.astro
@@ -22,7 +22,7 @@ const { title, description, ogImage, accent } = Astro.props;
 
 <Skeleton>
   <Head slot="seo" title={title} description={description} ogImage={ogImage} accent={accent} />
-  <div id="hero">
+  <div id="hero full-width">
     <div class="content-wrapper no-padding hero-grid">
       <div class="hero-content-wrapper">
         <div class="hero-logo">
@@ -38,8 +38,8 @@ const { title, description, ogImage, accent } = Astro.props;
     </div>
   </div>
 
-  <section class="footer-container">
-    <div class="content-wrapper no-padding">
+  <section class="full-width footer-container">
+    <div class="content-wrapper">
       <Footer />
     </div>
     <AccentBar />
@@ -47,7 +47,21 @@ const { title, description, ogImage, accent } = Astro.props;
 </Skeleton>
 
 <style lang="scss" is:global>
-  @use "@styles/utils";
+  @use "@styles/utils" as *;
+
+  .content-wrapper {
+    container-type: inline-size;
+    container-name: content-wrapper;
+    width: 100%;
+    max-width: calc(2 * var(--padding-body) + var(--website-max-width));
+    margin-inline: auto;
+    padding: space(md) var(--padding-body);
+  }
+
+  .footer-container {
+    margin-block-start: space(xl);
+    background-color: var(--mantle);
+  }
 
   #hero {
     background-color: color-mix(in srgb, var(--base), var(--mauve) 10%);
@@ -68,7 +82,7 @@ const { title, description, ogImage, accent } = Astro.props;
   }
 
   .hero-logo {
-    @include utils.flex($gap: var(--space-sm));
+    @include flexbox($gap: space(md));
     align-items: center;
 
     svg + svg {
@@ -89,7 +103,7 @@ const { title, description, ogImage, accent } = Astro.props;
   }
 
   .hero-grid {
-    @include utils.flex($direction: column, $gap: var(--space-lg));
+    @include flexbox($direction: column, $gap: space(lg));
     justify-content: space-between;
     flex-wrap: nowrap;
 
@@ -106,14 +120,14 @@ const { title, description, ogImage, accent } = Astro.props;
   .hero-content-wrapper {
     display: grid;
     grid-template-rows: max-content auto;
-    gap: var(--space-xl);
+    gap: space(xl);
     container-type: inline-size;
 
     padding-block: var(--padding-body);
   }
 
   .hero-content {
-    @include utils.flex($direction: column, $gap: var(--space-md));
+    @include flexbox($direction: column, $gap: space(lg));
     justify-content: center;
     align-items: flex-start;
 
@@ -143,7 +157,7 @@ const { title, description, ogImage, accent } = Astro.props;
     max-height: 40vh;
 
     svg {
-      padding: var(--space-md);
+      padding: space(md);
     }
 
     @media (min-width: 800px) {
@@ -151,11 +165,11 @@ const { title, description, ogImage, accent } = Astro.props;
 
       svg {
         @container (min-width: 400px) {
-          padding-inline-start: var(--space-lg);
+          padding-inline-start: space(lg);
         }
 
         @container (min-width: 500px) {
-          padding-inline-start: var(--space-xl);
+          padding-inline-start: space(xl);
         }
       }
     }
diff --git a/src/layouts/Skeleton.astro b/src/layouts/Skeleton.astro
index 6c12e82e..57fb9d04 100644
--- a/src/layouts/Skeleton.astro
+++ b/src/layouts/Skeleton.astro
@@ -14,7 +14,87 @@ import "@styles/global.scss";
     <link rel="alternate" type="application/rss+xml" title="Catppuccin Blog" href={new URL("rss.xml", Astro.site)} />
     <slot name="seo" />
   </head>
-  <body>
+  <body class="content-grid">
     <slot />
   </body>
 </html>
+
+<style lang="scss" is:global>
+  @use "@styles/utils" as *;
+
+  :root {
+    --padding-body: clamp(20px, 5vw, 500px);
+
+    --border-radius-normal: #{border-radius(sm)};
+    --border-radius-large: #{border-radius(lg)};
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    font-size: 62.5%;
+    scroll-behavior: smooth;
+    interpolate-size: allow-keywords;
+  }
+
+  @media (prefers-reduced-motion) {
+    *,
+    *::before,
+    *::after {
+      transition: none !important;
+    }
+
+    html {
+      scroll-behavior: auto;
+    }
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    background-color: var(--base);
+  }
+
+  .content-grid,
+  .full-width {
+    --_padding-inline: 2rem;
+    --_content-max-width: 1200px;
+    --_breakout-max-width: 1400px;
+    --_breakout-size: calc((var(--_breakout-max-width) - var(--_content-max-width)) / 2);
+
+    @include grid($gap: 0) {
+      grid-template-columns:
+        [full-width-start]
+        minmax(var(--_padding-inline), 1fr)
+        [breakout-start]
+        minmax(0, var(--_breakout-size))
+        [content-start]
+        min(100% - (var(--_padding-inline) * 2), var(--_content-max-width))
+        [content-end]
+        minmax(0, var(--_breakout-size))
+        [breakout-end]
+        minmax(var(--_padding-inline), 1fr)
+        [full-width-end];
+      grid-template-rows: auto 1fr auto;
+    }
+
+    > :not(.breakout, .full-width),
+    > .full-width:not(.breakout, .full-width) {
+      grid-column: content;
+    }
+
+    > .breakout {
+      grid-column: breakout;
+    }
+
+    > .content-grid,
+    > .full-width {
+      grid-column: full-width;
+    }
+  }
+</style>
diff --git a/src/layouts/components/AccentBar.astro b/src/layouts/components/AccentBar.astro
index 9fdb3a85..ec3ccb34 100644
--- a/src/layouts/components/AccentBar.astro
+++ b/src/layouts/components/AccentBar.astro
@@ -1,54 +1,60 @@
-<div class="accent-bar"></div>
+<div class="accent-bar full-width"></div>
 
 <style lang="scss">
+  @use "sass:map";
+  @use "sass:math";
+
   @keyframes gradient {
+    0%,
     100% {
-      background-position: right;
+      background-color: var(--rosewater);
+    }
+    #{ math.div(100, 14) * 1% } {
+      background-color: var(--flamingo);
+    }
+    #{ math.div(100, 14) * 2% } {
+      background-color: var(--pink);
+    }
+    #{ math.div(100, 14) * 3% } {
+      background-color: var(--mauve);
+    }
+    #{ math.div(100, 14) * 4% } {
+      background-color: var(--red);
+    }
+    #{ math.div(100, 14) * 5% } {
+      background-color: var(--maroon);
+    }
+    #{ math.div(100, 14) * 6% } {
+      background-color: var(--peach);
+    }
+    #{ math.div(100, 14) * 7% } {
+      background-color: var(--yellow);
+    }
+    #{ math.div(100, 14) * 8% } {
+      background-color: var(--green);
+    }
+    #{ math.div(100, 14) * 9% } {
+      background-color: var(--teal);
+    }
+    #{ math.div(100, 14) * 10% } {
+      background-color: var(--sky);
+    }
+    #{ math.div(100, 14) * 11% } {
+      background-color: var(--sapphire);
+    }
+    #{ math.div(100, 14) * 12% } {
+      background-color: var(--blue);
+    }
+    #{ math.div(100, 14) * 13% } {
+      background-color: var(--lavender);
     }
   }
 
   .accent-bar {
-    display: grid;
-    grid-template-columns: repeat(14, 1fr);
-
     width: 100%;
     height: 8px;
 
     background-color: var(--mauve);
-    background-image: linear-gradient(
-      90deg,
-      var(--rosewater),
-      var(--flamingo),
-      var(--pink),
-      var(--mauve),
-      var(--red),
-      var(--maroon),
-      var(--peach),
-      var(--yellow),
-      var(--green),
-      var(--teal),
-      var(--sky),
-      var(--sapphire),
-      var(--blue),
-      var(--lavender),
-      var(--rosewater),
-      var(--flamingo),
-      var(--pink),
-      var(--mauve),
-      var(--red),
-      var(--maroon),
-      var(--peach),
-      var(--yellow),
-      var(--green),
-      var(--teal),
-      var(--sky),
-      var(--sapphire),
-      var(--blue),
-      var(--lavender),
-      var(--rosewater)
-    );
-    background-size: 400% 100%;
-    background-position: left;
 
     animation: gradient 20s linear infinite forwards;
 
diff --git a/src/layouts/components/Footer.astro b/src/layouts/components/Footer.astro
index f8b546cf..d8bd88bd 100644
--- a/src/layouts/components/Footer.astro
+++ b/src/layouts/components/Footer.astro
@@ -50,18 +50,19 @@ import { footerLinks } from "@data/links";
   </div>
 
   <style lang="scss">
-    @use "@styles/utils";
+    @use "@styles/utils" as *;
 
     footer {
-      @include utils.flex($gap: var(--space-md));
+      @include flexbox($gap: space(md));
       justify-content: space-between;
+      padding-block: space(lg);
 
       font-size: 1.6rem;
       color: var(--subtext0);
     }
 
     nav ul {
-      margin: 0 0 var(--space-xs) 0;
+      margin: 0 0 space(xs) 0;
       padding: 0;
       list-style: none;
     }
@@ -98,7 +99,7 @@ import { footerLinks } from "@data/links";
     }
 
     #vercel {
-      margin-block-start: var(--space-xs);
+      margin-block-start: space(xs);
     }
   </style>
 </footer>
diff --git a/src/layouts/components/Navigation.astro b/src/layouts/components/Navigation.astro
index 9165116d..4be40416 100644
--- a/src/layouts/components/Navigation.astro
+++ b/src/layouts/components/Navigation.astro
@@ -25,8 +25,11 @@ import { navigationLinks } from "@data/links";
 </header>
 
 <style lang="scss">
+  @use "@styles/utils" as *;
+
   header {
-    --spacing-nav: var(--space-sm);
+    --spacing-nav: #{space(md)};
+    margin-block: space(lg);
   }
 
   #main-navigation {
diff --git a/src/pages/blog/[id].astro b/src/pages/blog/[id].astro
index a7fdd60a..5f3b7e63 100644
--- a/src/pages/blog/[id].astro
+++ b/src/pages/blog/[id].astro
@@ -47,7 +47,7 @@ const authorSep = (index: number) => {
   description={post.data.summary}
   ogImage={post.data.hero.image.src}
   enableViewTransition>
-  <figure class="blog-hero-image" transition:name=`${post.data.title}${post.data.featured}`>
+  <figure class="breakout blog-hero-image" transition:name=`${post.data.title}${post.data.featured}`>
     <Picture
       src={post.data.hero.image}
       alt={post.data.hero.alt}
@@ -56,10 +56,10 @@ const authorSep = (index: number) => {
       sizes={`(max-width: 720px) 800px, (max-width: 1080px) 1600px, ${post.data.hero.image.width}px`}
     />
   </figure>
-  <article class="blog-container" role="main" style=`--accent-color: var(--${post.data.accentColor});`>
+  <article class="content-grid" role="main" style=`--accent-color: var(--${post.data.accentColor});`>
     <PageIntro title={post.data.title}>
       <p class="article-summary">{post.data.summary}</p>
-      <footer class="article-meta">
+      <footer class="article-meta breakout">
         <div class="article-author-profiles">
           {post.data.authors.map((author) => <ProfilePicture username={author.github} size={64} wxh={56} />)}
         </div>
@@ -79,9 +79,7 @@ const authorSep = (index: number) => {
         </div>
       </footer>
     </PageIntro>
-    <div class="article-content">
-      <Content />
-    </div>
+    <Content />
     <footer class="article-credit">
       <p>
         Hero image by <a href={post.data.hero.source}>{post.data.hero.author}</a> modified with <a
@@ -98,7 +96,7 @@ const authorSep = (index: number) => {
 </Default>
 
 <style lang="scss">
-  @use "@styles/utils";
+  @use "@styles/utils" as *;
 
   :root {
     --accent-color: var(--yellow);
@@ -120,19 +118,45 @@ const authorSep = (index: number) => {
     }
   }
 
-  .blog-container {
-    max-width: 69ch;
-    margin-inline: auto;
+  article {
+    --_content-max-width: 69ch;
+    --_breakout-max-width: 79ch;
+
+    :global(h2),
+    :global(h3),
+    :global(h4),
+    :global(h5),
+    :global(h6) {
+      margin-block: 1.5em 0.5em;
+      // remove extra padding below headlines before the first paragraph
+      padding-block: space(xs) 0;
+    }
+
+    // all paragraphs inside blog articles
+    :global(p) {
+      margin-block-end: 1em;
+    }
+
+    // add extra margin to code blocks
+    :global(.expressive-code) {
+      margin-block: 2em;
+      grid-column: breakout;
+    }
+
+    :global(blockquote) {
+      // !important is required due to selector specificity
+      grid-column: breakout !important;
+    }
   }
 
   .article-summary {
-    margin-block: calc(var(--space-md) * -1 + 6px) var(--space-md);
+    margin-block: calc(#{space(md)} * -1 + 6px) space(md);
     color: var(--overlay1);
   }
 
   .article-meta {
     display: flex;
-    gap: 0 calc(var(--space-sm) + 2px);
+    gap: 0 calc(#{space(sm)} + 2px);
     align-items: center;
 
     color: var(--overlay1);
@@ -153,31 +177,9 @@ const authorSep = (index: number) => {
     }
   }
 
-  .article-content {
-    :global(h2),
-    :global(h3),
-    :global(h4),
-    :global(h5),
-    :global(h6) {
-      margin-block: 1.5em 0.5em;
-      // remove extra padding below headlines before the first paragraph
-      padding-block: var(--space-xs) 0;
-    }
-
-    // all paragraphs inside blog articles
-    :global(p) {
-      margin-block: 1em;
-    }
-
-    // add extra margin to code blocks
-    :global(.expressive-code) {
-      margin-block: 2em;
-    }
-  }
-
   .article-credit {
-    margin-block-start: var(--space-lg);
-    padding-block-start: var(--space-md);
+    margin-block-start: space(lg);
+    padding-block-start: space(md);
     border-top: 1px solid var(--surface0);
     color: var(--subtext0);
     font-size: 80%;
diff --git a/src/pages/blog/_components/ArticleCard.astro b/src/pages/blog/_components/ArticleCard.astro
index c016ba2e..f0390c6a 100644
--- a/src/pages/blog/_components/ArticleCard.astro
+++ b/src/pages/blog/_components/ArticleCard.astro
@@ -63,7 +63,7 @@ const formattedDatePosted = new Date(post.data.datePosted).toLocaleDateString("e
 </a>
 
 <style lang="scss">
-  @use "@styles/utils";
+  @use "@styles/utils" as *;
 
   a {
     &:hover,
@@ -128,8 +128,8 @@ const formattedDatePosted = new Date(post.data.datePosted).toLocaleDateString("e
     }
 
     .post-content {
-      @include utils.flex($direction: column, $gap: var(--space-sm));
-      @include utils.containerPadding(sm);
+      @include flexbox($direction: column, $gap: space(sm));
+      padding: space(sm);
       height: 100%;
     }
 
@@ -138,7 +138,7 @@ const formattedDatePosted = new Date(post.data.datePosted).toLocaleDateString("e
     }
 
     .article-meta {
-      @include utils.flex($direction: row, $gap: var(--space-xs) var(--space-sm));
+      @include flexbox($direction: row, $gap: space(sm) space(md));
       font-size: 80%;
     }
 
@@ -151,12 +151,12 @@ const formattedDatePosted = new Date(post.data.datePosted).toLocaleDateString("e
     }
 
     .article-meta {
-      margin-block-start: var(--space-sm);
+      margin-block-start: space(md);
       color: var(--overlay1);
     }
 
     .has-icon {
-      @include utils.flex($direction: row, $gap: var(--space-xs));
+      @include flexbox($direction: row, $gap: space(sm));
       margin: 0;
       padding: 0;
     }
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 234802a8..d8b23295 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -18,27 +18,34 @@ if (!featuredPost) {
 ---
 
 <Default {title} {description} enableViewTransition>
-  <PageIntro title="Blog">
-    <p>{description}</p>
-  </PageIntro>
-
-  <section class="featured-blog">
-    <ArticleCard post={featuredPost} />
-  </section>
-
-  <!-- Hardcode for now, generalise when we have more blog content -->
-  <section class="bloglist">
-    {blogPosts.filter((post) => post.data.category === "Announcement").map((post) => <ArticleCard {post} />)}
-  </section>
+  <main>
+    <PageIntro title="Blog">
+      <p>{description}</p>
+    </PageIntro>
+
+    <section class="featured-blog">
+      <ArticleCard post={featuredPost} />
+    </section>
+
+    <!-- Hardcode for now, generalise when we have more blog content -->
+    <section class="bloglist">
+      {blogPosts.filter((post) => post.data.category === "Announcement").map((post) => <ArticleCard {post} />)}
+    </section>
+  </main>
 </Default>
 
 <style lang="scss">
-  @use "@styles/utils";
+  @use "@styles/utils" as *;
+
+  main {
+    container-type: inline-size;
+  }
 
   .bloglist {
-    display: grid;
-    grid-template-rows: auto;
-    gap: var(--space-md);
+    @include grid($gap: space(md)) {
+      grid-template-rows: auto;
+    }
+    margin-block-start: space(xl);
 
     @container (min-width: 800px) {
       grid-template-columns: repeat(2, 1fr);
diff --git a/src/pages/community/_components/UserCard.astro b/src/pages/community/_components/UserCard.astro
index 0293eb6d..c81e58de 100644
--- a/src/pages/community/_components/UserCard.astro
+++ b/src/pages/community/_components/UserCard.astro
@@ -25,10 +25,10 @@ const isPlaceholder = (maintainersWithoutAvatars as string[]).includes(username)
 </div>
 
 <style lang="scss">
-  @use "@styles/utils";
+  @use "@styles/utils" as *;
 
   .card-user {
-    @include utils.containerPadding(md);
+    padding: space(md);
     border-radius: var(--border-radius-large);
     background-color: var(--mantle);
     text-align: center;
diff --git a/src/pages/community/index.astro b/src/pages/community/index.astro
index ba398332..29519bb4 100644
--- a/src/pages/community/index.astro
+++ b/src/pages/community/index.astro
@@ -13,72 +13,78 @@ import UserCard from "./_components/UserCard.astro";
 <Default
   title="Community • Catppuccin"
   description="View the Catppuccin community! Learn about our teams, their roles, and how every contributor, including you, is at the heart of the project.">
-  <PageIntro title="Community">
-    <p>
-      Catppuccin is not governed or controlled by one person, 4 main teams are responsible for different parts of the
-      project.
-    </p>
-    <p>
-      <strong>And of course you!</strong> Whether you maintain your own port; have contributed via a pull request; or raised
-      an issue. The community is at the heart and soul of Catppuccin.
-    </p>
-  </PageIntro>
-  <section>
-    <h2>Teams</h2>
-    {
-      leadership.map((team) => {
-        return (
-          <>
-            <h3>
-              <TeamName team={team.identifier} color={team.color}>
-                {team.name}
-              </TeamName>
-            </h3>
-            <p>
-              <strong>
-                {team.identifier === "userstyles-staff" ? (
-                  <>
-                    Overseers of all <a href="https://github.com/catppuccin/userstyles">catppuccin/userstyles</a>.
-                  </>
-                ) : (
-                  team.description
-                )}
-              </strong>
-            </p>
-            <p>{team.responsibilities}</p>
-            <div class="user-grid">
-              {team["current-members"].map((user) => (
-                <UserCard url={user.url} name={user.name} />
-              ))}
-            </div>
-          </>
-        );
-      })
-    }
-  </section>
-  <section>
-    <h2>Maintainers</h2>
-    <p>
-      <strong>Maintainers of ports and userstyles, {currentMaintainers.length} in total.</strong>
-    </p>
-    <p>Responsible for the upkeep of their respective repositories.</p>
-    <div class="user-grid">
-      {currentMaintainers.map((maintainer) => <UserCard url={maintainer.url} name={maintainer.name} />)}
-    </div>
-  </section>
+  <main>
+    <PageIntro title="Community">
+      <p>
+        Catppuccin is not governed or controlled by one person, 4 main teams are responsible for different parts of the
+        project.
+      </p>
+      <p>
+        <strong>And of course you!</strong> Whether you maintain your own port; have contributed via a pull request; or raised
+        an issue. The community is at the heart and soul of Catppuccin.
+      </p>
+    </PageIntro>
+    <section>
+      <h2>Teams</h2>
+      {
+        leadership.map((team) => {
+          return (
+            <>
+              <h3>
+                <TeamName team={team.identifier} color={team.color}>
+                  {team.name}
+                </TeamName>
+              </h3>
+              <p>
+                <strong>
+                  {team.identifier === "userstyles-staff" ? (
+                    <>
+                      Overseers of all <a href="https://github.com/catppuccin/userstyles">catppuccin/userstyles</a>.
+                    </>
+                  ) : (
+                    team.description
+                  )}
+                </strong>
+              </p>
+              <p>{team.responsibilities}</p>
+              <div class="user-grid">
+                {team["current-members"].map((user) => (
+                  <UserCard url={user.url} name={user.name} />
+                ))}
+              </div>
+            </>
+          );
+        })
+      }
+    </section>
+    <section>
+      <h2>Maintainers</h2>
+      <p>
+        <strong>Maintainers of ports and userstyles, {currentMaintainers.length} in total.</strong>
+      </p>
+      <p>Responsible for the upkeep of their respective repositories.</p>
+      <div class="user-grid">
+        {currentMaintainers.map((maintainer) => <UserCard url={maintainer.url} name={maintainer.name} />)}
+      </div>
+    </section>
+  </main>
 </Default>
 
 <style lang="scss">
-  @use "@styles/utils";
+  @use "@styles/utils" as *;
 
   :root {
     --accent-color: var(--green);
   }
+
+  section + section {
+    margin-block: space(md) space(xl);
+  }
+
   h3 {
-    margin-top: var(--space-sm);
   }
 
   .user-grid {
-    @include utils.grid($column: 250px, $gap: var(--space-md));
+    @include grid($column: 250px, $gap: space(md));
   }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e62f78d0..d0a82069 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,7 @@
 ---
 import Landing from "@layouts/Landing.astro";
+import Button from "@components/Button.svelte";
 import LaptopIllustration from "./_components/LaptopIllustration.astro";
-import { Icon } from "astro-icon/components";
 ---
 
 <Landing
@@ -12,48 +12,19 @@ import { Icon } from "astro-icon/components";
     <p>A community-driven color scheme meant for coding, designing, and much more!</p>
     <div class="btn-group">
       <a href="/ports">
-        <button class="btn btn-has-icon btn-peach">
-          <Icon name="ph:cube-fill" width={24} height={24} />
-          Discover Ports
-        </button>
+        <Button style="peach" phIconName="cube-fill"> Discover Ports </Button>
       </a>
       <a href="/palette">
-        <button class="btn btn-has-icon btn-mauve">
-          <Icon name="ph:palette-fill" width={24} height={24} />
-          Explore Colors
-        </button>
+        <Button style="mauve" phIconName="palette-fill"> Explore Palettes </Button>
       </a>
       <a href="/community">
-        <button class="btn btn-has-icon btn-green">
-          <Icon name="ph:users-three-fill" width={24} height={24} />
-          View Community
-        </button>
+        <Button style="green" phIconName="users-three-fill"> View Community </Button>
       </a>
       <a href="/blog">
-        <button class="btn btn-has-icon btn-blue">
-          <Icon name="ph:article-fill" width={24} height={24} />
-          Read Blog
-        </button>
+        <Button style="blue" phIconName="article-fill"> Read Blog </Button>
       </a>
     </div>
   </div>
 
   <LaptopIllustration slot="hero-image" />
 </Landing>
-
-<style lang="scss">
-  :root {
-    --accent-color: var(--rosewater);
-  }
-
-  h2 {
-    color: var(--accent-color);
-  }
-
-  a {
-    &:hover,
-    &:focus {
-      text-decoration: none;
-    }
-  }
-</style>
diff --git a/src/pages/licensing/index.astro b/src/pages/licensing/index.astro
index 0597ec8a..d54c2020 100644
--- a/src/pages/licensing/index.astro
+++ b/src/pages/licensing/index.astro
@@ -3,36 +3,38 @@ import Default from "@layouts/Default.astro";
 ---
 
 <Default title="Licensing • Catppuccin" description="General licensing information.">
-  <section class="website">
-    <h2>The Website</h2>
-    <h3>MIT License</h3>
-    <p><b>Copyright (c) {new Date(Date.now()).getFullYear()} Catppuccin</b></p>
-    <p>
-      Permission is hereby granted, free of charge, to any person obtaining a copy of this website and associated
-      documentation files (the "Website"), to deal in the Website without restriction, including without limitation the
-      rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Website, and to
-      permit persons to whom the Website is furnished to do so, subject to the following conditions:
-    </p>
-    <p>
-      The above copyright notice and this permission notice shall be included in all copies or substantial portions of
-      the Website.
-    </p>
-    <p>
-      The Website is provided »<b>as is</b>«, without warranty of any kind, express or implied, including but not
-      limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event
-      shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action
-      of contract, tort or otherwise, araising from, out of or in connection with the Website or the use or other
-      dealings in the Website.
-    </p>
-  </section>
+  <main class="content-grid">
+    <section class="website">
+      <h2>The Website</h2>
+      <h3>MIT License</h3>
+      <p><b>Copyright (c) {new Date(Date.now()).getFullYear()} Catppuccin</b></p>
+      <p>
+        Permission is hereby granted, free of charge, to any person obtaining a copy of this website and associated
+        documentation files (the "Website"), to deal in the Website without restriction, including without limitation
+        the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Website, and
+        to permit persons to whom the Website is furnished to do so, subject to the following conditions:
+      </p>
+      <p>
+        The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+        the Website.
+      </p>
+      <p>
+        The Website is provided »<b>as is</b>«, without warranty of any kind, express or implied, including but not
+        limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event
+        shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action
+        of contract, tort or otherwise, araising from, out of or in connection with the Website or the use or other
+        dealings in the Website.
+      </p>
+    </section>
 
-  <section class="illustration">
-    <h2>The Illustration</h2>
-    <p>
-      The homepage illustration is designed by <a href="https://www.freepik.com/author/fullvector">fullvector</a> on
-      <a href="https://www.freepik.com">freepik</a> and has been modified for this website.
-    </p>
-  </section>
+    <section class="illustration">
+      <h2>The Illustration</h2>
+      <p>
+        The homepage illustration is designed by <a href="https://www.freepik.com/author/fullvector">fullvector</a> on
+        <a href="https://www.freepik.com">freepik</a> and has been modified for this website.
+      </p>
+    </section>
+  </main>
 </Default>
 
 <style lang="scss">
diff --git a/src/pages/palette/_components/CopyToClipboardButton.svelte b/src/pages/palette/_components/CopyToClipboardButton.svelte
index 5433bafc..e02ecf24 100644
--- a/src/pages/palette/_components/CopyToClipboardButton.svelte
+++ b/src/pages/palette/_components/CopyToClipboardButton.svelte
@@ -29,7 +29,7 @@
   };
 </script>
 
-<button class="btn btn-small btn-transparent {stateClass}" onclick={copyToClipboard}>
+<button class="btn {stateClass}" onclick={copyToClipboard}>
   <span class="copy-icon">
     <svg width="12" height="12" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
       {#if stateClass == "success"}
@@ -49,11 +49,26 @@
 </button>
 
 <style lang="scss">
-  button {
-    font-size: 80%;
+
+  @use "../../../styles/utils";
+
+
+  .btn {
+    padding: space(xs);
+
+    border-radius: var(--border-radius-normal);
+    border: none;
+    background-color: transparent;
+
     font-family: monospace;
+    font-size: 1.4rem;
+    font-weight: 500;
+    color: var(--text);
     white-space: pre;
 
+    transition: all 150ms ease-in-out;
+    cursor: pointer;
+
     svg path {
       fill: currentColor;
     }
diff --git a/src/pages/palette/index.astro b/src/pages/palette/index.astro
index d2e53e21..6839a4fa 100644
--- a/src/pages/palette/index.astro
+++ b/src/pages/palette/index.astro
@@ -21,87 +21,90 @@ const toHsl = (hsl: ColorFormat["hsl"]) => {
 <Default
   title="Palette • Catppuccin"
   description="Dive into Catppuccin's palette: four unique pastel color palettes named 'flavors'. Ideal for your next project!">
-  <PageIntro title="Palette">
-    <p>
-      Catppuccin consists of 4 beautiful pastel color palettes, named <strong>flavors</strong>. The theme comes in one
-      light and three dark variants:
-      <ul>
-        <li>
-          <FlavorName flavor="latte" />: Our lightest theme harmoniously inverting the essence of Catppuccin's dark
-          themes.
-        </li>
-        <li>
-          <FlavorName flavor="frappe" />: A less vibrant alternative using subdued colors for a muted aesthetic.
-        </li>
-        <li>
-          <FlavorName flavor="macchiato" />: Medium contrast with gentle colors creating a soothing atmosphere.
-        </li>
-        <li>
-          <FlavorName flavor="mocha" />: The Original — Our darkest variant offering a cozy feeling with color-rich
-          accents.
-        </li>
-      </ul>
+  <main>
+    <PageIntro title="Palette">
       <p>
-        If you'd like to use them for your own project, refer to our
-        <a href=`${githubUrl}/catppuccin/blob/main/docs/style-guide.md`>style guide</a>
-        for general use cases and guidelines. Additionally, you can find integrations with popular frameworks and tools in
-        <a href=`${githubUrl}/palette`>catppuccin/palette</a>.
+        Catppuccin consists of 4 beautiful pastel color palettes, named <strong>flavors</strong>. The theme comes in one
+        light and three dark variants:
+        <ul>
+          <li>
+            <FlavorName flavor="latte" />: Our lightest theme harmoniously inverting the essence of Catppuccin's dark
+            themes.
+          </li>
+          <li>
+            <FlavorName flavor="frappe" />: A less vibrant alternative using subdued colors for a muted aesthetic.
+          </li>
+          <li>
+            <FlavorName flavor="macchiato" />: Medium contrast with gentle colors creating a soothing atmosphere.
+          </li>
+          <li>
+            <FlavorName flavor="mocha" />: The Original — Our darkest variant offering a cozy feeling with color-rich
+            accents.
+          </li>
+        </ul>
+        <p>
+          If you'd like to use them for your own project, refer to our
+          <a href=`${githubUrl}/catppuccin/blob/main/docs/style-guide.md`>style guide</a>
+          for general use cases and guidelines. Additionally, you can find integrations with popular frameworks and tools
+          in
+          <a href=`${githubUrl}/palette`>catppuccin/palette</a>.
+        </p>
       </p>
-    </p>
-
-    <section class="flavor-grid">
-      {
-        flavorEntries.map(([flavorName, flavor]) => (
-          <div class="flavor">
-            <details open>
-              <summary>
-                <h2 id={`flavor-${flavorName}`} class="flavor-name">
-                  <FlavorName flavor={flavorName} bold={false} />
-                </h2>
-              </summary>
-              <table class="color-list" cellspacing="0">
-                <thead>
-                  <tr class="color-list-header">
-                    <th>Color</th>
-                    <th>Hex</th>
-                    <th>RGB</th>
-                    <th>HSL</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {Object.values(flavor.colors).map(({ hex, rgb, hsl, name }) => (
-                    <tr class="color-list-entry" style={`--current-color: ${hex}`}>
-                      <td class="color">
-                        <h5 class="color-name">{name}</h5>
-                      </td>
-                      <td class="color-hex">
-                        <CopyToClipboardIcon client:load value={hex}>
-                          {hex}
-                        </CopyToClipboardIcon>
-                      </td>
-                      <td class="color-rgb">
-                        <CopyToClipboardIcon client:load value={toRgb(rgb)}>
-                          {toRgb(rgb)}
-                        </CopyToClipboardIcon>
-                      </td>
-                      <td class="color-hsl">
-                        <CopyToClipboardIcon client:load value={toHsl(hsl)}>
-                          {toHsl(hsl)}
-                        </CopyToClipboardIcon>
-                      </td>
+
+      <section class="flavor-grid">
+        {
+          flavorEntries.map(([flavorName, flavor]) => (
+            <div class="flavor">
+              <details open>
+                <summary>
+                  <h2 id={`flavor-${flavorName}`} class="flavor-name">
+                    <FlavorName flavor={flavorName} bold={false} />
+                  </h2>
+                </summary>
+                <table class="color-list" cellspacing="0">
+                  <thead>
+                    <tr class="color-list-header">
+                      <th>Color</th>
+                      <th>Hex</th>
+                      <th>RGB</th>
+                      <th>HSL</th>
                     </tr>
-                  ))}
-                </tbody>
-              </table>
-            </details>
-          </div>
-        ))
-      }
-    </section>
-  </PageIntro>
+                  </thead>
+                  <tbody>
+                    {Object.values(flavor.colors).map(({ hex, rgb, hsl, name }) => (
+                      <tr class="color-list-entry" style={`--current-color: ${hex}`}>
+                        <td class="color">
+                          <h5 class="color-name">{name}</h5>
+                        </td>
+                        <td class="color-hex">
+                          <CopyToClipboardIcon client:load value={hex}>
+                            {hex}
+                          </CopyToClipboardIcon>
+                        </td>
+                        <td class="color-rgb">
+                          <CopyToClipboardIcon client:load value={toRgb(rgb)}>
+                            {toRgb(rgb)}
+                          </CopyToClipboardIcon>
+                        </td>
+                        <td class="color-hsl">
+                          <CopyToClipboardIcon client:load value={toHsl(hsl)}>
+                            {toHsl(hsl)}
+                          </CopyToClipboardIcon>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </details>
+            </div>
+          ))
+        }
+      </section>
+    </PageIntro>
+  </main>
 
   <style lang="scss">
-    @use "@styles/utils";
+    @use "@styles/utils" as *;
 
     :root {
       --accent-color: var(--mauve);
@@ -112,8 +115,8 @@ const toHsl = (hsl: ColorFormat["hsl"]) => {
     }
 
     .flavor {
-      @include utils.containerPadding();
-      margin-block-start: var(--space-md);
+      padding: space(md);
+      margin-block-start: space(lg);
 
       border-radius: var(--border-radius-normal);
       background: var(--mantle);
@@ -131,7 +134,7 @@ const toHsl = (hsl: ColorFormat["hsl"]) => {
     }
 
     .color-list {
-      margin-block-start: var(--space-md);
+      margin-block-start: space(lg);
       margin-inline: auto;
     }
 
diff --git a/src/pages/ports/_components/PortCard.svelte b/src/pages/ports/_components/PortCard.svelte
index d464798c..5f0aef21 100644
--- a/src/pages/ports/_components/PortCard.svelte
+++ b/src/pages/ports/_components/PortCard.svelte
@@ -27,13 +27,13 @@
 </a>
 
 <style lang="scss">
-  @use "../../../styles/utils";
+  @use "../../../styles/utils" as *;
 
   .port-card {
-    @include utils.flex($direction: column, $gap: var(--space-md));
+    @include flexbox($direction: column, $gap: space(md));
     justify-content: space-between;
 
-    @include utils.containerPadding();
+    padding: space(md);
 
     border-radius: var(--border-radius-normal);
     background-color: var(--mantle);
@@ -63,7 +63,7 @@
     }
 
     .port-header {
-      @include utils.flex($gap: var(--space-sm));
+      @include flexbox($gap: space(sm));
       flex-wrap: nowrap;
       justify-content: space-between;
     }
diff --git a/src/pages/ports/_components/SearchBar.svelte b/src/pages/ports/_components/SearchBar.svelte
index 7247387d..ff844468 100644
--- a/src/pages/ports/_components/SearchBar.svelte
+++ b/src/pages/ports/_components/SearchBar.svelte
@@ -22,19 +22,19 @@
 </div>
 
 <style lang="scss">
-  @use "../../../styles/utils";
+  @use "../../../styles/utils" as *;
 
   .search-bar {
     background-color: var(--mantle);
     display: flex;
-    gap: var(--space-xs);
+    gap: space(sm);
     align-items: center;
-    margin-block-end: var(--space-sm);
+    margin-block-end: space(lg);
     border-radius: var(--border-radius-normal);
-    padding-inline: var(--space-xs);
+    padding-inline: space(sm);
 
     input {
-      padding: var(--space-sm) 0;
+      padding: space(md) 0;
       background-color: inherit;
       border-color: inherit;
       color: inherit;
diff --git a/src/pages/ports/index.astro b/src/pages/ports/index.astro
index b9c4e1b8..375c8b9d 100644
--- a/src/pages/ports/index.astro
+++ b/src/pages/ports/index.astro
@@ -12,32 +12,34 @@ import PortCard from "./_components/PortCard.svelte";
 <Default
   title="Ports • Catppuccin"
   description="Explore Catppuccin's extensive range of ports. From applications and tools to websites, we have a port for just about anything!">
-  <PageIntro title="Ports">
-    <p>
-      Catppuccin provides <strong>{ports.length}</strong> ports, covering a wide range of applications, tools, websites,
-      and just about anything you can imagine!
-    </p>
-  </PageIntro>
-
-  <!-- Display ports without search bar for browsers without JavaScript enabled -->
-  <noscript>
-    <div class="port-grid">
-      {ports.map((port) => <PortCard {port} />)}
-    </div>
-  </noscript>
-
-  <!-- TODO: Figure out a better general solution that doesn't involve defining SVGs as Svelte components or passing in nested Svelte 5 snippets/slots -->
-  <PortExplorer {ports} client:only="svelte" />
+  <main>
+    <PageIntro title="Ports">
+      <p>
+        Catppuccin provides <strong>{ports.length}</strong> ports, covering a wide range of applications, tools, websites,
+        and just about anything you can imagine!
+      </p>
+    </PageIntro>
+
+    <!-- Display ports without search bar for browsers without JavaScript enabled -->
+    <noscript>
+      <div class="port-grid">
+        {ports.map((port) => <PortCard {port} />)}
+      </div>
+    </noscript>
+
+    <!-- TODO: Figure out a better general solution that doesn't involve defining SVGs as Svelte components or passing in nested Svelte 5 snippets/slots -->
+    <PortExplorer {ports} client:only="svelte" />
+  </main>
 </Default>
 
 <style lang="scss" is:global>
-  @use "@styles/utils";
+  @use "@styles/utils" as *;
 
   :root {
     --accent-color: var(--peach);
   }
 
   .port-grid {
-    @include utils.grid($column: 300px, $gap: var(--space-sm));
+    @include grid($column: 300px, $gap: space(md));
   }
 </style>
diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss
deleted file mode 100644
index 5199f7f7..00000000
--- a/src/styles/_buttons.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-@use "utils";
-
-@keyframes btnFadeOut {
-  to {
-    background-color: var(--surface0);
-
-    color: var(--text);
-  }
-}
-
-.btn-group {
-  display: flex;
-  gap: var(--space-xs);
-  flex-wrap: wrap;
-}
-
-.btn {
-  @include utils.containerPadding(xs-y);
-
-  border-radius: 9999px;
-  border: none;
-  background-color: var(--surface0);
-
-  font-size: 1.6rem;
-  font-weight: 500;
-  color: var(--text);
-
-  transition: all 350ms ease-in-out;
-  cursor: pointer;
-
-  &-small {
-    @include utils.containerPadding(xxs);
-
-    border-radius: var(--border-radius-normal);
-  }
-
-  &-transparent {
-    background-color: transparent;
-  }
-
-  &-transparent:hover,
-  &-transparent:focus {
-    background-color: color-mix(in srgb, transparent, var(--text) 10%);
-  }
-
-  &-has-icon {
-    display: flex;
-    align-items: center;
-    gap: var(--space-xs);
-  }
-
-  &-peach {
-    background-color: var(--peach);
-    background-image: linear-gradient(120deg, var(--peach), var(--red));
-    background-size: 150% 100%;
-    background-position: top left;
-
-    font-weight: 600;
-    color: var(--inverted-text);
-
-    &:hover {
-      background-position: top right;
-    }
-  }
-
-  &-mauve {
-    background-color: var(--mauve);
-    background-image: linear-gradient(120deg, var(--pink), var(--mauve));
-    background-size: 150% 100%;
-    background-position: top left;
-
-    font-weight: 600;
-    color: var(--inverted-text);
-
-    &:hover {
-      background-position: top right;
-    }
-  }
-
-  &-green {
-    background-color: var(--green);
-    background-image: linear-gradient(120deg, var(--teal), var(--green));
-    background-size: 150% 100%;
-    background-position: top left;
-
-    font-weight: 600;
-    color: var(--inverted-text);
-
-    &:hover {
-      background-position: top right;
-    }
-  }
-
-  &-blue {
-    background-color: var(--blue);
-    background-image: linear-gradient(120deg, var(--blue), var(--sky));
-    background-size: 150% 100%;
-    background-position: top left;
-
-    font-weight: 600;
-    color: var(--inverted-text);
-
-    &:hover {
-      background-position: top right;
-    }
-  }
-
-  &-success {
-    background-color: var(--green);
-
-    color: var(--inverted-text);
-
-    animation: btnFadeOut 350ms linear forwards;
-    animation-delay: 500ms;
-  }
-}
-
-.btn,
-.btn * {
-  transition: background-position 350ms ease-in-out;
-}
diff --git a/src/styles/_scaffolding.scss b/src/styles/_scaffolding.scss
deleted file mode 100644
index 16b7c463..00000000
--- a/src/styles/_scaffolding.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  font-size: 62.5%;
-
-  scroll-behavior: smooth;
-}
-
-@media (prefers-reduced-motion) {
-  *,
-  *::before,
-  *::after {
-    transition: none !important;
-  }
-  html {
-    scroll-behavior: auto;
-  }
-}
-
-:root {
-  --website-max-width: 1600px;
-
-  --border-radius-normal: 6px;
-  --border-radius-large: 12px;
-
-  --base-unit: 1em;
-
-  --space-xxs: calc(0.25 * var(--base-unit));
-  --space-xs: calc(0.5 * var(--base-unit));
-  --space-sm: calc(0.75 * var(--base-unit));
-  --space-md: calc(1.25 * var(--base-unit));
-  --space-lg: calc(2 * var(--base-unit));
-  --space-xl: calc(3.25 * var(--base-unit));
-  --space-xxl: calc(5.25 * var(--base-unit));
-
-  --padding-body: clamp(20px, 5vw, 500px);
-}
-
-body {
-  margin: 0;
-  padding: 0;
-
-  min-height: 100vh;
-
-  background-color: var(--base);
-}
-
-section + section {
-  margin-block-start: var(--space-xl);
-}
-
-.content-wrapper {
-  container-type: inline-size;
-  width: 100%;
-  max-width: calc(2 * var(--padding-body) + var(--website-max-width));
-  padding: var(--space-md) var(--padding-body);
-  margin-inline: auto;
-}
-
-.no-padding {
-  padding-block: 0;
-}
-
-.header-container {
-  padding-block: var(--space-md);
-}
-
-.footer-container {
-  margin-block-start: var(--space-xl);
-
-  background-color: var(--mantle);
-
-  .content-wrapper {
-    padding-block: var(--space-lg);
-  }
-}
diff --git a/src/styles/_tables.scss b/src/styles/_tables.scss
index 0ff6dade..ffd57477 100644
--- a/src/styles/_tables.scss
+++ b/src/styles/_tables.scss
@@ -1,4 +1,4 @@
-@use "./utils";
+@use "./utils" as *;
 
 table {
   width: 100%;
@@ -13,12 +13,12 @@ table {
 
   th,
   td {
-    @include utils.containerPadding(xs-y);
+    padding: space(xs) space(md);
   }
 
   th + th,
   td + td {
-    padding-inline-start: var(--space-lg);
+    padding-inline-start: space(lg);
   }
 
   th {
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
index 6da9de79..c91ba9c5 100644
--- a/src/styles/_typography.scss
+++ b/src/styles/_typography.scss
@@ -1,4 +1,4 @@
-@use "./utils";
+@use "./utils" as *;
 
 @font-face {
   font-family: "Inter";
@@ -61,7 +61,7 @@ h3,
 h4,
 h5 {
   margin: 0;
-  padding-block: var(--space-xs) var(--space-xs);
+  padding-block: space(xl) space(md);
 
   color: var(--text);
 }
@@ -99,7 +99,7 @@ summary {
 p,
 ul,
 ol {
-  margin-block: 0 var(--space-xs);
+  margin-block: 0 space(sm);
 }
 li {
   margin: 0;
@@ -110,8 +110,8 @@ a {
 
   color: var(--blue);
 
-  &:hover,
-  &:focus {
+  &:not(:has(button)):hover,
+  &:not(:has(button)):focus {
     text-decoration: underline;
   }
 }
@@ -158,7 +158,7 @@ blockquote cite {
 }
 
 code {
-  padding-inline: var(--space-xxs);
+  padding-inline: space(xs);
   max-width: 100%;
 
   border-radius: var(--border-radius-normal);
@@ -192,7 +192,7 @@ code {
 }
 
 .rehype-heading {
-  padding-block: var(--space-md) var(--space-xs);
+  padding-block: space(md) space(xs);
 }
 
 .rehype-heading-link {
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
deleted file mode 100644
index 79cef97c..00000000
--- a/src/styles/_utils.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@mixin containerPadding($size: md) {
-  @if $size == xxs {
-    padding: var(--space-xxs);
-  }
-  @if $size == xxs-y {
-    padding: var(--space-xxs) var(--space-xs);
-  }
-  @if $size == xs {
-    padding: var(--space-xs);
-  }
-  @if $size == xs-y {
-    padding: var(--space-xs) var(--space-md);
-  }
-  @if $size == sm {
-    padding: var(--space-sm);
-  }
-  @if $size == md {
-    padding: var(--space-md);
-  }
-  @if $size == lg {
-    padding: var(--space-lg);
-  }
-  @if $size == xl {
-    padding: var(--space-xl) var(--space-xxl);
-  }
-}
-
-@mixin flex($direction: row, $gap: var(--space-md)) {
-  display: flex;
-  flex-direction: $direction;
-  flex-wrap: wrap;
-  gap: $gap;
-}
-
-@mixin grid($column: 250px, $gap: var(--space-md)) {
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: repeat(auto-fit, minmax($column, 1fr));
-  gap: $gap;
-}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index c2cbbeb1..6c170986 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,7 +1,4 @@
 @use "./palette";
 @use "./typography";
 
-@use "./scaffolding";
-
 @use "./tables";
-@use "./buttons";
diff --git a/src/styles/utils.scss b/src/styles/utils.scss
new file mode 100644
index 00000000..98f98627
--- /dev/null
+++ b/src/styles/utils.scss
@@ -0,0 +1,97 @@
+@use "sass:math";
+
+$base-size: 3;
+
+@function border-radius($size: sm) {
+  @if $size == sm {
+    @return $base-size * 2px;
+  }
+  @if $size == lg {
+    @return $base-size * 4px;
+  }
+}
+
+@function space($size: md) {
+  @if $size == xs {
+    @return math.div($base-size, 10) * 1rem;
+  }
+  @if $size == sm {
+    @return math.div($base-size, 10) * 2rem;
+  }
+  @if $size == md {
+    @return math.div($base-size, 10) * 4rem;
+  }
+  @if $size == lg {
+    @return math.div($base-size, 10) * 8rem;
+  }
+  @if $size == xl {
+    @return math.div($base-size, 10) * 16rem;
+  }
+  @if $size == 2x {
+    @return math.div($base-size, 10) * 22rem;
+  }
+  @if $size == 3x {
+    @return math.div($base-size, 10) * 48rem;
+  }
+  @if $size == 4x {
+    @return math.div($base-size, 10) * 64rem;
+  }
+}
+
+@function font-size($size: m) {
+  @if $size == xs {
+    @return 79%;
+  }
+  @if $size == sm {
+    @return 88%;
+  }
+  @if $size == md {
+    @return 100%;
+  }
+  @if $size == lg {
+    @return 112%;
+  }
+  @if $size == xl {
+    @return 126%;
+  }
+  @if $size == 2x {
+    @return 142%;
+  }
+  @if $size == 3x {
+    @return 160%;
+  }
+  @if $size == 4x {
+    @return 202%;
+  }
+  @if $size == 5x {
+    @return 248%;
+  }
+}
+
+@mixin flexbox($direction: row, $gap: space(md)) {
+  display: flex;
+  gap: $gap;
+  flex-direction: $direction;
+  @content;
+}
+
+@mixin grid-old($column: 250px, $gap: space(md)) {
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: repeat(auto-fit, minmax($column, 1fr));
+  gap: $gap;
+}
+
+@mixin auto-grid($column: 250px) {
+  grid-template-rows: auto;
+  grid-template-columns: repeat(auto-fit, minmax($column, 1fr));
+}
+
+@mixin grid($gap: space(md), $column: null) {
+  display: grid;
+  gap: $gap;
+  @if $column {
+    @include auto-grid($column);
+  }
+  @content;
+}