diff --git a/app/components/Alert.module.css b/app/components/Alert.module.css
index 454ae2f8e..6077d339b 100644
--- a/app/components/Alert.module.css
+++ b/app/components/Alert.module.css
@@ -6,8 +6,8 @@
 	border-radius: var(--radius-box);
 	background-color: var(--color-info-low);
 	color: var(--color-info-high);
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	gap: var(--s-2);
 	margin-inline: auto;
 	padding-block: var(--s-1-5);
@@ -20,7 +20,7 @@
 }
 
 .tiny {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 
 	& > svg {
 		height: 1.25rem;
diff --git a/app/components/BuildCard.module.css b/app/components/BuildCard.module.css
index e74956720..6d819f3b4 100644
--- a/app/components/BuildCard.module.css
+++ b/app/components/BuildCard.module.css
@@ -15,7 +15,7 @@
 .privateText {
 	display: flex;
 	justify-content: center;
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 	gap: var(--s-1);
 }
 
@@ -27,9 +27,9 @@
 .title {
 	overflow: hidden;
 	height: 2.5rem;
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	line-height: 1.25;
-	word-wrap: break-all;
+	word-wrap: break-word;
 }
 
 .topRow {
@@ -39,7 +39,7 @@
 
 .dateAuthorRow {
 	display: flex;
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	gap: var(--s-1);
 }
 
@@ -79,8 +79,8 @@
 .weaponText {
 	padding-left: var(--s-1);
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 }
 
 .weapons {
@@ -121,5 +121,5 @@
 }
 
 .smallText {
-	font-size: var(--fonts-xxs) !important;
+	font-size: var(--font-2xs) !important;
 }
diff --git a/app/components/Chart.module.css b/app/components/Chart.module.css
index 123084fa0..3b31452e0 100644
--- a/app/components/Chart.module.css
+++ b/app/components/Chart.module.css
@@ -10,8 +10,8 @@
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg);
 	padding: var(--s-1) var(--s-2);
-	font-weight: var(--semi-bold);
-	font-size: var(--fonts-sm);
+	font-weight: var(--weight-semi);
+	font-size: var(--font-sm);
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-1);
diff --git a/app/components/Divider.module.css b/app/components/Divider.module.css
index a61f1a97f..8633ebfbb 100644
--- a/app/components/Divider.module.css
+++ b/app/components/Divider.module.css
@@ -3,7 +3,7 @@
 	width: 100%;
 	align-items: center;
 	color: var(--color-text-accent);
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 	text-align: center;
 
 	&::before,
@@ -24,5 +24,5 @@
 }
 
 .smallText {
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 }
diff --git a/app/components/FormErrors.module.css b/app/components/FormErrors.module.css
index b3069c015..f299076b0 100644
--- a/app/components/FormErrors.module.css
+++ b/app/components/FormErrors.module.css
@@ -1,5 +1,5 @@
 .container {
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 
 	& > h4 {
 		color: var(--color-error);
diff --git a/app/components/FormMessage.module.css b/app/components/FormMessage.module.css
index c21016ea2..94d4d872a 100644
--- a/app/components/FormMessage.module.css
+++ b/app/components/FormMessage.module.css
@@ -1,14 +1,14 @@
 .error {
 	display: block;
 	color: var(--color-error);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	margin-block-start: var(--label-margin);
 }
 
 .info {
 	display: block;
 	color: var(--color-text-high);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	margin-block-start: var(--label-margin);
 }
 
diff --git a/app/components/InfoPopover.module.css b/app/components/InfoPopover.module.css
index 81bc2bcb7..4fcbea798 100644
--- a/app/components/InfoPopover.module.css
+++ b/app/components/InfoPopover.module.css
@@ -3,7 +3,7 @@
 	border-radius: 100%;
 	background-color: transparent;
 	color: var(--color-text);
-	font-size: var(--fonts-md);
+	font-size: var(--font-md);
 	padding: var(--s-0-5);
 	width: calc(var(--field-size) * 0.7);
 	height: calc(var(--field-size) * 0.7);
@@ -20,5 +20,5 @@
 .triggerTiny {
 	width: var(--field-size-xs);
 	height: var(--field-size-xs);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 }
diff --git a/app/components/Input.module.css b/app/components/Input.module.css
index 9b623c404..4fc32217b 100644
--- a/app/components/Input.module.css
+++ b/app/components/Input.module.css
@@ -1,8 +1,7 @@
 .container {
 	display: flex;
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	outline: none;
-	line-height: var(--field-line-height);
 	border: var(--border-style);
 	border-radius: var(--radius-field);
 	background-color: var(--color-bg);
@@ -53,8 +52,8 @@
 	border-radius: var(--radius-field) 0 0 var(--radius-field);
 	background-color: var(--color-bg-high);
 	color: var(--color-text-high);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	padding-inline: var(--s-2);
 	place-items: center;
 	white-space: nowrap;
diff --git a/app/components/Label.module.css b/app/components/Label.module.css
index 5f872551b..4080c2bef 100644
--- a/app/components/Label.module.css
+++ b/app/components/Label.module.css
@@ -11,7 +11,7 @@
 
 .value {
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	margin-block-start: -5px;
 }
 
diff --git a/app/components/MapPoolSelector.module.css b/app/components/MapPoolSelector.module.css
index c31d64e2e..4b5657b88 100644
--- a/app/components/MapPoolSelector.module.css
+++ b/app/components/MapPoolSelector.module.css
@@ -25,8 +25,8 @@
 	justify-content: space-between;
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	gap: var(--s-2);
 	padding-block: var(--s-1-5);
 	padding-inline: var(--s-3);
diff --git a/app/components/MobileNav.module.css b/app/components/MobileNav.module.css
index 2f219fa10..4e609db16 100644
--- a/app/components/MobileNav.module.css
+++ b/app/components/MobileNav.module.css
@@ -35,8 +35,8 @@
 	border: none;
 	border-radius: var(--radius-field);
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	cursor: pointer;
 	text-decoration: none;
 	transition: color 0.15s;
@@ -158,8 +158,8 @@
 }
 
 .panelTitle {
-	font-size: var(--fonts-md);
-	font-weight: var(--bold);
+	font-size: var(--font-md);
+	font-weight: var(--weight-bold);
 	color: var(--color-text);
 }
 
@@ -201,8 +201,8 @@
 }
 
 .menuTitle {
-	font-size: var(--fonts-md);
-	font-weight: var(--bold);
+	font-size: var(--font-md);
+	font-weight: var(--weight-bold);
 	color: var(--color-text);
 }
 
@@ -231,8 +231,8 @@
 }
 
 .streamsSectionHeader h3 {
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
 	margin: 0;
 }
 
@@ -265,7 +265,7 @@
 }
 
 .streamItemName {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text);
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -279,7 +279,7 @@
 }
 
 .streamItemSubtitle {
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	color: var(--color-text-high);
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -287,8 +287,8 @@
 }
 
 .streamItemBadge {
-	font-size: var(--fonts-xxxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	color: var(--color-text-inverse);
 	background-color: var(--color-text-accent);
 	padding: 0 var(--s-1);
@@ -312,8 +312,8 @@
 	gap: var(--s-1);
 	text-decoration: none;
 	color: var(--color-text);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	text-align: center;
 }
 
@@ -352,8 +352,8 @@
 }
 
 .youPanelUsername {
-	font-size: var(--fonts-md);
-	font-weight: var(--bold);
+	font-size: var(--font-md);
+	font-weight: var(--weight-bold);
 }
 
 .youPanelSettingsButton {
@@ -383,8 +383,8 @@
 
 .dayHeader {
 	padding: var(--s-2) var(--s-2) var(--s-1);
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	color: var(--color-text-high);
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
@@ -401,8 +401,8 @@
 }
 
 .weaponsSectionTitle {
-	font-size: var(--fonts-sm);
-	font-weight: var(--bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-bold);
 	color: var(--color-text);
 	margin: 0 0 var(--s-3);
 }
@@ -420,8 +420,8 @@
 }
 
 .weaponCategoryHeader {
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	color: var(--color-text);
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
diff --git a/app/components/Pagination.module.css b/app/components/Pagination.module.css
index 88e6be059..78a4fee64 100644
--- a/app/components/Pagination.module.css
+++ b/app/components/Pagination.module.css
@@ -28,8 +28,8 @@
 }
 
 .pageCount {
-	font-size: var(--fonts-sm);
-	font-weight: var(--bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-bold);
 	color: var(--color-accent);
 }
 
diff --git a/app/components/Section.module.css b/app/components/Section.module.css
index 90eba47d4..275c7432d 100644
--- a/app/components/Section.module.css
+++ b/app/components/Section.module.css
@@ -7,6 +7,6 @@
 
 	& > h2 {
 		color: var(--color-text-high);
-		font-size: var(--fonts-md);
+		font-size: var(--font-md);
 	}
 }
diff --git a/app/components/SideNav.module.css b/app/components/SideNav.module.css
index 2da0e4a05..b8cf44fd2 100644
--- a/app/components/SideNav.module.css
+++ b/app/components/SideNav.module.css
@@ -58,8 +58,8 @@
 	gap: var(--s-2);
 	color: var(--color-text);
 	text-decoration: none;
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	border-radius: var(--radius-field);
 	padding: var(--s-1);
 	margin-left: calc(-1 * var(--s-1));
@@ -156,8 +156,8 @@
 	text-decoration: none;
 	color: var(--color-text);
 	border-top: 1.5px solid var(--color-border);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	flex-shrink: 0;
 	border-radius: 0;
 }
@@ -209,8 +209,8 @@
 }
 
 .sideNavHeader h2 {
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
 }
 
 .sideNavHeaderClose {
@@ -229,7 +229,7 @@
 }
 
 .sideNavLink {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text);
 	text-decoration: none;
 	padding: var(--s-1) var(--s-2);
@@ -251,7 +251,7 @@
 	&[aria-current="page"] {
 		color: var(--color-text);
 		background-color: var(--color-bg-higher);
-		font-weight: 600;
+		font-weight: var(--weight-bold);
 	}
 }
 
@@ -289,7 +289,7 @@
 }
 
 .sideNavLinkSubtitle {
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	color: var(--color-text-high);
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -298,8 +298,8 @@
 
 .sideNavLinkBadge {
 	margin-left: auto;
-	font-size: var(--fonts-xxxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	color: var(--color-text-inverse);
 	background-color: var(--color-text-accent);
 	padding: 0 var(--s-1);
diff --git a/app/components/SubNav.module.css b/app/components/SubNav.module.css
index f2e1ddae9..2c39cbd69 100644
--- a/app/components/SubNav.module.css
+++ b/app/components/SubNav.module.css
@@ -30,13 +30,13 @@
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	cursor: pointer;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	text-align: center;
 	white-space: nowrap;
 }
 
 .linkSecondary {
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	padding: var(--s-0-5) var(--s-2);
 	background-color: var(--color-bg-high);
 }
diff --git a/app/components/Table.module.css b/app/components/Table.module.css
index 48f6e457d..840031117 100644
--- a/app/components/Table.module.css
+++ b/app/components/Table.module.css
@@ -8,12 +8,12 @@
 	width: 100%;
 	border-collapse: separate;
 	border-spacing: 0;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	text-align: left;
 	border-color: var(--color-border);
 
 	& > thead {
-		font-size: var(--fonts-xxs);
+		font-size: var(--font-2xs);
 	}
 
 	& tbody tr:hover {
diff --git a/app/components/elements/Button.module.css b/app/components/elements/Button.module.css
index 52c955a0b..a14e257a2 100644
--- a/app/components/elements/Button.module.css
+++ b/app/components/elements/Button.module.css
@@ -9,9 +9,8 @@
 	background: var(--color-text-accent);
 	color: var(--color-text-inverse);
 	cursor: pointer;
-	font-size: var(--fonts-sm);
-	font-weight: var(--bold);
-	line-height: var(--field-line-height);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-bold);
 	padding: 0 var(--field-padding);
 	user-select: none;
 	outline-color: var(--color-text-accent);
@@ -58,17 +57,17 @@
 }
 
 .small {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	height: var(--field-size-sm);
 }
 
 .miniscule {
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	height: var(--field-size-xs);
 }
 
 .big {
-	font-size: var(--fonts-md);
+	font-size: var(--font-md);
 	height: var(--field-size-lg);
 }
 
diff --git a/app/components/elements/Calendar.module.css b/app/components/elements/Calendar.module.css
index 420fe513a..66387bc77 100644
--- a/app/components/elements/Calendar.module.css
+++ b/app/components/elements/Calendar.module.css
@@ -16,7 +16,7 @@
 }
 
 .heading {
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 }
 
 .navButton {
@@ -47,7 +47,7 @@
 .cell {
 	display: grid;
 	place-items: center;
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	padding: var(--s-1-5);
 	width: 35px;
 	height: 35px;
diff --git a/app/components/elements/Dialog.module.css b/app/components/elements/Dialog.module.css
index e63f72430..4eb109f93 100644
--- a/app/components/elements/Dialog.module.css
+++ b/app/components/elements/Dialog.module.css
@@ -90,5 +90,5 @@
 }
 
 .heading {
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 }
diff --git a/app/components/elements/Label.module.css b/app/components/elements/Label.module.css
index 22afced17..64590faf0 100644
--- a/app/components/elements/Label.module.css
+++ b/app/components/elements/Label.module.css
@@ -1,6 +1,6 @@
 .label {
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
 	margin-block-end: var(--label-margin);
 	display: block;
 }
diff --git a/app/components/elements/Menu.module.css b/app/components/elements/Menu.module.css
index c314c1804..d3a899eba 100644
--- a/app/components/elements/Menu.module.css
+++ b/app/components/elements/Menu.module.css
@@ -3,8 +3,8 @@
 	background-color: var(--color-bg-high);
 	border: var(--border-style);
 	width: max-content;
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	padding: var(--s-2);
 }
 
