diff --git a/app/themes/laszlo/assets/css/00-setting/color.css b/app/themes/laszlo/assets/css/00-setting/color.css
index 474fbfb14..c697e1510 100644
--- a/app/themes/laszlo/assets/css/00-setting/color.css
+++ b/app/themes/laszlo/assets/css/00-setting/color.css
@@ -1,105 +1,111 @@
+/**
+ * - Source color: #695F12
+ * - [ ] Color match
+ * - [x] Harmonize extended colors
+ * - [ ] Check contrast
+ */
 @layer setting {
   :root {
-    --color-primary: rgb(38 84 9);
-    --color-surface-tint: rgb(59 106 31);
+    --color-primary: rgb(105 95 18);
+    --color-surface-tint: rgb(105 95 18);
     --color-on-primary: rgb(255 255 255);
-    --color-primary-container: rgb(73 121 45);
-    --color-on-primary-container: rgb(255 255 255);
-    --color-secondary: rgb(80 100 66);
+    --color-primary-container: rgb(243 228 138);
+    --color-on-primary-container: rgb(80 71 0);
+    --color-secondary: rgb(100 95 65);
     --color-on-secondary: rgb(255 255 255);
-    --color-secondary-container: rgb(212 236 192);
-    --color-on-secondary-container: rgb(59 79 46);
-    --color-tertiary: rgb(0 82 82);
+    --color-secondary-container: rgb(235 227 189);
+    --color-on-secondary-container: rgb(76 71 43);
+    --color-tertiary: rgb(65 102 81);
     --color-on-tertiary: rgb(255 255 255);
-    --color-tertiary-container: rgb(33 121 121);
-    --color-on-tertiary-container: rgb(255 255 255);
+    --color-tertiary-container: rgb(195 236 210);
+    --color-on-tertiary-container: rgb(41 78 59);
     --color-error: rgb(186 26 26);
     --color-on-error: rgb(255 255 255);
     --color-error-container: rgb(255 218 214);
-    --color-on-error-container: rgb(65 0 2);
-    --color-background: rgb(248 250 240);
-    --color-on-background: rgb(25 29 22);
-    --color-surface: rgb(248 250 240);
-    --color-on-surface: rgb(25 29 22);
-    --color-surface-variant: rgb(222 229 211);
-    --color-on-surface-variant: rgb(66 73 60);
-    --color-outline: rgb(114 121 107);
-    --color-outline-variant: rgb(194 201 184);
+    --color-on-error-container: rgb(147 0 10);
+    --color-background: rgb(255 249 235);
+    --color-on-background: rgb(29 28 19);
+    --color-surface: rgb(255 249 235);
+    --color-on-surface: rgb(29 28 19);
+    --color-surface-variant: rgb(232 226 208);
+    --color-on-surface-variant: rgb(74 71 57);
+    --color-outline: rgb(123 119 104);
+    --color-outline-variant: rgb(204 198 181);
     --color-shadow: rgb(0 0 0);
     --color-scrim: rgb(0 0 0);
-    --color-inverse-surface: rgb(46 49 43);
-    --color-inverse-on-surface: rgb(240 242 231);
-    --color-inverse-primary: rgb(159 213 125);
-    --color-primary-fixed: rgb(186 242 150);
-    --color-on-primary-fixed: rgb(9 33 0);
-    --color-primary-fixed-dim: rgb(159 213 125);
-    --color-on-primary-fixed-variant: rgb(35 81 6);
-    --color-secondary-fixed: rgb(210 234 190);
-    --color-on-secondary-fixed: rgb(14 32 5);
-    --color-secondary-fixed-dim: rgb(182 206 163);
-    --color-on-secondary-fixed-variant: rgb(57 76 44);
-    --color-tertiary-fixed: rgb(160 240 240);
-    --color-on-tertiary-fixed: rgb(0 32 32);
-    --color-tertiary-fixed-dim: rgb(132 212 211);
-    --color-on-tertiary-fixed-variant: rgb(0 79 79);
-    --color-surface-dim: rgb(217 219 209);
-    --color-surface-bright: rgb(248 250 240);
+    --color-inverse-surface: rgb(50 48 39);
+    --color-inverse-on-surface: rgb(246 240 226);
+    --color-inverse-primary: rgb(214 200 113);
+    --color-primary-fixed: rgb(243 228 138);
+    --color-on-primary-fixed: rgb(32 28 0);
+    --color-primary-fixed-dim: rgb(214 200 113);
+    --color-on-primary-fixed-variant: rgb(80 71 0);
+    --color-secondary-fixed: rgb(235 227 189);
+    --color-on-secondary-fixed: rgb(31 28 5);
+    --color-secondary-fixed-dim: rgb(207 199 162);
+    --color-on-secondary-fixed-variant: rgb(76 71 43);
+    --color-tertiary-fixed: rgb(195 236 210);
+    --color-on-tertiary-fixed: rgb(0 33 18);
+    --color-tertiary-fixed-dim: rgb(167 208 183);
+    --color-on-tertiary-fixed-variant: rgb(41 78 59);
+    --color-surface-dim: rgb(223 218 204);
+    --color-surface-bright: rgb(255 249 235);
     --color-surface-container-lowest: rgb(255 255 255);
-    --color-surface-container-low: rgb(243 245 234);
-    --color-surface-container: rgb(237 239 228);
-    --color-surface-container-high: rgb(231 233 223);
-    --color-surface-container-highest: rgb(225 228 217);
+    --color-surface-container-low: rgb(249 243 229);
+    --color-surface-container: rgb(243 237 224);
+    --color-surface-container-high: rgb(237 232 218);
+    --color-surface-container-highest: rgb(231 226 213);
   }
 
   [data-theme="dark"] {
-    --color-primary: rgb(159 213 125);
-    --color-surface-tint: rgb(159 213 125);
-    --color-on-primary: rgb(20 56 0);
-    --color-primary-container: rgb(48 94 20);
-    --color-on-primary-container: rgb(226 255 202);
-    --color-secondary: rgb(182 206 163);
-    --color-on-secondary: rgb(35 53 23);
-    --color-secondary-container: rgb(50 69 37);
-    --color-on-secondary-container: rgb(196 220 177);
-    --color-tertiary: rgb(132 212 211);
-    --color-on-tertiary: rgb(0 55 55);
-    --color-tertiary-container: rgb(0 94 94);
-    --color-on-tertiary-container: rgb(212 255 254);
+    --color-primary: rgb(214 200 113);
+    --color-surface-tint: rgb(214 200 113);
+    --color-on-primary: rgb(55 49 0);
+    --color-primary-container: rgb(80 71 0);
+    --color-on-primary-container: rgb(243 228 138);
+    --color-secondary: rgb(207 199 162);
+    --color-on-secondary: rgb(53 49 23);
+    --color-secondary-container: rgb(76 71 43);
+    --color-on-secondary-container: rgb(235 227 189);
+    --color-tertiary: rgb(167 208 183);
+    --color-on-tertiary: rgb(17 55 37);
+    --color-tertiary-container: rgb(41 78 59);
+    --color-on-tertiary-container: rgb(195 236 210);
     --color-error: rgb(255 180 171);
     --color-on-error: rgb(105 0 5);
     --color-error-container: rgb(147 0 10);
     --color-on-error-container: rgb(255 218 214);
-    --color-background: rgb(17 20 14);
-    --color-on-background: rgb(225 228 217);
-    --color-surface: rgb(17 20 14);
-    --color-on-surface: rgb(225 228 217);
-    --color-surface-variant: rgb(66 73 60);
-    --color-on-surface-variant: rgb(194 201 184);
-    --color-outline: rgb(140 147 132);
-    --color-outline-variant: rgb(66 73 60);
+    --color-background: rgb(21 19 12);
+    --color-on-background: rgb(231 226 213);
+    --color-surface: rgb(21 19 12);
+    --color-on-surface: rgb(231 226 213);
+    --color-surface-variant: rgb(74 71 57);
+    --color-on-surface-variant: rgb(204 198 181);
+    --color-outline: rgb(149 145 129);
+    --color-outline-variant: rgb(74 71 57);
     --color-shadow: rgb(0 0 0);
     --color-scrim: rgb(0 0 0);
-    --color-inverse-surface: rgb(225 228 217);
-    --color-inverse-on-surface: rgb(46 49 43);
-    --color-inverse-primary: rgb(59 106 31);
-    --color-primary-fixed: rgb(186 242 150);
-    --color-on-primary-fixed: rgb(9 33 0);
-    --color-primary-fixed-dim: rgb(159 213 125);
-    --color-on-primary-fixed-variant: rgb(35 81 6);
-    --color-secondary-fixed: rgb(210 234 190);
-    --color-on-secondary-fixed: rgb(14 32 5);
-    --color-secondary-fixed-dim: rgb(182 206 163);
-    --color-on-secondary-fixed-variant: rgb(57 76 44);
-    --color-tertiary-fixed: rgb(160 240 240);
-    --color-on-tertiary-fixed: rgb(0 32 32);
-    --color-tertiary-fixed-dim: rgb(132 212 211);
-    --color-on-tertiary-fixed-variant: rgb(0 79 79);
-    --color-surface-dim: rgb(17 20 14);
-    --color-surface-bright: rgb(55 58 51);
-    --color-surface-container-lowest: rgb(12 15 9);
-    --color-surface-container-low: rgb(25 29 22);
-    --color-surface-container: rgb(29 33 26);
-    --color-surface-container-high: rgb(40 43 36);
-    --color-surface-container-highest: rgb(51 54 47);
+    --color-inverse-surface: rgb(231 226 213);
+    --color-inverse-on-surface: rgb(50 48 39);
+    --color-inverse-primary: rgb(105 95 18);
+    --color-primary-fixed: rgb(243 228 138);
+    --color-on-primary-fixed: rgb(32 28 0);
+    --color-primary-fixed-dim: rgb(214 200 113);
+    --color-on-primary-fixed-variant: rgb(80 71 0);
+    --color-secondary-fixed: rgb(235 227 189);
+    --color-on-secondary-fixed: rgb(31 28 5);
+    --color-secondary-fixed-dim: rgb(207 199 162);
+    --color-on-secondary-fixed-variant: rgb(76 71 43);
+    --color-tertiary-fixed: rgb(195 236 210);
+    --color-on-tertiary-fixed: rgb(0 33 18);
+    --color-tertiary-fixed-dim: rgb(167 208 183);
+    --color-on-tertiary-fixed-variant: rgb(41 78 59);
+    --color-surface-dim: rgb(21 19 12);
+    --color-surface-bright: rgb(59 57 48);
+    --color-surface-container-lowest: rgb(16 14 7);
+    --color-surface-container-low: rgb(29 28 19);
+    --color-surface-container: rgb(33 32 23);
+    --color-surface-container-high: rgb(44 42 33);
+    --color-surface-container-highest: rgb(55 53 44);
   }
 }
