diff --git a/routers/web/devtest/mock_actions.go b/routers/web/devtest/mock_actions.go
index 0fb2a35824..517c05090f 100644
--- a/routers/web/devtest/mock_actions.go
+++ b/routers/web/devtest/mock_actions.go
@@ -36,6 +36,10 @@ func generateMockStepsLog(logCur actions.LogCursor, opts generateMockStepsLogOpt
 		"##[group]test group for: step={step}, cursor={cursor}",
 		"in group msg for: step={step}, cursor={cursor}",
 		"##[endgroup]",
+		"::error::mock error for: step={step}, cursor={cursor}",
+		"::warning::mock warning for: step={step}, cursor={cursor}",
+		"::notice::mock notice for: step={step}, cursor={cursor}",
+		"::debug::mock debug for: step={step}, cursor={cursor}",
 	)
 	// usually the cursor is the "file offset", but here we abuse it as "line number" to make the mock easier, intentionally
 	cur := logCur.Cursor
diff --git a/templates/devtest/severity-colors.tmpl b/templates/devtest/severity-colors.tmpl
index 9f86b864ea..43a5161465 100644
--- a/templates/devtest/severity-colors.tmpl
+++ b/templates/devtest/severity-colors.tmpl
@@ -20,6 +20,25 @@
 		<p>This is an info message using --color-info-* variables.</p>
 	</div>
 
+	<h2>Markdown Attention Blocks</h2>
+	<div class="markup render-content">
+		<blockquote class="attention-header attention-note"><p>{{svg "octicon-info" 16 "attention-icon attention-note"}}<strong class="attention-note">Note</strong></p>
+			<p>Useful information that users should know, even when skimming content.</p>
+		</blockquote>
+		<blockquote class="attention-header attention-tip"><p>{{svg "octicon-light-bulb" 16 "attention-icon attention-tip"}}<strong class="attention-tip">Tip</strong></p>
+			<p>Helpful advice for doing things better or more easily.</p>
+		</blockquote>
+		<blockquote class="attention-header attention-important"><p>{{svg "octicon-report" 16 "attention-icon attention-important"}}<strong class="attention-important">Important</strong></p>
+			<p>Key information users need to know to achieve their goal.</p>
+		</blockquote>
+		<blockquote class="attention-header attention-warning"><p>{{svg "octicon-alert" 16 "attention-icon attention-warning"}}<strong class="attention-warning">Warning</strong></p>
+			<p>Urgent info that needs immediate user attention to avoid problems.</p>
+		</blockquote>
+		<blockquote class="attention-header attention-caution"><p>{{svg "octicon-stop" 16 "attention-icon attention-caution"}}<strong class="attention-caution">Caution</strong></p>
+			<p>Advises about risks or negative outcomes of certain actions.</p>
+		</blockquote>
+	</div>
+
 	<h2>Form Fields</h2>
 	<div class="ui form">
 		<div class="field error">
@@ -28,6 +47,22 @@
 		</div>
 	</div>
 
+	<h2>Error Input</h2>
+	<div class="ui input error">
+		<input type="text" value="Invalid input" readonly>
+	</div>
+
+	<h2>Attached Section Boxes</h2>
+	<h3 class="ui top attached error header">Error Header</h3>
+	<div class="ui attached error segment">Error section body content.</div>
+	<h3 class="ui top attached warning header tw-mt-3">Warning Header</h3>
+	<div class="ui attached warning segment">Warning section body content.</div>
+
+<h2>Banner Preview (info-tinted)</h2>
+	<div class="web-banner-content-editor">
+		<div class="render-content render-preview">Banner preview content</div>
+	</div>
+
 	<h2>Labels</h2>
 	<div class="flex-text-block tw-gap-2">
 		<div class="ui red label">Red</div>
diff --git a/web_src/css/admin.css b/web_src/css/admin.css
index d84aa7e811..a07dcc9ed7 100644
--- a/web_src/css/admin.css
+++ b/web_src/css/admin.css
@@ -55,5 +55,5 @@
   padding: 1em 1.5em;
   border: 1px solid var(--color-info-border);
   background: var(--color-info-bg);
