From f05eb04f387de5558faf8125b2dea3cb8a9f4e8d Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sat, 28 Jun 2025 00:39:13 +0800
Subject: [PATCH] style(stage-*): font weight adjustments

---
 .../src/components/ChatSimulator.vue          | 12 +++----
 .../src/components/ControlPanel.vue           | 34 +++++++++----------
 .../src/components/PromptPreview.vue          |  6 ++--
 apps/stage-tamagotchi/src/pages/index.vue     |  2 +-
 .../components/CardCreationDialog.vue         |  2 +-
 .../airi-card/components/CardDetailDialog.vue |  2 +-
 .../airi-card/components/DeleteCardDialog.vue |  2 +-
 .../settings/appearance/color-scheme.vue      |  2 +-
 .../src/components/Layouts/HeaderLink.vue     |  2 +-
 .../components/Layouts/InteractiveArea.vue    |  2 +-
 .../src/components/Widgets/ChatHistory.vue    |  6 ++--
 .../components/Widgets/MobileChatHistory.vue  |  4 +--
 .../components/CardCreationDialog.vue         |  2 +-
 .../airi-card/components/CardDetailDialog.vue |  2 +-
 .../airi-card/components/DeleteCardDialog.vue |  2 +-
 .../settings/appearance/color-scheme.vue      |  2 +-
 .../src/pages/test/filter-message.vue         |  2 +-
 .../src/pages/test/queues/delays.vue          |  4 +--
 .../src/pages/test/queues/emotions.vue        |  4 +--
 .../src/pages/test/queues/messages.vue        |  2 +-
 .../src/components/Layouts/PageHeader.vue     |  2 +-
 .../src/components/Misc/Steppers/Steppers.vue |  2 +-
 22 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/apps/playground-prompt-engineering/src/components/ChatSimulator.vue b/apps/playground-prompt-engineering/src/components/ChatSimulator.vue
