diff --git a/src/client/components/AdvancedSearch.vue b/src/client/components/AdvancedSearch.vue
index 713ceb08c81f7fbd9ebfc323a9aa854aec90eecc..0461d0e8a705aa6b15850ce8286f9580d68dcb03 100644
--- a/src/client/components/AdvancedSearch.vue
+++ b/src/client/components/AdvancedSearch.vue
@@ -345,7 +345,7 @@ function removeFilter(filterChip: FilterChip): void {
   border-radius: var(--big-radius);
   border: 1px solid var(--white);
   cursor: pointer;
-  padding: calc(var(--spacing) / 3) calc(var(--spacing) / 2);
+  padding: calc(var(--spacing) / 3) var(--half-spacing);
   transition: all 0.2s;
 
   &:hover {
diff --git a/src/client/components/AntibodiesTable.vue b/src/client/components/AntibodiesTable.vue
index 4dbd96278f97c9ed49f2ef5cc143e3d329cb398c..63e55f732eddd6f0aebb1f0a81ca2aba0fb46ed4 100644
--- a/src/client/components/AntibodiesTable.vue
+++ b/src/client/components/AntibodiesTable.vue
@@ -337,7 +337,7 @@ function download(): void {
   display: flex;
   padding: var(--button-padding);
   align-items: center;
-  gap: calc(var(--spacing) / 2);
+  gap: var(--half-spacing);
 }
 
 .download-format * {
diff --git a/src/client/components/AppHeader.vue b/src/client/components/AppHeader.vue
index 25c6fe4e490f625fd6a6ff6576b5f31bcc4da1c1..4564dd7aee11c875ef40c45c81ed4985601f4ea8 100644
--- a/src/client/components/AppHeader.vue
+++ b/src/client/components/AppHeader.vue
@@ -137,6 +137,6 @@ function showDownloads(): void {
 
 .archive-link::before {
   content: url("/absd-y.svg");
-  margin-right: calc(var(--spacing) / 2);
+  margin-right: var(--half-spacing);
 }
 </style>
diff --git a/src/client/components/SearchBar.vue b/src/client/components/SearchBar.vue
index daa4ca57e986db2ce15b95d97f59a9156c19002f..19265fa515cb8e4c1778cbc9295e8edbc7e5b92d 100644
--- a/src/client/components/SearchBar.vue
+++ b/src/client/components/SearchBar.vue
@@ -105,7 +105,7 @@ function fetchAntibodies (): void {
   border-bottom: 1px var(--white) solid;
   display: flex;
   gap: var(--spacing);
-  padding-bottom: calc(var(--spacing) / 2);
+  padding-bottom: var(--half-spacing);
   transition: border-bottom-color .5s;
 }
 
@@ -124,7 +124,7 @@ function fetchAntibodies (): void {
   color: var(--white);
   flex-grow: 1;
   font-size: var(--spacing);
-  padding: 0 calc(var(--spacing) / 2);
+  padding: 0 var(--half-spacing);
   min-width: 0;
   transition: background-color 0.1s;
 
diff --git a/src/client/globals.css b/src/client/globals.css
index 5e545d08fc9651c182875c476f7665b95a9a44c4..bf666502b8e7c10dd73626b068e672de4372ef0c 100644
--- a/src/client/globals.css
+++ b/src/client/globals.css
@@ -18,6 +18,7 @@
   --white: hsl(0, 0%, 100%);
 
   --spacing: 20px;
+  --half-spacing: 10px;
   --spacing-table: 16px;
   --radius: 5px;
   --big-radius: 24px;
@@ -100,7 +101,7 @@ i {
   border: 1px solid transparent;
   color: var(--black);
   font-weight: bold;
-  padding: calc(var(--spacing) / 2) var(--spacing);
+  padding: var(--half-spacing) var(--spacing);
 
   &:hover {
     background-color: transparent;