diff --git a/app/components/AddNewButton.module.css b/app/components/AddNewButton.module.css
index 37cae7b1c..7987b5a60 100644
--- a/app/components/AddNewButton.module.css
+++ b/app/components/AddNewButton.module.css
@@ -1,6 +1,6 @@
 .addNewButton {
 	padding: 0;
-	height: var(--field-height-small);
+	height: var(--field-size-small);
 	overflow: hidden;
 	width: max-content;
 }
@@ -16,7 +16,7 @@
 }
 
 .iconsContainer > svg {
-	width: calc(var(--field-height-small) / 2);
+	width: calc(var(--field-size-small) / 2);
 	color: var(--color-text-accent);
 }
 
diff --git a/app/components/InfoPopover.module.css b/app/components/InfoPopover.module.css
index 7dc50034b..8eabe7cc0 100644
--- a/app/components/InfoPopover.module.css
+++ b/app/components/InfoPopover.module.css
@@ -5,8 +5,8 @@
 	color: var(--color-text);
 	font-size: var(--fonts-md);
 	padding: var(--s-0-5);
-	width: calc(var(--field-height) * 0.7);
-	height: calc(var(--field-height) * 0.7);
+	width: calc(var(--field-size) * 0.7);
+	height: calc(var(--field-size) * 0.7);
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -18,7 +18,7 @@
 }
 
 .triggerTiny {
-	width: var(--field-height-smaller);
-	height: var(--field-height-smaller);
+	width: var(--field-size-smaller);
+	height: var(--field-size-smaller);
 	font-size: var(--fonts-xs);
 }
diff --git a/app/components/Input.module.css b/app/components/Input.module.css
index cb62ad884..5fe1d532b 100644
--- a/app/components/Input.module.css
+++ b/app/components/Input.module.css
@@ -6,12 +6,12 @@
 	border: var(--border-style);
 	border-radius: var(--radius-field);
 	background-color: var(--color-bg);
-	height: var(--field-height);
+	height: var(--field-size);
 	width: 100%;
 
 	& svg {
 		color: var(--color-text-high);
-		height: calc(var(--field-height) / 2);
+		height: calc(var(--field-size) / 2);
 		margin: auto;
 		margin-right: 15px;
 	}
diff --git a/app/components/SideNav.module.css b/app/components/SideNav.module.css
index 775458f9b..9c1821f66 100644
--- a/app/components/SideNav.module.css
+++ b/app/components/SideNav.module.css
@@ -88,8 +88,8 @@
 	display: grid;
 	place-items: center;
 	background-color: transparent;
-	width: var(--field-height-small);
-	height: var(--field-height-small);
+	width: var(--field-size-small);
+	height: var(--field-size-small);
 	padding: 0;
 	border: none;
 	border-radius: var(--radius-field);
diff --git a/app/components/elements/Button.module.css b/app/components/elements/Button.module.css
index 15d84c6cc..7d7006506 100644
--- a/app/components/elements/Button.module.css
+++ b/app/components/elements/Button.module.css
@@ -15,7 +15,7 @@
 	padding: 0 var(--field-padding);
 	user-select: none;
 	outline-color: var(--color-text-accent);
-	height: var(--field-height);
+	height: var(--field-size);
 	white-space: nowrap;
 }
 
@@ -60,21 +60,21 @@
 	font-size: var(--fonts-xs);
 	padding-block: var(--s-1);
 	padding-inline: var(--s-2);