@@ -30,8 +30,8 @@
 .item {
 	display: flex;
 	align-items: center;
-	font-weight: var(--bold);
-	font-size: var(--fonts-xs);
+	font-weight: var(--weight-bold);
+	font-size: var(--font-xs);
 	color: var(--color-text);
 	white-space: nowrap;
 	gap: var(--s-2);
@@ -56,7 +56,7 @@
 
 .itemSelected {
 	background-color: var(--color-text-accent);
-	font-weight: var(--extra-bold);
+	font-weight: var(--weight-extra);
 }
 
 .itemActive {
diff --git a/app/components/elements/Popover.module.css b/app/components/elements/Popover.module.css
index 240355b8b..ea2955557 100644
--- a/app/components/elements/Popover.module.css
+++ b/app/components/elements/Popover.module.css
@@ -3,8 +3,8 @@
 	padding: var(--s-2);
 	border: var(--border-style);
 	border-radius: var(--radius-box);
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	white-space: pre-wrap;
 	background-color: var(--color-bg);
 }
diff --git a/app/components/elements/Select.module.css b/app/components/elements/Select.module.css
index 92f020ba7..2dc6bfbeb 100644
--- a/app/components/elements/Select.module.css
+++ b/app/components/elements/Select.module.css
@@ -69,8 +69,8 @@
 }
 
 .item {
-	font-size: var(--fonts-xsm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	padding: var(--s-1-5);
 	border-radius: var(--radius-field);
 	white-space: nowrap;
@@ -89,7 +89,7 @@
 
 .itemSelected {
 	color: var(--color-text-accent);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 }
 
 .searchField {
@@ -109,8 +109,8 @@
 
 .searchInput {
 	all: unset;
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	letter-spacing: 0.5px;
 	flex: 1;
 }
@@ -139,8 +139,8 @@
 }
 
 .noResults {
-	font-size: var(--fonts-md);
-	font-weight: var(--bold);
+	font-size: var(--font-md);
+	font-weight: var(--weight-bold);
 	text-align: center;
 	padding-block: var(--s-8);
 	color: var(--color-text-high);
@@ -152,8 +152,8 @@
 }
 
 .label {
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
 	margin-block-end: var(--label-margin);
 	display: block;
 }
@@ -168,10 +168,10 @@
 	display: flex;
 	align-items: center;
 	gap: var(--s-2);
-	font-weight: bold;
+	font-weight: var(--weight-extra);
 	color: var(--color-text-high);
 	text-transform: uppercase;
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	padding-block-start: var(--s-2-5);
 	padding-block-end: var(--s-1);
 	padding-inline: var(--s-1-5);
diff --git a/app/components/elements/Switch.module.css b/app/components/elements/Switch.module.css
index ce732b6e0..b5672d218 100644
--- a/app/components/elements/Switch.module.css
+++ b/app/components/elements/Switch.module.css
@@ -8,8 +8,8 @@
 	gap: 0.571rem;
 	color: var(--text-color);
 	forced-color-adjust: none;
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
 	margin-block-end: 0;
 }
 
diff --git a/app/components/elements/Tabs.module.css b/app/components/elements/Tabs.module.css
index 47c6601d6..80529ed8e 100644
--- a/app/components/elements/Tabs.module.css
+++ b/app/components/elements/Tabs.module.css
@@ -50,7 +50,7 @@
 .tabButton {
 	background-color: transparent;
 	border: none;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	border-radius: 0;
 	border-bottom: 2px solid transparent;
 	color: var(--color-text-high);
diff --git a/app/components/elements/Toast.module.css b/app/components/elements/Toast.module.css
index 0519b1ae2..d4780d54a 100644
--- a/app/components/elements/Toast.module.css
+++ b/app/components/elements/Toast.module.css
@@ -14,8 +14,8 @@
 	padding: var(--s-1-5) var(--s-3);
 	align-items: center;
 	justify-content: center;
-	font-size: var(--fonts-xsm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	gap: var(--s-1);
 	border: 2px solid var(--color-info);
 	width: 250px;
@@ -47,7 +47,7 @@
 	display: flex;
 	text-transform: uppercase;
 	color: var(--color-info-high);
-	font-size: var(--fonts-xxsm);
+	font-size: var(--font-xs);
 	gap: var(--s-2);
 	align-items: center;
 	margin-block-end: var(--s-1-5);
diff --git a/app/components/elements/TournamentSearch.module.css b/app/components/elements/TournamentSearch.module.css
index 60896c276..d5ab713fa 100644
--- a/app/components/elements/TournamentSearch.module.css
+++ b/app/components/elements/TournamentSearch.module.css
@@ -1,6 +1,6 @@
 .item {
-	font-size: var(--fonts-xsm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	padding: var(--s-1-5);
 	border-radius: var(--radius-field);
 	height: 33px;
@@ -44,8 +44,8 @@ button:disabled .selectValue {
 }
 
 .placeholder {
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	color: var(--color-text-high);
 	text-align: center;
 	display: grid;
@@ -55,7 +55,7 @@ button:disabled .selectValue {
 }
 
 .itemAdditionalText {
-	font-size: var(--fonts-xxsm);
+	font-size: var(--font-xs);
 	color: var(--color-text-high);
 }
 
diff --git a/app/components/elements/UserSearch.module.css b/app/components/elements/UserSearch.module.css
index 37cb9e4d6..a915f153c 100644
--- a/app/components/elements/UserSearch.module.css
+++ b/app/components/elements/UserSearch.module.css
@@ -1,6 +1,6 @@
 .item {
-	font-size: var(--fonts-xsm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	padding: var(--s-1-5);
 	border-radius: var(--radius-field);
 	height: 33px;
@@ -36,8 +36,8 @@ button:disabled .selectValue {
 }
 
 .placeholder {
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	color: var(--color-text-high);
 	text-align: center;
 	display: grid;
@@ -47,7 +47,7 @@ button:disabled .selectValue {
 }
 
 .itemAdditionalText {
-	font-size: var(--fonts-xxsm);
+	font-size: var(--font-xs);
 	color: var(--color-text-high);
 }
 
diff --git a/app/components/layout/CommandPalette.module.css b/app/components/layout/CommandPalette.module.css
index f0624fef7..3a5d2dced 100644
--- a/app/components/layout/CommandPalette.module.css
+++ b/app/components/layout/CommandPalette.module.css
@@ -7,7 +7,7 @@
 	border-radius: var(--radius-field);
 	background-color: var(--color-bg);
 	color: var(--color-text-high);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	cursor: pointer;
 	height: var(--field-size-sm);
 	transition: background-color 0.15s;
@@ -36,7 +36,7 @@
 .searchKbd {
 	padding: 2px var(--s-1);
 	border-radius: var(--radius-field);
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	background-color: var(--color-bg-higher);
 	font-family: inherit;
 }
@@ -102,7 +102,7 @@
 	border-bottom: 1px solid var(--color-border);
 	border-radius: 0;
 	background: transparent;
-	font-size: var(--fonts-md);
+	font-size: var(--font-md);
 	color: var(--color-text);
 	height: auto;
 
@@ -127,7 +127,7 @@
 	padding: var(--s-2) var(--s-3);
 	border-radius: var(--radius-field);
 	cursor: pointer;
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	outline: none;
 }
 
@@ -160,7 +160,7 @@
 	gap: var(--s-1);
 	padding: var(--s-1) var(--s-2);
 	border-radius: var(--radius-field);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	cursor: pointer;
 	border: 1px solid var(--color-border);
 	background-color: var(--color-bg);
@@ -208,7 +208,7 @@
 }
 
 .resultSecondary {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text-high);
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -224,7 +224,7 @@
 	padding: var(--s-8);
 	text-align: center;
 	color: var(--color-text-high);
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 }
 
 @media screen and (max-width: 1000px) {
diff --git a/app/components/layout/Footer.module.css b/app/components/layout/Footer.module.css
index 9b3a2f170..3e945a861 100644
--- a/app/components/layout/Footer.module.css
+++ b/app/components/layout/Footer.module.css
@@ -11,7 +11,7 @@
 .linkList {
 	display: flex;
 	justify-content: space-evenly;
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 }
 
 .socials {
@@ -32,7 +32,7 @@
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg-higher);
 	cursor: pointer;
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 }
 
 .socialIcon {
@@ -49,15 +49,15 @@
 }
 
 .socialHeader > p {
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 }
 
 .patronTitle {
 	display: flex;
 	align-items: flex-end;
 	justify-content: center;
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	gap: var(--s-2);
 }
 
@@ -68,7 +68,7 @@
 	justify-content: center;
 	padding: 0;
 	margin: 0 auto;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	gap: var(--s-1);
 	list-style: none;
 	margin-block-start: var(--s-2);
@@ -86,7 +86,7 @@
 	display: flex;
 	flex-direction: column;
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	text-align: center;
 }
 
diff --git a/app/components/layout/NavDialog.module.css b/app/components/layout/NavDialog.module.css
index 34d81ae1c..c7e918272 100644
--- a/app/components/layout/NavDialog.module.css
+++ b/app/components/layout/NavDialog.module.css
@@ -40,7 +40,7 @@
 	flex-direction: column;
 	align-items: center;
 	color: var(--color-text);
-	font-weight: bold;
+	font-weight: var(--weight-extra);
 	gap: var(--s-1);
 	text-align: center;
 	width: 100px;
diff --git a/app/components/layout/NotificationPopover.module.css b/app/components/layout/NotificationPopover.module.css
index b083701bd..5826de85a 100644
--- a/app/components/layout/NotificationPopover.module.css
+++ b/app/components/layout/NotificationPopover.module.css
@@ -24,7 +24,7 @@
 .header {
 	display: flex;
 	align-items: center;
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	padding-inline: var(--s-1);
 	padding-bottom: var(--s-1);
 	gap: var(--s-1);
@@ -38,7 +38,7 @@
 .noNotifications {
 	display: grid;
 	place-items: center;
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 	color: var(--color-text-high);
 	margin-block-start: 65px;
 }
diff --git a/app/components/layout/TopNavMenus.module.css b/app/components/layout/TopNavMenus.module.css
index 9a7346470..8c11041f3 100644
--- a/app/components/layout/TopNavMenus.module.css
+++ b/app/components/layout/TopNavMenus.module.css
@@ -13,8 +13,8 @@
 	border-radius: var(--radius-field);
 	background: transparent;
 	color: var(--color-text);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	cursor: pointer;
 	white-space: nowrap;
 }
@@ -41,8 +41,8 @@
 	padding: var(--s-1-5) var(--s-2);
 	border-radius: var(--radius-field);
 	color: var(--color-text);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	text-decoration: none;
 	transition:
 		background-color 0.15s,
@@ -78,8 +78,8 @@
 }
 
 .weaponCategoryHeader {
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	color: var(--color-text);
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
diff --git a/app/components/layout/UserItem.module.css b/app/components/layout/UserItem.module.css
index c6b1ec70d..a974cda73 100644
--- a/app/components/layout/UserItem.module.css
+++ b/app/components/layout/UserItem.module.css
@@ -25,8 +25,8 @@
 	background-color: transparent;
 	color: inherit;
 	cursor: pointer;
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
 	gap: var(--s-2);
 	text-decoration: none;
 }
diff --git a/app/components/layout/index.module.css b/app/components/layout/index.module.css
index 9ac278205..2114fd3aa 100644
--- a/app/components/layout/index.module.css
+++ b/app/components/layout/index.module.css
@@ -11,7 +11,7 @@
 	gap: var(--s-3);
 	border-bottom: 1.5px solid var(--color-border);
 	background-color: var(--color-bg);
-	font-weight: bold;
+	font-weight: var(--weight-extra);
 	padding-inline: var(--s-4);
 	position: sticky;
 	top: 0;
@@ -33,8 +33,8 @@
 	height: 36px;
 	background-color: var(--color-accent);
 	border-radius: var(--radius-field);
-	font-size: var(--fonts-lg);
-	font-weight: var(--bold);
+	font-size: var(--font-lg);
+	font-weight: var(--weight-bold);
 	color: var(--color-text);
 	text-decoration: none;
 	flex-shrink: 0;
@@ -52,9 +52,9 @@
 }
 
 .separator {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text-high);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	opacity: 0.5;
 	animation: fadeIn 200ms ease-out 150ms both;
 }
@@ -86,8 +86,8 @@
 }
 
 .pageName {
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	color: var(--color-text);
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -103,7 +103,7 @@
 }
 
 .sideNavEmpty {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text-high);
 	padding: var(--s-1) var(--s-2);
 }
@@ -137,8 +137,8 @@
 		height: 36px;
 		background-color: var(--color-accent);
 		border-radius: var(--radius-field);
-		font-size: var(--fonts-lg);
-		font-weight: var(--bold);
+		font-size: var(--font-lg);
+		font-weight: var(--weight-bold);
 		color: var(--color-text);
 		text-decoration: none;
 		flex-shrink: 0;
diff --git a/app/features/art/components/ArtGrid.module.css b/app/features/art/components/ArtGrid.module.css
index 1ff56b56d..8a0578f54 100644
--- a/app/features/art/components/ArtGrid.module.css
+++ b/app/features/art/components/ArtGrid.module.css
@@ -11,7 +11,7 @@
 	background-color: #fff;
 	border-radius: var(--radius-box);
 	color: #000;
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	padding-inline: var(--s-1);
 	margin-block: var(--s-1) var(--s-0-5);
 }
@@ -21,7 +21,7 @@
 }
 
 .dialogDescription {
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	text-align: center;
 	color: #fff;
 }
diff --git a/app/features/articles/routes/a.module.css b/app/features/articles/routes/a.module.css
index 17cec69f6..899727371 100644
--- a/app/features/articles/routes/a.module.css
+++ b/app/features/articles/routes/a.module.css
@@ -8,5 +8,5 @@
 
 .title {
 	color: var(--color-text-accent);
-	font-size: var(--fonts-md);
+	font-size: var(--font-md);
 }
diff --git a/app/features/badges/badges.module.css b/app/features/badges/badges.module.css
index f54c0829f..946684aaa 100644
--- a/app/features/badges/badges.module.css
+++ b/app/features/badges/badges.module.css
@@ -22,19 +22,19 @@
 	display: flex;
 	justify-content: space-between;
 	color: var(--color-text-high);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	padding-inline: var(--s-1);
 }
 
 .explanation {
 	color: var(--color-text-accent);
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 	text-align: center;
 }
 
 .managers {
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	text-align: center;
 }
 
@@ -48,7 +48,7 @@
 	flex-wrap: wrap;
 	justify-content: center;
 	padding: 0;
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	gap: var(--s-1-5);
 }
 
@@ -62,7 +62,7 @@
 
 .count {
 	color: var(--color-accent-high);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 }
 
 .editUsersList > li {
@@ -76,8 +76,8 @@
 	display: flex;
 	flex-direction: column;
 	padding: 0;
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	gap: var(--s-2);
 	padding-block-end: var(--s-2-5);
 }
@@ -87,12 +87,12 @@
 }
 
 .editSmallHeader {
-	font-size: var(--fonts-md);
+	font-size: var(--font-md);
 }
 
 .editDifferences {
 	padding: 0;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	list-style: none;
 }
 
@@ -104,5 +104,5 @@
 .searchInput {
 	height: 40px !important;
 	margin: 0 auto;
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 }
diff --git a/app/features/badges/components/BadgeDisplay.module.css b/app/features/badges/components/BadgeDisplay.module.css
index 01f899920..4a8f2de3c 100644
--- a/app/features/badges/components/BadgeDisplay.module.css
+++ b/app/features/badges/components/BadgeDisplay.module.css
@@ -21,7 +21,7 @@
 
 .badgeExplanation {
 	color: var(--color-text-high);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -41,8 +41,8 @@
 	margin-right: auto;
 	margin-left: auto;
 	color: var(--color-accent-high);
-	font-size: var(--fonts-xxxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 }
 
 .pagination {
@@ -63,7 +63,7 @@
 	height: 24px;
 	width: 24px;
 	border: var(--border-style);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text-high);
 }
 
