diff --git a/src/components/ArticleCard.vue b/src/components/ArticleCard.vue
index a590d81..b6a1990 100644
--- a/src/components/ArticleCard.vue
+++ b/src/components/ArticleCard.vue
@@ -39,37 +39,37 @@ function coverSrc(): string | undefined {
 <style scoped>
 .article-card {
   display: block;
-  background: #fff;
-  border: 1px solid #e5e5ea;
-  border-radius: 8px;
+  background: var(--ac-bg-card);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--song-radius-l);
   padding: 16px;
   margin-bottom: 16px;
   text-decoration: none;
   color: inherit;
-  transition: box-shadow 0.2s ease;
+  transition: box-shadow var(--song-dur-1) var(--song-ease);
 }
 
 .article-card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--ac-shadow-2);
 }
 
 .article-cover {
   width: 100%;
   max-height: 220px;
   object-fit: cover;
-  border-radius: 6px;
+  border-radius: var(--song-radius-m);
   margin-bottom: 12px;
 }
 
 .article-title {
   margin: 0 0 8px;
   font-size: 18px;
-  color: #1f2430;
+  color: var(--ac-text);
 }
 
 .article-summary {
   margin: 0 0 12px;
-  color: #5c6470;
+  color: var(--ac-text-secondary);
   font-size: 14px;
 }
 
@@ -77,11 +77,11 @@ function coverSrc(): string | undefined {
   display: flex;
   gap: 16px;
   font-size: 13px;
-  color: #8a93a3;
+  color: var(--ac-text-disabled);
 }
 
 .meta-author {
-  color: #3b82f6;
+  color: var(--ac-primary);
 }
 
 .article-tags {
@@ -92,9 +92,9 @@ function coverSrc(): string | undefined {
   display: inline-block;
   margin-right: 8px;
   padding: 2px 10px;
-  background: #eef3ff;
-  color: #3b5bdb;
-  border-radius: 12px;
+  background: var(--ac-primary-bg);
+  color: var(--ac-primary-strong);
+  border-radius: var(--song-radius-m);
   font-size: 12px;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/CommentSection.vue b/src/components/CommentSection.vue
index da8dfc7..1a260dc 100644
--- a/src/components/CommentSection.vue
+++ b/src/components/CommentSection.vue
@@ -123,7 +123,7 @@ onMounted(load)
 
 .comment-item {
   padding: 12px 0;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--ac-border);
 }
 
 .comment-item:last-child {
@@ -143,20 +143,20 @@ onMounted(load)
 }
 
 .comment-time {
-  color: #8a93a3;
+  color: var(--ac-text-disabled);
   font-size: 12px;
 }
 
 .comment-content {
   margin: 0;
   font-size: 14px;
-  color: #333;
+  color: var(--ac-text);
 }
 
 .comment-form {
-  background: #fff;
-  border: 1px solid #e5e5ea;
-  border-radius: 8px;
+  background: var(--ac-bg-card);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--song-radius-l);
   padding: 16px;
 }
 
@@ -169,16 +169,25 @@ onMounted(load)
   display: block;
   margin: 10px 0 4px;
   font-size: 13px;
