From 3f176924d065d6c8be3333cafb97a7ae4bb491a2 Mon Sep 17 00:00:00 2001
From: yuming <yuming@baijia.com>
Date: Tue, 2 Jun 2026 09:27:16 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E8=A7=89=E9=87=8D=E6=9E=84=EF=BC=9A?=
 =?UTF-8?q?=E7=B4=AB=E6=B8=90=E5=8F=98=20SaaS=20=E9=A3=8E=20=E2=86=92=20?=
 =?UTF-8?q?=E7=BA=B8=E6=84=9F=E7=BC=96=E8=BE=91=E9=A3=8E=EF=BC=88A=20?=
 =?UTF-8?q?=E6=96=B9=E6=A1=88=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

旧版多处违反 impeccable 设计规范（gradient text、6rpx 粗色条 border-left、
glassmorphism、bounce 动画）且整体呈现典型「AI/SaaS 通用紫渐变」（#6366f1 系、
#667eea 系），用户反馈「AI 味儿太浓」。

色板（OKLCH 概念，hex 落地）：
- 背景：浅米黄 #FAF6ED
- 主文字：深墨蓝 #1F1D2B
- 暖灰副文字：#8A8278
- 强调（仅 today / FAB）：墨红 #C8412F

涉及改动：
- app.wxss：删模板自带 .container padding 200rpx（首页/日历顶部空白真凶）+ 重写全局色板
- index.wxml/wxss：去紫渐变 Header + glassmorphism stats + border-left 大色条 + bounce
- calendar.wxml/wxss/json：去紫渐变月份头 + today 大色块 + section-title 6rpx 紫条
- settings.wxss：同款紫 Header + tips-card 6rpx 紫条 → 全卡边线 + 浅暖底
- add-anniversary.wxss：chip-active 紫 / 取消提交按钮渐变 / importance 高饱和色 → 统一
- add-person.wxss：gradient text + 紫 dashed 头像占位 + 多重渐变 → 全套重写
- person-detail.wxss：微信绿 + 灰底默认色 → 方向 A 色板
- utils/constants.js：IMPORTANCE_COLORS 高/中/低 = 墨红/焦糖/苔绿（替代橙红/橘/鲜绿）

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app.json                                   |   6 +-
 app.wxss                                   | 127 ++++-------
 pages/add-anniversary/add-anniversary.wxss |  48 ++--
 pages/add-person/add-person.wxss           | 140 ++++++------
 pages/calendar/calendar.json               |   3 +
 pages/calendar/calendar.wxml               |   6 +-
 pages/calendar/calendar.wxss               | 201 +++++++++--------
 pages/index/index.wxml                     |  13 +-
 pages/index/index.wxss                     | 249 ++++++++++-----------
 pages/person-detail/person-detail.wxss     | 228 ++++++++++---------
 pages/settings/settings.wxss               | 148 ++++++------
 utils/constants.js                         |   6 +-
 12 files changed, 577 insertions(+), 598 deletions(-)
 create mode 100644 pages/calendar/calendar.json