diff --git a/app/features/build-analyzer/routes/analyzer.module.css b/app/features/build-analyzer/routes/analyzer.module.css
index d50180d34..b44289127 100644
--- a/app/features/build-analyzer/routes/analyzer.module.css
+++ b/app/features/build-analyzer/routes/analyzer.module.css
@@ -18,7 +18,7 @@
 	display: grid;
 	grid-template-columns: 1fr max-content max-content max-content 1fr;
 	gap: var(--s-2);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	align-items: center;
 }
 
@@ -47,15 +47,15 @@
 }
 
 .ldeIntensitySelect {
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 }
 
 .apSummary {
 	width: 100%;
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	padding-block: var(--s-1);
 	padding-inline: var(--s-2);
 }
@@ -66,8 +66,8 @@
 	align-items: center;
 	border-radius: var(--radius-box);
 	background-color: var(--color-accent-low);
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	gap: var(--s-2);
 	padding-block: var(--s-1);
 	padding-inline: var(--s-2);
@@ -75,15 +75,15 @@
 
 .apText {
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 }
 
 .summary {
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
-	font-size: var(--fonts-md);
-	font-weight: var(--bold);
+	font-size: var(--font-md);
+	font-weight: var(--weight-bold);
 	padding-block: var(--s-2);
 	padding-inline: var(--s-3);
 	position: relative;
@@ -95,7 +95,7 @@
 
 .weaponInfoBadge {
 	display: inline-flex;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	gap: var(--s-2);
 	align-items: center;
 	background-color: var(--color-bg);
@@ -150,7 +150,7 @@
 }
 
 .statCardTitle {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	line-height: 1.35;
 	text-align: center;
 	word-break: break-word;
@@ -170,8 +170,8 @@
 	border: none;
 	background-color: transparent;
 	color: var(--color-accent);
-	font-size: var(--fonts-md);
-	font-weight: var(--bold);
+	font-size: var(--font-md);
+	font-weight: var(--weight-bold);
 	outline: initial;
 }
 
@@ -191,15 +191,15 @@
 
 .statCardValueTitle {
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxs);
-	font-weight: 400;
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-body);
 	letter-spacing: 0.5px;
 	text-transform: uppercase;
 }
 
 .statCardValueNumber {
-	font-size: var(--fonts-md);
-	font-weight: var(--bold);
+	font-size: var(--font-md);
+	font-weight: var(--weight-bold);
 }
 
 .tableContainer {
@@ -213,19 +213,19 @@
 
 .shotsToSplat {
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxxs);
+	font-size: var(--font-2xs);
 	margin-inline-start: var(--s-4);
 }
 
 .consumptionTableExplanation {
 	margin-top: var(--s-2);
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 }
 
 .statCategoryExplanation {
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	margin-block-start: var(--s-3);
 }
 
@@ -237,8 +237,8 @@
 	border-radius: var(--radius-box);
 	background-color: var(--color-accent-low);
 	color: var(--color-accent-high);
-	font-size: var(--fonts-xxxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	padding-block: var(--s-0-5);
 	padding-inline: var(--s-2);
 }
@@ -289,19 +289,19 @@
 .inkGridAp {
 	display: grid;
 	place-items: center;
-	font-weight: var(--semi-bold);
-	font-size: var(--fonts-xs);
+	font-weight: var(--weight-semi);
+	font-size: var(--font-xs);
 }
 
 .inkGridApFocused {
 	color: var(--color-accent);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	text-decoration: underline;
 }
 
 .inkGridCell {
 	width: 25px;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	display: grid;
 	place-items: center;
 	background-color: var(--cell-color);
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 f3732a5ea..e85f93f6d 100644
--- a/app/features/build-stats/routes/builds.$slug.stats.module.css
+++ b/app/features/build-stats/routes/builds.$slug.stats.module.css
@@ -5,8 +5,8 @@
 }
 
 .bars {
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	display: grid;
 	align-items: center;
 	grid-template-columns: max-content 65px 1fr;
diff --git a/app/features/builds/routes/builds.module.css b/app/features/builds/routes/builds.module.css
index 15a14083e..8ea428620 100644
--- a/app/features/builds/routes/builds.module.css
+++ b/app/features/builds/routes/builds.module.css
@@ -12,8 +12,8 @@
 	padding: var(--s-3);
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
-	font-size: var(--fonts-sm);
-	font-weight: 600;
+	font-size: var(--font-sm);
+	font-weight: var(--weight-bold);
 	gap: var(--s-4);
 }
 
@@ -33,8 +33,8 @@
 	display: flex;
 	align-items: center;
 	color: var(--color-text);
-	font-size: var(--fonts-xs);
-	font-weight: var(--body);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-body);
 	gap: var(--s-1);
 }
 
diff --git a/app/features/calendar/calendar-event.module.css b/app/features/calendar/calendar-event.module.css
index fe64075b3..2ebfbc831 100644
--- a/app/features/calendar/calendar-event.module.css
+++ b/app/features/calendar/calendar-event.module.css
@@ -5,7 +5,7 @@
 .times {
 	display: grid;
 	column-gap: var(--s-1-5);
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 	grid-template-columns: max-content 1fr;
 }
 
@@ -27,7 +27,7 @@
 	width: max-content;
 	align-items: center;
 	margin: 0 auto;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	gap: var(--s-1-5);
 }
 
@@ -35,7 +35,7 @@
 	display: flex;
 	align-items: center;
 	color: var(--color-text-high);
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 	gap: var(--s-1);
 }
 
@@ -56,5 +56,5 @@
 
 .resultsParticipantCount {
 	color: var(--color-text-high);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 }
diff --git a/app/features/calendar/calendar-new.module.css b/app/features/calendar/calendar-new.module.css
index 25cb0227a..b99606365 100644
--- a/app/features/calendar/calendar-new.module.css
+++ b/app/features/calendar/calendar-new.module.css
@@ -11,8 +11,8 @@
 	padding: var(--s-2);
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg-badge);
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 }
 
 .dayLabel {
diff --git a/app/features/calendar/components/Tags.module.css b/app/features/calendar/components/Tags.module.css
index 482571b1f..3404432c1 100644
--- a/app/features/calendar/components/Tags.module.css
+++ b/app/features/calendar/components/Tags.module.css
@@ -3,14 +3,14 @@
 	max-width: var(--tags-max-width, 18rem);
 	flex-wrap: wrap;
 	padding: 0;
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	gap: var(--s-1);
 	list-style: none;
 }
 
 .small {
-	font-size: var(--fonts-xxxs);
+	font-size: var(--font-2xs);
 
 	& > li {
 		padding: 0 var(--s-1);
diff --git a/app/features/calendar/components/TagsFormField.module.css b/app/features/calendar/components/TagsFormField.module.css
index 9395240a3..cfbb9bf06 100644
--- a/app/features/calendar/components/TagsFormField.module.css
+++ b/app/features/calendar/components/TagsFormField.module.css
@@ -12,8 +12,8 @@
 	cursor: pointer;
 	border: 2px solid var(--tag-color);
 	border-radius: var(--radius-field);
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	display: grid;
 	place-items: center;
 	min-width: max-content;
diff --git a/app/features/calendar/components/TournamentCard.module.css b/app/features/calendar/components/TournamentCard.module.css
index 23e50c8f1..ad1d5ac4e 100644
--- a/app/features/calendar/components/TournamentCard.module.css
+++ b/app/features/calendar/components/TournamentCard.module.css
@@ -41,7 +41,7 @@
 .org {
 	display: flex;
 	gap: var(--s-1);
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	color: var(--color-text-high);
 }
 
@@ -53,16 +53,16 @@
 }
 
 .time {
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	color: var(--color-text-high);
 	display: block;
 }
 
 .name {
 	text-align: center;
-	font-weight: var(--semi-bold);
-	font-size: var(--fonts-sm);
+	font-weight: var(--weight-semi);
+	font-size: var(--font-sm);
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	max-width: 225px;
@@ -70,8 +70,8 @@
 }
 
 .teamCount {
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	background-color: var(--color-bg-higher);
 	border-radius: var(--radius-selector);
 	width: max-content;
@@ -114,8 +114,8 @@
 }
 
 .pill {
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	border-radius: var(--radius-selector);
 	padding: var(--s-0-5) var(--s-1-5);
 	display: grid;
diff --git a/app/features/calendar/routes/calendar.module.css b/app/features/calendar/routes/calendar.module.css
index 0c0007ecc..137e2a8c1 100644
--- a/app/features/calendar/routes/calendar.module.css
+++ b/app/features/calendar/routes/calendar.module.css
@@ -19,10 +19,10 @@
 	display: flex;
 	align-items: center;
 	gap: var(--s-2);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	border-radius: var(--radius-field);
 	padding: var(--s-1) var(--s-2);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	flex: 1 1 0;
 }
 
@@ -67,8 +67,8 @@
 	background-color: var(--color-bg-high);
 	padding: var(--s-2);
 	text-align: center;
-	font-size: var(--fonts-md);
-	font-weight: var(--bold);
+	font-size: var(--font-md);
+	font-weight: var(--weight-bold);
 }
 
 .dayHeaderToday {
@@ -77,8 +77,8 @@
 }
 
 .dayHeaderWeekday {
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	color: var(--color-text-high);
 }
 
@@ -90,8 +90,8 @@
 }
 
 .clockHeader {
-	font-weight: var(--semi-bold);
-	font-size: var(--fonts-sm);
+	font-weight: var(--weight-semi);
+	font-size: var(--font-sm);
 }
 
 .clockHeaderDivider {
diff --git a/app/features/chat/components/Chat.module.css b/app/features/chat/components/Chat.module.css
index 287d9f1e0..90ef12d52 100644
--- a/app/features/chat/components/Chat.module.css
+++ b/app/features/chat/components/Chat.module.css
@@ -43,8 +43,8 @@
 	transform: translateX(-50%);
 	background-color: var(--color-text-accent);
 	color: var(--color-text-inverse);
-	font-size: var(--fonts-xxxxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	padding: 1px 4px;
 	border-radius: var(--radius-full);
 	white-space: nowrap;
@@ -53,16 +53,16 @@
 .pronounsTag {
 	background-color: var(--color-bg-higher);
 	color: var(--color-text-accent);
-	font-size: var(--fonts-xxxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	padding: 1px 5px;
 	border-radius: var(--radius-full);
 	white-space: nowrap;
 }
 
 .messageUser {
-	font-weight: var(--semi-bold);
-	font-size: var(--fonts-sm);
+	font-weight: var(--weight-semi);
+	font-size: var(--font-sm);
 	color: var(--chat-user-color);
 	max-width: 110px;
 	overflow: hidden;
@@ -71,7 +71,7 @@
 }
 
 .messageTime {
-	font-size: var(--fonts-xxxs);
+	font-size: var(--font-2xs);
 	color: var(--color-text-high);
 }
 
@@ -82,7 +82,7 @@
 }
 
 .messageContents {
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	word-break: break-word;
 }
 
@@ -98,14 +98,14 @@
 	border-radius: var(--radius-box) var(--radius-box) 0 0;
 	padding: var(--s-1) var(--s-1);
 	border-color: var(--color-bg-high);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	padding-block: var(--s-1);
 	padding-inline: var(--s-2);
 	display: flex;
 	width: auto;
 	align-items: center;
 	justify-content: center;
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	flex: 1 1 0px;
 }
 
@@ -116,7 +116,7 @@
 
 .roomButtonUnseen {
 	color: var(--color-accent);
-	text-shadow: var(--fonts-xxxs);
+	text-shadow: var(--font-2xs);
 	margin-inline-start: var(--s-1);
 	width: 25px;
 	text-align: left;
@@ -131,8 +131,8 @@
 
 .unseenMessages {
 	position: absolute;
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	border-radius: var(--radius-field);
 	background-color: var(--color-bg-higher);
 	border: none;
diff --git a/app/features/components-showcase/components-showcase.module.css b/app/features/components-showcase/components-showcase.module.css
index 8d967ead1..6640ddba7 100644
--- a/app/features/components-showcase/components-showcase.module.css
+++ b/app/features/components-showcase/components-showcase.module.css
@@ -1,5 +1,5 @@
 .sectionTitle {
-	font-size: var(--fonts-xl);
+	font-size: var(--font-xl);
 	border-bottom: 2px solid var(--color-bg-high);
 	margin-bottom: var(--s-4);
 }
@@ -17,7 +17,7 @@
 
 .componentLabel {
 	color: var(--color-text-high);
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 }
 
 .componentContent {
diff --git a/app/features/components-showcase/routes/components.tsx b/app/features/components-showcase/routes/components.tsx
index 7ee8c491f..16d742546 100644
--- a/app/features/components-showcase/routes/components.tsx
+++ b/app/features/components-showcase/routes/components.tsx
@@ -2053,7 +2053,7 @@ function FormFieldsSection({ id }: { id: string }) {
 	return (
 		<Section>
 			<SectionTitle id={id}>Form Fields</SectionTitle>
-			<p className="mb-4" style={{ fontSize: "var(--fonts-sm)", opacity: 0.8 }}>
+			<p className="mb-4" style={{ fontSize: "var(--font-sm)", opacity: 0.8 }}>
 				Schema-based form fields using SendouForm. Each field type is defined
 				with Zod schemas that generate both UI and validation.
 			</p>
diff --git a/app/features/front-page/routes/index.module.css b/app/features/front-page/routes/index.module.css
index 3049a3f6f..8d5d346a7 100644
--- a/app/features/front-page/routes/index.module.css
+++ b/app/features/front-page/routes/index.module.css
@@ -20,8 +20,8 @@
 .frontPageSideNavItem {
 	display: flex;
 	color: var(--color-text);
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
 	gap: var(--s-1-5);
 	align-items: center;
 }
@@ -32,8 +32,8 @@
 
 .frontPageSideNavLogOut {
 	display: flex;
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
 	gap: var(--s-1-5);
 	align-items: center;
 	color: var(--color-text-high) !important;
@@ -81,8 +81,8 @@
 	gap: var(--s-1-5);
 	justify-content: center;
 	align-items: center;
-	font-weight: var(--bold);
-	font-size: var(--fonts-xs);
+	font-weight: var(--weight-bold);
+	font-size: var(--font-xs);
 	border-radius: 10px;
 	color: var(--color-text-high);
 	padding: 0 var(--s-1);
@@ -132,13 +132,13 @@
 }
 
 .seasonBannerHeader {
-	font-size: var(--fonts-xl);
-	font-weight: var(--bold);
+	font-size: var(--font-xl);
+	font-weight: var(--weight-bold);
 }
 
 .seasonBannerDates {
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 }
 
 .seasonBannerImg {
@@ -153,7 +153,7 @@
 	border-radius: var(--radius-box);
 	width: max-content;
 	padding: 0 var(--field-padding);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text-inverse);
 	display: flex;
 	gap: var(--s-2);
@@ -196,8 +196,8 @@
 	display: grid;
 	place-items: center;
 	padding: var(--s-2);
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	text-align: center;
 	color: var(--color-text);
 	transition: background-color 0.2s ease-out;
@@ -223,7 +223,7 @@
 }
 
 .resultHighlightsTitle {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 }
 
 .resultHighlightsTitleTournaments {
@@ -243,8 +243,8 @@
 }
 
 .leaderboardName {
-	font-size: var(--fonts-sm);
-	font-weight: var(--bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-bold);
 	white-space: nowrap;
 	max-width: 140px;
 	text-overflow: ellipsis;
@@ -252,7 +252,7 @@
 }
 
 .leaderboardViewAll {
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	color: var(--color-text);
 	background-color: var(--color-bg-higher);
 	border-radius: var(--radius-box);
@@ -275,7 +275,7 @@
 }
 
 .sideNavEmpty {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text-high);
 	padding: var(--s-1) var(--s-2);
 }
@@ -294,8 +294,8 @@
 }
 
 .feedTitle {
-	font-size: var(--fonts-xl);
-	font-weight: var(--extra-bold);
+	font-size: var(--font-xl);
+	font-weight: var(--weight-extra);
 	margin: 0;
 }
 
@@ -310,8 +310,8 @@
 	border: none;
 	border-radius: var(--radius-box);
 	padding: var(--s-1-5) var(--s-3);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	color: var(--color-text);
 	cursor: pointer;
 	transition: background-color 0.15s ease;
@@ -354,18 +354,18 @@
 }
 
 .postUsername {
-	font-weight: var(--bold);
-	font-size: var(--fonts-sm);
+	font-weight: var(--weight-bold);
+	font-size: var(--font-sm);
 }
 
 .postTime {
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	color: var(--color-text-high);
 }
 
 .postBadge {
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	padding: var(--s-1) var(--s-2);
 	border-radius: var(--radius-field);
 	text-transform: uppercase;
@@ -449,8 +449,8 @@
 }
 
 .matchResultText {
-	font-weight: var(--extra-bold);
-	font-size: var(--fonts-md);
+	font-weight: var(--weight-extra);
+	font-size: var(--font-md);
 }
 
 .matchWin .matchResultText {
@@ -462,8 +462,8 @@
 }
 
 .matchScore {
-	font-weight: var(--bold);
-	font-size: var(--fonts-sm);
+	font-weight: var(--weight-bold);
+	font-size: var(--font-sm);
 }
 
 .matchDetails {
@@ -494,15 +494,15 @@
 }
 
 .matchStageName {
-	font-weight: var(--bold);
-	font-size: var(--fonts-sm);
+	font-weight: var(--weight-bold);
+	font-size: var(--font-sm);
 }
 
 .matchModeRow {
 	display: flex;
 	align-items: center;
 	gap: var(--s-1);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text-high);
 }
 
@@ -514,8 +514,8 @@
 }
 
 .powerChange {
-	font-weight: var(--extra-bold);
-	font-size: var(--fonts-lg);
+	font-weight: var(--weight-extra);
+	font-size: var(--font-lg);
 }
 
 .powerUp {
@@ -527,7 +527,7 @@
 }
 
 .newPower {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text-high);
 }
 
