diff --git a/app/components/MapPoolSelector.module.css b/app/components/MapPoolSelector.module.css
index 4b5657b88..da271ddd9 100644
--- a/app/components/MapPoolSelector.module.css
+++ b/app/components/MapPoolSelector.module.css
@@ -1,15 +1,3 @@
-.templateSelection {
-	display: grid;
-	gap: var(--s-2);
-	grid-template-columns: 1fr;
-}
-
-@media screen and (min-width: 640px) {
-	.templateSelection {
-		grid-template-columns: 1fr 1fr;
-	}
-}
-
 .stageRow {
 	display: flex;
 	width: 100%;
diff --git a/app/components/MapPoolSelector.tsx b/app/components/MapPoolSelector.tsx
index d8f60c502..e5e8b58e9 100644
--- a/app/components/MapPoolSelector.tsx
+++ b/app/components/MapPoolSelector.tsx
@@ -103,12 +103,10 @@ export function MapPoolSelector({
 			)}
 			<div className="stack md">
 				{allowBulkEdit && (
-					<div className={styles.templateSelection}>
-						<MapPoolTemplateSelect
-							value={template}
-							handleChange={handleTemplateChange}
-						/>
-					</div>
+					<MapPoolTemplateSelect
+						value={template}
+						handleChange={handleTemplateChange}
+					/>
 				)}
 				{info}
 				<MapPoolStages
@@ -281,6 +279,7 @@ export function MapPoolStages({
 								allowBulkEdit &&
 								(mapPool.hasStage(stageId) ? (
 									<SendouButton
+										shape="circle"
 										key="clear"
 										onPress={() => handleStageClear(stageId)}
 										icon={<X />}
@@ -290,6 +289,7 @@ export function MapPoolStages({
 									/>
 								) : (
 									<SendouButton
+										shape="circle"
 										key="select-all"
 										onPress={() => handleStageAdd(stageId)}
 										icon={<ArrowLeft />}
diff --git a/app/components/SideNav.module.css b/app/components/SideNav.module.css
index e873a5c01..2d6370975 100644
--- a/app/components/SideNav.module.css
+++ b/app/components/SideNav.module.css
@@ -297,6 +297,8 @@
 }
 
 .sideNavLinkBadge {
+	display: flex;
+	align-items: center;
 	margin-left: auto;
 	font-size: var(--font-2xs);
 	font-weight: var(--weight-semi);
@@ -304,12 +306,14 @@
 	background-color: var(--color-text-accent);
 	padding: 0 var(--s-1);
 	border-radius: var(--radius-selector);
+	height: var(--selector-size-xs);
+	text-align: center;
 	flex-shrink: 0;
 	text-transform: uppercase;
 }
 
 .sideNavLinkBadgeWarning {
-	background-color: var(--color-second-high);
+	background-color: var(--color-text-second);
 }
 
 .sideNavPanelOverlay {
diff --git a/app/components/SubNav.module.css b/app/components/SubNav.module.css
index 2c39cbd69..791f90be5 100644
--- a/app/components/SubNav.module.css
+++ b/app/components/SubNav.module.css
@@ -26,8 +26,12 @@
 
 .link {
 	width: 100%;
-	padding: var(--s-1) var(--s-4);
-	border-radius: var(--radius-box);
+	padding: 0 var(--s-4);
+	height: var(--field-size-sm);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--radius-field);
 	background-color: var(--color-bg-high);
 	cursor: pointer;
 	font-size: var(--font-xs);
diff --git a/app/components/elements/Switch.module.css b/app/components/elements/Switch.module.css
index b5672d218..6a97df1d7 100644
--- a/app/components/elements/Switch.module.css
+++ b/app/components/elements/Switch.module.css
@@ -1,5 +1,5 @@
 .root {
-	--height: var(--selector-size);
+	--height: var(--selector-size-sm);
 
 	cursor: pointer;
 	display: grid;
diff --git a/app/features/associations/routes/associations.tsx b/app/features/associations/routes/associations.tsx
index 1503173d2..f9e5998df 100644
--- a/app/features/associations/routes/associations.tsx
+++ b/app/features/associations/routes/associations.tsx
@@ -108,6 +108,7 @@ function Association({
 						]}
 					>
 						<SendouButton
+							shape="square"
 							icon={<Trash className="small-icon" />}
 							className="small-text"
 							variant="minimal-destructive"
@@ -195,6 +196,7 @@ function AssociationInviteCodeActions({
 			<div className="stack horizontal sm items-center">
 				<input type="text" value={inviteLink} readOnly id={id} />
 				<SendouButton
+					shape="square"
 					variant={copySuccess ? "outlined-success" : "outlined"}
 					onPress={() => copyToClipboard(inviteLink)}
 					icon={copySuccess ? <Check /> : <Clipboard />}
@@ -251,6 +253,7 @@ function AssociationMember({
 					]}
 				>
 					<SendouButton
+						shape="square"
 						icon={<Trash className="small-icon" />}
 						className="small-text"
 						variant="minimal-destructive"
diff --git a/app/features/build-analyzer/routes/analyzer.module.css b/app/features/build-analyzer/routes/analyzer.module.css
index b44289127..8c2415bfa 100644
--- a/app/features/build-analyzer/routes/analyzer.module.css
+++ b/app/features/build-analyzer/routes/analyzer.module.css
@@ -234,13 +234,15 @@
 }
 
 .patch {
-	border-radius: var(--radius-box);
+	border-radius: var(--radius-selector);
 	background-color: var(--color-accent-low);
 	color: var(--color-accent-high);
 	font-size: var(--font-2xs);
 	font-weight: var(--weight-bold);
-	padding-block: var(--s-0-5);
 	padding-inline: var(--s-2);
+	height: var(--selector-size-sm);
+	display: flex;
+	align-items: center;
 }
 
 @media screen and (max-width: 640px) {
diff --git a/app/features/build-stats/routes/builds.$slug.stats.module.css b/app/features/build-stats/routes/builds.$slug.stats.module.css
index e85f93f6d..03f0e1679 100644
--- a/app/features/build-stats/routes/builds.$slug.stats.module.css
+++ b/app/features/build-stats/routes/builds.$slug.stats.module.css
@@ -15,6 +15,6 @@
 }
 
 .bar {
-	background-color: var(--color-accent);
+	background-color: var(--color-text-accent);
 	height: 100%;
 }
diff --git a/app/features/calendar/components/Tags.module.css b/app/features/calendar/components/Tags.module.css
index 3404432c1..cf6925aba 100644
--- a/app/features/calendar/components/Tags.module.css
+++ b/app/features/calendar/components/Tags.module.css
@@ -1,19 +1,26 @@
 .tags {
 	display: flex;
-	max-width: var(--tags-max-width, 18rem);
 	flex-wrap: wrap;
 	padding: 0;
-	font-size: var(--font-2xs);
+	font-size: var(--font-xs);
 	font-weight: var(--weight-semi);
 	gap: var(--s-1);
 	list-style: none;
+
+	& > li {
+		height: var(--selector-size-sm);
+		display: flex;
+		align-items: center;
+		border-radius: var(--radius-selector);
+		padding-inline: var(--s-1-5);
+	}
 }
 
 .small {
 	font-size: var(--font-2xs);
 
 	& > li {
-		padding: 0 var(--s-1);
+		height: var(--selector-size-xs);
 	}
 }
 
@@ -21,14 +28,6 @@
 	justify-content: center;
 }
 
-.tags > li {
-	display: flex;
-	align-items: center;
-	border-radius: var(--radius-box);
-	padding-inline: var(--s-1-5);
-	min-height: 20px;
-}
-
 .tag {
 	color: var(--color-text-inverse);
 }
diff --git a/app/features/calendar/components/TournamentCard.module.css b/app/features/calendar/components/TournamentCard.module.css
index 390cebfac..5e3a30532 100644
--- a/app/features/calendar/components/TournamentCard.module.css
+++ b/app/features/calendar/components/TournamentCard.module.css
@@ -86,7 +86,7 @@
 	font-weight: var(--weight-bold);
 	background-color: var(--color-bg-higher);
 	border-radius: var(--radius-selector);
-	height: var(--field-size-xs);
+	height: var(--selector-size);
 	width: max-content;
 	padding: 0 var(--s-1-5);
 	display: flex;
@@ -110,7 +110,7 @@
 	padding: 0 var(--s-1-5);
 	display: flex;
 	gap: var(--s-1);
-	height: var(--field-size-xs);
+	height: var(--selector-size);
 	align-items: center;
 }
 
@@ -131,7 +131,7 @@
 	font-size: var(--font-2xs);
 	font-weight: var(--weight-bold);
 	border-radius: var(--radius-selector);
-	height: var(--field-size-xs);
+	height: var(--selector-size);
 	padding: 0 var(--s-1-5);
 	display: grid;
 	place-items: center;
@@ -173,4 +173,5 @@
 	background-color: var(--color-bg-higher);
 	border-radius: var(--radius-selector);
 	padding: 0 var(--s-1-5);
+	height: var(--selector-size);
 }
diff --git a/app/features/lfg/components/LFGPost.module.css b/app/features/lfg/components/LFGPost.module.css
index 38e22b889..10b3898e0 100644
--- a/app/features/lfg/components/LFGPost.module.css
+++ b/app/features/lfg/components/LFGPost.module.css
@@ -87,7 +87,8 @@
 	font-weight: var(--weight-semi);
 	border-radius: var(--radius-selector);
 	background-color: var(--color-bg-higher);
-	padding: var(--s-0-5) var(--s-2);
+	padding: 0 var(--s-2);
+	height: var(--selector-size-sm);
 	display: flex;
 	align-items: center;
 	gap: var(--s-0-5);
diff --git a/app/features/lfg/components/LFGPost.tsx b/app/features/lfg/components/LFGPost.tsx
index 25b940ab6..6e84c1ba9 100644
--- a/app/features/lfg/components/LFGPost.tsx
+++ b/app/features/lfg/components/LFGPost.tsx
@@ -68,7 +68,7 @@ function UserLFGPost({ post, tiersMap }: { post: Post; tiersMap: TiersMap }) {
 				/>
 			</div>
 			<div>
-				<div className="stack horizontal justify-between">
+				<div className="stack horizontal justify-between items-center">
 					<PostTextTypeHeader type={post.type} />
 					{post.author.id === user?.id || isAdmin ? (
 						<PostDeleteButton id={post.id} type={post.type} />
diff --git a/app/features/object-damage-calculator/routes/object-damage-calculator.module.css b/app/features/object-damage-calculator/routes/object-damage-calculator.module.css
index a300156a7..a988e024c 100644
--- a/app/features/object-damage-calculator/routes/object-damage-calculator.module.css
+++ b/app/features/object-damage-calculator/routes/object-damage-calculator.module.css
@@ -1,17 +1,13 @@
 .controls {
 	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
+	flex-direction: column;
+	gap: var(--s-2);
 }
 
 .selects {
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--s-5);
-}
-
-.selectsWeapon {
-	width: 16rem;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: var(--s-4);
 }
 
 .ability {
@@ -78,7 +74,9 @@
 .receiverButton {
 	all: unset;
 	cursor: pointer;
-	border-radius: var(--radius-box);
+	border-radius: var(--radius-field);
+	width: var(--field-size);
+	height: var(--field-size);
 }
 
 .receiverButton:focus-visible {
@@ -133,11 +131,13 @@
 }
 
 .patch {
-	border-radius: var(--radius-box);
+	border-radius: var(--radius-selector);
 	background-color: var(--color-accent-low);
 	color: var(--color-accent-high);
 	font-size: var(--font-2xs);
 	font-weight: var(--weight-bold);
-	padding-block: var(--s-0-5);
 	padding-inline: var(--s-2);
+	height: var(--selector-size-sm);
+	display: flex;
+	align-items: center;
 }
diff --git a/app/features/object-damage-calculator/routes/object-damage-calculator.tsx b/app/features/object-damage-calculator/routes/object-damage-calculator.tsx
index 5a9ffc993..ce42a7061 100644
--- a/app/features/object-damage-calculator/routes/object-damage-calculator.tsx
+++ b/app/features/object-damage-calculator/routes/object-damage-calculator.tsx
@@ -82,7 +82,7 @@ export default function ObjectDamagePage() {
 		<Main className="stack lg">
 			<div className={styles.controls}>
 				<div className={styles.selects}>
-					<div className={styles.selectsWeapon}>
+					<div>
 						<Label htmlFor="weapon">{t("analyzer:labels.weapon")}</Label>
 						<WeaponSelect
 							includeSubSpecial
diff --git a/app/features/plus-voting/plus-voting-results.module.css b/app/features/plus-voting/plus-voting-results.module.css
index 301695761..a95724d62 100644
--- a/app/features/plus-voting/plus-voting-results.module.css
+++ b/app/features/plus-voting/plus-voting-results.module.css
@@ -21,13 +21,13 @@
 .tierHeader {
 	display: flex;
 	flex-direction: row;
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 }
 
 .tierHeader::before,
 .tierHeader::after {
 	flex: 1 1;
-	border-bottom: 3px solid var(--color-accent-low);
+	border-bottom: 3px solid var(--color-bg-high);
 	margin: auto;
 	content: "";
 }
@@ -52,8 +52,9 @@
 }
 
 .userStatus {
-	border-radius: var(--radius-box);
-	background-color: var(--color-accent);
+	border-radius: var(--radius-selector);
+	height: var(--selector-size-sm);
+	background-color: var(--color-text-accent);
 	color: var(--color-text-inverse);
 	font-size: var(--font-xs);
 	font-weight: var(--weight-semi);
@@ -62,14 +63,12 @@
 
 .userStatusFailed {
 	background-color: var(--color-error);
-	color: var(--color-text);
 }
 
 .suggestionS {
-	border-radius: 50%;
+	border-radius: var(--radius-full);
 	background-color: var(--color-bg);
 	color: var(--color-text);
-	font-weight: var(--weight-bold);
 	margin-inline-end: var(--s-1);
 	padding-inline: var(--s-1);
 }
diff --git a/app/features/sendouq/components/GroupCard.module.css b/app/features/sendouq/components/GroupCard.module.css
index b0179b496..e97218237 100644
--- a/app/features/sendouq/components/GroupCard.module.css
+++ b/app/features/sendouq/components/GroupCard.module.css
@@ -74,7 +74,7 @@
 	align-items: center;
 	gap: var(--s-1);
 	font-weight: var(--weight-semi);
-	height: 24px;
+	height: var(--selector-size);
 
 	& img {
 		height: 24px;
diff --git a/app/features/tier-list-maker/components/TierRow.module.css b/app/features/tier-list-maker/components/TierRow.module.css
index 7563d21b2..0e0967037 100644
--- a/app/features/tier-list-maker/components/TierRow.module.css
+++ b/app/features/tier-list-maker/components/TierRow.module.css
@@ -75,18 +75,16 @@
 }
 
 .arrowControls {
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-rows: 1fr 1fr;
 	gap: var(--s-1);
-	margin: auto;
-	height: 100%;
 }
 
 .arrowButton {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: 32px;
+	width: var(--field-size-sm);
 	height: 100%;
 	padding: var(--s-1);
 	background: var(--color-bg-high);
@@ -152,8 +150,9 @@
 }
 
 .customColorLabel {
+	width: 100%;
 	display: flex;
+	flex-direction: column;
 	align-items: center;
-	gap: var(--s-2);
 	cursor: pointer;
 }
diff --git a/app/features/top-search/top-search.module.css b/app/features/top-search/top-search.module.css
index addbdd6c4..0fc9ff3c2 100644
--- a/app/features/top-search/top-search.module.css
+++ b/app/features/top-search/top-search.module.css
@@ -34,6 +34,7 @@
 	justify-content: space-between;
 	color: var(--color-text);
 	transition: 0.1s ease-in-out background-color;
+	border-radius: 0;
 }
 
 a.tableRow:hover {
diff --git a/app/features/tournament-bracket/components/Bracket/Elimination.tsx b/app/features/tournament-bracket/components/Bracket/Elimination.tsx
index 3b6f2b06b..d97f136c3 100644
--- a/app/features/tournament-bracket/components/Bracket/Elimination.tsx
+++ b/app/features/tournament-bracket/components/Bracket/Elimination.tsx
@@ -14,7 +14,7 @@ interface EliminationBracketSideProps {
 
 // these values must match --match-height and gap in bracket.module.css
 const MATCH_HEIGHT = 55;
-const GAP = 28;
+const GAP = 32;
 const MATCH_SPACING = MATCH_HEIGHT + GAP;
 
 export function EliminationBracketSide(props: EliminationBracketSideProps) {
diff --git a/app/features/tournament-bracket/components/Bracket/bracket.module.css b/app/features/tournament-bracket/components/Bracket/bracket.module.css
index 64f0f30f8..9d9e070f7 100644
--- a/app/features/tournament-bracket/components/Bracket/bracket.module.css
+++ b/app/features/tournament-bracket/components/Bracket/bracket.module.css
@@ -16,7 +16,7 @@
 	-ms-overflow-style: none;
 	scrollbar-width: none;
 	border: var(--border-style);
-	border-radius: var(--radius-field);
+	border-radius: var(--radius-box);
 	overflow: scroll;
 	user-select: none;
 }
@@ -26,13 +26,16 @@
 	display: flex;
 	justify-content: space-between;
 	width: var(--match-width);
-	margin-block-start: -16px;
+	margin-block-start: calc(var(--selector-size-xs) * -1);
 }
 
 .matchHeaderBox {
 	background-color: var(--color-bg-higher);
-	padding: var(--s-0-5) var(--s-1);
-	border-radius: var(--radius-field);
+	padding: 0 var(--s-1);
+	height: var(--selector-size-xs);
+	display: flex;
+	align-items: center;
+	border-radius: var(--radius-selector);
 	font-size: var(--font-2xs) !important;
 	font-weight: var(--weight-semi);
 	color: var(--color-text);
@@ -135,7 +138,7 @@ a.match:hover {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-around;
-	gap: var(--s-6);
+	gap: var(--s-8);
 	margin-top: var(--s-6);
 	flex: 1;
 	overflow: visible;
@@ -152,7 +155,7 @@ a.match:hover {
 	font-weight: var(--weight-semi);
 	padding-block: var(--s-2);
 	width: var(--match-width);
-	border-radius: var(--radius-field);
+	border-radius: var(--radius-box);
 }
 
 .elimRoundHeaderInfos {
diff --git a/app/features/tournament/routes/to.$id.seeds.module.css b/app/features/tournament/routes/to.$id.seeds.module.css
index 28c904ad9..aa9e09f16 100644
--- a/app/features/tournament/routes/to.$id.seeds.module.css
+++ b/app/features/tournament/routes/to.$id.seeds.module.css
@@ -27,7 +27,7 @@
 	column-gap: var(--s-2);
 	row-gap: var(--s-2);
 	font-size: var(--font-xs);
-	grid-template-columns: 2rem 2.25rem 2rem 1fr 3rem;
+	grid-template-columns: 2rem 3.5rem 2rem 1fr 3rem;
 	grid-template-areas:
 		"handle seed logo name sp"
 		"players players players players players";
@@ -64,7 +64,7 @@
 	}
 
 	.teamCard {
-		grid-template-columns: 2.5rem 2.25rem 2rem 1fr 3rem 1fr;
+		grid-template-columns: 2.5rem 3.5rem 2rem 1fr 3rem 1fr;
 		grid-template-areas: "handle seed logo name sp players";
 		row-gap: 0;
 	}
@@ -152,8 +152,9 @@
 	align-items: center;
 	gap: var(--s-1);
 	background-color: var(--color-bg-higher);
-	border-radius: var(--radius-box);
-	padding: var(--s-0-5) var(--s-2);
+	border-radius: var(--radius-selector);
+	padding: 0 var(--s-2);
+	height: var(--selector-size-sm);
 	font-weight: var(--weight-semi);
 }
 
diff --git a/app/features/tournament/tournament.module.css b/app/features/tournament/tournament.module.css
index 8c0b04950..7a85ba783 100644
--- a/app/features/tournament/tournament.module.css
+++ b/app/features/tournament/tournament.module.css
@@ -113,15 +113,14 @@
 	position: absolute;
 	background-color: var(--color-text-accent);
 	color: var(--color-text-inverse);
-	font-weight: var(--weight-semi);
-	width: 12px;
-	height: 12px;
-	border-radius: var(--radius-box);
+	width: 14px;
+	height: 14px;
+	border-radius: var(--radius-full);
 	font-size: var(--font-2xs);
 	display: grid;
 	place-items: center;
-	top: 14px;
-	left: 15px;
+	top: 12px;
+	left: 12px;
 	z-index: 1;
 }
 
@@ -149,8 +148,9 @@
 	text-transform: uppercase;
 	font-size: var(--font-2xs);
 	font-weight: var(--weight-bold);
-	padding: var(--s-0-5) var(--s-2);
-	border-radius: var(--radius-box);
+	padding: 0 var(--s-2);
+	border-radius: var(--radius-selector);
+	height: var(--selector-size-sm);
 	place-items: center;
 	width: max-content;
 	display: flex;
diff --git a/app/form/fields/ArrayFormField.module.css b/app/form/fields/ArrayFormField.module.css
index bfcdde763..f34154511 100644
--- a/app/form/fields/ArrayFormField.module.css
+++ b/app/form/fields/ArrayFormField.module.css
@@ -1,6 +1,6 @@
 .card {
 	border: var(--border-style);
-	border-radius: var(--radius-field);
+	border-radius: var(--radius-box);
 	margin: 0;
 	padding: 0;
 }
diff --git a/app/form/fields/ArrayFormField.tsx b/app/form/fields/ArrayFormField.tsx
index 27e65a061..da504513f 100644
--- a/app/form/fields/ArrayFormField.tsx
+++ b/app/form/fields/ArrayFormField.tsx
@@ -123,6 +123,7 @@ function ArrayItemFieldset({
 				<legend className={styles.headerLabel}>#{index + 1}</legend>
 				{canRemove ? (
 					<SendouButton
+						shape="circle"
 						icon={<Trash />}
 						aria-label="Remove item"
 						size="small"
diff --git a/app/styles/common.css b/app/styles/common.css
index b08e23060..55e32ab47 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -65,7 +65,7 @@ details summary {
 a {
 	color: var(--color-text-accent);
 	text-decoration: none;
-	border-radius: 5px;
+	border-radius: var(--radius-field);
 
 	&:focus-visible {
 		outline: var(--focus-ring);
@@ -123,8 +123,8 @@ input[type="checkbox"] {
 	appearance: none;
 	cursor: pointer;
 	padding: 0;
-	width: var(--selector-size);
-	height: var(--selector-size);
+	width: var(--selector-size-sm);
+	height: var(--selector-size-sm);
 	border-radius: calc(var(--radius-selector) / 2);
 	background-color: var(--color-bg);
 	border: var(--border-style);
@@ -165,8 +165,8 @@ input[type="radio"] {
 	appearance: none;
 	cursor: pointer;
 	vertical-align: middle;
-	width: var(--selector-size);
-	height: var(--selector-size);
+	width: var(--selector-size-sm);
+	height: var(--selector-size-sm);
 	background-color: var(--color-bg);
 	border: var(--border-style);
 	border-radius: var(--radius-full);
diff --git a/app/styles/vars.css b/app/styles/vars.css
index b29a2189b..286ad4038 100644
--- a/app/styles/vars.css
+++ b/app/styles/vars.css
@@ -52,8 +52,9 @@ They mostly exist as a base for other vars like --color-text and --color-bg
 or highlight color that maintains a high contrast ratio in both light and dark modes
 If used as a background color, --color-text-inverse should be used as the text color
 
-Preffer using --color-x-high for info, success, warning, and error texts
-It is recommended to use --color-x-low as background colors to ensure a high contrast ratio
+Info, success, warning, and error colors:
+Preffer using --color-x-high for text
+It is recommended to use --color-x-low as the background to ensure a high contrast ratio
 You can use --color-x for things like borders and icons
 
 Field icons are defined for both dark and light mode because SVGs
@@ -185,7 +186,7 @@ html {
 	--weight-semi: 500;
 	--weight-body: 400;
 
-	--line-height: 1.4;
+	--line-height: 1.5;
 
 	/*
 	Tokens used for spacings