diff --git a/app/themes/laszlo/assets/css/01-base/focus.css b/app/themes/laszlo/assets/css/01-base/focus.css
index 33095adf0..ecddbb393 100644
--- a/app/themes/laszlo/assets/css/01-base/focus.css
+++ b/app/themes/laszlo/assets/css/01-base/focus.css
@@ -1,7 +1,7 @@
 @layer base {
   :root {
     --default-focus-outline-width: 2px;
-    --default-focus-outline-color: var(--color-primary-container);
+    --default-focus-outline-color: var(--color-primary);
     --default-focus-outline: var(--default-focus-outline-width) solid
       var(--default-focus-outline-color);
   }
diff --git a/app/themes/laszlo/assets/css/02-element/a.css b/app/themes/laszlo/assets/css/02-element/a.css
index 8cc14f451..bbf06a585 100644
--- a/app/themes/laszlo/assets/css/02-element/a.css
+++ b/app/themes/laszlo/assets/css/02-element/a.css
@@ -10,9 +10,7 @@
       2px
     );
 
-    transition:
-      color 0.15s ease-in,
-      text-underline-offset 0.15s ease-in;
+    transition: all 0.15s cubic-bezier(0.39, 0.58, 0.57, 1);
     color: var(--_link-color);
     text-underline-offset: 2px;
     text-decoration-color: inherit;