@@ -544,8 +544,8 @@
 }
 
 .teamLabel {
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	color: var(--color-text-high);
 	text-transform: uppercase;
 }
@@ -569,7 +569,7 @@
 }
 
 .placementEmoji {
-	font-size: var(--fonts-xl);
+	font-size: var(--font-xl);
 }
 
 .placementInfo {
@@ -579,12 +579,12 @@
 }
 
 .placementText {
-	font-weight: var(--extra-bold);
-	font-size: var(--fonts-lg);
+	font-weight: var(--weight-extra);
+	font-size: var(--font-lg);
 }
 
 .tournamentName {
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	color: var(--color-text-high);
 }
 
@@ -598,8 +598,8 @@
 }
 
 .teamName {
-	font-weight: var(--bold);
-	font-size: var(--fonts-sm);
+	font-weight: var(--weight-bold);
+	font-size: var(--font-sm);
 }
 
 .placementTeammates {
@@ -621,15 +621,14 @@
 }
 
 .weaponName {
-	font-weight: var(--bold);
-	font-size: var(--fonts-md);
+	font-weight: var(--weight-bold);
+	font-size: var(--font-md);
 }
 
 .buildDescription {
 	margin: 0;
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	color: var(--color-text);
-	line-height: 1.5;
 }
 
 .buildAbilities {
@@ -642,13 +641,13 @@
 	background-color: var(--color-bg-higher);
 	padding: var(--s-1) var(--s-2);
 	border-radius: var(--radius-field);
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 }
 
 .viewBuildLink {
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
 	color: var(--color-text-accent);
 }
 
@@ -666,13 +665,13 @@
 }
 
 .teamFormedName {
-	font-weight: var(--extra-bold);
-	font-size: var(--fonts-lg);
+	font-weight: var(--weight-extra);
+	font-size: var(--font-lg);
 }
 
 .teamFormedLabel {
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	background-color: var(--color-success-low);
 	color: var(--color-success);
 	padding: var(--s-0-5) var(--s-2);
@@ -702,12 +701,12 @@
 }
 
 .memberName {
-	font-weight: var(--semi-bold);
-	font-size: var(--fonts-xs);
+	font-weight: var(--weight-semi);
+	font-size: var(--font-xs);
 }
 
 .memberRole {
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	color: var(--color-text-high);
 }
 
@@ -732,8 +731,8 @@
 
 .rankLabel,
 .powerLabel {
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	color: var(--color-text-high);
 	text-transform: uppercase;
 }
@@ -745,7 +744,7 @@
 }
 
 .oldRank {
-	font-size: var(--fonts-md);
+	font-size: var(--font-md);
 	color: var(--color-text-high);
 	text-decoration: line-through;
 }
@@ -755,15 +754,15 @@
 }
 
 .newRank {
-	font-weight: var(--extra-bold);
-	font-size: var(--fonts-lg);
+	font-weight: var(--weight-extra);
+	font-size: var(--font-lg);
 	color: var(--color-success);
 }
 
 .rankDiff {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-success);
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 }
 
 .powerStat {
@@ -773,12 +772,12 @@
 }
 
 .powerValue {
-	font-weight: var(--extra-bold);
-	font-size: var(--fonts-lg);
+	font-weight: var(--weight-extra);
+	font-size: var(--font-lg);
 }
 
 .seasonInfo {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text-high);
 }
 
@@ -802,12 +801,12 @@
 }
 
 .vodTournament {
-	font-weight: var(--bold);
-	font-size: var(--fonts-sm);
+	font-weight: var(--weight-bold);
+	font-size: var(--font-sm);
 }
 
 .vodMatch {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text-high);
 }
 
@@ -817,8 +816,8 @@
 	border: none;
 	border-radius: var(--radius-field);
 	padding: var(--s-2) var(--s-4);
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
 	cursor: pointer;
 	width: fit-content;
 	transition: opacity 0.15s ease;
@@ -837,8 +836,7 @@
 
 .lfgText {
 	margin: 0;
-	font-size: var(--fonts-sm);
-	line-height: 1.5;
+	font-size: var(--font-sm);
 }
 
 .lfgWeapons {
@@ -849,12 +847,12 @@
 .lfgAvailability {
 	display: flex;
 	gap: var(--s-2);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text-high);
 }
 
 .availLabel {
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 }
 
 /* Tournament Signup Post */
@@ -869,11 +867,11 @@
 	align-items: center;
 	gap: var(--s-2);
 	flex-wrap: wrap;
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 }
 
 .signupTeam {
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 }
 
 .signupAction {
@@ -881,7 +879,7 @@
 }
 
 .signupTournament {
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	color: var(--color-text-accent);
 }
 
@@ -889,7 +887,7 @@
 	display: flex;
 	align-items: center;
 	gap: var(--s-2);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text-high);
 }
 
@@ -907,8 +905,7 @@
 
 .artDescription {
 	margin: 0;
-	font-size: var(--fonts-sm);
-	line-height: 1.5;
+	font-size: var(--font-sm);
 }
 
 .artImages {
@@ -941,16 +938,16 @@
 }
 
 .replayCodeLabel {
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	color: var(--color-text-high);
 	text-transform: uppercase;
 }
 
 .replayCodeValue {
 	font-family: monospace;
-	font-size: var(--fonts-lg);
-	font-weight: var(--extra-bold);
+	font-size: var(--font-lg);
+	font-weight: var(--weight-extra);
 	letter-spacing: 0.1em;
 }
 
@@ -982,15 +979,15 @@
 }
 
 .replayStageName {
-	font-weight: var(--bold);
-	font-size: var(--fonts-sm);
+	font-weight: var(--weight-bold);
+	font-size: var(--font-sm);
 }
 
 .replayModeRow {
 	display: flex;
 	align-items: center;
 	gap: var(--s-1);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text-high);
 }
 
@@ -1001,6 +998,6 @@
 }
 
 .replayWeaponName {
-	font-weight: var(--semi-bold);
-	font-size: var(--fonts-sm);
+	font-weight: var(--weight-semi);
+	font-size: var(--font-sm);
 }
diff --git a/app/features/info/routes/faq.module.css b/app/features/info/routes/faq.module.css
index 6c4c6afff..033fed11d 100644
--- a/app/features/info/routes/faq.module.css
+++ b/app/features/info/routes/faq.module.css
@@ -2,8 +2,8 @@
 	padding: var(--s-3);
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
-	font-size: var(--fonts-lg);
-	font-weight: var(--bold);
+	font-size: var(--font-lg);
+	font-weight: var(--weight-bold);
 }
 
 .details {
diff --git a/app/features/info/routes/support.module.css b/app/features/info/routes/support.module.css
index f18ed526c..9b4eaf54b 100644
--- a/app/features/info/routes/support.module.css
+++ b/app/features/info/routes/support.module.css
@@ -2,7 +2,7 @@
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr 1fr;
 	place-items: center;
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	row-gap: var(--s-2);
 }
 
@@ -18,7 +18,7 @@
 	border: none;
 	background-color: transparent;
 	color: var(--color-text-accent);
-	font-size: var(--fonts-md);
-	font-weight: var(--bold);
+	font-size: var(--font-md);
+	font-weight: var(--weight-bold);
 	outline: initial;
 }
diff --git a/app/features/lfg/components/LFGPost.module.css b/app/features/lfg/components/LFGPost.module.css
index 22468a543..38e22b889 100644
--- a/app/features/lfg/components/LFGPost.module.css
+++ b/app/features/lfg/components/LFGPost.module.css
@@ -37,8 +37,8 @@
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	color: var(--color-text);
 }
 
@@ -83,8 +83,8 @@
 }
 
 .pill {
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	border-radius: var(--radius-selector);
 	background-color: var(--color-bg-higher);
 	padding: var(--s-0-5) var(--s-2);
@@ -100,8 +100,8 @@
 }
 
 .editButton {
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	border-radius: var(--radius-selector);
 	background-color: var(--color-bg-higher);
 	padding: var(--s-0-5) var(--s-2);
diff --git a/app/features/map-list-generator/routes/maps.module.css b/app/features/map-list-generator/routes/maps.module.css
index 9a92e2d03..c8f90703b 100644
--- a/app/features/map-list-generator/routes/maps.module.css
+++ b/app/features/map-list-generator/routes/maps.module.css
@@ -7,7 +7,7 @@
 }
 
 .tournamentMapListLink {
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	text-align: center;
 }
 
@@ -29,13 +29,13 @@
 }
 
 .mapList {
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	margin-block-start: var(--s-4);
 }
 
 .modeAbbr {
 	color: var(--color-text-high);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	text-decoration: none;
 }
diff --git a/app/features/map-planner/components/Planner.module.css b/app/features/map-planner/components/Planner.module.css
index 7b73826ac..dc08ac519 100644
--- a/app/features/map-planner/components/Planner.module.css
+++ b/app/features/map-planner/components/Planner.module.css
@@ -37,7 +37,7 @@
 .outlineToggleButton {
 	background-color: var(--color-bg-high);
 	color: var(--color-text);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	padding: var(--s-2);
 	width: 140px;
 }
@@ -67,8 +67,8 @@
 
 .weaponsSummary {
 	background-color: var(--color-bg-high);
-	font-size: var(--fonts-sm);
-	font-weight: var(--bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-bold);
 	padding: var(--s-2);
 	display: flex;
 	align-items: center;
diff --git a/app/features/notifications/components/NotificationList.module.css b/app/features/notifications/components/NotificationList.module.css
index cc8c807df..b79ec3b85 100644
--- a/app/features/notifications/components/NotificationList.module.css
+++ b/app/features/notifications/components/NotificationList.module.css
@@ -5,7 +5,6 @@
 }
 
 .item {
-	line-height: 1.4;
 	padding: var(--s-1) var(--s-2-5);
 	display: grid;
 	grid-template-areas: "image header" "image timestamp";
@@ -54,13 +53,13 @@
 
 .itemHeader {
 	grid-area: header;
-	font-size: var(--fonts-xsm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 }
 
 .timestamp {
 	grid-area: timestamp;
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxs);
-	font-weight: var(--body);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-body);
 }
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 10a4614f7..a300156a7 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
@@ -40,8 +40,8 @@
 }
 
 .hp {
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 }
 
 .tableHeader {
@@ -50,8 +50,8 @@
 	border-radius: var(--radius-box);
 	display: flex;
 	flex-direction: column;
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	gap: var(--s-1);
 	height: 100%;
 	left: 0;
@@ -71,7 +71,7 @@
 
 .distance {
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	margin-block-start: var(--s-0-5);
 }
 
@@ -99,8 +99,8 @@
 	padding: var(--s-2);
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	place-items: center;
 }
 
@@ -113,14 +113,14 @@
 
 .abbr {
 	color: var(--color-text-high);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	text-decoration: none;
 }
 
 .multiplier {
 	color: var(--color-text-accent);
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	letter-spacing: 0.5px;
 	margin-block-start: var(--s-2);
 }
@@ -136,8 +136,8 @@
 	border-radius: var(--radius-box);
 	background-color: var(--color-accent-low);
 	color: var(--color-accent-high);
-	font-size: var(--fonts-xxxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	padding-block: var(--s-0-5);
 	padding-inline: var(--s-2);
 }
diff --git a/app/features/plus-suggestions/plus.module.css b/app/features/plus-suggestions/plus.module.css
index e788d2185..74f30411d 100644
--- a/app/features/plus-suggestions/plus.module.css
+++ b/app/features/plus-suggestions/plus.module.css
@@ -5,7 +5,7 @@
 
 .suggestedInfoText {
 	color: var(--color-text-high);
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 }
 
 .topContainer {
@@ -33,13 +33,13 @@
 }
 
 .radioLabel {
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	margin-block-end: 0;
 }
 
 .usersCount {
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 }
 
 .suggestedUserInfo {
@@ -59,13 +59,13 @@
 
 .viewCommentsAction {
 	color: var(--color-text-high);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 }
 
 .commentTime {
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 }
 
 .deleteButton {
@@ -115,8 +115,8 @@
 	border-radius: var(--radius-box);
 	background-color: var(--color-success-high);
 	color: var(--color-text);
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	gap: var(--s-2);
 	line-height: 0.75;
 	margin-inline: auto;
@@ -130,6 +130,6 @@
 }
 
 .votingBioHeader {
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 	padding-block-end: var(--s-2);
 }
diff --git a/app/features/plus-voting/plus-voting-results.module.css b/app/features/plus-voting/plus-voting-results.module.css
index d7ee7a32b..301695761 100644
--- a/app/features/plus-voting/plus-voting-results.module.css
+++ b/app/features/plus-voting/plus-voting-results.module.css
@@ -3,8 +3,8 @@
 	border-radius: var(--radius-box);
 	margin: 0 auto;
 	background-color: var(--color-bg-high);
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	list-style-type: none;
 	padding-inline: var(--s-4);
 	text-align: center;
@@ -48,15 +48,15 @@
 
 .passedHeader {
 	color: var(--color-text-high);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 }
 
 .userStatus {
 	border-radius: var(--radius-box);
 	background-color: var(--color-accent);
 	color: var(--color-text-inverse);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	padding-inline: var(--s-1-5);
 }
 
@@ -69,7 +69,7 @@
 	border-radius: 50%;
 	background-color: var(--color-bg);
 	color: var(--color-text);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	margin-inline-end: var(--s-1);
 	padding-inline: var(--s-1);
 }