diff --git a/app.json b/app.json
index 6bba91c..5bc5eef 100644
--- a/app.json
+++ b/app.json
@@ -15,10 +15,10 @@
     "backgroundColor": "#f5f5f5"
   },
   "tabBar": {
-    "color": "#7A7E83",
-    "selectedColor": "#07c160",
+    "color": "#8A8278",
+    "selectedColor": "#1F1D2B",
     "borderStyle": "black",
-    "backgroundColor": "#ffffff",
+    "backgroundColor": "#FAF6ED",
     "list": [
       {
         "pagePath": "pages/index/index",
diff --git a/app.wxss b/app.wxss
index 2f03401..c92fc61 100644
--- a/app.wxss
+++ b/app.wxss
@@ -1,120 +1,91 @@
-/**app.wxss**/
+/**app.wxss
+ * 全局基础样式 —— 纸感编辑风（A 方案）
+ * 色板：浅米黄底 + 墨蓝文字 + 暖灰副文字 + 墨红强调
+ * 注：每个页面可在自己的 wxss 里覆盖；这里只做"全局兜底"
+ */
+
+page {
+  background: #FAF6ED;
+  color: #1F1D2B;
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', system-ui, sans-serif;
+}
+
+/* 通用容器：不设 padding，每页根据需要自定 */
 .container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  padding: 200rpx 0;
+  min-height: 100vh;
+  background-color: #FAF6ED;
   box-sizing: border-box;
 }
 
-/* 全局样式 */
-page {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  background-attachment: fixed;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
-    'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-/* 通用容器 */
+/* 通用内容包装 */
 .content {
-  padding: 40rpx;
+  padding: 32rpx 24rpx;
 }
 
-/* 按钮样式 */
+/* 按钮 */
 .btn {
   border-radius: 12rpx;
-  font-size: 32rpx;
-  padding: 24rpx 48rpx;
-  transition: all 0.3s ease;
+  font-size: 30rpx;
+  padding: 22rpx 36rpx;
+  transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .btn-primary {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #fff;
-  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);
+  background: #1F1D2B;
+  color: #FAF6ED;
+}
+
+.btn-primary:active {
+  opacity: 0.85;
 }
 
 .btn-secondary {
-  background-color: #fff;
-  color: #333;
-  border: 2rpx solid #e8e8e8;
+  background-color: #FFFFFF;
+  color: #1F1D2B;
+  border: 1rpx solid #E8E2D5;
 }
 
-/* 卡片样式 */
-.card {
-  background-color: #fff;
-  border-radius: 24rpx;
-  padding: 32rpx;
-  margin-bottom: 24rpx;
-  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
-  transition: all 0.3s ease;
+.btn-secondary:active {
+  background-color: #F2EEE5;
 }
 
-/* 输入框样式 */
+/* 输入框 */
 .input {
-  background-color: #f8f9fa;
-  padding: 24rpx;
+  background-color: #FFFFFF;
+  border: 1rpx solid #E8E2D5;
+  padding: 22rpx 24rpx;
   border-radius: 12rpx;
-  border: 2rpx solid transparent;
   font-size: 28rpx;
-  transition: all 0.3s ease;
+  color: #1F1D2B;
+  transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .input:focus {
-  background-color: #fff;
-  border-color: #667eea;
+  border-color: #1F1D2B;
 }
 
 /* 分割线 */
 .divider {
   height: 1rpx;
-  background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
-  margin: 32rpx 0;
+  background: #E8E2D5;
+  margin: 28rpx 0;
 }
 
-/* 空状态 */
+/* 通用空状态 */
 .empty-state {
   text-align: center;
   padding: 120rpx 40rpx;
-  color: rgba(255, 255, 255, 0.8);
 }
 
 .empty-state .icon {
-  font-size: 140rpx;
-  margin-bottom: 32rpx;
-  filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1));
+  font-size: 104rpx;
+  margin-bottom: 24rpx;
+  opacity: 0.7;
 }
 
 .empty-state .text {
-  font-size: 32rpx;
-  color: rgba(255, 255, 255, 0.9);
-  font-weight: 500;
-  margin-bottom: 12rpx;
+  font-size: 26rpx;
+  color: #A9A096;
+  line-height: 1.6;
 }
-
-/* 浮动按钮 */
-.fab {
-  position: fixed;
-  bottom: 120rpx;
-  right: 40rpx;
-  width: 112rpx;
-  height: 112rpx;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 64rpx;
-  box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.5);
-  z-index: 100;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.fab:active {
-  transform: scale(0.92);
-  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
-}
-
diff --git a/pages/add-anniversary/add-anniversary.wxss b/pages/add-anniversary/add-anniversary.wxss
index 33001c9..b9be55f 100644
--- a/pages/add-anniversary/add-anniversary.wxss
+++ b/pages/add-anniversary/add-anniversary.wxss
@@ -87,9 +87,9 @@
 }
 
 .chip-active {
-  color: #6366f1;
-  background-color: #eef0ff;
-  border-color: #6366f1;
+  color: #1F1D2B;
+  background-color: #F2EEE5;
+  border-color: #1F1D2B;
 }
 
 .lunar-hint {
@@ -117,9 +117,9 @@
 .lunar-warn-detail {
   margin-top: 12rpx;
   padding: 14rpx 20rpx;
-  background-color: #fffbeb;
-  border-left: 4rpx solid #d97706;
-  border-radius: 4rpx;
+  background-color: #FFF8EE;
+  border: 1rpx solid #EFD9B5;
+  border-radius: 8rpx;
   font-size: 24rpx;
   color: #92400e;
   line-height: 1.6;
@@ -145,15 +145,15 @@
 }
 
 .importance-high {
-  color: #ff5722;
+  color: #C8412F;
 }
 
 .importance-medium {
-  color: #ff9800;
+  color: #B36A1F;
 }
 
 .importance-low {
-  color: #999;
+  color: #8A8278;
 }
 
 .switch-item {
@@ -182,39 +182,35 @@
 
 .btn {
   flex: 1;
-  height: 96rpx;
-  line-height: 96rpx;
-  border-radius: 48rpx;
-  font-size: 32rpx;
-  font-weight: 600;
+  height: 88rpx;
+  line-height: 88rpx;
+  border-radius: 12rpx;
+  font-size: 30rpx;
+  font-weight: 500;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+  transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .btn-cancel {
-  background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf0 100%);
-  color: #666;
-  border: 2rpx solid rgba(102, 126, 234, 0.2);
+  background: #FFFFFF;
+  color: #1F1D2B;
+  border: 1rpx solid #E8E2D5;
 }
 
 .btn-cancel:active {
-  transform: scale(0.98);
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+  background: #F2EEE5;
 }
 
 .btn-submit {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #fff;
-  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
+  background: #1F1D2B;
+  color: #FAF6ED;
 }
 
 .btn-submit:active {
-  transform: scale(0.98);
-  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
+  opacity: 0.85;
 }
 
 .btn-cancel::after,
diff --git a/pages/add-person/add-person.wxss b/pages/add-person/add-person.wxss
index b40248b..d7b74ef 100644
--- a/pages/add-person/add-person.wxss
+++ b/pages/add-person/add-person.wxss
@@ -1,161 +1,159 @@
-/**add-person.wxss**/
+/* add-person.wxss
+ * 视觉方向：纸感编辑风（A 方案，与全局一致）
+ * 原版含 2 个 impeccable 绝对禁项：gradient text (background-clip: text) 和 dashed border 大色块
+ */
+
 .container {
   min-height: 100vh;
-  background: linear-gradient(180deg, rgba(102, 126, 234, 0.08) 0%, transparent 30%);
+  background: #FAF6ED;
   padding-bottom: 120rpx;
 }
 
 .form {
-  padding: 32rpx;
+  padding: 24rpx;
 }
 
 .form-item {
-  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
-  border-radius: 24rpx;
-  padding: 36rpx;
-  margin-bottom: 24rpx;
-  box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.12);
-  border: 2rpx solid rgba(255, 255, 255, 0.8);
+  background: #FFFFFF;
+  border: 1rpx solid #E8E2D5;
+  border-radius: 14rpx;
+  padding: 28rpx;
+  margin-bottom: 20rpx;
 }
 
 .label {
-  font-size: 28rpx;
-  font-weight: 600;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin-bottom: 24rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+  color: #1F1D2B;
+  margin-bottom: 18rpx;
   display: block;
 }
 
 .label.required::after {
   content: ' *';
-  color: #ff5722;
-  -webkit-text-fill-color: #ff5722;
+  color: #C8412F;
 }
 
-/* 头像上传 */
+/* ───── 头像上传 ───── */
 .avatar-upload {
   text-align: center;
 }
 
 .avatar {
-  width: 200rpx;
-  height: 200rpx;
+  width: 176rpx;
+  height: 176rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border: 6rpx solid rgba(255, 255, 255, 0.9);
-  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+  background: #EFE9DC;
+  border: 1rpx solid #E8E2D5;
 }
 
 .avatar-placeholder {
-  width: 200rpx;
-  height: 200rpx;
+  width: 176rpx;
+  height: 176rpx;
   margin: 0 auto;
   border-radius: 50%;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+  background: #FAF6ED;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border: 4rpx dashed rgba(102, 126, 234, 0.4);
-  transition: all 0.3s ease;
+  border: 1rpx dashed #C8C2B4;
+  transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .avatar-placeholder:active {
-  transform: scale(0.95);
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
+  background: #F2EEE5;
 }
 
 .avatar-placeholder .icon {
-  font-size: 64rpx;
+  font-size: 52rpx;
   display: block;
-  margin-bottom: 16rpx;
-  filter: grayscale(0.5);
+  margin-bottom: 12rpx;
+  opacity: 0.6;
 }
 
 .avatar-placeholder .text {
   font-size: 24rpx;
-  color: #667eea;
+  color: #8A8278;
   font-weight: 500;
 }
 
+/* ───── 输入 ───── */
 .input {
-  background-color: #f8f9fa;
-  border-radius: 12rpx;
-  padding: 24rpx;
+  background-color: #FAF6ED;
+  border: 1rpx solid #E8E2D5;
+  border-radius: 10rpx;
+  padding: 22rpx 24rpx;
   font-size: 28rpx;
-  border: 2rpx solid transparent;
-  transition: all 0.3s ease;
+  color: #1F1D2B;
+  transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .input:focus {
-  background-color: #fff;
-  border-color: #667eea;
+  background-color: #FFFFFF;
+  border-color: #1F1D2B;
 }
 
 .textarea {
-  background-color: #f8f9fa;
-  border-radius: 12rpx;
-  padding: 24rpx;
+  background-color: #FAF6ED;
+  border: 1rpx solid #E8E2D5;
+  border-radius: 10rpx;
+  padding: 22rpx 24rpx;
   font-size: 28rpx;
-  min-height: 160rpx;
-  border: 2rpx solid transparent;
-  transition: all 0.3s ease;
+  color: #1F1D2B;
+  min-height: 140rpx;
+  transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  box-sizing: border-box;
+  width: 100%;
 }
 
 .textarea:focus {
-  background-color: #fff;
-  border-color: #667eea;
+  background-color: #FFFFFF;
+  border-color: #1F1D2B;
 }
 
+/* ───── 按钮 ───── */
 .buttons {
   display: flex;
-  gap: 24rpx;
-  margin-top: 40rpx;
-  padding: 0 32rpx 32rpx;
+  gap: 20rpx;
+  margin-top: 32rpx;
+  padding: 0 24rpx 32rpx;
 }
 
 .btn {
   flex: 1;
-  height: 96rpx;
-  line-height: 96rpx;
-  border-radius: 48rpx;
-  font-size: 32rpx;
-  font-weight: 600;
+  height: 88rpx;
+  line-height: 88rpx;
+  border-radius: 12rpx;
+  font-size: 30rpx;
+  font-weight: 500;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+  transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .btn-cancel {
-  background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf0 100%);
-  color: #666;
-  border: 2rpx solid rgba(102, 126, 234, 0.2);
+  background: #FFFFFF;
+  color: #1F1D2B;
+  border: 1rpx solid #E8E2D5;
 }
 
 .btn-cancel:active {
-  transform: scale(0.98);
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+  background: #F2EEE5;
 }
 
 .btn-submit {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #fff;
-  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
+  background: #1F1D2B;
+  color: #FAF6ED;
 }
 
 .btn-submit:active {
-  transform: scale(0.98);
-  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
+  opacity: 0.85;
 }
 
 .btn-cancel::after,
 .btn-submit::after {
   border: none;
 }
-
diff --git a/pages/calendar/calendar.json b/pages/calendar/calendar.json
new file mode 100644
index 0000000..a802d11
--- /dev/null
+++ b/pages/calendar/calendar.json
@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "日历"
+}
diff --git a/pages/calendar/calendar.wxml b/pages/calendar/calendar.wxml
index 123ba8d..7f8c95a 100644
--- a/pages/calendar/calendar.wxml
+++ b/pages/calendar/calendar.wxml
@@ -3,11 +3,11 @@
   <!-- 日历头部 -->
   <view class="calendar-header">
     <view class="month-navigation">
-      <text class="nav-btn" bindtap="onPrevMonth">‹</text>
+      <view class="nav-btn" bindtap="onPrevMonth">‹</view>
       <text class="month-title">{{currentYear}}年{{currentMonth}}月</text>
-      <text class="nav-btn" bindtap="onNextMonth">›</text>
+      <view class="nav-btn" bindtap="onNextMonth">›</view>
     </view>
-    <button class="today-btn" bindtap="onGoToday">今天</button>
+    <view class="today-btn" bindtap="onGoToday">今天</view>
   </view>
 
   <!-- 星期标题 -->
diff --git a/pages/calendar/calendar.wxss b/pages/calendar/calendar.wxss
index 3e33eff..e06c33c 100644
--- a/pages/calendar/calendar.wxss
+++ b/pages/calendar/calendar.wxss
@@ -1,91 +1,98 @@
-/**calendar.wxss**/
+/* calendar.wxss
+ * 视觉方向：纸感编辑风（A 方案，与首页一致）
+ * 与首页统一色板：浅米黄底 + 墨蓝文字 + 暖灰副文字 + 墨红强调
+ */
+
 .container {
   min-height: 100vh;
-  background-color: #f5f5f5;
+  background-color: #FAF6ED;
 }
 
+/* ───── 月份头部 ───── */
 .calendar-header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 40rpx 32rpx;
+  padding: 20rpx 24rpx 16rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.2);
 }
 
 .month-navigation {
   display: flex;
   align-items: center;
-  gap: 24rpx;
+  gap: 28rpx;
 }
 
 .nav-btn {
   font-size: 40rpx;
-  color: #fff;
+  color: #1F1D2B;
   font-weight: 300;
   width: 56rpx;
   height: 56rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: rgba(255, 255, 255, 0.2);
   border-radius: 50%;
-  transition: all 0.2s;
+  border: 1rpx solid #E8E2D5;
+  background: #FFFFFF;
+  transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  line-height: 1;
 }
 
 .nav-btn:active {
-  background-color: rgba(255, 255, 255, 0.3);
-  transform: scale(0.95);
+  background: #F2EEE5;
 }
 
 .month-title {
-  font-size: 36rpx;
+  font-size: 40rpx;
   font-weight: 600;
-  color: #fff;
+  color: #1F1D2B;
   min-width: 240rpx;
   text-align: center;
+  letter-spacing: -0.5rpx;
 }
 
 .today-btn {
-  padding: 14rpx 32rpx;
-  background-color: rgba(255, 255, 255, 0.25);
-  color: #fff;
-  border-radius: 40rpx;
-  font-size: 26rpx;
-  border: none;
-  font-weight: 600;
-  transition: all 0.2s;
+  padding: 10rpx 24rpx;
+  background: transparent;
+  color: #1F1D2B;
+  border: 1rpx solid #1F1D2B;
+  border-radius: 36rpx;
+  font-size: 24rpx;
+  font-weight: 500;
+  transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  line-height: 1.5;
 }
 
 .today-btn:active {
-  background-color: rgba(255, 255, 255, 0.35);
-  transform: scale(0.95);
+  background: #1F1D2B;
+  color: #FAF6ED;
 }
 
 .today-btn::after {
   border: none;
 }
 
+/* ───── 周标题 ───── */
 .week-header {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  background: linear-gradient(to bottom, #fff 0%, #fafafa 100%);
-  padding: 20rpx 24rpx 12rpx 24rpx;
+  padding: 8rpx 24rpx 12rpx;
   gap: 12rpx;
-  border-bottom: 2rpx solid #f0f0f0;
   box-sizing: border-box;
+  border-top: 1rpx solid #E8E2D5;
+  border-bottom: 1rpx solid #E8E2D5;
+  margin: 0 12rpx;
 }
 
 .week-title {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 60rpx;
-  font-size: 26rpx;
-  color: #888;
-  font-weight: 600;
-  margin: 0;
-  padding: 0;
+  height: 56rpx;
+  font-size: 22rpx;
+  color: #8A8278;
+  font-weight: 500;
+  letter-spacing: 2rpx;
   box-sizing: border-box;
 }
 
@@ -93,60 +100,60 @@
   display: block;
 }
 
+/* ───── 日历主体 ───── */
 .calendar-content {
-  height: calc(100vh - 200rpx);
-  background-color: #f5f5f5;
+  height: calc(100vh - 220rpx);
+  background-color: #FAF6ED;
 }
 
 .calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  background-color: #f5f5f5;
-  padding: 16rpx 24rpx 16rpx 24rpx;
+  padding: 16rpx 24rpx;
   gap: 12rpx;
   box-sizing: border-box;
 }
 
 .calendar-cell {
-  min-height: 100rpx;
-  background-color: #fff;
+  min-height: 96rpx;
+  background-color: #FFFFFF;
   border-radius: 12rpx;
+  border: 1rpx solid #E8E2D5;
   padding: 12rpx 8rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
-  transition: all 0.2s;
   box-sizing: border-box;
-  margin: 0;
+  transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .calendar-cell.other-month {
   background-color: transparent;
-  box-shadow: none;
+  border-color: transparent;
 }
 
+/* today：克制的墨红圆点圈定 date-num，不再大色块 + scale */
 .calendar-cell.today {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.3);
-  transform: scale(1.05);
+  background: #FFF1EA;
+  border-color: #E8BCA7;
 }
 
 .calendar-cell.today .date-num {
-  color: #fff;
+  color: #C8412F;
   font-weight: 700;
 }
 
 .date-num {
-  font-size: 32rpx;
-  color: #333;
+  font-size: 30rpx;
+  color: #1F1D2B;
   margin-bottom: 8rpx;
   font-weight: 600;
+  font-feature-settings: "tnum";
 }
 
 .calendar-cell.other-month .date-num {
-  color: #d0d0d0;
+  color: #C8C2B4;
   font-weight: 400;
 }
 
@@ -162,64 +169,62 @@
   width: 8rpx;
   height: 8rpx;
   border-radius: 50%;
-  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
-}
-
-.calendar-cell.today .event-dot {
-  background-color: #fff !important;
 }
 
 .more-text {
   font-size: 18rpx;
-  color: #999;
+  color: #8A8278;
   margin-top: 4rpx;
   font-weight: 500;
 }
 
 .calendar-cell.today .more-text {
-  color: #fff;
+  color: #C8412F;
 }
 