diff --git a/app/themes/laszlo/assets/css/02-element/body.css b/app/themes/laszlo/assets/css/02-element/body.css
index b7126c7a9..2ee2965d0 100644
--- a/app/themes/laszlo/assets/css/02-element/body.css
+++ b/app/themes/laszlo/assets/css/02-element/body.css
@@ -1,6 +1,6 @@
 @layer element {
   :root {
-    --page-background-color: var(--color-surface);
+    --page-background-color: var(--color-surface-container);
   }
 
   body {
diff --git a/app/themes/laszlo/assets/css/02-element/code.css b/app/themes/laszlo/assets/css/02-element/code.css
index bd95f1967..7f8709a0e 100644
--- a/app/themes/laszlo/assets/css/02-element/code.css
+++ b/app/themes/laszlo/assets/css/02-element/code.css
@@ -16,7 +16,9 @@
 
   :not(pre) > code {
     padding: var(--spacing-1);
+    vertical-align: middle;
     word-break: break-word;
+    color: var(--color-on-surface-variant);
     border-radius: var(--spacing-1);
     background: var(--color-surface-variant);
     font-size: 0.8em;
diff --git a/app/themes/laszlo/assets/css/02-element/mark.css b/app/themes/laszlo/assets/css/02-element/mark.css
index 1f873e4e4..3aea68386 100644
--- a/app/themes/laszlo/assets/css/02-element/mark.css
+++ b/app/themes/laszlo/assets/css/02-element/mark.css
@@ -1,8 +1,7 @@
 @layer element {
   mark {
-    padding: 0 var(--spacing-1);
+    padding: 0.25ch 0.5ch;
     color: var(--color-on-primary-container);
-    border-radius: var(--spacing-1);
     background-color: var(--color-primary-container);
   }
 
diff --git a/app/themes/laszlo/assets/css/03-component/form/comment-comment-node-blog-entry-form.css b/app/themes/laszlo/assets/css/03-component/form/comment-comment-node-blog-entry-form.css
index 79182a8a4..bcf569199 100644
--- a/app/themes/laszlo/assets/css/03-component/form/comment-comment-node-blog-entry-form.css
+++ b/app/themes/laszlo/assets/css/03-component/form/comment-comment-node-blog-entry-form.css
@@ -5,7 +5,7 @@
     padding: var(--spacing-6);
     border: 1px solid var(--color-surface-dim);
     border-radius: var(--spacing-4);
-    background: var(--color-surface-bright);
+    background: var(--color-surface-container);
     gap: var(--spacing-6);
   }
 
diff --git a/app/themes/laszlo/assets/css/03-component/ui/prose.css b/app/themes/laszlo/assets/css/03-component/ui/prose.css
index 722b5c4c6..1c93baa04 100644
--- a/app/themes/laszlo/assets/css/03-component/ui/prose.css
+++ b/app/themes/laszlo/assets/css/03-component/ui/prose.css
@@ -67,12 +67,12 @@
     padding: clamp(
       var(--spacing-2),
       calc(0.2727rem + 0.9697vw),
-      var(--spacing-4)
+      var(--spacing-8)
     );
-    border: 1px solid var(--color-surface-dim);
+    border: 1px solid var(--color-surface-container);
     border-radius: var(--spacing-3);
-    background: var(--color-surface-container);
-    gap: 1ch;
+    background: var(--color-surface-container-low);
+    gap: clamp(var(--spacing-2), calc(0.2727rem + 0.9697vw), var(--spacing-8));
   }
 
   .prose figure > figcaption {
@@ -83,19 +83,19 @@
 
   .prose .footnote-ref,
   .prose .footnote-backref {
-    --link-color: var(--color-on-secondary-container);
+    --link-color: var(--color-on-tertiary-fixed);
 
     padding: var(--spacing-1) var(--spacing-2);
     transition: all ease-in-out 0.1s;
     text-decoration: none;
     border-radius: var(--spacing-4);
-    background-color: var(--color-secondary-container);
+    background-color: var(--color-tertiary-fixed);
     font: var(--typography-label-small);
 
     &:hover {
-      --link-color: var(--color-on-secondary);
+      --link-color: var(--color-on-tertiary);
 
-      background-color: var(--color-secondary);
+      background-color: var(--color-tertiary);
     }
   }
 
diff --git a/app/themes/laszlo/assets/css/03-component/ui/tooltip.css b/app/themes/laszlo/assets/css/03-component/ui/tooltip.css
index 95b3fee29..907b1ffd9 100644
--- a/app/themes/laszlo/assets/css/03-component/ui/tooltip.css
+++ b/app/themes/laszlo/assets/css/03-component/ui/tooltip.css
@@ -7,7 +7,7 @@
   padding: var(--spacing-4);
   color: var(--color-on-background);
   border: 1px solid var(--color-outline-variant);
-  border-radius: var(--spacing-2);
+  border-radius: var(--spacing-1);
   background: color-mix(in sRGB, var(--color-background), transparent);
   box-shadow:
     rgb(0 0 0 / 0.1) 0 20px 25px -5px,
diff --git a/app/themes/laszlo/components/content/article-card/article-card.css b/app/themes/laszlo/components/content/article-card/article-card.css
index aed61b26b..69c935273 100644
--- a/app/themes/laszlo/components/content/article-card/article-card.css
+++ b/app/themes/laszlo/components/content/article-card/article-card.css
@@ -7,13 +7,13 @@
     display: flex;
     flex-flow: nowrap;
     flex-flow: column;
-    padding: var(--spacing-6);
-    transition:
-      background-color 0.25s linear,
-      box-shadow 0.25s linear;
+    padding: var(--spacing-4);
+    transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
     color: var(--color-on-surface);
+    border: 1px solid var(--color-surface-variant);
     border-radius: var(--spacing-4);
-    background: var(--color-surface-container);
+    outline: var(--default-focus-outline-width) solid transparent;
+    background: var(--color-surface-bright);
     gap: var(--spacing-6);
 
     &:focus-within,
@@ -21,7 +21,6 @@
     &:active {
       outline: var(--default-focus-outline);
       background-color: var(--color-surface-container-highest);
-      box-shadow: var(--elevation-2);
     }
 
     @media screen and (min-width: 1200px) {
@@ -35,7 +34,6 @@
     align-self: center;
     width: 150px;
     border-radius: var(--spacing-2);
-    box-shadow: var(--elevation-1);
 
     @media screen and (min-width: 1200px) {
       align-self: flex-start;
diff --git a/app/themes/laszlo/components/content/article/article.css b/app/themes/laszlo/components/content/article/article.css
index d8f26dd99..271012adc 100644
--- a/app/themes/laszlo/components/content/article/article.css
+++ b/app/themes/laszlo/components/content/article/article.css
@@ -3,11 +3,11 @@
     --_article-spacing: var(--spacing-8);
     --_article-header-background: var(
       --article-header-background,
-      var(--color-surface-container, transparent)
+      var(--color-surface, transparent)
     );
     --_article-main-background: var(
       --article-main-background,
-      var(--color-surface-container-low, transparent)
+      var(--color-surface, transparent)
     );
 
     display: flex;
@@ -22,6 +22,8 @@
     flex-flow: column;
     align-items: flex-start;
     padding: var(--spacing-4);
+    border: 1px solid var(--color-surface-variant);
+    border-bottom: unset;
     border-radius: var(--spacing-4) var(--spacing-4) 0 0;
     background-color: color-mix(
       in sRGB,
@@ -42,7 +44,7 @@
       width: 100%;
       height: 100%;
       content: "";
-      filter: blur(var(--spacing-16)) saturate(280%);
+      filter: blur(var(--spacing-10)) saturate(280%);
       background: var(--background-image);
       background-position: center;
       background-size: cover;
@@ -65,7 +67,6 @@
     flex-shrink: 0;
     width: 200px;
     border-radius: var(--spacing-2);
-    box-shadow: var(--elevation-2);
     margin-inline: auto;
   }
 
@@ -102,6 +103,7 @@
     align-items: flex-start;
     margin-top: calc(var(--_article-spacing) * -1);
     padding: var(--spacing-4);
+    border: 1px solid var(--color-surface-variant);
     border-radius: 0 0 var(--spacing-4) var(--spacing-4);
     background-color: var(--_article-main-background);
     gap: var(--spacing-6);
@@ -185,8 +187,9 @@
     flex-direction: column;
     align-items: center;
     padding: var(--spacing-4) var(--spacing-2);
+    border: 1px solid var(--color-surface-variant);
     border-radius: var(--spacing-4);
-    background-color: var(--_article-main-background);
+    background-color: var(--color-surface-container-low);
     gap: var(--spacing-6);
     margin-inline: calc(var(--page-side-gap) * -1);
 
diff --git a/app/themes/laszlo/components/content/comment-card/comment-card.css b/app/themes/laszlo/components/content/comment-card/comment-card.css
index 3e0501778..d8760da2f 100644
--- a/app/themes/laszlo/components/content/comment-card/comment-card.css
+++ b/app/themes/laszlo/components/content/comment-card/comment-card.css
@@ -8,10 +8,12 @@
     flex-flow: nowrap;
     min-width: 0;
     padding: var(--spacing-6);
-    transition: background-color 0.25s linear;
+    transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
     color: var(--color-on-surface);
+    border: 1px solid var(--color-surface-variant);
     border-radius: var(--spacing-4);
-    background: var(--color-surface-container);
+    outline: var(--default-focus-outline-width) solid transparent;
+    background: var(--color-surface);
     gap: var(--spacing-6);
 
     &:focus-within,
diff --git a/app/themes/laszlo/components/content/portfolio-card/portfolio-card.css b/app/themes/laszlo/components/content/portfolio-card/portfolio-card.css
index f79e6a057..cbbe39d69 100644
--- a/app/themes/laszlo/components/content/portfolio-card/portfolio-card.css
+++ b/app/themes/laszlo/components/content/portfolio-card/portfolio-card.css
@@ -7,7 +7,7 @@
     padding: var(--spacing-6);
     color: var(--color-on-surface);
     border-radius: var(--spacing-4);
-    background-color: var(--color-surface-container-high);
+    background-color: var(--color-surface-container);
     gap: var(--spacing-4);
 
     &:focus-within,
diff --git a/app/themes/laszlo/components/content/search-result/search-result.css b/app/themes/laszlo/components/content/search-result/search-result.css
index e0ea32574..598b20c17 100644
--- a/app/themes/laszlo/components/content/search-result/search-result.css
+++ b/app/themes/laszlo/components/content/search-result/search-result.css
@@ -4,8 +4,9 @@
     display: flex;
     flex-direction: column;
     padding: var(--spacing-4);
+    border: 1px solid var(--color-surface-variant);
     border-radius: var(--spacing-4);
-    background-color: var(--color-surface-container);
+    background-color: var(--color-surface);
     gap: var(--spacing-2);
 
     &:focus-within,
diff --git a/app/themes/laszlo/components/content/sitemap-section/sitemap-section.css b/app/themes/laszlo/components/content/sitemap-section/sitemap-section.css
index bb2da6377..4916cdd7d 100644
--- a/app/themes/laszlo/components/content/sitemap-section/sitemap-section.css
+++ b/app/themes/laszlo/components/content/sitemap-section/sitemap-section.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   padding: var(--spacing-6);
   border-radius: var(--spacing-4);
-  background-color: var(--color-surface-container-highest);
+  background-color: var(--color-surface);
   gap: var(--spacing-6);
 }
 
@@ -14,11 +14,13 @@
 }
 
 .sitemap-section__link {
+  --link-color: var(--color-on-surface);
+
   display: inline-block;
   padding: var(--spacing-2) var(--spacing-4);
   text-decoration: unset;
   border-radius: var(--spacing-4);
-  background-color: var(--color-surface-container-low);
+  background-color: var(--color-surface-container-high);
   font: var(--typography-body-small);
 
   &:hover {
diff --git a/app/themes/laszlo/components/content/tag-card/tag-card.css b/app/themes/laszlo/components/content/tag-card/tag-card.css
index 62ffbacde..93d6ca1e6 100644
--- a/app/themes/laszlo/components/content/tag-card/tag-card.css
+++ b/app/themes/laszlo/components/content/tag-card/tag-card.css
@@ -7,7 +7,7 @@
     transition: background-color 0.25s linear;
     color: var(--color-on-surface);
     border-radius: var(--spacing-2);
-    background: var(--color-surface-container);
+    background: var(--color-surface);
     gap: var(--spacing-2);
 
     &:focus-within,
diff --git a/app/themes/laszlo/components/layout/article-list/article-list.css b/app/themes/laszlo/components/layout/article-list/article-list.css
index f6b3d6342..ce7223f79 100644
--- a/app/themes/laszlo/components/layout/article-list/article-list.css
+++ b/app/themes/laszlo/components/layout/article-list/article-list.css
@@ -7,14 +7,14 @@
 
   .article-list--variant--card {
     --_grid-columns: 1fr;
-    --_grid-gap: var(--page-side-gap, var(--spacing-6));
+    --_grid-gap: var(--page-side-gap, var(--spacing-2));
 
     @media screen and (min-width: 640px) {
       --_grid-columns: repeat(2, 1fr);
     }
 
     @media screen and (min-width: 1200px) {
-      --_grid-gap: var(--spacing-6);
+      --_grid-gap: var(--spacing-4);
     }
   }
 
diff --git a/app/themes/laszlo/components/layout/author-page/author-page.css b/app/themes/laszlo/components/layout/author-page/author-page.css
index 559b1a296..46797d98d 100644
--- a/app/themes/laszlo/components/layout/author-page/author-page.css
+++ b/app/themes/laszlo/components/layout/author-page/author-page.css
@@ -15,12 +15,13 @@
     display: flex;
     flex-direction: column;
     order: 2;
+    border: 1px solid var(--color-surface-variant);
     border-radius: var(--spacing-4);
     gap: var(--author-page-content-gap);
 
     @media screen and (min-width: 640px) {
       padding: var(--spacing-16) var(--spacing-12);
-      background-color: var(--color-surface-container-low);
+      background-color: var(--color-surface);
     }
 
     @media screen and (min-width: 1200px) {
diff --git a/app/themes/laszlo/components/layout/page-footer/page-footer.css b/app/themes/laszlo/components/layout/page-footer/page-footer.css
index 63480532c..c00d18669 100644
--- a/app/themes/laszlo/components/layout/page-footer/page-footer.css
+++ b/app/themes/laszlo/components/layout/page-footer/page-footer.css
@@ -30,6 +30,10 @@
     display: flex;
     flex-direction: column;
     gap: var(--spacing-6);
-    align-items: flex-start;
+    align-items: center;
+
+    @media screen and (min-width: 1200px) {
+      align-items: flex-end;
+    }
   }
 }
diff --git a/app/themes/laszlo/components/ui/attachment-file/attachment-file.css b/app/themes/laszlo/components/ui/attachment-file/attachment-file.css
index 123c90dfe..7b9ad97b6 100644
--- a/app/themes/laszlo/components/ui/attachment-file/attachment-file.css
+++ b/app/themes/laszlo/components/ui/attachment-file/attachment-file.css
@@ -4,16 +4,17 @@
     flex-direction: column;
     padding: var(--spacing-4);
     text-decoration: none;
-    border: 1px solid var(--color-outline-variant);
+    color: var(--color-on-surface);
+    border: 1px solid var(--color-surface-container-highest);
     border-radius: var(--spacing-2);
-    background-color: var(--color-surface-container-lowest);
+    background-color: var(--color-surface-container-low);
     gap: var(--spacing-2);
 
     &:hover,
     &:focus,
     &:active {
       border-color: var(--color-primary);
-      background-color: var(--color-surface-container-low);
+      background-color: var(--color-surface-container);
     }
   }
 
diff --git a/app/themes/laszlo/components/ui/branding/branding.css b/app/themes/laszlo/components/ui/branding/branding.css
index 673f46ddc..dc16e596e 100644
--- a/app/themes/laszlo/components/ui/branding/branding.css
+++ b/app/themes/laszlo/components/ui/branding/branding.css
@@ -1,9 +1,23 @@
 @layer component.ui {
   .branding {
-    --logo-fill-1: var(--color-surface-container-high);
-    --logo-fill-2: var(--color-surface-container-highest);
-    --logo-fill-3: var(--color-surface-container-low);
-    --logo-fill-4: var(--color-surface-tint);
+    --logo-color-primary: var(--color-primary);
+    --logo-color-secondary: white;
+    --logo-fill-1: color-mix(
+      in sRGB,
+      var(--logo-color-primary),
+      var(--logo-color-secondary) 70%
+    );
+    --logo-fill-2: color-mix(
+      in sRGB,
+      var(--logo-color-primary),
+      var(--logo-color-secondary) 80%
+    );
+    --logo-fill-3: color-mix(
+      in sRGB,
+      var(--logo-color-primary),
+      var(--logo-color-secondary) 90%
+    );
+    --logo-fill-4: var(--logo-color-primary);
 
     display: flex;
     flex-shrink: 0;
@@ -12,6 +26,12 @@
     gap: var(--spacing-5);
   }
 
+  [data-theme="dark"] {
+    .branding {
+      --logo-color-secondary: black;
+    }
+  }
+
   .branding svg {
     width: 64px;
   }
@@ -26,7 +46,7 @@
   }
 
   .branding__name {
-    color: var(--color-secondary);
+    color: var(--color-primary);
     font: var(--typography-headline-medium);
   }
 
diff --git a/app/themes/laszlo/components/ui/button/button.css b/app/themes/laszlo/components/ui/button/button.css
index a08a4f266..feab5d923 100644
--- a/app/themes/laszlo/components/ui/button/button.css
+++ b/app/themes/laszlo/components/ui/button/button.css
@@ -21,10 +21,7 @@
     height: var(--_button-height);
     margin: 0;
     cursor: pointer;
-    transition:
-      color 250ms cubic-bezier(0.39, 0.58, 0.57, 1),
-      border-color 250ms cubic-bezier(0.39, 0.58, 0.57, 1),
-      background-color 250ms cubic-bezier(0.39, 0.58, 0.57, 1);
+    transition: all 250ms cubic-bezier(0.39, 0.58, 0.57, 1);
     text-decoration: none;
     color: var(--_button-color);
     border: 2px solid var(--_button-border-color);
@@ -46,16 +43,16 @@
   /* Variants and colors. */
   .button--variant--text.button--color--primary {
     --button-background-color: transparent;
-    --button-background-color-hover: var(--color-surface-container);
+    --button-background-color-hover: var(--color-primary);
     --button-color: var(--color-primary);
-    --button-color-hover: var(--button-color);
+    --button-color-hover: var(--color-on-primary);
   }
 
   .button--variant--text.button--color--secondary {
     --button-background-color: transparent;
-    --button-background-color-hover: var(--color-surface-container);
+    --button-background-color-hover: var(--color-secondary);
     --button-color: var(--color-secondary);
-    --button-color-hover: var(--button-color);
+    --button-color-hover: var(--color-on-secondary);
   }
 
   .button--variant--text.button--color--danger {
@@ -66,22 +63,34 @@
   }
 
   .button--variant--contained.button--color--primary {
-    --button-background-color: var(--color-primary-container);
-    --button-background-color-hover: var(--color-primary);
-    --button-color: var(--color-on-primary-container);
+    --button-background-color: var(--color-primary);
+    --button-background-color-hover: color-mix(
+      in sRGB,
+      var(--button-background-color),
+      black 30%
+    );
+    --button-color: var(--color-on-primary);
     --button-color-hover: var(--color-on-primary);
   }
 
   .button--variant--contained.button--color--secondary {
-    --button-background-color: var(--color-secondary-container);
-    --button-background-color-hover: var(--color-secondary);
-    --button-color: var(--color-on-secondary-container);
+    --button-background-color: var(--color-secondary);
+    --button-background-color-hover: color-mix(
+      in sRGB,
+      var(--button-background-color),
+      black 30%
+    );
+    --button-color: var(--color-on-secondary);
     --button-color-hover: var(--color-on-secondary);
   }
 
   .button--variant--contained.button--color--danger {
     --button-background-color: var(--color-error);
-    --button-background-color-hover: var(--button-background-color);
+    --button-background-color-hover: color-mix(
+      in sRGB,
+      var(--button-background-color),
+      black 30%
+    );
     --button-color: var(--color-on-error);
     --button-color-hover: var(--color-error-container);
   }
diff --git a/app/themes/laszlo/components/ui/code-block/code-block.css b/app/themes/laszlo/components/ui/code-block/code-block.css
index 632d2b95f..5f788f7bf 100644
--- a/app/themes/laszlo/components/ui/code-block/code-block.css
+++ b/app/themes/laszlo/components/ui/code-block/code-block.css
@@ -10,9 +10,9 @@
   .code-block__main {
     position: relative;
     padding: var(--spacing-5);
-    border: 1px solid var(--color-surface-dim);
+    border: 1px solid var(--color-surface-container);
     border-radius: var(--spacing-2);
-    background-color: var(--color-surface);
+    background-color: var(--color-surface-container-lowest);
   }
 
   .code-block__title {
diff --git a/app/themes/laszlo/components/ui/color-scheme/color-scheme.css b/app/themes/laszlo/components/ui/color-scheme/color-scheme.css
index 77794d184..00b5bb3e4 100644
--- a/app/themes/laszlo/components/ui/color-scheme/color-scheme.css
+++ b/app/themes/laszlo/components/ui/color-scheme/color-scheme.css
@@ -17,12 +17,13 @@
     justify-content: center;
     padding: var(--spacing-2);
     cursor: pointer;
+    border: 4px solid var(--color-surface-variant);
     border-radius: var(--spacing-10);
     background-color: var(--color-surface-container-lowest);
   }
 
   .color-scheme input:checked + .color-scheme__option {
-    color: var(--color-on-primary-container);
-    background-color: var(--color-primary-container);
+    color: var(--color-on-primary);
+    background-color: var(--color-primary);
   }
 }
diff --git a/app/themes/laszlo/components/ui/dialog/dialog.css b/app/themes/laszlo/components/ui/dialog/dialog.css
index 9670ed47d..77c327d6c 100644
--- a/app/themes/laszlo/components/ui/dialog/dialog.css
+++ b/app/themes/laszlo/components/ui/dialog/dialog.css
@@ -24,6 +24,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
+    color: var(--color-on-surface);
     border-radius: var(--dialog-radius, 8px);
     background-color: var(--color-surface);
     box-shadow: var(--elevation-5);
@@ -61,6 +62,7 @@
     padding: var(--spacing-2);
     cursor: pointer;
     transition: background-color 200ms ease-in;
+    color: var(--color-on-surface);
     border: 0;
     border-radius: 50%;
     background-color: var(--color-surface-container-high);
diff --git a/app/themes/laszlo/components/ui/fab/fab.css b/app/themes/laszlo/components/ui/fab/fab.css
index c91c98453..025edc9da 100644
--- a/app/themes/laszlo/components/ui/fab/fab.css
+++ b/app/themes/laszlo/components/ui/fab/fab.css
@@ -1,15 +1,12 @@
 @layer component.ui {
   .fab {
-    --_background-color: var(
-      --fab-background-color,
-      var(--color-surface-variant)
-    );
+    --_background-color: var(--fab-background-color, var(--color-tertiary));
     --_background-color-hover: var(
       --fab-background-color-hover,
-      var(--color-surface-dim)
+      var(--color-tertiary)
     );
-    --_color: var(--fab-color, var(--color-on-surface-variant));
-    --_color-hover: var(--fab-color-hover, var(--color-on-surface-variant));
+    --_color: var(--fab-color, var(--color-on-tertiary));
+    --_color-hover: var(--fab-color-hover, var(--color-on-tertiary));
     --icon-wrapper-width: 32px;
     --_border-radius: var(--fab-border-radius, var(--spacing-4));
 
@@ -29,7 +26,7 @@
     border: none;
     border-radius: var(--_border-radius);
     background-color: var(--_background-color);
-    box-shadow: var(--elevation-2);
+    box-shadow: var(--elevation-1);
 
     &:focus,
     &:active,
diff --git a/app/themes/laszlo/components/ui/main-navigation/main-navigation.css b/app/themes/laszlo/components/ui/main-navigation/main-navigation.css
index bb98b52ef..bba02d61d 100644
--- a/app/themes/laszlo/components/ui/main-navigation/main-navigation.css
+++ b/app/themes/laszlo/components/ui/main-navigation/main-navigation.css
@@ -28,8 +28,8 @@
   .main-navigation__extra-button {
     position: relative;
     z-index: 70;
-    color: var(--color-on-surface);
-    background: color-mix(in sRGB, var(--color-surface-tint), transparent 50%);
+    color: var(--color-on-tertiary);
+    background: color-mix(in sRGB, var(--color-tertiary), transparent 50%);
     box-shadow:
       rgb(17 17 26 / 0.1) 0 8px 24px,
       rgb(17 17 26 / 0.1) 0 16px 56px,
diff --git a/app/themes/laszlo/components/ui/pager/pager.twig b/app/themes/laszlo/components/ui/pager/pager.twig
index b3ed2ba91..3aedbd857 100644
--- a/app/themes/laszlo/components/ui/pager/pager.twig
+++ b/app/themes/laszlo/components/ui/pager/pager.twig
@@ -34,6 +34,7 @@
           }),
           component: 'a',
           href: items.previous.href,
+          color: 'primary',
           variant: 'text',
         } only %}
           {% block start_icon %}
@@ -59,8 +60,8 @@
           }),
           component: 'a',
           href: item.href,