diff --git a/app/features/scrims/components/ScrimCard.module.css b/app/features/scrims/components/ScrimCard.module.css
index 847d4edd7..c58436f29 100644
--- a/app/features/scrims/components/ScrimCard.module.css
+++ b/app/features/scrims/components/ScrimCard.module.css
@@ -22,7 +22,7 @@
 .teamName {
 	flex: 1;
 	font-size: var(--text-lg);
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 	margin: 0;
 	display: flex;
 	flex-direction: column;
@@ -31,8 +31,8 @@
 }
 
 .pickupLabel {
-	font-size: var(--fonts-xxxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	text-transform: uppercase;
 	color: var(--color-text-high);
 }
@@ -66,23 +66,22 @@
 .infoLabel {
 	text-transform: uppercase;
 	color: var(--color-text-high);
-	font-weight: var(--bold);
-	font-size: var(--fonts-xxs);
+	font-weight: var(--weight-bold);
+	font-size: var(--font-2xs);
 }
 
 .infoValue {
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 	display: flex;
 	align-items: center;
 	gap: var(--s-1);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 }
 
 .textContent {
 	padding-inline: var(--s-4);
 	padding-bottom: var(--s-3);
-	font-size: var(--fonts-sm);
-	line-height: 1.4;
+	font-size: var(--font-sm);
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-0-5);
@@ -93,8 +92,8 @@
 	border: none;
 	color: var(--color-text-accent);
 	cursor: pointer;
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	padding: 0;
 	text-align: left;
 	text-decoration: underline;
@@ -142,7 +141,7 @@
 
 .canceledLabel {
 	color: var(--color-error);
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	text-transform: uppercase;
 }
diff --git a/app/features/scrims/routes/scrims.$id.module.css b/app/features/scrims/routes/scrims.$id.module.css
index 7b98869c6..6a8d1ac9b 100644
--- a/app/features/scrims/routes/scrims.$id.module.css
+++ b/app/features/scrims/routes/scrims.$id.module.css
@@ -25,8 +25,8 @@
 	align-items: center;
 	background-color: var(--color-bg);
 	border-radius: var(--radius-box);
-	font-size: var(--fonts-xsm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	padding-inline-end: var(--s-2-5);
 	color: var(--color-text);
 }
@@ -34,14 +34,14 @@
 .infoHeader {
 	text-transform: uppercase;
 	color: var(--color-text-high);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	line-height: 1.1;
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 }
 
 .infoValue {
-	font-size: var(--fonts-xl);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xl);
+	font-weight: var(--weight-semi);
 	letter-spacing: 1px;
 }
 
diff --git a/app/features/sendouq-match/routes/q.match.$id.module.css b/app/features/sendouq-match/routes/q.match.$id.module.css
index 09ac8df6e..8c9bfc15a 100644
--- a/app/features/sendouq-match/routes/q.match.$id.module.css
+++ b/app/features/sendouq-match/routes/q.match.$id.module.css
@@ -1,12 +1,12 @@
 .stagePopoverButton {
 	background-color: transparent;
 	color: var(--color-text-high);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	padding: 0;
 	border: none;
 	text-decoration: underline;
 	text-decoration-style: dotted;
-	font-weight: var(--body);
+	font-weight: var(--weight-body);
 	height: 19.8281px;
 }
 
@@ -66,7 +66,7 @@
 	row-gap: var(--s-2);
 	column-gap: var(--s-2-5);
 	align-items: center;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 }
 
 .poolPassContainer {
@@ -94,13 +94,13 @@
 .infoHeader {
 	text-transform: uppercase;
 	color: var(--color-text-high);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	line-height: 1.1;
 }
 
 .infoValue {
-	font-size: var(--fonts-xl);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xl);
+	font-weight: var(--weight-semi);
 	letter-spacing: 1px;
 }
 
diff --git a/app/features/sendouq-settings/components/ModeMapPoolPicker.module.css b/app/features/sendouq-settings/components/ModeMapPoolPicker.module.css
index c70b582a5..609074a15 100644
--- a/app/features/sendouq-settings/components/ModeMapPoolPicker.module.css
+++ b/app/features/sendouq-settings/components/ModeMapPoolPicker.module.css
@@ -4,12 +4,12 @@
 }
 
 .slot {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	display: grid;
 	place-items: center;
 	color: var(--color-text-high);
 	border-radius: var(--radius-field);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	width: 24px;
 	height: 24px;
 	border: 2px dotted var(--color-bg-higher);
@@ -81,14 +81,14 @@
 	position: absolute;
 	top: 14px;
 	text-transform: uppercase;
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	cursor: not-allowed;
 }
 
 .mapButtonLabel {
-	font-size: var(--fonts-xxxxs);
+	font-size: var(--font-2xs);
 	color: var(--color-text-high);
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 }
 
 .divider::before,
@@ -97,8 +97,8 @@
 }
 
 .divider {
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	text-transform: uppercase;
 	display: flex;
 	gap: var(--s-2);
diff --git a/app/features/sendouq-settings/routes/q.settings.module.css b/app/features/sendouq-settings/routes/q.settings.module.css
index 2f12be9df..803a0125a 100644
--- a/app/features/sendouq-settings/routes/q.settings.module.css
+++ b/app/features/sendouq-settings/routes/q.settings.module.css
@@ -2,8 +2,8 @@
 	padding: var(--s-3);
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
-	font-size: var(--fonts-lg);
-	font-weight: var(--bold);
+	font-size: var(--font-lg);
+	font-weight: var(--weight-bold);
 	margin-block-end: var(--s-4);
 	position: relative;
 }
diff --git a/app/features/sendouq-streams/routes/q.streams.module.css b/app/features/sendouq-streams/routes/q.streams.module.css
index 58f298df7..a70bbe1c4 100644
--- a/app/features/sendouq-streams/routes/q.streams.module.css
+++ b/app/features/sendouq-streams/routes/q.streams.module.css
@@ -1,14 +1,14 @@
 .userContainer {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	display: flex;
 	gap: var(--s-2);
 	align-items: center;
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 	color: var(--text);
 }
 
 .viewerCount {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	display: flex;
 	gap: var(--s-2);
 	align-items: center;
diff --git a/app/features/sendouq/components/GroupCard.module.css b/app/features/sendouq/components/GroupCard.module.css
index c0580925b..908af6d86 100644
--- a/app/features/sendouq/components/GroupCard.module.css
+++ b/app/features/sendouq/components/GroupCard.module.css
@@ -26,8 +26,8 @@
 	align-items: center;
 	background-color: var(--color-bg);
 	border-radius: var(--radius-field);
-	font-size: var(--fonts-xsm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	padding-inline-end: var(--s-2-5);
 }
 
@@ -36,7 +36,7 @@
 	text-overflow: ellipsis;
 	overflow: hidden;
 	max-width: 7.5rem;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text);
 }
 
@@ -65,7 +65,7 @@
 }
 
 .extraInfo {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	background-color: var(--color-bg);
 	border-radius: var(--radius-selector);
 	padding: 0 var(--s-1-5);
@@ -73,7 +73,7 @@
 	display: flex;
 	align-items: center;
 	gap: var(--s-1);
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 	height: 24px;
 
 	& img {
@@ -83,7 +83,7 @@
 }
 
 .extraInfoButton {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	background-color: var(--color-bg);
 	border-radius: var(--radius-box);
 	padding: var(--s-0-5) var(--s-1-5);
@@ -91,7 +91,7 @@
 	display: flex;
 	align-items: center;
 	gap: var(--s-1);
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 	color: var(--color-text);
 	border: none;
 	height: 24px;
@@ -101,8 +101,8 @@
 	border: none;
 	padding: 0 var(--s-1-5);
 	color: var(--color-text-accent);
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	background-color: var(--color-bg);
 	white-space: nowrap;
 	height: 100%;
@@ -154,8 +154,8 @@
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg);
 	padding: var(--s-0-5) var(--s-2-5);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	bottom: -36px;
 	left: 50%;
 	transform: translate(-50%, -50%);
@@ -164,11 +164,11 @@
 .popoverButton {
 	background-color: transparent;
 	color: var(--color-text-high);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	padding: 0;
 	border: none;
 	text-decoration: underline;
 	text-decoration-style: dotted;
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	height: 19.8281px;
 }
diff --git a/app/features/sendouq/routes/q.info.module.css b/app/features/sendouq/routes/q.info.module.css
index a47d61a8e..566a4f094 100644
--- a/app/features/sendouq/routes/q.info.module.css
+++ b/app/features/sendouq/routes/q.info.module.css
@@ -2,17 +2,17 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-4);
-	font-size: var(--fonts-md);
+	font-size: var(--font-md);
 }
 
 .container h2 {
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 	margin-block-end: var(--s-2);
 	color: var(--color-text-accent);
 }
 
 .container h3 {
-	font-size: var(--fonts-md);
+	font-size: var(--font-md);
 	margin-block-end: var(--s-3);
 }
 
@@ -26,8 +26,8 @@
 
 .tableOfContents li {
 	list-style: none;
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 }
 
 .tableOfContents li:has(button) {
@@ -36,5 +36,5 @@
 
 .tableOfContents li:not(:has(button)) {
 	margin-inline-start: var(--s-2);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 }
diff --git a/app/features/sendouq/routes/q.looking.module.css b/app/features/sendouq/routes/q.looking.module.css
index b1563f9df..2b52f4bb5 100644
--- a/app/features/sendouq/routes/q.looking.module.css
+++ b/app/features/sendouq/routes/q.looking.module.css
@@ -21,8 +21,8 @@
 
 .header {
 	text-align: center;
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	text-transform: uppercase;
 	color: var(--color-text-accent);
 	display: flex;
diff --git a/app/features/sendouq/routes/q.module.css b/app/features/sendouq/routes/q.module.css
index ef9c4646f..553b9a76a 100644
--- a/app/features/sendouq/routes/q.module.css
+++ b/app/features/sendouq/routes/q.module.css
@@ -4,8 +4,8 @@
 }
 
 .clock {
-	font-size: var(--fonts-sm);
-	font-weight: var(--bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-bold);
 	color: var(--color-text-high);
 	display: flex;
 	flex-direction: column;
@@ -18,16 +18,16 @@
 .clockCountry {
 	color: var(--color-text) !important;
 	white-space: nowrap;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 }
 
 .frontPageLink {
 	background-color: var(--color-bg-high);
 	border-radius: var(--radius-field);
 	padding: var(--s-2);
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	color: var(--color-text);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	display: flex;
 	align-items: center;
 	gap: var(--s-2-5);
@@ -40,6 +40,6 @@
 
 .linkSubText {
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxs);
-	font-weight: var(--body);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-body);
 }
diff --git a/app/features/team/team.module.css b/app/features/team/team.module.css
index 6405078c4..b18bc59ad 100644
--- a/app/features/team/team.module.css
+++ b/app/features/team/team.module.css
@@ -1,6 +1,6 @@
 .searchInput {
 	height: 40px !important;
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 	max-width: 240px;
 }
 
@@ -18,23 +18,23 @@
 }
 
 .searchTeamName {
-	font-size: var(--fonts-xl);
-	font-weight: var(--bold);
+	font-size: var(--font-xl);
+	font-weight: var(--weight-bold);
 	word-break: break-word;
 }
 
 .searchTeamMembers {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text-high);
 }
 
 .searchTeamTag {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-accent);
 	padding: var(--s-0-5) var(--s-1);
 	border-radius: var(--radius-field);
 	margin-left: var(--s-2);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 }
 
 .searchTeamAvatarPlaceholder {
@@ -42,7 +42,7 @@
 	min-width: 64px;
 	display: grid;
 	place-items: center;
-	font-size: var(--fonts-xl);
+	font-size: var(--font-xl);
 	border-radius: 100%;
 	background-color: var(--color-bg-high);
 }
@@ -83,7 +83,7 @@
 	justify-self: flex-end;
 	font-size: 36px;
 	line-height: 1;
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	color: #fff;
 	display: none;
 	align-items: center;
@@ -132,11 +132,10 @@
 
 .mobileNameCountry {
 	display: flex;
-	font-size: var(--fonts-xl);
+	font-size: var(--font-xl);
 	align-items: center;
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	flex-direction: column;
-	line-height: 1.5;
 }
 
 .mobileTeamName {
@@ -146,7 +145,7 @@
 }
 
 .bannerTag {
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	background-color: var(--color-accent-low);
 	color: var(--color-accent);
 	padding: var(--s-1) var(--s-1-5);
@@ -161,7 +160,7 @@
 }
 
 .bannerTagMobile {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	padding: var(--s-0-5) var(--s-1);
 	margin-block: var(--s-1);
 }
@@ -183,8 +182,8 @@
 	margin: 0 auto;
 	border-radius: var(--radius-box);
 	padding: var(--s-1) var(--s-4);
-	font-weight: var(--bold);
-	font-size: var(--fonts-sm);
+	font-weight: var(--weight-bold);
+	font-size: var(--font-sm);
 	display: flex;
 	justify-content: space-between;
 	width: min(100%, 48rem);
@@ -213,8 +212,8 @@
 	background-color: var(--color-bg-high);
 	border-radius: var(--radius-box);
 	padding: var(--s-2) var(--s-4);