-	height: var(--field-height-small);
+	height: var(--field-size-small);
 }
 
 .miniscule {
 	font-size: var(--fonts-xxs);
 	padding-block: var(--s-1);
 	padding-inline: var(--s-2);
-	height: var(--field-height-smaller);
+	height: var(--field-size-smaller);
 }
 
 .big {
 	font-size: var(--fonts-md);
 	padding-block: var(--s-2-5);
 	padding-inline: var(--s-6);
-	height: var(--field-height-large);
+	height: var(--field-size-large);
 }
 
 .square {
diff --git a/app/components/elements/DatePicker.module.css b/app/components/elements/DatePicker.module.css
index ef9695ffd..d4ca0f8b0 100644
--- a/app/components/elements/DatePicker.module.css
+++ b/app/components/elements/DatePicker.module.css
@@ -1,5 +1,5 @@
 .group {
-	height: var(--field-height);
+	height: var(--field-size);
 	padding: 0 var(--field-padding);
 	border: var(--border-style);
 	border-radius: var(--radius-field);
diff --git a/app/components/elements/Select.module.css b/app/components/elements/Select.module.css
index 8c6dc7d95..5d3989b83 100644
--- a/app/components/elements/Select.module.css
+++ b/app/components/elements/Select.module.css
@@ -1,5 +1,5 @@
 .button {
-	height: var(--field-height);
+	height: var(--field-size);
 	padding: 0 var(--field-padding);
 	border: var(--border-style);
 	border-radius: var(--radius-field);
diff --git a/app/components/layout/CommandPalette.module.css b/app/components/layout/CommandPalette.module.css
index 85fa2289d..542519205 100644
--- a/app/components/layout/CommandPalette.module.css
+++ b/app/components/layout/CommandPalette.module.css
@@ -9,7 +9,7 @@
 	color: var(--color-text-high);
 	font-size: var(--fonts-xs);
 	cursor: pointer;
-	height: var(--field-height-small);
+	height: var(--field-size-small);
 	transition: background-color 0.15s;
 }
 
diff --git a/app/components/layout/TopNavMenus.module.css b/app/components/layout/TopNavMenus.module.css
index f302abdee..291892d4e 100644
--- a/app/components/layout/TopNavMenus.module.css
+++ b/app/components/layout/TopNavMenus.module.css
@@ -8,7 +8,7 @@
 	display: flex;
 	align-items: center;
 	padding: 0 var(--s-2);
-	height: var(--field-height-small);
+	height: var(--field-size-small);
 	border: none;
 	border-radius: var(--radius-field);
 	background: transparent;
diff --git a/app/components/layout/TopRightButtons.module.css b/app/components/layout/TopRightButtons.module.css
index 6cff8769a..fd3ee1d67 100644
--- a/app/components/layout/TopRightButtons.module.css
+++ b/app/components/layout/TopRightButtons.module.css
@@ -25,8 +25,8 @@
 	display: grid;
 	place-items: center;
 	background-color: var(--color-bg);
-	width: var(--field-height-small);
-	height: var(--field-height-small);
+	width: var(--field-size-small);
+	height: var(--field-size-small);
 	padding: 0.25rem;
 	border: var(--border-style);
 	border-radius: 50%;
diff --git a/app/components/layout/UserItem.module.css b/app/components/layout/UserItem.module.css
index 7e4e9b154..6e2437481 100644
--- a/app/components/layout/UserItem.module.css
+++ b/app/components/layout/UserItem.module.css
@@ -8,14 +8,14 @@
 }
 
 .avatar {
-	width: var(--field-height-small);
-	height: var(--field-height-small);
+	width: var(--field-size-small);
+	height: var(--field-size-small);
 	color: transparent;
 }
 
 .logInButton {
 	display: flex;
-	height: var(--field-height-small);
+	height: var(--field-size-small);
 	align-items: center;
 	justify-content: center;
 	padding: 0.5rem;
diff --git a/app/features/calendar/components/TagsFormField.module.css b/app/features/calendar/components/TagsFormField.module.css
index aeffbe75e..6701a6d20 100644
--- a/app/features/calendar/components/TagsFormField.module.css
+++ b/app/features/calendar/components/TagsFormField.module.css
@@ -17,7 +17,7 @@
 	display: grid;
 	place-items: center;
 	min-width: max-content;
-	height: var(--field-height-small);
+	height: var(--field-size-small);
 }
 
 .tag[data-selected] {
diff --git a/app/features/calendar/components/TournamentCard.module.css b/app/features/calendar/components/TournamentCard.module.css
index 0dd221bd8..778125826 100644
--- a/app/features/calendar/components/TournamentCard.module.css
+++ b/app/features/calendar/components/TournamentCard.module.css
@@ -96,7 +96,7 @@
 	padding: 0 var(--s-1-5);
 	display: flex;
 	gap: var(--s-1);
-	height: var(--field-height-smaller);
+	height: var(--field-size-smaller);
 	align-items: center;
 }
 
diff --git a/app/features/front-page/routes/index.module.css b/app/features/front-page/routes/index.module.css
index 2f1cec271..e7f1a00cd 100644
--- a/app/features/front-page/routes/index.module.css
+++ b/app/features/front-page/routes/index.module.css
@@ -158,7 +158,7 @@
 	display: flex;
 	gap: var(--s-2);
 	align-items: center;
-	height: var(--field-height-small);
+	height: var(--field-size-small);
 
 	&:hover svg,
 	&:focus-visible svg {
diff --git a/app/features/tournament-bracket/tournament-bracket.module.css b/app/features/tournament-bracket/tournament-bracket.module.css
index 557a383d1..e6560c83a 100644
--- a/app/features/tournament-bracket/tournament-bracket.module.css
+++ b/app/features/tournament-bracket/tournament-bracket.module.css
@@ -122,8 +122,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: var(--field-height-smaller);
-	height: var(--field-height-smaller);
+	width: var(--field-size-smaller);
+	height: var(--field-size-smaller);
 	border-radius: 50%;
 	font-weight: bold;
 	font-size: var(--fonts-sm);
diff --git a/app/styles/common.css b/app/styles/common.css
index 9cb0b798a..d9d1faa31 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -99,7 +99,7 @@ input:not(.in-container) {
 	border-radius: var(--radius-field);
 	background: var(--color-bg);
 	padding: 0 var(--field-padding);
-	height: var(--field-height);
+	height: var(--field-size);
 	line-height: var(--field-line-height);
 	outline: none;
 
@@ -248,7 +248,7 @@ select {
 		var(--field-padding) +
 		var(--s-2)
 	);
-	height: var(--field-height);
+	height: var(--field-size);
 	line-height: var(--field-line-height);
 	display: inline-flex;
 	align-items: center;
@@ -370,7 +370,7 @@ select {
 }
 
 input[type="color"] {
-	padding: calc(var(--field-height) / 8) var(--field-padding);
+	padding: calc(var(--field-size) / 8) var(--field-padding);
 }
 
 input[type="color"]::-webkit-color-swatch {
diff --git a/app/styles/vars.css b/app/styles/vars.css
index 138e51406..c9c00125a 100644
--- a/app/styles/vars.css
+++ b/app/styles/vars.css
@@ -140,10 +140,10 @@ html {
 	--border-style-high: var(--border-width) solid var(--color-border-high);
 	--border-style-accent: var(--border-width) solid var(--color-text-accent);
 
-	--field-height-smaller: 1.25rem;
-	--field-height-small: 2rem;
-	--field-height: 2.5rem;
-	--field-height-large: 3rem;
+	--field-size-smaller: 1.25rem;
+	--field-size-small: 2rem;
+	--field-size: 2.5rem;
+	--field-size-large: 3rem;
 	--field-padding: 1rem;
 	--field-line-height: 1.2rem;
 	--field-focus-ring: 2px solid var(--color-text-accent);