-          variant: 'contained',
-          color: current_page == key ? 'primary' : 'secondary',
+          variant: current_page == key ? 'contained' : 'text',
+          color: 'primary',
           value: key,
         } only %}
           {% block children %}{{ value }}{% endblock %}
@@ -79,7 +80,7 @@
           }),
           component: 'a',
           href: items.next.href,
-          variant: 'contained',
+          color: 'primary',
           variant: 'text',
         } only %}
           {% block end_icon %}
@@ -118,7 +119,7 @@
           'x-bind': 'loadMoreButton',
           'x-ref': 'loadMoreButton',
         }),
-        color: 'secondary',
+        color: 'primary',
         variant: 'contained',
       } only %}
         {% block children %}
diff --git a/app/themes/laszlo/components/ui/previous-next-link/previous-next-link.css b/app/themes/laszlo/components/ui/previous-next-link/previous-next-link.css
index 3fffc1328..1ee6b36c9 100644
--- a/app/themes/laszlo/components/ui/previous-next-link/previous-next-link.css
+++ b/app/themes/laszlo/components/ui/previous-next-link/previous-next-link.css
@@ -7,7 +7,7 @@
     padding: var(--spacing-6);
     text-decoration: none;
     border-radius: var(--spacing-4);
-    background: var(--color-surface-container-low);
+    background: var(--color-surface-variant);
     gap: var(--spacing-4);
 
     &:hover,