-	font-size: var(--fonts-xl);
-	font-weight: var(--bold);
+	font-size: var(--font-xl);
+	font-weight: var(--weight-bold);
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -226,7 +225,7 @@
 	align-items: center;
 	gap: var(--s-4);
 	color: var(--color-text);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 }
 
 .memberAvatar {
@@ -237,15 +236,15 @@
 
 .memberRole {
 	margin-left: auto;
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	color: var(--color-text-high);
 	margin-inline-end: var(--s-2-5);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 }
 
 .memberRoleMobile {
 	color: var(--color-text-high);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 }
 
 .memberCardContainer {
@@ -264,13 +263,13 @@
 	padding: var(--s-3);
 	background-color: var(--color-bg-high);
 	border-radius: var(--radius-box);
-	font-size: var(--fonts-lg);
-	font-weight: var(--bold);
+	font-size: var(--font-lg);
+	font-weight: var(--weight-bold);
 }
 
 .memberCardName {
 	color: var(--color-text);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	margin-block-start: var(--s-2);
 }
 
@@ -284,8 +283,8 @@
 
 .rosterMember {
 	justify-self: flex-start;
-	font-weight: var(--bold);
-	font-size: var(--fonts-sm);
+	font-weight: var(--weight-bold);
+	font-size: var(--font-sm);
 }
 
 .rosterSeparator {
@@ -305,7 +304,7 @@
 	display: flex;
 	gap: var(--s-8);
 	padding-left: var(--s-4);
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 }
 
 @media screen and (min-width: 640px) {
diff --git a/app/features/tier-list-maker/components/TierRow.module.css b/app/features/tier-list-maker/components/TierRow.module.css
index 5e51672ff..7563d21b2 100644
--- a/app/features/tier-list-maker/components/TierRow.module.css
+++ b/app/features/tier-list-maker/components/TierRow.module.css
@@ -10,8 +10,8 @@
 	justify-content: center;
 	min-width: 68px;
 	padding: var(--s-2);
-	font-size: var(--fonts-lg);
-	font-weight: var(--bold);
+	font-size: var(--font-lg);
+	font-weight: var(--weight-bold);
 	color: var(--color-text);
 	border-radius: var(--radius-field);
 	cursor: pointer;
@@ -66,8 +66,8 @@
 	text-align: center;
 	margin: auto;
 	color: var(--color-text-high);
-	font-size: var(--fonts-md);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-md);
+	font-weight: var(--weight-semi);
 	font-style: italic;
 	display: flex;
 	align-items: center;
diff --git a/app/features/tier-list-maker/routes/tier-list-maker.module.css b/app/features/tier-list-maker/routes/tier-list-maker.module.css
index e7a2c17d3..9f0c6ab93 100644
--- a/app/features/tier-list-maker/routes/tier-list-maker.module.css
+++ b/app/features/tier-list-maker/routes/tier-list-maker.module.css
@@ -34,8 +34,8 @@
 .titleInput {
 	width: 100%;
 	padding: 0 var(--s-2) var(--s-2) var(--s-2);
-	font-size: var(--fonts-lg);
-	font-weight: 600;
+	font-size: var(--font-lg);
+	font-weight: var(--weight-bold);
 	text-align: center;
 	background: transparent;
 	border: none;
@@ -63,8 +63,8 @@
 }
 
 .authorBy {
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	color: var(--color-text-high);
 	text-transform: lowercase;
 	white-space: nowrap;
@@ -77,8 +77,8 @@
 }
 
 .authorUsername {
-	font-weight: var(--bold);
-	font-size: var(--fonts-xs);
+	font-weight: var(--weight-bold);
+	font-size: var(--font-xs);
 	color: var(--color-text);
 	white-space: nowrap;
 }
diff --git a/app/features/tier-list-maker/tier-list-maker-constants.ts b/app/features/tier-list-maker/tier-list-maker-constants.ts
index f198930ec..09936e4b3 100644
--- a/app/features/tier-list-maker/tier-list-maker-constants.ts
+++ b/app/features/tier-list-maker/tier-list-maker-constants.ts
@@ -4,14 +4,14 @@ export const DEFAULT_TIER_LABEL_WIDTH = 68;
 export const TIER_NAME_MAX_LENGTH = 50;
 
 export const TIER_NAME_FONT_SIZE_BREAKPOINTS = [
-	{ maxLength: 3, fontSize: "var(--fonts-xl)" },
-	{ maxLength: 8, fontSize: "var(--fonts-lg)" },
-	{ maxLength: 15, fontSize: "var(--fonts-md)" },
-	{ maxLength: 25, fontSize: "var(--fonts-sm)" },
-	{ maxLength: 35, fontSize: "var(--fonts-xs)" },
+	{ maxLength: 3, fontSize: "var(--font-xl)" },
+	{ maxLength: 8, fontSize: "var(--font-lg)" },
+	{ maxLength: 15, fontSize: "var(--font-md)" },
+	{ maxLength: 25, fontSize: "var(--font-sm)" },
+	{ maxLength: 35, fontSize: "var(--font-xs)" },
 ] as const;
 
-export const TIER_NAME_FONT_SIZE_MIN = "var(--fonts-xxs)";
+export const TIER_NAME_FONT_SIZE_MIN = "var(--font-2xs)";
 
 export const PRESET_COLORS = [
 	"#ff4655",
diff --git a/app/features/top-search/top-search.module.css b/app/features/top-search/top-search.module.css
index 77c94920c..241886ae0 100644
--- a/app/features/top-search/top-search.module.css
+++ b/app/features/top-search/top-search.module.css
@@ -2,8 +2,8 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-0-5);
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 }
 
 .tableRank {
@@ -53,8 +53,8 @@ a.tableRow:hover {
 }
 
 .tableRowQualification {
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	justify-content: center;
 	background-color: var(--color-bg-higher);
 	display: flex;
@@ -73,8 +73,8 @@ a.tableRow:hover {
 }
 
 .time {
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	color: var(--color-text-high);
 }
 
diff --git a/app/features/tournament-bracket/components/Bracket/bracket.module.css b/app/features/tournament-bracket/components/Bracket/bracket.module.css
index 0b584265f..da05cc40b 100644
--- a/app/features/tournament-bracket/components/Bracket/bracket.module.css
+++ b/app/features/tournament-bracket/components/Bracket/bracket.module.css
@@ -33,8 +33,8 @@
 	background-color: var(--color-bg-higher);
 	padding: var(--s-0-5) var(--s-1);
 	border-radius: var(--radius-field);
-	font-size: var(--fonts-xxxs) !important;
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs) !important;
+	font-weight: var(--weight-semi);
 	color: var(--color-text);
 	border: 0;
 }
@@ -61,8 +61,8 @@
 	max-height: var(--match-height);
 	border-radius: var(--radius-field);
 	background-color: var(--color-bg-high);
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	padding: 0 var(--s-2);
 	display: flex;
 	flex-direction: column;
@@ -148,8 +148,8 @@ a.match:hover {
 .elimRoundHeader {
 	text-align: center;
 	background-color: var(--color-bg-higher);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	padding-block: var(--s-2);
 	width: var(--match-width);
 	border-radius: var(--radius-field);
@@ -159,9 +159,9 @@ a.match:hover {
 	width: var(--match-width);
 	display: flex;
 	justify-content: space-between;
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	color: var(--color-text-high);
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 }
 
 .elimRoundColumn {
@@ -246,8 +246,8 @@ a.match:hover {
 }
 
 .rrPlacementsTable {
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	min-width: max-content;
 	overflow-x: auto;
 	max-width: 600px;
@@ -299,8 +299,8 @@ a.match:hover {
 }
 
 .standingsDividerText {
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	white-space: nowrap;
 }
 
diff --git a/app/features/tournament-bracket/components/BracketMapListDialog.module.css b/app/features/tournament-bracket/components/BracketMapListDialog.module.css
index d587df12b..ae7a9a4ce 100644
--- a/app/features/tournament-bracket/components/BracketMapListDialog.module.css
+++ b/app/features/tournament-bracket/components/BracketMapListDialog.module.css
@@ -32,8 +32,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	cursor: pointer;
 	transition: background-color 0.2s ease;
 }
@@ -89,8 +89,8 @@
 .mapSelectContainer {
 	display: flex;
 	gap: var(--s-2);
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	align-items: center;
 	position: relative;
 	flex: 1;
@@ -125,8 +125,8 @@
 	background-color: var(--color-bg-higher);
 	padding: 2px 6px;
 	border-radius: var(--radius-field);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	display: inline-block;
 	min-width: 4.5rem;
 	text-align: center;
@@ -136,7 +136,7 @@
 	display: flex;
 	gap: var(--s-2);
 	align-items: baseline;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	margin-block: var(--s-2);
 }
 
diff --git a/app/features/tournament-bracket/components/MatchTimer.module.css b/app/features/tournament-bracket/components/MatchTimer.module.css
index c49d0afeb..fc3d88bc1 100644
--- a/app/features/tournament-bracket/components/MatchTimer.module.css
+++ b/app/features/tournament-bracket/components/MatchTimer.module.css
@@ -52,8 +52,8 @@
 }
 
 .gameMarkerText {
-	font-size: var(--fonts-xxxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	white-space: nowrap;
 }
 
diff --git a/app/features/tournament-bracket/tournament-bracket.module.css b/app/features/tournament-bracket/tournament-bracket.module.css
index d742a4742..da7a8c757 100644
--- a/app/features/tournament-bracket/tournament-bracket.module.css
+++ b/app/features/tournament-bracket/tournament-bracket.module.css
@@ -1,5 +1,5 @@
 .finalize {
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	margin-block-end: var(--s-4);
 	display: flex;
 	gap: var(--s-1);
@@ -7,13 +7,9 @@
 	justify-content: center;
 }
 
-.startBracketAlert {
-	line-height: 1.4;
-}
-
 .miniAlert {
 	background-color: var(--color-info-low);
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	border-radius: var(--radius-box);
 	padding: var(--s-1) var(--s-2);
 }
@@ -29,12 +25,12 @@
 	border-end-start-radius: var(--radius-box);
 	color: var(--tournaments-text);
 	column-gap: var(--s-8);
-	font-size: var(--fonts-xsm);
+	font-size: var(--font-sm);
 	letter-spacing: 0.3px;
 }
 
 .infosValue > button {
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 }
 
 .lockedBanner {
@@ -78,7 +74,7 @@
 	background: rgb(0 0 0 / 40%);
 	border-start-end-radius: var(--radius-box);
 	border-start-start-radius: var(--radius-box);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: #fff;
 }
 
@@ -125,8 +121,8 @@
 	width: var(--field-size-xs);
 	height: var(--field-size-xs);
 	border-radius: 50%;
-	font-weight: bold;
-	font-size: var(--fonts-sm);
+	font-weight: var(--weight-extra);
+	font-size: var(--font-sm);
 }
 
 .deadlineIndicatorWarning {
@@ -198,7 +194,7 @@
 	display: flex;
 	align-items: center;
 	text-align: center;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 }
 
 .duringMatchActionsRosters {
@@ -254,8 +250,8 @@
 	border-end-start-radius: var(--radius-box);
 	border-start-start-radius: var(--radius-box);
 	cursor: pointer;
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	letter-spacing: 0.4px;
 	z-index: 1;
 
@@ -324,21 +320,21 @@
 }
 
 .duringMatchActionsSeed {
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	color: var(--color-text-accent);
 }
 
 .duringMatchActionsTeamName {
 	color: var(--color-text);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 }
 
 .rosters {
 	display: flex;
 	flex-wrap: wrap;
 	gap: var(--s-8);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	flex-direction: column;
 }
 
@@ -440,7 +436,7 @@
 .pointsInput {
 	--field-width: 4.5rem;
 	padding: var(--s-3-5) var(--s-2) !important;
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 }
 
 @media screen and (min-width: 480px) {
@@ -450,14 +446,14 @@
 }
 
 .quickAction {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	color: var(--color-text);
 	background-color: var(--color-bg);
 	border-radius: var(--radius-box);
 	border: 2px solid var(--color-bg-higher);
 	padding-block: var(--s-1-5);
 	padding-inline: var(--s-2-5);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	align-items: center;
 }
 
@@ -476,7 +472,7 @@
 }
 
 .compactifyButton {
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	color: var(--color-text-high);
 	border-color: var(--color-bg-higher);
 	background-color: var(--color-bg);
@@ -496,7 +492,7 @@
 	text-transform: uppercase;
 	background-color: var(--color-bg-higher);
 	border-radius: var(--radius-box) 0 0 var(--radius-box);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	color: var(--color-text-high);
 	display: grid;
 	place-items: center;
diff --git a/app/features/tournament-organization/components/BannedPlayersList.module.css b/app/features/tournament-organization/components/BannedPlayersList.module.css
index e4cb0d274..ed21f6d60 100644
--- a/app/features/tournament-organization/components/BannedPlayersList.module.css
+++ b/app/features/tournament-organization/components/BannedPlayersList.module.css
@@ -22,7 +22,7 @@
 	border: none;
 	color: var(--color-accent);
 	cursor: pointer;
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	padding: 0;
 	text-align: left;
 	text-decoration: underline;
diff --git a/app/features/tournament-organization/tournament-organization.module.css b/app/features/tournament-organization/tournament-organization.module.css
index 1caf2ed92..0bbe26666 100644
--- a/app/features/tournament-organization/tournament-organization.module.css
+++ b/app/features/tournament-organization/tournament-organization.module.css
@@ -16,14 +16,14 @@
 }
 
 .calendarDayHeader {
-	font-size: var(--fonts-md);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-md);
+	font-weight: var(--weight-semi);
 }
 
 .calendarDay {
 	aspect-ratio: 1;
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	background-color: var(--bg-lighter);
 	padding: var(--s-1);
 	position: relative;
@@ -63,13 +63,13 @@
 	border: var(--border-style);
 	display: grid;
 	place-items: center;
-	font-size: var(--fonts-md);
+	font-size: var(--font-md);
 	background-color: var(--color-bg-higher);
 }
 
 .calendarDayToday {
 	color: var(--color-accent);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 }
 
 .calendarDayPrevious {
@@ -81,21 +81,21 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: var(--s-2);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 }
 
 .calendarMonthSelector a {
-	font-size: var(--fonts-xl);
+	font-size: var(--font-xl);
 }
 
 .calendarMonthSelector > div {
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 	margin-block-start: var(--s-1);
 }
 
 .sectionDivider {
-	font-size: var(--fonts-md);
-	font-weight: var(--bold);
+	font-size: var(--font-md);
+	font-weight: var(--weight-bold);
 	color: var(--color-text-high);
 	border-bottom: var(--border-style);
 	width: 100%;
@@ -127,7 +127,7 @@
 	display: flex;
 	align-items: center;
 	gap: var(--s-2);
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 	color: var(--color-text);
 	width: max-content;
 }
@@ -139,7 +139,7 @@
 .eventInfoTime {
 	display: block;
 	color: var(--color-text-high);
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 }
 
 .leaderboardList {
@@ -149,8 +149,8 @@
 }
 
 .leaderboardList li::marker {
-	font-size: var(--fonts-lg);
-	font-weight: var(--bold);
+	font-size: var(--font-lg);
+	font-weight: var(--weight-bold);
 	color: var(--color-accent);
 	padding-inline-end: var(--s-2);
 }