index f36e7b057..551843590 100644
--- a/apps/playground-prompt-engineering/src/components/ChatSimulator.vue
+++ b/apps/playground-prompt-engineering/src/components/ChatSimulator.vue
@@ -169,7 +169,7 @@ watch(() => messages.value.length, () => {
 
 <template>
   <div class="panel flex flex-col rounded-lg bg-white shadow">
-    <div class="panel-header flex items-center justify-between rounded-t-lg bg-primary p-3 text-sm text-white font-semibold">
+    <div class="panel-header flex items-center justify-between rounded-t-lg bg-primary p-3 text-sm text-white font-normal">
       Chat Simulator
     </div>
 
@@ -225,7 +225,7 @@ watch(() => messages.value.length, () => {
             >
               <div
                 v-if="!message.isUser"
-                class="bg-secondary-light text-secondary h-8 w-8 flex flex-shrink-0 items-center justify-center rounded-full text-sm font-semibold"
+                class="bg-secondary-light text-secondary h-8 w-8 flex flex-shrink-0 items-center justify-center rounded-full text-sm font-normal"
               >
                 R
               </div>
@@ -241,7 +241,7 @@ watch(() => messages.value.length, () => {
 
               <div
                 v-if="message.isUser"
-                class="bg-primary-light text-primary-dark h-8 w-8 flex flex-shrink-0 items-center justify-center rounded-full text-sm font-semibold"
+                class="bg-primary-light text-primary-dark h-8 w-8 flex flex-shrink-0 items-center justify-center rounded-full text-sm font-normal"
               >
                 U
               </div>
@@ -257,7 +257,7 @@ watch(() => messages.value.length, () => {
               @keyup.enter="sendMessage"
             >
             <button
-              class="hover:bg-primary-dark cursor-pointer rounded-lg border-none bg-primary px-5 py-3 text-white font-semibold transition"
+              class="hover:bg-primary-dark cursor-pointer rounded-lg border-none bg-primary px-5 py-3 text-white font-normal transition"
               @click="sendMessage"
             >
               Send
@@ -280,7 +280,7 @@ watch(() => messages.value.length, () => {
               class="component-card hover:bg-primary-light cursor-pointer border border-gray-200 rounded p-2 transition hover:border-primary"
               @click="addComponent(name)"
             >
-              <div class="mb-1 text-sm font-semibold">
+              <div class="mb-1 text-sm font-normal">
                 {{ formatComponentName(name) }}
               </div>
               <div class="line-clamp-2 overflow-hidden text-ellipsis text-xs text-gray">
@@ -299,7 +299,7 @@ watch(() => messages.value.length, () => {
               class="component-card hover:bg-primary-light cursor-pointer border border-gray-200 rounded p-2 transition hover:border-primary"
               @click="addSpeechComponent(name)"
             >
-              <div class="mb-1 text-sm font-semibold">
+              <div class="mb-1 text-sm font-normal">
                 {{ formatComponentName(name) }}
               </div>
               <div class="line-clamp-2 overflow-hidden text-ellipsis text-xs text-gray">
diff --git a/apps/playground-prompt-engineering/src/components/ControlPanel.vue b/apps/playground-prompt-engineering/src/components/ControlPanel.vue
index 975292f02..5ed5c6242 100644
--- a/apps/playground-prompt-engineering/src/components/ControlPanel.vue
+++ b/apps/playground-prompt-engineering/src/components/ControlPanel.vue
@@ -72,14 +72,14 @@ function applyTemplate(template: string) {
 
 <template>
   <div class="panel rounded-lg bg-white shadow">
-    <div class="panel-header flex items-center justify-between rounded-t-lg bg-primary p-3 text-sm text-white font-semibold">
+    <div class="panel-header flex items-center justify-between rounded-t-lg bg-primary p-3 text-sm text-white font-normal">
       Character Configuration
     </div>
 
     <div class="panel-body max-h-[calc(100vh-13rem)] overflow-y-auto p-4">
       <!-- Core Identity -->
       <div class="mb-6 flex flex-col gap-3">
-        <h3 class="text-sm text-gray font-semibold">
+        <h3 class="text-sm text-gray font-normal">
           Core Identity
         </h3>
 
@@ -107,7 +107,7 @@ function applyTemplate(template: string) {
           <label for="char-essence" class="flex justify-between text-sm text-dark">
             <span>Essence</span>
             <span class="text-xs text-gray">
-              Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-semibold">{{ estimateTokens(characterPrompt.coreIdentity.essence) }}</span>
+              Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-normal">{{ estimateTokens(characterPrompt.coreIdentity.essence) }}</span>
             </span>
           </label>
           <textarea
@@ -120,7 +120,7 @@ function applyTemplate(template: string) {
 
       <!-- Personality Traits -->
       <div class="mb-6 flex flex-col gap-3">
-        <h3 class="text-sm text-gray font-semibold">
+        <h3 class="text-sm text-gray font-normal">
           Personality Traits
         </h3>
 
@@ -187,7 +187,7 @@ function applyTemplate(template: string) {
 
       <!-- Speech Patterns -->
       <div class="mb-6 flex flex-col gap-3">
-        <h3 class="text-sm text-gray font-semibold">
+        <h3 class="text-sm text-gray font-normal">
           Speech Patterns
         </h3>
 
@@ -195,7 +195,7 @@ function applyTemplate(template: string) {
           <label for="speech-patterns" class="flex justify-between text-sm text-dark">
             <span>Expression Style</span>
             <span class="text-xs text-gray">
-              Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-semibold">{{ estimateTokens(characterPrompt.speechPatterns) }}</span>
+              Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-normal">{{ estimateTokens(characterPrompt.speechPatterns) }}</span>
             </span>
           </label>
           <textarea
@@ -208,7 +208,7 @@ function applyTemplate(template: string) {
 
       <!-- Emotional State -->
       <div class="mb-6 flex flex-col gap-3">
-        <h3 class="text-sm text-gray font-semibold">
+        <h3 class="text-sm text-gray font-normal">
           Current Emotional State
         </h3>
 
@@ -217,7 +217,7 @@ function applyTemplate(template: string) {
             v-for="emotion in ['happy', 'curious', 'thoughtful', 'playful', 'annoyed', 'excited']"
             :key="emotion"
             class="flex flex-col cursor-pointer items-center justify-center gap-1 border border-gray-200 rounded-md bg-white p-2 text-sm transition-colors"
-            :class="{ 'bg-primary-light border-primary font-semibold shadow': characterPrompt.currentEmotion === emotion }"
+            :class="{ 'bg-primary-light border-primary font-normal shadow': characterPrompt.currentEmotion === emotion }"
             @click="characterPrompt.updateEmotion(emotion)"
           >
             <span class="text-lg">
@@ -236,7 +236,7 @@ function applyTemplate(template: string) {
           <label for="emotion-description" class="flex justify-between text-sm text-dark">
             <span>Emotion Description</span>
             <span class="text-xs text-gray">
-              Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-semibold">
+              Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-normal">
                 {{ estimateTokens(getEmotionDescription()) }}
               </span>
             </span>
@@ -252,7 +252,7 @@ function applyTemplate(template: string) {
 
       <!-- Conversation Context -->
       <div class="mb-6 flex flex-col gap-3">
-        <h3 class="text-sm text-gray font-semibold">
+        <h3 class="text-sm text-gray font-normal">
           Conversation Context
         </h3>
 
@@ -285,7 +285,7 @@ function applyTemplate(template: string) {
           <label for="context-description" class="flex justify-between text-sm text-dark">
             <span>Context Description</span>
             <span class="text-xs text-gray">
-              Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-semibold">
+              Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-normal">
                 {{ estimateTokens(getContextDescription()) }}
               </span>
             </span>
@@ -301,7 +301,7 @@ function applyTemplate(template: string) {
 
       <!-- Response Format -->
       <div class="mb-6 flex flex-col gap-3">
-        <h3 class="text-sm text-gray font-semibold">
+        <h3 class="text-sm text-gray font-normal">
           Response Format
         </h3>
 
@@ -309,7 +309,7 @@ function applyTemplate(template: string) {
           <label for="response-format" class="flex justify-between text-sm text-dark">
             <span>Format Instructions</span>
             <span class="text-xs text-gray">
-              Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-semibold">{{ estimateTokens(characterPrompt.responseFormat) }}</span>
+              Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-normal">{{ estimateTokens(characterPrompt.responseFormat) }}</span>
             </span>
           </label>
           <textarea
@@ -322,7 +322,7 @@ function applyTemplate(template: string) {
 
       <!-- Example Response -->
       <div class="mb-6 flex flex-col gap-3">
-        <h3 class="text-sm text-gray font-semibold">
+        <h3 class="text-sm text-gray font-normal">
           Example Response
         </h3>
 
@@ -339,7 +339,7 @@ function applyTemplate(template: string) {
           <label for="example-response" class="flex justify-between text-sm text-dark">
             <span>Example</span>
             <span class="text-xs text-gray">
-              Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-semibold">
+              Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-normal">
                 {{ estimateTokens(getExampleDescription()) }}
               </span>
             </span>
@@ -355,7 +355,7 @@ function applyTemplate(template: string) {
 
       <!-- Preset Templates -->
       <div class="mt-4">
-        <h3 class="mb-2 text-sm text-gray font-semibold">
+        <h3 class="mb-2 text-sm text-gray font-normal">
           Preset Templates
         </h3>
         <div class="flex flex-wrap gap-2">
@@ -363,7 +363,7 @@ function applyTemplate(template: string) {
             v-for="template in ['default', 'minimal', 'anime-lover', 'philosophical', 'tech-nerd']"
             :key="template"
             class="cursor-pointer border border-gray-200 rounded-md bg-white p-1.5 px-3 text-sm transition-colors"
-            :class="{ 'bg-primary text-white border-primary-dark font-semibold': activeTemplate === template }"
+            :class="{ 'bg-primary text-white border-primary-dark font-normal': activeTemplate === template }"
             @click="applyTemplate(template)"
           >
             {{ template.charAt(0).toUpperCase() + template.slice(1).replace('-', ' ') }}
diff --git a/apps/playground-prompt-engineering/src/components/PromptPreview.vue b/apps/playground-prompt-engineering/src/components/PromptPreview.vue
index bf5950f1d..5d85ba9e8 100644
--- a/apps/playground-prompt-engineering/src/components/PromptPreview.vue
+++ b/apps/playground-prompt-engineering/src/components/PromptPreview.vue
@@ -88,17 +88,17 @@ function estimateTokens(text: string) {
 
 <template>
   <div class="panel flex flex-col rounded-lg bg-white shadow">
-    <div class="panel-header flex items-center justify-between rounded-t-lg bg-primary p-3 text-sm text-white font-semibold">
+    <div class="panel-header flex items-center justify-between rounded-t-lg bg-primary p-3 text-sm text-white font-normal">
       Prompt Preview
       <span class="text-xs">
-        Total Tokens: <span class="rounded bg-white/20 px-1.5 py-0.5 font-semibold">{{ estimateTokens(completePrompt || '') }}</span>
+        Total Tokens: <span class="rounded bg-white/20 px-1.5 py-0.5 font-normal">{{ estimateTokens(completePrompt || '') }}</span>
       </span>
     </div>
 
     <div class="panel-body max-h-[calc(100vh-13rem)] flex-1 overflow-y-auto p-4">
       <div v-for="(module, index) in moduleList" :key="index" class="mb-3">
         <div
-          class="mb-2 flex cursor-pointer items-center justify-between text-sm text-gray font-semibold hover:text-primary"
+          class="mb-2 flex cursor-pointer items-center justify-between text-sm text-gray font-normal hover:text-primary"
           @click="toggleModule(module.id)"
         >
           {{ module.title }}
diff --git a/apps/stage-tamagotchi/src/pages/index.vue b/apps/stage-tamagotchi/src/pages/index.vue
index b973107c3..221df6124 100644
--- a/apps/stage-tamagotchi/src/pages/index.vue
+++ b/apps/stage-tamagotchi/src/pages/index.vue
@@ -189,7 +189,7 @@ if (import.meta.hot) { // For better DX
     >
       <div class="absolute h-32 w-full flex items-center justify-center b-2 b-primary bg-white">
         <div class="wall absolute top-0 h-8" />
-        <div data-tauri-drag-region class="absolute left-0 top-0 h-full w-full flex animate-flash animate-duration-5s animate-count-infinite items-center justify-center text-1.5rem text-primary-300 font-bold">
+        <div data-tauri-drag-region class="absolute left-0 top-0 h-full w-full flex animate-flash animate-duration-5s animate-count-infinite items-center justify-center text-1.5rem text-primary-300 font-normal">
           DRAG HERE TO MOVE
         </div>
         <div data-tauri-drag-region class="wall absolute bottom-0 h-8" />
diff --git a/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardCreationDialog.vue b/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardCreationDialog.vue
index 755c33a07..fdd48f36d 100644
--- a/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardCreationDialog.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardCreationDialog.vue
@@ -178,7 +178,7 @@ const cardPostHistoryInstructions = makeComputed('postHistoryInstructions')
       <DialogOverlay class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut fixed inset-0 z-100 bg-black/50 backdrop-blur-sm" />
       <DialogContent class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-100 m-0 max-h-[90vh] max-w-6xl w-[92vw] flex flex-col overflow-auto border border-neutral-200 rounded-xl bg-white p-5 shadow-xl 2xl:w-[60vw] lg:w-[80vw] md:w-[85vw] xl:w-[70vw] -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800 sm:p-6">
         <div class="w-full flex flex-col gap-5">
-          <DialogTitle text-2xl font-bold class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
+          <DialogTitle text-2xl font-normal class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
             {{ t("settings.pages.card.create_card") }}
           </DialogTitle>
 
diff --git a/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardDetailDialog.vue b/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardDetailDialog.vue
index 42664f46f..b73dd0b1c 100644
--- a/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardDetailDialog.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardDetailDialog.vue
@@ -174,7 +174,7 @@ const activeTab = computed({
             <div flex="~ row" items-center justify-between>
               <div>
                 <div flex="~ row" items-center gap-2>
-                  <DialogTitle text-2xl font-bold class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
+                  <DialogTitle text-2xl font-normal class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
                     {{ selectedCard.name }}
                   </DialogTitle>
                   <div v-if="isActive" class="flex items-center gap-1 rounded-full bg-primary-100 px-2 py-0.5 text-xs text-primary-600 font-medium dark:bg-primary-900/40 dark:text-primary-400">
diff --git a/apps/stage-tamagotchi/src/pages/settings/airi-card/components/DeleteCardDialog.vue b/apps/stage-tamagotchi/src/pages/settings/airi-card/components/DeleteCardDialog.vue
index 1138e87b2..c6168d33e 100644
--- a/apps/stage-tamagotchi/src/pages/settings/airi-card/components/DeleteCardDialog.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/airi-card/components/DeleteCardDialog.vue
@@ -44,7 +44,7 @@ function handleConfirm() {
       <AlertDialogContent
         class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-100 max-w-md w-full border border-neutral-200 rounded-xl bg-white p-6 shadow-xl -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800"
       >
-        <AlertDialogTitle class="mb-4 text-xl font-bold">
+        <AlertDialogTitle class="mb-4 text-xl font-normal">
           {{ t('settings.pages.card.delete_card') }}
         </AlertDialogTitle>
         <AlertDialogDescription class="mb-6">
diff --git a/apps/stage-tamagotchi/src/pages/settings/appearance/color-scheme.vue b/apps/stage-tamagotchi/src/pages/settings/appearance/color-scheme.vue
index 7f5ca3142..548fb300d 100644
--- a/apps/stage-tamagotchi/src/pages/settings/appearance/color-scheme.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/appearance/color-scheme.vue
@@ -32,7 +32,7 @@ const { t } = useI18n()
       :delay="5 * 50"
       transition="all ease-in-out duration-250"
     >
-      <span text-lg font-semibold>{{ $t('settings.pages.themes.sections.section.custom-color.fields.field.primary-color.label') }}</span>
+      <span text-lg font-normal>{{ $t('settings.pages.themes.sections.section.custom-color.fields.field.primary-color.label') }}</span>
       <label relative flex cursor-pointer items-center gap-2>
         <input
           v-model="settings.themeColorsHueDynamic"
diff --git a/apps/stage-web/src/components/Layouts/HeaderLink.vue b/apps/stage-web/src/components/Layouts/HeaderLink.vue
index c74ffb82d..d7ec496c7 100644
--- a/apps/stage-web/src/components/Layouts/HeaderLink.vue
+++ b/apps/stage-web/src/components/Layouts/HeaderLink.vue
@@ -19,7 +19,7 @@ const dark = useDark()
     <template v-else>
       <img :src="Logo" h-8 w-8 class="theme-colored">
     </template>
-    <div translate-y="[2px]" font-semibold font-quicksand>
+    <div translate-y="[2px]" font-normal font-quicksand>
       <span>AIRI</span>
     </div>
   </RouterLink>
diff --git a/apps/stage-web/src/components/Layouts/InteractiveArea.vue b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
index 343548d6a..7f6cdcd94 100644
--- a/apps/stage-web/src/components/Layouts/InteractiveArea.vue
+++ b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
@@ -232,7 +232,7 @@ onAfterSend(async () => {
       </div>
     </div>
     <div flex="~ row" gap-2 hidden>
-      <div flex="~ row" relative text-white font-bold>
+      <div flex="~ row" relative text-white font-normal>
         <TransitionVertical>
           <fieldset
             v-if="showMicrophoneSelect"
diff --git a/apps/stage-web/src/components/Widgets/ChatHistory.vue b/apps/stage-web/src/components/Widgets/ChatHistory.vue
index 08f860ac0..093152500 100644
--- a/apps/stage-web/src/components/Widgets/ChatHistory.vue
+++ b/apps/stage-web/src/components/Widgets/ChatHistory.vue
@@ -46,7 +46,7 @@ onTokenLiteral(async () => {
           >
             <div flex="~ row" gap-2>
               <div flex-1>
-                <span text-xs text="violet-400/90 dark:violet-600/90" font-semibold class="inline <sm:hidden">{{ t('stage.chat.message.character-name.core-system') }}</span>
+                <span text-xs text="violet-400/90 dark:violet-600/90" font-normal class="inline <sm:hidden">{{ t('stage.chat.message.character-name.core-system') }}</span>
               </div>
               <div i-solar:danger-triangle-bold-duotone text-violet-500 />
             </div>
@@ -63,7 +63,7 @@ onTokenLiteral(async () => {
             rounded-lg px-2 py-1 h="unset <sm:fit" bg="<md:primary-500/25"
           >
             <div>
-              <span text-xs text="primary-400/90 dark:primary-600/90" font-semibold class="inline <sm:hidden">{{ t('stage.chat.message.character-name.airi') }}</span>
+              <span text-xs text="primary-400/90 dark:primary-600/90" font-normal class="inline <sm:hidden">{{ t('stage.chat.message.character-name.airi') }}</span>
             </div>
             <div v-if="sending && index === messages.length - 1" i-eos-icons:three-dots-loading />
             <div v-else class="markdown-content break-words" text="base <sm:xs" v-html="process(message.content as string)" />
@@ -75,7 +75,7 @@ onTokenLiteral(async () => {
             h="unset <sm:fit" min-w-20 rounded-lg px-2 py-1 bg="<md:cyan-500/25"
           >
             <div>
-              <span text-xs text="cyan-400/90 dark:cyan-600/90" font-semibold class="inline <sm:hidden">{{ t('stage.chat.message.character-name.you') }}</span>
+              <span text-xs text="cyan-400/90 dark:cyan-600/90" font-normal class="inline <sm:hidden">{{ t('stage.chat.message.character-name.you') }}</span>
             </div>
             <div v-if="message.content" class="markdown-content break-words" text="base <sm:xs" v-html="process(message.content as string)" />
             <div v-else />
diff --git a/apps/stage-web/src/components/Widgets/MobileChatHistory.vue b/apps/stage-web/src/components/Widgets/MobileChatHistory.vue
index 79b60cdf0..41ffc6a0b 100644
--- a/apps/stage-web/src/components/Widgets/MobileChatHistory.vue
+++ b/apps/stage-web/src/components/Widgets/MobileChatHistory.vue
@@ -50,7 +50,7 @@ onTokenLiteral(async () => {
             bg="<md:primary-500/25"
           >
             <div>
-              <span text-xs text="primary-400/90 dark:primary-600/90" font-semibold class="inline <sm:hidden">{{ t('stage.chat.message.character-name.airi') }}</span>
+              <span text-xs text="primary-400/90 dark:primary-600/90" font-normal class="inline <sm:hidden">{{ t('stage.chat.message.character-name.airi') }}</span>
             </div>
             <div v-if="message.content" class="markdown-content" text="base <sm:xs" v-html="process(message.content as string)" />
             <div v-else i-eos-icons:three-dots-loading />
@@ -66,7 +66,7 @@ onTokenLiteral(async () => {
             bg="<md:cyan-500/25"
           >
             <div>
-              <span text-xs text="cyan-400/90 dark:cyan-600/90" font-semibold class="inline <sm:hidden">{{ t('stage.chat.message.character-name.you') }}</span>
+              <span text-xs text="cyan-400/90 dark:cyan-600/90" font-normal class="inline <sm:hidden">{{ t('stage.chat.message.character-name.you') }}</span>
             </div>
             <div v-if="message.content" class="markdown-content" text="base <sm:xs" v-html="process(message.content as string)" />
             <div v-else />
diff --git a/apps/stage-web/src/pages/settings/airi-card/components/CardCreationDialog.vue b/apps/stage-web/src/pages/settings/airi-card/components/CardCreationDialog.vue
index 755c33a07..fdd48f36d 100644
--- a/apps/stage-web/src/pages/settings/airi-card/components/CardCreationDialog.vue
+++ b/apps/stage-web/src/pages/settings/airi-card/components/CardCreationDialog.vue
@@ -178,7 +178,7 @@ const cardPostHistoryInstructions = makeComputed('postHistoryInstructions')
       <DialogOverlay class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut fixed inset-0 z-100 bg-black/50 backdrop-blur-sm" />
       <DialogContent class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-100 m-0 max-h-[90vh] max-w-6xl w-[92vw] flex flex-col overflow-auto border border-neutral-200 rounded-xl bg-white p-5 shadow-xl 2xl:w-[60vw] lg:w-[80vw] md:w-[85vw] xl:w-[70vw] -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800 sm:p-6">
         <div class="w-full flex flex-col gap-5">
-          <DialogTitle text-2xl font-bold class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
+          <DialogTitle text-2xl font-normal class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
             {{ t("settings.pages.card.create_card") }}
           </DialogTitle>
 
diff --git a/apps/stage-web/src/pages/settings/airi-card/components/CardDetailDialog.vue b/apps/stage-web/src/pages/settings/airi-card/components/CardDetailDialog.vue
index 42664f46f..b73dd0b1c 100644
--- a/apps/stage-web/src/pages/settings/airi-card/components/CardDetailDialog.vue
+++ b/apps/stage-web/src/pages/settings/airi-card/components/CardDetailDialog.vue
@@ -174,7 +174,7 @@ const activeTab = computed({
             <div flex="~ row" items-center justify-between>
               <div>
                 <div flex="~ row" items-center gap-2>
-                  <DialogTitle text-2xl font-bold class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
+                  <DialogTitle text-2xl font-normal class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
                     {{ selectedCard.name }}
                   </DialogTitle>
                   <div v-if="isActive" class="flex items-center gap-1 rounded-full bg-primary-100 px-2 py-0.5 text-xs text-primary-600 font-medium dark:bg-primary-900/40 dark:text-primary-400">
diff --git a/apps/stage-web/src/pages/settings/airi-card/components/DeleteCardDialog.vue b/apps/stage-web/src/pages/settings/airi-card/components/DeleteCardDialog.vue
index 1138e87b2..c6168d33e 100644
--- a/apps/stage-web/src/pages/settings/airi-card/components/DeleteCardDialog.vue
+++ b/apps/stage-web/src/pages/settings/airi-card/components/DeleteCardDialog.vue
@@ -44,7 +44,7 @@ function handleConfirm() {
       <AlertDialogContent
         class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-100 max-w-md w-full border border-neutral-200 rounded-xl bg-white p-6 shadow-xl -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800"
       >
-        <AlertDialogTitle class="mb-4 text-xl font-bold">
+        <AlertDialogTitle class="mb-4 text-xl font-normal">
           {{ t('settings.pages.card.delete_card') }}
         </AlertDialogTitle>
         <AlertDialogDescription class="mb-6">
diff --git a/apps/stage-web/src/pages/settings/appearance/color-scheme.vue b/apps/stage-web/src/pages/settings/appearance/color-scheme.vue
index 7f5ca3142..548fb300d 100644
--- a/apps/stage-web/src/pages/settings/appearance/color-scheme.vue
+++ b/apps/stage-web/src/pages/settings/appearance/color-scheme.vue
@@ -32,7 +32,7 @@ const { t } = useI18n()
       :delay="5 * 50"
       transition="all ease-in-out duration-250"
     >
-      <span text-lg font-semibold>{{ $t('settings.pages.themes.sections.section.custom-color.fields.field.primary-color.label') }}</span>
+      <span text-lg font-normal>{{ $t('settings.pages.themes.sections.section.custom-color.fields.field.primary-color.label') }}</span>
       <label relative flex cursor-pointer items-center gap-2>
         <input
           v-model="settings.themeColorsHueDynamic"
diff --git a/apps/stage-web/src/pages/test/filter-message.vue b/apps/stage-web/src/pages/test/filter-message.vue
index 016c570b2..122b3d775 100644
--- a/apps/stage-web/src/pages/test/filter-message.vue
+++ b/apps/stage-web/src/pages/test/filter-message.vue
@@ -68,7 +68,7 @@ async function onSendMessage() {
       </button>
     </div>
     <div w-full rounded-lg bg="neutral-100 dark:neutral-700" p-2>
-      <h3 font-semibold>
+      <h3 font-normal>
         Streaming Message
       </h3>
       <div>{{ streamingMessage.content }}</div>
diff --git a/apps/stage-web/src/pages/test/queues/delays.vue b/apps/stage-web/src/pages/test/queues/delays.vue
index b1b405ee6..d2da56faf 100644
--- a/apps/stage-web/src/pages/test/queues/delays.vue
+++ b/apps/stage-web/src/pages/test/queues/delays.vue
@@ -50,7 +50,7 @@ function onSendMessage() {
     </div>
     <div w-full flex flex-row gap-4>
       <div w-full rounded-lg bg="neutral-100 dark:neutral-700" p-2>
-        <h3 font-semibold>
+        <h3 font-normal>
           Emotion Message
         </h3>
         <div v-for="message in emotionMessageContentProcessed" :key="message">
@@ -58,7 +58,7 @@ function onSendMessage() {
         </div>
       </div>
       <div w-full rounded-lg bg="neutral-100 dark:neutral-700" p-2>
-        <h3 font-semibold>
+        <h3 font-normal>
           Delays
         </h3>
         <div v-for="message in delaysProcessed" :key="message">
diff --git a/apps/stage-web/src/pages/test/queues/emotions.vue b/apps/stage-web/src/pages/test/queues/emotions.vue
index 6da316ea6..d9cda7518 100644
--- a/apps/stage-web/src/pages/test/queues/emotions.vue
+++ b/apps/stage-web/src/pages/test/queues/emotions.vue
@@ -50,7 +50,7 @@ function onSendMessage() {
     </div>
     <div w-full flex flex-row gap-4>
       <div w-full rounded-lg bg="neutral-100 dark:neutral-700" p-2>
-        <h3 font-semibold>
+        <h3 font-normal>
           Messages
         </h3>
         <div v-for="message in messagesProcessed" :key="message">
@@ -58,7 +58,7 @@ function onSendMessage() {
         </div>
       </div>
       <div w-full rounded-lg bg="neutral-100 dark:neutral-700" p-2>
-        <h3 font-semibold>
+        <h3 font-normal>
           Emotions
         </h3>
         <div v-for="message in emotionsProcessed" :key="message">
diff --git a/apps/stage-web/src/pages/test/queues/messages.vue b/apps/stage-web/src/pages/test/queues/messages.vue
index f3ac55065..1d81db3d5 100644
--- a/apps/stage-web/src/pages/test/queues/messages.vue
+++ b/apps/stage-web/src/pages/test/queues/messages.vue
@@ -50,7 +50,7 @@ async function onSendMessage() {
     </div>
     <div w-full flex flex-row gap-4>
       <div w-full rounded-lg bg="neutral-100 dark:neutral-700" p-2>
-        <h3 font-semibold>
+        <h3 font-normal>
           TTS Message
         </h3>
         <div v-for="message in ttsProcessed" :key="message">
diff --git a/packages/stage-ui/src/components/Layouts/PageHeader.vue b/packages/stage-ui/src/components/Layouts/PageHeader.vue
index 866cd091a..515ed81d8 100644
--- a/packages/stage-ui/src/components/Layouts/PageHeader.vue
+++ b/packages/stage-ui/src/components/Layouts/PageHeader.vue
@@ -74,7 +74,7 @@ watch([() => props.title, () => props.subtitle, route], async () => {
       <div v-if="subtitle" absolute left-0 top-0 translate-y="[-80%]">
         <span text="neutral-300 dark:neutral-500" text-nowrap>{{ subtitle }}</span>
       </div>
-      <div text-nowrap text-3xl font-semibold>
+      <div text-nowrap text-3xl font-normal>
         {{ title }}
       </div>
     </h1>
diff --git a/packages/stage-ui/src/components/Misc/Steppers/Steppers.vue b/packages/stage-ui/src/components/Misc/Steppers/Steppers.vue
index 0fce3bfe4..750e147e8 100644
--- a/packages/stage-ui/src/components/Misc/Steppers/Steppers.vue
+++ b/packages/stage-ui/src/components/Misc/Steppers/Steppers.vue
@@ -78,7 +78,7 @@ function goToStep(index: number) {
           <slot name="step" :step="step" :index="index" :is-active="index === value">
             <!-- Default step rendering -->
             <div class="flex flex-col gap-1">
-              <p v-if="typeof step === 'object' && step !== null && 'title' in step" class="mb-4 pb-0 pt-0 text-xl text-primary-600 font-bold dark:text-primary-300">
+              <p v-if="typeof step === 'object' && step !== null && 'title' in step" class="mb-4 pb-0 pt-0 text-xl text-primary-600 font-normal dark:text-primary-300">
                 {{ step.title }}
               </p>
               <p v-if="typeof step === 'object' && step !== null && 'description' in step" class="text-sm text-neutral-600 dark:text-neutral-300">