-  color: var(--color-info-text);
+  color: var(--color-text);
 }
diff --git a/web_src/css/base.css b/web_src/css/base.css
index c278132a00..cb88274ade 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -500,10 +500,10 @@ img.ui.avatar,
 }
 
 blockquote.attention-note {
-  border-left-color: var(--color-blue-dark-1);
+  border-left-color: var(--color-info-text);
 }
 strong.attention-note, svg.attention-note {
-  color: var(--color-blue-dark-1);
+  color: var(--color-info-text);
 }
 
 blockquote.attention-tip {
@@ -514,10 +514,10 @@ strong.attention-tip, svg.attention-tip {
 }
 
 blockquote.attention-important {
-  border-left-color: var(--color-violet-dark-1);
+  border-left-color: var(--color-priority-text);
 }
 strong.attention-important, svg.attention-important {
-  color: var(--color-violet-dark-1);
+  color: var(--color-priority-text);
 }
 
 blockquote.attention-warning {
@@ -528,10 +528,10 @@ strong.attention-warning, svg.attention-warning {
 }
 
 blockquote.attention-caution {
-  border-left-color: var(--color-red-dark-1);
+  border-left-color: var(--color-error-text);
 }
 strong.attention-caution, svg.attention-caution {
-  color: var(--color-red-dark-1);
+  color: var(--color-error-text);
 }
 
 /* FIXME: this is a longstanding dirty patch since 2015, it only makes the pages more messy and shouldn't be used */
diff --git a/web_src/css/modules/form.css b/web_src/css/modules/form.css
index 2999f64cf6..1a9e6d33e4 100644
--- a/web_src/css/modules/form.css
+++ b/web_src/css/modules/form.css
@@ -204,14 +204,14 @@ textarea:focus,
 .ui.form .field.error input {
   background-color: var(--color-error-bg);
   border-color: var(--color-error-border);
-  color: var(--color-error-text);
+  color: var(--color-input-text);
 }
 .ui.form .field.error textarea:focus,
 .ui.form .field.error select:focus,
 .ui.form .field.error input:focus {
   background-color: var(--color-error-bg);
   border-color: var(--color-error-border);
-  color: var(--color-error-text);
+  color: var(--color-input-text);
 }
 
 .ui.form .field.error select {
diff --git a/web_src/css/modules/input.css b/web_src/css/modules/input.css
index abf2d21492..467473e888 100644
--- a/web_src/css/modules/input.css
+++ b/web_src/css/modules/input.css
@@ -38,7 +38,7 @@
 .ui.input.error > input {
   background: var(--color-error-bg);
   border-color: var(--color-error-border);
-  color: var(--color-error-text);
+  color: var(--color-input-text);
 }
 
 .ui.icon.input > i.icon {
diff --git a/web_src/css/modules/message.css b/web_src/css/modules/message.css
index d7a6cb8aee..37d67d8449 100644
--- a/web_src/css/modules/message.css
+++ b/web_src/css/modules/message.css
@@ -51,7 +51,6 @@
 .ui.blue.message,
 .ui.attached.blue.message {
   background: var(--color-info-bg);
-  color: var(--color-info-text);
   border-color: var(--color-info-border);
 }
 
@@ -60,7 +59,6 @@
 .ui.positive.message,
 .ui.attached.positive.message {
   background: var(--color-success-bg);
-  color: var(--color-success-text);
   border-color: var(--color-success-border);
 }
 
@@ -71,7 +69,6 @@
 .ui.negative.message,
 .ui.attached.negative.message {
   background: var(--color-error-bg);
-  color: var(--color-error-text);
   border-color: var(--color-error-border);
 }
 
@@ -80,7 +77,6 @@
 .ui.yellow.message,
 .ui.attached.yellow.message {
   background: var(--color-warning-bg);
-  color: var(--color-warning-text);
   border-color: var(--color-warning-border);
 }
 
diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index 9b2331ef41..188a30cae0 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -163,16 +163,19 @@ gitea-theme-meta-info {
   --color-error-bg: #322226;
   --color-error-bg-active: #49262a;
   --color-error-bg-hover: #3c2427;
-  --color-error-text: var(--color-text);
+  --color-error-text: #f85149;
   --color-success-border: #225633;
   --color-success-bg: #1c3329;
-  --color-success-text: var(--color-text);
+  --color-success-text: #3fb950;
   --color-warning-border: #5f481a;
   --color-warning-bg: #342e1f;
-  --color-warning-text: var(--color-text);
+  --color-warning-text: #d29922;
   --color-info-border: #254a7e;
   --color-info-bg: #1b283a;
-  --color-info-text: var(--color-text);
+  --color-info-text: #2f81f7;
+  --color-priority-border: #4a268d;
+  --color-priority-bg: #251c39;
+  --color-priority-text: #a371f7;
   --color-red-badge: #db2828;
   --color-red-badge-bg: #db28281a;
   --color-red-badge-hover-bg: #db28284d;
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index 7e3ed763c7..fb9b8979da 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -163,16 +163,19 @@ gitea-theme-meta-info {
   --color-error-bg: #ffebe9;
   --color-error-bg-active: #ffcecb;
   --color-error-bg-hover: #ffdcd7;
-  --color-error-text: var(--color-text);
+  --color-error-text: #d1242f;
   --color-success-border: #4ac26b66;
   --color-success-bg: #dafbe1;
-  --color-success-text: var(--color-text);
+  --color-success-text: #1a7f37;
   --color-warning-border: #d4a72c66;
   --color-warning-bg: #fff8c5;
-  --color-warning-text: var(--color-text);
+  --color-warning-text: #9a6700;
   --color-info-border: #54aeff66;
   --color-info-bg: #ddf4ff;
-  --color-info-text: var(--color-text);
+  --color-info-text: #0969da;
+  --color-priority-border: #b9a1ff66;
+  --color-priority-bg: #f3e7ff;
+  --color-priority-text: #8250df;
   --color-red-badge: #db2828;
   --color-red-badge-bg: #db28281a;
   --color-red-badge-hover-bg: #db28284d;
diff --git a/web_src/js/components/ActionRunJobView.vue b/web_src/js/components/ActionRunJobView.vue
index 67d4c1048b..934ad9d706 100644
--- a/web_src/js/components/ActionRunJobView.vue
+++ b/web_src/js/components/ActionRunJobView.vue
@@ -663,6 +663,14 @@ async function hashChangeListener() {
   background: var(--color-warning-bg);
 }
 
+.job-step-logs .log-line-notice {
+  background: var(--color-info-bg);
+}
+
+.job-step-logs .log-line-debug {
+  background: var(--color-secondary-alpha-30);
+}
+
 .job-step-logs .log-cmd-error > .log-msg-label {
   color: var(--color-error-text);
 }
@@ -671,7 +679,11 @@ async function hashChangeListener() {
   color: var(--color-warning-text);
 }
 
-.job-step-logs .log-cmd-debug {
+.job-step-logs .log-cmd-notice > .log-msg-label {
+  color: var(--color-info-text);
+}
+
+.job-step-logs .log-cmd-debug > .log-msg-label {
   color: var(--color-violet);
 }
 
diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index 903c7d9a9d..7ae8fbfdaf 100644
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -230,7 +230,7 @@ function clearMergeMessage() {
   bottom: -1px;
   position: absolute;
   align-items: center;
-  color: var(--color-info-text);
+  color: var(--color-text);
   background-color: var(--color-info-bg);
   border: 1px solid var(--color-info-border);
   border-left: none;
@@ -238,7 +238,7 @@ function clearMergeMessage() {
 }
 
 .auto-merge-small:hover {
-  color: var(--color-info-text);
+  color: var(--color-text);
   background-color: var(--color-info-bg);
   border: 1px solid var(--color-info-border);
 }