@@ -163,7 +163,7 @@
 }
 
 .socialLink {
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	color: var(--text-main);
 	display: flex;
 	gap: var(--s-2);
diff --git a/app/features/tournament-subs/routes/to.$id.subs.module.css b/app/features/tournament-subs/routes/to.$id.subs.module.css
index 672ab470f..018fa69dc 100644
--- a/app/features/tournament-subs/routes/to.$id.subs.module.css
+++ b/app/features/tournament-subs/routes/to.$id.subs.module.css
@@ -34,7 +34,7 @@
 
 .sectionInfo {
 	grid-area: info;
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	gap: var(--s-2);
 	color: var(--color-text-high);
 	display: flex;
@@ -55,14 +55,14 @@
 
 .sectionMessage {
 	grid-area: message;
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	padding-block-start: var(--s-4);
 	white-space: pre-wrap;
 }
 
 .sectionWeaponText {
-	font-weight: var(--semi-bold);
-	font-size: var(--fonts-xs);
+	font-weight: var(--weight-semi);
+	font-size: var(--font-xs);
 	align-self: center;
 }
 
diff --git a/app/features/tournament/routes/to.$id.seeds.module.css b/app/features/tournament/routes/to.$id.seeds.module.css
index 0e1c3a76c..4cda4ad7d 100644
--- a/app/features/tournament/routes/to.$id.seeds.module.css
+++ b/app/features/tournament/routes/to.$id.seeds.module.css
@@ -11,8 +11,8 @@
 	align-items: center;
 	padding: var(--s-1-5) var(--s-3);
 	column-gap: var(--s-2);
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
 	grid-template-columns: 2.5rem 2.25rem 2rem 1fr 3rem 1fr;
 }
 
@@ -26,7 +26,7 @@
 	background-color: var(--color-bg-high);
 	column-gap: var(--s-2);
 	row-gap: var(--s-2);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	grid-template-columns: 2rem 2.25rem 2rem 1fr 3rem;
 	grid-template-areas:
 		"handle seed logo name sp"
@@ -81,7 +81,7 @@
 	cursor: grab;
 	background: none;
 	border: none;
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 	color: var(--color-text-high);
 	padding: var(--s-1);
 	touch-action: none;
@@ -110,7 +110,7 @@
 	border: 1px solid var(--color-border);
 	background-color: var(--color-bg);
 	color: var(--color-text);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 }
 
 .seedInput:focus {
@@ -135,8 +135,8 @@
 	flex-shrink: 0;
 	background-color: var(--color-second);
 	color: var(--color-text-inverse);
-	font-size: var(--fonts-xxxxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	padding: 1px 4px;
 	border-radius: var(--radius-field);
 	text-transform: uppercase;
@@ -155,7 +155,7 @@
 	background-color: var(--color-bg-higher);
 	border-radius: var(--radius-box);
 	padding: var(--s-0-5) var(--s-2);
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 }
 
 .playerNew {
@@ -165,8 +165,8 @@
 .playerNewBadge {
 	background-color: var(--color-second);
 	color: var(--color-text-inverse);
-	font-size: var(--fonts-xxxxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	padding: 1px 3px;
 	border-radius: var(--radius-field);
 	text-transform: uppercase;
@@ -178,7 +178,7 @@
 	align-items: center;
 	justify-content: center;
 	gap: 2px;
-	font-size: var(--fonts-xxxs);
+	font-size: var(--font-2xs);
 	color: var(--color-text-high);
 }
 
diff --git a/app/features/tournament/tournament.module.css b/app/features/tournament/tournament.module.css
index c217bf6ab..77565c767 100644
--- a/app/features/tournament/tournament.module.css
+++ b/app/features/tournament/tournament.module.css
@@ -26,7 +26,7 @@
 
 .teamWithRosterName {
 	flex: 1;
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	padding-inline-end: var(--s-4);
 	text-align: right;
 }
@@ -36,8 +36,8 @@
 	flex: 1;
 	flex-direction: column;
 	border-inline-start: var(--border-style-accent);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	gap: var(--s-2);
 	padding-inline-start: var(--s-4);
 	padding-block: var(--s-3);
@@ -76,17 +76,17 @@
 .teamWithRosterMapPoolModeInfo {
 	background-color: var(--color-bg-high);
 	display: flex;
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	justify-content: center;
 	align-items: center;
 	gap: var(--s-1);
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 	padding-block: var(--s-0-5);
 }
 
 .teamWithRosterSeed {
-	font-size: var(--fonts-xxs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
 	color: var(--color-text-high);
 }
 
@@ -113,11 +113,11 @@
 	position: absolute;
 	background-color: var(--color-text-accent);
 	color: var(--color-text-inverse);
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 	width: 12px;
 	height: 12px;
 	border-radius: var(--radius-box);
-	font-size: var(--fonts-xxxxs);
+	font-size: var(--font-2xs);
 	display: grid;
 	place-items: center;
 	top: 14px;
@@ -141,14 +141,14 @@
 }
 
 .title {
-	font-size: var(--fonts-xl);
-	font-weight: var(--bold);
+	font-size: var(--font-xl);
+	font-weight: var(--weight-bold);
 }
 
 .badge {
 	text-transform: uppercase;
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	padding: var(--s-0-5) var(--s-2);
 	border-radius: var(--radius-box);
 	place-items: center;
@@ -182,7 +182,6 @@
 
 .infoDescription > :is(h1, h2, h3, h4, h5, h6) {
 	margin-block-end: var(--s-6);
-	line-height: 1.4;
 }
 
 .infoDescription > :is(h2, h3, h4, h5, h6) {
@@ -190,15 +189,15 @@
 }
 
 .infoDescription > h1 {
-	font-size: var(--fonts-xl);
+	font-size: var(--font-xl);
 }
 
 .infoDescription > :is(h2, h3, h4, h5, h6) {
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 }
 
 .infoDescription > :is(h3, h4, h5, h6) {
-	font-size: var(--fonts-md);
+	font-size: var(--font-md);
 }
 
 .infoDescription > ul:has(+ p) {
@@ -207,12 +206,12 @@
 
 .by {
 	color: var(--color-text-high);
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 }
 
 .sectionHeader {
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 }
 
 .section {
@@ -226,8 +225,8 @@
 }
 
 .sectionWarning {
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	text-align: center;
 	color: var(--color-text-high);
 }
@@ -291,7 +290,7 @@
 	padding: var(--s-1-5) var(--s-3);
 	border-radius: var(--radius-box);
 	column-gap: var(--s-1);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	grid-template-columns: 1.5rem 2rem 8rem 3rem 1fr;
 	list-style: none;
 	row-gap: var(--s-1-5);
@@ -310,7 +309,7 @@
 }
 
 .seedsTeamsContainerHeader {
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 }
 
 .seedsTeamName {
@@ -335,19 +334,19 @@
 
 .seedsTeamMemberName {
 	grid-column: 1 / span 2;
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 }
 
 .streamUserContainer {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	display: flex;
 	gap: var(--s-2);
 	align-items: center;
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 }
 
 .streamViewerCount {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	display: flex;
 	gap: var(--s-2);
 	align-items: center;
@@ -373,28 +372,28 @@
 	grid-template-columns: 1fr;
 	grid-template-rows: 1fr 2fr 1fr;
 	place-items: center;
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	text-align: center;
 }
 
 .teamStatTitle {
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	color: var(--color-text-high);
 }
 
 .teamStatMain {
-	font-size: var(--fonts-xl);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xl);
+	font-weight: var(--weight-semi);
 }
 
 .teamStatMain sup {
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 }
 
 .teamStatSub {
 	color: var(--color-text-high);
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 }
 
 @media screen and (min-width: 640px) {
@@ -442,14 +441,14 @@
 }
 
 .teamSetScore {
-	font-size: var(--fonts-xl);
-	font-weight: var(--bold);
+	font-size: var(--font-xl);
+	font-weight: var(--weight-bold);
 	white-space: nowrap;
 }
 
 .teamSetRoundName {
-	font-size: var(--fonts-lg);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-lg);
+	font-weight: var(--weight-semi);
 	color: var(--color-text-high);
 	margin-block-end: 2px;
 }
@@ -470,8 +469,8 @@
 	flex-direction: column;
 	gap: var(--s-2);
 	align-items: center;
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	color: var(--color-text);
 }
 
@@ -485,16 +484,16 @@
 
 .teamSetOpponentVs {
 	grid-area: vs;
-	font-size: var(--fonts-xl);
-	font-weight: var(--bold);
+	font-size: var(--font-xl);
+	font-weight: var(--weight-bold);
 	color: var(--color-text-high);
 	align-self: center;
 }
 
 .teamSetOpponentTeam {
 	grid-area: team;
-	font-size: var(--fonts-lg);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-lg);
+	font-weight: var(--weight-semi);
 	color: var(--color-text);
 }
 
@@ -509,7 +508,7 @@
 	color: var(--color-text);
 	display: flex;
 	gap: var(--s-1);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	align-items: center;
 }
 
@@ -518,7 +517,7 @@
 	width: 100%;
 	align-items: center;
 	color: var(--color-accent);
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 }
 
 .overlapDivider::before,
@@ -533,8 +532,8 @@
 	height: 28px;
 	display: grid;
 	place-items: center;
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	border: 3px solid var(--color-accent);
 	border-radius: var(--radius-field);
 	color: var(--color-text);
diff --git a/app/features/user-page/components/ParticipationPill.module.css b/app/features/user-page/components/ParticipationPill.module.css
index d1475fa27..dfdb8fbb1 100644
--- a/app/features/user-page/components/ParticipationPill.module.css
+++ b/app/features/user-page/components/ParticipationPill.module.css
@@ -6,8 +6,8 @@
 }
 
 .text {
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	text-align: center;
 }
 
diff --git a/app/features/user-page/routes/u.$identifier.admin.module.css b/app/features/user-page/routes/u.$identifier.admin.module.css
index ae1076f14..602ee3264 100644
--- a/app/features/user-page/routes/u.$identifier.admin.module.css
+++ b/app/features/user-page/routes/u.$identifier.admin.module.css
@@ -1,5 +1,5 @@
 .dl dt {
-	font-weight: bold;
+	font-weight: var(--weight-extra);
 }
 
 .dl dt:not(:first-child) {
diff --git a/app/features/user-page/routes/u.$identifier.edit.module.css b/app/features/user-page/routes/u.$identifier.edit.module.css
index 7f2c5a8f1..2729cac82 100644
--- a/app/features/user-page/routes/u.$identifier.edit.module.css
+++ b/app/features/user-page/routes/u.$identifier.edit.module.css
@@ -7,7 +7,7 @@
 }
 
 .inGameNameHashtag {
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 }
 
 .inGameNameDiscriminator {
diff --git a/app/features/user-page/user-page.module.css b/app/features/user-page/user-page.module.css
index 44140c507..fe238f0f8 100644
--- a/app/features/user-page/user-page.module.css
+++ b/app/features/user-page/user-page.module.css
@@ -18,7 +18,7 @@
 
 .team {
 	display: flex;
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	color: var(--color-text);
 	gap: var(--s-1-5);
 	grid-area: team;
@@ -106,7 +106,7 @@
 	padding: var(--s-1) var(--s-1-5);
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	display: flex;
 	align-items: center;
 	gap: var(--s-1);
@@ -114,7 +114,7 @@
 
 .extraInfoHeading {
 	color: var(--color-text-accent);
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 }
 
 .resultsTableWrapper {
@@ -159,15 +159,15 @@
 	display: flex;
 	align-items: center;
 	color: var(--color-text);
-	font-weight: var(--body);
+	font-weight: var(--weight-body);
 	gap: var(--s-4);
 	line-height: 1.2rem;
 }
 
 .searchIgn {
 	color: var(--color-text-high);
-	font-size: var(--fonts-sm);
-	font-weight: var(--body);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-body);
 }
 
 .searchUsers > li {
@@ -177,7 +177,7 @@
 .searchInput {
 	height: 40px !important;
 	margin: 0 auto;
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 }
 
 .searchIcon {
@@ -188,7 +188,7 @@
 
 .searchInfo {
 	color: var(--color-text-high);
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	text-align: center;
 }
 
@@ -224,8 +224,8 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	gap: var(--s-1-5);
 }
 
@@ -235,7 +235,7 @@
 	}
 
 	.placementsMode {
-		font-size: var(--fonts-sm);
+		font-size: var(--font-sm);
 	}
 }
 
@@ -246,9 +246,9 @@
 .seasonWeaponContainer {
 	display: flex;
 	align-items: center;
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	flex-direction: column;
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	position: relative;
 	width: 60px;
 }
@@ -296,12 +296,12 @@
 
 .seasonPlayerName {
 	width: 64px;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	text-align: center;
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 }
 
 .seasonMatch {
@@ -322,9 +322,9 @@
 .seasonMatchSubSection {
 	border-radius: 0 0 var(--radius-box) var(--radius-box);
 	background-color: var(--color-bg-high);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	text-align: center;
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 	display: flex;
 	gap: var(--s-1);
 	justify-content: center;
@@ -338,7 +338,7 @@
 .seasonMatchUser {
 	display: flex;
 	flex-direction: column;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	width: 65px;
 	align-items: center;
 }
@@ -351,8 +351,8 @@
 }
 
 .seasonMatchScore {
-	font-size: var(--fonts-xl);
-	font-weight: var(--bold);
+	font-size: var(--font-xl);
+	font-weight: var(--weight-bold);
 	margin-inline: auto;
 }
 
@@ -370,8 +370,8 @@
 	height: 28px;
 	display: grid;
 	place-items: center;
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	border: 3px solid var(--color-accent);
 	border-radius: var(--radius-field);
 	color: var(--color-text);
@@ -392,8 +392,8 @@
 	background-color: var(--color-bg-high);
 	padding: var(--s-0-5) var(--s-2);
 	border-radius: var(--radius-box);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 }
 
 .seasonWeaponUsageContainer {
@@ -421,9 +421,9 @@
 
 .seasonTentative {
 	text-transform: uppercase;
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	margin-top: -8px;
 	display: flex;
 	gap: var(--s-1);
diff --git a/app/features/vods/components/VodListing.module.css b/app/features/vods/components/VodListing.module.css
index 42808684f..326bdfd39 100644
--- a/app/features/vods/components/VodListing.module.css
+++ b/app/features/vods/components/VodListing.module.css
@@ -17,8 +17,8 @@
 }
 
 .castText {
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	color: var(--color-text-high);
 }
 
@@ -27,8 +27,8 @@
 	border-radius: 100%;
 	display: grid;
 	place-items: center;
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 	width: 38px;
 	height: 38px;
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 }
diff --git a/app/features/vods/routes/vods.$id.module.css b/app/features/vods/routes/vods.$id.module.css
index ec04770d1..c02bf752a 100644
--- a/app/features/vods/routes/vods.$id.module.css
+++ b/app/features/vods/routes/vods.$id.module.css
@@ -15,10 +15,9 @@
 	align-items: center;
 	text-align: center;
 	flex-direction: column;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	line-height: 1.3;
-	font-weight: var(--semi-bold);
-	flex-grow: 1;
+	font-weight: var(--weight-semi);
 	width: max-content;
 	gap: var(--s-1);
 }
