From af0d2e3a6c01861a4f4ce0851e18f2569676e083 Mon Sep 17 00:00:00 2001
From: gbanyan <gbanyan.huang@gmail.com>
Date: Wed, 19 Nov 2025 00:42:53 +0800
Subject: [PATCH] Formalize font weight hierarchy

---
 components/nav-menu.tsx    |  4 +--
 components/site-header.tsx |  2 +-
 styles/globals.css         | 52 ++++++++++++++++++++++++--------------
 3 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/components/nav-menu.tsx b/components/nav-menu.tsx
index d14e4dd..168eac3 100644
--- a/components/nav-menu.tsx
+++ b/components/nav-menu.tsx
@@ -75,13 +75,13 @@ export function NavMenu({ items }: NavMenuProps) {
         <FontAwesomeIcon icon={open ? faXmark : faBars} className="h-4 w-4" />
       </button>
       <nav
-        className={`${open ? 'flex' : 'hidden'} flex-col gap-2 text-base sm:flex sm:flex-row sm:items-center sm:gap-3 sm:text-sm`}
+        className={`${open ? 'flex' : 'hidden'} flex-col gap-2 sm:flex sm:flex-row sm:items-center sm:gap-3`}
       >
         {items.map((item) => (
           <Link
             key={item.key}
             href={item.href}
-            className="motion-link group relative inline-flex items-center gap-1.5 rounded-full px-3 py-1 font-medium text-slate-600 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200"
+            className="motion-link type-nav group relative inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-slate-600 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200"
             onClick={close}
           >
             <FontAwesomeIcon
diff --git a/components/site-header.tsx b/components/site-header.tsx
index 8bf0ceb..444c74e 100644
--- a/components/site-header.tsx
+++ b/components/site-header.tsx
@@ -25,7 +25,7 @@ export function SiteHeader() {
       <div className="container mx-auto flex items-center justify-between px-4 py-3 text-slate-900 dark:text-slate-100">
         <Link
           href="/"
-          className="motion-link group relative font-semibold tracking-tight text-lg text-slate-900 hover:text-accent focus-visible:outline-none focus-visible:text-accent dark:text-slate-100"
+          className="motion-link group relative type-title text-slate-900 hover:text-accent focus-visible:outline-none focus-visible:text-accent dark:text-slate-100"
         >
           <span className="absolute -bottom-0.5 left-0 h-[2px] w-0 bg-accent transition-all duration-180 ease-snappy group-hover:w-full" aria-hidden="true" />
           {siteConfig.title}
diff --git a/styles/globals.css b/styles/globals.css
index b175bbf..d786fbf 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -8,6 +8,9 @@
   --motion-ease-snappy: cubic-bezier(0.32, 0.72, 0, 1);
   --card-translate-y: -6px;
   --line-height-body: clamp(1.5, 0.15vw + 1.45, 1.65);
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
   --font-system-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'PingFang TC', 'PingFang SC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI Variable Text', 'Segoe UI', 'Microsoft JhengHei', 'Microsoft YaHei', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans CJK TC', 'Noto Sans CJK SC', 'Source Han Sans TC', 'Source Han Sans SC', 'Roboto', 'Ubuntu', 'Cantarell', 'Inter', 'Helvetica Neue', Arial, sans-serif;
 
   font-size: clamp(15px, 0.65vw + 11px, 19px);
@@ -147,29 +150,40 @@ body {
 }
 
 @layer components {
-  .type-display {
-    font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem);
-    line-height: 1.2;
-  }
+.type-display {
+  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem);
+  line-height: 1.2;
+  font-weight: var(--font-weight-semibold);
+}
 
-  .type-title {
-    font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem);
-    line-height: 1.3;
-  }
+.type-title {
+  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem);
+  line-height: 1.3;
+  font-weight: var(--font-weight-semibold);
+}
 
-  .type-subtitle {
-    font-size: clamp(1.25rem, 0.9rem + 1vw, 1.9rem);
-    line-height: 1.35;
-  }
+.type-subtitle {
+  font-size: clamp(1.25rem, 0.9rem + 1vw, 1.9rem);
+  line-height: 1.35;
+  font-weight: var(--font-weight-medium);
+}
 
-  .type-body {
-    font-size: clamp(1rem, 0.2vw + 0.9rem, 1.15rem);
-    line-height: var(--line-height-body);
-  }
+.type-body {
+  font-size: clamp(1rem, 0.2vw + 0.9rem, 1.15rem);
+  line-height: var(--line-height-body);
+  font-weight: var(--font-weight-regular);
+}
 
-  .type-small {
-    font-size: clamp(0.85rem, 0.2vw + 0.8rem, 0.95rem);
-    line-height: 1.4;
+.type-small {
+  font-size: clamp(0.85rem, 0.2vw + 0.8rem, 0.95rem);
+  line-height: 1.4;
+  font-weight: var(--font-weight-regular);
+}
+
+  .type-nav {
+    font-size: clamp(0.95rem, 0.2vw + 0.85rem, 1.05rem);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: 0.04em;
   }
 
   .motion-card {