diff --git a/src/components/AppModal.vue b/src/components/AppModal.vue
index dc66ff0c7e..3715314879 100644
--- a/src/components/AppModal.vue
+++ b/src/components/AppModal.vue
@@ -3,16 +3,13 @@
   <div ref="modal" class="overlay app-modal" @click.self="$emit('close')">
     <FocusTrap :active="true">
       <div class="modal relative" aria-modal="true" role="dialog">
-        <header
-          v-if="title"
-          class="modal-header padding-top-bigger padding-left-bigger padding-right-normal padding-bottom-small"
-        >
+        <header v-if="title" class="modal-header pt-8 pl-8 pr-4 pb-2">
           <slot name="header">
             <h3>{{ title }}</h3>
           </slot>
           <button
             type="button"
-            class="close-button has-color-gray is-size-6 is-size-4-touch"
+            class="close-button text-gray text-lgr desk:text-base"
             :aria-label="$t('browse-page.aria.close')"
             @click="$emit('close')"
             @keypress.enter="$emit('close')"
@@ -84,10 +81,6 @@ export default {
   background: #00000094;
 }
 
-.has-color-gray {
-  color: rgb(176, 176, 176);
-}
-
 .modal-header {
   display: flex;
   justify-content: space-around;
diff --git a/src/components/ContentReport/ContentReportForm.vue b/src/components/ContentReport/ContentReportForm.vue
index 7797207491..677a7d4707 100644
--- a/src/components/ContentReport/ContentReportForm.vue
+++ b/src/components/ContentReport/ContentReportForm.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="content-report-form" class="padding-normal is-clearfix arrow-popup">
+  <div id="content-report-form" class="p-4 arrow-popup">
     <button
       :aria-label="$t('photo-details.aria.close-form')"
-      class="button close-button is-text tiny is-pulled-right is-block has-background-white"
+      class="button close-button is-text tiny float-right block bg-white"
       @click="closeForm()"
       @keyup.enter="closeForm()"
     >
@@ -28,16 +28,16 @@
       @sendContentReport="sendContentReport"
     />
     <form v-else>
-      <h5 class="b-header margin-bottom-normal">
+      <h5 class="b-header mb-4">
         {{ $t('photo-details.content-report.title') }}
       </h5>
-      <fieldset class="margin-bottom-normal">
-        <legend class="margin-bottom-normal">
+      <fieldset class="mb-4">
+        <legend class="mb-4">
           {{ $t('photo-details.content-report.issue') }}
         </legend>
 
         <div>
-          <label for="dmca" class="margin-left-small">
+          <label for="dmca" class="ml-2">
             <input
               id="dmca"
               v-model="selectedReason"
@@ -50,7 +50,7 @@
         </div>
 
         <div>
-          <label for="mature" class="margin-left-small">
+          <label for="mature" class="ml-2">
             <input
               id="mature"
               v-model="selectedReason"
@@ -63,7 +63,7 @@
         </div>
 
         <div>
-          <label for="other" class="margin-left-small">
+          <label for="other" class="ml-2">
             <input
               id="other"
               v-model="selectedReason"
@@ -76,16 +76,14 @@
         </div>
       </fieldset>
 
-      <p
-        class="caption has-text-weight-semibold has-text-grey margin-bottom-normal"
-      >
+      <p class="caption font-semibold text-gray mb-4">
         {{ $t('photo-details.content-report.caption') }}
       </p>
 
       <button
         type="button"
         :disabled="selectedReason === null"
-        class="button next-button tiny is-success is-pulled-right"
+        class="button next-button tiny is-success float-right"
         @click="onIssueSelected()"
         @keyup.enter="onIssueSelected()"
       >
diff --git a/src/components/ContentReport/DmcaNotice.vue b/src/components/ContentReport/DmcaNotice.vue
index 15bffb31b7..23241e815c 100644
--- a/src/components/ContentReport/DmcaNotice.vue
+++ b/src/components/ContentReport/DmcaNotice.vue
@@ -3,7 +3,7 @@
     <i18n
       path="photo-details.content-report.dmca.content"
       tag="p"
-      class="is-block padding-horizontal-big margin-top-large has-text-centered"
+      class="block px-6 mt-10 text-center"
     >
       <template #link>
         <a
@@ -19,7 +19,7 @@
     <i18n
       path="photo-details.content-report.dmca.provider"
       tag="p"
-      class="is-block padding-horizontal-big margin-top-normal has-text-centered"
+      class="block px-6 mt-4 text-center"
     >
       <template #link>
         <a
@@ -33,12 +33,12 @@
     </i18n>
 
     <button
-      class="button is-text tiny margin-top-normal is-shadowless"
+      class="button is-text tiny mt-4"
       @click="onBackClick()"
       @keyup.enter="onBackClick()"
     >
       <span
-        ><i class="icon chevron-left margin-right-small" />
+        ><i class="icon chevron-left mr-2" />
         {{ $t('photo-details.content-report.back') }}</span
       >
     </button>
diff --git a/src/components/ContentReport/DoneMessage.vue b/src/components/ContentReport/DoneMessage.vue
index dc734d9d93..c9aac07b1c 100644
--- a/src/components/ContentReport/DoneMessage.vue
+++ b/src/components/ContentReport/DoneMessage.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="margin-vertical-large">
-    <span class="is-block padding-horizontal-big has-text-centered">
+  <div class="my-10">
+    <span class="block px-6 text-center">
       {{ $t('photo-details.content-report.dmca.thanks') }}
     </span>
     <i18n
       path="photo-details.content-report.dmca.provider"
       tag="span"
-      class="is-block padding-horizontal-big margin-top-large has-text-centered"
+      class="block px-6 mt-10 text-center"
     >
       <template #link>
         <a
diff --git a/src/components/ContentReport/OtherIssueForm.vue b/src/components/ContentReport/OtherIssueForm.vue
index 403a535f77..edd6f35893 100644
--- a/src/components/ContentReport/OtherIssueForm.vue
+++ b/src/components/ContentReport/OtherIssueForm.vue
@@ -3,25 +3,25 @@
     <h4 class="b-header">
       {{ $t('photo-details.content-report.title') }}
     </h4>
-    <legend class="margin-bottom-small">
+    <legend class="mb-2">
       {{ $t('photo-details.content-report.issue-description') }}
     </legend>
     <label for="issue">
       <textarea
         id="issue"
         v-model="otherReasonDescription"
-        class="reason padding-small has-text-weight-semibold"
+        class="reason p-2 font-semibold"
         placeholder="Issue description required (with at least 20 characters)"
       />
     </label>
     <div>
       <button
-        class="button other-back-button is-text tiny margin-top-normal has-background-white"
+        class="button other-back-button is-text tiny mt-4 bg-white"
         @click="onBackClick()"
         @keyup.enter="onBackClick()"
       >
         <span>
-          <i class="icon chevron-left margin-right-small" />
+          <i class="icon chevron-left mr-2" />
           {{ $t('photo-details.content-report.back') }}
         </span>
       </button>
@@ -29,7 +29,7 @@
       <button
         type="button"
         :disabled="!descriptionHasMoreThan20Chars"
-        class="button submit-other-button tiny is-success margin-top-normal is-pulled-right"
+        class="button submit-other-button tiny is-success mt-4 float-right"
         @click="sendContentReport()"
         @keyup.enter="sendContentReport()"
       >
diff --git a/src/components/ContentReport/ReportError.vue b/src/components/ContentReport/ReportError.vue
index 529644ddaf..afa9b8f880 100644
--- a/src/components/ContentReport/ReportError.vue
+++ b/src/components/ContentReport/ReportError.vue
@@ -1,17 +1,15 @@
 <template>
   <div>
-    <span
-      class="is-block padding-horizontal-big margin-top-large has-text-centered"
-    >
+    <span class="block px-6 mt-10 text-center">
       {{ $t('photo-details.content-report.dmca.error') }}
     </span>
     <button
-      class="button is-text tiny margin-top-normal is-shadowless"
+      class="button is-text tiny mt-4"
       @click="onBackClick()"
       @keyup.enter="onBackClick()"
     >
       <span>
-        <i class="icon chevron-left margin-right-small" />
+        <i class="icon chevron-left mr-2" />
         {{ $t('photo-details.content-report.back') }}
       </span>
     </button>
diff --git a/src/components/CopyButton.vue b/src/components/CopyButton.vue
index ee468b0f15..2f405c15f9 100644
--- a/src/components/CopyButton.vue
+++ b/src/components/CopyButton.vue
@@ -2,15 +2,15 @@
   <button
     :id="id"
     type="button"
-    class="button tiny donate is-paddingless margin-top-normal padding-horizontal-normal"
+    class="button tiny donate px-4 py-0 mt-4"
     :data-clipboard-target="el"
   >
     <span v-if="!success">
-      <i class="icon cc-share margin-right-small" />
+      <i class="icon cc-share mr-2" />
       {{ $t('photo-details.copy.copy') }}
     </span>
     <span v-else>
-      <i class="icon cc-share margin-right-small" />
+      <i class="icon cc-share mr-2" />
       {{ $t('photo-details.copy.copied') }}
     </span>
   </button>
diff --git a/src/components/EmbeddedNavSection.vue b/src/components/EmbeddedNavSection.vue
index d080aa6230..f770669790 100644
--- a/src/components/EmbeddedNavSection.vue
+++ b/src/components/EmbeddedNavSection.vue
@@ -9,7 +9,7 @@
         height="24"
       />
     </NuxtLink>
-    <div class="navbar-brand has-color-white">
+    <div class="navbar-brand text-white">
       <a
         role="button"
         :class="{ ['navbar-burger']: true, ['is-active']: isBurgerMenuActive }"
@@ -38,7 +38,7 @@
           type="search"
           :placeholder="navSearchPlaceholder"
         />
-        <div class="is-sr-only">
+        <div class="sr-only">
           <button
             :aria-label="$t('header.aria.sr-search')"
             tabindex="-1"
diff --git a/src/components/ExtensionBrowsers.vue b/src/components/ExtensionBrowsers.vue
index caa783b52b..1ce3a849b8 100644
--- a/src/components/ExtensionBrowsers.vue
+++ b/src/components/ExtensionBrowsers.vue
@@ -5,14 +5,10 @@
         target="_blank"
         rel="nofollow noreferrer"
         :href="browser.extUrl"
-        class="browser-button button small margin-right-small is-opaque"
+        class="browser-button button small mr-2 is-opaque"
       >
         {{ $t(`browsers.${key}`) }}
-        <img
-          class="margin-left-small"
-          :src="browser.logo"
-          :alt="$t(`browsers.${key}`)"
-        />
+        <img class="ml-2" :src="browser.logo" :alt="$t(`browsers.${key}`)" />
       </a>
     </li>
   </ul>
diff --git a/src/components/Filters/FilterBlock.vue b/src/components/Filters/FilterBlock.vue
index 2b18e80b93..2fd1e5fa02 100644
--- a/src/components/Filters/FilterBlock.vue
+++ b/src/components/Filters/FilterBlock.vue
@@ -1,11 +1,11 @@
 <template>
   <button
-    class="filter-block button tiny tag margin-horizontal-smaller"
+    class="filter-block button tiny tag mx-1"
     :aria-label="filterLabel + ' filter'"
   >
     <span>{{ filterLabel }}</span>
     <span
-      class="close margin-left-small padding-small"
+      class="close ml-2 p-2"
       tabindex="0"
       @click="onClick"
       @keyup.enter="onClick"
diff --git a/src/components/Filters/FilterChecklist.vue b/src/components/Filters/FilterChecklist.vue
index d993071004..4e1446c156 100644
--- a/src/components/Filters/FilterChecklist.vue
+++ b/src/components/Filters/FilterChecklist.vue
@@ -14,16 +14,16 @@
       <button
         v-if="!filtersExpandedByDefault"
         :aria-label="'filters list for' + title + 'category'"
-        class="filter-visibility-toggle is-white padding-vertical-small"
+        class="filter-visibility-toggle is-white py-2"
       >
         <i
           v-if="areFiltersExpanded"
-          class="icon angle-up rotImg is-size-5 has-text-grey-light"
+          class="icon angle-up rotImg text-lg text-light-gray"
           title="toggle filters visibility"
         />
         <i
           v-else
-          class="icon angle-down is-size-5 has-text-grey-light"
+          class="icon angle-down text-lg text-light-gray"
           title="toggle filters visibility"
         />
       </button>
@@ -40,7 +40,7 @@
             :key="index"
             :name="item.code"
             type="checkbox"
-            class="filter-checkbox margin-right-small"
+            class="filter-checkbox mr-2"
             :checked="item.checked"
             :disabled="isDisabled(item)"
             @change="onValueChange"
@@ -54,7 +54,7 @@
           tabindex="0"
           src="@/assets/help_icon.svg"
           alt="help"
-          class="license-help padding-top-smallest padding-right-smaller"
+          class="license-help pr-1"
           @click.stop="toggleLicenseExplanationVisibility(item.code)"
           @keyup.enter="toggleLicenseExplanationVisibility(item.code)"
         />
diff --git a/src/components/Filters/FilterDisplay.vue b/src/components/Filters/FilterDisplay.vue
index a337a126e8..8dff7d6653 100644
--- a/src/components/Filters/FilterDisplay.vue
+++ b/src/components/Filters/FilterDisplay.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="filter-display" aria-live="polite">
-    <span v-if="anyFilterApplied" class="caption has-text-weight-semibold">{{
+    <span v-if="anyFilterApplied" class="caption font-semibold">{{
       $t('filters.filter-by')
     }}</span>
     <FilterBlock
diff --git a/src/components/Filters/FiltersList.vue b/src/components/Filters/FiltersList.vue
index 454aac7204..3ca4292150 100644
--- a/src/components/Filters/FiltersList.vue
+++ b/src/components/Filters/FiltersList.vue
@@ -1,23 +1,20 @@
 <template>
   <div>
     <div class="filterlist-header">
-      <h4
-        class="padding-top-big padding-left-big padding-right-normal is-inline-block"
-      >
+      <h4 class="pt-6 pl-6 pr-4 inline-block">
         {{ $t('filter-list.filter-by') }}
       </h4>
 
       <button
         type="button"
-        class="button is-text tiny is-paddingless margin-top-big margin-right-small report is-shadowless is-pulled-right"
+        class="button is-text tiny p-0 mt-6 mr-2 report float-right"
         @click="onToggleSearchGridFilter()"
         @keyup.enter="onToggleSearchGridFilter()"
       >
-        <span
-          class="has-color-transition-blue is-hidden-touch is-size-7 is-lowercase"
-          >{{ $t('filter-list.hide') }}</span
-        >
-        <span class="margin-right-normal is-size-5 is-hidden-desktop">
+        <span class="text-trans-blue hidden desk:block text-sm lowercase">{{
+          $t('filter-list.hide')
+        }}</span>
+        <span class="mr-4 text-lg desk:hidden">
           <i class="icon cross" />
         </span>
       </button>
diff --git a/src/components/Filters/LicenseExplanationTooltip.vue b/src/components/Filters/LicenseExplanationTooltip.vue
index 1df82f1f01..259eef7b30 100644
--- a/src/components/Filters/LicenseExplanationTooltip.vue
+++ b/src/components/Filters/LicenseExplanationTooltip.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="license-explanation-tooltip padding-small">
+  <div class="license-explanation-tooltip p-2">
     <h5 v-if="(license === 'cc0') | (license === 'pdm')" class="b-header">
       {{ license.toUpperCase() }}
     </h5>
@@ -12,7 +12,7 @@
       v-if="(license === 'cc0') | (license === 'pdm')"
       path="filters.license-explanation.tool"
       tag="p"
-      class="caption is-pulled-right margin-small"
+      class="caption float-right m-2"
     >
       <template #link>
         <a target="_blank" :href="`${getLicenseDeedLink(license)}`">{{
@@ -24,7 +24,7 @@
       v-else
       path="filters.license-explanation.license"
       tag="p"
-      class="caption is-pulled-right margin-small"
+      class="caption float-right m-2"
     >
       <template #link>
         <a target="_blank" :href="`${getLicenseDeedLink(license)}`">{{
diff --git a/src/components/FooterSection.vue b/src/components/FooterSection.vue
index d032667c87..2ac11c3f7d 100644
--- a/src/components/FooterSection.vue
+++ b/src/components/FooterSection.vue
@@ -13,7 +13,7 @@
           <LocaleSelector />
         </section>
         <div class="column is-half">
-          <div class="attribution margin-top-bigger">
+          <div class="attribution mt-8">
             <i18n path="footer.caption.label" tag="p" class="caption">
               <template #noted>
                 <a
@@ -37,19 +37,15 @@
                   href="https://fontawesome.com/"
                   target="_blank"
                   rel="noopener"
-                  class="has-text-white"
+                  class="text-white"
                 >
                   {{ $t('footer.caption.icons') }}
                 </a>
               </template>
             </i18n>
-            <div class="margin-top-smaller">
-              <i
-                class="icon cc-logo margin-right-small is-size-4 is-color-white"
-              />
-              <i
-                class="icon cc-by margin-right-small is-size-4 is-color-white"
-              />
+            <div class="mt-1">
+              <i class="icon cc-logo mr-2 text-lgr" />
+              <i class="icon cc-by mr-2 text-lgr" />
             </div>
           </div>
         </div>
@@ -59,7 +55,7 @@
             :aria-label="$t('footer.aria.donate')"
             class="donate-section"
           >
-            <span class="title is-5 has-text-white">{{
+            <span class="font-bold text-2xl text-white">{{
               $t('footer.donate.work')
             }}</span>
             <p>{{ $t('footer.donate.help') }}</p>
diff --git a/src/components/HeroSection.vue b/src/components/HeroSection.vue
index 020a538252..6370253e27 100644
--- a/src/components/HeroSection.vue
+++ b/src/components/HeroSection.vue
@@ -1,15 +1,15 @@
 <template>
   <!-- eslint-disable vuejs-accessibility/no-autofocus -->
   <div class="hero">
-    <div class="hero-center has-text-centered">
-      <h1 class="title is-2 padding-bottom-normal">
+    <div class="hero-center text-center">
+      <h1 class="text-5xl pb-4">
         {{ $t('hero.title') }}
       </h1>
-      <h2 class="title is-5 b-header has-text-weight-medium">
+      <h2 class="text-2xl font-medium">
         {{ $t('hero.subtitle') }}
       </h2>
       <form
-        class="hero-search__form margin-top-larger"
+        class="hero-search__form mt-12"
         role="search"
         method="get"
         action="/search"
@@ -32,9 +32,7 @@
             {{ $t('hero.search.button') }}
           </button>
         </div>
-        <div
-          class="caption has-text-centered margin-top-big has-text-weight-medium"
-        >
+        <div class="text-sm mt-6 font-medium">
           <i18n path="hero.caption.content" tag="p">
             <template #link>
               <a
diff --git a/src/components/HomeLicenseFilter.vue b/src/components/HomeLicenseFilter.vue
index 5dd3709513..8e7b1eb631 100644
--- a/src/components/HomeLicenseFilter.vue
+++ b/src/components/HomeLicenseFilter.vue
@@ -1,5 +1,5 @@
 <template>
-  <fieldset class="home-license-filter margin-top-xl">
+  <fieldset class="home-license-filter mt-16">
     <legend>
       {{ $t('hero.license-filter.label') }}
     </legend>
diff --git a/src/components/ImageDetails/CopyLicense.vue b/src/components/ImageDetails/CopyLicense.vue
index 6d787be4a4..e9cb0cbe9f 100644
--- a/src/components/ImageDetails/CopyLicense.vue
+++ b/src/components/ImageDetails/CopyLicense.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="copy-license margin-vertical-normal">
-    <h5 class="b-header margin-bottom-normal">
+  <div class="copy-license my-4">
+    <h5 class="b-header mb-4">
       {{ $t('photo-details.reuse.copy-license.title') }}
     </h5>
     <section class="tabs boxed">
@@ -54,7 +54,7 @@
           ref="photoAttribution"
           path="photo-details.reuse.credit.text"
           tag="span"
-          class="photo_usage-attribution is-block"
+          class="photo_usage-attribution block"
         >
           <template #title>
             <a
@@ -121,7 +121,7 @@
         <label for="attribution-html">
           <textarea
             id="attribution-html"
-            class="textarea monospace is-paddingless"
+            class="textarea font-mono p-0"
             :value="attributionHtml"
             cols="30"
             rows="4"
diff --git a/src/components/ImageDetails/ImageAttribution.vue b/src/components/ImageDetails/ImageAttribution.vue
index fa75766bcc..2689e6fb62 100644
--- a/src/components/ImageDetails/ImageAttribution.vue
+++ b/src/components/ImageDetails/ImageAttribution.vue
@@ -2,9 +2,9 @@
   <section class="sidebar_section">
     <div
       v-if="fullLicenseName.includes('cc0') || fullLicenseName.includes('pdm')"
-      class="photo-attribution margin-bottom-big"
+      class="photo-attribution mb-6"
     >
-      <h5 class="b-header margin-bottom-big">
+      <h5 class="b-header mb-6">
         {{ $t('photo-details.reuse.tool-header') }}
       </h5>
       <LicenseExplanations :license="image.license" />
@@ -12,7 +12,7 @@
       <i18n
         path="photo-details.reuse.tool.content"
         tag="span"
-        class="caption has-text-weight-semibold"
+        class="caption font-semibold"
       >
         <template #link>
           <a
@@ -26,15 +26,15 @@
         </template>
       </i18n>
     </div>
-    <div v-else class="photo-attribution margin-bottom-big">
-      <h5 class="b-header margin-bottom-big">
+    <div v-else class="photo-attribution mb-6">
+      <h5 class="b-header mb-6">
         {{ $t('photo-details.reuse.license-header') }}
       </h5>
       <i18n
         ref="photoAttribution"
         path="photo-details.reuse.attribution.main"
         tag="span"
-        class="photo_usage-attribution is-block"
+        class="photo_usage-attribution block"
       >
         <template #link>
           <a
@@ -53,7 +53,7 @@
       <i18n
         path="photo-details.reuse.license.content"
         tag="span"
-        class="caption has-text-weight-semibold"
+        class="caption font-semibold"
       >
         <template #link>
           <a
diff --git a/src/components/ImageDetails/ImageInfo.vue b/src/components/ImageDetails/ImageInfo.vue
index 026dbc96af..44f70362e2 100644
--- a/src/components/ImageDetails/ImageInfo.vue
+++ b/src/components/ImageDetails/ImageInfo.vue
@@ -1,12 +1,12 @@
 <template>
   <section class="sidebar_section">
-    <div class="margin-bottom-big">
+    <div class="mb-6">
       <dl>
-        <dt class="margin-bottom-small">
+        <dt class="mb-2">
           {{ $t('photo-details.information.type') }}
         </dt>
         <dd>{{ prettyImageType }}</dd>
-        <dt class="margin-bottom-small">
+        <dt class="mb-2">
           {{ $t('photo-details.information.dimensions') }}
         </dt>
         <dd>
@@ -15,13 +15,13 @@
           <!-- eslint-enable -->
           {{ $t('photo-details.information.pixels') }}
         </dd>
-        <dt v-if="providerName != sourceName" class="margin-bottom-small">
+        <dt v-if="providerName != sourceName" class="mb-2">
           {{ $t('photo-details.information.provider') }}
         </dt>
         <dd v-if="providerName != sourceName">
           {{ providerName }}
         </dd>
-        <dt class="margin-bottom-small">
+        <dt class="mb-2">
           {{ $t('photo-details.information.source') }}
         </dt>
         <dd>
@@ -38,8 +38,8 @@
         </dd>
       </dl>
     </div>
-    <div class="margin-bottom-big">
-      <h5 class="is-block margin-bottom-small b-header">
+    <div class="mb-6">
+      <h5 class="mb-2 b-header">
         {{ $t('photo-details.information.tags') }}
       </h5>
       <PhotoTags :tags="image.tags" :show-header="false" />
diff --git a/src/components/ImageDetails/LegalDisclaimer.vue b/src/components/ImageDetails/LegalDisclaimer.vue
index 922626db64..2af5c1b50f 100644
--- a/src/components/ImageDetails/LegalDisclaimer.vue
+++ b/src/components/ImageDetails/LegalDisclaimer.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="margin-top-normal margin-bottom-small">
-    <p class="caption has-text-left has-text-grey-dark">
+  <div class="mt-4 mb-2">
+    <p class="caption text-left text-dark-gray">
       {{ $t('photo-details.legal-disclaimer') }}
     </p>
   </div>
diff --git a/src/components/ImageDetails/PhotoDetails.vue b/src/components/ImageDetails/PhotoDetails.vue
index d8b67cbfa2..140f9d4934 100644
--- a/src/components/ImageDetails/PhotoDetails.vue
+++ b/src/components/ImageDetails/PhotoDetails.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="photo columns is-desktop is-marginless padding-bottom-xl">
-    <div class="column is-three-fifths photo_image-ctr margin-top-normal">
+  <div class="photo columns is-desktop pb-16" :style="{ margin: 0 }">
+    <div class="column is-three-fifths photo_image-ctr mt-4">
       <a
         v-if="shouldShowBreadcrumb"
-        class="is-block photo_breadcrumb has-text-left margin-left-normal margin-bottom-normal has-text-grey-dark has-text-weight-semibold caption"
+        class="block photo_breadcrumb text-left ml-4 mb-4 text-dark-gray font-semibold caption"
         :href="breadCrumbURL"
         @click.prevent="onGoBackToSearchResults"
         @keyup.enter.prevent="onGoBackToSearchResults"
       >
-        <i class="icon chevron-left margin-right-small" />
+        <i class="icon chevron-left mr-2" />
         {{ $t('photo-details.back') }}
       </a>
 
@@ -28,19 +28,19 @@
 
       <LegalDisclaimer />
 
-      <div class="margin-bottom-smaller has-text-left">
+      <div class="mb-1 text-left">
         <button
-          class="button is-text tiny is-paddingless report is-shadowless margin-top-small"
+          class="button is-text tiny p-0 report mt-2"
           @click.prevent="toggleReportFormVisibility"
           @keypress.enter.prevent="toggleReportFormVisibility"
         >
-          <span class="has-color-transition-blue margin-left-small is-size-7">
-            <i class="icon flag margin-right-small" />
+          <span class="text-trans-blue ml-2 text-sm">
+            <i class="icon flag mr-2" />
             {{ $t('photo-details.content-report.title') }}
           </span>
         </button>
       </div>
-      <div class="margin-top-small has-text-left">
+      <div class="mt-2 text-left">
         <ContentReportForm
           v-if="isReportFormVisible"
           :image="image"
@@ -51,15 +51,15 @@
     <div
       role="region"
       :aria-label="$t('photo-details.aria.details')"
-      class="column image-info margin-left-larger"
+      class="column image-info ml-12"
     >
-      <div class="margin-top-normal margin-bottom-normal">
-        <h1 class="title is-5 b-header">
+      <div class="my-4">
+        <h1 class="text-2xl">
           {{ image.title }}
         </h1>
         <i18n
           v-if="image.creator"
-          class="caption has-text-weight-semibold"
+          class="caption font-semibold"
           path="photo-details.creator"
           tag="span"
         >
@@ -168,14 +168,12 @@
         :href="image.foreign_landing_url"
         target="_blank"
         rel="noopener"
-        class="button is-success margin-bottom-small margin-top-normal"
+        class="button is-success mb-2 mt-4"
         @click="onPhotoSourceLinkClicked"
         @keyup.enter="onPhotoSourceLinkClicked"
       >
         {{ $t('photo-details.weblink') }}
-        <i
-          class="icon external-link margin-left-normal is-size-6 padding-top-smaller has-text-grey-lighter"
-        />
+        <i class="icon external-link ml-4 text-base pt-1 text-light-gray" />
       </a>
 
       <ReuseSurvey v-if="activeTab < 2" :image="image" />
diff --git a/src/components/ImageDetails/ReuseSurvey.vue b/src/components/ImageDetails/ReuseSurvey.vue
index f9550a6d88..a2a707e583 100644
--- a/src/components/ImageDetails/ReuseSurvey.vue
+++ b/src/components/ImageDetails/ReuseSurvey.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="reuse-survey caption margin-top-smaller">
+  <div class="reuse-survey caption mt-1">
     {{ $t('photo-details.survey.content') }}
     <a
       :href="formLink"
diff --git a/src/components/ImageDetails/SocialShareButtons.vue b/src/components/ImageDetails/SocialShareButtons.vue
index 4ee92d9b61..13fa4696c6 100644
--- a/src/components/ImageDetails/SocialShareButtons.vue
+++ b/src/components/ImageDetails/SocialShareButtons.vue
@@ -9,7 +9,7 @@
         @click="onSocialMediaLinkClick('Facebook')"
         @keyup.enter="onSocialMediaLinkClick('Facebook')"
       >
-        <i class="icon facebook colored margin-right-normal is-size-1" />
+        <i class="icon facebook colored mr-4 text-6xl" />
       </a>
       <a
         :aria-label="$t('photo-details.aria.share.twitter')"
@@ -19,7 +19,7 @@
         @click="onSocialMediaLinkClick('Twitter')"
         @keyup.enter="onSocialMediaLinkClick('Twitter')"
       >
-        <i class="icon twitter colored margin-right-normal is-size-1" />
+        <i class="icon twitter colored mr-4 text-6xl" />
       </a>
       <a
         :aria-label="$t('photo-details.aria.share.pinterest')"
@@ -29,7 +29,7 @@
         @click="onSocialMediaLinkClick('Pinterest')"
         @keyup.enter="onSocialMediaLinkClick('Pinterest')"
       >
-        <i class="icon pinterest colored is-size-1" />
+        <i class="icon pinterest colored text-6xl" />
       </a>
     </div>
   </div>
diff --git a/src/components/LicenseExplanations.vue b/src/components/LicenseExplanations.vue
index 1f33d2eed6..bc99577d84 100644
--- a/src/components/LicenseExplanations.vue
+++ b/src/components/LicenseExplanations.vue
@@ -1,21 +1,21 @@
 <template>
   <div v-if="license">
-    <ul class="margin-vertical-small">
+    <ul class="my-2">
       <template v-for="(li, index) in splitLicenses">
         <li
           :key="index"
           :class="{
-            ['margin-vertical-small']: true,
-            ['is-flex']: true,
+            ['my-2']: true,
+            ['flex']: true,
           }"
         >
           <i
             :class="{
               icon: true,
-              ['has-text-black']: true,
-              ['has-background-white']: true,
-              ['is-size-4']: true,
-              ['margin-right-small']: true,
+              ['text-black']: true,
+              ['bg-white']: true,
+              ['text-lgr']: true,
+              ['mr-2']: true,
               [`cc-${getLicenseIcon(li)}`]: true,
             }"
             :alt="`${li.toUpperCase()}`"
diff --git a/src/components/LicenseIcons.vue b/src/components/LicenseIcons.vue
index 6d2a6454c9..568f674ebe 100644
--- a/src/components/LicenseIcons.vue
+++ b/src/components/LicenseIcons.vue
@@ -1,9 +1,6 @@
 <template>
   <span class="photo-license-icons">
-    <i
-      class="icon cc-logo is-size-4 has-text-black has-background-white"
-      title="CC"
-    >
+    <i class="icon cc-logo text-lgr text-black has-background-white" title="CC">
       <!-- Closing i and opening template tag must be adjacent to prevent whitespace --> </i
     ><template v-for="(l, i) in getLicenseIcon(license)">
       <i
@@ -11,9 +8,9 @@
         :key="i"
         :class="{
           icon: true,
-          ['has-text-black']: true,
+          ['text-black']: true,
           ['has-background-white']: true,
-          ['is-size-4']: true,
+          ['text-lgr']: true,
           [`cc-${l}`]: true,
         }"
         :alt="`${l.toUpperCase()}`"
diff --git a/src/components/MetaSearch/MetaSearchForm.vue b/src/components/MetaSearch/MetaSearchForm.vue
index ad72b4f67d..d8e816bbad 100644
--- a/src/components/MetaSearch/MetaSearchForm.vue
+++ b/src/components/MetaSearch/MetaSearchForm.vue
@@ -1,6 +1,6 @@
 <template>
-  <section :key="type" class="padding-big meta-search">
-    <header class="margin-bottom-large">
+  <section :key="type" class="p-6 meta-search">
+    <header class="mb-10">
       <i18n
         :path="
           supported
@@ -8,7 +8,7 @@
             : 'meta-search.form.unsupported-title'
         "
         tag="h4"
-        class="b-header margin-bottom-small"
+        class="b-header mb-2"
       >
         <template #type>
           {{ type }}
@@ -25,7 +25,7 @@
 
     <MetaSourceList :type="type" :query="metaQuery" />
 
-    <p class="caption has-text-weight-semibold max-w-lg">
+    <p class="caption font-semibold max-w-lg">
       {{ $t('meta-search.caption') }}
     </p>
   </section>
diff --git a/src/components/MetaSearch/MetaSourceList.vue b/src/components/MetaSearch/MetaSourceList.vue
index cc2d1e4d16..69dcd697d1 100644
--- a/src/components/MetaSearch/MetaSourceList.vue
+++ b/src/components/MetaSearch/MetaSourceList.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="margin-bottom-large">
-    <ul class="buttons is-centered margin-top-big">
+  <div class="mb-10">
+    <ul class="buttons is-centered mt-6">
       <li v-for="source in sources" :key="source">
         <a
           target="_blank"
           rel="nofollow noreferrer"
           :href="getSourceUrl(source)"
-          class="button small margin-right-small is-opaque"
+          class="button small mr-2 is-opaque"
         >
           {{ source }}
-          <sup class="">
-            <i class="margin-left-small icon external-link" />
+          <sup class="top-0">
+            <i class="ml-2 icon external-link" />
           </sup>
         </a>
       </li>
diff --git a/src/components/NavSection.vue b/src/components/NavSection.vue
index 55eea1c3a2..b87a173b1b 100644
--- a/src/components/NavSection.vue
+++ b/src/components/NavSection.vue
@@ -1,6 +1,6 @@
 <template>
   <nav :aria-label="$t('header.aria.primary')" class="navbar">
-    <div class="navbar-brand has-color-white">
+    <div class="navbar-brand text-white">
       <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
       <NuxtLink class="logo" :to="localePath('/')">
         <img
@@ -26,7 +26,7 @@
       </a>
     </div>
     <div :class="{ ['navbar-menu']: true, ['is-active']: isBurgerMenuActive }">
-      <div v-if="showNavSearch" class="margin-left-big">
+      <div v-if="showNavSearch" class="ml-6">
         <form
           class="hero_search-form"
           role="search"
@@ -40,7 +40,7 @@
             type="search"
             :placeholder="navSearchPlaceholder"
           />
-          <div class="is-sr-only">
+          <div class="sr-only">
             <button
               :aria-label="$t('header.aria.sr-search')"
               tabindex="-1"
diff --git a/src/components/PhotoTags.vue b/src/components/PhotoTags.vue
index f0b779c08e..be3b919a1e 100644
--- a/src/components/PhotoTags.vue
+++ b/src/components/PhotoTags.vue
@@ -3,11 +3,11 @@
     <h3 v-if="showHeader" class="b-header">
       {{ $t('photo-details.information.tags') }}
     </h3>
-    <div class="margin-top-normal">
+    <div class="mt-4">
       <template v-for="(tag, index) in getValidTags()">
         <button
           :key="index"
-          class="button tag margin-smaller"
+          class="button tag m-1"
           @click="searchByTagName(tag.name)"
           @keyup.enter="searchByTagName(tag.name)"
         >
diff --git a/src/components/SaferBrowsing.vue b/src/components/SaferBrowsing.vue
index b7acbfc62b..58ecac9b16 100644
--- a/src/components/SaferBrowsing.vue
+++ b/src/components/SaferBrowsing.vue
@@ -1,32 +1,29 @@
 <template>
   <div class="safer-browsing" @keyup.esc="closeShowForm">
     <button
-      class="button is-text tiny is-paddingless rating is-shadowless"
+      class="button is-text tiny p-0 rating"
       @keypress.enter="toggleShowForm"
       @click="toggleShowForm"
     >
-      <span class="has-color-transition-blue" style="white-space: nowrap">
+      <span class="text-trans-blue" style="white-space: nowrap">
         {{ $t('browse-page.safer-browsing.title') }}
-        <i class="icon flag margin-left-small" />
+        <i class="icon flag ml-2" />
       </span>
     </button>
     <FocusTrap :active="true">
-      <div
-        v-show="showForm"
-        class="padding-normal is-clearfix arrow-popup arrow-popup--anchor-right"
-      >
+      <div v-show="showForm" class="p-4 arrow-popup arrow-popup--anchor-right">
         <button
-          class="button close-button is-text tiny is-pulled-right is-block has-text-grey-light"
+          class="button close-button is-text tiny float-right block text-light-gray"
           @keypress.enter="toggleShowForm"
           @click="toggleShowForm"
         >
           <i class="icon cross" />
         </button>
-        <p class="caption has-text-weight-semibold padding-right-big">
+        <p class="caption font-semibold pr-6">
           {{ $t('browse-page.safer-browsing.caption') }}
         </p>
 
-        <label class="checkbox margin-top-small" for="mature">
+        <label class="checkbox mt-2" for="mature">
           <input
             id="mature"
             class="filter-checkbox"
diff --git a/src/components/SearchGridCell.vue b/src/components/SearchGridCell.vue
index c2a1e22ffe..babfc9df83 100644
--- a/src/components/SearchGridCell.vue
+++ b/src/components/SearchGridCell.vue
@@ -26,13 +26,11 @@
           @error="onImageLoadError($event, image)"
         />
       </NuxtLink>
-      <figcaption class="overlay overlay__top padding-small">
+      <figcaption class="overlay overlay__top p-2">
         <LicenseIcons :license="image.license" />
       </figcaption>
-      <figcaption
-        class="overlay overlay__bottom padding-vertical-small padding-horizontal-normal"
-      >
-        <span class="caption has-text-weight-semibold">{{ image.title }}</span>
+      <figcaption class="overlay overlay__bottom py-2 px-4">
+        <span class="caption font-semibold">{{ image.title }}</span>
       </figcaption>
     </figure>
   </div>
diff --git a/src/components/SearchGridForm.vue b/src/components/SearchGridForm.vue
index d028859053..86bb1d338c 100644
--- a/src/components/SearchGridForm.vue
+++ b/src/components/SearchGridForm.vue
@@ -3,7 +3,7 @@
   <form
     role="search"
     method="post"
-    class="search-form padding-normal"
+    class="search-form p-4"
     @submit.prevent="onSubmit"
   >
     <button
@@ -16,7 +16,7 @@
       {{ $t('filters.title') }}
     </button>
     <div
-      class="search-field field has-addons control search-control has-icons-left margin-left-small"
+      class="search-field field has-addons control search-control has-icons-left ml-2"
     >
       <label for="searchInput" class="search-field__label control label">
         <input
diff --git a/src/components/SearchGridManualLoad.vue b/src/components/SearchGridManualLoad.vue
index 20333a81a8..088c1a8044 100644
--- a/src/components/SearchGridManualLoad.vue
+++ b/src/components/SearchGridManualLoad.vue
@@ -8,13 +8,13 @@
   >
     <div ref="gridItems" class="search-grid_ctr">
       <div v-show="!isFetchingImages && includeAnalytics" class="results-meta">
-        <span class="caption has-text-weight-semibold">
+        <span class="caption font-semibold">
           {{ _imagesCount }}
         </span>
-        <div class="is-hidden-touch mr-auto padding-left-big">
+        <div class="hidden desk:block mr-auto pl-6">
           <SearchRating v-if="_query.q" :search-term="_query.q" />
         </div>
-        <div class="is-hidden-desktop is-block">
+        <div class="desk:hidden">
           <SearchRating v-if="_query.q" :search-term="searchTerm" />
         </div>
         <SaferBrowsing />
@@ -26,7 +26,7 @@
           :image="image"
         />
       </div>
-      <div class="padding-bottom-big">
+      <div class="pb-6">
         <div class="load-more">
           <button
             v-show="!isFetchingImages && includeAnalytics"
@@ -264,8 +264,4 @@ label {
     font-size: 0.8rem;
   }
 }
-
-.mr-auto {
-  margin-right: auto;
-}
 </style>
diff --git a/src/components/SearchRating.vue b/src/components/SearchRating.vue
index 8187a3e044..2446e5e55e 100644
--- a/src/components/SearchRating.vue
+++ b/src/components/SearchRating.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="caption has-text-weight-semibold">
+  <div class="caption font-semibold">
     <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
     <div v-if="status == 'NOT_SENT'">
       <span>{{ $t('browse-page.search-rating.content') }}</span>
       <button
         :aria-label="$t('browse-page.aria.relevance.yes')"
-        class="button is-text tiny is-paddingless rating rating-yes is-shadowless"
+        class="button is-text tiny p-0 rating rating-yes"
         @click="sendSearchRatingEvent(true)"
         @keyup.enter="sendSearchRatingEvent(true)"
       >
@@ -14,7 +14,7 @@
       •
       <button
         :aria-label="$t('browse-page.aria.relevance.no')"
-        class="button is-text tiny is-paddingless rating rating-no is-shadowless"
+        class="button is-text tiny p-0 rating rating-no"
         @click="sendSearchRatingEvent(false)"
         @keyup.enter="sendSearchRatingEvent(false)"
       >
diff --git a/src/components/SearchTypeTabs.vue b/src/components/SearchTypeTabs.vue
index 859135b4b9..b8cab897c1 100644
--- a/src/components/SearchTypeTabs.vue
+++ b/src/components/SearchTypeTabs.vue
@@ -38,7 +38,7 @@ export default {
     tabClass(tabSlug, tabClass) {
       return {
         [tabClass]: true,
-        'is-size-5': true,
+        'text-lg': true,
         'is-active': tabSlug === this.activeTab,
       }
     },
diff --git a/src/pages/about.vue b/src/pages/about.vue
index 11b0fe6246..d155f4e843 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -2,7 +2,7 @@
   <div class="section">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
       <div>
-        <h1 class="title is-2 margin-bottom-large">
+        <h1 class="text-5xl mb-10">
           {{ $t('about.title') }}
         </h1>
         <div class="content">
diff --git a/src/pages/extension.vue b/src/pages/extension.vue
index 0e91b50744..f5a30c64ca 100644
--- a/src/pages/extension.vue
+++ b/src/pages/extension.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <div class="hero-section">
-      <div :class="['container', isEmbedded ? '' : 'is-fluid']">
-        <div class="intro">
-          <h2 class="title is-2 margin-bottom-large">
+    <div class="hero-section border-b">
+      <div class="container pt-16" :class="[isEmbedded ? '' : 'is-fluid']">
+        <div class="intro text-center mx-auto">
+          <h2 class="text-5xl mb-10">
             {{ $t('extension.description.intro') }}
           </h2>
         </div>
@@ -11,7 +11,7 @@
         <!-- eslint-disable vuejs-accessibility/media-has-caption -->
         <video
           ref="heroVid"
-          class="screenshot"
+          class="screenshot block w-full mx-auto"
           autoplay
           loop
           muted
@@ -25,56 +25,45 @@
         <!-- eslint-enable vuejs-accessibility/media-has-caption -->
       </div>
     </div>
-    <div :class="['features', isEmbedded ? '' : 'is-fluid']">
-      <figure>
-        <img
-          class="screenshot"
-          src="~/assets/screenshots/extension_feat_1.png"
-          alt="WIP"
-        />
-      </figure>
-      <div class="description">
-        <h2>{{ $t('extension.features.search.heading') }}</h2>
-        <p class="margin-top-normal">
-          {{ $t('extension.features.search.content') }}
-        </p>
-      </div>
-
-      <div class="description reversed">
-        <h2>{{ $t('extension.features.bookmark.heading') }}</h2>
-        <p class="margin-top-normal">
-          {{ $t('extension.features.bookmark.content') }}
-        </p>
-      </div>
-      <figure>
-        <img
-          class="screenshot reversed"
-          src="~/assets/screenshots/extension_feat_2.png"
-          alt="WIP"
-        />
-      </figure>
-
-      <figure>
-        <img
-          class="screenshot"
-          src="~/assets/screenshots/extension_feat_3.png"
-          alt="WIP"
-        />
-      </figure>
-      <div class="description">
-        <h2>{{ $t('extension.features.use.heading') }}</h2>
-        <p class="margin-top-normal">
-          {{ $t('extension.features.use.content') }}
-        </p>
-      </div>
+    <div
+      class="features grid grid-cols-1 tab:grid-cols-2 gap-x-12 gap-y-30 py-30 mx-auto"
+      :class="[isEmbedded ? '' : 'is-fluid']"
+    >
+      <template v-for="(feature, index) in features">
+        <figure
+          :key="`figure-${index}`"
+          :data-index="index"
+          class="flex flex-col justify-center items-center"
+          :style="{ '--cell-idx': index * 2 }"
+        >
+          <img
+            class="screenshot w-full rounded border"
+            :src="feature.image"
+            :alt="$t(`extension.features.${feature.key}.heading`)"
+          />
+        </figure>
+        <div
+          :key="`description-${index}`"
+          :data-index="index"
+          class="description flex flex-col justify-center items-center"
+          :style="{ '--cell-idx': index * 2 + 1 }"
+        >
+          <h2 class="text-5xl">
+            {{ $t(`extension.features.${feature.key}.heading`) }}
+          </h2>
+          <p class="mt-4">
+            {{ $t(`extension.features.${feature.key}.content`) }}
+          </p>
+        </div>
+      </template>
     </div>
     <div class="section">
       <div
-        class="container conclusion margin-bottom-xxl"
+        class="container conclusion mb-24"
         :class="[isEmbedded ? '' : 'is-fluid']"
       >
-        <h2>{{ $t('extension.conclusion') }}</h2>
-        <ExtensionBrowsers class="margin-top-large" />
+        <h2 class="text-center mx-auto">{{ $t('extension.conclusion') }}</h2>
+        <ExtensionBrowsers class="mt-6" />
       </div>
     </div>
   </div>
@@ -86,6 +75,10 @@ import iframeHeight from '~/mixins/iframeHeight'
 
 import ExtensionBrowsers from '~/components/ExtensionBrowsers.vue'
 
+import feature1 from '~/assets/screenshots/extension_feat_1.png'
+import feature2 from '~/assets/screenshots/extension_feat_2.png'
+import feature3 from '~/assets/screenshots/extension_feat_3.png'
+
 const AboutPage = {
   name: 'about-page',
   components: { ExtensionBrowsers },
@@ -96,7 +89,13 @@ const AboutPage = {
       : 'with-nav-search'
   },
   data() {
+    const features = [
+      { key: 'search', image: feature1 },
+      { key: 'bookmark', image: feature2 },
+      { key: 'use', image: feature3 },
+    ]
     return {
+      features,
       isPlaying: true,
     }
   },
@@ -124,118 +123,69 @@ $video-actual-width: 1140px; // Video has internal padding
 
 .hero-section {
   background-color: $color-wp-gray-0;
-  border-bottom: 1px solid $color-transition-gray;
+  border-color: $color-transition-gray;
 
   .container {
-    padding-top: 64px;
-
     .intro {
-      text-align: center;
       max-width: 880px;
-      margin: auto;
     }
 
     .screenshot {
-      display: block;
-
-      width: 100%;
       max-width: $video-max-width;
-      margin: auto;
-
-      border-radius: 0.5rem 0.5rem 0 0;
     }
   }
 }
 
 .features {
-  display: grid;
-  grid-template-columns: 1fr;
-  @include from($tablet) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  column-gap: 3rem;
-  row-gap: 7.5em;
-
-  padding-top: 7.5em;
-  padding-bottom: 7.5em;
-
   max-width: $video-actual-width;
-  margin: auto;
-
-  figure {
-    img {
-      border-radius: 0.25rem;
 
-      border: 1px solid rgba(30, 30, 30, 0.2);
-      filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.1))
-        drop-shadow(0px 20px 33px rgba(0, 0, 0, 0.07));
-
-      width: 100%;
-      max-width: 30rem;
-    }
+  figure,
+  .description {
+    order: var(--cell-idx);
+    @apply text-center;
 
     @include from($tablet) {
       &:nth-of-type(odd) {
-        text-align: left;
+        @apply text-left items-start;
       }
 
       &:nth-of-type(even) {
-        text-align: right;
+        @apply text-right items-end;
       }
     }
   }
 
-  .description {
-    display: flex;
-    flex-direction: column;
-
-    align-items: center;
-    justify-content: center;
+  figure {
+    img {
+      border-color: rgba(30, 30, 30, 0.2);
+      filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.1))
+        drop-shadow(0px 20px 33px rgba(0, 0, 0, 0.07));
+      max-width: 30rem;
+    }
+  }
 
+  .description {
     h2,
     p {
-      text-align: center;
       max-width: 30rem;
     }
-
-    @include from($tablet) {
-      &:nth-of-type(odd) {
-        align-items: flex-start;
-
-        h2,
-        p {
-          text-align: left;
-        }
-      }
-
-      &:nth-of-type(even) {
-        align-items: flex-end;
-
-        h2,
-        p {
-          text-align: right;
-        }
-      }
-    }
   }
 
-  @include mobile() {
-    img.reversed {
-      order: 3;
+  @include from($tablet) {
+    // Rearrange middle row on two column layouts for zig-zag appearance
+    figure[data-index='1'] {
+      order: 4;
     }
 
-    .description.reversed {
-      order: 4;
+    .description[data-index='1'] {
+      order: 3;
     }
   }
 }
 
 .conclusion {
   h2 {
-    text-align: center;
-
     max-width: 40rem;
-    margin: auto;
   }
 }
 </style>
diff --git a/src/pages/feedback.vue b/src/pages/feedback.vue
index 9252750dbd..4004c703df 100644
--- a/src/pages/feedback.vue
+++ b/src/pages/feedback.vue
@@ -1,15 +1,11 @@
 <template>
   <div class="section">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
-      <div class="padding-bottom-big">
-        <h1 id="feedback" class="title is-2 margin-bottom-large">
+      <div class="pb-6">
+        <h1 id="feedback" class="text-5xl mb-10">
           {{ $t('feedback.title') }}
         </h1>
-        <i18n
-          path="feedback.description.content"
-          tag="p"
-          class="margin-bottom-large"
-        >
+        <i18n path="feedback.description.content" tag="p" class="mb-6">
           <template #openverse>
             <a
               href="https://wordpress.slack.com/messages/openverse/"
@@ -24,7 +20,7 @@
             >
           </template>
         </i18n>
-        <section class="tabs margin-top-big">
+        <section class="tabs mt-6">
           <div role="tablist" :aria-label="$t('feedback.title')">
             <button
               v-for="(name, index) in tabs"
diff --git a/src/pages/meta-search.vue b/src/pages/meta-search.vue
index 6b4b3e7348..fba7021ef6 100644
--- a/src/pages/meta-search.vue
+++ b/src/pages/meta-search.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="section margin-bottom-large">
+  <div class="section mb-10">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
-      <div class="margin-bottom-large">
-        <h1 class="title is-2">
+      <div class="mb-10">
+        <h1 class="text-5xl">
           {{ $t('meta-search-page.title') }}
         </h1>
       </div>
 
-      <i18n path="meta-search-page.intro" tag="p" class="margin-bottom-normal">
+      <i18n path="meta-search-page.intro" tag="p" class="mb-4">
         <template #link>
           <a aria-label="sources" href="/sources">{{
             $t('meta-search-page.link')
@@ -15,13 +15,13 @@
         </template>
       </i18n>
       <p>{{ $t('meta-search-page.license') }}</p>
-      <h4 class="b-header">
+      <h2 class="mt-10 mb-4 text-2xl">
         {{ $t('meta-search-page.content') }}
-      </h4>
+      </h2>
       <p>{{ $t('meta-search-page.content-types') }}</p>
-      <h4 class="b-header">
+      <h2 class="mt-10 mb-4 text-2xl">
         {{ $t('meta-search-page.images.title') }}
-      </h4>
+      </h2>
       <p>{{ $t('meta-search-page.images.content') }}</p>
       <div class="content">
         <ol>
@@ -33,48 +33,36 @@
           </li>
         </ol>
       </div>
-      <i18n
-        path="meta-search-page.images.info"
-        tag="p"
-        class="margin-bottom-small"
-      >
+      <i18n path="meta-search-page.images.info" tag="p" class="mb-2">
         <template #use>
           <strong>{{ $t('meta-search-page.use') }}</strong>
         </template>
       </i18n>
-      <figure class="image margin-vertical-large">
+      <figure class="image my-10">
         <img
           src="@/assets/meta-search-images.gif"
           alt="Meta Search Images - Cars"
         />
       </figure>
-      <h4 class="b-header margin-top-large">
+      <h2 class="mt-10 mb-4 text-2xl">
         {{ $t('meta-search-page.audio-video.title') }}
-      </h4>
+      </h2>
       <p>{{ $t('meta-search-page.audio-video.content') }}</p>
-      <i18n
-        path="meta-search-page.audio-video.filter"
-        tag="p"
-        class="margin-vertical-small"
-      >
+      <i18n path="meta-search-page.audio-video.filter" tag="p" class="my-2">
         <template #use>
           <strong>{{ $t('meta-search-page.use') }}</strong>
         </template>
       </i18n>
-      <figure class="image margin-vertical-large">
+      <figure class="image my-10">
         <img
           src="@/assets/meta-search-audio.gif"
           alt="Meta Search Audio - Drums"
         />
       </figure>
-      <h4 class="b-header margin-top-large">
+      <h2 class="mt-10 mb-4 text-2xl">
         {{ $t('meta-search-page.new.title') }}
-      </h4>
-      <i18n
-        path="meta-search-page.new.content"
-        tag="p"
-        class="margin-bottom-small"
-      >
+      </h2>
+      <i18n path="meta-search-page.new.content" tag="p" class="mb-2">
         <template #issue>
           <a
             aria-label="issue"
@@ -90,17 +78,17 @@
           >
         </template>
       </i18n>
-      <h4 class="b-header margin-top-large">
+      <h2 class="mt-10 mb-4 text-2xl">
         {{ $t('meta-search-page.why.title') }}
-      </h4>
+      </h2>
       <p>{{ $t('meta-search-page.why.content') }}</p>
-      <figure class="image margin-vertical-large">
+      <figure class="image my-10">
         <img
           src="@/assets/cc-meta-search.gif"
           alt="Old CC Meta Search Portal Demo"
         />
       </figure>
-      <p class="margin-vertical-small">
+      <p class="my-2">
         {{ $t('meta-search-page.why.new') }}
       </p>
       <i18n path="meta-search-page.why.feedback" tag="p">
diff --git a/src/pages/photos/_id.vue b/src/pages/photos/_id.vue
index cb5778c120..2a5af6fcaf 100644
--- a/src/pages/photos/_id.vue
+++ b/src/pages/photos/_id.vue
@@ -12,13 +12,10 @@
       :social-sharing-enabled="socialSharingEnabled"
       @onImageLoaded="onImageLoaded"
     />
-    <div class="padding-normal margin-vertical-big">
+    <div class="p-4 my-6">
       <PhotoTags :tags="tags" :show-header="true" />
     </div>
-    <aside
-      :aria-label="$t('photo-details.aria.related')"
-      class="padding-normal margin-vertical-big"
-    >
+    <aside :aria-label="$t('photo-details.aria.related')" class="p-4 my-6">
       <RelatedImages
         :related-images="relatedImages"
         :images-count="imagesCount"
diff --git a/src/pages/search-help.vue b/src/pages/search-help.vue
index 5c6415c203..112b301b4d 100644
--- a/src/pages/search-help.vue
+++ b/src/pages/search-help.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="section">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
-      <div class="margin-bottom-large">
-        <h1 class="title is-2">
+      <div class="mb-10">
+        <h1 class="text-5xl">
           {{ $t('search-guide.title') }}
         </h1>
         <p>
           {{ $t('search-guide.intro') }}
         </p>
 
-        <h2 class="margin-top-large title is-3">
+        <h2 class="mt-10 text-2xl mb-4">
           {{ $t('search-guide.exact.title') }}
         </h2>
         <i18n path="search-guide.exact.content" tag="p">
@@ -25,11 +25,11 @@
           </template>
         </i18n>
 
-        <h3 class="margin-vertical-normal">
+        <h2 class="my-4 text-2xl">
           {{ $t('search-guide.combine.title') }}
-        </h3>
+        </h2>
 
-        <p class="margin-vertical-normal">
+        <p class="my-4">
           {{ $t('search-guide.combine.description') }}
         </p>
         <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
@@ -103,11 +103,7 @@
           </i18n>
         </ul>
 
-        <i18n
-          path="search-guide.example.and.description"
-          tag="p"
-          class="margin-vertical-normal"
-        >
+        <i18n path="search-guide.example.and.description" tag="p" class="my-4">
           <template #link>
             <a
               :aria-label="$t('search-guide.example.and.aria-label')"
@@ -121,11 +117,7 @@
           </template>
         </i18n>
 
-        <i18n
-          path="search-guide.example.or"
-          tag="p"
-          class="margin-vertical-normal"
-        >
+        <i18n path="search-guide.example.or" tag="p" class="my-4">
           <template #link>
             <a
               :aria-label="$t('search-guide.example.or.aria-label')"
@@ -142,7 +134,7 @@
         <i18n
           path="search-guide.example.negate.description"
           tag="p"
-          class="margin-top-normal"
+          class="mt-4"
         >
           <template #operator>
             <em
@@ -154,11 +146,7 @@
           </template>
         </i18n>
 
-        <i18n
-          path="search-guide.example.negate.content"
-          tag="p"
-          class="margin-bottom-normal"
-        >
+        <i18n path="search-guide.example.negate.content" tag="p" class="mb-4">
           <template #link>
             <a
               :aria-label="$t('search-guide.example.negate.aria-label')"
@@ -175,7 +163,7 @@
         <i18n
           path="search-guide.example.prefix.description"
           tag="p"
-          class="margin-top-normal"
+          class="mt-4"
         >
           <template #operator>
             <em :aria-label="$t('search-guide.example.prefix.aria-label')"
@@ -184,11 +172,7 @@
           </template>
         </i18n>
 
-        <i18n
-          path="search-guide.example.prefix.content"
-          tag="p"
-          class="margin-bottom-normal"
-        >
+        <i18n path="search-guide.example.prefix.content" tag="p" class="mb-4">
           <template #link>
             <a
               :aria-label="$t('search-guide.example.prefix.aria-label')"
@@ -205,7 +189,7 @@
         <i18n
           path="search-guide.example.precedence.description"
           tag="p"
-          class="margin-top-normal"
+          class="mt-4"
         >
           <template #highlight>
             <em>( and )</em>
@@ -215,7 +199,7 @@
         <i18n
           path="search-guide.example.precedence.content"
           tag="p"
-          class="margin-bottom-normal"
+          class="mb-4"
         >
           <template #link>
             <a
@@ -233,7 +217,7 @@
         <i18n
           path="search-guide.example.fuzziness.description"
           tag="p"
-          class="margin-top-normal"
+          class="mt-4"
         >
           <template #highlight>
             <em aria-label="tilde N">~N</em>
@@ -248,7 +232,7 @@
         <i18n
           path="search-guide.example.fuzziness.content"
           tag="p"
-          class="margin-bottom-normal"
+          class="mb-4"
         >
           <template #link>
             <a
diff --git a/src/pages/search.vue b/src/pages/search.vue
index 6f7025864f..ad021a769a 100644
--- a/src/pages/search.vue
+++ b/src/pages/search.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="browse-page">
     <div class="search columns">
-      <div class="is-hidden-desktop">
+      <div class="desk:hidden">
         <AppModal v-if="isFilterVisible" @close="onToggleSearchGridFilter">
           <SearchGridFilter @onSearchFilterChanged="onSearchFormSubmit" />
         </AppModal>
       </div>
       <aside
         v-if="isFilterVisible"
-        class="column is-narrow grid-sidebar is-paddingless is-hidden-touch full-height-sticky"
+        class="column is-narrow grid-sidebar p-0 hidden desk:block full-height-sticky"
       >
         <SearchGridFilter @onSearchFilterChanged="onSearchFormSubmit" />
       </aside>
diff --git a/src/pages/sources.vue b/src/pages/sources.vue
index b8647a7117..f995a3ab17 100644
--- a/src/pages/sources.vue
+++ b/src/pages/sources.vue
@@ -1,22 +1,18 @@
 <template>
   <div class="section">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
-      <div class="margin-bottom-large">
-        <h1 class="title is-2 margin-bottom-large">
+      <div class="mb-10">
+        <h1 class="text-5xl mb-10">
           {{ $t('sources.title') }}
         </h1>
-        <div class="margin-bottom-large">
-          <h3 class="title subtitle is-normal is-3">
+        <div class="mb-10">
+          <h3 class="text-2xl">
             {{ $t('sources.cc-content.where') }}
           </h3>
-          <p class="margin-vertical-normal">
+          <p class="my-4">
             {{ $t('sources.cc-content.content') }}
           </p>
-          <i18n
-            path="sources.cc-content.provider"
-            tag="p"
-            class="margin-vertical-normal"
-          >
+          <i18n path="sources.cc-content.provider" tag="p" class="my-4">
             <template #flickr>
               <a aria-label="flickr" href="https://www.flickr.com/">{{
                 $t('sources.cc-content.flickr')
@@ -28,11 +24,7 @@
               }}</a>
             </template>
           </i18n>
-          <i18n
-            path="sources.cc-content.europeana"
-            tag="p"
-            class="margin-vertical-normal"
-          >
+          <i18n path="sources.cc-content.europeana" tag="p" class="my-4">
             <template #link>
               <a aria-label="europeana" href="https://www.europeana.eu/en">{{
                 $t('sources.cc-content.europeana-link')
@@ -47,11 +39,11 @@
             </template>
           </i18n>
         </div>
-        <div class="margin-bottom-large">
-          <h3 class="title subtitle is-normal is-3">
+        <div class="mb-10">
+          <h3 class="text-2xl">
             {{ $t('sources.new-content.next') }}
           </h3>
-          <p class="margin-vertical-normal">
+          <p class="my-4">
             {{ $t('sources.new-content.integrate') }}
           </p>
           <div class="content">
@@ -69,19 +61,17 @@
           </div>
         </div>
 
-        <h3 class="title subtitle is-3 margin-vertical-normal">
+        <h3 class="text-2xl my-4">
           {{ $t('sources.suggestions') }}
         </h3>
         <a
           href="https://github.com/WordPress/openverse-catalog/issues/new?assignees=&labels=%F0%9F%9A%A6+status%3A+awaiting+triage%2C+%F0%9F%A7%B9+status%3A+ticket+work+required%2C+%E2%98%81%EF%B8%8F+provider%3A+any&template=new-source-suggestion.md&title=%5BSource+Suggestion%5D+Insert+source+name+here"
-          class="button is-primary padding-vertical-bigger"
+          class="button is-primary py-8"
           target="_blank"
           rel="noopener noreferrer"
         >
           {{ $t('sources.issue-button') }}
-          <i
-            class="icon external-link margin-horizontal-small margin-top-small"
-          />
+          <i class="icon external-link mx-2 mt-2" />
         </a>
       </div>
       <i18n path="sources.detail" tag="p">
@@ -94,7 +84,7 @@
       <table
         :aria-label="$t('about.aria.sources')"
         role="region"
-        class="table is-striped margin-bottom-large margin-top-normal"
+        class="table is-striped mt-4 mb-10"
       >
         <thead>
           <tr>
@@ -202,10 +192,6 @@ export default SourcePage
 $table-border: 1px solid $color-light-gray;
 $table-border-radius: 4px;
 
-.title.is-3 {
-  font-size: 1.1875rem;
-}
-
 .button.is-primary {
   font-size: 1.1875rem;
   font-weight: 700;
diff --git a/src/styles/components/button.sass b/src/styles/components/button.sass
index 4c15fc17d9..f414bd7f39 100644
--- a/src/styles/components/button.sass
+++ b/src/styles/components/button.sass
@@ -67,15 +67,15 @@ $button-colors: $colors
     &.is-large
       height: 1.5em
       width: 1.5em
-    &:first-child:not(:last-child)
-      +ltr-property("margin", calc(-1 / 2 * var(--button-padding-horizontal) - #{$button-border-width}), false)
-      +ltr-property("margin", var(--button-padding-horizontal-fourth, 0.2rem))
-    &:last-child:not(:first-child)
-      +ltr-property("margin", var(--button-padding-horizontal-fourth, 0.2rem), false)
-      +ltr-property("margin", calc(-1 / 2 * var(--button-padding-horizontal) - #{$button-border-width}))
-    &:first-child:last-child
-      margin-left: calc(-1 / 2 * var(--button-padding-horizontal) - var(--button-border-width))
-      margin-right: calc(-1 / 2 * var(--button-padding-horizontal) - var(--button-border-width))
+    //&:first-child:not(:last-child)
+    //  +ltr-property("margin", calc(-1 / 2 * var(--button-padding-horizontal) - #{$button-border-width}), false)
+    //  +ltr-property("margin", var(--button-padding-horizontal-fourth, 0.2rem))
+    //&:last-child:not(:first-child)
+    //  +ltr-property("margin", var(--button-padding-horizontal-fourth, 0.2rem), false)
+    //  +ltr-property("margin", calc(-1 / 2 * var(--button-padding-horizontal) - #{$button-border-width}))
+    //&:first-child:last-child
+    //  margin-left: calc(-1 / 2 * var(--button-padding-horizontal) - var(--button-border-width))
+    //  margin-right: calc(-1 / 2 * var(--button-padding-horizontal) - var(--button-border-width))
   // States
   &:hover,
   &.is-hovered
diff --git a/src/styles/components/tabs.scss b/src/styles/components/tabs.scss
index 8154ffff70..745165da3c 100644
--- a/src/styles/components/tabs.scss
+++ b/src/styles/components/tabs.scss
@@ -29,7 +29,6 @@ $tabs-font-size: 1rem;
     border-image-outset: unset;
     border-image-repeat: unset;
     font-weight: 700;
-    font-size: $font-size-body-normal;
     margin: 0 1rem -0.125rem 1rem;
     padding: 0.5rem 0 1rem;
     position: relative;
diff --git a/tailwind.config.js b/tailwind.config.js
index 700ae4b90a..54ea150346 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -45,6 +45,7 @@ module.exports = {
       12: '3.00rem',
       16: '4.00rem',
       24: '6.00rem',
+      30: '7.50rem',
     },
     fontSize: {
       // Body