diff --git a/app/features/weapons/components/WeaponArtPreview.module.css b/app/features/weapons/components/WeaponArtPreview.module.css
index 0baa99ae1..05d2b35bb 100644
--- a/app/features/weapons/components/WeaponArtPreview.module.css
+++ b/app/features/weapons/components/WeaponArtPreview.module.css
@@ -11,14 +11,14 @@
 }
 
 .title {
-	font-size: var(--fonts-md);
-	font-weight: 600;
+	font-size: var(--font-md);
+	font-weight: var(--weight-bold);
 	margin: 0;
 }
 
 .viewAll {
-	font-size: var(--fonts-xxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 	color: var(--color-text-accent);
 }
 
@@ -98,14 +98,14 @@
 	display: flex;
 	align-items: center;
 	gap: var(--s-1);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 }
 
 .author {
 	display: flex;
 	align-items: center;
 	gap: var(--s-1);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 }
 
 .authorName {
diff --git a/app/features/weapons/components/WeaponParamsTable.module.css b/app/features/weapons/components/WeaponParamsTable.module.css
index e2dad2fc6..df5291018 100644
--- a/app/features/weapons/components/WeaponParamsTable.module.css
+++ b/app/features/weapons/components/WeaponParamsTable.module.css
@@ -10,7 +10,7 @@
 	width: 100%;
 	border-collapse: separate;
 	border-spacing: 0;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	text-align: left;
 }
 
@@ -59,7 +59,7 @@
 }
 
 .weaponName {
-	font-size: var(--fonts-xxxs);
+	font-size: var(--font-2xs);
 	max-width: 80px;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -72,8 +72,8 @@
 
 .categoryHeader {
 	background-color: var(--color-bg-high);
-	font-weight: var(--bold);
-	font-size: var(--fonts-xxs);
+	font-weight: var(--weight-bold);
+	font-size: var(--font-2xs);
 	letter-spacing: 0.5px;
 	padding: var(--s-1-5) var(--s-2);
 }
@@ -82,7 +82,7 @@
 	display: flex;
 	align-items: center;
 	gap: var(--s-1);
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	min-width: 180px;
 }
 
@@ -105,7 +105,7 @@
 }
 
 .paramCell {
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	vertical-align: top;
 	min-width: 90px;
 }
@@ -130,8 +130,8 @@
 	border-radius: var(--radius-full);
 	background-color: var(--color-accent-low);
 	color: var(--color-accent);
-	font-size: var(--fonts-xxxs);
-	font-weight: var(--bold);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
 }
 
 .noValue {
@@ -143,7 +143,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-0-5);
-	font-size: var(--fonts-xxxs);
+	font-size: var(--font-2xs);
 	border-top: 1px solid var(--color-border);
 	padding-top: var(--s-1);
 }
@@ -161,5 +161,5 @@
 .historyValue {
 	font-variant-numeric: tabular-nums;
 	color: var(--color-accent);
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 }
diff --git a/app/features/weapons/routes/weapons.$slug.module.css b/app/features/weapons/routes/weapons.$slug.module.css
index f76c7667a..6a227365c 100644
--- a/app/features/weapons/routes/weapons.$slug.module.css
+++ b/app/features/weapons/routes/weapons.$slug.module.css
@@ -18,6 +18,6 @@
 }
 
 .dataCredit {
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	color: var(--color-text-high);
 }
diff --git a/app/form/SendouForm.module.css b/app/form/SendouForm.module.css
index 0bad3434e..3088885fa 100644
--- a/app/form/SendouForm.module.css
+++ b/app/form/SendouForm.module.css
@@ -8,6 +8,6 @@
 }
 
 .title {
-	font-size: var(--fonts-lg);
-	font-weight: bold;
+	font-size: var(--font-lg);
+	font-weight: var(--weight-extra);
 }
diff --git a/app/form/fields/ArrayFormField.module.css b/app/form/fields/ArrayFormField.module.css
index 47d416f44..bfcdde763 100644
--- a/app/form/fields/ArrayFormField.module.css
+++ b/app/form/fields/ArrayFormField.module.css
@@ -25,8 +25,8 @@
 
 .headerLabel {
 	flex: 1;
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 }
 
 .content {
diff --git a/app/form/fields/WeaponPoolFormField.module.css b/app/form/fields/WeaponPoolFormField.module.css
index 3dca9a701..81abc5f2b 100644
--- a/app/form/fields/WeaponPoolFormField.module.css
+++ b/app/form/fields/WeaponPoolFormField.module.css
@@ -27,7 +27,7 @@
 	cursor: grab;
 	user-select: none;
 	color: var(--color-text-high);
-	font-size: var(--fonts-md);
+	font-size: var(--font-md);
 	touch-action: none;
 	background: none;
 	border: none;
@@ -41,9 +41,9 @@
 
 .weaponName {
 	text-transform: uppercase;
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 	color: var(--color-text-high);
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	flex: 1;
 	min-width: 0;
 	overflow: hidden;
diff --git a/app/styles/common.css b/app/styles/common.css
index 70173f94d..34e191cc3 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -15,7 +15,7 @@ body {
 	width: 100%;
 	min-height: 100vh;
 	display: flex;
-	line-height: 1.5;
+	line-height: var(--line-height);
 	overflow-x: hidden;
 	color: var(--color-text);
 	background-color: var(--color-bg);
@@ -64,7 +64,6 @@ details summary {
 
 a {
 	color: var(--color-text-accent);
-	font-weight: var(--semi-bold);
 	text-decoration: none;
 	border-radius: 5px;
 
@@ -79,10 +78,10 @@ textarea:not([name="text"]) {
 	width: 100%;
 	min-height: 8rem;
 	padding: var(--field-padding);
-	line-height: var(--field-line-height);
 	border: var(--border-style);
 	border-radius: var(--radius-field);
 	background-color: var(--color-bg);
+	font-size: var(--font-sm);
 	outline: none;
 	resize: vertical;
 
@@ -100,7 +99,7 @@ input:not(.in-container) {
 	background: var(--color-bg);
 	padding: 0 var(--field-padding);
 	height: var(--field-size);
-	line-height: var(--field-line-height);
+	font-size: var(--font-sm);
 	outline: none;
 
 	&::placeholder {
@@ -126,7 +125,7 @@ input[type="checkbox"] {
 	padding: 0;
 	width: var(--selector-size);
 	height: var(--selector-size);
-	border-radius: var(--radius-selector);
+	border-radius: calc(var(--radius-selector) / 2);
 	background-color: var(--color-bg);
 	border: var(--border-style);
 
@@ -209,8 +208,8 @@ input[type="radio"] {
 
 label {
 	display: block;
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
 	margin-block-end: var(--label-margin);
 }
 
@@ -218,7 +217,7 @@ fieldset {
 	border: none;
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	padding-block-end: var(--s-3);
 	padding-inline: var(--s-3);
 }
@@ -226,8 +225,8 @@ fieldset {
 legend {
 	border-radius: var(--radius-field);
 	background-color: transparent;
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
 }
 
 article {
@@ -249,7 +248,7 @@ select {
 		var(--s-2)
 	);
 	height: var(--field-size);
-	line-height: var(--field-line-height);
+	font-size: var(--font-sm);
 	display: inline-flex;
 	align-items: center;
 	text-overflow: ellipsis;
@@ -297,8 +296,8 @@ select {
 		background-color: var(--color-bg);
 		color: var(--color-text);
 		border-radius: var(--radius-field);
-		font-size: var(--fonts-xsm);
-		font-weight: var(--semi-bold);
+		font-size: var(--font-sm);
+		font-weight: var(--weight-semi);
 		padding: var(--s-1-5);
 		white-space: nowrap;
 		text-overflow: ellipsis;
@@ -386,8 +385,7 @@ input[type="color"]::-moz-color-swatch {
 input[type="file"] {
 	padding: 0;
 	cursor: pointer;
-	font-size: var(--fonts-sm);
-	line-height: var(--field-line-height);
+	font-size: var(--font-sm);
 	color: var(--color-text-high);
 	overflow: hidden;
 }
@@ -547,7 +545,7 @@ abbr[title] {
 }
 
 .form-errors {
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 }
 
 .form-errors > h4 {
@@ -562,7 +560,7 @@ abbr[title] {
 
 .section > h2 {
 	color: var(--text-lighter);
-	font-size: var(--fonts-md);
+	font-size: var(--font-md);
 }
 
 .stack {
@@ -663,7 +661,7 @@ abbr[title] {
 
 .label__value {
 	color: var(--text-lighter);
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 	margin-block-start: -5px;
 }
 
@@ -678,14 +676,14 @@ abbr[title] {
 .error-message {
 	display: block;
 	color: var(--theme-error);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	margin-block-start: var(--label-margin);
 }
 
 .info-message {
 	display: block;
 	color: var(--text-lighter);
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 	margin-block-start: var(--label-margin);
 }
 
@@ -699,7 +697,7 @@ abbr[title] {
 }
 
 .small-text {
-	font-size: var(--fonts-xxs) !important;
+	font-size: var(--font-2xs) !important;
 }
 
 .colors__summary {
@@ -707,8 +705,8 @@ abbr[title] {
 	border: 2px solid var(--border);
 	border-radius: var(--radius-field);
 	background-color: var(--bg-input);
-	font-weight: var(--bold);
-	font-size: var(--fonts-xs);
+	font-weight: var(--weight-bold);
+	font-size: var(--font-xs);
 
 	& div {
 		display: inline-flex;
@@ -729,8 +727,8 @@ abbr[title] {
 
 .colors__container {
 	width: 100%;
-	font-size: var(--fonts-sm);
-	font-weight: var(--bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-bold);
 	padding: var(--s-3);
 	border: 2px solid var(--border);
 	border-radius: var(--radius-field);
@@ -751,7 +749,7 @@ abbr[title] {
 	border-spacing: 0;
 	text-indent: 0;
 	text-align: left;
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 
 	& svg {
 		width: 1rem;
@@ -791,7 +789,7 @@ abbr[title] {
 }
 
 .playwire__text {
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	text-align: center;
 }
 
diff --git a/app/styles/elements.css b/app/styles/elements.css
index 696335a08..2e5d6360b 100644
--- a/app/styles/elements.css
+++ b/app/styles/elements.css
@@ -4,8 +4,8 @@
 	border: 2px solid var(--border);
 	border-radius: var(--radius-box);
 	background-color: var(--bg-darker);
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
 	white-space: pre-wrap;
 }
 
@@ -14,8 +14,8 @@
 }
 
 .react-aria-Label {
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
 	margin-block-end: var(--label-margin);
 	display: block;
 }
@@ -27,7 +27,7 @@
 	accent-color: var(--theme-secondary);
 	background-color: var(--bg-input);
 	color: var(--text);
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	outline: none;
 	height: 1rem;
 	padding: var(--s-4) var(--s-3);
@@ -79,7 +79,7 @@
 }
 
 .react-aria-Calendar .react-aria-Heading {
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 }
 
 .react-aria-Calendar .react-aria-Button {
@@ -110,7 +110,7 @@
 .react-aria-CalendarCell {
 	display: grid;
 	place-items: center;
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 	padding: var(--s-1-5);
 	width: 35px;
 	height: 35px;
@@ -144,8 +144,8 @@
 	gap: 0.571rem;
 	color: var(--text-color);
 	forced-color-adjust: none;
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
 	margin-block-end: 0;
 }
 
diff --git a/app/styles/utils.css b/app/styles/utils.css
index 23c4bbeb8..a53e40343 100644
--- a/app/styles/utils.css
+++ b/app/styles/utils.css
@@ -1,29 +1,29 @@
 .text-xl {
-	font-size: var(--fonts-xl);
+	font-size: var(--font-xl);
 }
 
 .text-lg {
-	font-size: var(--fonts-lg);
+	font-size: var(--font-lg);
 }
 
 .text-sm {
-	font-size: var(--fonts-sm);
+	font-size: var(--font-sm);
 }
 
 .text-md {
-	font-size: var(--fonts-md);
+	font-size: var(--font-md);
 }
 
 .text-xs {
-	font-size: var(--fonts-xs);
+	font-size: var(--font-xs);
 }
 
 .text-xxs {
-	font-size: var(--fonts-xxs);
+	font-size: var(--font-2xs);
 }
 
 .text-xxxs {
-	font-size: var(--fonts-xxxs);
+	font-size: var(--font-2xs);
 }
 
 .text-center {
@@ -139,15 +139,15 @@
 }
 
 .font-body {
-	font-weight: var(--body);
+	font-weight: var(--weight-body);
 }
 
 .font-semi-bold {
-	font-weight: var(--semi-bold);
+	font-weight: var(--weight-semi);
 }
 
 .font-bold {
-	font-weight: var(--bold);
+	font-weight: var(--weight-bold);
 }
 
 .h-full {
@@ -491,14 +491,6 @@
 	cursor: pointer;
 }
 
-.line-height-tight {
-	line-height: 1.3;
-}
-
-.line-height-very-tight {
-	line-height: 1.1;
-}
-
 .opaque {
 	opacity: 0.6;
 }
@@ -609,7 +601,7 @@
 }
 
 .small-text {
-	font-size: var(--fonts-xxs) !important;
+	font-size: var(--font-2xs) !important;
 }
 
 .dotted {
@@ -621,8 +613,8 @@
 .summary {
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg);
-	font-size: var(--fonts-xs);
-	font-weight: var(--semi-bold);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
 	padding-block: var(--s-1);
 	padding-inline: var(--s-2);
 }
diff --git a/app/styles/vars.css b/app/styles/vars.css
index 8a69fc2ba..11d024c78 100644
--- a/app/styles/vars.css
+++ b/app/styles/vars.css
@@ -159,6 +159,20 @@ html {
 	--focus-ring: 2px solid var(--color-text-accent);
 	--focus-ring-error: 2px solid var(--color-error);
 
+	--font-xl: 1.5rem;
+	--font-lg: 1.2rem;
+	--font-md: 1rem;
+	--font-sm: 0.9rem;
+	--font-xs: 0.8rem;
+	--font-2xs: 0.7rem;
+
+	--weight-extra: 700;
+	--weight-bold: 600;
+	--weight-semi: 500;
+	--weight-body: 400;
+
+	--line-height: 1.4;
+
 	/*
 	Tokens used to define layout dimensions
 
@@ -194,7 +208,6 @@ html {
 	--field-size-lg: calc(var(--_size-field) * 12 * 0.25rem);
 	--field-size-icon: 18px;
 	--field-padding: 1rem;
-	--field-line-height: 1.2rem;
 
 	--selector-size-xs: calc(var(--_size-selector) * 3 * 0.25rem);
 	--selector-size-sm: calc(var(--_size-selector) * 4 * 0.25rem);
@@ -208,22 +221,6 @@ html {
 }
 
 html {
-	--fonts-xl: 1.5rem;
-	--fonts-lg: 1.2rem;
-	--fonts-md: 1rem;
-	--fonts-sm: 0.92rem;
-	--fonts-xsm: 0.85rem;
-	--fonts-xs: 0.8rem;
-	--fonts-xxsm: 0.75rem;
-	--fonts-xxs: 0.7rem;
-	--fonts-xxxs: 0.6rem;
-	--fonts-xxxxs: 0.5rem;
-
-	--extra-bold: 700;
-	--bold: 600;
-	--semi-bold: 500;
-	--body: 400;
-
 	--s-0-5: 0.125rem;
 	--s-1: 0.25rem;
 	--s-1-5: 0.375rem;