-/* 事件列表 */
+/* ───── 列表区 ───── */
 .events-list {
-  padding: 32rpx 24rpx;
+  padding: 32rpx 24rpx 80rpx;
 }
 
+/* section-title 用纯排版，不用 6rpx border-left（绝对禁用项） */
 .section-title {
-  font-size: 32rpx;
-  font-weight: 700;
-  color: #333;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1F1D2B;
   margin-bottom: 24rpx;
-  padding-left: 16rpx;
-  border-left: 6rpx solid #667eea;
+  letter-spacing: 1rpx;
 }
 
 .empty-state {
   text-align: center;
   padding: 120rpx 40rpx;
-  opacity: 0.6;
 }
 
 .empty-state .icon {
-  font-size: 120rpx;
+  font-size: 104rpx;
   display: block;
-  margin-bottom: 32rpx;
+  margin-bottom: 24rpx;
+  opacity: 0.7;
 }
 
 .empty-state .text {
-  font-size: 28rpx;
-  color: #999;
+  font-size: 26rpx;
+  color: #A9A096;
   line-height: 1.6;
 }
 
 .event-card {
-  background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
-  border-radius: 16rpx;
-  padding: 32rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
-  border: 2rpx solid rgba(102, 126, 234, 0.1);
-  transition: all 0.3s;
+  background: #FFFFFF;
+  border: 1rpx solid #E8E2D5;
+  border-radius: 14rpx;
+  padding: 24rpx 28rpx;
+  margin-bottom: 16rpx;
+  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.event-card:active {
+  transform: scale(0.985);
 }
 
 .event-header {
@@ -228,55 +233,59 @@
 }
 
 .event-icon {
-  font-size: 40rpx;
-  margin-right: 16rpx;
+  font-size: 32rpx;
+  margin-right: 14rpx;
+  flex-shrink: 0;
 }
 
 .event-title {
   flex: 1;
   font-size: 28rpx;
   font-weight: 600;
-  color: #333;
+  color: #1F1D2B;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .event-date {
   font-size: 24rpx;
-  color: #999;
+  color: #8A8278;
+  flex-shrink: 0;
+  margin-left: 12rpx;
 }
 
 .event-info {
   display: flex;
   align-items: center;
-  gap: 16rpx;
-  margin-top: 16rpx;
+  gap: 12rpx;
+  margin-top: 14rpx;
+  padding-left: 46rpx;
 }
 
 .lunar-badge {
-  padding: 6rpx 16rpx;
-  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
-  color: #1976d2;
-  border-radius: 20rpx;
+  padding: 4rpx 14rpx;
+  background: #F2EEE5;
+  color: #8A8278;
+  border-radius: 18rpx;
   font-size: 20rpx;
-  font-weight: 600;
-  box-shadow: 0 2rpx 8rpx rgba(25, 118, 210, 0.15);
+  font-weight: 500;
 }
 
 .status {
   font-size: 22rpx;
-  padding: 6rpx 16rpx;
-  border-radius: 20rpx;
+  padding: 4rpx 14rpx;
+  border-radius: 18rpx;
   font-weight: 600;
 }
 
 .status.urgent {
-  background: linear-gradient(135deg, #ffe0db 0%, #ffccbc 100%);
-  color: #ff5722;
-  box-shadow: 0 2rpx 8rpx rgba(255, 87, 34, 0.15);
+  background: #FFE3D7;
+  color: #C8412F;
 }
 
 .status.warning {
-  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
-  color: #ff9800;
-  box-shadow: 0 2rpx 8rpx rgba(255, 152, 0, 0.15);
+  background: #FFEFD9;
+  color: #B36A1F;
 }
-
diff --git a/pages/index/index.wxml b/pages/index/index.wxml
index 388e700..48f90a6 100644
--- a/pages/index/index.wxml
+++ b/pages/index/index.wxml
@@ -1,21 +1,16 @@
 <!--index.wxml-->
 <view class="page">
 
-  <!-- 顶部 Header -->
+  <!-- 顶部 Header：纸感编辑风，排版替代色块 -->
   <view class="header">
-    <view class="header-top">
-      <view class="header-left">
-        <text class="header-title">生日提醒</text>
-        <text class="header-date">{{todayText}}</text>
-      </view>
-      <view class="header-icon">🎂</view>
-    </view>
+    <text class="header-title">生日提醒</text>
+    <text class="header-date">{{todayText}}</text>
+    <view class="header-rule"></view>
     <view class="stats-row">
       <view class="stat-item">
         <text class="stat-num">{{totalCount}}</text>
         <text class="stat-label">位好友</text>
       </view>
-      <view class="stat-sep"></view>
       <view class="stat-item">
         <text class="stat-num {{upcomingCount > 0 ? 'stat-num-urgent' : ''}}">{{upcomingCount}}</text>
         <text class="stat-label">即将到来</text>
diff --git a/pages/index/index.wxss b/pages/index/index.wxss
index d31e8f8..3d4bf39 100644
--- a/pages/index/index.wxss
+++ b/pages/index/index.wxss
@@ -1,124 +1,113 @@
-/* index.wxss */
+/* index.wxss
+ * 视觉方向：纸感编辑风（A 方案）
+ * - 浅米黄底（暖中性，反 SaaS 通用感）
+ * - 墨蓝主文字 + 暖灰副文字
+ * - 仅「今天/FAB」用墨红强调（Restrained，强调色占比 < 10%）
+ * - 删除原 #6366f1→#8b5cf6 紫渐变、glassmorphism、bounce 动画、border-left 大色条
+ */
 
 page {
-  background: #f1f4f9;
+  background: #FAF6ED;
 }
 
 .page {
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background: #f1f4f9;
+  background: #FAF6ED;
 }
 
 /* ───── Header ───── */
 .header {
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  padding: 48rpx 36rpx 40rpx;
+  padding: 56rpx 36rpx 24rpx;
   flex-shrink: 0;
 }
 
-.header-top {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  margin-bottom: 32rpx;
-}
-
-.header-left {
-  display: flex;
-  flex-direction: column;
-}
-
 .header-title {
-  font-size: 44rpx;
-  font-weight: 700;
-  color: #fff;
-  line-height: 1.2;
-  letter-spacing: 2rpx;
+  display: block;
+  font-size: 52rpx;
+  font-weight: 600;
+  color: #1F1D2B;
+  line-height: 1.15;
+  letter-spacing: -0.5rpx;
 }
 
 .header-date {
+  display: block;
   font-size: 26rpx;
-  color: rgba(255, 255, 255, 0.7);
-  margin-top: 8rpx;
+  color: #8A8278;
+  margin-top: 10rpx;
 }
 
-.header-icon {
-  font-size: 64rpx;
-  opacity: 0.9;
+.header-rule {
+  height: 1rpx;
+  background: #E8E2D5;
+  margin-top: 28rpx;
 }
 
 .stats-row {
   display: flex;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 20rpx;
-  padding: 20rpx 32rpx;
-  backdrop-filter: blur(8rpx);
+  gap: 64rpx;
+  padding-top: 24rpx;
 }
 
 .stat-item {
   display: flex;
-  align-items: baseline;
-  gap: 8rpx;
-  flex: 1;
-  justify-content: center;
+  flex-direction: column;
+  gap: 4rpx;
 }
 
 .stat-num {
-  font-size: 48rpx;
-  font-weight: 700;
-  color: #fff;
+  font-size: 44rpx;
+  font-weight: 600;
+  color: #1F1D2B;
   line-height: 1;
+  letter-spacing: -1rpx;
 }
 
 .stat-num-urgent {
-  color: #fbbf24;
+  color: #C8412F;
 }
 
 .stat-label {
   font-size: 24rpx;
-  color: rgba(255, 255, 255, 0.75);
+  color: #8A8278;
 }
 
 .stat-sep {
-  width: 2rpx;
-  height: 48rpx;
-  background: rgba(255, 255, 255, 0.25);
-  flex-shrink: 0;
+  display: none;
 }
 
 /* ───── Search ───── */
 .search-wrap {
-  padding: 24rpx 24rpx 12rpx;
+  padding: 16rpx 24rpx 8rpx;
   flex-shrink: 0;
 }
 
 .search-box {
   display: flex;
   align-items: center;
-  background: #fff;
-  border-radius: 48rpx;
-  padding: 20rpx 28rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.07);
+  background: #FFFFFF;
+  border: 1rpx solid #E8E2D5;
+  border-radius: 14rpx;
+  padding: 18rpx 24rpx;
 }
 
 .search-icon {
-  font-size: 32rpx;
-  margin-right: 16rpx;
-  opacity: 0.6;
+  font-size: 30rpx;
+  margin-right: 14rpx;
+  opacity: 0.55;
 }
 
 .search-input {
   flex: 1;
   font-size: 28rpx;
-  color: #1e293b;
+  color: #1F1D2B;
   line-height: 1.5;
 }
 
 .search-placeholder {
-  color: #94a3b8;
+  color: #A9A096;
 }
 
 /* ───── Filter ───── */
@@ -129,71 +118,69 @@ page {
 
 .filter-bar {
   display: flex;
-  padding: 16rpx 24rpx 20rpx;
-  gap: 16rpx;
+  padding: 16rpx 24rpx 8rpx;
+  gap: 36rpx;
 }
 
 .filter-tab {
   display: inline-flex;
   align-items: center;
-  padding: 14rpx 28rpx;
-  border-radius: 48rpx;
-  font-size: 26rpx;
-  color: #64748b;
-  background: #fff;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+  padding: 10rpx 0;
+  font-size: 28rpx;
+  color: #8A8278;
+  background: transparent;
   white-space: nowrap;
-  transition: all 0.2s ease;
   flex-shrink: 0;
+  border-bottom: 4rpx solid transparent;
+  transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .tab-active {
-  background: #6366f1;
-  color: #fff;
-  box-shadow: 0 4rpx 16rpx rgba(99, 102, 241, 0.4);
+  color: #1F1D2B;
+  font-weight: 600;
+  border-bottom-color: #1F1D2B;
 }
 
 /* ───── List ───── */
 .list {
   flex: 1;
   overflow: hidden;
-  padding: 0 24rpx;
+  padding: 16rpx 24rpx 0;
 }
 
 /* ───── Card ───── */
 .card {
   display: flex;
   align-items: center;
-  background: #fff;
-  border-radius: 20rpx;
-  padding: 28rpx 28rpx 28rpx 24rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
-  border-left: 6rpx solid #e2e8f0;
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
-  position: relative;
-  overflow: hidden;
+  background: #FFFFFF;
+  border: 1rpx solid #E8E2D5;
+  border-radius: 14rpx;
+  padding: 24rpx 24rpx 24rpx 20rpx;
+  margin-bottom: 16rpx;
+  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .card:active {
   transform: scale(0.985);
-  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.05);
 }
 
+/* 强调用整卡背景 tint，不再用粗 border-left（绝对禁用项之一） */
 .card-urgent {
-  border-left-color: #f97316;
+  background: #FFF8EE;
+  border-color: #EFD9B5;
 }
 
 .card-today {
-  border-left-color: #ef4444;
+  background: #FFF1EA;
+  border-color: #E8BCA7;
 }
 
 /* ───── Avatar ───── */
 .avatar-wrap {
-  width: 96rpx;
-  height: 96rpx;
+  width: 88rpx;
+  height: 88rpx;
   border-radius: 50%;
-  margin-right: 24rpx;
+  margin-right: 20rpx;
   flex-shrink: 0;
   overflow: hidden;
 }
@@ -208,16 +195,16 @@ page {
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  background: #EFE9DC;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .avatar-initial {
-  font-size: 40rpx;
-  font-weight: 700;
-  color: #fff;
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #5A5247;
 }
 
 /* ───── Card body ───── */
@@ -230,7 +217,7 @@ page {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 12rpx;
+  margin-bottom: 8rpx;
 }
 
 .name-group {
@@ -245,7 +232,7 @@ page {
 .card-name {
   font-size: 32rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: #1F1D2B;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -253,10 +240,10 @@ page {
 
 .card-nickname {
   font-size: 22rpx;
-  color: #94a3b8;
-  background: #f1f5f9;
-  padding: 4rpx 12rpx;
-  border-radius: 20rpx;
+  color: #8A8278;
+  background: #F2EEE5;
+  padding: 3rpx 12rpx;
+  border-radius: 18rpx;
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -265,8 +252,8 @@ page {
 .badge {
   display: inline-flex;
   align-items: center;
-  padding: 6rpx 18rpx;
-  border-radius: 24rpx;
+  padding: 6rpx 16rpx;
+  border-radius: 20rpx;
   flex-shrink: 0;
 }
 
@@ -277,38 +264,38 @@ page {
 }
 
 .badge-today {
-  background: #fee2e2;
+  background: #FFE3D7;
 }
 .badge-today .badge-text {
-  color: #ef4444;
+  color: #C8412F;
 }
 
 .badge-hot {
-  background: #ffedd5;
+  background: #FFEFD9;
 }
 .badge-hot .badge-text {
-  color: #f97316;
+  color: #B36A1F;
 }
 
 .badge-soon {
-  background: #fef9c3;
+  background: #FAF1D9;
 }
 .badge-soon .badge-text {
-  color: #ca8a04;
+  color: #8C7322;
 }
 
 .badge-month {
-  background: #ede9fe;
+  background: #ECE6D7;
 }
 .badge-month .badge-text {
-  color: #7c3aed;
+  color: #6F664E;
 }
 
 .badge-normal {
-  background: #f1f5f9;
+  background: #F2EEE5;
 }
 .badge-normal .badge-text {
-  color: #64748b;
+  color: #8A8278;
 }
 
 /* ───── Anniversary row ───── */
@@ -325,7 +312,7 @@ page {
 
 .ann-info {
   font-size: 26rpx;
-  color: #475569;
+  color: #5A5247;
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
@@ -333,15 +320,15 @@ page {
 }
 
 .muted {
-  color: #94a3b8;
+  color: #A9A096;
 }
 
 .ann-more {
   font-size: 22rpx;
-  color: #6366f1;
-  background: #ede9fe;
-  padding: 4rpx 12rpx;
-  border-radius: 20rpx;
+  color: #8A8278;
+  background: #F2EEE5;
+  padding: 3rpx 12rpx;
+  border-radius: 18rpx;
   flex-shrink: 0;
 }
 
@@ -354,24 +341,21 @@ page {
 }
 
 .empty-icon {
-  font-size: 120rpx;
-  margin-bottom: 32rpx;
+  font-size: 104rpx;
+  margin-bottom: 28rpx;
+  opacity: 0.7;
 }
 
 .empty-title {
-  font-size: 32rpx;
+  font-size: 30rpx;
   font-weight: 600;
-  color: #475569;
-  margin-bottom: 16rpx;
+  color: #5A5247;
+  margin-bottom: 12rpx;
 }
 
 .empty-hint {
-  font-size: 26rpx;
-  color: #94a3b8;
-  background: #fff;
-  padding: 14rpx 32rpx;
-  border-radius: 40rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+  font-size: 24rpx;
+  color: #A9A096;
 }
 
 /* ───── List bottom padding ───── */
@@ -382,28 +366,27 @@ page {
 /* ───── FAB ───── */
 .fab {
   position: fixed;
-  bottom: 120rpx;
-  right: 40rpx;
-  width: 112rpx;
-  height: 112rpx;
+  bottom: 64rpx;
+  right: 36rpx;
+  width: 104rpx;
+  height: 104rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  background: #1F1D2B;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 12rpx 40rpx rgba(99, 102, 241, 0.5);
+  box-shadow: 0 10rpx 28rpx rgba(31, 29, 43, 0.32);
   z-index: 100;
-  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
+  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .fab:active {
-  transform: scale(0.9);
-  box-shadow: 0 6rpx 20rpx rgba(99, 102, 241, 0.4);
+  transform: scale(0.93);
 }
 
 .fab-icon {
-  font-size: 64rpx;
-  color: #fff;
+  font-size: 56rpx;
+  color: #FAF6ED;
   font-weight: 300;
   line-height: 1;
   margin-top: -4rpx;
diff --git a/pages/person-detail/person-detail.wxss b/pages/person-detail/person-detail.wxss
index 92304ec..3831dfe 100644
--- a/pages/person-detail/person-detail.wxss
+++ b/pages/person-detail/person-detail.wxss
@@ -1,63 +1,68 @@
-/**person-detail.wxss**/
+/* person-detail.wxss
+ * 视觉方向：纸感编辑风（A 方案，与全局一致）
+ */
+
 .container {
   min-height: 100vh;
-  background-color: #f5f5f5;
-  padding-bottom: 120rpx;
+  background-color: #FAF6ED;
+  padding: 24rpx 24rpx 120rpx;
 }
 
+/* ───── 人员卡片 ───── */
 .person-card {
-  background-color: #fff;
-  margin: 32rpx;
-  border-radius: 16rpx;
-  padding: 40rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+  background-color: #FFFFFF;
+  border: 1rpx solid #E8E2D5;
+  border-radius: 14rpx;
+  padding: 32rpx;
+  margin-bottom: 32rpx;
 }
 
 .person-header {
   display: flex;
   align-items: center;
-  margin-bottom: 24rpx;
+  margin-bottom: 20rpx;
 }
 
 .avatar {
-  width: 120rpx;
-  height: 120rpx;
+  width: 112rpx;
+  height: 112rpx;
   border-radius: 50%;
-  margin-right: 32rpx;
-  background-color: #f0f0f0;
+  margin-right: 24rpx;
+  background-color: #EFE9DC;
 }
 
 .person-info {
   flex: 1;
+  min-width: 0;
 }
 
 .person-name {
   font-size: 36rpx;
   font-weight: 600;
-  color: #333;
+  color: #1F1D2B;
   display: block;
-  margin-bottom: 8rpx;
+  margin-bottom: 6rpx;
 }
 
 .person-nickname {
-  font-size: 26rpx;
-  color: #999;
+  font-size: 24rpx;
+  color: #8A8278;
 }
 
 .person-remark {
-  font-size: 28rpx;
-  color: #666;
-  line-height: 1.6;
-  margin-bottom: 24rpx;
-  padding: 24rpx;
-  background-color: #f9f9f9;
-  border-radius: 8rpx;
+  font-size: 26rpx;
+  color: #5A5247;
+  line-height: 1.65;
+  margin-bottom: 20rpx;
+  padding: 18rpx 22rpx;
+  background-color: #FAF6ED;
+  border-radius: 10rpx;
 }
 
 .actions {
   display: flex;
-  gap: 24rpx;
-  margin-top: 32rpx;
+  gap: 20rpx;
+  margin-top: 24rpx;
 }
 
 .action-btn {
@@ -65,189 +70,209 @@
   height: 72rpx;
   line-height: 72rpx;
   border-radius: 12rpx;
-  font-size: 28rpx;
-  background-color: #f5f5f5;
-  color: #666;
-  border: none;
+  font-size: 26rpx;
+  font-weight: 500;
+  background-color: #FFFFFF;
+  color: #1F1D2B;
+  border: 1rpx solid #E8E2D5;
+  transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.action-btn:active {
+  background-color: #F2EEE5;
 }
 
 .action-btn.danger {
-  background-color: #fff3f0;
-  color: #ff5722;
+  background-color: #FFFFFF;
+  color: #C8412F;
+  border-color: #E8BCA7;
+}
+
+.action-btn.danger:active {
+  background-color: #FFF1EA;
 }
 
 .action-btn::after {
   border: none;
 }
 
-/* 纪念日列表 */
+/* ───── 纪念日列表 ───── */
 .section {
-  padding: 0 32rpx;
+  padding: 0;
 }
 
 .section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 24rpx;
+  margin-bottom: 20rpx;
+  padding: 0 8rpx;
 }
 
 .section-title {
-  font-size: 32rpx;
+  font-size: 28rpx;
   font-weight: 600;
-  color: #333;
+  color: #1F1D2B;
+  letter-spacing: 1rpx;
 }
 
 .add-btn {
-  padding: 12rpx 24rpx;
-  background-color: #07c160;
-  color: #fff;
-  border-radius: 40rpx;
-  font-size: 24rpx;
+  padding: 10rpx 22rpx;
+  background-color: #1F1D2B;
+  color: #FAF6ED;
+  border-radius: 36rpx;
+  font-size: 22rpx;
   border: none;
+  font-weight: 500;
 }
 
 .add-btn::after {
   border: none;
 }
 
-/* 纪念日卡片 */
+/* ───── 纪念日卡片 ───── */
 .anniversary-card {
-  background-color: #fff;
-  border-radius: 16rpx;
-  padding: 32rpx;
-  margin-bottom: 24rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+  background-color: #FFFFFF;
+  border: 1rpx solid #E8E2D5;
+  border-radius: 14rpx;
+  padding: 24rpx 28rpx;
+  margin-bottom: 16rpx;
 }
 
 .anniversary-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 20rpx;
+  margin-bottom: 16rpx;
 }
 
 .anniversary-type {
   display: flex;
   align-items: center;
+  min-width: 0;
 }
 
 .type-icon {
-  font-size: 40rpx;
+  font-size: 32rpx;
   margin-right: 12rpx;
+  flex-shrink: 0;
 }
 
 .type-text {
-  font-size: 32rpx;
+  font-size: 28rpx;
   font-weight: 600;
-  color: #333;
+  color: #1F1D2B;
 }
 
 .importance-badge {
-  padding: 8rpx 20rpx;
-  border-radius: 40rpx;
-  font-size: 22rpx;
+  padding: 4rpx 16rpx;
+  border-radius: 24rpx;
+  font-size: 20rpx;
+  font-weight: 500;
+  flex-shrink: 0;
 }
 
 .importance-high {
-  background-color: #fff3f0;
-  color: #ff5722;
+  background-color: #FFE3D7;
+  color: #C8412F;
 }
 
 .importance-medium {
-  background-color: #fff8e6;
-  color: #ff9800;
+  background-color: #FFEFD9;
+  color: #B36A1F;
 }
 
 .importance-low {
-  background-color: #f5f5f5;
-  color: #999;
+  background-color: #F2EEE5;
+  color: #8A8278;
 }
 
 .anniversary-date {
-  margin-bottom: 16rpx;
-  font-size: 26rpx;
-  color: #666;
+  margin-bottom: 12rpx;
+  font-size: 24rpx;
+  color: #5A5247;
 }
 
 .date-label {
-  color: #999;
+  color: #8A8278;
 }
 
 .date-text {
-  color: #333;
+  color: #1F1D2B;
   font-weight: 500;
   margin-right: 12rpx;
 }
 
 .lunar-badge {
   display: inline-block;
-  padding: 4rpx 12rpx;
-  background-color: #e3f2fd;
-  color: #1976d2;
-  border-radius: 4rpx;
+  padding: 3rpx 12rpx;
+  background-color: #F2EEE5;
+  color: #8A8278;
+  border-radius: 18rpx;
   font-size: 20rpx;
+  font-weight: 500;
 }
 
 .days-info {
-  margin: 16rpx 0;
+  margin: 12rpx 0;
 }
 
 .days-text {
-  font-size: 28rpx;
+  font-size: 26rpx;
   font-weight: 500;
-  color: #07c160;
+  color: #6F8C58;
 }
 
 .days-text.urgent {
-  color: #ff5722;
+  color: #C8412F;
   font-weight: 600;
 }
 
 .days-text.warning {
-  color: #ff9800;
+  color: #B36A1F;
 }
 
 .days-text.past {
-  color: #999;
+  color: #A9A096;
 }
 
 .anniversary-remark {
-  font-size: 26rpx;
-  color: #999;
-  line-height: 1.6;
-  margin: 16rpx 0;
-  padding: 16rpx;
-  background-color: #f9f9f9;
+  font-size: 24rpx;
+  color: #5A5247;
+  line-height: 1.65;
+  margin: 14rpx 0;
+  padding: 14rpx 18rpx;
+  background-color: #FAF6ED;
   border-radius: 8rpx;
 }
 
 .anniversary-actions {
   display: flex;
-  gap: 16rpx;
-  margin-top: 24rpx;
-  padding-top: 24rpx;
-  border-top: 1px solid #f0f0f0;
+  gap: 14rpx;
+  margin-top: 20rpx;
+  padding-top: 20rpx;
+  border-top: 1rpx solid #E8E2D5;
 }
 
 .edit-btn,
 .delete-btn {
   flex: 1;
-  height: 64rpx;
-  line-height: 64rpx;
-  border-radius: 8rpx;
-  font-size: 24rpx;
-  border: none;
+  height: 60rpx;
+  line-height: 60rpx;
+  border-radius: 10rpx;
+  font-size: 22rpx;
+  border: 1rpx solid #E8E2D5;
+  background-color: #FFFFFF;
+  font-weight: 500;
 }
 
 .edit-btn {
-  background-color: #f5f5f5;
-  color: #666;
+  color: #1F1D2B;
 }
 
 .delete-btn {
-  background-color: #fff3f0;
-  color: #ff5722;
+  color: #C8412F;
+  border-color: #E8BCA7;
 }
 
 .edit-btn::after,
@@ -255,19 +280,20 @@
   border: none;
 }
 
+/* ───── 空状态 ───── */
 .empty-state {
   text-align: center;
-  padding: 120rpx 40rpx;
+  padding: 96rpx 40rpx;
 }
 
 .empty-state .icon {
-  font-size: 120rpx;
+  font-size: 96rpx;
   display: block;
-  margin-bottom: 32rpx;
+  margin-bottom: 20rpx;
+  opacity: 0.7;
 }
 
 .empty-state .text {
-  font-size: 28rpx;
-  color: #999;
+  font-size: 26rpx;
+  color: #A9A096;
 }
-
diff --git a/pages/settings/settings.wxss b/pages/settings/settings.wxss
index f433cf6..5b78e5b 100644
--- a/pages/settings/settings.wxss
+++ b/pages/settings/settings.wxss
@@ -1,20 +1,21 @@
-/* settings.wxss */
+/* settings.wxss
+ * 视觉方向：纸感编辑风（A 方案，与首页/日历一致）
+ */
 
 page {
-  background: #f1f4f9;
+  background: #FAF6ED;
 }
 
 .page {
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background: #f1f4f9;
+  background: #FAF6ED;
 }
 
 /* ───── Header ───── */
 .header {
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  padding: 48rpx 36rpx 40rpx;
+  padding: 32rpx 36rpx 24rpx;
   flex-shrink: 0;
 }
 
@@ -22,7 +23,7 @@ page {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  margin-bottom: 32rpx;
+  margin-bottom: 28rpx;
 }
 
 .header-left {
@@ -31,57 +32,54 @@ page {
 }
 
 .header-title {
-  font-size: 44rpx;
-  font-weight: 700;
-  color: #fff;
-  line-height: 1.2;
-  letter-spacing: 2rpx;
+  font-size: 52rpx;
+  font-weight: 600;
+  color: #1F1D2B;
+  line-height: 1.15;
+  letter-spacing: -0.5rpx;
 }
 
 .header-sub {
   font-size: 26rpx;
-  color: rgba(255, 255, 255, 0.7);
-  margin-top: 8rpx;
+  color: #8A8278;
+  margin-top: 10rpx;
 }
 
 .header-icon {
-  font-size: 64rpx;
-  opacity: 0.9;
+  font-size: 56rpx;
+  opacity: 0.85;
 }
 
 .stats-row {
   display: flex;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 20rpx;
-  padding: 20rpx 32rpx;
+  gap: 64rpx;
+  padding-top: 12rpx;
+  border-top: 1rpx solid #E8E2D5;
+  padding-top: 24rpx;
+  margin-top: 4rpx;
 }
 
 .stat-item {
   display: flex;
-  align-items: baseline;
-  gap: 8rpx;
-  flex: 1;
-  justify-content: center;
+  flex-direction: column;
+  gap: 4rpx;
 }
 
 .stat-num {
-  font-size: 48rpx;
-  font-weight: 700;
-  color: #fff;
+  font-size: 44rpx;
+  font-weight: 600;
+  color: #1F1D2B;
   line-height: 1;
+  letter-spacing: -1rpx;
 }
 
 .stat-label {
   font-size: 24rpx;
-  color: rgba(255, 255, 255, 0.75);
+  color: #8A8278;
 }
 
 .stat-sep {
-  width: 2rpx;
-  height: 48rpx;
-  background: rgba(255, 255, 255, 0.25);
-  flex-shrink: 0;
+  display: none;
 }
 
 /* ───── Body ───── */
@@ -92,48 +90,48 @@ page {
 
 /* ───── Section label ───── */
 .section-label {
-  font-size: 24rpx;
-  font-weight: 600;
-  color: #94a3b8;
+  font-size: 22rpx;
+  font-weight: 500;
+  color: #8A8278;
   letter-spacing: 2rpx;
-  padding: 32rpx 32rpx 12rpx;
+  padding: 28rpx 32rpx 12rpx;
   text-transform: uppercase;
 }
 
 /* ───── Card group ───── */
 .card-group {
-  background: #fff;
-  border-radius: 20rpx;
+  background: #FFFFFF;
+  border: 1rpx solid #E8E2D5;
+  border-radius: 14rpx;
   margin: 0 24rpx;
   overflow: hidden;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
 }
 
 /* ───── Row ───── */
 .row {
   display: flex;
   align-items: center;
-  padding: 28rpx 28rpx;
-  transition: background 0.15s ease;
+  padding: 24rpx 28rpx;
+  transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .row:active {
-  background: #f8fafc;
+  background: #F8F4EA;
 }
 
 .row-icon-wrap {
-  width: 72rpx;
-  height: 72rpx;
-  border-radius: 18rpx;
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 14rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  margin-right: 24rpx;
+  margin-right: 20rpx;
 }
 
 .row-icon {
-  font-size: 36rpx;
+  font-size: 32rpx;
 }
 
 .row-body {
@@ -144,77 +142,77 @@ page {
 }
 
 .row-title {
-  font-size: 30rpx;
+  font-size: 28rpx;
   font-weight: 500;
-  color: #1e293b;
+  color: #1F1D2B;
 }
 
 .row-title.danger {
-  color: #ef4444;
+  color: #C8412F;
 }
 
 .row-desc {
-  font-size: 24rpx;
-  color: #94a3b8;
+  font-size: 22rpx;
+  color: #A9A096;
 }
 
 .row-desc.danger {
-  color: #fca5a5;
+  color: #E29F92;
 }
 
 .row-arrow {
-  font-size: 40rpx;
-  color: #cbd5e1;
+  font-size: 36rpx;
+  color: #C8C2B4;
   margin-left: 12rpx;
 }
 
 .row-arrow.danger {
-  color: #fca5a5;
+  color: #E29F92;
 }
 
 .row-value {
-  font-size: 28rpx;
-  color: #64748b;
+  font-size: 26rpx;
+  color: #8A8278;
 }
 
 .row-divider {
   height: 1rpx;
-  background: #f1f5f9;
-  margin-left: 120rpx;
+  background: #E8E2D5;
+  margin-left: 112rpx;
 }
 
 /* ───── Tips card ───── */
+/* 删原 border-left 6rpx 紫色条（禁项），改全边线 + 浅暖底标识 */
 .tips-card {
-  background: #fff;
-  border-radius: 20rpx;
-  margin: 8rpx 24rpx 0;
-  padding: 28rpx 28rpx 32rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
-  border-left: 6rpx solid #6366f1;
+  background: #FFF8EE;
+  border: 1rpx solid #EFD9B5;
+  border-radius: 14rpx;
+  margin: 12rpx 24rpx 0;
+  padding: 24rpx 28rpx 28rpx;
 }
 
 .tips-title {
   display: flex;
   align-items: center;
   gap: 12rpx;
-  margin-bottom: 20rpx;
+  margin-bottom: 16rpx;
 }
 
 .tips-icon {
-  font-size: 32rpx;
+  font-size: 30rpx;
 }
 
 .tips-heading {
-  font-size: 28rpx;
+  font-size: 26rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: #1F1D2B;
 }
 
 .tips-item {
   display: flex;
   align-items: flex-start;
   gap: 12rpx;
-  margin-bottom: 12rpx;
+  margin-bottom: 10rpx;
 }
 
 .tips-item:last-child {
@@ -222,16 +220,16 @@ page {
 }
 
 .tips-dot {
-  font-size: 28rpx;
-  color: #6366f1;
+  font-size: 26rpx;
+  color: #B36A1F;
   line-height: 1.8;
   flex-shrink: 0;
 }
 
 .tips-text {
-  font-size: 26rpx;
-  color: #475569;
-  line-height: 1.8;
+  font-size: 24rpx;
+  color: #5A5247;
+  line-height: 1.7;
 }
 
 /* ───── Bottom padding ───── */
diff --git a/utils/constants.js b/utils/constants.js
index 87bbed3..094ed9a 100644
--- a/utils/constants.js
+++ b/utils/constants.js
@@ -34,9 +34,9 @@ const IMPORTANCE_TEXTS = {
 }
 
 const IMPORTANCE_COLORS = {
-  high: '#ff5722',
-  medium: '#ff9800',
-  low: '#07c160'
+  high: '#C8412F',    // 墨红（与全局强调色一致）
+  medium: '#B36A1F',  // 焦糖
+  low: '#6F8C58'      // 苔绿
 }
 
 module.exports = {