diff --git a/App.vue b/App.vue
index 9a6b6d1..7f421b2 100644
--- a/App.vue
+++ b/App.vue
@@ -48,8 +48,8 @@ export default {
 
 <style>
 page {
-	background-color: #0D1F17;
-	color: #FFFFFF;
+	background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 45%, #FFFFFF 100%);
+	color: #111827;
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 	font-size: 28rpx;
 	line-height: 1.5;
@@ -62,26 +62,28 @@ page {
 }
 
 .card {
-	background-color: #1A3325;
+	background-color: #FFFFFF;
 	border-radius: 24rpx;
 	padding: 32rpx;
 	margin-bottom: 24rpx;
+	border: 2rpx solid #ECFDF3;
+	box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.08);
 }
 
 .card-light {
-	background-color: #243D2E;
+	background-color: #F0FDF4;
 }
 
 .text-primary {
-	color: #4ADE80;
+	color: #10B981;
 }
 
 .text-secondary {
-	color: #9CA3AF;
+	color: #6B7280;
 }
 
 .text-muted {
-	color: #6B7280;
+	color: #9CA3AF;
 }
 
 .text-center {
@@ -164,20 +166,20 @@ page {
 }
 
 .btn-primary {
-	background-color: #4ADE80;
-	color: #0D1F17;
+	background-color: #10B981;
+	color: #FFFFFF;
 }
 
 .btn-secondary {
-	background-color: #1A3325;
-	color: #FFFFFF;
-	border: 2rpx solid #374151;
+	background-color: #FFFFFF;
+	color: #111827;
+	border: 2rpx solid #E5E7EB;
 }
 
 .btn-outline {
 	background-color: transparent;
-	color: #4ADE80;
-	border: 2rpx solid #4ADE80;
+	color: #10B981;
+	border: 2rpx solid #10B981;
 }
 
 .safe-area-bottom {
diff --git a/pages.json b/pages.json
index 042e77a..db66f87 100644
--- a/pages.json
+++ b/pages.json
@@ -46,8 +46,8 @@
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "戒烟助手",
-		"navigationBarBackgroundColor": "#FFFFFF",
-		"backgroundColor": "#F9FAFB",
+		"navigationBarBackgroundColor": "#F0FDF4",
+		"backgroundColor": "#F0FDF4",
 		"backgroundColorTop": "#D1FAE5",
 		"backgroundColorBottom": "#FFFFFF"
 	},
@@ -55,7 +55,7 @@
 		"color": "#9CA3AF",
 		"selectedColor": "#10B981",
 		"backgroundColor": "#FFFFFF",
-		"borderStyle": "white",
+		"borderStyle": "black",
 		"list": [
 			{
 				"pagePath": "pages/index/index",
diff --git a/pages/onboarding/index.vue b/pages/onboarding/index.vue
index 4028c00..2f4f0f4 100644
--- a/pages/onboarding/index.vue
+++ b/pages/onboarding/index.vue
@@ -199,19 +199,19 @@ onMounted(async () => {
 <style scoped>
 .page {
 	min-height: 100vh;
-	background-color: #0D1F17;
+	background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 45%, #FFFFFF 100%);
 	display: flex;
 	flex-direction: column;
 }
 
 .progress-bar {
 	height: 8rpx;
-	background-color: #1A3325;
+	background-color: #E5E7EB;
 }
 
 .progress-fill {
 	height: 100%;
-	background-color: #4ADE80;
+	background: linear-gradient(90deg, #10B981, #34D399);
 	transition: width 0.3s ease;
 }
 
@@ -238,7 +238,7 @@ onMounted(async () => {
 .step-title {
 	font-size: 44rpx;
 	font-weight: 700;
-	color: #FFFFFF;
+	color: #111827;
 	display: block;
 	margin-bottom: 16rpx;
 	line-height: 1.3;
@@ -246,7 +246,7 @@ onMounted(async () => {
 
 .step-desc {
 	font-size: 28rpx;
-	color: #9CA3AF;
+	color: #6B7280;
 	display: block;
 	margin-bottom: 64rpx;
 }
@@ -268,25 +268,27 @@ onMounted(async () => {
 	width: 96rpx;
 	height: 96rpx;
 	border-radius: 50%;
-	background-color: #1A3325;
+	background-color: #FFFFFF;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: 48rpx;
-	color: #4ADE80;
+	color: #10B981;
+	border: 2rpx solid #ECFDF3;
+	box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.12);
 }
 
 .input-value {
 	font-size: 96rpx;
 	font-weight: 700;
-	color: #FFFFFF;
+	color: #111827;
 	min-width: 160rpx;
 	text-align: center;
 }
 
 .input-unit {
 	font-size: 28rpx;
-	color: #9CA3AF;
+	color: #6B7280;
 }
 
 .options {
@@ -302,11 +304,12 @@ onMounted(async () => {
 
 .option {
 	padding: 28rpx 36rpx;
-	background-color: #1A3325;
+	background-color: #FFFFFF;
 	border-radius: 16rpx;
 	font-size: 30rpx;
-	color: #FFFFFF;
-	border: 2rpx solid transparent;
+	color: #111827;
+	border: 2rpx solid #ECFDF3;
+	box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.06);
 }
 
 .option-tag {
@@ -315,9 +318,9 @@ onMounted(async () => {
 }
 
 .option-active {
-	background-color: rgba(74, 222, 128, 0.15);
-	border-color: #4ADE80;
-	color: #4ADE80;
+	background-color: #ECFDF5;
+	border-color: #10B981;
+	color: #059669;
 }
 
 .time-row {
@@ -329,27 +332,31 @@ onMounted(async () => {
 
 .time-label {
 	font-size: 26rpx;
-	color: #9CA3AF;
+	color: #6B7280;
 	display: block;
 	margin-bottom: 12rpx;
 }
 
 .time-picker {
-	background-color: #1A3325;
+	background-color: #FFFFFF;
 	padding: 32rpx;
 	border-radius: 16rpx;
 	font-size: 40rpx;
-	color: #FFFFFF;
+	color: #111827;
 	text-align: center;
+	border: 2rpx solid #ECFDF3;
+	box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.06);
 }
 
 .price-input {
 	display: flex;
 	align-items: center;
-	background-color: #1A3325;
+	background-color: #FFFFFF;
 	padding: 24rpx 32rpx;
 	border-radius: 16rpx;
 	gap: 8rpx;
+	border: 2rpx solid #ECFDF3;
+	box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.06);
 }
 
 .price-prefix {
@@ -360,7 +367,7 @@ onMounted(async () => {
 .price-field {
 	font-size: 64rpx;
 	font-weight: 700;
-	color: #FFFFFF;
+	color: #111827;
 	width: 200rpx;
 	text-align: center;
 }
@@ -370,20 +377,21 @@ onMounted(async () => {
 	gap: 24rpx;
 	padding: 32rpx 48rpx;
 	padding-bottom: 64rpx;
-	background-color: #0D1F17;
+	background-color: #FFFFFF;
 }
 
 .btn-primary {
 	flex: 1;
 	height: 96rpx;
-	background-color: #4ADE80;
+	background-color: #10B981;
 	border-radius: 48rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: 32rpx;
 	font-weight: 500;
-	color: #0D1F17;
+	color: #FFFFFF;
+	box-shadow: 0 12rpx 28rpx rgba(16, 185, 129, 0.25);
 }
 
 .btn-full { flex: 1; }
@@ -391,13 +399,13 @@ onMounted(async () => {
 .btn-secondary {
 	height: 96rpx;
 	padding: 0 48rpx;
-	background-color: #1A3325;
+	background-color: #FFFFFF;
 	border-radius: 48rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: 32rpx;
-	color: #FFFFFF;
-	border: 2rpx solid #374151;
+	color: #111827;
+	border: 2rpx solid #E5E7EB;
 }
 </style>
diff --git a/pages/profile/index.vue b/pages/profile/index.vue
index 9ddcb17..4506874 100644
--- a/pages/profile/index.vue
+++ b/pages/profile/index.vue
@@ -122,7 +122,7 @@ onMounted(async () => {
 <style scoped>
 .page {
 	min-height: 100vh;
-	background-color: #0D1F17;
+	background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 45%, #FFFFFF 100%);
 	padding: 32rpx;
 	padding-bottom: 120rpx;
 	box-sizing: border-box;
@@ -144,8 +144,8 @@ onMounted(async () => {
 	width: 160rpx;
 	height: 160rpx;
 	border-radius: 50%;
-	border: 6rpx solid #4ADE80;
-	background-color: #1A3325;
+	border: 6rpx solid #10B981;
+	background-color: #F3F4F6;
 }
 
 .avatar-edit {
@@ -154,7 +154,7 @@ onMounted(async () => {
 	bottom: 0;
 	width: 48rpx;
 	height: 48rpx;
-	background-color: #4ADE80;
+	background-color: #10B981;
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
@@ -165,7 +165,7 @@ onMounted(async () => {
 .user-name {
 	font-size: 40rpx;
 	font-weight: 700;
-	color: #FFFFFF;
+	color: #111827;
 	margin-bottom: 16rpx;
 }
 
@@ -185,7 +185,7 @@ onMounted(async () => {
 
 .streak-text {
 	font-size: 26rpx;
-	color: #9CA3AF;
+	color: #6B7280;
 }
 
 .section { margin-bottom: 32rpx; }
@@ -207,9 +207,11 @@ onMounted(async () => {
 	display: flex;
 	align-items: center;
 	gap: 24rpx;
-	background-color: #1A3325;
+	background-color: #FFFFFF;
 	border-radius: 24rpx;
 	padding: 24rpx;
+	border: 2rpx solid #ECFDF3;
+	box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.08);
 }
 
 .menu-icon {
@@ -222,11 +224,11 @@ onMounted(async () => {
 	font-size: 32rpx;
 }
 
-.menu-icon-green { background-color: rgba(74, 222, 128, 0.2); }
-.menu-icon-blue { background-color: rgba(96, 165, 250, 0.2); }
-.menu-icon-orange { background-color: rgba(251, 146, 60, 0.2); }
-.menu-icon-yellow { background-color: rgba(251, 191, 36, 0.2); }
-.menu-icon-gray { background-color: rgba(107, 114, 128, 0.2); }
+.menu-icon-green { background-color: #DCFCE7; }
+.menu-icon-blue { background-color: #DBEAFE; }
+.menu-icon-orange { background-color: #FFEDD5; }
+.menu-icon-yellow { background-color: #FEF3C7; }
+.menu-icon-gray { background-color: #F3F4F6; }
 
 .menu-content {
 	flex: 1;
@@ -237,7 +239,7 @@ onMounted(async () => {
 
 .menu-label {
 	font-size: 30rpx;
-	color: #FFFFFF;
+	color: #111827;
 }
 
 .menu-desc {
@@ -247,8 +249,8 @@ onMounted(async () => {
 
 .pro-badge {
 	display: inline-block;
-	background-color: #4ADE80;
-	color: #0D1F17;
+	background-color: #10B981;
+	color: #FFFFFF;
 	font-size: 20rpx;
 	padding: 4rpx 12rpx;
 	border-radius: 8rpx;
@@ -259,13 +261,16 @@ onMounted(async () => {
 
 .menu-arrow {
 	font-size: 36rpx;
-	color: #6B7280;
+	color: #9CA3AF;
 }
 
 .logout-btn {
 	text-align: center;
 	padding: 24rpx;
 	margin-top: 32rpx;
+	background-color: #FFFFFF;
+	border-radius: 24rpx;
+	border: 2rpx solid #FEE2E2;
 }
 
 .logout-text {
@@ -277,7 +282,7 @@ onMounted(async () => {
 	display: block;
 	text-align: center;
 	font-size: 24rpx;
-	color: #6B7280;
+	color: #9CA3AF;
 	margin-top: 24rpx;
 }
 </style>