diff --git a/custom/assets/instance.css b/custom/assets/instance.css
index 283584662..6c212e6cb 100644
--- a/custom/assets/instance.css
+++ b/custom/assets/instance.css
@@ -6,3 +6,56 @@
 * This may eventuallly be replaced with a function in the admin panel.
  */
  
+/*
+* Change this for border-radius values
+*/
+
+/* Jormungandr
+:root {
+	--radius-xxs: 10px;
+	--radius-xss: 3px; //
+	--radius-xs: 10px;
+	--radius-x: 10px;
+	--radius-s: 10px;
+	--radius-sm: 10px;
+	--radius-m: 10px;
+	--radius: 10px;
+	--radius-md: 10px;
+	--radius-lg: 10px;
+	--radius-xl: 10px;
+	--radius-big: 10px;
+	--radius-ellipse: 10px;
+	--radius-full: 10px;
+	--radius-icon: 0.3rem; //
+	--radius-avatar: 2em; //
+	--radius-online: 120%; //
+	--radius-avatar-2: 20%; //
+	--radius-avatar-3: 75% //
+	--radius-common: 50% //
+}
+*/
+
+/* Default Iceshrimp 
+:root {
+	--radius-xxs: 2px;
+	--radius-xss: 3px; //
+	--radius-xs: 4px;
+	--radius-x: 5px;
+	--radius-s: 6px;
+	--radius-sm: 8px;
+	--radius-m: 10px;
+	--radius: 12px;
+	--radius-md: 16px;
+	--radius-lg: 24px;
+	--radius-xl: 32px;
+	--radius-big: 100px;
+	--radius-ellipse: 999px;
+	--radius-full: 100%;
+	--radius-icon: 0.3rem; //
+	--radius-avatar: 2em; //
+	--radius-online: 120%; //
+	--radius-avatar-2: 20%; //
+	--radius-avatar-3: 75% //
+	--radius-common: 50% //
+}
+*/
diff --git a/packages/backend/src/server/web/bios.css b/packages/backend/src/server/web/bios.css
index d927f26ed..bbd74fbd5 100644
--- a/packages/backend/src/server/web/bios.css
+++ b/packages/backend/src/server/web/bios.css
@@ -32,7 +32,7 @@ html {
 }
 main {
 	background: #1f1d2e;
-	border-radius: 10px;
+	border-radius: var(--radius);
 }
 #tl > div {
 	padding: 16px;
@@ -58,7 +58,7 @@ html {
 	text-align: center;
 }
 button {
-	border-radius: 999px;
+	border-radius: var(--radius-ellipse);
 	padding: 0px 12px 0px 12px;
 	border: none;
 	cursor: pointer;
@@ -71,7 +71,7 @@ button {
 	padding: 12px;
 }
 button {
-	border-radius: 999px;
+	border-radius: var(--radius-ellipse);
 	padding: 0px 12px 0px 12px;
 	border: none;
 	cursor: pointer;
@@ -118,7 +118,7 @@ code {
 textarea {
 	background-color: #444;
 	border: solid #aaa;
-	border-radius: 10px;
+	border-radius: var(--radius-ellipse);
 	color: #e0def4;
 	margin-top: 1rem;
 	margin-bottom: 1rem;
@@ -133,7 +133,7 @@ textarea:focus {
 input {
 	background-color: #666;
 	border: solid #aaa;
-	border-radius: 10px;
+	border-radius: var(--radius-ellipse);
 	color: #e0def4;
 	margin-top: 1rem;
 	margin-bottom: 1rem;
diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index bb27f60af..f93e664de 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -201,7 +201,7 @@
 		}
 
 		button {
-			border-radius: 999px;
+			border-radius: var(--radius-ellipse);
 			padding: 0px 12px 0px 12px;
 			border: none;
 			cursor: pointer;
@@ -273,7 +273,7 @@
 			margin-bottom: 2rem;
 			padding: 0.5rem 1rem;
 			width: 40rem;
-			border-radius: 10px;
+			border-radius: var(--radius);
 			justify-content: center;
 			margin: auto;
 		}
@@ -326,4 +326,4 @@
 
         location.reload();
     }
-})();
\ No newline at end of file
+})();
diff --git a/packages/backend/src/server/web/cli.css b/packages/backend/src/server/web/cli.css
index 9407b5f7b..e3b553bc7 100644
--- a/packages/backend/src/server/web/cli.css
+++ b/packages/backend/src/server/web/cli.css
@@ -3,11 +3,11 @@ html {
 }
 main {
 	background: #1f1d2e;
-	border-radius: 10px;
+	border-radius: var(--radius);
 }
 #tl > div {
 	border: 1px solid #908caa;
-  border-radius: 10px;
+  border-radius: var(--radius);
   margin: 10px;
   padding: 10px;
 	width: fit-content;
@@ -18,7 +18,7 @@ main {
 }
 
 img {
-	border-radius: 10px;
+	border-radius: var(--radius);
 	margin-right: 10px;
 }
 