diff --git a/app/themes/laszlo/components/ui/search-bar/search-bar.css b/app/themes/laszlo/components/ui/search-bar/search-bar.css
index e8ebb6717..39a9f1f23 100644
--- a/app/themes/laszlo/components/ui/search-bar/search-bar.css
+++ b/app/themes/laszlo/components/ui/search-bar/search-bar.css
@@ -7,7 +7,7 @@
     --input-border-radius: var(--border-radius) 0 0 var(--border-radius);
     --input-height: var(--_height);
     --input-font: var(--typography-body-large);
-    --input-background-color: transparent;
+    --input-background-color: var(--color-surface-container-lowest);
     --input-padding-inline: var(--spacing-6);
     --button-height: var(--_height);
     --button-color: var(--color-on-surface);
diff --git a/app/themes/laszlo/components/ui/text-input/text-input.css b/app/themes/laszlo/components/ui/text-input/text-input.css
index 8383af2e1..90777247b 100644
--- a/app/themes/laszlo/components/ui/text-input/text-input.css
+++ b/app/themes/laszlo/components/ui/text-input/text-input.css
@@ -12,7 +12,7 @@
     --_input-border-width: var(--input-border-width, 1px);
     --_input-background-color: var(
       --input-background-color,
-      var(--color-surface-container-lowest)
+      var(--color-surface-bright)
     );
     --_input-color: var(--input-color, var(--color-on-surface));
     --_input-placeholder-color: var(
@@ -35,9 +35,11 @@
     height: var(--_input-height);
     margin: 0;
     cursor: text;
+    transition: all 0.15s cubic-bezier(0.39, 0.58, 0.57, 1);
     color: var(--_input-color);
     border: var(--_input-border-width) solid var(--_input-border-color);
     border-radius: var(--_input-border-radius);
+    outline: var(--default-focus-outline-width) solid transparent;
     background-color: var(--_input-background-color);
     box-shadow: var(--_input-box-shadow);
     font: var(--_input-font);
diff --git a/app/themes/laszlo/components/ui/textarea/textarea.css b/app/themes/laszlo/components/ui/textarea/textarea.css
index 9cc687a6d..c3625f649 100644
--- a/app/themes/laszlo/components/ui/textarea/textarea.css
+++ b/app/themes/laszlo/components/ui/textarea/textarea.css
@@ -12,7 +12,7 @@
     --_textarea-border-width: var(--textarea-border-width, 1px);
     --_textarea-background-color: var(
       --textarea-background-color,
-      var(--color-surface-container-lowest)
+      var(--color-surface-bright)
     );
     --_textarea-color: var(--textarea-color, var(--color-on-surface));
     --_textarea-placeholder-color: var(
@@ -40,9 +40,11 @@
     padding-top: var(--_textarea-padding-inline);
     padding-bottom: var(--_textarea-padding-inline);
     cursor: text;
+    transition: all 0.15s cubic-bezier(0.39, 0.58, 0.57, 1);
     color: var(--_textarea-color);
     border: var(--_textarea-border-width) solid var(--_textarea-border-color);
     border-radius: var(--_textarea-border-radius);
+    outline: var(--default-focus-outline-width) solid transparent;
     background-color: var(--_textarea-background-color);
     box-shadow: var(--_textarea-box-shadow);
     font: var(--_textarea-font);
diff --git a/app/themes/laszlo/templates/content/comment/links--comment.html.twig b/app/themes/laszlo/templates/content/comment/links--comment.html.twig
index aeced3efe..b58592319 100644
--- a/app/themes/laszlo/templates/content/comment/links--comment.html.twig
+++ b/app/themes/laszlo/templates/content/comment/links--comment.html.twig
@@ -18,7 +18,7 @@
     attributes: create_attribute({
       'class': ['comment-action'],
     }),
-    variant: 'text',
+    variant: 'contained',
     color,
     href,
     label,
diff --git a/config/.prettierrc.json b/config/.prettierrc.json
index cccbb6fcb..c0ac8da59 100644
--- a/config/.prettierrc.json
+++ b/config/.prettierrc.json
@@ -1,5 +1,5 @@
 {
-  "printWidth": 80,
+  "printWidth": 120,
   "semi": true,
   "singleQuote": true,
   "trailingComma": "all",