-  color: #5c6470;
+  color: var(--ac-text-secondary);
 }
 
 .form-input,
 .form-textarea {
   width: 100%;
   padding: 8px 10px;
-  border: 1px solid #d3d8e0;
-  border-radius: 6px;
+  border: 1px solid var(--ac-input-border);
+  border-radius: var(--song-radius-l);
   font-size: 14px;
+  background: var(--ac-bg-card);
+  color: var(--ac-text);
+  transition: border-color var(--song-dur-1) var(--song-ease);
+}
+
+.form-input:focus,
+.form-textarea:focus {
+  border-color: var(--ac-primary);
+  outline: none;
 }
 
 .form-textarea {
@@ -190,11 +199,12 @@ onMounted(load)
   margin-top: 12px;
   padding: 8px 18px;
   border: none;
-  border-radius: 6px;
-  background: #3b82f6;
-  color: #fff;
+  border-radius: var(--song-radius-l);
+  background: var(--ac-primary-strong);
+  color: var(--ac-primary-text);
   font-size: 14px;
   cursor: pointer;
+  transition: opacity var(--song-dur-1) var(--song-ease);
 }
 
 .submit-btn:disabled {
@@ -202,16 +212,16 @@ onMounted(load)
 }
 
 .error-text {
-  color: #d33c3c;
+  color: var(--ac-danger);
   font-size: 13px;
 }
 
 .success-text {
-  color: #1e7e34;
+  color: var(--ac-success);
   font-size: 13px;
 }
 
 .hint-text {
-  color: #8a93a3;
+  color: var(--ac-text-disabled);
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
index 5c1dad8..dc63ebd 100644
--- a/src/components/Pagination.vue
+++ b/src/components/Pagination.vue
@@ -33,20 +33,27 @@ function go(p: number) {
 
 .page-btn {
   padding: 6px 14px;
-  border: 1px solid #d3d8e0;
-  border-radius: 6px;
-  background: #fff;
+  border: 1px solid var(--ac-input-border);
+  border-radius: var(--song-radius-l);
+  background: var(--ac-bg-card);
   cursor: pointer;
   font-size: 14px;
+  color: var(--ac-text);
+  transition: border-color var(--song-dur-1) var(--song-ease), color var(--song-dur-1) var(--song-ease);
+}
+
+.page-btn:hover:not(:disabled) {
+  color: var(--ac-primary);
+  border-color: var(--ac-primary);
 }
 
 .page-btn:disabled {
-  color: #b8bfc9;
+  color: var(--ac-text-disabled);
   cursor: not-allowed;
 }
 
 .page-info {
-  color: #5c6470;
+  color: var(--ac-text-secondary);
   font-size: 14px;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/TagCloud.vue b/src/components/TagCloud.vue
index 8e3697c..e8a3526 100644
--- a/src/components/TagCloud.vue
+++ b/src/components/TagCloud.vue
@@ -58,9 +58,9 @@ onMounted(load)
 
 <style scoped>
 .tag-cloud {
-  background: #fff;
-  border: 1px solid #e5e5ea;
-  border-radius: 8px;
+  background: var(--ac-bg-card);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--song-radius-l);
   padding: 16px;
 }
 
@@ -77,16 +77,17 @@ onMounted(load)
 
 .tag-item {
   border: none;
-  background: #eef3ff;
-  color: #3b5bdb;
-  border-radius: 12px;
+  background: var(--ac-primary-bg);
+  color: var(--ac-primary-strong);
+  border-radius: var(--song-radius-m);
   cursor: pointer;
   font-size: 13px;
   padding: 4px 12px;
+  transition: background var(--song-dur-1) var(--song-ease);
 }
 
 .tag-item:hover {
-  background: #dbe4ff;
+  background: var(--ac-active);
 }
 
 .tag-lg {
@@ -104,10 +105,10 @@ onMounted(load)
 }
 
 .error-text {
-  color: #d33c3c;
+  color: var(--ac-danger);
 }
 
 .hint-text {
-  color: #8a93a3;
+  color: var(--ac-text-disabled);
 }
 </style>
\ No newline at end of file
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 39c2eb6..77ac959 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -59,30 +59,40 @@ async function onSubmit() {
 .login-form {
   width: 100%;
   max-width: 360px;
-  background: #fff;
-  border: 1px solid #e5e5ea;
-  border-radius: 8px;
+  background: var(--ac-bg-card);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--song-radius-l);
   padding: 28px;
 }
 
 .login-title {
+  font-family: var(--song-font-display);
   text-align: center;
+  font-weight: 400;
   margin: 0 0 20px;
 }
 
-.field-label {
+.form-label {
   display: block;
   margin: 14px 0 6px;
   font-size: 14px;
-  color: #5c6470;
+  color: var(--ac-text-secondary);
 }
 
 .form-input {
   width: 100%;
   padding: 10px 12px;
-  border: 1px solid #d3d8e0;
-  border-radius: 6px;
+  border: 1px solid var(--ac-input-border);
+  border-radius: var(--song-radius-l);
   font-size: 14px;
+  background: var(--ac-bg-card);
+  color: var(--ac-text);
+  transition: border-color var(--song-dur-1) var(--song-ease);
+}
+
+.form-input:focus {
+  border-color: var(--ac-primary);
+  outline: none;
 }
 
 .login-btn {
@@ -90,11 +100,16 @@ async function onSubmit() {
   margin-top: 20px;
   padding: 11px;
   border: none;
-  border-radius: 6px;
-  background: #3b82f6;
-  color: #fff;
+  border-radius: var(--song-radius-l);
+  background: var(--ac-primary-strong);
+  color: var(--ac-primary-text);
   font-size: 15px;
   cursor: pointer;
+  transition: opacity var(--song-dur-1) var(--song-ease);
+}
+
+.login-btn:hover:not(:disabled) {
+  opacity: 0.9;
 }
 
 .login-btn:disabled {
@@ -105,11 +120,11 @@ async function onSubmit() {
   text-align: center;
   margin-top: 16px;
   font-size: 13px;
-  color: #8a93a3;
+  color: var(--ac-text-disabled);
 }
 
 .error-text {
-  color: #d33c3c;
+  color: var(--ac-danger);
   font-size: 13px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue
index ab9d365..bc90e70 100644
--- a/src/views/RegisterView.vue
+++ b/src/views/RegisterView.vue
@@ -84,14 +84,16 @@ async function onSubmit() {
 .register-form {
   width: 100%;
   max-width: 360px;
-  background: #fff;
-  border: 1px solid #e5e5ea;
-  border-radius: 8px;
+  background: var(--ac-bg-card);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--song-radius-l);
   padding: 28px;
 }
 
 .register-title {
+  font-family: var(--song-font-display);
   text-align: center;
+  font-weight: 400;
   margin: 0 0 20px;
 }
 
@@ -99,15 +101,23 @@ async function onSubmit() {
   display: block;
   margin: 14px 0 6px;
   font-size: 14px;
-  color: #5c6470;
+  color: var(--ac-text-secondary);
 }
 
 .form-input {
   width: 100%;
   padding: 10px 12px;
-  border: 1px solid #d3d8e0;
-  border-radius: 6px;
+  border: 1px solid var(--ac-input-border);
+  border-radius: var(--song-radius-l);
   font-size: 14px;
+  background: var(--ac-bg-card);
+  color: var(--ac-text);
+  transition: border-color var(--song-dur-1) var(--song-ease);
+}
+
+.form-input:focus {
+  border-color: var(--ac-primary);
+  outline: none;
 }
 
 .register-btn {
@@ -115,11 +125,16 @@ async function onSubmit() {
   margin-top: 20px;
   padding: 11px;
   border: none;
-  border-radius: 6px;
-  background: #3b82f6;
-  color: #fff;
+  border-radius: var(--song-radius-l);
+  background: var(--ac-primary-strong);
+  color: var(--ac-primary-text);
   font-size: 15px;
   cursor: pointer;
+  transition: opacity var(--song-dur-1) var(--song-ease);
+}
+
+.register-btn:hover:not(:disabled) {
+  opacity: 0.9;
 }
 
 .register-btn:disabled {
@@ -130,11 +145,11 @@ async function onSubmit() {
   text-align: center;
   margin-top: 16px;
   font-size: 13px;
-  color: #8a93a3;
+  color: var(--ac-text-disabled);
 }
 
 .error-text {
-  color: #d33c3c;
+  color: var(--ac-danger);
   font-size: 13px;
 }
 </style>
\ No newline at end of file