@@ -40,7 +40,7 @@ html {
 	padding: 10px;
 }
 button {
-	border-radius:999px;
+	border-radius:var(--radius-ellipse);
 	padding:0 40px;
 	margin-top: 1rem;
 	border:none;
@@ -73,7 +73,7 @@ code {
 #text {
 	background-color: #444;
 	border: solid #aaa;
-	border-radius: 10px;
+	border-radius: var(--radius);
 	color: #e0def4;
 	margin-top: 3rem;
 	width: 20rem;
diff --git a/packages/backend/src/services/send-email.ts b/packages/backend/src/services/send-email.ts
index e2e086a12..7643de5bc 100644
--- a/packages/backend/src/services/send-email.ts
+++ b/packages/backend/src/services/send-email.ts
@@ -45,8 +45,8 @@ export async function sendEmail(
 		<title>${subject}</title>
 	</head>
 	<body style="background: #191724; padding: 16px; margin: 0; font-family: sans-serif; font-size: 14px;">
-		<main style="max-width: 500px; margin: 0 auto; background: #1f1d2e; color: #e0def4; border-radius: 20px;">
-			<header style="padding: 32px; background: #31748f; color: #e0def4; display: flex; border-radius: 20px;">
+		<main style="max-width: 500px; margin: 0 auto; background: #1f1d2e; color: #e0def4; border-radius: var(--radius-lg);">
+			<header style="padding: 32px; background: #31748f; color: #e0def4; display: flex; border-radius: var(--radius-lg);">
 				<img src="${meta.logoImageUrl || meta.iconUrl || iconUrl}" style="max-width: 128px; max-height: 72px; vertical-align: bottom; margin-right: 16px;"/>
 				<h1 style="margin: 0 0 1em 0;">${meta.name}</h1>
 			</header>
diff --git a/packages/client/src/components/MkAbuseReport.vue b/packages/client/src/components/MkAbuseReport.vue
index f92d10ba7..c63e05bed 100644
--- a/packages/client/src/components/MkAbuseReport.vue
+++ b/packages/client/src/components/MkAbuseReport.vue
@@ -108,7 +108,7 @@ function resolve() {
 			box-sizing: border-box;
 			align-items: center;
 			padding: 14px;
-			border-radius: 8px;
+			border-radius: var(--radius-sm);
 			--c: rgb(255 196 0 / 15%);
 			background-image: linear-gradient(
 				45deg,
diff --git a/packages/client/src/components/MkAnnouncement.vue b/packages/client/src/components/MkAnnouncement.vue
index bd1091b7f..9f155bbd9 100644
--- a/packages/client/src/components/MkAnnouncement.vue
+++ b/packages/client/src/components/MkAnnouncement.vue
@@ -61,7 +61,7 @@ const gotIt = () => {
 	border-radius: var(--radius);
 
 	> img {
-		border-radius: 10px;
+		border-radius: var(--radius);
 		max-height: 100%;
 		max-width: 100%;
 	}
diff --git a/packages/client/src/components/MkAutocomplete.vue b/packages/client/src/components/MkAutocomplete.vue
index dd7cd142d..5458f7b3f 100644
--- a/packages/client/src/components/MkAutocomplete.vue
+++ b/packages/client/src/components/MkAutocomplete.vue
@@ -530,7 +530,7 @@ onBeforeUnmount(() => {
 			max-width: 28px;
 			max-height: 28px;
 			margin: 0 8px 0 0;
-			border-radius: 100%;
+			border-radius: var(--radius-full);
 		}
 
 		.name {
diff --git a/packages/client/src/components/MkBiteButton.vue b/packages/client/src/components/MkBiteButton.vue
index 6af0969e5..d25736eee 100644
--- a/packages/client/src/components/MkBiteButton.vue
+++ b/packages/client/src/components/MkBiteButton.vue
@@ -58,7 +58,7 @@ async function onClick() {
 	font-size: 16px;
 	width: 2em;
 	height: 2em;
-	border-radius: 100px;
+	border-radius: var(--radius-big);
 	background: var(--bg);
 	vertical-align: middle;
 	margin-left: 0.5em;
@@ -93,7 +93,7 @@ async function onClick() {
 			bottom: -5px;
 			left: -5px;
 			border: 2px solid var(--focus);
-			border-radius: 32px;
+			border-radius: var(--radius-xl);
 		}
 	}
 
diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index 20142037d..a6cfa672f 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -121,7 +121,7 @@ function onMousedown(evt: MouseEvent): void {
 	box-shadow: none;
 	text-decoration: none;
 	background: var(--buttonBg);
-	border-radius: 5px;
+	border-radius: var(--radius-x);
 	overflow: clip;
 	box-sizing: border-box;
 	transition: background 0.1s ease;
@@ -141,7 +141,7 @@ function onMousedown(evt: MouseEvent): void {
 	}
 
 	&.rounded {
-		border-radius: 999px;
+		border-radius: var(--radius-ellipse);
 	}
 
 	&.primary {
@@ -196,14 +196,14 @@ function onMousedown(evt: MouseEvent): void {
 	&.mini {
 		padding: 4px 8px;
 		font-size: max(12px, 0.9em);
-		border-radius: 100px;
+		border-radius: var(--radius-big);
 	}
 
 	&.chip {
 		padding: 4px 12px;
 		font-size: max(12px, 0.9em);
 		min-width: unset;
-		border-radius: 100px;
+		border-radius: var(--radius-big);
 	}
 
 	&:disabled {
@@ -227,14 +227,14 @@ function onMousedown(evt: MouseEvent): void {
 		left: 0;
 		width: 100%;
 		height: 100%;
-		border-radius: 6px;
+		border-radius: var(--radius-s);
 		overflow: hidden;
 
 		::v-deep(div) {
 			position: absolute;
 			width: 2px;
 			height: 2px;
-			border-radius: 100%;
+			border-radius: var(--radius-full);
 			background: rgba(0, 0, 0, 0.1);
 			opacity: 1;
 			transform: scale(1);
diff --git a/packages/client/src/components/MkChannelFollowButton.vue b/packages/client/src/components/MkChannelFollowButton.vue
index 77b5f5f49..b08979705 100644
--- a/packages/client/src/components/MkChannelFollowButton.vue
+++ b/packages/client/src/components/MkChannelFollowButton.vue
@@ -74,7 +74,7 @@ async function onClick() {
 	padding: 0;
 	height: 31px;
 	font-size: 16px;
-	border-radius: 32px;
+	border-radius: var(--radius-xl);
 	background: #fff;
 
 	&.full {
@@ -96,7 +96,7 @@ async function onClick() {
 			bottom: -5px;
 			left: -5px;
 			border: 2px solid var(--focus);
-			border-radius: 32px;
+			border-radius: var(--radius-xl);
 		}
 	}
 
diff --git a/packages/client/src/components/MkChannelPreview.vue b/packages/client/src/components/MkChannelPreview.vue
index 55b411b50..7ef109520 100644
--- a/packages/client/src/components/MkChannelPreview.vue
+++ b/packages/client/src/components/MkChannelPreview.vue
@@ -102,7 +102,7 @@ const bannerStyle = computed(() => {
 			background: rgba(0, 0, 0, 0.2);
 			color: #fff;
 			font-size: 1.2em;
-			border-radius: 999px;
+			border-radius: var(--radius-ellipse);
 		}
 
 		> .status {
@@ -115,7 +115,7 @@ const bannerStyle = computed(() => {
 			-webkit-backdrop-filter: var(--blur, blur(8px));
 			backdrop-filter: var(--blur, blur(8px));
 			background: rgba(0, 0, 0, 0.2);
-			border-radius: 6px;
+			border-radius: var(--radius-s);
 			color: #fff;
 		}
 	}
diff --git a/packages/client/src/components/MkChatPreview.vue b/packages/client/src/components/MkChatPreview.vue
index 5d5849c93..4e92aaa20 100644
--- a/packages/client/src/components/MkChatPreview.vue
+++ b/packages/client/src/components/MkChatPreview.vue
@@ -145,7 +145,7 @@ function isMe(message): boolean {
 			width: 54px;
 			height: 54px;
 			margin: 0 16px 0 0;
-			border-radius: 8px;
+			border-radius: var(--radius-sm);
 			transition: all 0.1s ease;
 		}
 
diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index be477a8f3..92568934e 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -266,7 +266,7 @@ export default defineComponent({
 					background: var(--panel);
 					padding: 6px 10px;
 					font-size: 0.8em;
-					border-radius: 999px;
+					border-radius: var(--radius-ellipse);
 					box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 				}
 
diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue
index 6b379f5e4..fef7b7401 100644
--- a/packages/client/src/components/MkCwButton.vue
+++ b/packages/client/src/components/MkCwButton.vue
@@ -74,7 +74,7 @@ defineExpose({
 		display: inline-block;
 		padding: 0.5em 0;
 		font-size: 0.8em;
-		border-radius: 999px;
+		border-radius: var(--radius-ellipse);
 		box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 		width: 100%;
 		background: var(--cwBg);
@@ -136,7 +136,7 @@ defineExpose({
 			background: var(--panel);
 			padding: 0.4em 1em;
 			font-size: 0.8em;
-			border-radius: 999px;
+			border-radius: var(--radius-ellipse);
 			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 		}
 		&:hover {
@@ -156,7 +156,7 @@ defineExpose({
 			background: var(--panel);
 			padding: 6px 10px;
 			font-size: 0.8em;
-			border-radius: 999px;
+			border-radius: var(--radius-ellipse);
 			box-shadow: 0 0 7px 7px var(--bg);
 		}
 	}
@@ -168,7 +168,7 @@ defineExpose({
 	font-size: 0.7em;
 	color: var(--cwFg);
 	background: var(--cwBg);
-	border-radius: 2px;
+	border-radius: var(--radius-xxs);
 
 	&:hover {
 		background: var(--cwHoverBg);
diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue
index 9e8f615ae..6ba594531 100644
--- a/packages/client/src/components/MkDrive.file.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -224,7 +224,7 @@ async function deleteFile() {
 	position: relative;
 	padding: 8px 0 0 0;
 	min-height: 180px;
-	border-radius: 8px;
+	border-radius: var(--radius-sm);
 
 	&,
 	* {
diff --git a/packages/client/src/components/MkDrive.folder.vue b/packages/client/src/components/MkDrive.folder.vue
index 1bcb9aa26..80f5bfd27 100644
--- a/packages/client/src/components/MkDrive.folder.vue
+++ b/packages/client/src/components/MkDrive.folder.vue
@@ -291,7 +291,7 @@ function onContextmenu(ev: MouseEvent) {
 	padding: 8px;
 	height: 64px;
 	background: var(--driveFolderBg);
-	border-radius: 4px;
+	border-radius: var(--radius-xs);
 
 	&,
 	* {
@@ -326,7 +326,7 @@ function onContextmenu(ev: MouseEvent) {
 			bottom: -4px;
 			left: -4px;
 			border: 2px dashed var(--focus);
-			border-radius: 4px;
+			border-radius: var(--radius-xs);
 		}
 	}
 
diff --git a/packages/client/src/components/MkDriveFileThumbnail.vue b/packages/client/src/components/MkDriveFileThumbnail.vue
index d3925cdcc..acd97091c 100644
--- a/packages/client/src/components/MkDriveFileThumbnail.vue
+++ b/packages/client/src/components/MkDriveFileThumbnail.vue
@@ -86,7 +86,7 @@ const isThumbnailAvailable = computed(() => {
 	position: relative;
 	display: flex;
 	background: var(--panel);
-	border-radius: 8px;
+	border-radius: var(--radius-sm);
 	overflow: clip;
 	border: 0;
 	padding: 0;
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index a9dac3cae..fab2a922a 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -668,7 +668,7 @@ defineExpose({
 					width: var(--eachSize);
 					height: var(--eachSize);
 					contain: strict;
-					border-radius: 4px;
+					border-radius: var(--radius-xs);
 					font-size: 24px;
 
 					&:focus-visible {
diff --git a/packages/client/src/components/MkEmojiPickerDialog.vue b/packages/client/src/components/MkEmojiPickerDialog.vue
index c3212cd40..f944fd4bd 100644
--- a/packages/client/src/components/MkEmojiPickerDialog.vue
+++ b/packages/client/src/components/MkEmojiPickerDialog.vue
@@ -82,7 +82,7 @@ function opening() {
 <style lang="scss" scoped>
 .ryghynhb {
 	&.drawer {
-		border-radius: 24px;
+		border-radius: var(--radius-lg);
 		border-bottom-right-radius: 0;
 		border-bottom-left-radius: 0;
 	}
diff --git a/packages/client/src/components/MkFileListForAdmin.vue b/packages/client/src/components/MkFileListForAdmin.vue
index e39272616..f70c56371 100644
--- a/packages/client/src/components/MkFileListForAdmin.vue
+++ b/packages/client/src/components/MkFileListForAdmin.vue
@@ -132,7 +132,7 @@ const props = defineProps<{
 				padding: 2px 4px;
 				background: #ff0000bf;
 				color: #fff;
-				border-radius: 4px;
+				border-radius: var(--radius-xs);
 				font-size: 85%;
 				animation: sensitive-blink 1s infinite;
 			}
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index ec75fcab9..de2c0440d 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -193,7 +193,7 @@ onBeforeUnmount(() => {
 	font-size: 16px;
 	width: 2em;
 	height: 2em;
-	border-radius: 100px;
+	border-radius: var(--radius-big);
 	background: var(--bg);
 	vertical-align: middle;
 	margin-left: 0.5em;
@@ -227,7 +227,7 @@ onBeforeUnmount(() => {
 			bottom: -5px;
 			left: -5px;
 			border: 2px solid var(--focus);
-			border-radius: 32px;
+			border-radius: var(--radius-xl);
 		}
 	}
 
diff --git a/packages/client/src/components/MkGoogle.vue b/packages/client/src/components/MkGoogle.vue
index 8d7388e84..132afdf6b 100644
--- a/packages/client/src/components/MkGoogle.vue
+++ b/packages/client/src/components/MkGoogle.vue
@@ -39,9 +39,9 @@ const search = () => {
 		height: 40px;
 		font-size: 16px;
 		border: solid 1px var(--divider);
-		border-radius: 4px 0 0 4px;
+		border-radius: var(--radius-xs) 0 0 var(--radius-xs);
 		-webkit-appearance: none;
-		-webkit-border-radius: 4px 0 0 4px;
+		-webkit-border-radius: var(--radius-xs) 0 0 var(--radius-xs);
 	}
 
 	> button {
@@ -50,7 +50,7 @@ const search = () => {
 		padding: 0 16px;
 		border: solid 1px var(--divider);
 		border-left: none;
-		border-radius: 0 4px 4px 0;
+		border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
 
 		&:active {
 			box-shadow: 0 2px 4px rgba(#000, 0.15) inset;
diff --git a/packages/client/src/components/MkImageViewer.vue b/packages/client/src/components/MkImageViewer.vue
index f15092dc7..a498e503f 100644
--- a/packages/client/src/components/MkImageViewer.vue
+++ b/packages/client/src/components/MkImageViewer.vue
@@ -59,7 +59,7 @@ const modal = $ref<InstanceType<typeof MkModal>>();
 		padding: 6px 9px;
 		font-size: 90%;
 		background: rgba(0, 0, 0, 0.5);
-		border-radius: 6px;
+		border-radius: var(--radius-s);
 		color: #fff;
 	}
 
diff --git a/packages/client/src/components/MkInstanceCardMini.vue b/packages/client/src/components/MkInstanceCardMini.vue
index ff242f5a6..c56d12319 100644
--- a/packages/client/src/components/MkInstanceCardMini.vue
+++ b/packages/client/src/components/MkInstanceCardMini.vue
@@ -63,14 +63,14 @@ function getInstanceIcon(instance): string {
 	align-items: center;
 	padding: 16px;
 	background: var(--panel);
-	border-radius: 8px;
+	border-radius: var(--radius-sm);
 
 	> :global(.icon) {
 		display: block;
 		width: ($bodyTitleHieght + $bodyInfoHieght);
 		height: ($bodyTitleHieght + $bodyInfoHieght);
 		object-fit: cover;
-		border-radius: 4px;
+		border-radius: var(--radius-xs);
 		margin-right: 10px;
 	}
 
diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
index 7b044f78a..d5db17d44 100644
--- a/packages/client/src/components/MkInstanceTicker.vue
+++ b/packages/client/src/components/MkInstanceTicker.vue
@@ -66,7 +66,7 @@ function getInstanceIcon(instance): string {
 	height: 1.1em;
 	justify-self: flex-end;
 	padding: 0.2em 0.4em;
-	border-radius: 100px;
+	border-radius: var(--radius-big);
 	font-size: 0.8em;
 	text-shadow: 0 2px 2px var(--shadow);
 	overflow: hidden;
@@ -77,7 +77,7 @@ function getInstanceIcon(instance): string {
 
 	> .icon {
 		height: 100%;
-		border-radius: 0.3rem;
+		border-radius: var(--radius-icon);
 	}
 
 	> .name {
diff --git a/packages/client/src/components/MkLaunchPad.vue b/packages/client/src/components/MkLaunchPad.vue
index e26105622..5c125df60 100644
--- a/packages/client/src/components/MkLaunchPad.vue
+++ b/packages/client/src/components/MkLaunchPad.vue
@@ -123,12 +123,11 @@ function close() {
 	overflow: auto;
 	overscroll-behavior: contain;
 	text-align: left;
-	border-radius: 16px;
-
+	border-radius: var(--radius-md);
 	&.asDrawer {
 		width: 100%;
 		padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
-		border-radius: 24px;
+		border-radius: var(--radius-lg);
 		border-bottom-right-radius: 0;
 		border-bottom-left-radius: 0;
 		text-align: center;
@@ -151,7 +150,7 @@ function close() {
 			justify-content: center;
 			vertical-align: bottom;
 			height: 100px;
-			border-radius: 10px;
+			border-radius: var(--radius-m);
 
 			&:hover,
 			&:focus-visible {
diff --git a/packages/client/src/components/MkMedia.vue b/packages/client/src/components/MkMedia.vue
index 315e3eec6..576d63695 100644
--- a/packages/client/src/components/MkMedia.vue
+++ b/packages/client/src/components/MkMedia.vue
@@ -186,7 +186,7 @@ watch(
 		display: flex;
 		gap: 4px;
 		position: absolute;
-		border-radius: 6px;
+		border-radius: var(--radius-s);
 		overflow: hidden;
 		top: 12px;
 		right: 12px;
@@ -217,7 +217,7 @@ watch(
 
 		> .gif {
 			background-color: var(--fg);
-			border-radius: 6px;
+			border-radius: var(--radius-s);
 			color: var(--accentLighten);
 			display: inline-block;
 			font-size: 14px;
diff --git a/packages/client/src/components/MkMediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
index 82e56b5b5..275c3eefe 100644
--- a/packages/client/src/components/MkMediaBanner.vue
+++ b/packages/client/src/components/MkMediaBanner.vue
@@ -85,7 +85,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .mk-media-banner {
 	width: 100%;
-	border-radius: 4px;
+	border-radius: var(--radius-xs);
 	margin-top: 4px;
 	overflow: hidden;
 	--plyr-color-main: var(--accent);
diff --git a/packages/client/src/components/MkMediaCaption.vue b/packages/client/src/components/MkMediaCaption.vue
index b44fa0d52..a3378d495 100644
--- a/packages/client/src/components/MkMediaCaption.vue
+++ b/packages/client/src/components/MkMediaCaption.vue
@@ -294,7 +294,7 @@ export default defineComponent({
 		padding: 6px 9px;
 		font-size: 90%;
 		background: rgba(0, 0, 0, 0.5);
-		border-radius: 6px;
+		border-radius: var(--radius-s);
 		color: #fff;
 	}
 
diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 0c9a7a321..10b063f26 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -243,7 +243,7 @@ const previewableCount = props.mediaList.filter((media) =>
 			> div,
 			> button {
 				overflow: hidden;
-				border-radius: 6px;
+				border-radius: var(--radius-s);
 				pointer-events: all;
 				min-height: 50px;
 			}
@@ -297,7 +297,7 @@ const previewableCount = props.mediaList.filter((media) =>
 	text-align: center;
 	padding: 10px;
 	background: rgba(0, 0, 0, 0.5);
-	border-radius: 5px;
+	border-radius: var(--radius-x);;
 
 	max-height: 10vh;
 	overflow-x: clip;
diff --git a/packages/client/src/components/MkMention.vue b/packages/client/src/components/MkMention.vue
index d1f79dc00..4710271df 100644
--- a/packages/client/src/components/MkMention.vue
+++ b/packages/client/src/components/MkMention.vue
@@ -63,7 +63,7 @@ const isMe =
 	display: inline-block;
 	padding: 2px 8px 2px 2px;
 	margin-block: 2px;
-	border-radius: 999px;
+	border-radius: var(--radius-ellipse);
 	max-width: 100%;
 	white-space: nowrap;
 	text-overflow: ellipsis;
@@ -90,7 +90,7 @@ const isMe =
 		object-fit: cover;
 		margin: 0 0.2em 0 0;
 		vertical-align: bottom;
-		border-radius: 100%;
+		border-radius: var(--radius-full);
 	}
 
 	> .main > .host {
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index a7a593114..cef12eb8c 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -376,7 +376,7 @@ onBeforeUnmount(() => {
 			width: calc(100% - 16px);
 			margin-bottom: 0.2rem;
 			height: 100%;
-			border-radius: 6px;
+			border-radius: var(--radius-s);
 		}
 
 		> * {
@@ -516,7 +516,7 @@ onBeforeUnmount(() => {
 	&.asDrawer {
 		padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0;
 		width: 100%;
-		border-radius: 24px;
+		border-radius: var(--radius-lg);
 		border-bottom-right-radius: 0;
 		border-bottom-left-radius: 0;
 
@@ -526,7 +526,7 @@ onBeforeUnmount(() => {
 
 			&:before {
 				width: calc(100% - 24px);
-				border-radius: 12px;
+				border-radius: var(--radius);
 			}
 
 			> i,
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 0779591c4..baa34ffa9 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -769,7 +769,7 @@ defineExpose({
 			.avatar {
 				width: 1.2em;
 				height: 1.2em;
-				border-radius: 2em;
+				border-radius: var(--radius-avatar);
 				overflow: hidden;
 				margin-right: 0.4em;
 				background: var(--panelHighlight);
@@ -843,7 +843,7 @@ defineExpose({
 					> * {
 						padding: 16px;
 						border: solid 1px var(--renote);
-						border-radius: 8px;
+						border-radius: var(--radius-sm);
 						transition: background 0.2s;
 						&:hover,
 						&:focus-within {
@@ -893,12 +893,12 @@ defineExpose({
 					&:first-of-type {
 						margin-left: -0.5em;
 						&::before {
-							border-radius: 100px 0 0 100px;
+							border-radius: var(--radius-big) 0 0 var(--radius-big);
 						}
 					}
 					&:last-of-type {
 						&::before {
-							border-radius: 0 100px 100px 0;
+							border-radius: 0 var(--radius-big) var(--radius-big) 0;
 						}
 					}
 					&:hover {
diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
index 0271c7ab0..5e515d3ab 100644
--- a/packages/client/src/components/MkNoteHeader.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -77,7 +77,7 @@ const showTicker =
 	align-items: center;
 	white-space: nowrap;
 	justify-self: flex-end;
-	border-radius: 100px;
+	border-radius: var(--radius-big);
 	font-size: 0.8em;
 	> .avatar {
 		width: 3.7em;
@@ -131,7 +131,7 @@ const showTicker =
 				padding: 1px 6px;
 				font-size: 80%;
 				border: solid 0.5px var(--divider);
-				border-radius: 3px;
+				border-radius: var(--radius-xss);
 			}
 
 			&:hover {
diff --git a/packages/client/src/components/MkNotePreview.vue b/packages/client/src/components/MkNotePreview.vue
index 607df89eb..93624ce4d 100644
--- a/packages/client/src/components/MkNotePreview.vue
+++ b/packages/client/src/components/MkNotePreview.vue
@@ -58,7 +58,7 @@ const props = defineProps<{
 		margin: 0 10px 0 0;
 		width: 40px;
 		height: 40px;
-		border-radius: 8px;
+		border-radius: var(--radius-sm);
 		pointer-events: none;
 	}
 
diff --git a/packages/client/src/components/MkNoteSimple.vue b/packages/client/src/components/MkNoteSimple.vue
index 41ae29881..2d2a21190 100644
--- a/packages/client/src/components/MkNoteSimple.vue
+++ b/packages/client/src/components/MkNoteSimple.vue
@@ -52,7 +52,7 @@ const props = defineProps<{
 		margin: 0 10px 0 0;
 		width: 40px;
 		height: 40px;
-		border-radius: 8px;
+		border-radius: var(--radius-sm);
 	}
 
 	> .main {
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 589dd9f7d..29cd2d831 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -440,7 +440,7 @@ function noteClick(e) {
 				display: block;
 				width: 38px;
 				height: 38px;
-				border-radius: 8px;
+				border-radius: var(--radius-sm);
 			}
 		}
 
@@ -500,12 +500,12 @@ function noteClick(e) {
 					&:first-of-type {
 						margin-left: -0.5em;
 						&::before {
-							border-radius: 100px 0 0 100px;
+							border-radius: var(--radius-big) 0 0 var(--radius-big);
 						}
 					}
 					&:last-of-type {
 						&::before {
-							border-radius: 0 100px 100px 0;
+							border-radius: 0 var(--radius-big) var(--radius-big) 0;
 						}
 					}
 					&:hover {
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index cec021b7a..80f6b3ac2 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -429,7 +429,7 @@ useTooltip(reactionRef, (showing) => {
 			display: block;
 			width: 100%;
 			height: 100%;
-			border-radius: 6px;
+			border-radius: var(--radius-s);
 		}
 
 		> .sub-icon {
@@ -440,7 +440,7 @@ useTooltip(reactionRef, (showing) => {
 			width: 20px;
 			height: 20px;
 			box-sizing: border-box;
-			border-radius: 100%;
+			border-radius: var(--radius-full);
 			background: var(--panel);
 			box-shadow: 0 0 0 3px var(--panel);
 			font-size: 12px;
diff --git a/packages/client/src/components/MkNotificationToast.vue b/packages/client/src/components/MkNotificationToast.vue
index 20b084855..2d24f32fa 100644
--- a/packages/client/src/components/MkNotificationToast.vue
+++ b/packages/client/src/components/MkNotificationToast.vue
@@ -72,7 +72,7 @@ onMounted(() => {
 	> .notification {
 		height: 100%;
 		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-		border-radius: 8px;
+		border-radius: var(--radius-sm);
 		overflow: hidden;
 	}
 }
diff --git a/packages/client/src/components/MkPoll.vue b/packages/client/src/components/MkPoll.vue
index 776c40855..62fbe1f42 100644
--- a/packages/client/src/components/MkPoll.vue
+++ b/packages/client/src/components/MkPoll.vue
@@ -159,7 +159,7 @@ const vote = async (id) => {
 			padding: 4px;
 			//border: solid 0.5px var(--divider);
 			background: var(--accentedBg);
-			border-radius: 4px;
+			border-radius: var(--radius-xs);
 			overflow: hidden;
 			cursor: pointer;
 
@@ -182,7 +182,7 @@ const vote = async (id) => {
 				display: inline-block;
 				padding: 3px 5px;
 				background: var(--panel);
-				border-radius: 3px;
+				border-radius: var(--radius-xss);
 
 				> i {
 					margin-right: 4px;
diff --git a/packages/client/src/components/MkPopupMenu.vue b/packages/client/src/components/MkPopupMenu.vue
index 12a18221c..62488bdfb 100644
--- a/packages/client/src/components/MkPopupMenu.vue
+++ b/packages/client/src/components/MkPopupMenu.vue
@@ -48,7 +48,7 @@ let modal = $ref<InstanceType<typeof MkModal>>();
 <style lang="scss" scoped>
 .sfhdhdhq {
 	&.drawer {
-		border-radius: 24px;
+		border-radius: var(--radius-lg);
 		border-bottom-right-radius: 0;
 		border-bottom-left-radius: 0;
 	}
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index ecdef751d..3c0372b55 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -1110,7 +1110,7 @@ onMounted(() => {
 				font-size: inherit !important;
 				width: 34px;
 				height: 34px;
-				border-radius: 6px;
+				border-radius: var(--radius-s);
 
 				&:hover {
 					background: var(--X5);
@@ -1129,7 +1129,7 @@ onMounted(() => {
 				line-height: 34px;
 				font-weight: bold;
 				vertical-align: bottom;
-				border-radius: 4px;
+				border-radius: var(--radius-xs);
 				font-size: 0.9em;
 
 				&:disabled {
@@ -1184,7 +1184,7 @@ onMounted(() => {
 
 				> button {
 					padding: 2px;
-					border-radius: 8px;
+					border-radius: var(--radius-sm);
 
 					> i {
 						transform: translateX(2px);
@@ -1194,7 +1194,7 @@ onMounted(() => {
 				> span {
 					margin: 0.3rem;
 					padding: 4px 0 4px 4px;
-					border-radius: 999px;
+					border-radius: var(--radius-ellipse);
 					background: var(--interactiveElementHovered);
 
 					> button {
@@ -1265,7 +1265,7 @@ onMounted(() => {
 				font-size: 16px;
 				width: 40px;
 				height: 40px;
-				border-radius: 6px;
+				border-radius: var(--radius-s);
 
 				&:hover {
 					background: var(--postFormButtonHoverBg);
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index a1cb191de..8aa90d404 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -173,7 +173,7 @@ function showFileMenu(file, ev: MouseEvent) {
 			width: 64px;
 			height: 64px;
 			margin-right: 4px;
-			border-radius: 4px;
+			border-radius: var(--radius-xs);
 			cursor: move;
 
 			&:hover > .remove {
diff --git a/packages/client/src/components/MkQuoteButton.vue b/packages/client/src/components/MkQuoteButton.vue
index 65727cda3..7c7d9c343 100644
--- a/packages/client/src/components/MkQuoteButton.vue
+++ b/packages/client/src/components/MkQuoteButton.vue
@@ -41,7 +41,7 @@ function quote(): void {
 	height: 32px;
 	margin: 2px;
 	padding: 0 6px;
-	border-radius: 4px;
+	border-radius: var(--radius-xs);
 
 	&.renoted {
 		background: var(--accent);
diff --git a/packages/client/src/components/MkReactedUsers.vue b/packages/client/src/components/MkReactedUsers.vue
index b483e81e6..2fd82b28d 100644
--- a/packages/client/src/components/MkReactedUsers.vue
+++ b/packages/client/src/components/MkReactedUsers.vue
@@ -82,7 +82,7 @@ onMounted(() => {
 .tab {
 	padding: 4px 6px;
 	border: solid 1px var(--divider);
-	border-radius: 6px;
+	border-radius: var(--radius-s);
 }
 
 .tabActive {
diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index 1c63aa8b6..9c8177074 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -111,7 +111,7 @@ useTooltip(
 		content: "";
 		position: absolute;
 		inset: 0 2px;
-		border-radius: 4px;
+		border-radius: var(--radius-xs);
 		z-index: -1;
 	}
 	&.newlyAdded {
diff --git a/packages/client/src/components/MkShowMoreButton.vue b/packages/client/src/components/MkShowMoreButton.vue
index 7fd09489f..e275e3add 100644
--- a/packages/client/src/components/MkShowMoreButton.vue
+++ b/packages/client/src/components/MkShowMoreButton.vue
@@ -50,7 +50,7 @@ defineExpose({
 		background: var(--panel);
 		padding: 0.5em 0;
 		font-size: 0.8em;
-		border-radius: 999px;
+		border-radius: var(--radius-ellipse);
 		box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 		width: 100%;
 	}
diff --git a/packages/client/src/components/MkSignin.vue b/packages/client/src/components/MkSignin.vue
index 7511c4d78..7d09524af 100644
--- a/packages/client/src/components/MkSignin.vue
+++ b/packages/client/src/components/MkSignin.vue
@@ -384,7 +384,7 @@ function showSuspendedDialog() {
 			background: var(--accentedBg);
 			background-position: center;
 			background-size: cover;
-			border-radius: 100%;
+			border-radius: var(--radius-full);
 			transition: background-image 0.2s ease-in;
 		}
 	}
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index f32869979..e39d09bfc 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -303,7 +303,7 @@ function focusFooter(ev) {
 }
 .reply-icon {
 	display: inline-block;
-	border-radius: 6px;
+	border-radius: var(--radius-s);
 	padding: 0.2em 0.2em;
 	margin-right: 0.2em;
 	color: var(--accent);
@@ -357,7 +357,7 @@ function focusFooter(ev) {
 			}
 			.reply-icon {
 				display: inline-block;
-				border-radius: 6px;
+				border-radius: var(--radius-s);
 				padding: 0.2em 0.2em;
 				margin-right: 0.2em;
 				color: var(--accent);
@@ -384,7 +384,7 @@ function focusFooter(ev) {
 				> * {
 					padding: 16px;
 					border: solid 1px var(--renote);
-					border-radius: 8px;
+					border-radius: var(--radius-sm);
 					transition: background 0.2s;
 					&:hover,
 					&:focus-within {
diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue
index 14974bbba..a5ee2f46f 100644
--- a/packages/client/src/components/MkSuperMenu.vue
+++ b/packages/client/src/components/MkSuperMenu.vue
@@ -155,7 +155,7 @@ export default defineComponent({
 					flex-direction: column;
 					padding: 18px 16px 16px 16px;
 					background: var(--panel);
-					border-radius: 8px;
+					border-radius: var(--radius-sm);
 					text-align: center;
 
 					> .icon {
diff --git a/packages/client/src/components/MkTab.vue b/packages/client/src/components/MkTab.vue
index 8e3108ecb..60da6b35e 100644
--- a/packages/client/src/components/MkTab.vue
+++ b/packages/client/src/components/MkTab.vue
@@ -118,7 +118,7 @@ export default defineComponent({
 			margin: 0;
 			margin-right: 8px;
 			padding: 0.5em 1em;
-			border-radius: 100px;
+			border-radius: var(--radius-big);
 			background: var(--buttonBg);
 			> i {
 				margin-top: -0.1em;
diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/MkTimeline.vue
index 60851c157..93784eb54 100644
--- a/packages/client/src/components/MkTimeline.vue
+++ b/packages/client/src/components/MkTimeline.vue
@@ -314,7 +314,7 @@ const newPostsGlowOpacity = computed(
 		position: absolute;
 		top: 120%;
 		margin-inline: auto;
-		border-radius: 2em;
+		border-radius: var(--radius-avatar);
 		padding: 0.5em 1.2em;
 		background: var(--accentedBg);
 		border: 0;
diff --git a/packages/client/src/components/MkToast.vue b/packages/client/src/components/MkToast.vue
index 8d173e3e1..94dd7dd61 100644
--- a/packages/client/src/components/MkToast.vue
+++ b/packages/client/src/components/MkToast.vue
@@ -64,7 +64,7 @@ onMounted(() => {
 		max-width: calc(100% - 32px);
 		width: min-content;
 		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-		border-radius: 8px;
+		border-radius: var(--radius-sm);
 		overflow: clip;
 		text-align: center;
 		pointer-events: none;
diff --git a/packages/client/src/components/MkTooltip.vue b/packages/client/src/components/MkTooltip.vue
index dd3d801e2..85d584d36 100644
--- a/packages/client/src/components/MkTooltip.vue
+++ b/packages/client/src/components/MkTooltip.vue
@@ -107,7 +107,7 @@ onUnmounted(() => {
 	padding: 8px 12px;
 	box-sizing: border-box;
 	text-align: center;
-	border-radius: 4px;
+	border-radius: var(--radius-xs);
 	border: solid 0.5px var(--divider);
 	pointer-events: none;
 	transform-origin: center center;
diff --git a/packages/client/src/components/MkUpdated.vue b/packages/client/src/components/MkUpdated.vue
index daa5f5fd8..951ad6d79 100644
--- a/packages/client/src/components/MkUpdated.vue
+++ b/packages/client/src/components/MkUpdated.vue
@@ -84,7 +84,7 @@ console.log(data);
 
 .releaseNotes {
 	> img {
-		border-radius: 10px;
+		border-radius: var(--radius-m);
 	}
 }
 </style>
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 5b7ff8123..d56f1523d 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -270,7 +270,7 @@ onUnmounted(() => {
 			width: 1.2em;
 			height: 1.2em;
 			vertical-align: middle;
-			border-radius: 4px;
+			border-radius: var(--radius-xs);
 		}
 		&:hover,
 		&:focus,
diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
index 4a7036f71..c059d727a 100644
--- a/packages/client/src/components/MkUserCardMini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -63,7 +63,7 @@ if (props.withChart) {
 	align-items: center;
 	padding: 16px;
 	background: var(--panel);
-	border-radius: 8px;
+	border-radius: var(--radius-sm);
 	transition: background 0.2s;
 
 	> :global(.avatar) {
diff --git a/packages/client/src/components/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue
index 9d2ab0154..f1f95c3fc 100644
--- a/packages/client/src/components/MkUserInfo.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -140,7 +140,7 @@ let collapsed = $ref(isLong);
 			color: #fff;
 			background: rgba(0, 0, 0, 0.7);
 			font-size: 0.7em;
-			border-radius: 6px;
+			border-radius: var(--radius-s);
 		}
 		&.detailed::after {
 			content: "";
@@ -238,7 +238,7 @@ let collapsed = $ref(isLong);
 			background: var(--panel);
 			padding: 0.4em 1em;
 			font-size: 0.8em;
-			border-radius: 999px;
+			border-radius: var(--radius-ellipse);
 			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 		}
 		&:hover {
@@ -257,7 +257,7 @@ let collapsed = $ref(isLong);
 			background: var(--panel);
 			padding: 6px 10px;
 			font-size: 0.8em;
-			border-radius: 999px;
+			border-radius: var(--radius-ellipse);
 			box-shadow: 0 0 7px 7px var(--bg);
 		}
 	}
diff --git a/packages/client/src/components/MkUserOnlineIndicator.vue b/packages/client/src/components/MkUserOnlineIndicator.vue
index 8fa49e9c7..ad97db9cd 100644
--- a/packages/client/src/components/MkUserOnlineIndicator.vue
+++ b/packages/client/src/components/MkUserOnlineIndicator.vue
@@ -28,7 +28,7 @@ const text = $computed(() => {
 <style lang="scss" scoped>
 .fzgwjkgc {
 	box-shadow: 0 0 0 3px var(--panel);
-	border-radius: 120%; // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる
+	border-radius: var(--radius-online); // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる
 
 	&.online {
 		background: #9ccfd8;
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index 9b4d92e53..037d63d12 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -173,7 +173,7 @@ function choose(visibility: (typeof misskey.noteVisibilities)[number]): void {
 	&.asDrawer {
 		padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0;
 		width: 100%;
-		border-radius: 24px;
+		border-radius: var(--radius-lg);
 		border-bottom-right-radius: 0;
 		border-bottom-left-radius: 0;
 		.icon {
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index f6241512f..fdce16166 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -202,7 +202,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 			height: 32px;
 			color: #fff;
 			background: rgba(#000, 0.7);
-			border-radius: 4px;
+			border-radius: var(--radius-xs);
 		}
 
 		> .config {
diff --git a/packages/client/src/components/form/checkbox.vue b/packages/client/src/components/form/checkbox.vue
index a4d9716bb..b380cad48 100644
--- a/packages/client/src/components/form/checkbox.vue
+++ b/packages/client/src/components/form/checkbox.vue
@@ -82,7 +82,7 @@ const toggle = () => {
 		outline: none;
 		background: var(--panel);
 		border: solid 1px var(--panel);
-		border-radius: 4px;
+		border-radius: var(--radius-xs);
 		cursor: pointer;
 		transition: inherit;
 
diff --git a/packages/client/src/components/form/folder.vue b/packages/client/src/components/form/folder.vue
index fb0b081ad..6cf57bba5 100644
--- a/packages/client/src/components/form/folder.vue
+++ b/packages/client/src/components/form/folder.vue
@@ -27,7 +27,7 @@ defineProps<{
 .dwzlatin {
 	display: block;
 	overflow: clip;
-	border-radius: 6px;
+	border-radius: var(--radius-sm);
 
 	> .header {
 		display: flex;
@@ -82,7 +82,7 @@ defineProps<{
 
 	> .body {
 		background: var(--panel);
-		border-radius: 0 0 6px 6px;
+		border-radius: 0 0 var(--radius-s) var(--radius-s);
 	}
 }
 </style>
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index f54e25fdc..2d2edebcc 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -226,7 +226,7 @@ defineExpose({
 				color: var(--fg);
 				background: var(--panel);
 				border: solid 1px var(--panel);
-				border-radius: 6px;
+				border-radius: var(--radius-sm);
 				outline: none;
 				box-shadow: none;
 				box-sizing: border-box;
diff --git a/packages/client/src/components/form/link.vue b/packages/client/src/components/form/link.vue
index 01acb2951..286d81d99 100644
--- a/packages/client/src/components/form/link.vue
+++ b/packages/client/src/components/form/link.vue
@@ -52,7 +52,7 @@ const props = defineProps<{
 		box-sizing: border-box;
 		padding: 10px 14px;
 		background: var(--buttonBg);
-		border-radius: 6px;
+		border-radius: var(--radius-sm);
 		font-size: 0.9em;
 
 		&:hover {
diff --git a/packages/client/src/components/form/radio.vue b/packages/client/src/components/form/radio.vue
index 31316fb85..4cd1c4b1c 100644
--- a/packages/client/src/components/form/radio.vue
+++ b/packages/client/src/components/form/radio.vue
@@ -45,7 +45,7 @@ function toggle(x) {
 	background-color: var(--panel);
 	background-clip: padding-box !important;
 	border: solid 1px var(--panel);
-	border-radius: 6px;
+	border-radius: var(--radius-sm);
 	transition: all 0.2s;
 
 	> * {
@@ -103,7 +103,7 @@ function toggle(x) {
 		height: 14px;
 		background: none;
 		border: solid 2px var(--inputBorder);
-		border-radius: 100%;
+		border-radius: var(--radius-full);
 		transition: inherit;
 		pointer-events: none;
 
@@ -115,7 +115,7 @@ function toggle(x) {
 			right: 3px;
 			bottom: 3px;
 			left: 3px;
-			border-radius: 100%;
+			border-radius: var(--radius-full);
 			opacity: 0;
 			transform: scale(0);
 			transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue
index 38ebe29e3..946185aa6 100644
--- a/packages/client/src/components/form/range.vue
+++ b/packages/client/src/components/form/range.vue
@@ -131,7 +131,7 @@ function tooltipHide() {
 		padding: 10px 12px;
 		background: var(--panel);
 		border: solid 1px var(--panel);
-		border-radius: 6px;
+		border-radius: var(--radius-sm);
 
 		> .container {
 			position: relative;
@@ -140,7 +140,7 @@ function tooltipHide() {
 			@mixin track {
 				height: 3px;
 				background: rgba(0, 0, 0, 0.1);
-				border-radius: 999px;
+				border-radius: var(--radius-ellipse);
 			}
 
 			@mixin fill {
@@ -151,7 +151,7 @@ function tooltipHide() {
 				width: $thumbWidth;
 				height: $thumbHeight;
 				background: var(--accent);
-				border-radius: 999px;
+				border-radius: var(--radius-ellipse);
 
 				&:hover {
 					background: var(--accentLighten);
diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue
index 08f0e47df..1f200399c 100644
--- a/packages/client/src/components/form/select.vue
+++ b/packages/client/src/components/form/select.vue
@@ -245,7 +245,7 @@ function show(ev: MouseEvent) {
 			color: var(--fg);
 			background: var(--panel);
 			border: solid 1px var(--panel);
-			border-radius: 6px;
+			border-radius: var(--radius-s);
 			outline: none;
 			box-shadow: none;
 			box-sizing: border-box;
diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue
index 6e2725bfa..31035bb01 100644
--- a/packages/client/src/components/form/switch.vue
+++ b/packages/client/src/components/form/switch.vue
@@ -65,7 +65,7 @@ function toggle(x) {
 		background: var(--swutchOffBg);
 		background-clip: content-box;
 		border: solid 1px var(--swutchOffBg);
-		border-radius: 999px;
+		border-radius: var(--radius-ellipse);
 		transition: inherit;
 		user-select: none;
 		pointer-events: none;
@@ -78,7 +78,7 @@ function toggle(x) {
 			width: 15px;
 			height: 15px;
 			background: var(--swutchOffFg);
-			border-radius: 999px;
+			border-radius: var(--radius-ellipse);
 			transition: all 0.2s ease;
 		}
 	}
diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index 9ea38670c..6ef084e19 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -233,7 +233,7 @@ export default defineComponent({
 				color: var(--fg);
 				background: var(--panel);
 				border: solid 1px var(--panel);
-				border-radius: 6px;
+				border-radius: var(--radius-s);
 				outline: none;
 				box-shadow: none;
 				box-sizing: border-box;
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
index 77f545e4e..4144f976c 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -129,7 +129,7 @@ watch(
 	display: inline-block;
 	vertical-align: bottom;
 	flex-shrink: 0;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 	line-height: 16px;
 
 	> .inner {
@@ -138,7 +138,7 @@ watch(
 		left: 0;
 		right: 0;
 		top: 0;
-		border-radius: 100%;
+		border-radius: var(--radius-full);
 		z-index: 1;
 		overflow: hidden;
 		object-fit: cover;
@@ -156,10 +156,10 @@ watch(
 	}
 
 	&.square {
-		border-radius: 20%;
+		border-radius: var(--radius-avatar-2);
 
 		> .inner {
-			border-radius: 20%;
+			border-radius: var(--radius-avatar-2);
 		}
 	}
 
@@ -176,12 +176,12 @@ watch(
 		}
 
 		&:before {
-			border-radius: 0 75% 75%;
+			border-radius: 0 var(--radius-avatar3) var(--radius-avatar3);
 			transform: rotate(37.5deg) skew(30deg);
 		}
 
 		&:after {
-			border-radius: 75% 0 75% 75%;
+			border-radius: var(--radius-avatar3) 0 var(--radius-avatar3) var(--radius-avatar3);
 			transform: rotate(-37.5deg) skew(-30deg);
 		}
 
diff --git a/packages/client/src/components/global/MkError.vue b/packages/client/src/components/global/MkError.vue
index 77745d017..fd87af244 100644
--- a/packages/client/src/components/global/MkError.vue
+++ b/packages/client/src/components/global/MkError.vue
@@ -40,7 +40,7 @@ import { instance } from "@/instance";
 		vertical-align: bottom;
 		height: 128px;
 		margin-bottom: 16px;
-		border-radius: 16px;
+		border-radius: var(--radius-md);
 	}
 }
 </style>
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index d1165d27a..ea2da1a7e 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -564,7 +564,7 @@ onUnmounted(() => {
 			left: 0;
 			height: 3px;
 			background: var(--accent);
-			border-radius: 999px;
+			border-radius: var(--radius-ellipse);
 			transition:
 				width 0.2s,
 				transform 0.2s;
diff --git a/packages/client/src/components/page/page.post.vue b/packages/client/src/components/page/page.post.vue
index 2213d3021..9a9194fd8 100644
--- a/packages/client/src/components/page/page.post.vue
+++ b/packages/client/src/components/page/page.post.vue
@@ -102,7 +102,7 @@ export default defineComponent({
 .ngbfujlo {
 	position: relative;
 	padding: 32px;
-	border-radius: 6px;
+	border-radius: var(--radius-s);
 	box-shadow: 0 2px 8px var(--shadow);
 	z-index: 1;
 
diff --git a/packages/client/src/pages/_error_.vue b/packages/client/src/pages/_error_.vue
index 4f536c2b5..42ed33fba 100644
--- a/packages/client/src/pages/_error_.vue
+++ b/packages/client/src/pages/_error_.vue
@@ -103,7 +103,7 @@ definePageMetadata({
 		vertical-align: bottom;
 		height: 128px;
 		margin-bottom: 24px;
-		border-radius: 16px;
+		border-radius: var(--radius-md);
 	}
 
 	> .error {
diff --git a/packages/client/src/pages/about-iceshrimp.vue b/packages/client/src/pages/about-iceshrimp.vue
index e2789e3a0..9404af7ba 100644
--- a/packages/client/src/pages/about-iceshrimp.vue
+++ b/packages/client/src/pages/about-iceshrimp.vue
@@ -212,7 +212,7 @@ definePageMetadata({
 			display: block;
 			width: 250px;
 			margin: 0 auto;
-			border-radius: 5px;
+			border-radius: var(--radius-x);
 		}
 
 		> .misskey {
diff --git a/packages/client/src/pages/about.emojis.vue b/packages/client/src/pages/about.emojis.vue
index 853a2bef2..db3f86cff 100644
--- a/packages/client/src/pages/about.emojis.vue
+++ b/packages/client/src/pages/about.emojis.vue
@@ -146,7 +146,7 @@ export default defineComponent({
 				padding: 4px 8px;
 				font-size: 0.9em;
 				background: var(--accentedBg);
-				border-radius: 5px;
+				border-radius: var(--radius-x);
 
 				&.active {
 					background: var(--accent);
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index 0f4f3c7bc..44e973c5f 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -429,7 +429,7 @@ function syncSlide(index) {
 
 .fwhjspax {
 	text-align: center;
-	border-radius: 10px;
+	border-radius: var(--radius-m);
 	overflow: clip;
 	background-size: cover;
 	background-position: center center;
@@ -441,7 +441,7 @@ function syncSlide(index) {
 			display: block;
 			margin: 16px auto 0 auto;
 			height: 64px;
-			border-radius: 8px;
+			border-radius: var(--radius-sm);
 
 			&.noAnimation {
 				animation: none;
diff --git a/packages/client/src/pages/admin/_header_.vue b/packages/client/src/pages/admin/_header_.vue
index ae0e48929..045957610 100644
--- a/packages/client/src/pages/admin/_header_.vue
+++ b/packages/client/src/pages/admin/_header_.vue
@@ -226,7 +226,7 @@ onUnmounted(() => {
 			width: calc(var(--height) - (var(--margin) * 2));
 			box-sizing: border-box;
 			position: relative;
-			border-radius: 5px;
+			border-radius: var(--radius-x);
 
 			&:hover {
 				background: rgba(0, 0, 0, 0.05);
@@ -329,7 +329,7 @@ onUnmounted(() => {
 			bottom: 0;
 			height: 3px;
 			background: var(--accent);
-			border-radius: 999px;
+			border-radius: var(--radius-ellipse);
 			transition: all 0.2s ease;
 			pointer-events: none;
 		}
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index bfd91d53d..a401b9d08 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -437,7 +437,7 @@ defineExpose({
 					display: block;
 					margin: auto;
 					height: 42px;
-					border-radius: 8px;
+					border-radius: var(--radius-sm);
 				}
 			}
 		}
diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
index ab4dd2c69..3be3d9f97 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -175,7 +175,7 @@ onMounted(async () => {
 					margin-right: 12px;
 					background: var(--accentedBg);
 					color: var(--accent);
-					border-radius: 10px;
+					border-radius: var(--radius-m);
 				}
 
 				&.sub {
diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/overview.stats.vue
index 172e346e7..520bd3153 100644
--- a/packages/client/src/pages/admin/overview.stats.vue
+++ b/packages/client/src/pages/admin/overview.stats.vue
@@ -155,7 +155,7 @@ onMounted(async () => {
 				margin-right: 12px;
 				background: var(--accentedBg);
 				color: var(--accent);
-				border-radius: 10px;
+				border-radius: var(--radius-m);
 			}
 
 			&.users {
diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
index cc62ce0f5..38be02e08 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -90,7 +90,7 @@ definePageMetadata({
 				display: block;
 				max-height: 300px;
 				max-width: 100%;
-				border-radius: 10px;
+				border-radius: var(--radius-m);
 				margin-top: 1rem;
 			}
 		}
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index d54c13d77..e35a63d9a 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -182,7 +182,7 @@ definePageMetadata(
 		height: 48px;
 		color: #fff;
 		background: rgba(0, 0, 0, 0.5);
-		border-radius: 100%;
+		border-radius: var(--radius-full);
 
 		> i {
 			vertical-align: middle;
@@ -212,7 +212,7 @@ definePageMetadata(
 			padding: 8px 12px;
 			font-size: 80%;
 			background: rgba(0, 0, 0, 0.7);
-			border-radius: 6px;
+			border-radius: var(--radius-s);
 			color: #fff;
 		}
 	}
diff --git a/packages/client/src/pages/emojis.emoji.vue b/packages/client/src/pages/emojis.emoji.vue
index dbb82c35d..840a99c79 100644
--- a/packages/client/src/pages/emojis.emoji.vue
+++ b/packages/client/src/pages/emojis.emoji.vue
@@ -60,7 +60,7 @@ function menu(ev) {
 	padding: 12px;
 	text-align: left;
 	background: var(--panel);
-	border-radius: 8px;
+	border-radius: var(--radius-sm);
 
 	&:hover {
 		border-color: var(--accent);
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index 9ef1ba133..9f01cdfeb 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -136,7 +136,7 @@ definePageMetadata(
 			margin: 0 12px 0 0;
 			width: 42px;
 			height: 42px;
-			border-radius: 8px;
+			border-radius: var(--radius-sm);
 		}
 
 		> .body {
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 568d85f94..096f7bfd7 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -265,7 +265,7 @@ definePageMetadata(
 				max-width: 100%;
 				max-height: 500px;
 				margin: 0 auto;
-				border-radius: 10px;
+				border-radius: var(--radius-m);
 			}
 
 			& + .file {
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index d83e601d6..b86b035d9 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -534,7 +534,7 @@ function syncSlide(index) {
 		display: block;
 		margin: 0 16px 0 0;
 		height: 64px;
-		border-radius: 8px;
+		border-radius: var(--radius-sm);
 	}
 
 	> .name {
diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue
index 259c6db69..aaac574f6 100644
--- a/packages/client/src/pages/my-antennas/index.vue
+++ b/packages/client/src/pages/my-antennas/index.vue
@@ -110,7 +110,7 @@ definePageMetadata({
 		padding: 13px;
 		margin-right: 10px;
 		border: solid 1px var(--divider);
-		border-radius: 6px;
+		border-radius: var(--radius-s);
 
 		&:hover {
 			border: solid 1px var(--accent);
@@ -123,7 +123,7 @@ definePageMetadata({
 		padding: 16px;
 		margin-bottom: 8px;
 		border: solid 1px var(--divider);
-		border-radius: 6px;
+		border-radius: var(--radius-s);
 
 		&:hover {
 			border: solid 1px var(--accent);
diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue
index cb3a74f57..33f40d871 100644
--- a/packages/client/src/pages/my-lists/index.vue
+++ b/packages/client/src/pages/my-lists/index.vue
@@ -99,7 +99,7 @@ definePageMetadata({
 			display: block;
 			padding: 16px;
 			border: solid 1px var(--divider);
-			border-radius: 6px;
+			border-radius: var(--radius-s);
 
 			&:hover {
 				border: solid 1px var(--accent);
diff --git a/packages/client/src/pages/no-graze.vue b/packages/client/src/pages/no-graze.vue
index 8b4617cfc..3a6c44e62 100644
--- a/packages/client/src/pages/no-graze.vue
+++ b/packages/client/src/pages/no-graze.vue
@@ -32,7 +32,7 @@ import {instance} from "@/instance";
 		vertical-align: bottom;
 		height: 128px;
 		margin-bottom: 16px;
-		border-radius: 16px;
+		border-radius: var(--radius-md);
 	}
 }
 </style>
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index 6e46df45b..767bffe56 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -169,7 +169,7 @@ definePageMetadata(
 			> .load {
 				min-width: 0;
 				margin: 0 auto;
-				border-radius: 999px;
+				border-radius: var(--radius-ellipse);
 
 				&.next {
 					margin-bottom: var(--margin);
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index ca01111a1..419291445 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -94,7 +94,7 @@ export default defineComponent({
 	overflow: hidden;
 	background: var(--panel);
 	border: solid 2px var(--divider);
-	border-radius: 6px;
+	border-radius: var(--radius-s);
 
 	&:hover {
 		border: solid 2px var(--dividerHovered);
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 6caaac791..a98d85c28 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -364,7 +364,7 @@ definePageMetadata(
 					backdrop-filter: var(--blur, blur(8px));
 					background: rgba(0, 0, 0, 0.2);
 					padding: 8px;
-					border-radius: 24px;
+					border-radius: var(--radius-lg);
 					width: fit-content;
 					position: relative;
 					top: -10px;
diff --git a/packages/client/src/pages/settings/2fa.qrdialog.vue b/packages/client/src/pages/settings/2fa.qrdialog.vue
index 5f14d069e..9d365f512 100644
--- a/packages/client/src/pages/settings/2fa.qrdialog.vue
+++ b/packages/client/src/pages/settings/2fa.qrdialog.vue
@@ -94,7 +94,7 @@ const ok = () => {
 .qr {
 	width: 20em;
 	max-width: 100%;
-	border-radius: 10px;
+	border-radius: var(--radius-m);
 	border: 3px solid var(--accent);
 }
 </style>
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index 7ff99b922..51276847d 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -99,7 +99,7 @@ definePageMetadata({
 		margin: 0 12px 0 0;
 		width: 50px;
 		height: 50px;
-		border-radius: 8px;
+		border-radius: var(--radius-sm);
 	}
 
 	> .body {
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index 3b94a8248..f73dc6cdc 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -311,7 +311,7 @@ definePageMetadata({
 	background-size: cover;
 	background-position: center;
 	border: solid 1px var(--divider);
-	border-radius: 10px;
+	border-radius: var(--radius-m);
 	overflow: clip;
 
 	> .avatar {
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 437f73182..2981cec0a 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -283,7 +283,7 @@ definePageMetadata({
 
 <style lang="scss" scoped>
 .rfqxtzch {
-	border-radius: 6px;
+	border-radius: var(--radius-s);
 
 	> .toggle {
 		position: relative;
@@ -363,7 +363,7 @@ definePageMetadata({
 				background-color: #e8cda5;
 				opacity: 0;
 				transition: opacity 200ms ease-in-out !important;
-				border-radius: 100%;
+				border-radius: var(--radius-full);
 			}
 
 			.crater--1 {
@@ -392,7 +392,7 @@ definePageMetadata({
 			position: absolute;
 			background-color: #ffffff;
 			transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
-			border-radius: 50%;
+			border-radius: var(--radius-common);
 		}
 
 		.star--1 {
diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index cec2cb980..8242552a5 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -366,7 +366,7 @@ definePageMetadata({
 				position: relative;
 				width: 64px;
 				height: 64px;
-				border-radius: 8px;
+				border-radius: var(--radius-sm);
 
 				> .preview {
 					position: absolute;
@@ -377,7 +377,7 @@ definePageMetadata({
 					margin: auto;
 					width: 42px;
 					height: 42px;
-					border-radius: 4px;
+					border-radius: var(--radius-xs);
 					box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
 					transition: transform 0.15s ease;
 				}
@@ -393,10 +393,10 @@ definePageMetadata({
 				}
 
 				&.rounded {
-					border-radius: 999px;
+					border-radius: var(--radius-ellipse);
 
 					> .preview {
-						border-radius: 999px;
+						border-radius: var(--radius-ellipse);
 					}
 				}
 
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 433f4e4d6..d05e48bbf 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -671,7 +671,7 @@ definePageMetadata(
 			> .moderator {
 				display: inline-block;
 				border: solid 1px;
-				border-radius: 6px;
+				border-radius: var(--radius-s);
 				padding: 2px 6px;
 				font-size: 85%;
 			}
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index b1fc07443..bb2c27426 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -524,7 +524,7 @@ onUnmounted(() => {
 						color: #fff;
 						background: rgba(0, 0, 0, 0.7);
 						font-size: 0.7em;
-						border-radius: 6px;
+						border-radius: var(--radius-s);
 					}
 
 					> .title {
@@ -554,7 +554,7 @@ onUnmounted(() => {
 								color: #fff;
 								background: rgba(0, 0, 0, 0.6);
 								font-size: 0.7em;
-								border-radius: 24px;
+								border-radius: var(--radius-lg);
 							}
 						}
 
@@ -598,7 +598,7 @@ onUnmounted(() => {
 						top: 6px;
 						right: 12px;
 						padding: 8px;
-						border-radius: 24px;
+						border-radius: var(--radius-lg);
 						display: flex;
 						justify-content: center;
 						align-items: center;
@@ -663,7 +663,7 @@ onUnmounted(() => {
 							color: #fff;
 							background: rgba(0, 0, 0, 0.6);
 							font-size: 0.7em;
-							border-radius: 24px;
+							border-radius: var(--radius-lg);
 						}
 					}
 
@@ -675,7 +675,7 @@ onUnmounted(() => {
 						color: #fff;
 						background: rgba(0, 0, 0, 0.6);
 						font-size: 0.7em;
-						border-radius: 24px;
+						border-radius: var(--radius-lg);
 					}
 
 					> .bottom {
@@ -727,7 +727,7 @@ onUnmounted(() => {
 
 						&.verified {
 							background-color: var(--hover);
-							border-radius: 10px;
+							border-radius: var(--radius-m);
 							color: var(--badge) !important;
 						}
 
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index f1adbefb9..88c53ea6e 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -100,7 +100,7 @@ onMounted(() => {
 		> .img {
 			position: relative;
 			height: 128px;
-			border-radius: 6px;
+			border-radius: var(--radius-s);
 			overflow: clip;
 		}
 	}
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index 9e3f8db06..d56eae4e3 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -296,7 +296,7 @@ function showMenu(ev) {
 			> .icon {
 				width: 85px;
 				margin-top: -47px;
-				border-radius: 100%;
+				border-radius: var(--radius-full);
 				vertical-align: bottom;
 			}
 
@@ -306,7 +306,7 @@ function showMenu(ev) {
 				right: 16px;
 				width: 32px;
 				height: 32px;
-				border-radius: 8px;
+				border-radius: var(--radius-sm);
 				font-size: 18px;
 				z-index: 2;
 			}
@@ -352,7 +352,7 @@ function showMenu(ev) {
 			background: var(--acrylicPanel);
 			-webkit-backdrop-filter: var(--blur, blur(15px));
 			backdrop-filter: var(--blur, blur(15px));
-			border-radius: 999px;
+			border-radius: var(--radius-ellipse);
 			overflow: clip;
 			width: 35%;
 			left: 50%;
@@ -374,14 +374,14 @@ function showMenu(ev) {
 	padding: 6px 12px 6px 6px;
 	margin: 0 10px 0 0;
 	background: var(--panel);
-	border-radius: 999px;
+	border-radius: var(--radius-ellipse);
 
 	> :global(.icon) {
 		display: inline-block;
 		width: 20px;
 		height: 20px;
 		margin-right: 5px;
-		border-radius: 999px;
+		border-radius: var(--radius-ellipse);
 	}
 }
 </style>
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index 461d74157..51ba5ac52 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -335,7 +335,7 @@ export default defineComponent({
 						right: 16px;
 						width: 32px;
 						height: 32px;
-						border-radius: 8px;
+						border-radius: var(--radius-sm);
 					}
 				}
 			}
diff --git a/packages/client/src/pages/welcome.timeline.vue b/packages/client/src/pages/welcome.timeline.vue
index 47505d6f8..2845a8041 100644
--- a/packages/client/src/pages/welcome.timeline.vue
+++ b/packages/client/src/pages/welcome.timeline.vue
@@ -106,7 +106,7 @@ export default defineComponent({
 				padding: 16px;
 				margin: 0 0 0 auto;
 				max-width: max-content;
-				border-radius: 16px;
+				border-radius: var(--radius-md);
 
 				> .richcontent {
 					min-width: 250px;
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 7098e4e3f..d89867692 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -1,14 +1,26 @@
 @charset "utf-8";
 
 :root {
+	--radius-xxs: 10px;
+	--radius-xss: 3px; //
 	--radius-xs: 10px;
+	--radius-x: 10px;
+	--radius-s: 10px;
 	--radius-sm: 10px;
+	--radius-m: 10px;
 	--radius: 10px;
 	--radius-md: 10px;
 	--radius-lg: 10px;
 	--radius-xl: 10px;
+	--radius-big: 10px;
 	--radius-ellipse: 10px;
 	--radius-full: 10px;
+	--radius-icon: 0.3rem; //
+	--radius-avatar: 2em; //
+	--radius-online: 120%; //
+	--radius-avatar-2: 20%; //
+	--radius-avatar-3: 75% //
+	--radius-common: 50% //
 
 	--margin: var(--marginFull);
 
@@ -29,15 +41,27 @@
 	//--ad: rgb(255 169 0 / 10%);
 }
 
-html.radius-misskey {
+html.radius-iceshrimp {
+	--radius-xxs: 2px;
+	--radius-xss: 3px; //
 	--radius-xs: 4px;
+	--radius-x: 5px;
+	--radius-s: 6px;
 	--radius-sm: 8px;
+	--radius-m: 10px;
 	--radius: 12px;
 	--radius-md: 16px;
 	--radius-lg: 24px;
 	--radius-xl: 32px;
+	--radius-big: 100px;
 	--radius-ellipse: 999px;
 	--radius-full: 100%;
+	--radius-icon: 0.3rem; //
+	--radius-avatar: 2em; //
+	--radius-online: 120%; //
+	--radius-avatar-2: 20%; //
+	--radius-avatar-3: 75% //
+	--radius-common: 50% //
 }
 
 ::selection {
@@ -91,7 +115,7 @@ body::-webkit-scrollbar {
 	height: 12px;
 }
 body::-webkit-scrollbar-thumb {
-	border-radius: 100px;
+	border-radius: var(--radius-big);
 	background-clip: content-box;
 	border: 3px solid transparent;
 }
@@ -287,7 +311,7 @@ hr {
 	height: calc(var(--height) - (var(--margin) * 2));
 	box-sizing: border-box;
 	position: relative;
-	border-radius: 5px;
+	border-radius: var(--radius-x);
 	outline: none;
 
 	&::before {
@@ -906,7 +930,7 @@ hr {
 // 	padding: 5px;
 // 	margin: 1rem 7px auto;
 // 	font-size: 20px;
-// 	border-radius: 4px;
+// 	border-radius: var(--radius-xs);
 // 	border: 2px solid var(--accent);
 // 	background-color: var(--accentedBg);
 // 	color: var(--fg);
diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue
index e87c3c6d6..fdfdbdb31 100644
--- a/packages/client/src/ui/_common_/common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -104,7 +104,7 @@ if ($i) {
 		border: solid 2px transparent;
 		border-top-color: var(--accent);
 		border-left-color: var(--accent);
-		border-radius: 50%;
+		border-radius: var(--radius-common);
 		animation: progress-spinner 400ms linear infinite;
 	}
 }
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
index d1cec3ade..ed495968a 100644
--- a/packages/client/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue
@@ -238,7 +238,7 @@ function more() {
 					left: 0;
 					right: 0;
 					bottom: 0;
-					border-radius: 999px;
+					border-radius: var(--radius-ellipse);
 					background: linear-gradient(
 						-45deg,
 						var(--buttonGradateA),
@@ -368,7 +368,7 @@ function more() {
 						left: 0;
 						right: 0;
 						bottom: 0;
-						border-radius: 999px;
+						border-radius: var(--radius-ellipse);
 						background: var(--accentedBg);
 					}
 				}
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index fc8a395af..a4204e1e2 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -308,7 +308,7 @@ function more(ev: MouseEvent) {
 						left: 0;
 						right: 0;
 						bottom: 0;
-						border-radius: 5px;
+						border-radius: var(--radius-x);
 						background: linear-gradient(
 							-45deg,
 							var(--buttonGradateA),
@@ -427,7 +427,7 @@ function more(ev: MouseEvent) {
 							left: 0;
 							right: 0;
 							bottom: 0;
-							border-radius: 5px;
+							border-radius: var(--radius-x);
 						}
 					}
 
@@ -497,7 +497,7 @@ function more(ev: MouseEvent) {
 						margin: auto;
 						width: 52px;
 						aspect-ratio: 1/1;
-						border-radius: 5px;
+						border-radius: var(--radius-x);
 						background: linear-gradient(
 							-45deg,
 							var(--buttonGradateA),
@@ -610,7 +610,7 @@ function more(ev: MouseEvent) {
 							left: 0;
 							right: 0;
 							bottom: 0;
-							border-radius: 999px;
+							border-radius: var(--radius-ellipse);
 						}
 
 						> .icon,
diff --git a/packages/client/src/ui/_common_/stream-indicator.vue b/packages/client/src/ui/_common_/stream-indicator.vue
index a3d06295c..47da7a083 100644
--- a/packages/client/src/ui/_common_/stream-indicator.vue
+++ b/packages/client/src/ui/_common_/stream-indicator.vue
@@ -55,7 +55,7 @@ onUnmounted(() => {
 	color: #fff;
 	background: #000;
 	opacity: 0.8;
-	border-radius: 4px;
+	border-radius: var(--radius-xs);
 	max-width: 320px;
 
 	> .command {
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index 01b882c2c..4729122fa 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -73,7 +73,7 @@ const zIndex = os.claimZIndex("high");
 	padding: 16px 20px;
 	pointer-events: none;
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-	border-radius: 8px;
+	border-radius: var(--radius-sm);
 }
 .mk-uploader:empty {
 	display: none;
@@ -150,7 +150,7 @@ const zIndex = os.claimZIndex("high");
 	display: block;
 	background: transparent;
 	border: none;
-	border-radius: 4px;
+	border-radius: var(--radius-xs);
 	overflow: hidden;
 	grid-column: 2/3;
 	grid-row: 2/3;
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 905c6ee36..80c5505dd 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -512,7 +512,7 @@ async function deleteProfile() {
 						display: flex;
 						align-items: center;
 						justify-content: center;
-						border-radius: 10px;
+						border-radius: var(--radius-m);
 						margin: -0.35rem;
 						transform: scale(0.8);
 					}
@@ -541,7 +541,7 @@ async function deleteProfile() {
 			padding: 0;
 			margin: auto;
 			height: 64px;
-			border-radius: 8px;
+			border-radius: var(--radius-sm);
 			background: var(--panel);
 			color: var(--fg);
 
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index b0e6473fd..357108884 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -526,7 +526,7 @@ console.log(mainRouter.currentRoute.value.name);
 		position: fixed !important;
 		z-index: 1000;
 		font-size: 16px;
-		border-radius: 10px;
+		border-radius: var(--radius-m);
 		box-shadow: var(--shadow) 0px 0px 25px;
 		transition: background 0.6s;
 		transition: transform 0.3s;
@@ -563,7 +563,7 @@ console.log(mainRouter.currentRoute.value.name);
 			padding: 0;
 			margin: auto;
 			height: 3.5rem;
-			border-radius: 8px;
+			border-radius: var(--radius-sm);
 			background-position: center;
 			transition: background 0.6s;
 			color: var(--fg);
@@ -576,7 +576,7 @@ console.log(mainRouter.currentRoute.value.name);
 				&.on {
 					background-color: var(--focus);
 					width: 100%;
-					border-radius: 999px;
+					border-radius: var(--radius-ellipse);
 					transition: all 0.4s ease-in-out;
 				}
 
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
index 21797c4e2..2b5f2389a 100644
--- a/packages/client/src/ui/visitor/a.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -218,7 +218,7 @@ export default defineComponent({
 					padding: 10px 20px;
 					box-sizing: border-box;
 					text-align: center;
-					border-radius: 999px;
+					border-radius: var(--radius-ellipse);
 					background: var(--panel);
 					color: var(--fg);
 
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index 3a34bff4c..0ede0b2ad 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -278,7 +278,7 @@ defineExpose({
 				padding: 10px;
 				box-sizing: border-box;
 				text-align: center;
-				border-radius: 999px;
+				border-radius: var(--radius-ellipse);
 
 				&._button {
 					background: var(--panel);
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index 961e63533..3826d2f86 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -246,7 +246,7 @@ export default defineComponent({
 			> .right {
 				margin-left: auto;
 				> .signup {
-					border-radius: 999px;
+					border-radius: var(--radius-ellipse);
 					padding: 0 24px;
 					line-height: $height - 20px;
 				}
diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue
index 1f672b8be..52cde4189 100644
--- a/packages/client/src/ui/visitor/kanban.vue
+++ b/packages/client/src/ui/visitor/kanban.vue
@@ -249,7 +249,7 @@ export default defineComponent({
 					padding: 10px;
 					box-sizing: border-box;
 					text-align: center;
-					border-radius: 999px;
+					border-radius: var(--radius-ellipse);
 
 					&._button {
 						background: var(--panel);
diff --git a/packages/client/src/widgets/aiscript.vue b/packages/client/src/widgets/aiscript.vue
index ac1472da1..61f4123be 100644
--- a/packages/client/src/widgets/aiscript.vue
+++ b/packages/client/src/widgets/aiscript.vue
@@ -178,7 +178,7 @@ defineExpose<WidgetComponentExpose>({
 		padding: 0 10px;
 		height: 28px;
 		outline: none;
-		border-radius: 4px;
+		border-radius: var(--radius-xs);
 
 		&:disabled {
 			opacity: 0.7;
diff --git a/packages/client/src/widgets/calendar.vue b/packages/client/src/widgets/calendar.vue
index c2ae3cfc2..79c6b1537 100644
--- a/packages/client/src/widgets/calendar.vue
+++ b/packages/client/src/widgets/calendar.vue
@@ -215,7 +215,7 @@ defineExpose<WidgetComponentExpose>({
 				width: 100%;
 				overflow: hidden;
 				background: var(--calendarInfoMeterBg);
-				border-radius: 8px;
+				border-radius: var(--radius-sm);
 
 				> .val {
 					height: 4px;
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index a8e121519..be97bf9d7 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -158,7 +158,7 @@ defineExpose<WidgetComponentExpose>({
 				width: ($bodyTitleHieght + $bodyInfoHieght);
 				height: ($bodyTitleHieght + $bodyInfoHieght);
 				object-fit: cover;
-				border-radius: 4px;
+				border-radius: var(--radius-xs);
 				margin-right: 8px;
 			}
 
diff --git a/packages/client/src/widgets/memo.vue b/packages/client/src/widgets/memo.vue
index 78c5ad5a6..2585585c5 100644
--- a/packages/client/src/widgets/memo.vue
+++ b/packages/client/src/widgets/memo.vue
@@ -122,7 +122,7 @@ defineExpose<WidgetComponentExpose>({
 		padding: 0 10px;
 		height: 28px;
 		outline: none;
-		border-radius: 4px;
+		border-radius: var(--radius-xs);
 
 		&:disabled {
 			opacity: 0.7;
diff --git a/packages/client/src/widgets/photos.vue b/packages/client/src/widgets/photos.vue
index 3a0130624..7edd616c4 100644
--- a/packages/client/src/widgets/photos.vue
+++ b/packages/client/src/widgets/photos.vue
@@ -115,7 +115,7 @@ defineExpose<WidgetComponentExpose>({
 	.img {
 		position: relative;
 		border: solid 4px transparent;
-		border-radius: 8px;
+		border-radius: var(--radius-sm);
 	}
 }
 
@@ -135,7 +135,7 @@ defineExpose<WidgetComponentExpose>({
 		background-size: cover;
 		background-clip: content-box;
 		border: solid 2px transparent;
-		border-radius: 4px;
+		border-radius: var(--radius-xs);
 	}
 }
 </style>
diff --git a/packages/client/src/widgets/server-info.vue b/packages/client/src/widgets/server-info.vue
index 7b2b63d2a..c42c0931d 100644
--- a/packages/client/src/widgets/server-info.vue
+++ b/packages/client/src/widgets/server-info.vue
@@ -80,7 +80,7 @@ defineExpose<WidgetComponentExpose>({
 	display: inline-block;
 	width: 60px;
 	height: 60px;
-	border-radius: 8px;
+	border-radius: var(--radius-sm);
 	box-sizing: border-box;
 	border: solid 3px var(--panelBorder);
 }