diff --git a/public/favicon-dark.svg b/public/favicon-dark.svg
new file mode 100644
index 000000000..6e7345e2f
--- /dev/null
+++ b/public/favicon-dark.svg
@@ -0,0 +1,3 @@
+<svg width="175" height="175" viewBox="0 0 175 175" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M87.5 0C135.581 1.92722e-05 154 29.9055 154 87.5C154 145.095 135.581 175 87.5 175C39.4188 175 21 145.126 21 87.5C21 29.9055 39.4188 0 87.5 0ZM109.49 127.489C103.247 127.489 99.8309 129.207 97.0977 130.58C94.7371 131.766 92.8733 132.703 88.7734 132.703C84.6735 132.703 82.8098 131.766 80.4492 130.58C77.716 129.207 74.2994 127.489 68.0566 127.489C61.8135 127.489 58.3964 129.207 55.6631 130.58C53.3025 131.766 51.4388 132.703 47.3389 132.703V141.818C53.582 141.818 56.9991 140.101 59.7324 138.728C62.0928 137.541 63.9569 136.604 68.0566 136.604C72.156 136.605 74.0196 137.541 76.3799 138.728C79.1132 140.101 82.5303 141.818 88.7734 141.818C95.0163 141.818 98.4328 140.101 101.166 138.728C103.527 137.541 105.39 136.605 109.49 136.604C113.59 136.604 115.454 137.541 117.814 138.728C120.548 140.101 123.965 141.818 130.208 141.818V132.703C126.108 132.703 124.244 131.766 121.884 130.58C119.15 129.207 115.733 127.489 109.49 127.489ZM112.473 36.0869C117.194 31.8102 112.473 24.0689 106.571 26.4102C103.31 27.7212 100.235 29.5937 97.502 32.0908C93.2156 35.9929 90.3264 40.8944 88.7734 46.2324C87.2204 40.8944 84.3322 35.9929 80.0459 32.0908C77.3128 29.6249 74.2377 27.7212 70.9766 26.4102C65.0752 24.069 60.3535 31.8102 65.0742 36.0869L82.375 51.7891C76.7221 47.9495 69.9198 45.6709 62.5586 45.6709C58.552 45.6709 54.7005 46.3256 51.0977 47.5742C45.0411 49.6345 46.718 58.7496 53.085 58.75H77.2188C71.9077 59.7802 66.8451 62.1527 62.6211 65.9609C59.8878 68.427 57.7138 71.2993 56.0986 74.4521C53.179 80.1023 60.3531 85.596 65.0742 81.3506L84.5498 63.7139L83.0898 112.256C83.0897 112.849 82.7482 113.411 82.3135 113.879C81.6923 113.598 81.1015 113.317 80.4492 112.974C77.716 111.6 74.2995 109.883 68.0566 109.883C61.8135 109.883 58.3964 111.6 55.6631 112.974C53.3027 114.16 51.4386 115.097 47.3389 115.097V124.212C53.582 124.212 56.9991 122.495 59.7324 121.121C62.093 119.935 63.9567 118.998 68.0566 118.998C72.1565 118.998 74.0203 119.935 76.3809 121.121C79.1141 122.495 82.5306 124.212 88.7734 124.212C95.0165 124.212 98.4337 122.495 101.167 121.121C103.527 119.935 105.391 118.998 109.491 118.998C113.591 118.998 115.454 119.935 117.814 121.121C120.548 122.495 123.965 124.212 130.208 124.212V115.097C126.108 115.097 124.244 114.16 121.884 112.974V112.942C119.151 111.569 115.734 109.852 109.491 109.852C103.248 109.852 99.831 111.569 97.0977 112.942C96.3833 113.286 95.7311 113.629 95.0479 113.91C94.5199 113.442 94.2089 112.849 94.1777 112.225L92.7188 63.4326L112.473 81.3506C117.194 85.6272 124.369 80.1335 121.449 74.4521C119.834 71.3305 117.66 68.427 114.927 65.9609C110.703 62.1213 105.67 59.7802 100.328 58.75H124.462C130.86 58.7499 132.506 49.6657 126.449 47.5742C122.846 46.3569 118.995 45.6709 114.988 45.6709C107.658 45.6709 100.856 47.9494 95.1719 51.7891L112.473 36.0869Z" fill="white"/>
+</svg>
diff --git a/public/favicon-light.svg b/public/favicon-light.svg
new file mode 100644
index 000000000..bbbd2dbb6
--- /dev/null
+++ b/public/favicon-light.svg
@@ -0,0 +1,3 @@
+<svg width="175" height="175" viewBox="0 0 175 175" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M87.5 0C135.581 1.92722e-05 154 29.9055 154 87.5C154 145.095 135.581 175 87.5 175C39.4188 175 21 145.126 21 87.5C21 29.9055 39.4188 0 87.5 0ZM109.49 127.489C103.247 127.489 99.8309 129.207 97.0977 130.58C94.7371 131.766 92.8733 132.703 88.7734 132.703C84.6735 132.703 82.8098 131.766 80.4492 130.58C77.716 129.207 74.2994 127.489 68.0566 127.489C61.8135 127.489 58.3964 129.207 55.6631 130.58C53.3025 131.766 51.4388 132.703 47.3389 132.703V141.818C53.582 141.818 56.9991 140.101 59.7324 138.728C62.0928 137.541 63.9569 136.604 68.0566 136.604C72.156 136.605 74.0196 137.541 76.3799 138.728C79.1132 140.101 82.5303 141.818 88.7734 141.818C95.0163 141.818 98.4328 140.101 101.166 138.728C103.527 137.541 105.39 136.605 109.49 136.604C113.59 136.604 115.454 137.541 117.814 138.728C120.548 140.101 123.965 141.818 130.208 141.818V132.703C126.108 132.703 124.244 131.766 121.884 130.58C119.15 129.207 115.733 127.489 109.49 127.489ZM112.473 36.0869C117.194 31.8102 112.473 24.0689 106.571 26.4102C103.31 27.7212 100.235 29.5937 97.502 32.0908C93.2156 35.9929 90.3264 40.8944 88.7734 46.2324C87.2204 40.8944 84.3322 35.9929 80.0459 32.0908C77.3128 29.6249 74.2377 27.7212 70.9766 26.4102C65.0752 24.069 60.3535 31.8102 65.0742 36.0869L82.375 51.7891C76.7221 47.9495 69.9198 45.6709 62.5586 45.6709C58.552 45.6709 54.7005 46.3256 51.0977 47.5742C45.0411 49.6345 46.718 58.7496 53.085 58.75H77.2188C71.9077 59.7802 66.8451 62.1527 62.6211 65.9609C59.8878 68.427 57.7138 71.2993 56.0986 74.4521C53.179 80.1023 60.3531 85.596 65.0742 81.3506L84.5498 63.7139L83.0898 112.256C83.0897 112.849 82.7482 113.411 82.3135 113.879C81.6923 113.598 81.1015 113.317 80.4492 112.974C77.716 111.6 74.2995 109.883 68.0566 109.883C61.8135 109.883 58.3964 111.6 55.6631 112.974C53.3027 114.16 51.4386 115.097 47.3389 115.097V124.212C53.582 124.212 56.9991 122.495 59.7324 121.121C62.093 119.935 63.9567 118.998 68.0566 118.998C72.1565 118.998 74.0203 119.935 76.3809 121.121C79.1141 122.495 82.5306 124.212 88.7734 124.212C95.0165 124.212 98.4337 122.495 101.167 121.121C103.527 119.935 105.391 118.998 109.491 118.998C113.591 118.998 115.454 119.935 117.814 121.121C120.548 122.495 123.965 124.212 130.208 124.212V115.097C126.108 115.097 124.244 114.16 121.884 112.974V112.942C119.151 111.569 115.734 109.852 109.491 109.852C103.248 109.852 99.831 111.569 97.0977 112.942C96.3833 113.286 95.7311 113.629 95.0479 113.91C94.5199 113.442 94.2089 112.849 94.1777 112.225L92.7188 63.4326L112.473 81.3506C117.194 85.6272 124.369 80.1335 121.449 74.4521C119.834 71.3305 117.66 68.427 114.927 65.9609C110.703 62.1213 105.67 59.7802 100.328 58.75H124.462C130.86 58.7499 132.506 49.6657 126.449 47.5742C122.846 46.3569 118.995 45.6709 114.988 45.6709C107.658 45.6709 100.856 47.9494 95.1719 51.7891L112.473 36.0869Z" fill="#111111"/>
+</svg>
diff --git a/public/images/brand/social/mark-dark.svg b/public/images/brand/social/mark-dark.svg
new file mode 100644
index 000000000..55ec02155
--- /dev/null
+++ b/public/images/brand/social/mark-dark.svg
@@ -0,0 +1,4 @@
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="400" height="400" fill="#111111"/>
+<path d="M200 86C262.903 86 287 124.963 287 200C287 275.038 262.903 314 200 314C137.097 314 113 275.078 113 200C113 124.963 137.097 86 200 86ZM228.77 252.101C220.602 252.101 216.132 254.337 212.556 256.127C209.468 257.672 207.03 258.893 201.666 258.893C196.302 258.893 193.864 257.672 190.775 256.127C187.2 254.337 182.73 252.101 174.562 252.101C166.395 252.101 161.925 254.337 158.349 256.127C155.26 257.672 152.823 258.893 147.459 258.893V270.769C155.626 270.768 160.096 268.532 163.672 266.742C166.76 265.197 169.199 263.977 174.562 263.977C179.926 263.977 182.364 265.197 185.452 266.742C189.028 268.532 193.498 270.769 201.666 270.769C209.833 270.769 214.303 268.532 217.879 266.742C220.967 265.197 223.406 263.977 228.77 263.977C234.133 263.977 236.572 265.197 239.66 266.742C243.236 268.532 247.706 270.769 255.873 270.769V258.893C250.509 258.893 248.072 257.672 244.983 256.127C241.408 254.337 236.937 252.101 228.77 252.101ZM232.671 133.017C238.847 127.445 232.671 117.358 224.95 120.408C220.684 122.116 216.661 124.557 213.085 127.811C207.477 132.894 203.698 139.28 201.666 146.234C199.634 139.28 195.856 132.894 190.248 127.811C186.672 124.598 182.649 122.116 178.382 120.408C170.661 117.358 164.485 127.445 170.661 133.017L193.295 153.474C185.899 148.471 177.001 145.502 167.37 145.502C162.128 145.502 157.09 146.357 152.376 147.983C144.452 150.668 146.646 162.543 154.977 162.543H186.55C179.601 163.885 172.978 166.977 167.451 171.938C163.875 175.151 161.031 178.893 158.918 183.001C155.099 190.362 164.485 197.52 170.661 191.989L196.14 169.01L194.23 232.253C194.23 233.026 193.783 233.758 193.214 234.368C192.401 234.002 191.63 233.636 190.776 233.188C187.2 231.399 182.73 229.162 174.562 229.162C166.395 229.162 161.925 231.399 158.35 233.188C155.261 234.734 152.823 235.954 147.459 235.954V247.83C155.626 247.83 160.096 245.593 163.672 243.804C166.76 242.258 169.199 241.038 174.562 241.038C179.926 241.038 182.365 242.258 185.453 243.804C189.029 245.593 193.499 247.83 201.666 247.83C209.834 247.83 214.304 245.593 217.88 243.804C220.968 242.258 223.406 241.038 228.77 241.038C234.133 241.038 236.572 242.258 239.66 243.804C243.236 245.593 247.706 247.83 255.874 247.83V235.954C250.51 235.954 248.072 234.734 244.983 233.188V233.147C241.408 231.358 236.937 229.121 228.77 229.121C220.602 229.121 216.132 231.358 212.557 233.147C211.622 233.595 210.769 234.042 209.875 234.408C209.184 233.798 208.777 233.025 208.736 232.212L206.827 168.644L232.671 191.989C238.847 197.561 248.233 190.403 244.414 183.001C242.301 178.934 239.457 175.151 235.881 171.938C230.354 166.936 223.771 163.885 216.782 162.543H248.356C256.727 162.543 258.88 150.709 250.957 147.983C246.243 146.397 241.204 145.502 235.962 145.502C226.372 145.502 217.473 148.471 210.037 153.474L232.671 133.017Z" fill="#EEEBD4"/>
+</svg>
diff --git a/public/images/brand/social/mark-dark@2x.png b/public/images/brand/social/mark-dark@2x.png
new file mode 100644
index 000000000..391551981
Binary files /dev/null and b/public/images/brand/social/mark-dark@2x.png differ
diff --git a/public/images/brand/social/mark-light.svg b/public/images/brand/social/mark-light.svg
new file mode 100644
index 000000000..2989eba8c
--- /dev/null
+++ b/public/images/brand/social/mark-light.svg
@@ -0,0 +1,4 @@
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="400" height="400" fill="#EEEBD4"/>
+<path d="M200 86C262.903 86 287 124.963 287 200C287 275.038 262.903 314 200 314C137.097 314 113 275.078 113 200C113 124.963 137.097 86 200 86ZM228.77 252.101C220.602 252.101 216.132 254.337 212.556 256.127C209.468 257.672 207.03 258.893 201.666 258.893C196.302 258.893 193.864 257.672 190.775 256.127C187.2 254.337 182.73 252.101 174.562 252.101C166.395 252.101 161.925 254.337 158.349 256.127C155.26 257.672 152.823 258.893 147.459 258.893V270.769C155.626 270.768 160.096 268.532 163.672 266.742C166.76 265.197 169.199 263.977 174.562 263.977C179.926 263.977 182.364 265.197 185.452 266.742C189.028 268.532 193.498 270.769 201.666 270.769C209.833 270.769 214.303 268.532 217.879 266.742C220.967 265.197 223.406 263.977 228.77 263.977C234.133 263.977 236.572 265.197 239.66 266.742C243.236 268.532 247.706 270.769 255.873 270.769V258.893C250.509 258.893 248.072 257.672 244.983 256.127C241.408 254.337 236.937 252.101 228.77 252.101ZM232.671 133.017C238.847 127.445 232.671 117.358 224.95 120.408C220.684 122.116 216.661 124.557 213.085 127.811C207.477 132.894 203.698 139.28 201.666 146.234C199.634 139.28 195.856 132.894 190.248 127.811C186.672 124.598 182.649 122.116 178.382 120.408C170.661 117.358 164.485 127.445 170.661 133.017L193.295 153.474C185.899 148.471 177.001 145.502 167.37 145.502C162.128 145.502 157.09 146.357 152.376 147.983C144.452 150.668 146.646 162.543 154.977 162.543H186.55C179.601 163.885 172.978 166.977 167.451 171.938C163.875 175.151 161.031 178.893 158.918 183.001C155.099 190.362 164.485 197.52 170.661 191.989L196.14 169.01L194.23 232.253C194.23 233.026 193.783 233.758 193.214 234.368C192.401 234.002 191.63 233.636 190.776 233.188C187.2 231.399 182.73 229.162 174.562 229.162C166.395 229.162 161.925 231.399 158.35 233.188C155.261 234.734 152.823 235.954 147.459 235.954V247.83C155.626 247.83 160.096 245.593 163.672 243.804C166.76 242.258 169.199 241.038 174.562 241.038C179.926 241.038 182.365 242.258 185.453 243.804C189.029 245.593 193.499 247.83 201.666 247.83C209.834 247.83 214.304 245.593 217.88 243.804C220.968 242.258 223.406 241.038 228.77 241.038C234.133 241.038 236.572 242.258 239.66 243.804C243.236 245.593 247.706 247.83 255.874 247.83V235.954C250.51 235.954 248.072 234.734 244.983 233.188V233.147C241.408 231.358 236.937 229.121 228.77 229.121C220.602 229.121 216.132 231.358 212.557 233.147C211.622 233.595 210.769 234.042 209.875 234.408C209.184 233.798 208.777 233.025 208.736 232.212L206.827 168.644L232.671 191.989C238.847 197.561 248.233 190.403 244.414 183.001C242.301 178.934 239.457 175.151 235.881 171.938C230.354 166.936 223.771 163.885 216.782 162.543H248.356C256.727 162.543 258.88 150.709 250.957 147.983C246.243 146.397 241.204 145.502 235.962 145.502C226.372 145.502 217.473 148.471 210.037 153.474L232.671 133.017Z" fill="#111111"/>
+</svg>
diff --git a/public/images/brand/social/mark-light@2x.png b/public/images/brand/social/mark-light@2x.png
new file mode 100644
index 000000000..201031872
Binary files /dev/null and b/public/images/brand/social/mark-light@2x.png differ
diff --git a/public/images/brand/social/stacked-dark.svg b/public/images/brand/social/stacked-dark.svg
new file mode 100644
index 000000000..75d34cd4f
--- /dev/null
+++ b/public/images/brand/social/stacked-dark.svg
@@ -0,0 +1,19 @@
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="400" height="400" fill="#111111"/>
+<g clip-path="url(#clip0_837_2295)">
+<path d="M270.801 196.765H256.532C255.765 196.765 255.059 196.282 254.776 195.576L251.85 188.099C251.103 186.165 248.237 186.709 248.217 188.764C248.196 190.82 248.196 192.795 248.196 194.891C248.196 195.919 247.349 196.765 246.319 196.765H234.311C233.261 196.765 232.434 195.939 232.434 194.891V156.942C232.434 155.914 233.261 155.068 234.311 155.068H248.56C249.347 155.048 250.033 155.532 250.316 156.257L253.303 164.056C254.05 165.991 256.915 165.487 256.936 163.411L257.016 156.922C257.016 155.894 257.864 155.068 258.893 155.068H270.821C271.851 155.068 272.698 155.914 272.698 156.962V194.911C272.698 195.959 271.851 196.785 270.821 196.785L270.801 196.765Z" fill="#EEEBD4"/>
+<path d="M332.682 223.307L343.237 241.384C343.964 242.634 343.076 244.206 341.623 244.206L329.331 244.266C328.645 244.266 328.02 243.904 327.676 243.319L323.014 235.097C322.328 233.867 320.451 234.351 320.431 235.762L320.31 242.392C320.31 243.42 319.462 244.246 318.433 244.246H306.424C305.374 244.246 304.547 243.42 304.547 242.372V204.423C304.547 203.395 305.374 202.549 306.424 202.549H318.453C319.482 202.549 320.31 203.355 320.33 204.363L320.451 209.22C320.491 210.671 322.449 211.094 323.075 209.784L326.042 203.637C326.365 202.992 327.01 202.569 327.737 202.569H340.21C341.663 202.549 342.571 204.101 341.845 205.35L332.702 221.433C332.379 222.017 332.379 222.722 332.702 223.307H332.682Z" fill="#EEEBD4"/>
+<path d="M209.506 190.034L205.086 189.994C204.158 189.994 203.371 190.659 203.209 191.566L202.604 195.194C202.462 196.101 201.675 196.766 200.747 196.766H188.052C186.821 196.766 185.933 195.637 186.215 194.448L195.822 156.479C196.024 155.653 196.791 155.068 197.659 155.068H216.873C217.741 155.089 218.488 155.673 218.689 156.519L228.317 194.448C228.619 195.637 227.731 196.786 226.5 196.786L213.805 196.826C212.877 196.826 212.09 196.161 211.948 195.254L211.343 191.647C211.202 190.74 210.414 190.075 209.506 190.075V190.034ZM209.143 178.688L208.174 173.912C207.972 172.904 206.519 172.904 206.317 173.912L205.449 178.708C205.227 179.877 206.156 180.965 207.347 180.925C208.517 180.885 209.365 179.817 209.143 178.668V178.688Z" fill="#EEEBD4"/>
+<path d="M248.419 237.515L243.999 237.475C243.07 237.475 242.283 238.14 242.122 239.047L241.516 242.675C241.375 243.581 240.588 244.247 239.659 244.247H226.944C225.713 244.247 224.825 243.118 225.108 241.929L234.715 203.98C234.916 203.154 235.683 202.569 236.531 202.569H255.765C256.633 202.549 257.38 203.134 257.602 203.96L267.229 241.909C267.532 243.098 266.644 244.247 265.413 244.247H252.718C251.789 244.287 251.002 243.622 250.861 242.715L250.255 239.107C250.114 238.201 249.327 237.535 248.419 237.535V237.515ZM248.035 226.169L247.188 221.977C246.966 220.848 245.331 220.848 245.109 221.997L244.342 226.209C244.12 227.378 245.048 228.466 246.239 228.426C247.41 228.386 248.257 227.318 248.035 226.169Z" fill="#EEEBD4"/>
+<path d="M192.25 232.921C191.119 246.283 171.865 247.008 158.807 242.272C158.04 241.99 157.535 241.245 157.535 240.438V229.515C157.535 228.024 159.109 227.077 160.421 227.802C164.64 230.1 168.898 231.732 173.722 232.7C173.722 232.7 175.316 232.82 175.902 231.793C176.487 230.765 175.377 230.362 174.892 229.959C165.709 225.988 155.033 223.651 155.981 213.312C157.091 201.361 175.276 199.91 187.648 203.739C188.455 203.981 189 204.767 189 205.613V216.315C189 217.726 187.547 218.673 186.235 218.108C180.322 215.509 172.289 213.211 172.693 214.743C173.722 218.612 193.4 219.036 192.23 232.881L192.25 232.921Z" fill="#EEEBD4"/>
+<path d="M286.161 228.386C289.37 231.046 293.326 231.167 296.737 229.454C298.351 228.648 300.248 229.736 300.248 231.53L300.309 241.082C300.309 242.07 299.724 242.997 298.775 243.319C289.511 246.584 278.653 244.73 272.113 236.689C265.574 228.648 265.897 217.402 272.376 209.744C278.855 202.086 289.612 200.312 298.755 203.416C299.703 203.738 300.309 204.665 300.309 205.673L300.248 215.226C300.248 217.019 298.351 218.107 296.737 217.321C293.366 215.649 289.531 215.649 286.282 218.228C283.436 220.486 283.133 225.867 286.161 228.386Z" fill="#EEEBD4"/>
+<path d="M176.85 196.745L164.821 196.786C163.772 196.786 162.924 195.939 162.924 194.911V170.082C162.924 169.055 162.097 168.208 161.047 168.208H154.871C153.842 168.208 152.994 167.342 152.994 166.314V156.963C152.994 155.935 153.842 155.088 154.891 155.088H186.76C187.789 155.088 188.637 155.935 188.637 156.963V166.314C188.637 167.342 187.81 168.188 186.76 168.188H180.584C179.555 168.188 178.707 169.035 178.707 170.082V194.891C178.707 195.919 177.86 196.766 176.83 196.766L176.85 196.745Z" fill="#EEEBD4"/>
+<path d="M216.651 244.206L204.622 244.246C203.572 244.246 202.725 243.4 202.725 242.372V217.543C202.725 216.515 201.897 215.669 200.848 215.669H194.672C193.642 215.669 192.795 214.802 192.795 213.774V204.423C192.795 203.395 193.642 202.549 194.692 202.549H226.561C227.59 202.549 228.438 203.395 228.438 204.423V213.774C228.438 214.802 227.61 215.649 226.561 215.649H220.385C219.355 215.649 218.508 216.495 218.508 217.543V242.352C218.508 243.38 217.68 244.226 216.631 244.226L216.651 244.206Z" fill="#EEEBD4"/>
+<path d="M99.7119 143.5C130.955 143.5 142.923 162.807 142.923 199.99C142.923 237.173 130.955 256.479 99.7119 256.479C68.469 256.479 56.5001 237.193 56.5 199.99C56.5 162.807 68.4689 143.5 99.7119 143.5ZM114.001 225.807C109.944 225.807 107.724 226.916 105.948 227.803C104.414 228.569 103.203 229.173 100.539 229.173C97.875 229.173 96.6637 228.569 95.1299 227.803C93.3538 226.916 91.1338 225.807 87.0771 225.807C83.0205 225.807 80.8005 226.916 79.0244 227.803C77.4906 228.569 76.2792 229.173 73.6152 229.173V235.058C77.6718 235.058 79.8919 233.949 81.668 233.062C83.2019 232.297 84.413 231.691 87.0771 231.691C89.7412 231.691 90.9525 232.297 92.4863 233.062C94.2624 233.949 96.4826 235.058 100.539 235.058C104.596 235.058 106.816 233.949 108.592 233.062C110.126 232.297 111.337 231.691 114.001 231.691C116.665 231.691 117.876 232.297 119.41 233.062C121.186 233.949 123.406 235.058 127.463 235.058V229.173C124.799 229.173 123.588 228.569 122.054 227.803C120.278 226.916 118.058 225.807 114.001 225.807ZM115.938 166.798C119.006 164.037 115.938 159.038 112.104 160.55C109.985 161.396 107.987 162.606 106.211 164.218C103.426 166.737 101.548 169.901 100.539 173.348C99.5299 169.901 97.6533 166.737 94.8682 164.218C93.0921 162.626 91.0938 161.396 88.9746 160.55C85.1399 159.038 82.0719 164.037 85.1396 166.798L96.3818 176.935C92.7086 174.456 88.2882 172.984 83.5049 172.984C80.9014 172.984 78.3987 173.408 76.0576 174.214C72.1221 175.544 73.2115 181.428 77.3486 181.429H93.0312C89.58 182.094 86.2898 183.625 83.5449 186.084C81.7688 187.676 80.3561 189.531 79.3066 191.566C77.4098 195.214 82.0719 198.761 85.1396 196.021L97.7939 184.634L96.8457 215.972C96.8457 216.355 96.6233 216.717 96.3408 217.02C95.9373 216.838 95.5536 216.657 95.1299 216.436C93.3538 215.549 91.1338 214.44 87.0771 214.44C83.0205 214.44 80.8005 215.549 79.0244 216.436C77.4905 217.201 76.2793 217.806 73.6152 217.806V223.69C77.6719 223.69 79.8919 222.582 81.668 221.695C83.2019 220.929 84.413 220.325 87.0771 220.325C89.7413 220.325 90.9524 220.929 92.4863 221.695C94.2624 222.582 96.4824 223.69 100.539 223.69C104.596 223.69 106.816 222.582 108.592 221.695C110.126 220.929 111.337 220.325 114.001 220.325C116.665 220.325 117.876 220.929 119.41 221.695C121.186 222.582 123.406 223.69 127.463 223.69V217.806C124.799 217.806 123.588 217.201 122.054 216.436V216.415C120.278 215.528 118.057 214.42 114.001 214.42C109.944 214.42 107.724 215.528 105.948 216.415C105.484 216.637 105.06 216.859 104.616 217.04C104.273 216.738 104.071 216.355 104.051 215.952L103.103 184.452L115.938 196.021C119.006 198.781 123.668 195.234 121.771 191.566C120.722 189.551 119.309 187.676 117.533 186.084C114.788 183.605 111.518 182.094 108.047 181.429H123.729C127.887 181.428 128.956 175.564 125.021 174.214C122.679 173.428 120.177 172.984 117.573 172.984C112.81 172.984 108.39 174.456 104.696 176.935L115.938 166.798Z" fill="#EEEBD4"/>
+</g>
+<defs>
+<clipPath id="clip0_837_2295">
+<rect width="287" height="113" fill="white" transform="translate(56.5 143.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/brand/social/stacked-dark@2x.png b/public/images/brand/social/stacked-dark@2x.png
new file mode 100644
index 000000000..04a8e21d1
Binary files /dev/null and b/public/images/brand/social/stacked-dark@2x.png differ
diff --git a/public/images/brand/social/stacked-light.svg b/public/images/brand/social/stacked-light.svg
new file mode 100644
index 000000000..6bbcb7698
--- /dev/null
+++ b/public/images/brand/social/stacked-light.svg
@@ -0,0 +1,19 @@
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="400" height="400" fill="#EEEBD4"/>
+<g clip-path="url(#clip0_837_2293)">
+<path d="M270.555 196.765H256.335C255.571 196.765 254.867 196.282 254.585 195.576L251.669 188.099C250.925 186.165 248.069 186.709 248.049 188.764C248.029 190.82 248.029 192.795 248.029 194.891C248.029 195.919 247.184 196.765 246.158 196.765H234.191C233.145 196.765 232.321 195.939 232.321 194.891V156.942C232.321 155.914 233.145 155.068 234.191 155.068H248.391C249.175 155.048 249.859 155.532 250.14 156.257L253.117 164.056C253.861 165.991 256.717 165.487 256.737 163.411L256.818 156.922C256.818 155.894 257.662 155.068 258.688 155.068H270.575C271.6 155.068 272.445 155.914 272.445 156.962V194.911C272.445 195.959 271.6 196.785 270.575 196.785L270.555 196.765Z" fill="#111111"/>
+<path d="M332.219 223.307L342.738 241.384C343.462 242.634 342.577 244.206 341.129 244.206L328.881 244.266C328.197 244.266 327.574 243.904 327.232 243.319L322.586 235.097C321.902 233.867 320.031 234.351 320.011 235.762L319.891 242.392C319.891 243.42 319.046 244.246 318.02 244.246H306.053C305.007 244.246 304.183 243.42 304.183 242.372V204.423C304.183 203.395 305.007 202.549 306.053 202.549H318.04C319.066 202.549 319.891 203.355 319.911 204.363L320.031 209.22C320.072 210.671 322.022 211.094 322.646 209.784L325.602 203.637C325.924 202.992 326.568 202.569 327.292 202.569H339.721C341.17 202.549 342.075 204.101 341.351 205.35L332.24 221.433C331.918 222.017 331.918 222.722 332.24 223.307H332.219Z" fill="#111111"/>
+<path d="M209.473 190.034L205.068 189.994C204.143 189.994 203.359 190.659 203.198 191.566L202.595 195.194C202.454 196.101 201.669 196.766 200.744 196.766H188.093C186.867 196.766 185.982 195.637 186.263 194.448L195.837 156.479C196.038 155.653 196.802 155.068 197.667 155.068H216.814C217.679 155.089 218.423 155.673 218.624 156.519L228.218 194.448C228.52 195.637 227.635 196.786 226.408 196.786L213.757 196.826C212.832 196.826 212.047 196.161 211.907 195.254L211.303 191.647C211.162 190.74 210.378 190.075 209.473 190.075V190.034ZM209.111 178.688L208.146 173.912C207.944 172.904 206.496 172.904 206.295 173.912L205.43 178.708C205.209 179.877 206.134 180.965 207.321 180.925C208.488 180.885 209.332 179.817 209.111 178.668V178.688Z" fill="#111111"/>
+<path d="M248.25 237.515L243.845 237.475C242.92 237.475 242.136 238.14 241.975 239.047L241.371 242.675C241.231 243.581 240.446 244.247 239.521 244.247H226.85C225.623 244.247 224.738 243.118 225.02 241.929L234.594 203.98C234.795 203.154 235.559 202.569 236.404 202.569H255.571C256.436 202.549 257.18 203.134 257.401 203.96L266.995 241.909C267.297 243.098 266.412 244.247 265.185 244.247H252.534C251.609 244.287 250.824 243.622 250.684 242.715L250.08 239.107C249.939 238.201 249.155 237.535 248.25 237.535V237.515ZM247.868 226.169L247.023 221.977C246.802 220.848 245.173 220.848 244.952 221.997L244.187 226.209C243.966 227.378 244.891 228.466 246.078 228.426C247.244 228.386 248.089 227.318 247.868 226.169Z" fill="#111111"/>
+<path d="M192.277 232.921C191.15 246.283 171.963 247.008 158.95 242.272C158.186 241.99 157.683 241.245 157.683 240.438V229.515C157.683 228.024 159.252 227.077 160.559 227.802C164.763 230.1 169.007 231.732 173.813 232.7C173.813 232.7 175.402 232.82 175.986 231.793C176.569 230.765 175.463 230.362 174.98 229.959C165.829 225.988 155.189 223.651 156.135 213.312C157.241 201.361 175.362 199.91 187.691 203.739C188.496 203.981 189.039 204.767 189.039 205.613V216.315C189.039 217.726 187.59 218.673 186.283 218.108C180.39 215.509 172.385 213.211 172.788 214.743C173.813 218.612 193.423 219.036 192.257 232.881L192.277 232.921Z" fill="#111111"/>
+<path d="M285.86 228.386C289.058 231.046 293 231.167 296.399 229.454C298.008 228.648 299.899 229.736 299.899 231.53L299.959 241.082C299.959 242.07 299.376 242.997 298.431 243.319C289.199 246.584 278.379 244.73 271.862 236.689C265.346 228.648 265.668 217.402 272.124 209.744C278.58 202.086 289.3 200.312 298.411 203.416C299.356 203.738 299.959 204.665 299.959 205.673L299.899 215.226C299.899 217.019 298.008 218.107 296.399 217.321C293.041 215.649 289.219 215.649 285.981 218.228C283.145 220.486 282.844 225.867 285.86 228.386Z" fill="#111111"/>
+<path d="M176.931 196.745L164.944 196.786C163.898 196.786 163.053 195.939 163.053 194.911V170.082C163.053 169.055 162.229 168.208 161.183 168.208H155.029C154.003 168.208 153.158 167.342 153.158 166.314V156.963C153.158 155.935 154.003 155.088 155.049 155.088H186.806C187.832 155.088 188.677 155.935 188.677 156.963V166.314C188.677 167.342 187.852 168.188 186.806 168.188H180.652C179.626 168.188 178.781 169.035 178.781 170.082V194.891C178.781 195.919 177.937 196.766 176.911 196.766L176.931 196.745Z" fill="#111111"/>
+<path d="M216.593 244.206L204.606 244.246C203.56 244.246 202.715 243.4 202.715 242.372V217.543C202.715 216.515 201.891 215.669 200.845 215.669H194.69C193.665 215.669 192.82 214.802 192.82 213.774V204.423C192.82 203.395 193.665 202.549 194.71 202.549H226.468C227.494 202.549 228.339 203.395 228.339 204.423V213.774C228.339 214.802 227.514 215.649 226.468 215.649H220.314C219.288 215.649 218.443 216.495 218.443 217.543V242.352C218.443 243.38 217.619 244.226 216.573 244.226L216.593 244.206Z" fill="#111111"/>
+<path d="M100.061 143.5C131.195 143.5 143.122 162.807 143.122 199.99C143.122 237.173 131.195 256.479 100.061 256.479C68.9267 256.479 57.0001 237.193 57 199.99C57 162.807 68.9266 143.5 100.061 143.5ZM114.301 225.807C110.258 225.807 108.045 226.916 106.275 227.803C104.747 228.568 103.54 229.173 100.886 229.173C98.2309 229.173 97.0237 228.569 95.4951 227.803C93.7253 226.916 91.5131 225.807 87.4707 225.807C83.4281 225.807 81.2152 226.916 79.4453 227.803C77.917 228.568 76.7101 229.173 74.0557 229.173V235.058C78.0979 235.058 80.3103 233.949 82.0801 233.062C83.6086 232.297 84.8159 231.691 87.4707 231.691C90.1253 231.691 91.3319 232.297 92.8604 233.062C94.6303 233.949 96.8431 235.058 100.886 235.058C104.928 235.058 107.14 233.949 108.91 233.062C110.439 232.297 111.646 231.691 114.301 231.691C116.955 231.691 118.162 232.297 119.69 233.062C121.46 233.949 123.673 235.058 127.716 235.058V229.173C125.061 229.173 123.854 228.569 122.325 227.803C120.555 226.916 118.343 225.807 114.301 225.807ZM116.231 166.798C119.289 164.037 116.231 159.038 112.41 160.55C110.298 161.396 108.307 162.606 106.537 164.218C103.762 166.737 101.891 169.901 100.886 173.348C99.8801 169.901 98.0099 166.737 95.2344 164.218C93.4645 162.626 91.4731 161.396 89.3613 160.55C85.5399 159.038 82.4829 164.037 85.54 166.798L96.7422 176.935C93.0819 174.456 88.6775 172.984 83.9111 172.984C81.3167 172.984 78.8223 173.408 76.4893 174.214C72.5673 175.544 73.6533 181.429 77.7764 181.429H93.4033C89.9644 182.094 86.6863 183.626 83.9512 186.084C82.1813 187.676 80.7734 189.531 79.7275 191.566C77.8371 195.214 82.483 198.761 85.54 196.021L98.1504 184.634L97.2051 215.972C97.2051 216.355 96.9837 216.717 96.7021 217.02C96.3 216.838 95.9174 216.657 95.4951 216.436C93.7253 215.549 91.5131 214.44 87.4707 214.44C83.4281 214.44 81.2152 215.549 79.4453 216.436C77.917 217.201 76.7102 217.806 74.0557 217.806V223.69C78.098 223.69 80.3102 222.582 82.0801 221.695C83.6086 220.929 84.8159 220.325 87.4707 220.325C90.1253 220.325 91.332 220.93 92.8604 221.695C94.6303 222.582 96.8431 223.69 100.886 223.69C104.928 223.69 107.14 222.582 108.91 221.695C110.439 220.929 111.646 220.325 114.301 220.325C116.955 220.325 118.162 220.93 119.69 221.695C121.46 222.582 123.673 223.69 127.716 223.69V217.806C125.061 217.806 123.854 217.201 122.325 216.436V216.415C120.555 215.528 118.343 214.42 114.301 214.42C110.258 214.42 108.045 215.528 106.275 216.415C105.813 216.637 105.391 216.859 104.948 217.04C104.606 216.738 104.405 216.355 104.385 215.952L103.439 184.452L116.231 196.021C119.289 198.781 123.934 195.234 122.044 191.566C120.998 189.551 119.59 187.676 117.82 186.084C115.085 183.605 111.826 182.094 108.367 181.429H123.995C128.138 181.429 129.204 175.564 125.282 174.214C122.949 173.428 120.455 172.984 117.86 172.984C113.114 172.984 108.71 174.456 105.029 176.935L116.231 166.798Z" fill="#111111"/>
+</g>
+<defs>
+<clipPath id="clip0_837_2293">
+<rect width="286" height="113" fill="white" transform="translate(57 143.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/brand/social/stacked-light@2x.png b/public/images/brand/social/stacked-light@2x.png
new file mode 100644
index 000000000..4ccc3e8bd
Binary files /dev/null and b/public/images/brand/social/stacked-light@2x.png differ
diff --git a/public/images/hero-palm-motion.mp4 b/public/images/hero-palm-motion.mp4
new file mode 100644
index 000000000..2c32316e3
Binary files /dev/null and b/public/images/hero-palm-motion.mp4 differ
diff --git a/src/components/ApplicationStarter.tsx b/src/components/ApplicationStarter.tsx
index d9c6b3c01..5ae103e57 100644
--- a/src/components/ApplicationStarter.tsx
+++ b/src/components/ApplicationStarter.tsx
@@ -2,11 +2,9 @@ import * as React from 'react'
 import { ClientOnly } from '@tanstack/react-router'
 import {
   ArrowRight,
-  Atom,
   Check,
   CaretDown,
   Copy,
-  Cube,
   DownloadSimple,
   GithubLogo,
   OpenAiLogo,
@@ -15,6 +13,7 @@ import {
   Rocket,
 } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
+import { ClaudeIcon, CursorIcon } from '~/components/CopyPageDropdown'
 import type {
   ApplicationStarterContext,
   ApplicationStarterResult,
@@ -81,6 +80,8 @@ const LazyDeployDialog = React.lazy(() =>
 
 const starterPackageManagers = ['pnpm', 'npm', 'yarn', 'bun'] as const
 const starterToolchains = ['biome', 'eslint'] as const
+const starterEyebrowClassName =
+  'font-ds-mono text-ds-mono-xs uppercase tracking-wider text-text-muted'
 
 type HostingDeployPartnerId = 'cloudflare' | 'lovable' | 'netlify' | 'railway'
 type StarterTransientAction =
@@ -775,9 +776,7 @@ export function ApplicationStarter({
             <>
               <div className="overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-950">
                 <div className="border-b border-gray-200 px-3 py-2 dark:border-gray-800">
-                  <div className="font-ds-mono text-ds-mono-xs uppercase tracking-wider text-gray-400 dark:text-gray-500">
-                    Ideas
-                  </div>
+                  <div className={starterEyebrowClassName}>Ideas</div>
                   <div className="mt-2 flex flex-wrap gap-2">
                     {suggestions.map((suggestion) => (
                       <StarterChipButton
@@ -797,7 +796,7 @@ export function ApplicationStarter({
 
                 {showMigrationRepositoryInput ? (
                   <div className="border-b border-gray-200 px-3 py-2 dark:border-gray-800">
-                    <div className="font-ds-mono text-ds-mono-xs uppercase tracking-wider text-gray-400 dark:text-gray-500">
+                    <div className={starterEyebrowClassName}>
                       Existing Repository URL
                     </div>
                     <input
@@ -824,7 +823,9 @@ export function ApplicationStarter({
                 ) : null}
 
                 <div className="relative">
-                  <div className="px-3 pt-2 font-ds-mono text-ds-mono-xs uppercase tracking-wider text-gray-400 dark:text-gray-500">
+                  <div
+                    className={twMerge('px-3 pt-2', starterEyebrowClassName)}
+                  >
                     Prompt
                   </div>
                   <textarea
@@ -873,7 +874,7 @@ export function ApplicationStarter({
                     <StarterTooltipProvider>
                       <div className="space-y-2 rounded-lg border border-gray-200 bg-white px-3 py-3 dark:border-gray-800 dark:bg-gray-950">
                         <div className="mb-3">
-                          <div className="font-ds-mono text-ds-mono-xs uppercase tracking-wider text-gray-400 dark:text-gray-500">
+                          <div className={starterEyebrowClassName}>
                             TanStack Libraries
                           </div>
 
@@ -886,7 +887,7 @@ export function ApplicationStarter({
                           </div>
                         </div>
 
-                        <div className="font-ds-mono text-ds-mono-xs uppercase tracking-wider text-gray-400 dark:text-gray-500">
+                        <div className={starterEyebrowClassName}>
                           Partner Integrations
                         </div>
                         <StarterPartnerRows
@@ -988,7 +989,7 @@ export function ApplicationStarter({
                   >
                     {showMigrationRepositoryInput ? (
                       <div className="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
-                        <div className="font-ds-mono text-ds-mono-xs uppercase tracking-wider text-gray-400 dark:text-gray-500">
+                        <div className={starterEyebrowClassName}>
                           Existing Repository URL
                         </div>
                         <input
@@ -1015,7 +1016,12 @@ export function ApplicationStarter({
                     ) : null}
 
                     {isHomeStarter ? null : (
-                      <div className="px-5 pt-4 font-ds-mono text-ds-mono-xs uppercase tracking-wider text-gray-400 dark:text-gray-500">
+                      <div
+                        className={twMerge(
+                          'px-5 pt-4',
+                          starterEyebrowClassName,
+                        )}
+                      >
                         Prompt
                       </div>
                     )}
@@ -1081,7 +1087,7 @@ export function ApplicationStarter({
                             size="sm"
                             type="button"
                             onClick={resetHomeBuilder}
-                            className="rounded-lg text-xs font-medium text-gray-500 hover:bg-gray-950/5 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-white"
+                            className="rounded-lg border-0 bg-transparent text-xs font-medium text-gray-500 shadow-none hover:bg-gray-950/5 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-white"
                           >
                             <ArrowCounterClockwise className="h-3.5 w-3.5" />
                             Start over
@@ -1159,7 +1165,7 @@ export function ApplicationStarter({
                                     'home-stack-builder-section-reveal',
                                 )}
                               >
-                                <div className="font-ds-mono text-ds-mono-xs uppercase tracking-wider text-gray-400 dark:text-gray-500">
+                                <div className={starterEyebrowClassName}>
                                   TanStack Libraries
                                 </div>
 
@@ -1182,7 +1188,7 @@ export function ApplicationStarter({
                                     'home-stack-builder-section-reveal home-stack-builder-section-reveal-delayed',
                                 )}
                               >
-                                <div className="font-ds-mono text-ds-mono-xs uppercase tracking-wider text-gray-400 dark:text-gray-500">
+                                <div className={starterEyebrowClassName}>
                                   Add Integrations
                                 </div>
                                 <div className="mt-3 w-full">
@@ -1391,12 +1397,7 @@ export function ApplicationStarter({
                                   className:
                                     'text-text-secondary hover:text-text-primary',
                                   href: claudeStartHref,
-                                  icon: (
-                                    <Atom
-                                      className="h-6 w-6"
-                                      weight="regular"
-                                    />
-                                  ),
+                                  icon: <ClaudeIcon className="h-6 w-6" />,
                                   iconOnly: true,
                                   label: 'Open in Claude',
                                   onTrack: () => {
@@ -1413,12 +1414,7 @@ export function ApplicationStarter({
                                   className:
                                     'text-text-secondary hover:text-text-primary',
                                   href: cursorStartHref,
-                                  icon: (
-                                    <Cube
-                                      className="h-6 w-6"
-                                      weight="regular"
-                                    />
-                                  ),
+                                  icon: <CursorIcon className="h-6 w-6" />,
                                   iconOnly: true,
                                   label: 'Open in Cursor',
                                   onTrack: () => {
@@ -1546,10 +1542,11 @@ function StarterCustomizationSection({
 }) {
   return (
     <Collapsible open={open} onOpenChange={onOpenChange}>
-      <div className={twMerge(compact ? 'pt-1' : 'pt-2')}>
+      <div className={twMerge(compact ? 'pt-1' : 'pt-4')}>
         <CollapsibleTrigger
           className={twMerge(
-            'inline-flex items-center gap-1 font-ds-mono text-ds-mono-xs uppercase tracking-wider text-gray-400 transition-colors hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300',
+            starterEyebrowClassName,
+            'inline-flex appearance-none items-center gap-1 border-0 bg-transparent p-0 text-left transition-colors hover:text-text-secondary',
           )}
         >
           {title}
diff --git a/src/components/ButtonGroup.tsx b/src/components/ButtonGroup.tsx
index 4feefb443..c78be1f88 100644
--- a/src/components/ButtonGroup.tsx
+++ b/src/components/ButtonGroup.tsx
@@ -10,10 +10,10 @@ export function ButtonGroup({ children, className }: ButtonGroupProps) {
   return (
     <div
       className={twMerge(
-        'inline-flex items-stretch rounded-md overflow-hidden',
-        'border border-gray-200 dark:border-gray-700',
-        'divide-x divide-gray-200 dark:divide-gray-700',
-        'bg-white dark:bg-gray-800',
+        'inline-flex items-stretch overflow-hidden rounded-md',
+        'border border-border-default',
+        'divide-x divide-border-default',
+        'bg-background-surface text-text-primary',
         'shadow-sm',
         className,
       )}
diff --git a/src/components/CopyPageDropdown.tsx b/src/components/CopyPageDropdown.tsx
index 3550afc20..a177651fe 100644
--- a/src/components/CopyPageDropdown.tsx
+++ b/src/components/CopyPageDropdown.tsx
@@ -38,7 +38,7 @@ function MarkdownIcon({ className }: { className?: string }) {
 }
 
 // Claude/Anthropic icon
-function ClaudeIcon({ className }: { className?: string }) {
+export function ClaudeIcon({ className }: { className?: string }) {
   return (
     <svg
       viewBox="0 0 24 24"
@@ -61,7 +61,7 @@ function ChatGPTIcon({ className }: { className?: string }) {
 }
 
 // Cursor icon
-function CursorIcon({ className }: { className?: string }) {
+export function CursorIcon({ className }: { className?: string }) {
   return (
     <svg viewBox="0 0 24 24" fill="currentColor" className={className}>
       <path d="M22.106 5.68L12.5.135a.998.998 0 00-.998 0L1.893 5.68a.84.84 0 00-.419.726v11.186c0 .3.16.577.42.727l9.607 5.547a.999.999 0 00.998 0l9.608-5.547a.84.84 0 00.42-.727V6.407a.84.84 0 00-.42-.726zm-.603 1.176L12.228 22.92c-.063.108-.228.064-.228-.061V12.34a.59.59 0 00-.295-.51l-9.11-5.26c-.107-.062-.063-.228.062-.228h18.55c.264 0 .428.286.296.514z"></path>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 6883ac923..c7037b0ee 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,58 +1,204 @@
+import type * as React from 'react'
 import { Link } from '@tanstack/react-router'
-import { Card } from './Card'
+import { BSkyIcon } from '~/components/icons/BSkyIcon'
+import { BrandXIcon } from '~/components/icons/BrandXIcon'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { YouTubeIcon } from '~/components/icons/YouTubeIcon'
 
-const footerLinks = [
-  { label: 'Blog', to: '/blog' },
-  { label: '@Tan_Stack on X.com', to: 'https://x.com/tan_stack' },
+interface FooterLink {
+  label: string
+  to: string
+}
+
+interface FooterColumn {
+  label: string
+  links: Array<FooterLink>
+}
+
+const FOOTER_COLUMNS: Array<FooterColumn> = [
   {
-    label: '@TannerLinsley on X.com',
-    to: 'https://x.com/tannerlinsley',
+    label: 'Libraries',
+    links: [
+      { label: 'Browse all', to: '/libraries' },
+      { label: 'Query', to: '/query/latest' },
+      { label: 'Router', to: '/router/latest' },
+      { label: 'Start', to: '/start/latest' },
+      { label: 'Table', to: '/table/latest' },
+      { label: 'Form', to: '/form/latest' },
+    ],
   },
-  { label: 'GitHub', to: 'https://github.com/tanstack' },
   {
-    label: 'YouTube',
-    to: 'https://youtube.com/@tan_stack',
+    label: 'Blog',
+    links: [
+      { label: 'Latest posts', to: '/blog' },
+      { label: 'Release notes', to: '/blog' },
+      { label: 'YouTube', to: 'https://youtube.com/@tan_stack' },
+      { label: 'Workshops', to: '/workshops' },
+    ],
   },
   {
-    label: 'Ethos',
-    to: '/ethos',
+    label: 'Community',
+    links: [
+      { label: 'Discord', to: 'https://tlinz.com/discord' },
+      { label: 'GitHub', to: 'https://github.com/TanStack' },
+      { label: 'Maintainers', to: '/maintainers' },
+      { label: 'Contributors', to: '/maintainers' },
+      { label: 'Showcase', to: '/showcase' },
+    ],
   },
   {
-    label: 'Tenets',
-    to: '/tenets',
+    label: 'Tools',
+    links: [
+      { label: 'Builder', to: '/builder' },
+      { label: 'Stats', to: '/stats/npm' },
+    ],
   },
   {
-    label: 'Privacy Policy',
-    to: '/privacy',
+    label: 'Merch',
+    links: [
+      { label: 'Shop', to: '/shop' },
+      { label: 'Cart', to: '/shop/cart' },
+    ],
   },
   {
-    label: 'Terms of Service',
-    to: '/terms',
+    label: 'Support',
+    links: [
+      { label: 'Support overview', to: '/support' },
+      { label: 'Partners', to: '/partners' },
+      { label: 'OSS sponsors', to: '/#sponsors' },
+      { label: 'Enterprise support', to: '/paid-support' },
+      { label: 'Contact', to: 'mailto:support@tanstack.com' },
+      { label: 'Ethos', to: '/ethos' },
+      { label: 'Tenets', to: '/tenets' },
+      { label: 'Design system', to: '/ds' },
+    ],
+  },
+]
+
+const SOCIAL_LINKS: Array<
+  FooterLink & { Icon: React.ComponentType<{ className?: string }> }
+> = [
+  { label: 'X', to: 'https://x.com/tan_stack', Icon: BrandXIcon },
+  {
+    label: 'Bluesky',
+    to: 'https://bsky.app/profile/tanstack.com',
+    Icon: BSkyIcon,
+  },
+  { label: 'GitHub', to: 'https://github.com/tanstack', Icon: GithubIcon },
+  {
+    label: 'YouTube',
+    to: 'https://youtube.com/@tan_stack',
+    Icon: YouTubeIcon,
   },
 ]
 
+const LEGAL_LINKS: Array<FooterLink> = [
+  { label: 'Privacy', to: '/privacy' },
+  { label: 'Terms', to: '/terms' },
+]
+
+function FooterNavLink({ link }: { link: FooterLink }) {
+  const external = link.to.startsWith('http') || link.to.startsWith('mailto:')
+  const className =
+    'text-ds-body-sm text-text-secondary hover:text-text-primary focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus'
+
+  return external ? (
+    <a
+      href={link.to}
+      target={link.to.startsWith('mailto:') ? undefined : '_blank'}
+      rel={link.to.startsWith('mailto:') ? undefined : 'noreferrer'}
+      className={className}
+    >
+      {link.label}
+    </a>
+  ) : (
+    <Link to={link.to} className={className}>
+      {link.label}
+    </Link>
+  )
+}
+
 export function Footer() {
   return (
-    <Card
-      className={`relative flex flex-col items-start justify-center gap-4 p-8
-      max-w-(--breakpoint-lg) mx-auto text-sm`}
-    >
-      <div className={`grid gap-1 sm:grid-cols-2 md:grid-cols-3`}>
-        {footerLinks.map((item) => (
-          <div key={item.to}>
-            {item.to.startsWith('http') ? (
-              <a href={item.to} target="_blank" rel="noreferrer">
-                {item.label}
-              </a>
-            ) : (
-              <Link to={item.to}>{item.label}</Link>
-            )}
+    <footer className="w-full border-t border-border-subtle bg-background-surface">
+      <div className="mx-auto max-w-[96rem] px-6 py-12 md:px-10 lg:py-16">
+        <div className="rounded-2xl border border-border-subtle p-6 shadow-sm md:p-8">
+          <div className="grid gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-[342px_repeat(6,minmax(0,1fr))]">
+            <div className="sm:col-span-2 lg:col-span-4 xl:col-span-1 xl:mr-[3px] xl:w-[342px] xl:pr-[68px]">
+              <Link
+                to="/"
+                aria-label="TanStack home"
+                className="inline-flex focus-visible:rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus"
+              >
+                <span
+                  aria-hidden="true"
+                  className="h-[61px] w-[155px] bg-[#121212] [mask-position:center] [mask-repeat:no-repeat] [mask-size:contain] dark:bg-[#d3ccbb]"
+                  style={{
+                    maskImage: 'url(/images/brand/tanstack-stacked-white.svg)',
+                    WebkitMaskImage:
+                      'url(/images/brand/tanstack-stacked-white.svg)',
+                  }}
+                />
+              </Link>
+              <p className="mt-5 w-[199px] text-ds-body-sm text-text-secondary">
+                The open source application stack for the web.
+              </p>
+            </div>
+
+            {FOOTER_COLUMNS.map((column) => (
+              <nav
+                key={column.label}
+                aria-label={`${column.label} footer links`}
+              >
+                <h2 className="font-ds-display text-ds-heading-5 font-semibold text-text-primary">
+                  {column.label}
+                </h2>
+                <ul className="mt-4 space-y-2.5">
+                  {column.links.map((link) => (
+                    <li key={`${link.label}-${link.to}`}>
+                      <FooterNavLink link={link} />
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            ))}
           </div>
-        ))}
-      </div>
-      <div className={`text-center opacity-60`}>
-        &copy; {new Date().getFullYear()} TanStack LLC
+
+          <div className="mt-12 flex flex-col gap-5 border-t border-border-subtle pt-6 text-text-muted sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex flex-wrap items-center gap-x-5 gap-y-2">
+              <p className="font-ds-mono text-ds-mono-xs uppercase tracking-wider">
+                &copy; {new Date().getFullYear()} TanStack LLC
+              </p>
+              <nav aria-label="Legal links">
+                <ul className="flex items-center gap-4">
+                  {LEGAL_LINKS.map((link) => (
+                    <li key={link.to}>
+                      <FooterNavLink link={link} />
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            </div>
+            <nav aria-label="Social links">
+              <ul className="flex flex-wrap items-center gap-2">
+                {SOCIAL_LINKS.map(({ label, to, Icon }) => (
+                  <li key={to}>
+                    <a
+                      href={to}
+                      target="_blank"
+                      rel="noreferrer"
+                      aria-label={`TanStack on ${label}`}
+                      className="inline-flex size-10 items-center justify-center rounded-md text-text-secondary hover:bg-background-subtle hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus"
+                    >
+                      <Icon className="size-6" />
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          </div>
+        </div>
       </div>
-    </Card>
+    </footer>
   )
 }
diff --git a/src/components/LibrariesOverlay.tsx b/src/components/LibrariesOverlay.tsx
index 30a234b44..49d96d37f 100644
--- a/src/components/LibrariesOverlay.tsx
+++ b/src/components/LibrariesOverlay.tsx
@@ -1,12 +1,14 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { X } from '@phosphor-icons/react'
+import { ArrowLeft, X } from '@phosphor-icons/react'
 import { LibrariesBrowser } from '~/components/LibrariesBrowser'
 
 export function LibrariesOverlay({
   open,
+  onBack,
   onClose,
 }: {
   open: boolean
+  onBack?: () => void
   onClose: () => void
 }) {
   return (
@@ -30,11 +32,21 @@ export function LibrariesOverlay({
             if (event.target === event.currentTarget) onClose()
           }}
         >
+          {onBack ? (
+            <button
+              type="button"
+              onClick={onBack}
+              className="fixed left-4 top-4 z-[112] inline-flex h-11 items-center gap-2 rounded-xl bg-background-subtle px-3 font-ds-display text-ds-body-md font-medium text-text-primary transition-colors hover:bg-surface-state-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus min-[900px]:hidden"
+            >
+              <ArrowLeft className="size-5" />
+              Back to menu
+            </button>
+          ) : null}
           <DialogPrimitive.Close
             aria-label="Close"
-            className="fixed right-6 top-6 z-[112] flex size-14 items-center justify-center rounded-full corner-squircle text-text-secondary transition-colors hover:bg-black/5 hover:text-text-primary dark:hover:bg-white/10"
+            className="fixed right-4 top-4 z-[112] flex size-11 items-center justify-center rounded-full corner-squircle text-text-secondary transition-colors hover:bg-black/5 hover:text-text-primary dark:hover:bg-white/10 min-[900px]:right-6 min-[900px]:top-6 min-[900px]:size-14"
           >
-            <X className="size-10" weight="light" />
+            <X className="size-7 min-[900px]:size-10" weight="light" />
           </DialogPrimitive.Close>
           <LibrariesBrowser variant="dialog" />
         </DialogPrimitive.Content>
diff --git a/src/components/LibraryStatusBadge.tsx b/src/components/LibraryStatusBadge.tsx
new file mode 100644
index 000000000..f733e127a
--- /dev/null
+++ b/src/components/LibraryStatusBadge.tsx
@@ -0,0 +1,35 @@
+import { twMerge } from 'tailwind-merge'
+import { Badge } from '~/components/ds/ui'
+import type { LibrarySlim } from '~/libraries'
+
+type LibraryBadge = NonNullable<LibrarySlim['badge']>
+
+const libraryBadgeVariants = {
+  new: 'success',
+  fresh: 'success',
+  soon: 'default',
+  alpha: 'info',
+  beta: 'warning',
+  RC: 'warning',
+} as const
+
+export function LibraryStatusBadge({
+  badge,
+  className,
+}: {
+  badge: LibraryBadge
+  className?: string
+}) {
+  return (
+    <Badge
+      variant={libraryBadgeVariants[badge]}
+      rounded="md"
+      className={twMerge(
+        'font-ds-mono text-ds-mono-caps-xs uppercase',
+        className,
+      )}
+    >
+      {badge}
+    </Badge>
+  )
+}
diff --git a/src/components/MaintainerCard.tsx b/src/components/MaintainerCard.tsx
index 63941e823..4c5866514 100644
--- a/src/components/MaintainerCard.tsx
+++ b/src/components/MaintainerCard.tsx
@@ -180,11 +180,25 @@ const MaintainerSocialIcons: Record<
   ),
 }
 
-function MaintainerSocialLinks({ maintainer }: { maintainer: Maintainer }) {
-  const links = Object.entries({
-    github: `https://github.com/${maintainer.github}`,
-    ...(maintainer.social || {}),
-  }).map(([key, value]) => {
+function MaintainerSocialLinks({
+  maintainer,
+  variant = 'default',
+}: {
+  maintainer: Maintainer
+  variant?: 'default' | 'card'
+}) {
+  const socialEntries =
+    variant === 'card'
+      ? [
+          ...Object.entries(maintainer.social || {}).slice(0, 2),
+          ['github', `https://github.com/${maintainer.github}`],
+        ]
+      : Object.entries({
+          github: `https://github.com/${maintainer.github}`,
+          ...(maintainer.social || {}),
+        })
+
+  const links = socialEntries.map(([key, value]) => {
     const Icon = MaintainerSocialIcons[key as keyof Maintainer['social']]
     return (
       <a
@@ -192,9 +206,13 @@ function MaintainerSocialLinks({ maintainer }: { maintainer: Maintainer }) {
         href={value}
         target="_blank"
         rel="noopener noreferrer"
-        aria-label={key}
+        aria-label={`${maintainer.name} on ${key}`}
         onClick={(e) => e.stopPropagation()}
-        className="hover:text-gray-700 dark:hover:text-gray-200 transition-colors p-2 -mb-2 -ml-2 hover:grayscale-0 hover:scale-110"
+        className={
+          variant === 'card'
+            ? 'inline-flex size-6 items-center justify-center text-icon-muted transition-colors duration-200 hover:text-icon-default focus-visible:rounded-sm focus-visible:corner-squircle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus motion-reduce:transition-none [&_svg]:size-6'
+            : 'p-2 -mb-2 -ml-2 transition-colors hover:scale-110 hover:text-gray-700 hover:grayscale-0 dark:hover:text-gray-200'
+        }
       >
         {Icon}
       </a>
@@ -202,7 +220,13 @@ function MaintainerSocialLinks({ maintainer }: { maintainer: Maintainer }) {
   })
 
   return (
-    <div className="flex flex-wrap items-center gap-x-2 sm:gap-x-4 gap-y-2 text-gray-400 dark:text-gray-500  pt-1">
+    <div
+      className={
+        variant === 'card'
+          ? 'flex flex-wrap items-center justify-center gap-6'
+          : 'flex flex-wrap items-center gap-x-2 gap-y-2 pt-1 text-gray-400 sm:gap-x-4 dark:text-gray-500'
+      }
+    >
       {links}
     </div>
   )
@@ -368,17 +392,10 @@ export function MaintainerRowCard({
   )
 }
 
-export function MaintainerCard({
-  maintainer,
-  libraryId,
-  hideLibraries,
-}: MaintainerCardProps) {
-  const libraries = getPersonsMaintainerOf(maintainer)
-  const [showAllLibraries, setShowAllLibraries] = useState(false)
-
+export function MaintainerCard({ maintainer }: MaintainerCardProps) {
   return (
     <div
-      className="group bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow-xs border border-gray-200 dark:border-gray-800"
+      className="group flex w-full max-w-[252px] flex-col items-center rounded-[26px] corner-squircle p-1.5 transition-colors duration-200 hover:bg-[#f2f2f2] focus-within:bg-[#f2f2f2] active:bg-[#e5e5e5] motion-reduce:transition-none dark:hover:bg-[#262626] dark:focus-within:bg-[#262626] dark:active:bg-[#404040]"
       aria-label={`Maintainer card for ${maintainer.name}`}
     >
       <a
@@ -386,80 +403,17 @@ export function MaintainerCard({
         target="_blank"
         rel="noopener noreferrer"
         aria-label={`View ${maintainer.name}'s GitHub profile`}
-        className="relative h-64 overflow-hidden block"
+        className="block aspect-square w-full overflow-hidden rounded-[22px] corner-squircle bg-[#d9d9d9] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus"
         tabIndex={0}
-      >
-        <img
-          alt={`Avatar of ${maintainer.name}`}
-          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
-          src={maintainer.avatar}
-          loading="lazy"
-          decoding="async"
-          style={{
-            aspectRatio: '1/1',
-            objectFit: 'cover',
-          }}
-        />
-        <div className="absolute inset-0 bg-linear-to-t from-black/60 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-        <div className="absolute inset-0 p-4 flex flex-col justify-end opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-          <div className="space-y-2">
-            {maintainer.frameworkExpertise &&
-              maintainer.frameworkExpertise.length > 0 && (
-                <div className="flex flex-wrap gap-2 mb-2">
-                  {maintainer.frameworkExpertise.map((framework) => (
-                    <FrameworkChip key={framework} framework={framework} />
-                  ))}
-                </div>
-              )}
-            {maintainer.specialties && maintainer.specialties.length > 0 && (
-              <div className="flex flex-wrap gap-2">
-                {maintainer.specialties.map((specialty) => (
-                  <SpecialtyChip key={specialty} specialty={specialty} />
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-      </a>
-      <div className="p-3 space-y-2">
-        <div className="flex items-center justify-between">
-          <span
-            className="text-base font-bold"
-            id={`maintainer-name-${maintainer.github}`}
-          >
-            {maintainer.name}
-          </span>
-          <div className="flex items-center gap-2">
-            {libraryId && (
-              <RoleBadge maintainer={maintainer} libraryId={libraryId} />
-            )}
-          </div>
-        </div>
-        {!hideLibraries && !libraryId && libraries.length > 0 && (
-          <div className="flex flex-wrap gap-1.5 pt-1">
-            {libraries
-              .slice(0, showAllLibraries ? undefined : 2)
-              .map((library) => (
-                <LibraryBadge key={library.id} library={library} />
-              ))}
-            {!showAllLibraries && libraries.length > 2 && (
-              <button
-                onClick={(e) => {
-                  e.preventDefault()
-                  e.stopPropagation()
-                  setShowAllLibraries(true)
-                }}
-                className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400"
-                aria-label={`Show ${libraries.length - 2} more libraries`}
-                tabIndex={0}
-                type="button"
-              >
-                +{libraries.length - 2} more
-              </button>
-            )}
-          </div>
-        )}
-        <MaintainerSocialLinks maintainer={maintainer} />
+      />
+      <div className="flex w-full flex-col items-center gap-5 pb-[27px] pt-5">
+        <span
+          className="text-center font-ds-mono text-ds-mono-lg text-text-primary"
+          id={`maintainer-name-${maintainer.github}`}
+        >
+          {maintainer.name}
+        </span>
+        <MaintainerSocialLinks maintainer={maintainer} variant="card" />
       </div>
     </div>
   )
diff --git a/src/components/MaintainersSection.tsx b/src/components/MaintainersSection.tsx
index acd08d805..133e963ed 100644
--- a/src/components/MaintainersSection.tsx
+++ b/src/components/MaintainersSection.tsx
@@ -2,7 +2,7 @@ import { Link } from '@tanstack/react-router'
 import { LibraryId } from '~/libraries'
 import { getLibraryMaintainers } from '~/libraries/maintainers'
 import { Button } from '~/ui'
-import { CompactMaintainerCard } from './MaintainerCard'
+import { MaintainerCard } from './MaintainerCard'
 
 type MaintainersSectionProps = {
   libraryId: LibraryId
@@ -19,12 +19,9 @@ export function MaintainersSection({ libraryId }: MaintainersSectionProps) {
     <div className="px-4 w-full lg:max-w-(--breakpoint-lg) mx-auto">
       <div className="space-y-8">
         <h3 className="text-3xl font-bold">Maintainers</h3>
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
           {maintainers.map((maintainer) => (
-            <CompactMaintainerCard
-              key={maintainer.github}
-              maintainer={maintainer}
-            />
+            <MaintainerCard key={maintainer.github} maintainer={maintainer} />
           ))}
         </div>
         <div className="flex justify-center">
diff --git a/src/components/MegaMenuItem.tsx b/src/components/MegaMenuItem.tsx
index 9ab50ed91..3fdc4cb16 100644
--- a/src/components/MegaMenuItem.tsx
+++ b/src/components/MegaMenuItem.tsx
@@ -73,7 +73,7 @@ export function MegaMenuItem({
       {Icon ? (
         <IconContext.Provider value={{ weight: 'light' }}>
           <span className="flex size-11 shrink-0 items-center justify-center rounded-md">
-            <Icon className="h-8 w-8 text-text-secondary" />
+            <Icon className="h-8 w-8 text-text-secondary group-hover/mmi:text-text-primary group-focus/mmi:text-text-primary group-active/mmi:text-text-primary" />
           </span>
         </IconContext.Provider>
       ) : null}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 50514a386..df009db8e 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -13,6 +13,7 @@ import { MegaMenuItem } from './MegaMenuItem'
 import { Link, useLocation, useMatches } from '@tanstack/react-router'
 import {
   ArrowRight,
+  ArrowLeft,
   ArrowSquareOut,
   Briefcase,
   Code,
@@ -23,11 +24,12 @@ import {
   Lifebuoy,
   Mailbox,
   List as Menu,
+  MagnifyingGlass,
   ShieldCheck,
   ShoppingBag,
+  SignIn,
   Sparkle as Sparkles,
   TrendUp as TrendingUp,
-  User,
   Users,
   X,
 } from '@phosphor-icons/react'
@@ -57,11 +59,9 @@ import { InstagramIcon } from '~/components/icons/InstagramIcon'
 import { BSkyIcon } from '~/components/icons/BSkyIcon'
 import { BrandXIcon } from '~/components/icons/BrandXIcon'
 import { YouTubeIcon } from '~/components/icons/YouTubeIcon'
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '~/components/Collapsible'
+import { BlogPostCard } from '~/components/ds/ui/BlogPostCard'
+import { Button } from '~/components/ds/ui'
+import { Collapsible, CollapsibleContent } from '~/components/Collapsible'
 import { getProducts } from '~/utils/shop.functions'
 import { formatMoney, shopifyImageUrl } from '~/utils/shopify-format'
 import type { ProductListItem } from '~/utils/shopify-queries'
@@ -71,9 +71,6 @@ import {
   trackPartnerInquiry,
 } from '~/utils/partner-inquiry'
 import { fetchRecentPosts, type RecentPost } from '~/utils/blog.functions'
-import { formatAuthors, formatPublishedDate } from '~/utils/blog-format'
-import { getOptimizedImageUrl } from '~/utils/optimizedImage'
-import { CoverFallback } from '~/components/CoverFallback'
 
 type LogoProps = {
   title?: React.ComponentType | null
@@ -447,6 +444,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
 
   const containerRef = React.useRef<HTMLDivElement>(null)
   const desktopNavRef = React.useRef<HTMLElement>(null)
+  const { openLibraries } = useLibrariesOverlay()
 
   React.useEffect(() => {
     const desktopNav = desktopNavRef.current
@@ -499,14 +497,38 @@ export function Navbar({ children }: { children: React.ReactNode }) {
   }, [])
 
   const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false)
+  const [mobileMenuKey, setMobileMenuKey] = React.useState<NavMenuKey | null>(
+    null,
+  )
   const [dismissedDesktopMenuKey, setDismissedDesktopMenuKey] =
     React.useState<NavMenuKey | null>(null)
   const [canLoadAuthControls, setCanLoadAuthControls] = React.useState(false)
+  const [isScrolled, setIsScrolled] = React.useState(false)
+
+  React.useEffect(() => {
+    const updateScrolledState = () => {
+      setIsScrolled(window.scrollY > 0)
+    }
+
+    updateScrolledState()
+    window.addEventListener('scroll', updateScrolledState, { passive: true })
+
+    return () => {
+      window.removeEventListener('scroll', updateScrolledState)
+    }
+  }, [])
 
   React.useEffect(() => {
     setMobileMenuOpen(false)
+    setMobileMenuKey(null)
   }, [location.href])
 
+  React.useEffect(() => {
+    if (!mobileMenuOpen) {
+      setMobileMenuKey(null)
+    }
+  }, [mobileMenuOpen])
+
   const blurActiveNavigationElement = React.useCallback(() => {
     if (typeof document === 'undefined') {
       return
@@ -564,8 +586,8 @@ export function Navbar({ children }: { children: React.ReactNode }) {
         className,
       )}
     >
-      <User className="w-3.5 h-3.5" />
       <span className="hidden min-[430px]:inline">Log In</span>
+      <SignIn className="size-4" weight="bold" />
     </Link>
   )
   const renderAuthControls = (className?: string) =>
@@ -583,11 +605,18 @@ export function Navbar({ children }: { children: React.ReactNode }) {
   const navbar = (
     <div
       className={twMerge(
-        'w-full h-[var(--navbar-height)] px-3 py-2 min-[900px]:px-5 fixed top-0 z-[100] bg-white/90 dark:bg-black/90 backdrop-blur-lg',
+        'relative w-full h-[var(--navbar-height)] px-3 py-2 min-[900px]:px-5 fixed top-0 z-[100] bg-white/90 dark:bg-black/90 backdrop-blur-lg',
         'flex items-center justify-between gap-2 min-[1120px]:gap-4',
       )}
       ref={containerRef}
     >
+      <div
+        aria-hidden="true"
+        className={twMerge(
+          'pointer-events-none absolute inset-x-0 bottom-0 h-px bg-border-subtle opacity-0 transition-opacity duration-150 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none',
+          isScrolled && 'opacity-100',
+        )}
+      />
       <div className="flex min-w-0 flex-1 items-center gap-2 min-[1120px]:gap-3">
         <div className="flex items-center gap-2 font-black text-xl uppercase min-w-0">
           <BrandContextMenu
@@ -626,11 +655,17 @@ export function Navbar({ children }: { children: React.ReactNode }) {
         ))}
       </nav>
 
+      <div className={DESKTOP_NAV_CLASS}>
+        <SearchButton iconOnly className="h-8 w-8" />
+      </div>
+
       <div className="flex flex-1 items-center justify-end gap-2 sm:gap-2.5">
         <div className={DESKTOP_SOCIAL_CLASS}>{socialLinks}</div>
         <ThemeToggle />
         <NavbarCartButton />
-        <SearchButton iconOnly />
+        <div className={MOBILE_NAV_CLASS}>
+          <SearchButton iconOnly />
+        </div>
         <AiDockButton />
         <div
           className={twMerge(DESKTOP_NAV_CLASS, 'items-center gap-2')}
@@ -681,33 +716,24 @@ export function Navbar({ children }: { children: React.ReactNode }) {
           data-mobile-menu
           aria-hidden={!mobileMenuOpen}
           className={twMerge(
-            'ts-glass-menu max-h-[calc(100dvh-var(--navbar-height))] overflow-y-auto',
-            'border-b border-white/45 bg-white/80 text-base shadow-2xl shadow-black/15 backdrop-blur-2xl backdrop-saturate-150',
-            'dark:border-white/10 dark:bg-black/70 dark:shadow-black/50',
+            'ds-mode-dark min-h-[calc(100dvh-var(--navbar-height))] max-h-[calc(100dvh-var(--navbar-height))] overflow-y-auto',
+            'border-b border-white/10 bg-[rgba(10,10,10,0.88)] text-base shadow-2xl shadow-black/50 backdrop-blur-2xl backdrop-saturate-150',
           )}
         >
-          <div className="border-t border-white/30 dark:border-white/10">
-            <div
-              className="flex items-center justify-end gap-2 p-2"
-              onFocusCapture={requestAuthControls}
-              onPointerEnter={requestAuthControls}
-              onTouchStart={requestAuthControls}
-            >
-              {socialLinks}
-              {renderAuthControls('h-9 px-3 text-sm')}
-            </div>
-            <nav
-              className="grid gap-1.5 px-2 pb-2"
-              aria-label="Mobile navigation"
-            >
-              {NAV_GROUPS.map((group) => (
-                <MobileMenuGroup
-                  key={group.key}
-                  group={group}
-                  onNavigate={() => setMobileMenuOpen(false)}
-                />
-              ))}
-            </nav>
+          <div>
+            <MobileNavigation
+              key={mobileMenuOpen ? 'open' : 'closed'}
+              activeKey={mobileMenuKey}
+              onBack={() => setMobileMenuKey(null)}
+              onNavigate={() => setMobileMenuOpen(false)}
+              onOpenLibraries={() => {
+                openLibraries({
+                  onBack: () => setMobileMenuOpen(true),
+                })
+                setMobileMenuOpen(false)
+              }}
+              onSelect={setMobileMenuKey}
+            />
           </div>
         </div>
       </CollapsibleContent>
@@ -723,7 +749,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
         data-site-menu-tint
         className={twMerge(
           'pointer-events-none fixed inset-x-0 bottom-0 top-[var(--navbar-height)] z-[80]',
-          'bg-white/45 transition-opacity duration-200 motion-reduce:transition-none dark:bg-black/45',
+          'bg-black/45 transition-opacity duration-200 motion-reduce:transition-none',
           siteBackdropActive ? 'opacity-100' : 'opacity-0',
         )}
       />
@@ -759,13 +785,13 @@ function DesktopNavTrigger({
   const { openLibraries } = useLibrariesOverlay()
   const triggerClassName = twMerge(
     'ts-mega-trigger inline-flex items-center gap-1 rounded-md px-2 py-2 text-xs font-medium min-[1120px]:gap-1.5 min-[1120px]:px-3 min-[1120px]:text-[13px]',
-    'text-gray-700 transition-colors hover:bg-text-primary/[0.04] hover:text-gray-950',
-    'dark:text-gray-300 dark:hover:text-white',
+    'text-gray-700 transition-colors group-hover/nav:bg-surface-state-hover group-hover/nav:text-gray-950 group-focus-within/nav:bg-surface-state-hover group-focus-within/nav:text-gray-950',
+    'dark:text-gray-300 dark:group-hover/nav:text-white dark:group-focus-within/nav:text-white',
   )
 
   return (
     <div
-      className="ts-mega-trigger-wrap"
+      className="ts-mega-trigger-wrap group/nav"
       data-menu-key={group.key}
       data-menu-dismissed={dismissed ? 'true' : undefined}
       onPointerLeave={onResetDismissed}
@@ -839,76 +865,118 @@ function DesktopNavDropdown({
   )
 }
 
-function MobileMenuGroup({
-  group,
+function MobileNavigation({
+  activeKey,
+  onBack,
   onNavigate,
+  onOpenLibraries,
+  onSelect,
 }: {
-  group: NavMenuGroup
+  activeKey: NavMenuKey | null
+  onBack: () => void
   onNavigate: () => void
+  onOpenLibraries: () => void
+  onSelect: (key: NavMenuKey) => void
 }) {
-  const { openLibraries } = useLibrariesOverlay()
+  const activeGroup = NAV_GROUPS.find((group) => group.key === activeKey)
+  const { openAiDock, openSearch } = useSearchContext()
+
+  const openUtility = (utility: 'ai' | 'search') => {
+    onNavigate()
+    if (utility === 'search') {
+      openSearch()
+    } else {
+      openAiDock()
+    }
+  }
 
-  // Libraries defers to the full-screen browse overlay rather than expanding a
-  // tall inline list — one tap opens the same browser the desktop trigger uses.
-  if (group.key === 'libraries') {
-    return (
-      <button
-        type="button"
-        onClick={() => {
-          openLibraries()
-          onNavigate()
-        }}
+  return (
+    <nav aria-label="Mobile navigation" className="overflow-hidden">
+      <div
         className={twMerge(
-          'flex w-full items-center gap-2 rounded-lg border border-gray-500/10 bg-white/35 px-3 py-3 text-left font-black text-gray-800',
-          'hover:text-gray-950 focus:outline-none dark:border-white/10 dark:bg-white/[0.03] dark:text-gray-200 dark:hover:text-white',
+          'flex w-[200%] items-start transition-transform duration-200 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none',
+          activeGroup && '-translate-x-1/2',
         )}
       >
-        <span className="min-w-0 flex-1 truncate">{group.label}</span>
-        <ArrowRight className="size-4 shrink-0 text-gray-500 dark:text-gray-400" />
-      </button>
-    )
-  }
-
-  return (
-    <Collapsible className="overflow-hidden rounded-lg border border-gray-500/10 bg-white/35 dark:border-white/10 dark:bg-white/[0.03]">
-      {({ open }) => (
-        <>
-          {group.to ? (
-            <div className="flex items-center">
-              <CollapsibleTrigger
-                aria-label={`${open ? 'Collapse' : 'Expand'} ${group.label}`}
-                className={twMerge(
-                  'flex min-w-0 flex-1 items-center px-3 py-3 text-left font-black text-gray-800',
-                  'hover:text-gray-950 focus:outline-none dark:text-gray-200 dark:hover:text-white',
-                  open && 'text-gray-950 dark:text-white',
-                )}
+        <div
+          className="w-1/2 shrink-0 px-6 pb-12 pt-12 min-[480px]:pr-10"
+          aria-hidden={Boolean(activeGroup)}
+        >
+          <div className="mobile-mega-menu-enter grid gap-4">
+            {NAV_GROUPS.map((group) => (
+              <button
+                key={group.key}
+                type="button"
+                tabIndex={activeGroup ? -1 : 0}
+                onClick={() => {
+                  if (group.key === 'libraries') {
+                    onOpenLibraries()
+                  } else {
+                    onSelect(group.key)
+                  }
+                }}
+                className={`mobile-mega-menu-enter-item flex w-full items-center rounded-[18px] p-3 text-left font-ds-display text-ds-heading-1 text-white transition-colors hover:bg-[#171717] focus-visible:bg-[#171717] focus-visible:outline-none ${
+                  group.key === 'libraries' ? 'bg-[#171717]' : ''
+                }`}
               >
-                <span className="min-w-0 flex-1 truncate">{group.label}</span>
-              </CollapsibleTrigger>
-            </div>
-          ) : (
-            <CollapsibleTrigger
-              className={twMerge(
-                'flex w-full items-center px-3 py-3 text-left font-black text-gray-800',
-                'hover:text-gray-950 dark:text-gray-200 dark:hover:text-white',
-                open && 'text-gray-950 dark:text-white',
-              )}
+                <span className="min-w-0 flex-1">{group.label}</span>
+              </button>
+            ))}
+          </div>
+
+          <div className="mt-6 grid gap-3 border-t border-[#2e2e2e] pt-6">
+            <button
+              type="button"
+              tabIndex={activeGroup ? -1 : 0}
+              onClick={() => openUtility('search')}
+              className="flex w-full items-center gap-3.5 rounded-xl px-3 py-4 text-left font-ds-display text-ds-heading-1 text-[#a3a3a3] transition-colors hover:bg-[#171717] hover:text-white focus-visible:bg-[#171717] focus-visible:text-white focus-visible:outline-none"
             >
-              {group.label}
-            </CollapsibleTrigger>
-          )}
-          <CollapsibleContent className="border-t border-gray-500/10 motion-reduce:transition-none dark:border-white/10">
-            <div className="px-2 pb-3 pt-1">
+              <MagnifyingGlass className="size-8 shrink-0" />
+              Search
+            </button>
+            <button
+              type="button"
+              tabIndex={activeGroup ? -1 : 0}
+              onClick={() => openUtility('ai')}
+              className="flex w-full items-center gap-3.5 rounded-xl px-3 py-4 text-left font-ds-display text-ds-heading-1 text-[#a3a3a3] transition-colors hover:bg-[#171717] hover:text-white focus-visible:bg-[#171717] focus-visible:text-white focus-visible:outline-none"
+            >
+              <Sparkles className="size-8 shrink-0" />
+              Ask AI
+            </button>
+            <Link
+              to="/login"
+              tabIndex={activeGroup ? -1 : 0}
+              onClick={onNavigate}
+              className="flex w-full items-center gap-3.5 rounded-xl px-3 py-4 text-left font-ds-display text-ds-heading-1 text-[#a3a3a3] transition-colors hover:bg-[#171717] hover:text-white focus-visible:bg-[#171717] focus-visible:text-white focus-visible:outline-none"
+            >
+              <SignIn className="size-8 shrink-0" />
+              Sign In
+            </Link>
+          </div>
+        </div>
+
+        <div className="w-1/2 shrink-0 px-6 pb-12 pt-8">
+          <button
+            type="button"
+            tabIndex={activeGroup ? 0 : -1}
+            onClick={onBack}
+            className="mb-4 inline-flex items-center gap-2 rounded-xl bg-[#171717] px-3 py-2 font-ds-display text-ds-body-lg font-medium text-white transition-colors hover:bg-[#262626] focus-visible:bg-[#262626] focus-visible:outline-none"
+          >
+            <ArrowLeft className="size-5" />
+            Back
+          </button>
+          {activeGroup ? (
+            <div key={activeGroup.key} className="mobile-mega-menu-enter">
               <MegaMenuContent
-                group={group}
+                group={activeGroup}
                 onNavigate={onNavigate}
                 variant="mobile"
               />
             </div>
-          </CollapsibleContent>
-        </>
-      )}
-    </Collapsible>
+          ) : null}
+        </div>
+      </div>
+    </nav>
   )
 }
 
@@ -968,7 +1036,7 @@ function MegaMenuContent({
                 variant === 'mobile' && sectionIndex > 0 && 'pt-3',
               )}
             >
-              <div className="mb-2 px-2 font-ds-mono text-ds-mono-sm uppercase text-text-muted">
+              <div className="mb-2 px-2 font-ds-mono text-ds-mono-sm uppercase text-ds-neutral-100">
                 {section.label}
               </div>
               <div
@@ -1013,14 +1081,16 @@ function LibrariesMenuContent({
   const columns = getLibraryCategoryColumns()
 
   const allLibraries = (
-    <button
+    <Button
       type="button"
       onClick={() => {
         openLibraries()
         onNavigate()
       }}
+      variant="subtle-link"
+      color="gray"
       className={twMerge(
-        'group/all flex items-center gap-1.5 rounded-lg px-[9px] py-2 font-ds-mono text-ds-mono-xs uppercase tracking-wider text-text-muted transition-colors hover:text-text-primary focus:text-text-primary focus:outline-none',
+        'group/all gap-1.5 rounded-lg px-[9px] py-2 text-ds-mono-xs focus:text-text-primary focus:outline-none',
         variant === 'desktop' &&
           'min-[1120px]:gap-[7px] min-[1120px]:rounded-[10px] min-[1120px]:px-[11px] min-[1120px]:py-2.5 min-[1120px]:text-[14px]',
       )}
@@ -1038,7 +1108,7 @@ function LibrariesMenuContent({
           variant === 'desktop' && 'min-[1120px]:size-[17px]',
         )}
       />
-    </button>
+    </Button>
   )
 
   if (variant === 'mobile') {
@@ -1197,11 +1267,13 @@ function BlogMenuContent({
   const [loading, setLoading] = React.useState(true)
 
   React.useEffect(() => {
+    if (variant === 'mobile') {
+      setShouldLoad(true)
+      return
+    }
+
     const root = rootRef.current
-    const triggerWrap =
-      variant === 'desktop'
-        ? root?.closest<HTMLElement>('.ts-mega-trigger-wrap')
-        : null
+    const triggerWrap = root?.closest<HTMLElement>('.ts-mega-trigger-wrap')
     const target = triggerWrap ?? root
     if (!target) return
 
@@ -1248,12 +1320,12 @@ function BlogMenuContent({
       )}
     >
       <section>
-        <div className="mb-3 px-1 font-ds-mono text-ds-mono-xs uppercase tracking-wider text-text-muted">
+        <div className="mb-3 px-1 font-ds-mono text-ds-mono-xs uppercase tracking-wider text-ds-neutral-100">
           Blog &amp; Release Notes
         </div>
         <div
           className={twMerge(
-            'grid gap-3',
+            'grid gap-4',
             variant === 'desktop' ? 'grid-cols-3' : 'grid-cols-1',
           )}
         >
@@ -1270,10 +1342,15 @@ function BlogMenuContent({
                 </div>
               ))
             : posts.map((post) => (
-                <BlogMenuCard
+                <BlogPostCard
                   key={post.slug}
                   post={post}
                   onNavigate={onNavigate}
+                  className={
+                    variant === 'mobile'
+                      ? 'mobile-mega-menu-enter-item'
+                      : undefined
+                  }
                 />
               ))}
         </div>
@@ -1281,7 +1358,7 @@ function BlogMenuContent({
 
       {aboutSection && aboutSection.items.length > 0 ? (
         <section className="border-t border-border-subtle pt-4">
-          <div className="mb-2 px-1 font-ds-mono text-ds-mono-xs uppercase tracking-wider text-text-muted">
+          <div className="mb-2 px-1 font-ds-mono text-ds-mono-xs uppercase tracking-wider text-ds-neutral-100">
             {aboutSection.label}
           </div>
           <div
@@ -1305,57 +1382,6 @@ function BlogMenuContent({
   )
 }
 
-function BlogMenuCard({
-  post,
-  onNavigate,
-}: {
-  post: RecentPost
-  onNavigate: () => void
-}) {
-  return (
-    <Link
-      to="/blog/$"
-      params={{ _splat: post.slug } as never}
-      onClick={onNavigate}
-      preload="intent"
-      className="group/post flex flex-col gap-2.5 rounded-xl p-2 transition-colors hover:bg-surface-state-hover"
-    >
-      {post.headerImage ? (
-        <div className="aspect-video w-full overflow-hidden rounded-lg border border-border-subtle">
-          <img
-            src={getOptimizedImageUrl(post.headerImage, {
-              fit: 'cover',
-              format: 'auto',
-              quality: 80,
-              width: 640,
-            })}
-            alt=""
-            loading="lazy"
-            decoding="async"
-            className="h-full w-full object-cover"
-          />
-        </div>
-      ) : (
-        <CoverFallback
-          slug={post.slug}
-          className="aspect-video w-full rounded-lg"
-        />
-      )}
-      <div className="flex flex-col gap-1 px-0.5">
-        <div className="line-clamp-1 font-ds-display text-ds-heading-5 text-text-primary">
-          {post.title}
-        </div>
-        <p className="line-clamp-2 text-ds-body-xs text-text-secondary">
-          {post.excerpt}
-        </p>
-        <div className="mt-0.5 font-ds-mono text-ds-mono-xs text-text-muted">
-          {formatAuthors(post.authors)} · {formatPublishedDate(post.published)}
-        </div>
-      </div>
-    </Link>
-  )
-}
-
 function MerchMenuContent({
   onNavigate,
   variant,
@@ -1467,7 +1493,10 @@ function MerchMenuContent({
         to="/shop"
         onClick={onNavigate}
         preload="intent"
-        className="mx-auto inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 font-ds-mono text-ds-mono-xs uppercase tracking-wider text-text-secondary transition-colors hover:text-text-primary focus:text-text-primary focus:outline-none"
+        className={twMerge(
+          'mx-auto inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 font-ds-mono text-ds-mono-xs uppercase tracking-wider text-text-secondary transition-colors hover:text-text-primary focus:text-text-primary focus:outline-none',
+          variant === 'mobile' && 'mobile-mega-menu-enter-item',
+        )}
       >
         View all
         <ArrowRight className="size-3.5" />
@@ -1492,7 +1521,7 @@ function MerchProductLink({
       params={{ handle: product.handle }}
       onClick={onNavigate}
       preload="intent"
-      className="group/merch block overflow-hidden rounded-xl border border-border-subtle bg-background-subtle transition-colors hover:border-border-strong focus:outline-none focus-visible:border-border-strong"
+      className="mobile-mega-menu-enter-item group/merch block overflow-hidden rounded-xl border border-border-subtle bg-background-subtle transition-colors hover:border-border-strong focus:outline-none focus-visible:border-border-strong"
       title={`${product.title} · ${formatMoney(price.amount, price.currencyCode)}`}
     >
       <div className="aspect-square w-full overflow-hidden">
@@ -1634,6 +1663,9 @@ function MenuItemLink({
       }}
       variant={variant}
       compact={compact}
+      className={
+        variant === 'mobile' ? 'mobile-mega-menu-enter-item' : undefined
+      }
     />
   )
 }
@@ -1681,19 +1713,19 @@ function SocialStack() {
           type="button"
           aria-label="TanStack social channels"
           title="Social channels"
-          className="inline-flex h-9 items-center px-0"
+          className="group/social inline-flex h-8 items-center px-0"
         >
           <span className="relative inline-flex items-center">
             {stackTop.map(({ label, Icon }, i) => (
               <span
                 key={label}
                 className={twMerge(
-                  'inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-600 shadow-sm transition-transform dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300',
+                  'inline-flex h-8 w-8 items-center justify-center rounded-full border border-border-default bg-background-default text-icon-default shadow-sm transition-[transform,color,background-color] group-hover/social:text-text-primary',
                   i > 0 && '-ml-3',
                 )}
                 style={{ zIndex: stackTop.length - i }}
               >
-                <Icon className="h-3 w-3" />
+                <Icon className="size-4" />
               </span>
             ))}
           </span>
@@ -1708,7 +1740,7 @@ function SocialStack() {
               rel="noopener noreferrer"
               aria-label={`TanStack on ${label}`}
             >
-              <Icon className="h-3.5 w-3.5" />
+              <Icon className="size-4" />
               <span>{label}</span>
             </a>
           </DropdownItem>
diff --git a/src/components/NavbarAuthControls.tsx b/src/components/NavbarAuthControls.tsx
index 01d0d13ca..ef3b652c6 100644
--- a/src/components/NavbarAuthControls.tsx
+++ b/src/components/NavbarAuthControls.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { User } from '@phosphor-icons/react'
+import { SignIn } from '@phosphor-icons/react'
 import { Link, useNavigate } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
 import {
@@ -46,8 +46,8 @@ export function NavbarAuthControls({ className }: NavbarAuthControlsProps) {
         className,
       )}
     >
-      <User className="w-3.5 h-3.5" />
       <span className="hidden min-[430px]:inline">Log In</span>
+      <SignIn className="size-4" weight="bold" />
     </Link>
   )
 
diff --git a/src/components/NavbarCartButton.tsx b/src/components/NavbarCartButton.tsx
index 26d43da87..1ac831273 100644
--- a/src/components/NavbarCartButton.tsx
+++ b/src/components/NavbarCartButton.tsx
@@ -13,8 +13,8 @@ const badgeClasses = twMerge(
 
 const buttonClasses = twMerge(
   'relative flex items-center justify-center',
-  'h-9 w-9 rounded-lg transition-colors',
-  'hover:bg-gray-500/10 text-gray-700 dark:text-gray-300',
+  'h-8 w-8 rounded-md border-0 p-0 shadow-none transition-colors',
+  'text-icon-default hover:bg-surface-state-hover hover:text-text-primary',
 )
 
 /**
@@ -57,7 +57,7 @@ export function NavbarCartButton() {
         aria-label={label}
         className={buttonClasses}
       >
-        <ShoppingCart className="w-4 h-4" />
+        <ShoppingCart className="size-[18px]" weight="bold" />
         {badge}
       </button>
     )
@@ -66,7 +66,7 @@ export function NavbarCartButton() {
   // Everywhere else: navigate to the cart page
   return (
     <Link to="/shop/cart" aria-label={label} className={buttonClasses}>
-      <ShoppingCart className="w-4 h-4" />
+      <ShoppingCart className="size-[18px]" weight="bold" />
       {badge}
     </Link>
   )
diff --git a/src/components/OpenSourceStats.tsx b/src/components/OpenSourceStats.tsx
index 44005cf8d..c07aa20eb 100644
--- a/src/components/OpenSourceStats.tsx
+++ b/src/components/OpenSourceStats.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
-import { Download, Star, TrendUp } from '@phosphor-icons/react'
+import { CalendarDots, DownloadSimple, Star } from '@phosphor-icons/react'
 import { type Library } from '~/libraries'
 import {
   homepageNpmStatsSummaryQuery,
@@ -97,7 +97,7 @@ export default function OssStats({
   if (npmLoading || hasNpmDownloads) {
     items.push({
       key: 'total',
-      icon: <TrendUp weight="regular" />,
+      icon: <DownloadSimple weight="regular" />,
       value: hasNpmDownloads ? formatCompact(npmDownloads) : '',
       placeholder: '00.0B',
       label: 'Total Downloads',
@@ -107,7 +107,7 @@ export default function OssStats({
   if (weeklyLoading || hasWeeklyDownloads) {
     items.push({
       key: 'weekly',
-      icon: <Download weight="regular" />,
+      icon: <CalendarDots weight="regular" />,
       value: hasWeeklyDownloads ? weeklyDownloads.toLocaleString() : '',
       placeholder: '00,000,000',
       label: 'Weekly Downloads',
diff --git a/src/components/PartnersSection.tsx b/src/components/PartnersSection.tsx
index cfbc91b7e..76544efe6 100644
--- a/src/components/PartnersSection.tsx
+++ b/src/components/PartnersSection.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { PartnersGrid } from './PartnersGrid'
 import { PartnershipCallout } from './PartnershipCallout'
-import { Button } from '~/ui'
 import { Link } from '@tanstack/react-router'
+import { ArrowRight } from '@phosphor-icons/react'
+import { Button } from '~/components/ds/ui'
 
 type PartnersSectionProps = {
   title?: string
@@ -22,7 +23,10 @@ export function PartnersSection({
         {showPreviousLink ? (
           <div className="flex justify-center mt-6">
             <Link to="/partners" search={{ status: 'inactive' }}>
-              <Button as="span">View Previous Partners</Button>
+              <Button as="span" variant="subtle-link" color="gray">
+                View Previous Partners
+                <ArrowRight />
+              </Button>
             </Link>
           </div>
         ) : null}
diff --git a/src/components/PartnersSponsorsSection.tsx b/src/components/PartnersSponsorsSection.tsx
index 2b7f91882..1cc4acd6c 100644
--- a/src/components/PartnersSponsorsSection.tsx
+++ b/src/components/PartnersSponsorsSection.tsx
@@ -62,8 +62,9 @@ export function PartnersSponsorsContent({
       />
       <div className="mt-6 flex justify-center">
         <Link to="/partners" search={{ status: 'inactive' }}>
-          <Button as="span" variant="secondary">
+          <Button as="span" variant="subtle-link" color="gray">
             View Previous Partners
+            <ArrowRight />
           </Button>
         </Link>
       </div>
diff --git a/src/components/SearchButton.tsx b/src/components/SearchButton.tsx
index c050a3530..69ef72edd 100644
--- a/src/components/SearchButton.tsx
+++ b/src/components/SearchButton.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { Command, MagnifyingGlass } from '@phosphor-icons/react'
+import { Command, MagnifyingGlass, Sparkle } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
-import { Button } from '~/ui'
+import { Button, Tooltip } from '~/ui'
 import { useSearchContext } from '~/contexts/SearchContext'
 
 interface SearchButtonProps {
@@ -9,16 +9,6 @@ interface SearchButtonProps {
   iconOnly?: boolean
 }
 
-function AiGlyph() {
-  return (
-    <span className="relative flex h-5 w-5 items-center justify-center">
-      <span className="text-xs font-black leading-none tracking-normal">
-        AI
-      </span>
-    </span>
-  )
-}
-
 export function SearchButton({
   className,
   iconOnly = false,
@@ -38,12 +28,15 @@ export function SearchButton({
       title="Search"
       className={twMerge(
         iconOnly
-          ? 'h-7 w-7 rounded-md p-0'
+          ? 'h-8 w-8 rounded-md border-0 p-0 text-icon-default shadow-none hover:bg-surface-state-hover hover:text-text-primary'
           : 'gap-2 bg-gray-500/5 dark:bg-gray-500/30',
         className,
       )}
     >
-      <MagnifyingGlass className="w-3.5 h-3.5" />
+      <MagnifyingGlass
+        className={iconOnly ? 'size-[18px]' : 'size-3.5'}
+        weight={iconOnly ? 'bold' : undefined}
+      />
       {iconOnly ? (
         <span className="sr-only">Search</span>
       ) : (
@@ -109,26 +102,28 @@ export function AiDockButton({ className }: { className?: string }) {
   }
 
   return (
-    <Button
-      type="button"
-      onClick={handleClick}
-      onPointerEnter={handlePointerEnter}
-      onPointerLeave={handlePointerLeave}
-      aria-label={isAiDockOpen ? 'Close AI panel' : 'Open AI panel'}
-      aria-haspopup="dialog"
-      aria-pressed={isAiDockOpen}
-      variant="ghost"
-      size="icon-sm"
-      title="Ask AI"
-      className={twMerge(
-        'h-7 w-8 rounded-md p-0 bg-gray-500/5 dark:bg-gray-500/30',
-        isAiDockOpen &&
-          'bg-cyan-500/10 text-cyan-700 dark:bg-cyan-400/15 dark:text-cyan-300 border-cyan-500/20 dark:border-cyan-300/20',
-        className,
-      )}
-    >
-      <AiGlyph />
-      <span className="sr-only">Ask AI</span>
-    </Button>
+    <Tooltip content="Ask AI" side="bottom" delayDuration={0}>
+      <Button
+        type="button"
+        onClick={handleClick}
+        onPointerEnter={handlePointerEnter}
+        onPointerLeave={handlePointerLeave}
+        aria-label={isAiDockOpen ? 'Close AI panel' : 'Open AI panel'}
+        aria-haspopup="dialog"
+        aria-pressed={isAiDockOpen}
+        variant="icon"
+        color="gray"
+        size="icon-sm"
+        className={twMerge(
+          'h-8 w-8 rounded-md border-0 p-0 text-icon-default shadow-none hover:bg-surface-state-hover hover:text-text-primary',
+          isAiDockOpen &&
+            'bg-cyan-500/10 text-cyan-700 dark:bg-cyan-400/15 dark:text-cyan-300',
+          className,
+        )}
+      >
+        <Sparkle aria-hidden="true" className="size-[18px]" weight="bold" />
+        <span className="sr-only">Ask AI</span>
+      </Button>
+    </Tooltip>
   )
 }
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index 0eb23bcf0..350527c36 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -22,7 +22,7 @@ export function ThemeToggle() {
 
   const getIconClassName = (icon: typeof activeIcon) =>
     [
-      'col-start-1 row-start-1 h-3.5 w-3.5 shrink-0 transition-opacity motion-reduce:transition-none',
+      'col-start-1 row-start-1 size-[18px] shrink-0 transition-opacity motion-reduce:transition-none',
       activeIcon === icon ? 'opacity-100' : 'opacity-0',
     ].join(' ')
 
@@ -35,15 +35,15 @@ export function ThemeToggle() {
       onClick={handleToggleMode}
       aria-label={`Theme: ${label}. Switch to ${nextLabel} mode.`}
       title={`Theme: ${label}. Switch to ${nextLabel} mode.`}
-      className="h-7 w-7 shrink-0 rounded-md p-0 leading-none"
+      className="h-8 w-8 shrink-0 rounded-md border-0 p-0 leading-none text-icon-default shadow-none hover:bg-surface-state-hover hover:text-text-primary"
     >
       <span
         aria-hidden="true"
-        className="grid h-3.5 w-3.5 shrink-0 place-items-center"
+        className="grid size-[18px] shrink-0 place-items-center"
       >
-        <SunHorizon className={getIconClassName('auto')} />
-        <Sun className={getIconClassName('light')} />
-        <Moon className={getIconClassName('dark')} />
+        <SunHorizon className={getIconClassName('auto')} weight="bold" />
+        <Sun className={getIconClassName('light')} weight="bold" />
+        <Moon className={getIconClassName('dark')} weight="bold" />
       </span>
     </Button>
   )
diff --git a/src/components/application-builder/useApplicationBuilder.tsx b/src/components/application-builder/useApplicationBuilder.tsx
index 101bb5548..b93a4371c 100644
--- a/src/components/application-builder/useApplicationBuilder.tsx
+++ b/src/components/application-builder/useApplicationBuilder.tsx
@@ -235,7 +235,8 @@ export function useApplicationBuilder({
     migrationRepositoryUrl,
   )
   const showMigrationRepositoryInput =
-    isNextJsMigrationInput(input) || normalizedMigrationRepositoryUrl.length > 0
+    context !== 'home' &&
+    (isNextJsMigrationInput(input) || normalizedMigrationRepositoryUrl.length > 0)
   const hasMigrationRepositoryUrlError =
     normalizedMigrationRepositoryUrl.length > 0 &&
     !isValidMigrationRepositoryUrl(normalizedMigrationRepositoryUrl)
diff --git a/src/components/ds/BrandAssets.tsx b/src/components/ds/BrandAssets.tsx
index 1f5edb7cf..2ec708be2 100644
--- a/src/components/ds/BrandAssets.tsx
+++ b/src/components/ds/BrandAssets.tsx
@@ -9,6 +9,16 @@ interface LogoAsset {
   onDark: boolean
 }
 
+interface GalleryAsset {
+  name: string
+  category: string
+  preview: string
+  alt: string
+  onDark: boolean
+  imgClass: string
+  downloads: Array<{ format: string; href: string }>
+}
+
 const TONE_LABEL: Record<LogoTone, string> = {
   black: 'Black',
   charcoal: 'Charcoal',
@@ -36,94 +46,155 @@ const EMBLEM: Array<LogoAsset> = [
   { tone: 'white', file: 'tanstack-emblem-white.svg', onDark: true },
 ]
 
-function LogoCard({
-  asset,
-  lockup,
-  imgClass,
-}: {
-  asset: LogoAsset
-  lockup: string
-  imgClass: string
-}) {
-  const src = `/images/brand/${asset.file}`
+function brandGalleryAssets(
+  lockup: string,
+  assets: Array<LogoAsset>,
+  imgClass: string,
+): Array<GalleryAsset> {
+  return assets.map((asset) => {
+    const src = `/images/brand/${asset.file}`
+    const tone = TONE_LABEL[asset.tone]
+
+    return {
+      name: `${lockup} · ${tone}`,
+      category: 'Brand logo',
+      preview: src,
+      alt: `TanStack ${lockup.toLowerCase()} logo — ${tone}`,
+      onDark: asset.onDark,
+      imgClass,
+      downloads: [{ format: 'SVG', href: src }],
+    }
+  })
+}
+
+const SOCIAL_LOGOS: Array<GalleryAsset> = [
+  ['Mark · Dark', 'mark-dark'],
+  ['Mark · Light', 'mark-light'],
+  ['Stacked · Dark', 'stacked-dark'],
+  ['Stacked · Light', 'stacked-light'],
+].map(([name, file]) => ({
+  name,
+  category: 'Social logo',
+  preview: `/images/brand/social/${file}.svg`,
+  alt: `TanStack social logo — ${name}`,
+  onDark: false,
+  imgClass: 'h-full w-full',
+  downloads: [
+    { format: 'SVG', href: `/images/brand/social/${file}.svg` },
+    { format: 'PNG · 2×', href: `/images/brand/social/${file}@2x.png` },
+  ],
+}))
+
+const FAVICONS: Array<GalleryAsset> = [
+  {
+    name: 'Favicon · Light mode',
+    category: 'Favicon',
+    preview: '/favicon-light.svg',
+    alt: 'TanStack favicon for light browser themes',
+    onDark: false,
+    imgClass: 'h-24 w-24',
+    downloads: [{ format: 'SVG', href: '/favicon-light.svg' }],
+  },
+  {
+    name: 'Favicon · Dark mode',
+    category: 'Favicon',
+    preview: '/favicon-dark.svg',
+    alt: 'TanStack favicon for dark browser themes',
+    onDark: true,
+    imgClass: 'h-24 w-24',
+    downloads: [{ format: 'SVG', href: '/favicon-dark.svg' }],
+  },
+]
+
+const BRAND_LOGO_FORMATS = [
+  {
+    name: 'Stacked',
+    assets: brandGalleryAssets('Stacked', STACKED, 'h-20 max-w-full'),
+  },
+  {
+    name: 'Landscape',
+    assets: brandGalleryAssets('Landscape', LANDSCAPE, 'h-10 max-w-full'),
+  },
+  {
+    name: 'Emblem',
+    assets: brandGalleryAssets('Emblem', EMBLEM, 'h-16 max-w-full'),
+  },
+]
 
+function AssetCard({ asset }: { asset: GalleryAsset }) {
   return (
-    <div className="overflow-hidden rounded-xl border border-border-default bg-background-surface">
+    <article className="group overflow-hidden rounded-xl border border-border-default bg-background-surface">
       <div
-        className={`flex items-center justify-center px-8 py-12 ${
+        className={`relative flex aspect-square items-center justify-center overflow-hidden p-8 ${
           asset.onDark ? 'bg-ds-neutral-500' : 'bg-ds-neutral-100'
         }`}
       >
-        <img
-          src={src}
-          alt={`TanStack ${lockup} logo — ${TONE_LABEL[asset.tone]}`}
-          className={`w-auto max-w-full ${imgClass}`}
-        />
+        <img src={asset.preview} alt={asset.alt} className={asset.imgClass} />
+        <div className="absolute inset-x-0 bottom-0 flex justify-end gap-2 bg-gradient-to-t from-black/45 to-transparent p-3 pt-10 opacity-100 transition-opacity duration-150 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100">
+          {asset.downloads.map((download) => (
+            <a
+              key={download.href}
+              href={download.href}
+              download
+              className="inline-flex items-center gap-1.5 rounded-md border border-border-default bg-background-surface px-3 py-2 text-xs font-medium text-text-primary hover:bg-background-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus"
+            >
+              <DownloadSimple size={14} aria-hidden="true" />
+              {download.format}
+            </a>
+          ))}
+        </div>
       </div>
-      <div className="flex items-center justify-between gap-3 border-t border-border-default px-4 py-3">
-        <span className="font-ds-mono text-xs text-text-secondary">
-          {TONE_LABEL[asset.tone]}
-        </span>
-        <a
-          href={src}
-          download
-          className="inline-flex items-center gap-1.5 rounded-md border border-border-default px-2.5 py-1.5 text-xs font-medium text-text-secondary transition-colors hover:bg-background-subtle hover:text-text-primary"
-        >
-          <DownloadSimple size={14} />
-          SVG
-        </a>
+      <div className="border-t border-border-default px-4 py-3">
+        <div className="text-sm font-medium text-text-primary">
+          {asset.name}
+        </div>
+        <p className="mt-0.5 font-ds-mono text-[10px] uppercase tracking-wider text-text-muted">
+          {asset.category}
+        </p>
       </div>
-    </div>
+    </article>
   )
 }
 
-export function CurrentBrandAssets() {
+export function BrandAssetGallery() {
   return (
     <>
-      <DsSection
-        title="Stacked"
-        description="Emblem over the wordmark — the primary lockup."
-      >
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-          {STACKED.map((asset) => (
-            <LogoCard
-              key={asset.file}
-              asset={asset}
-              lockup="stacked"
-              imgClass="h-20"
-            />
-          ))}
-        </div>
-      </DsSection>
+      <div className="space-y-8">
+        {BRAND_LOGO_FORMATS.map((format) => (
+          <section key={format.name} className="space-y-3">
+            <h2 className="text-ds-heading-4 font-semibold text-text-primary">
+              {format.name}
+            </h2>
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              {format.assets.map((asset) => (
+                <AssetCard
+                  key={`${asset.category}-${asset.name}`}
+                  asset={asset}
+                />
+              ))}
+            </div>
+          </section>
+        ))}
+      </div>
 
       <DsSection
-        title="Landscape"
-        description="Emblem beside the wordmark — for headers and horizontal space."
+        title="Favicons"
+        description="Theme-aware marks for browser tabs and compact product surfaces."
       >
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {LANDSCAPE.map((asset) => (
-            <LogoCard
-              key={asset.file}
-              asset={asset}
-              lockup="landscape"
-              imgClass="h-10"
-            />
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          {FAVICONS.map((asset) => (
+            <AssetCard key={`${asset.category}-${asset.name}`} asset={asset} />
           ))}
         </div>
       </DsSection>
 
       <DsSection
-        title="Emblem"
-        description="The palm-island mark on its own — for avatars, favicons, and tight squares where the wordmark would not read."
+        title="Social logos"
+        description="Square artwork for avatars, profile images, and social posts."
       >
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-          {EMBLEM.map((asset) => (
-            <LogoCard
-              key={asset.file}
-              asset={asset}
-              lockup="emblem"
-              imgClass="h-16"
-            />
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          {SOCIAL_LOGOS.map((asset) => (
+            <AssetCard key={`${asset.category}-${asset.name}`} asset={asset} />
           ))}
         </div>
       </DsSection>
@@ -140,3 +211,5 @@ export function CurrentBrandAssets() {
     </>
   )
 }
+
+export { BrandAssetGallery as CurrentBrandAssets }
diff --git a/src/components/ds/DsKit.tsx b/src/components/ds/DsKit.tsx
index 33877c0c3..e4fe7d1b4 100644
--- a/src/components/ds/DsKit.tsx
+++ b/src/components/ds/DsKit.tsx
@@ -3,6 +3,31 @@ import { twMerge } from 'tailwind-merge'
 import { Check, CaretDown, Code, Copy } from '@phosphor-icons/react'
 import { copyTextToClipboard } from '~/utils/browser-effects'
 
+const descriptionStyles = {
+  page: 'mt-3 max-w-2xl text-ds-body-md text-text-secondary',
+  section: 'mt-1 max-w-2xl text-ds-body-sm text-text-secondary',
+  preview: 'truncate text-ds-body-sm text-text-muted',
+} as const
+
+/** Semantic explanatory copy used throughout the design-system catalog. */
+export function DsDescription({
+  children,
+  className,
+  role,
+}: {
+  children: React.ReactNode
+  className?: string
+  role: keyof typeof descriptionStyles
+}) {
+  return (
+    <p
+      className={[descriptionStyles[role], className].filter(Boolean).join(' ')}
+    >
+      {children}
+    </p>
+  )
+}
+
 /**
  * Presentational building blocks for the Design System pages (`/ds`).
  *
@@ -28,9 +53,7 @@ export function DsPage({
           {title}
         </h1>
         {description ? (
-          <p className="mt-3 max-w-2xl text-ds-body-md text-text-secondary">
-            {description}
-          </p>
+          <DsDescription role="page">{description}</DsDescription>
         ) : null}
       </header>
       <div className="space-y-12">{children}</div>
@@ -54,9 +77,7 @@ export function DsSection({
           {title}
         </h2>
         {description ? (
-          <p className="mt-1 max-w-2xl text-ds-body-sm text-text-muted">
-            {description}
-          </p>
+          <DsDescription role="section">{description}</DsDescription>
         ) : null}
       </div>
       {children}
@@ -110,9 +131,7 @@ export function ComponentPreview({
               </div>
             ) : null}
             {description ? (
-              <div className="truncate text-ds-body-sm text-text-muted">
-                {description}
-              </div>
+              <DsDescription role="preview">{description}</DsDescription>
             ) : null}
           </div>
           {code ? (
diff --git a/src/components/ds/ds-nav.ts b/src/components/ds/ds-nav.ts
index 766c0a641..45a443bd6 100644
--- a/src/components/ds/ds-nav.ts
+++ b/src/components/ds/ds-nav.ts
@@ -45,6 +45,7 @@ export const dsNav: Array<DsNavSection> = [
       { label: 'Inputs', to: '/ds/inputs' },
       { label: 'Dropdown', to: '/ds/dropdown' },
       { label: 'Avatar', to: '/ds/avatar' },
+      { label: 'Maintainers', to: '/ds/maintainers' },
       { label: 'Spinner', to: '/ds/spinner' },
       { label: 'Collapsible', to: '/ds/collapsible' },
       { label: 'Breadcrumbs', to: '/ds/breadcrumbs' },
diff --git a/src/components/ds/ui/BlogPostCard.tsx b/src/components/ds/ui/BlogPostCard.tsx
new file mode 100644
index 000000000..e897c5922
--- /dev/null
+++ b/src/components/ds/ui/BlogPostCard.tsx
@@ -0,0 +1,63 @@
+import { Link } from '@tanstack/react-router'
+import { twMerge } from 'tailwind-merge'
+import { CoverFallback } from '~/components/CoverFallback'
+import { formatAuthors, formatPublishedDate } from '~/utils/blog-format'
+import type { RecentPost } from '~/utils/blog.functions'
+import { getOptimizedImageUrl } from '~/utils/optimizedImage'
+
+export function BlogPostCard({
+  className,
+  onNavigate,
+  post,
+}: {
+  className?: string
+  onNavigate?: () => void
+  post: RecentPost
+}) {
+  return (
+    <Link
+      to="/blog/$"
+      params={{ _splat: post.slug } as never}
+      onClick={onNavigate}
+      preload="intent"
+      activeProps={{ className: 'bg-surface-state-pressed' }}
+      className={twMerge(
+        'group/post flex flex-col gap-3 rounded-xl corner-squircle p-3 transition-colors hover:bg-surface-state-hover focus-visible:bg-surface-state-hover focus-visible:outline-none',
+        className,
+      )}
+    >
+      {post.headerImage ? (
+        <div className="aspect-video w-full overflow-hidden rounded-lg corner-squircle border border-border-subtle">
+          <img
+            src={getOptimizedImageUrl(post.headerImage, {
+              fit: 'cover',
+              format: 'auto',
+              quality: 80,
+              width: 640,
+            })}
+            alt=""
+            loading="lazy"
+            decoding="async"
+            className="h-full w-full object-cover"
+          />
+        </div>
+      ) : (
+        <CoverFallback
+          slug={post.slug}
+          className="aspect-video w-full rounded-lg corner-squircle"
+        />
+      )}
+      <div className="flex flex-col gap-1 px-1 pb-1">
+        <div className="line-clamp-1 font-ds-display text-ds-heading-5 text-text-primary">
+          {post.title}
+        </div>
+        <p className="line-clamp-2 text-ds-body-xs text-text-secondary">
+          {post.excerpt}
+        </p>
+        <div className="mt-0.5 font-ds-mono text-ds-mono-xs text-text-muted">
+          {formatAuthors(post.authors)} · {formatPublishedDate(post.published)}
+        </div>
+      </div>
+    </Link>
+  )
+}
diff --git a/src/components/ds/ui/StatsSection.tsx b/src/components/ds/ui/StatsSection.tsx
index 6f333d125..5e488017e 100644
--- a/src/components/ds/ui/StatsSection.tsx
+++ b/src/components/ds/ui/StatsSection.tsx
@@ -201,25 +201,25 @@ function HeroStat({ iconTop, stat }: { iconTop: boolean; stat: StatItem }) {
   return (
     <span
       className={twMerge(
-        'inline-flex min-w-0 gap-3 text-ds-neutral-400',
+        'inline-flex min-w-0 gap-4 text-text-primary md:gap-3.5 xl:gap-4',
         iconTop ? 'flex-col items-start' : 'items-center',
       )}
     >
       {stat.icon ? (
-        <span className="shrink-0 text-ds-neutral-400/90 [&>svg]:size-[22px]">
+        <span className="shrink-0 text-icon-muted [&>svg]:size-6 md:[&>svg]:size-5 xl:[&>svg]:size-6">
           {stat.icon}
         </span>
       ) : null}
-      <span className="min-w-0">
+      <span className="flex min-w-0 items-center gap-4 whitespace-nowrap md:gap-3.5 xl:gap-4">
         <span
-          className="block font-ds-display text-xl font-black leading-none"
+          className="font-ds-display text-ds-heading-3 font-bold leading-none md:text-[21px] xl:text-ds-heading-3"
           style={{ fontVariantNumeric: 'tabular-nums' }}
         >
           <StatValue placeholder={stat.placeholder} valueRef={stat.valueRef}>
             {stat.value}
           </StatValue>
         </span>
-        <span className="mt-2 block font-ds-mono text-ds-mono-caps-xs font-bold uppercase text-ds-neutral-400/90">
+        <span className="font-ds-mono text-ds-mono-caps-xs font-medium uppercase tracking-[1.75px] text-text-secondary md:text-[9.5px] md:tracking-[1.5px] xl:text-ds-mono-caps-xs xl:tracking-[1.75px]">
           {stat.label}
         </span>
       </span>
@@ -269,7 +269,7 @@ export function StatsSection({
         className={twMerge(
           layout === 'stacked'
             ? 'flex flex-col items-start gap-5'
-            : 'flex flex-wrap items-center gap-x-8 gap-y-5',
+            : 'flex flex-col items-center gap-4 md:flex-row md:flex-wrap md:justify-center md:gap-x-3.5 md:gap-y-5 xl:gap-x-9',
           className,
         )}
       >
diff --git a/src/components/ds/ui/index.tsx b/src/components/ds/ui/index.tsx
index ce144ea44..af7a951d8 100644
--- a/src/components/ds/ui/index.tsx
+++ b/src/components/ds/ui/index.tsx
@@ -25,6 +25,7 @@ type ButtonVariant =
   | 'ghost'
   | 'icon'
   | 'link'
+  | 'subtle-link'
   | 'gradient'
 type ButtonColor =
   | 'neutral'
@@ -68,46 +69,59 @@ type ButtonInnerProps = ButtonOwnProps & Record<string, unknown>
 // near-black on light, white on dark — via the inverse semantic tokens.
 const primaryColorStyles: Record<ButtonColor, string> = {
   neutral:
-    'bg-background-inverse text-text-inverse border-background-inverse hover:bg-background-inverse/90',
-  blue: 'bg-ds-blue-500 text-white border-ds-blue-500 hover:bg-ds-blue-400',
-  green: 'bg-ds-green-400 text-white border-ds-green-400 hover:bg-ds-green-300',
-  red: 'bg-ds-terracotta-400 text-white border-ds-terracotta-400 hover:bg-ds-terracotta-300',
+    'bg-background-inverse text-text-inverse border-background-inverse hover:bg-background-inverse/90 max-[899px]:bg-background-inverse/90',
+  blue: 'bg-ds-blue-500 text-white border-ds-blue-500 hover:bg-ds-blue-400 max-[899px]:bg-ds-blue-400',
+  green:
+    'bg-ds-green-400 text-white border-ds-green-400 hover:bg-ds-green-300 max-[899px]:bg-ds-green-300',
+  red: 'bg-ds-terracotta-400 text-white border-ds-terracotta-400 hover:bg-ds-terracotta-300 max-[899px]:bg-ds-terracotta-300',
   orange:
-    'bg-ds-terracotta-300 text-white border-ds-terracotta-300 hover:bg-ds-terracotta-200',
+    'bg-ds-terracotta-300 text-white border-ds-terracotta-300 hover:bg-ds-terracotta-200 max-[899px]:bg-ds-terracotta-200',
   purple:
-    'bg-ds-purple-400 text-white border-ds-purple-400 hover:bg-ds-purple-300',
-  gray: 'bg-ds-neutral-400 text-white border-ds-neutral-400 hover:bg-ds-neutral-300',
+    'bg-ds-purple-400 text-white border-ds-purple-400 hover:bg-ds-purple-300 max-[899px]:bg-ds-purple-300',
+  gray: 'bg-ds-neutral-400 text-white border-ds-neutral-400 hover:bg-ds-neutral-300 max-[899px]:bg-ds-neutral-300',
   emerald:
-    'bg-ds-green-400 text-white border-ds-green-400 hover:bg-ds-green-300',
-  cyan: 'bg-lib-start text-white border-lib-start hover:bg-lib-start/90',
+    'bg-ds-green-400 text-white border-ds-green-400 hover:bg-ds-green-300 max-[899px]:bg-ds-green-300',
+  cyan: 'bg-lib-start text-white border-lib-start hover:bg-lib-start/90 max-[899px]:bg-lib-start/90',
   yellow:
-    'bg-ds-amber-300 text-ds-neutral-500 border-ds-amber-300 hover:bg-ds-amber-200',
+    'bg-ds-amber-300 text-ds-neutral-500 border-ds-amber-300 hover:bg-ds-amber-200 max-[899px]:bg-ds-amber-200',
 }
 
 const iconColorStyles: Record<ButtonColor, string> = {
-  neutral: 'text-text-primary hover:bg-background-subtle',
-  blue: 'text-ds-blue-500 hover:bg-ds-blue-500/10',
-  green: 'text-ds-green-400 hover:bg-ds-green-400/10',
-  red: 'text-ds-terracotta-400 hover:bg-ds-terracotta-400/10',
-  orange: 'text-ds-terracotta-300 hover:bg-ds-terracotta-300/10',
-  purple: 'text-ds-purple-400 hover:bg-ds-purple-400/10',
-  gray: 'text-text-muted hover:bg-background-subtle',
-  emerald: 'text-ds-green-400 hover:bg-ds-green-400/10',
-  cyan: 'text-lib-start hover:bg-lib-start/10',
-  yellow: 'text-ds-amber-400 hover:bg-ds-amber-400/10',
+  neutral:
+    'text-text-primary hover:bg-surface-state-hover max-[899px]:bg-surface-state-hover',
+  blue: 'text-ds-blue-500 hover:bg-ds-blue-500/10 max-[899px]:bg-ds-blue-500/10',
+  green:
+    'text-ds-green-400 hover:bg-ds-green-400/10 max-[899px]:bg-ds-green-400/10',
+  red: 'text-ds-terracotta-400 hover:bg-ds-terracotta-400/10 max-[899px]:bg-ds-terracotta-400/10',
+  orange:
+    'text-ds-terracotta-300 hover:bg-ds-terracotta-300/10 max-[899px]:bg-ds-terracotta-300/10',
+  purple:
+    'text-ds-purple-400 hover:bg-ds-purple-400/10 max-[899px]:bg-ds-purple-400/10',
+  gray: 'text-text-muted hover:bg-surface-state-hover max-[899px]:bg-surface-state-hover max-[899px]:text-text-primary',
+  emerald:
+    'text-ds-green-400 hover:bg-ds-green-400/10 max-[899px]:bg-ds-green-400/10',
+  cyan: 'text-lib-start hover:bg-lib-start/10 max-[899px]:bg-lib-start/10',
+  yellow:
+    'text-ds-amber-400 hover:bg-ds-amber-400/10 max-[899px]:bg-ds-amber-400/10',
 }
 
 const linkColorStyles: Record<ButtonColor, string> = {
-  neutral: 'text-text-primary hover:text-text-primary/70',
-  blue: 'text-ds-blue-500 hover:text-ds-blue-400',
-  green: 'text-ds-green-400 hover:text-ds-green-300',
-  red: 'text-ds-terracotta-400 hover:text-ds-terracotta-300',
-  orange: 'text-ds-terracotta-300 hover:text-ds-terracotta-200',
-  purple: 'text-ds-purple-400 hover:text-ds-purple-300',
-  gray: 'text-text-secondary hover:text-text-primary',
-  emerald: 'text-ds-green-400 hover:text-ds-green-300',
-  cyan: 'text-lib-start hover:text-lib-start/80',
-  yellow: 'text-ds-amber-400 hover:text-ds-amber-300',
+  neutral:
+    'text-text-primary hover:text-text-primary/70 max-[899px]:text-text-primary/70',
+  blue: 'text-ds-blue-500 hover:text-ds-blue-400 max-[899px]:text-ds-blue-400',
+  green:
+    'text-ds-green-400 hover:text-ds-green-300 max-[899px]:text-ds-green-300',
+  red: 'text-ds-terracotta-400 hover:text-ds-terracotta-300 max-[899px]:text-ds-terracotta-300',
+  orange:
+    'text-ds-terracotta-300 hover:text-ds-terracotta-200 max-[899px]:text-ds-terracotta-200',
+  purple:
+    'text-ds-purple-400 hover:text-ds-purple-300 max-[899px]:text-ds-purple-300',
+  gray: 'text-text-secondary hover:text-text-primary max-[899px]:text-text-primary',
+  emerald:
+    'text-ds-green-400 hover:text-ds-green-300 max-[899px]:text-ds-green-300',
+  cyan: 'text-lib-start hover:text-lib-start/80 max-[899px]:text-lib-start/80',
+  yellow:
+    'text-ds-amber-400 hover:text-ds-amber-300 max-[899px]:text-ds-amber-300',
 }
 
 // Gradient (landing-CTA) colors. Each color feeds the four --btn-grad-* vars
@@ -137,18 +151,20 @@ const gradientColorStyles: Record<ButtonColor, string> = {
 
 const variantStyles: Record<ButtonVariant, string> = {
   primary:
-    'border font-medium shadow-[0_1px_2px_0_rgba(0,0,0,0.12),inset_0_1px_0_0_rgba(255,255,255,0.18)] hover:-translate-y-px hover:shadow-[0_6px_16px_-4px_rgba(0,0,0,0.28),inset_0_1px_0_0_rgba(255,255,255,0.25)] active:translate-y-0 active:shadow-[0_1px_2px_0_rgba(0,0,0,0.12)]',
+    'border font-medium shadow-[0_1px_2px_0_rgba(0,0,0,0.12),inset_0_1px_0_0_rgba(255,255,255,0.18)] hover:-translate-y-px hover:shadow-[0_6px_16px_-4px_rgba(0,0,0,0.28),inset_0_1px_0_0_rgba(255,255,255,0.25)] max-[899px]:-translate-y-px max-[899px]:shadow-[0_6px_16px_-4px_rgba(0,0,0,0.28),inset_0_1px_0_0_rgba(255,255,255,0.25)] active:translate-y-0 active:shadow-[0_1px_2px_0_rgba(0,0,0,0.12)]',
   secondary:
-    'bg-action-secondary text-text-primary hover:bg-action-secondary-hover border-transparent font-medium shadow-sm hover:-translate-y-px hover:shadow-md active:translate-y-0',
+    'bg-action-secondary text-text-primary hover:bg-action-secondary-hover max-[899px]:bg-action-secondary-hover border-transparent font-medium shadow-sm hover:-translate-y-px hover:shadow-md max-[899px]:-translate-y-px max-[899px]:shadow-md active:translate-y-0',
   ghost:
-    'border border-border-default text-text-primary hover:bg-background-subtle hover:border-border-strong font-medium hover:shadow-sm',
+    'border border-border-default text-text-primary hover:bg-background-subtle hover:border-border-strong max-[899px]:bg-background-subtle max-[899px]:border-border-strong font-medium hover:shadow-sm max-[899px]:shadow-sm',
   icon: 'border-transparent active:scale-90',
-  link: 'border-transparent font-medium underline-offset-2 hover:underline',
+  link: 'border-transparent font-medium underline-offset-2 hover:underline max-[899px]:underline',
+  'subtle-link':
+    'border-transparent font-ds-mono uppercase tracking-wider no-underline hover:no-underline [&>svg:last-child]:size-3.5 [&>svg:last-child]:transition-transform hover:[&>svg:last-child]:translate-x-0.5 max-[899px]:[&>svg:last-child]:translate-x-0.5 motion-reduce:[&>svg:last-child]:transition-none',
   // Library-landing primary CTA: accent→bright gradient with an inner highlight,
   // a colored glow, ink text, and a hover lift. Colors come from
   // gradientColorStyles (the --btn-grad-* vars).
   gradient:
-    'border-transparent font-medium text-[var(--btn-grad-ink)] [background-image:linear-gradient(105deg,var(--btn-grad-accent),var(--btn-grad-bright))] shadow-[inset_-5px_-5px_7px_-5px_var(--btn-grad-tint),0_12px_35px_-6px_rgb(var(--btn-grad-glow)/0.35)] transition-[transform,box-shadow] duration-150 hover:-translate-y-0.5 hover:shadow-[inset_-5px_-5px_7px_-5px_var(--btn-grad-tint),0_18px_45px_-6px_rgb(var(--btn-grad-glow)/0.5)] active:translate-y-0 focus-visible:ring-[var(--btn-grad-bright)]',
+    'border-transparent font-medium text-[var(--btn-grad-ink)] [background-image:linear-gradient(105deg,var(--btn-grad-accent),var(--btn-grad-bright))] shadow-[inset_-5px_-5px_7px_-5px_var(--btn-grad-tint),0_12px_35px_-6px_rgb(var(--btn-grad-glow)/0.35)] transition-[transform,box-shadow] duration-150 hover:-translate-y-0.5 hover:shadow-[inset_-5px_-5px_7px_-5px_var(--btn-grad-tint),0_18px_45px_-6px_rgb(var(--btn-grad-glow)/0.5)] max-[899px]:-translate-y-0.5 max-[899px]:shadow-[inset_-5px_-5px_7px_-5px_var(--btn-grad-tint),0_18px_45px_-6px_rgb(var(--btn-grad-glow)/0.5)] active:translate-y-0 focus-visible:ring-[var(--btn-grad-bright)]',
 }
 
 const sizeStyles: Record<ButtonSize, string> = {
@@ -205,7 +221,7 @@ export const Button: ButtonComponent = React.forwardRef<
       ? primaryColorStyles[color]
       : variant === 'icon'
         ? iconColorStyles[color]
-        : variant === 'link'
+        : variant === 'link' || variant === 'subtle-link'
           ? linkColorStyles[color]
           : variant === 'gradient'
             ? gradientColorStyles[color]
@@ -240,6 +256,7 @@ type BadgeVariant =
   | 'purple'
   | 'teal'
   | 'orange'
+type BadgeRounded = 'md' | 'full'
 
 const badgeVariantStyles: Record<BadgeVariant, string> = {
   default: 'bg-background-subtle text-text-secondary',
@@ -255,16 +272,19 @@ const badgeVariantStyles: Record<BadgeVariant, string> = {
 export function Badge({
   children,
   variant = 'default',
+  rounded = 'full',
   className,
 }: {
   children: React.ReactNode
   variant?: BadgeVariant
+  rounded?: BadgeRounded
   className?: string
 }) {
   return (
     <span
       className={twMerge(
-        'inline-flex items-center rounded-full px-2 py-1 text-xs font-medium',
+        'inline-flex items-center px-2 py-1 text-xs font-medium',
+        rounded === 'full' ? 'rounded-full' : 'rounded-md',
         badgeVariantStyles[variant],
         className,
       )}
diff --git a/src/components/home/HomeCommunitySection.tsx b/src/components/home/HomeCommunitySection.tsx
index cbe1e67a9..e8221824a 100644
--- a/src/components/home/HomeCommunitySection.tsx
+++ b/src/components/home/HomeCommunitySection.tsx
@@ -1,6 +1,7 @@
 import { Link } from '@tanstack/react-router'
 import { Hydrate } from '@tanstack/react-start'
 import { visible } from '@tanstack/react-start/hydration'
+import { ArrowRight } from '@phosphor-icons/react'
 import { MaintainerCard } from '~/components/MaintainerCard'
 import { coreMaintainers } from '~/libraries/maintainers'
 import { Button } from '~/components/ds/ui'
@@ -20,12 +21,12 @@ function CommunitySkeleton() {
   return (
     <div className="space-y-24">
       <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
-        <div className="h-10 w-52 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse mb-6" />
-        <div className="grid gap-6 grid-cols-2 lg:grid-cols-3">
-          {Array.from({ length: 6 }).map((_, index) => (
+        <div className="mb-6 h-10 w-52 animate-pulse rounded corner-squircle bg-gray-200/70 dark:bg-gray-800/70" />
+        <div className="grid grid-cols-2 gap-6 lg:grid-cols-5">
+          {Array.from({ length: 10 }).map((_, index) => (
             <div
               key={`maintainer-skeleton-${index}`}
-              className="h-52 rounded-lg bg-gray-100/70 dark:bg-gray-900/60 animate-pulse"
+              className="h-52 animate-pulse rounded-lg corner-squircle bg-gray-100/70 dark:bg-gray-900/60"
             />
           ))}
         </div>
@@ -46,14 +47,20 @@ function HomeCommunityContent() {
             Core Maintainers
           </a>
         </h3>
-        <div className="grid gap-6 grid-cols-2 lg:grid-cols-3">
+        <div className="grid grid-cols-2 gap-6 lg:grid-cols-5">
           {coreMaintainers.map((maintainer) => (
             <MaintainerCard key={maintainer.github} maintainer={maintainer} />
           ))}
         </div>
         <div className="flex justify-center mt-6">
-          <Button as={Link} to="/maintainers">
+          <Button
+            as={Link}
+            to="/maintainers"
+            variant="subtle-link"
+            color="gray"
+          >
             View All Maintainers
+            <ArrowRight />
           </Button>
         </div>
       </div>
diff --git a/src/components/home/HomeNewsletterSection.tsx b/src/components/home/HomeNewsletterSection.tsx
index b26f93c4e..c2bbbafc1 100644
--- a/src/components/home/HomeNewsletterSection.tsx
+++ b/src/components/home/HomeNewsletterSection.tsx
@@ -1,35 +1,44 @@
-import { Card } from '~/components/ds/ui'
+import { EnvelopeSimple } from '@phosphor-icons/react'
 import { NewsletterSignup } from '~/components/NewsletterSignup'
 import { Footer } from '~/components/Footer'
 
 export function HomeNewsletterSection() {
   return (
     <>
-      <div className="px-4 mx-auto max-w-(--breakpoint-lg) relative">
-        <Card className="rounded-md p-8 md:p-14">
-          <div>
-            <div className="relative inline-block max-w-full">
-              <h3 id="newsletter" className="text-3xl font-bold scroll-mt-24">
-                <a
-                  href="#newsletter"
-                  className="hover:underline decoration-gray-400 dark:decoration-gray-600"
-                >
-                  Subscribe to TanStack News
-                </a>
-              </h3>
+      <section
+        aria-labelledby="newsletter"
+        className="mx-auto w-full max-w-[96rem] px-6 md:px-10"
+      >
+        <div className="corner-squircle grid overflow-hidden rounded-2xl border border-border-subtle bg-background-surface px-6 py-8 sm:p-10 lg:mt-[19px] lg:px-[76px] lg:py-[59px]">
+          <div className="flex items-start gap-4 sm:gap-5">
+            <div className="corner-squircle flex size-12 shrink-0 items-center justify-center rounded-xl border border-border-subtle bg-background-subtle text-text-secondary sm:size-14">
+              <EnvelopeSimple className="size-6 sm:size-7" weight="light" />
+            </div>
+            <div className="min-w-0">
+              <p className="font-ds-mono text-ds-mono-xs uppercase tracking-wider text-text-muted">
+                Newsletter
+              </p>
+              <h2
+                id="newsletter"
+                className="mt-2 scroll-mt-24 font-ds-display text-ds-heading-2 font-semibold text-text-primary"
+              >
+                Subscribe to TanStack News
+              </h2>
+              <p className="mt-2 max-w-xl text-ds-body-md text-text-secondary">
+                New posts, releases, and ecosystem updates from TanStack.
+              </p>
             </div>
-
-            <p className="text-lg mt-1">
-              New posts, releases, and ecosystem updates from TanStack.
-            </p>
           </div>
+
           <NewsletterSignup
-            className="mt-4 max-w-sm"
-            noteClassName="text-sm opacity-50 font-semibold italic"
+            className="mt-8 w-full max-w-[23rem]"
+            buttonClassName="min-h-11 corner-squircle rounded-xl border-background-inverse bg-background-inverse px-5 font-ds-display text-ds-body-sm font-semibold text-text-inverse shadow-none hover:bg-background-inverse/90"
+            noteClassName="font-ds-mono text-[11px] tracking-wide text-text-muted"
+            successClassName="text-ds-body-sm text-text-success"
           />
-        </Card>
-      </div>
-      <div className="h-20" />
+        </div>
+      </section>
+      <div className="h-16 sm:h-20" />
       <Footer />
     </>
   )
diff --git a/src/components/home/HomeSocialProofSection.tsx b/src/components/home/HomeSocialProofSection.tsx
index ad3b38b4c..18237c772 100644
--- a/src/components/home/HomeSocialProofSection.tsx
+++ b/src/components/home/HomeSocialProofSection.tsx
@@ -2,9 +2,9 @@ import { Link } from '@tanstack/react-router'
 import { Hydrate } from '@tanstack/react-start'
 import { visible } from '@tanstack/react-start/hydration'
 import { ArrowRight } from '@phosphor-icons/react'
-import { Button, Card } from '~/components/ds/ui'
+import { BlogPostCard } from '~/components/ds/ui/BlogPostCard'
+import { Button } from '~/components/ds/ui'
 import { PartnersSponsorsContent } from '~/components/PartnersSponsorsSection'
-import { formatAuthors, formatPublishedDate } from '~/utils/blog-format'
 import type { RecentPost } from '~/utils/blog.functions'
 
 type HomeSocialProofSectionProps = {
@@ -54,12 +54,12 @@ function SocialProofSkeleton() {
         <div className="h-10 w-56 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse mb-6" />
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           {Array.from({ length: 3 }).map((_, index) => (
-            <Card
+            <div
               key={`post-skeleton-${index}`}
-              className="overflow-hidden animate-pulse"
+              className="animate-pulse rounded-xl corner-squircle p-2"
             >
-              <div className="aspect-video bg-gray-100 dark:bg-gray-800" />
-              <div className="p-4">
+              <div className="aspect-video rounded-lg corner-squircle bg-gray-100 dark:bg-gray-800" />
+              <div className="px-0.5 pt-2.5">
                 <div className="h-5 w-5/6 rounded bg-gray-200 dark:bg-gray-700" />
                 <div className="mt-3 h-3 w-2/3 rounded bg-gray-200 dark:bg-gray-700" />
                 <div className="mt-4 space-y-2">
@@ -67,7 +67,7 @@ function SocialProofSkeleton() {
                   <div className="h-3 rounded bg-gray-100 dark:bg-gray-800" />
                 </div>
               </div>
-            </Card>
+            </div>
           ))}
         </div>
       </div>
@@ -82,73 +82,26 @@ function HomeSocialProofContent({ recentPosts }: HomeSocialProofSectionProps) {
 
       {recentPosts.length > 0 && (
         <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
-          <h3 id="blog" className="text-3xl font-bold mb-6 scroll-mt-24">
+          <h3
+            id="blog"
+            className="mb-3 scroll-mt-24 px-1 font-ds-mono text-ds-mono-xs uppercase tracking-wider text-text-muted"
+          >
             <a
               href="#blog"
-              className="hover:underline decoration-gray-400 dark:decoration-gray-600"
+              className="transition-colors hover:text-text-primary"
             >
-              Latest Blog Posts
+              Blog &amp; Release Notes
             </a>
           </h3>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {recentPosts.map(
-              ({ slug, title, published, excerpt, headerImage, authors }) => {
-                return (
-                  // DS Card isn't polymorphic, so the Link wraps it and drives
-                  // the hover via group-hover.
-                  <Link
-                    key={slug}
-                    to="/blog/$"
-                    params={{ _splat: slug } as never}
-                    className="group block h-full"
-                  >
-                    <Card className="flex h-full flex-col justify-between overflow-hidden transition-all group-hover:border-border-focus group-hover:shadow-lg">
-                      {headerImage ? (
-                        <div className="aspect-video overflow-hidden bg-gray-100 dark:bg-gray-800">
-                          <img
-                            src={headerImage}
-                            alt=""
-                            loading="lazy"
-                            decoding="async"
-                            className="w-full h-full object-cover"
-                          />
-                        </div>
-                      ) : null}
-                      <div className="p-4 flex flex-col gap-3 flex-1 justify-between">
-                        <div>
-                          <div className="text-base font-bold">{title}</div>
-                          <div className="text-xs italic font-light mt-1 text-gray-600 dark:text-gray-400">
-                            by {formatAuthors(authors)}
-                            {published ? (
-                              <time
-                                dateTime={published}
-                                title={formatPublishedDate(published)}
-                              >
-                                {' '}
-                                on {formatPublishedDate(published)}
-                              </time>
-                            ) : null}
-                          </div>
-                          {excerpt ? (
-                            <p className="text-sm mt-3 text-gray-600 dark:text-gray-400 line-clamp-4 leading-relaxed">
-                              {excerpt}
-                            </p>
-                          ) : null}
-                        </div>
-                        <div className="text-text-accent uppercase font-bold text-xs">
-                          Read More →
-                        </div>
-                      </div>
-                    </Card>
-                  </Link>
-                )
-              },
-            )}
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+            {recentPosts.map((post) => (
+              <BlogPostCard key={post.slug} post={post} />
+            ))}
           </div>
           <div className="flex justify-center mt-6">
-            <Button as={Link} to="/blog">
+            <Button as={Link} to="/blog" variant="subtle-link" color="gray">
               View All Posts
-              <ArrowRight className="w-4 h-4" />
+              <ArrowRight />
             </Button>
           </div>
         </div>
diff --git a/src/components/home/HomeStatsSection.tsx b/src/components/home/HomeStatsSection.tsx
index 4faae2e0c..244ccc8bf 100644
--- a/src/components/home/HomeStatsSection.tsx
+++ b/src/components/home/HomeStatsSection.tsx
@@ -1,5 +1,5 @@
 import OpenSourceStats from '~/components/OpenSourceStats'
 
 export function HomeStatsSection({ className }: { className?: string }) {
-  return <OpenSourceStats className={className} layout="stacked" page="hero" />
+  return <OpenSourceStats className={className} page="hero" />
 }
diff --git a/src/components/landing/DevtoolsLanding.tsx b/src/components/landing/DevtoolsLanding.tsx
index ce8db4ac1..935f7b6f1 100644
--- a/src/components/landing/DevtoolsLanding.tsx
+++ b/src/components/landing/DevtoolsLanding.tsx
@@ -168,25 +168,25 @@ function DevtoolsCockpit() {
       <div className="grid min-h-[23rem] lg:grid-cols-[0.72fr_1.28fr]">
         <div className="border-border-subtle bg-background-surface p-4 lg:border-r">
           <div className="flex items-center justify-between gap-3">
-            <p className="font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/25">
+            <p className="font-ds-mono text-ds-mono-caps-xs uppercase text-text-secondary">
               your app
             </p>
             <button
               type="button"
               aria-pressed={isInspecting}
-              className="inline-flex items-center gap-1.5 rounded-md border border-border-default px-2 py-1.5 font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary aria-pressed:border-[var(--landing-accent)] aria-pressed:text-[var(--landing-accent-bright)]"
+              className="inline-flex items-center gap-1.5 rounded-md border border-border-strong px-2 py-1.5 font-ds-mono text-ds-mono-caps-xs uppercase text-text-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary aria-pressed:border-[var(--landing-accent)] aria-pressed:text-[var(--landing-accent-bright)]"
               onClick={() => setIsInspecting((current) => !current)}
             >
               <MagnifyingGlass aria-hidden="true" size={12} /> Inspect
             </button>
           </div>
-          <div className="mt-4 overflow-hidden rounded-lg border border-border-subtle bg-background-subtle">
+          <div className="mt-4 overflow-hidden rounded-lg border border-border-default bg-background-subtle">
             <button
               type="button"
               className={
                 isInspecting
                   ? 'block w-full border-b border-[var(--landing-accent)] bg-[color:rgb(var(--landing-glow)/0.13)] px-3 py-3 text-left text-ds-label-sm text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--landing-accent-bright)]'
-                  : 'block w-full border-b border-border-subtle px-3 py-3 text-left text-ds-label-sm text-text-primary/70'
+                  : 'block w-full border-b border-border-default px-3 py-3 text-left text-ds-label-sm text-text-primary'
               }
               onClick={() => selectSource('src/components/AppHeader.tsx:18')}
             >
@@ -204,7 +204,7 @@ function DevtoolsCockpit() {
                   className={
                     isInspecting
                       ? 'rounded-lg border border-[var(--landing-accent)] bg-[color:rgb(var(--landing-glow)/0.08)] px-3 py-3 text-left text-ds-body-xs text-text-primary/70 hover:bg-[color:rgb(var(--landing-glow)/0.18)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--landing-accent-bright)]'
-                      : 'rounded-lg border border-border-subtle bg-background-surface px-3 py-3 text-left text-ds-body-xs text-text-primary/40'
+                      : 'rounded-lg border border-border-default bg-background-surface px-3 py-3 text-left text-ds-body-xs text-text-secondary'
                   }
                   onClick={() => selectSource(nextSource)}
                 >
@@ -214,7 +214,7 @@ function DevtoolsCockpit() {
             </div>
           </div>
           <div
-            className="mt-3 min-w-0 rounded-lg bg-ds-neutral-500 px-3 py-2 font-ds-mono text-ds-mono-xs text-[var(--landing-accent-bright)]"
+            className="mt-3 min-w-0 rounded-lg bg-background-inverse px-3 py-2 font-ds-mono text-ds-mono-xs text-background-subtle"
             aria-live="polite"
           >
             <span className="block truncate">{source}</span>
@@ -232,7 +232,7 @@ function DevtoolsCockpit() {
                 key={panel.id}
                 type="button"
                 aria-pressed={activeId === panel.id}
-                className="shrink-0 rounded-lg border border-border-subtle bg-background-subtle px-3 py-2 text-ds-label-sm text-text-primary/35 hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary aria-pressed:bg-text-primary aria-pressed:text-background-default"
+                className="shrink-0 rounded-lg border border-border-default bg-background-subtle px-3 py-2 text-ds-label-sm text-text-secondary hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary aria-pressed:bg-text-primary aria-pressed:text-background-default"
                 onClick={() => setActiveId(panel.id)}
               >
                 {panel.label}
@@ -246,7 +246,7 @@ function DevtoolsCockpit() {
                   key={label}
                   className="rounded-lg bg-background-subtle p-3"
                 >
-                  <p className="font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/25">
+                  <p className="font-ds-mono text-ds-mono-caps-xs uppercase text-text-secondary">
                     {label}
                   </p>
                   <p className="mt-2 text-ds-heading-4 text-text-primary">
@@ -259,16 +259,16 @@ function DevtoolsCockpit() {
               {active.rows.map((row, index) => (
                 <div
                   key={row}
-                  className="flex items-center justify-between gap-3 rounded-lg border border-border-subtle bg-background-surface px-3 py-2.5"
+                  className="flex items-center justify-between gap-3 rounded-lg border border-border-default bg-background-surface px-3 py-2.5"
                 >
-                  <span className="truncate font-ds-mono text-ds-mono-2xs text-text-primary/55">
+                  <span className="truncate font-ds-mono text-ds-mono-2xs text-text-secondary">
                     {row}
                   </span>
                   <span
                     className={
                       index === 0
                         ? 'size-2 rounded-full bg-status-success'
-                        : 'size-2 rounded-full bg-text-primary/15'
+                        : 'size-2 rounded-full bg-icon-muted'
                     }
                   />
                 </div>
@@ -331,8 +331,8 @@ function PluginEventLab() {
     <LandingWindow label="custom jobs plugin">
       <div className="grid lg:grid-cols-[1.05fr_0.95fr]">
         <div className="min-w-0 border-border-subtle p-5 lg:border-r">
-          <pre className="overflow-x-auto rounded-lg bg-ds-neutral-500 p-4">
-            <code className="font-ds-mono text-ds-mono-xs text-white/60">
+          <pre className="overflow-x-auto rounded-lg bg-background-inverse p-4">
+            <code className="font-ds-mono text-ds-mono-xs text-text-inverse/60">
               {
                 "type JobEvents = {\n  progress: { jobId: string; percent: number }\n}\nclass JobsClient extends EventClient<JobEvents> {\n  constructor() { super({ pluginId: 'jobs' }) }\n}\nconst jobs = new JobsClient()"
               }
@@ -487,7 +487,7 @@ function SourceToBuild() {
         </LandingEyebrow>
         <div className="mt-7 rounded-lg border border-[var(--landing-accent)] bg-[color:rgb(var(--landing-glow)/0.12)] p-5">
           <p className="text-ds-heading-4">Project summary</p>
-          <div className="mt-5 flex flex-wrap items-center justify-between gap-3 rounded bg-ds-neutral-500 px-3 py-2 font-ds-mono text-ds-mono-xs text-[var(--landing-accent-bright)]">
+          <div className="mt-5 flex flex-wrap items-center justify-between gap-3 rounded bg-background-inverse px-3 py-2 font-ds-mono text-ds-mono-xs text-text-inverse">
             <span>Summary.tsx:14</span>
             <ArrowSquareOut aria-hidden="true" size={15} />
           </div>
diff --git a/src/components/landing/HighlightLanding.tsx b/src/components/landing/HighlightLanding.tsx
index 0c639808e..6beb533b9 100644
--- a/src/components/landing/HighlightLanding.tsx
+++ b/src/components/landing/HighlightLanding.tsx
@@ -18,6 +18,7 @@ import { Footer } from '~/components/Footer'
 import { LandingCommunitySection } from '~/components/LandingCommunitySection'
 import LandingPageGad from '~/components/LandingPageGad'
 import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
+import { LibraryStatusBadge } from '~/components/LibraryStatusBadge'
 import { LibraryWordmark } from '~/components/LibraryWordmark'
 import { PartnersSponsorsSection } from '~/components/PartnersSponsorsSection'
 import { GithubIcon } from '~/components/icons/GithubIcon'
@@ -89,9 +90,7 @@ export default function HighlightLanding() {
                 <LibraryWordmark library={library} />
               </h1>
               {library.badge ? (
-                <span className="rounded-sm bg-zinc-950 px-2 py-1 text-xs font-black uppercase text-white dark:bg-amber-300 dark:text-zinc-950">
-                  {library.badge}
-                </span>
+                <LibraryStatusBadge badge={library.badge} />
               ) : null}
             </div>
 
diff --git a/src/components/landing/LibraryLanding.tsx b/src/components/landing/LibraryLanding.tsx
index cba737945..32cb435eb 100644
--- a/src/components/landing/LibraryLanding.tsx
+++ b/src/components/landing/LibraryLanding.tsx
@@ -16,6 +16,7 @@ import { libraryCategories, type LibraryCategory } from '~/libraries/categories'
 import { getLibrary } from '~/libraries'
 import type { LibraryId } from '~/libraries'
 import { PartnersSponsorsSection } from '~/components/PartnersSponsorsSection'
+import { LibraryStatusBadge } from '~/components/LibraryStatusBadge'
 import { ossStatsQuery, recentDownloadsQuery } from '~/queries/stats'
 import { LandingCopyPromptButton } from './LandingCopyPromptButton'
 
@@ -269,9 +270,10 @@ export function LibraryLandingShell({
                   </h1>
                 </div>
                 {library.badge ? (
-                  <span className="mt-1 rounded-md border border-text-primary/15 bg-text-primary/5 px-2 py-1 font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/60">
-                    {library.badge}
-                  </span>
+                  <LibraryStatusBadge
+                    badge={library.badge}
+                    className="mt-[22px]"
+                  />
                 ) : null}
               </div>
 
diff --git a/src/components/landing/MarkdownLanding.tsx b/src/components/landing/MarkdownLanding.tsx
index 495db12b8..87abc332f 100644
--- a/src/components/landing/MarkdownLanding.tsx
+++ b/src/components/landing/MarkdownLanding.tsx
@@ -28,6 +28,7 @@ import { Footer } from '~/components/Footer'
 import { LandingCommunitySection } from '~/components/LandingCommunitySection'
 import LandingPageGad from '~/components/LandingPageGad'
 import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
+import { LibraryStatusBadge } from '~/components/LibraryStatusBadge'
 import { LibraryWordmark } from '~/components/LibraryWordmark'
 import { PartnersSponsorsSection } from '~/components/PartnersSponsorsSection'
 import { GithubIcon } from '~/components/icons/GithubIcon'
@@ -186,9 +187,7 @@ export default function MarkdownLanding() {
                 <LibraryWordmark library={library} />
               </h1>
               {library.badge ? (
-                <span className="rounded-sm bg-[#201725] px-2 py-1 text-xs font-black uppercase text-white dark:bg-white dark:text-[#201725]">
-                  {library.badge}
-                </span>
+                <LibraryStatusBadge badge={library.badge} />
               ) : null}
             </div>
 
diff --git a/src/components/stack/CategoryArticle.tsx b/src/components/stack/CategoryArticle.tsx
index 69324584c..dc22713e4 100644
--- a/src/components/stack/CategoryArticle.tsx
+++ b/src/components/stack/CategoryArticle.tsx
@@ -23,6 +23,7 @@ import {
 } from '@phosphor-icons/react'
 
 import { LibraryWordmark } from '~/components/LibraryWordmark'
+import { LibraryStatusBadge } from '~/components/LibraryStatusBadge'
 import type { LibraryId, LibrarySlim } from '~/libraries'
 import { formatPublishedDate } from '~/utils/blog-format'
 import type { RelatedPost as RelatedPostData } from '~/utils/blog.functions'
@@ -1075,25 +1076,14 @@ function LibraryTitle({
       ) : null}
       <div
         className={twMerge(
-          'flex flex-wrap items-center gap-2',
+          'flex flex-wrap items-start gap-2',
           overline ? 'mt-1' : undefined,
         )}
       >
         <h3 className="text-xl font-black leading-tight">
           <LibraryWordmark library={library} />
         </h3>
-        {library.badge ? (
-          <span
-            className={twMerge(
-              'rounded-md bg-linear-to-r px-1.5 py-0.5 text-xs font-black uppercase',
-              library.colorFrom,
-              library.colorTo,
-              library.badgeTextStyle ?? 'text-white',
-            )}
-          >
-            {library.badge}
-          </span>
-        ) : null}
+        {library.badge ? <LibraryStatusBadge badge={library.badge} /> : null}
       </div>
     </div>
   )
diff --git a/src/contexts/LibrariesOverlayContext.tsx b/src/contexts/LibrariesOverlayContext.tsx
index ee18781c4..71dc8a760 100644
--- a/src/contexts/LibrariesOverlayContext.tsx
+++ b/src/contexts/LibrariesOverlayContext.tsx
@@ -3,7 +3,7 @@ import { useLocation } from '@tanstack/react-router'
 import { LibrariesOverlay } from '~/components/LibrariesOverlay'
 
 interface LibrariesOverlayContextValue {
-  openLibraries: () => void
+  openLibraries: (options?: { onBack?: () => void }) => void
   closeLibraries: () => void
 }
 
@@ -35,15 +35,35 @@ export function LibrariesOverlayProvider({
   children: React.ReactNode
 }) {
   const [isOpen, setIsOpen] = React.useState(false)
+  const [returnTarget, setReturnTarget] = React.useState<{
+    onBack: () => void
+  } | null>(null)
 
-  const openLibraries = React.useCallback(() => setIsOpen(true), [])
-  const closeLibraries = React.useCallback(() => setIsOpen(false), [])
+  const openLibraries = React.useCallback(
+    (options?: { onBack?: () => void }) => {
+      setReturnTarget(options?.onBack ? { onBack: options.onBack } : null)
+      setIsOpen(true)
+    },
+    [],
+  )
+  const closeLibraries = React.useCallback(() => {
+    setIsOpen(false)
+    setReturnTarget(null)
+  }, [])
+
+  const returnToMenu = React.useCallback(() => {
+    const onBack = returnTarget?.onBack
+    setIsOpen(false)
+    setReturnTarget(null)
+    onBack?.()
+  }, [returnTarget])
 
   // Any navigation (e.g. clicking a library card) closes the overlay so it
   // never lingers over the destination page.
   const pathname = useLocation({ select: (location) => location.pathname })
   React.useEffect(() => {
     setIsOpen(false)
+    setReturnTarget(null)
   }, [pathname])
 
   const value = React.useMemo(
@@ -54,7 +74,11 @@ export function LibrariesOverlayProvider({
   return (
     <LibrariesOverlayContext.Provider value={value}>
       {children}
-      <LibrariesOverlay open={isOpen} onClose={closeLibraries} />
+      <LibrariesOverlay
+        open={isOpen}
+        onBack={returnTarget ? returnToMenu : undefined}
+        onClose={closeLibraries}
+      />
     </LibrariesOverlayContext.Provider>
   )
 }
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index e67a7b9e0..894f370bc 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -71,6 +71,7 @@ import { Route as DsShadowsRouteImport } from './routes/ds.shadows'
 import { Route as DsSemanticRouteImport } from './routes/ds.semantic'
 import { Route as DsPaletteRouteImport } from './routes/ds.palette'
 import { Route as DsNavbarRouteImport } from './routes/ds.navbar'
+import { Route as DsMaintainersRouteImport } from './routes/ds.maintainers'
 import { Route as DsLogosRouteImport } from './routes/ds.logos'
 import { Route as DsInputsRouteImport } from './routes/ds.inputs'
 import { Route as DsIconographyRouteImport } from './routes/ds.iconography'
@@ -503,6 +504,11 @@ const DsNavbarRoute = DsNavbarRouteImport.update({
   path: '/navbar',
   getParentRoute: () => DsRoute,
 } as any)
+const DsMaintainersRoute = DsMaintainersRouteImport.update({
+  id: '/maintainers',
+  path: '/maintainers',
+  getParentRoute: () => DsRoute,
+} as any)
 const DsLogosRoute = DsLogosRouteImport.update({
   id: '/logos',
   path: '/logos',
@@ -1233,6 +1239,7 @@ export interface FileRoutesByFullPath {
   '/ds/iconography': typeof DsIconographyRoute
   '/ds/inputs': typeof DsInputsRoute
   '/ds/logos': typeof DsLogosRoute
+  '/ds/maintainers': typeof DsMaintainersRoute
   '/ds/navbar': typeof DsNavbarRoute
   '/ds/palette': typeof DsPaletteRoute
   '/ds/semantic': typeof DsSemanticRoute
@@ -1409,6 +1416,7 @@ export interface FileRoutesByTo {
   '/ds/iconography': typeof DsIconographyRoute
   '/ds/inputs': typeof DsInputsRoute
   '/ds/logos': typeof DsLogosRoute
+  '/ds/maintainers': typeof DsMaintainersRoute
   '/ds/navbar': typeof DsNavbarRoute
   '/ds/palette': typeof DsPaletteRoute
   '/ds/semantic': typeof DsSemanticRoute
@@ -1593,6 +1601,7 @@ export interface FileRoutesById {
   '/ds/iconography': typeof DsIconographyRoute
   '/ds/inputs': typeof DsInputsRoute
   '/ds/logos': typeof DsLogosRoute
+  '/ds/maintainers': typeof DsMaintainersRoute
   '/ds/navbar': typeof DsNavbarRoute
   '/ds/palette': typeof DsPaletteRoute
   '/ds/semantic': typeof DsSemanticRoute
@@ -1780,6 +1789,7 @@ export interface FileRouteTypes {
     | '/ds/iconography'
     | '/ds/inputs'
     | '/ds/logos'
+    | '/ds/maintainers'
     | '/ds/navbar'
     | '/ds/palette'
     | '/ds/semantic'
@@ -1956,6 +1966,7 @@ export interface FileRouteTypes {
     | '/ds/iconography'
     | '/ds/inputs'
     | '/ds/logos'
+    | '/ds/maintainers'
     | '/ds/navbar'
     | '/ds/palette'
     | '/ds/semantic'
@@ -2139,6 +2150,7 @@ export interface FileRouteTypes {
     | '/ds/iconography'
     | '/ds/inputs'
     | '/ds/logos'
+    | '/ds/maintainers'
     | '/ds/navbar'
     | '/ds/palette'
     | '/ds/semantic'
@@ -2780,6 +2792,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DsNavbarRouteImport
       parentRoute: typeof DsRoute
     }
+    '/ds/maintainers': {
+      id: '/ds/maintainers'
+      path: '/maintainers'
+      fullPath: '/ds/maintainers'
+      preLoaderRoute: typeof DsMaintainersRouteImport
+      parentRoute: typeof DsRoute
+    }
     '/ds/logos': {
       id: '/ds/logos'
       path: '/logos'
@@ -3881,6 +3900,7 @@ interface DsRouteChildren {
   DsIconographyRoute: typeof DsIconographyRoute
   DsInputsRoute: typeof DsInputsRoute
   DsLogosRoute: typeof DsLogosRoute
+  DsMaintainersRoute: typeof DsMaintainersRoute
   DsNavbarRoute: typeof DsNavbarRoute
   DsPaletteRoute: typeof DsPaletteRoute
   DsSemanticRoute: typeof DsSemanticRoute
@@ -3905,6 +3925,7 @@ const DsRouteChildren: DsRouteChildren = {
   DsIconographyRoute: DsIconographyRoute,
   DsInputsRoute: DsInputsRoute,
   DsLogosRoute: DsLogosRoute,
+  DsMaintainersRoute: DsMaintainersRoute,
   DsNavbarRoute: DsNavbarRoute,
   DsPaletteRoute: DsPaletteRoute,
   DsSemanticRoute: DsSemanticRoute,
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 3648f1925..19c474216 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -205,6 +205,18 @@ export const Route = createRootRouteWithContext<{
           sizes: '180x180',
           href: '/apple-touch-icon.png',
         },
+        {
+          rel: 'icon',
+          type: 'image/svg+xml',
+          href: '/favicon-light.svg',
+          media: '(prefers-color-scheme: light)',
+        },
+        {
+          rel: 'icon',
+          type: 'image/svg+xml',
+          href: '/favicon-dark.svg',
+          media: '(prefers-color-scheme: dark)',
+        },
         {
           rel: 'icon',
           type: 'image/png',
diff --git a/src/routes/ds.badges.tsx b/src/routes/ds.badges.tsx
index 3c09ab731..37adefaab 100644
--- a/src/routes/ds.badges.tsx
+++ b/src/routes/ds.badges.tsx
@@ -52,6 +52,25 @@ function BadgesPage() {
         </ComponentPreview>
       </DsSection>
 
+      <DsSection
+        title="Corner styles"
+        description="Use rounded corners for compact labels, or the default pill for statuses."
+      >
+        <ComponentPreview
+          code={`<Badge rounded="md">Rounded</Badge>
+<Badge rounded="full">Pill</Badge>`}
+        >
+          <Badge rounded="md">Rounded</Badge>
+          <Badge rounded="full">Pill</Badge>
+          <Badge rounded="md" variant="success">
+            Stable
+          </Badge>
+          <Badge rounded="md" variant="warning">
+            Beta
+          </Badge>
+        </ComponentPreview>
+      </DsSection>
+
       <DsSection
         title="In context"
         description="Badges sit inline alongside text and headings."
diff --git a/src/routes/ds.buttons.tsx b/src/routes/ds.buttons.tsx
index 09bcd0e35..875afc49c 100644
--- a/src/routes/ds.buttons.tsx
+++ b/src/routes/ds.buttons.tsx
@@ -1,3 +1,4 @@
+import type * as React from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import {
   ArrowRight,
@@ -43,38 +44,82 @@ const COLORS = [
   'yellow',
 ] as const
 
+function ButtonPreview({
+  children,
+  code,
+}: {
+  children: React.ReactNode
+  code: string
+}) {
+  return (
+    <ComponentPreview code={code} className="block p-0">
+      <div className="grid w-full lg:grid-cols-2">
+        <ButtonMode mode="light">{children}</ButtonMode>
+        <ButtonMode mode="dark">{children}</ButtonMode>
+      </div>
+    </ComponentPreview>
+  )
+}
+
+function ButtonMode({
+  children,
+  mode,
+}: {
+  children: React.ReactNode
+  mode: 'light' | 'dark'
+}) {
+  return (
+    <div
+      className={`ds-mode-${mode} relative flex min-h-36 flex-wrap content-center items-center gap-4 bg-background-default px-6 pb-6 pt-10 text-text-primary lg:min-h-40 ${
+        mode === 'dark'
+          ? 'border-t border-white/10 lg:border-l lg:border-t-0'
+          : ''
+      }`}
+    >
+      <div className="absolute left-6 top-4 font-ds-mono text-ds-mono-caps-xs uppercase text-text-muted">
+        {mode}
+      </div>
+      {children}
+    </div>
+  )
+}
+
 function ButtonsPage() {
   return (
     <DsPage
       title="Buttons"
-      description="A polymorphic button (render as a link or any element via `as`). Composed from variant + color + size + rounded. Source: src/ui/Button.tsx."
+      description="A polymorphic button (render as a link or any element via `as`). Composed from variant + color + size + rounded. Below the 900px mobile breakpoint, buttons use their brighter hover treatment as the resting state so touch interfaces retain the same visual affordance. Source: src/components/ds/ui/index.tsx."
     >
       <DsSection
         title="Variants"
-        description="primary, secondary, ghost, link, and icon."
+        description="primary, secondary, ghost, link, subtle-link, and icon."
       >
-        <ComponentPreview
+        <ButtonPreview
           code={`<Button variant="primary">Primary</Button>
 <Button variant="secondary">Secondary</Button>
 <Button variant="ghost">Ghost</Button>
 <Button variant="link">Link</Button>
+<Button variant="subtle-link">Subtle link <ArrowRight /></Button>
 <Button variant="icon" aria-label="Add"><Plus /></Button>`}
         >
           <Button variant="primary">Primary</Button>
           <Button variant="secondary">Secondary</Button>
           <Button variant="ghost">Ghost</Button>
           <Button variant="link">Link</Button>
+          <Button variant="subtle-link" color="gray">
+            Subtle link <ArrowRight />
+          </Button>
           <Button variant="icon" aria-label="Add">
             <Plus className="h-4 w-4" />
           </Button>
-        </ComponentPreview>
+        </ButtonPreview>
       </DsSection>
 
       <DsSection
         title="Gradient (landing CTA)"
         description="The library-landing primary call-to-action, promoted to a Button variant so the styling lives here: an accent→bright gradient with an inner highlight, a colored glow, ink text, and a hover lift. Colors map to the category accents (src/styles/app.css)."
       >
-        <ComponentPreview
+        <ButtonPreview
           code={`<Button variant="gradient" color="green">Get started</Button>
 <Button variant="gradient" color="red">Get started</Button>
 <Button variant="gradient" color="blue">Get started</Button>
@@ -100,14 +145,14 @@ function ButtonsPage() {
           <Button variant="gradient">
             Copy prompt <ArrowRight className="h-4 w-4" />
           </Button>
-        </ComponentPreview>
+        </ButtonPreview>
       </DsSection>
 
       <DsSection
         title="Colors"
         description="Primary variant across the full color set."
       >
-        <ComponentPreview
+        <ButtonPreview
           code={`<Button color="blue">Blue</Button>
 <Button color="green">Green</Button>
 <Button color="red">Red</Button>
@@ -118,11 +163,11 @@ function ButtonsPage() {
               {color[0].toUpperCase() + color.slice(1)}
             </Button>
           ))}
-        </ComponentPreview>
+        </ButtonPreview>
       </DsSection>
 
       <DsSection title="Sizes" description="xs, sm, md (default), lg.">
-        <ComponentPreview
+        <ButtonPreview
           code={`<Button size="xs">Extra small</Button>
 <Button size="sm">Small</Button>
 <Button size="md">Medium</Button>
@@ -132,33 +177,33 @@ function ButtonsPage() {
           <Button size="sm">Small</Button>
           <Button size="md">Medium</Button>
           <Button size="lg">Large</Button>
-        </ComponentPreview>
+        </ButtonPreview>
       </DsSection>
 
       <DsSection
         title="Link buttons"
-        description="The link variant reads as an inline text link — for low-emphasis actions and inline navigation. Takes any color and size."
+        description="Link is an inline text action. Subtle link is the canonical low-emphasis navigation action used by mega menus and section footers; it owns its mono label, spacing, muted color, and trailing-icon motion here."
       >
-        <ComponentPreview
+        <ButtonPreview
           code={`<Button variant="link">Documentation</Button>
 <Button variant="link" color="gray">Learn more</Button>
-<Button variant="link">Read the guide <ArrowRight /></Button>`}
+<Button variant="subtle-link" color="gray">View all posts <ArrowRight /></Button>`}
         >
           <Button variant="link">Documentation</Button>
           <Button variant="link" color="gray">
             Learn more
           </Button>
-          <Button variant="link">
-            Read the guide <ArrowRight className="h-4 w-4" />
+          <Button variant="subtle-link" color="gray">
+            View all posts <ArrowRight />
           </Button>
-        </ComponentPreview>
+        </ButtonPreview>
       </DsSection>
 
       <DsSection
         title="Icon buttons"
         description="Icon-only buttons via the icon variant, in both icon sizes (icon-sm, icon-md) and any color."
       >
-        <ComponentPreview
+        <ButtonPreview
           code={`<Button variant="icon" size="icon-sm" aria-label="Search"><MagnifyingGlass /></Button>
 <Button variant="icon" size="icon-md" aria-label="Settings"><Gear /></Button>
 <Button variant="icon" color="red" aria-label="Delete"><Trash /></Button>`}
@@ -175,11 +220,11 @@ function ButtonsPage() {
           <Button variant="icon" color="red" aria-label="Delete">
             <Trash className="h-5 w-5" />
           </Button>
-        </ComponentPreview>
+        </ButtonPreview>
       </DsSection>
 
       <DsSection title="Rounded" description="none, md, lg, full.">
-        <ComponentPreview
+        <ButtonPreview
           code={`<Button rounded="none">None</Button>
 <Button rounded="md">Medium</Button>
 <Button rounded="lg">Large</Button>
@@ -189,14 +234,14 @@ function ButtonsPage() {
           <Button rounded="md">Medium</Button>
           <Button rounded="lg">Large</Button>
           <Button rounded="full">Full</Button>
-        </ComponentPreview>
+        </ButtonPreview>
       </DsSection>
 
       <DsSection
         title="With icons & states"
         description="Buttons accept any children, and forward native props like disabled."
       >
-        <ComponentPreview
+        <ButtonPreview
           code={`<Button><Download /> Download</Button>
 <Button variant="ghost" color="red"><Trash /> Delete</Button>
 <Button disabled>Disabled</Button>`}
@@ -208,14 +253,14 @@ function ButtonsPage() {
             <Trash className="h-4 w-4" /> Delete
           </Button>
           <Button disabled>Disabled</Button>
-        </ComponentPreview>
+        </ButtonPreview>
       </DsSection>
 
       <DsSection
         title="Button group"
         description="Segmented buttons via ButtonGroup. Source: src/components/ButtonGroup.tsx."
       >
-        <ComponentPreview
+        <ButtonPreview
           code={`<ButtonGroup>
   <Button variant="ghost" rounded="none">Day</Button>
   <Button variant="ghost" rounded="none">Week</Button>
@@ -233,14 +278,14 @@ function ButtonsPage() {
               Month
             </Button>
           </ButtonGroup>
-        </ComponentPreview>
+        </ButtonPreview>
       </DsSection>
 
       <DsSection
         title="Leading & trailing icons"
         description="Icons sit inline with the label (baseStyles gap-2). Lead with an icon to reinforce the action, or trail one for direction, disclosure, or download — across any variant and color."
       >
-        <ComponentPreview
+        <ButtonPreview
           code={`{/* leading */}
 <Button><Plus /> New project</Button>
 <Button variant="secondary"><Gear /> Settings</Button>
@@ -272,14 +317,14 @@ function ButtonsPage() {
           <Button color="green">
             Save <Check className="h-4 w-4" />
           </Button>
-        </ComponentPreview>
+        </ButtonPreview>
       </DsSection>
 
       <DsSection
         title="Split button"
         description="A primary action paired with a dropdown selector for related choices. Click the caret to open the menu. Composed from Button + the Dropdown primitives."
       >
-        <ComponentPreview
+        <ButtonPreview
           code={`<div className="inline-flex overflow-hidden rounded-lg">
   <Button rounded="none">Deploy</Button>
   <Dropdown>
@@ -317,7 +362,7 @@ function ButtonsPage() {
               </DropdownContent>
             </Dropdown>
           </div>
-        </ComponentPreview>
+        </ButtonPreview>
       </DsSection>
     </DsPage>
   )
diff --git a/src/routes/ds.cards.tsx b/src/routes/ds.cards.tsx
index 057a81ccf..784427899 100644
--- a/src/routes/ds.cards.tsx
+++ b/src/routes/ds.cards.tsx
@@ -2,6 +2,7 @@ import { createFileRoute } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
 import { Tooltip } from '~/ui'
 import { Button, Card, InlineCode } from '~/components/ds/ui'
+import { BlogPostCard } from '~/components/ds/ui/BlogPostCard'
 import { ComponentPreview, DsPage, DsSection } from '~/components/ds/DsKit'
 
 export const Route = createFileRoute('/ds/cards')({
@@ -60,6 +61,43 @@ function CardsPage() {
         </ComponentPreview>
       </DsSection>
 
+      <DsSection
+        title="Blog post card"
+        description="The canonical blog preview used in the homepage and Blog mega menu. Its padding, hover, focus, selected state, typography, media treatment, and metadata are managed here."
+      >
+        <ComponentPreview
+          className="block"
+          code={`<BlogPostCard post={post} />`}
+        >
+          <div className="mx-auto grid max-w-3xl gap-4 md:grid-cols-2">
+            <BlogPostCard
+              post={{
+                slug: 'tanstack-has-a-new-look',
+                title: 'TanStack Has a New Look',
+                published: '2026-07-29',
+                excerpt:
+                  'TanStack has a new logo, a design system, and a brand built with care for the details.',
+                headerImage:
+                  '/blog-assets/tanstack-has-a-new-look/logo-swatch.svg',
+                authors: ['Tanner Linsley'],
+              }}
+            />
+            <BlogPostCard
+              post={{
+                slug: 'introducing-tanstack-markdown-and-highlight',
+                title: 'Introducing TanStack Markdown and Highlight',
+                published: '2026-07-24',
+                excerpt:
+                  'Two tiny, synchronous libraries for turning technical content into deterministic, themeable webpages.',
+                headerImage:
+                  '/blog-assets/introducing-tanstack-markdown-and-highlight/header.webp',
+                authors: ['Tanner Linsley'],
+              }}
+            />
+          </div>
+        </ComponentPreview>
+      </DsSection>
+
       <DsSection
         title="Tooltip"
         description="Radix-powered tooltip. Hover or focus the trigger. Source: src/ui/Tooltip.tsx."
diff --git a/src/routes/ds.logos.tsx b/src/routes/ds.logos.tsx
index 0feac3d27..7f7a67f1e 100644
--- a/src/routes/ds.logos.tsx
+++ b/src/routes/ds.logos.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
-import { CurrentBrandAssets } from '~/components/ds/BrandAssets'
+import { BrandAssetGallery } from '~/components/ds/BrandAssets'
 import { DsPage } from '~/components/ds/DsKit'
 
 export const Route = createFileRoute('/ds/logos')({
@@ -9,7 +9,7 @@ export const Route = createFileRoute('/ds/logos')({
     meta: seo({
       title: 'Logos | TanStack Design System',
       description:
-        'Download the TanStack logo lockups — stacked and landscape, in every brand color.',
+        'Preview and download TanStack brand and social-media logo lockups.',
     }),
   }),
 })
@@ -18,9 +18,9 @@ function LogosPage() {
   return (
     <DsPage
       title="Logos"
-      description="The TanStack brand marks. Use the stacked lockup where vertical room allows and the landscape lockup for navbars and wide, short spaces. Pick the color that keeps the mark legible on its background — dark marks on light surfaces, light marks on dark. Every mark is an SVG; download the one you need below."
+      description="Browse and download TanStack brand marks, favicons, and social-media artwork."
     >
-      <CurrentBrandAssets />
+      <BrandAssetGallery />
     </DsPage>
   )
 }
diff --git a/src/routes/ds.maintainers.tsx b/src/routes/ds.maintainers.tsx
new file mode 100644
index 000000000..08040ec5d
--- /dev/null
+++ b/src/routes/ds.maintainers.tsx
@@ -0,0 +1,57 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { MaintainerCard } from '~/components/MaintainerCard'
+import { ComponentPreview, DsPage, DsSection } from '~/components/ds/DsKit'
+import { coreMaintainers } from '~/libraries/maintainers'
+import { seo } from '~/utils/seo'
+
+export const Route = createFileRoute('/ds/maintainers')({
+  component: MaintainersPage,
+  head: () => ({
+    meta: seo({
+      title: 'Maintainers | TanStack Design System',
+      description:
+        'The shared maintainer card used for core teams, instructors, and library maintainers across TanStack.',
+    }),
+  }),
+})
+
+function MaintainersPage() {
+  return (
+    <DsPage
+      title="Maintainers"
+      description="An identity card for core teams, instructors, and library maintainer sections. Its neutral placeholder is 240px square at full size and remains fluid in narrower columns."
+    >
+      <DsSection
+        title="Maintainer card"
+        description="Rest is transparent. Hover and keyboard focus apply the subtle surface-state overlay; press uses the stronger surface-state overlay."
+      >
+        <ComponentPreview
+          className="items-start justify-center"
+          code={`<MaintainerCard maintainer={maintainer} />`}
+        >
+          <div className="w-full max-w-[252px]">
+            <MaintainerCard maintainer={coreMaintainers[0]} />
+          </div>
+        </ComponentPreview>
+      </DsSection>
+
+      <DsSection
+        title="Responsive grid"
+        description="Use one column on narrow screens, then increase to two and three columns as the available width permits."
+      >
+        <ComponentPreview
+          className="grid items-start gap-6 sm:grid-cols-2 xl:grid-cols-3"
+          code={`<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+  {maintainers.map((maintainer) => (
+    <MaintainerCard key={maintainer.github} maintainer={maintainer} />
+  ))}
+</div>`}
+        >
+          {coreMaintainers.slice(0, 3).map((maintainer) => (
+            <MaintainerCard key={maintainer.github} maintainer={maintainer} />
+          ))}
+        </ComponentPreview>
+      </DsSection>
+    </DsPage>
+  )
+}
diff --git a/src/routes/ds.typography.tsx b/src/routes/ds.typography.tsx
index bd516cc1d..078abe8ec 100644
--- a/src/routes/ds.typography.tsx
+++ b/src/routes/ds.typography.tsx
@@ -1,6 +1,7 @@
+import type * as React from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
-import { DsPage, DsSection } from '~/components/ds/DsKit'
+import { DsDescription, DsPage, DsSection } from '~/components/ds/DsKit'
 
 export const Route = createFileRoute('/ds/typography')({
   component: TypographyPage,
@@ -187,60 +188,168 @@ function TypographyPage() {
 
       {GROUPS.map((group) => (
         <DsSection key={group.title} title={group.title}>
-          <div className="divide-y divide-border-default overflow-hidden rounded-xl border border-border-default">
-            {group.items.map((item) => (
-              <div
-                key={item.name}
-                className="flex items-baseline justify-between gap-6 bg-background-surface px-5 py-4"
-              >
-                <span
-                  className={`${group.font} ${item.cls} min-w-0 truncate text-text-primary`}
-                >
-                  {group.sample}
-                </span>
-                <span className="shrink-0 text-right">
-                  <span className="block font-ds-mono text-xs text-text-secondary">
-                    {item.name}
-                  </span>
-                  <span className="block text-[11px] text-text-muted">
-                    {item.spec}
-                  </span>
-                </span>
-              </div>
-            ))}
+          <div className="grid overflow-hidden rounded-xl border border-border-default lg:grid-cols-2">
+            <TypeGroupMode group={group} mode="light" />
+            <TypeGroupMode group={group} mode="dark" />
           </div>
         </DsSection>
       ))}
 
+      <DsSection
+        title="Documentation roles"
+        description="Named text roles keep explanatory copy on the same typography and semantic color tokens throughout the design-system catalog."
+      >
+        <div className="grid gap-3 md:grid-cols-3">
+          <DescriptionRoleCard
+            name="Page description"
+            role="page"
+            typeToken="body/md"
+            colorToken="text-secondary"
+          >
+            Introduces the purpose and scope of a design-system page.
+          </DescriptionRoleCard>
+          <DescriptionRoleCard
+            name="Section description"
+            role="section"
+            typeToken="body/sm"
+            colorToken="text-secondary"
+          >
+            Explains usage, behavior, and guidance for a component section.
+          </DescriptionRoleCard>
+          <DescriptionRoleCard
+            name="Preview description"
+            role="preview"
+            typeToken="body/sm"
+            colorToken="text-muted"
+          >
+            Adds compact supporting context inside a component preview.
+          </DescriptionRoleCard>
+        </div>
+      </DsSection>
+
       <DsSection
         title="Semantic headings"
         description="Convenience classes that bundle the display font with each heading size — apply h1–h6 directly to an element instead of pairing font-ds-display with text-ds-heading-*. Aliases of the heading scale above, defined in app.css."
       >
-        <div className="divide-y divide-border-default overflow-hidden rounded-xl border border-border-default">
-          {SEMANTIC_HEADINGS.map((h) => (
-            <div
-              key={h.cls}
-              className="flex items-baseline justify-between gap-6 bg-background-surface px-5 py-4"
-            >
-              <span className={`${h.cls} min-w-0 truncate text-text-primary`}>
-                Type-safe by default
-              </span>
-              <span className="shrink-0 text-right">
-                <span className="block font-ds-mono text-xs text-text-secondary">
-                  .{h.cls}
-                </span>
-                <span className="block text-[11px] text-text-muted">
-                  {h.alias}
-                </span>
-              </span>
-            </div>
-          ))}
+        <div className="grid overflow-hidden rounded-xl border border-border-default lg:grid-cols-2">
+          <SemanticHeadingMode mode="light" />
+          <SemanticHeadingMode mode="dark" />
         </div>
       </DsSection>
     </DsPage>
   )
 }
 
+function TypeGroupMode({
+  group,
+  mode,
+}: {
+  group: TypeGroup
+  mode: 'light' | 'dark'
+}) {
+  return (
+    <div
+      className={`ds-mode-${mode} min-w-0 bg-background-default text-text-primary ${
+        mode === 'dark'
+          ? 'border-t border-border-default lg:border-l lg:border-t-0'
+          : ''
+      }`}
+    >
+      <div className="border-b border-border-default px-5 py-3 font-ds-mono text-ds-mono-caps-xs uppercase text-text-muted">
+        {mode}
+      </div>
+      <div className="divide-y divide-border-default">
+        {group.items.map((item) => (
+          <div
+            key={item.name}
+            className="flex min-w-0 items-baseline justify-between gap-4 bg-background-surface px-5 py-4"
+          >
+            <span
+              className={`${group.font} ${item.cls} min-w-0 truncate text-text-primary`}
+            >
+              {group.sample}
+            </span>
+            <span className="shrink-0 text-right">
+              <span className="block font-ds-mono text-xs text-text-secondary">
+                {item.name}
+              </span>
+              <span className="block text-[11px] text-text-muted">
+                {item.spec}
+              </span>
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function SemanticHeadingMode({ mode }: { mode: 'light' | 'dark' }) {
+  return (
+    <div
+      className={`ds-mode-${mode} min-w-0 bg-background-default text-text-primary ${
+        mode === 'dark'
+          ? 'border-t border-border-default lg:border-l lg:border-t-0'
+          : ''
+      }`}
+    >
+      <div className="border-b border-border-default px-5 py-3 font-ds-mono text-ds-mono-caps-xs uppercase text-text-muted">
+        {mode}
+      </div>
+      <div className="divide-y divide-border-default">
+        {SEMANTIC_HEADINGS.map((heading) => (
+          <div
+            key={heading.cls}
+            className="flex min-w-0 items-baseline justify-between gap-4 bg-background-surface px-5 py-4"
+          >
+            <span
+              className={`${heading.cls} min-w-0 truncate text-text-primary`}
+            >
+              Type-safe by default
+            </span>
+            <span className="shrink-0 text-right">
+              <span className="block font-ds-mono text-xs text-text-secondary">
+                .{heading.cls}
+              </span>
+              <span className="block text-[11px] text-text-muted">
+                {heading.alias}
+              </span>
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function DescriptionRoleCard({
+  children,
+  colorToken,
+  name,
+  role,
+  typeToken,
+}: {
+  children: React.ReactNode
+  colorToken: string
+  name: string
+  role: React.ComponentProps<typeof DsDescription>['role']
+  typeToken: string
+}) {
+  return (
+    <div className="rounded-lg border border-border-default bg-background-surface p-4">
+      <div className="font-ds-display text-ds-heading-6 text-text-primary">
+        {name}
+      </div>
+      <DsDescription role={role} className="mt-2">
+        {children}
+      </DsDescription>
+      <div className="mt-4 font-ds-mono text-ds-mono-2xs text-text-muted">
+        {typeToken} · {colorToken}
+      </div>
+    </div>
+  )
+}
+
 function FamilyCard({
   name,
   token,
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 277c2bb6f..0a743eaad 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { Link, createFileRoute } from '@tanstack/react-router'
 
-import discordImage from '~/images/discord-logo-white.svg'
 import { twMerge } from 'tailwind-merge'
 
 import {
@@ -10,10 +9,10 @@ import {
   Stack,
   Shield,
   Lightning,
+  Pause,
   Play,
   type Icon,
 } from '@phosphor-icons/react'
-import { YouTubeIcon } from '~/components/icons/YouTubeIcon'
 import { HomeApplicationStarter } from '~/components/home/HomeApplicationStarter'
 import { HomeCommunitySection } from '~/components/home/HomeCommunitySection'
 import { HomeNewsletterSection } from '~/components/home/HomeNewsletterSection'
@@ -72,44 +71,24 @@ function Index() {
               headline bottom-left, description + CTA bottom-right. The photo is
               always light, so text uses a mode-stable dark token (neutral-500)
               rather than a theme-flipping semantic. */}
-          <div className="w-full">
-            <div className="relative isolate flex h-[calc(100dvh-var(--navbar-height))] max-h-[720px] min-h-[560px] flex-col justify-between gap-8 px-6 py-10 sm:px-10 xl:flex-row xl:items-end xl:justify-between xl:gap-12 xl:px-16 xl:py-16">
-              {/* Wrapper carries the 8px inset + squircle clip so the <img>
-                  (which has intrinsic width/height) fills it exactly instead of
-                  overflowing the right/bottom. Plain <img> (not OptimizedImage):
+          <div className="mx-2 rounded-2xl bg-background-subtle p-1">
+            <div className="group relative isolate flex h-[calc(100dvh-var(--navbar-height))] max-h-[720px] min-h-[560px] flex-col justify-between gap-8 overflow-hidden rounded-xl px-6 py-10 sm:px-10 md:flex-row md:items-end md:justify-between md:gap-8 xl:gap-12 xl:px-16 xl:py-16">
+              {/* The parent supplies the 4px frame shared by the hero and stats.
+                  This wrapper clips the image to the inner radius so the <img>
+                  fills it exactly instead of overflowing. Plain <img> (not OptimizedImage):
                   the Cloudflare transform resolves against the production origin,
                   so a newly-added asset 404s until deployed. */}
-              <div
-                aria-hidden
-                className="absolute inset-2 -z-10 overflow-hidden rounded-[2rem] [corner-shape:squircle]"
-              >
-                <picture className="contents">
-                  <source
-                    type="image/webp"
-                    srcSet="/images/hero-palm-gradient-960.webp 960w, /images/hero-palm-gradient-1600.webp 1600w, /images/hero-palm-gradient-2400.webp 2400w"
-                    sizes="100vw"
-                  />
-                  <img
-                    src="/images/hero-palm-gradient.jpg"
-                    alt=""
-                    width={2400}
-                    height={1600}
-                    loading="eager"
-                    fetchPriority="high"
-                    className="h-full w-full object-cover object-center"
-                  />
-                </picture>
-              </div>
-              <h1 className="max-w-[613px] font-ds-display text-ds-display-sm font-bold text-ds-neutral-500 sm:text-ds-display-md lg:text-ds-display-lg xl:text-ds-display-xl">
+              <HeroPalmMedia />
+              <h1 className="max-w-[613px] font-ds-display text-ds-display-sm font-bold text-ds-neutral-500 md:w-[47%] md:text-[clamp(2.5rem,4.7vw,4rem)] md:leading-[1.1] xl:leading-[1.08]">
                 The{' '}
                 <span className="underline decoration-from-font underline-offset-[6px]">
                   open source
-                </span>{' '}
-                application stack for the web
+                </span>
+                <br className="hidden md:block" /> the application stack
+                <br className="hidden md:block" /> for the web
               </h1>
-              <div className="flex flex-col items-start gap-6 xl:max-w-[454px]">
-                <HomeStatsSection />
-                <p className="text-ds-body-md text-ds-neutral-500 xl:text-ds-body-xl">
+              <div className="flex flex-col items-start gap-6 md:w-[29%] md:max-w-[454px]">
+                <p className="text-ds-body-md text-ds-neutral-500 [text-shadow:0_3px_10px_rgb(255_255_255/0.1)] md:text-ds-body-lg md:[text-shadow:none] xl:text-ds-body-xl">
                   Headless, type-safe, composable tools for building modern web
                   applications that work naturally for developers and reliably
                   for agents
@@ -138,6 +117,9 @@ function Index() {
                 </div>
               </div>
             </div>
+            <div className="flex items-center justify-center px-2.5 py-6">
+              <HomeStatsSection />
+            </div>
           </div>
           <div
             id="start-with-a-prompt"
@@ -153,100 +135,6 @@ function Index() {
 
         <HomeCommunitySection />
 
-        <div className="px-4 mx-auto max-w-(--breakpoint-lg)">
-          <div
-            className={`
-          rounded-md p-4 grid gap-6
-          bg-discord text-white overflow-hidden relative
-          shadow-xl shadow-indigo-700/30
-          sm:p-8 sm:grid-cols-3 items-center`}
-          >
-            <div
-              className={`absolute transform opacity-10 z-0
-            right-0 top-0 -translate-y-1/3 translate-x-1/3
-            sm:opacity-20`}
-            >
-              <img
-                src={discordImage}
-                alt="Discord Logo"
-                loading="lazy"
-                width={300}
-                height={300}
-              />
-            </div>
-            <div className={`sm:col-span-2`}>
-              <h3 id="discord" className="text-3xl font-bold scroll-mt-24">
-                <a
-                  href="#discord"
-                  className="hover:underline decoration-white/50"
-                >
-                  TanStack on Discord
-                </a>
-              </h3>
-              <p className={`mt-4`}>
-                The official TanStack community to ask questions, network and
-                make new friends and get lightning fast news about what's coming
-                next for TanStack!
-              </p>
-            </div>
-            <div className={`flex items-center justify-center`}>
-              <Button
-                as="a"
-                href="https://discord.com/invite/WrRKjPJ"
-                target="_blank"
-                rel="noreferrer"
-                className="w-full mt-4 bg-white border-white hover:bg-gray-100 text-discord justify-center shadow-lg text-sm"
-              >
-                Join TanStack Discord
-              </Button>
-            </div>
-          </div>
-        </div>
-
-        <div className="px-4 mx-auto max-w-(--breakpoint-lg)">
-          <div
-            className={`
-          rounded-md p-4 grid gap-6
-          bg-gradient-to-br from-red-500 to-red-700 text-white overflow-hidden relative
-          shadow-xl shadow-red-700/30
-          sm:p-8 sm:grid-cols-3 items-center`}
-          >
-            <div
-              className={`absolute transform opacity-10 z-0
-            right-0 top-0 -translate-y-1/3 translate-x-1/3
-            sm:opacity-20`}
-            >
-              <YouTubeIcon width={300} height={300} />
-            </div>
-            <div className={`sm:col-span-2`}>
-              <h3 id="youtube" className="text-3xl font-bold scroll-mt-24">
-                <a
-                  href="#youtube"
-                  className="hover:underline decoration-white/50"
-                >
-                  TanStack on YouTube
-                </a>
-              </h3>
-              <p className={`mt-4`}>
-                The official TanStack YouTube channel. Tutorials, deep dives,
-                release walkthroughs, and more — free for everyone!
-              </p>
-            </div>
-            <div className={`flex items-center justify-center`}>
-              <Button
-                as="a"
-                href="https://youtube.com/@tan_stack"
-                target="_blank"
-                rel="noreferrer"
-                className="w-full mt-4 bg-white border-white hover:bg-gray-100 text-red-600 justify-center shadow-lg text-sm"
-              >
-                <Play className="w-4 h-4" />
-                Subscribe on YouTube
-              </Button>
-            </div>
-          </div>
-        </div>
-
         <div className="h-4" />
         <HomeNewsletterSection />
       </div>
@@ -254,6 +142,88 @@ function Index() {
   )
 }
 
+function HeroPalmMedia() {
+  const videoRef = React.useRef<HTMLVideoElement>(null)
+  const [isPlaying, setIsPlaying] = React.useState(true)
+
+  React.useEffect(() => {
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')
+
+    const syncMotionPreference = () => {
+      if (reducedMotion.matches) {
+        videoRef.current?.pause()
+      }
+    }
+
+    syncMotionPreference()
+    reducedMotion.addEventListener('change', syncMotionPreference)
+    return () =>
+      reducedMotion.removeEventListener('change', syncMotionPreference)
+  }, [])
+
+  const togglePlayback = () => {
+    const video = videoRef.current
+    if (!video) return
+
+    if (video.paused) {
+      void video.play()
+    } else {
+      video.pause()
+    }
+  }
+
+  return (
+    <>
+      <div
+        aria-hidden
+        className="absolute inset-0 -z-10 overflow-hidden rounded-xl [corner-shape:squircle]"
+      >
+        <picture className="contents">
+          <source
+            type="image/webp"
+            srcSet="/images/hero-palm-gradient-960.webp 960w, /images/hero-palm-gradient-1600.webp 1600w, /images/hero-palm-gradient-2400.webp 2400w"
+            sizes="100vw"
+          />
+          <img
+            src="/images/hero-palm-gradient.jpg"
+            alt=""
+            width={2400}
+            height={1600}
+            loading="eager"
+            fetchPriority="high"
+            className="h-full w-full object-cover object-center"
+          />
+        </picture>
+        <video
+          ref={videoRef}
+          autoPlay
+          loop
+          muted
+          playsInline
+          poster="/images/hero-palm-gradient.jpg"
+          onPause={() => setIsPlaying(false)}
+          onPlay={() => setIsPlaying(true)}
+          className="absolute inset-0 h-full w-full object-cover object-center motion-reduce:hidden"
+        >
+          <source src="/images/hero-palm-motion.mp4" type="video/mp4" />
+        </video>
+      </div>
+      <button
+        type="button"
+        onClick={togglePlayback}
+        aria-label={isPlaying ? 'Pause hero animation' : 'Play hero animation'}
+        className="absolute right-4 top-4 z-20 grid size-8 place-items-center rounded-full bg-ds-neutral-500/65 text-white opacity-0 backdrop-blur-sm transition-opacity hover:bg-ds-neutral-500/80 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white group-hover:opacity-100 motion-reduce:hidden"
+      >
+        {isPlaying ? (
+          <Pause className="size-4" weight="fill" />
+        ) : (
+          <Play className="size-4" weight="fill" />
+        )}
+      </button>
+    </>
+  )
+}
+
 type PrincipleProof = 'adapters' | 'types' | 'adoption' | 'portable'
 
 type WhyTanStackPrinciple = {
diff --git a/src/routes/maintainers.tsx b/src/routes/maintainers.tsx
index 2914fe93b..7ecf3605f 100644
--- a/src/routes/maintainers.tsx
+++ b/src/routes/maintainers.tsx
@@ -27,7 +27,7 @@ const sortBySchema = v.picklist(['none', 'name', 'role', 'contributions'])
 
 const searchSchema = v.object({
   libraries: v.fallback(v.optional(v.array(libraryIdSchema)), undefined),
-  viewMode: v.fallback(v.optional(viewModeSchema, 'compact'), 'compact'),
+  viewMode: v.fallback(v.optional(viewModeSchema, 'full'), 'full'),
   groupBy: v.fallback(v.optional(groupBySchema, 'none'), 'none'),
   sortBy: v.fallback(v.optional(sortBySchema, 'none'), 'none'),
 })
diff --git a/src/routes/paid-support.tsx b/src/routes/paid-support.tsx
index 1a3892b43..48203684b 100644
--- a/src/routes/paid-support.tsx
+++ b/src/routes/paid-support.tsx
@@ -25,9 +25,7 @@ export const Route = createFileRoute('/paid-support')({
 })
 
 function PaidSupportComp() {
-  const [viewMode, setViewMode] = useState<'compact' | 'full' | 'row'>(
-    'compact',
-  )
+  const [viewMode, setViewMode] = useState<'compact' | 'full' | 'row'>('full')
 
   return (
     <>
diff --git a/src/styles/app.css b/src/styles/app.css
index ad7505425..b71d9108a 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -286,7 +286,7 @@ html.theme-switching *::after {
   --color-border-error: var(--color-ds-terracotta-400);
   --color-border-success: var(--color-ds-green-400);
 
-  --color-icon-default: var(--color-ds-neutral-400);
+  --color-icon-default: var(--color-ds-neutral-500);
   --color-icon-accent: var(--color-ds-blue-500);
   --color-icon-muted: var(--color-ds-neutral-300);
   --color-icon-inverse: #ffffff;
@@ -566,14 +566,67 @@ html.dark {
   /* Interaction-state overlays — white tints for dark surfaces (Figma values
      used directly where provided: input/background/hover, menu/item/pressed,
      divider/subtle). */
-  --color-surface-state-hover: #ffffff14; /* white 8% */
-  --color-surface-state-pressed: #ffffff1f; /* white 12% */
+  --color-surface-state-hover: #ffffff1f; /* white 12% */
+  --color-surface-state-pressed: #ffffff29; /* white 16% */
   --color-input-bg-hover: #ffffff0a; /* white 4% */
   --color-menu-item-pressed: #ffffff1f; /* white 12% */
   --color-divider-subtle: #1e1e1e;
   --color-divider-on-inverse: #1e1e1e;
 }
 
+/* Fixed theme scopes for side-by-side design-system specimens. These mirror
+   the semantic values above so previews can show both modes independently of
+   the active site theme. */
+.ds-mode-light {
+  color-scheme: light;
+  --color-text-primary: var(--color-ds-neutral-500);
+  --color-text-secondary: var(--color-ds-neutral-400);
+  --color-text-muted: var(--color-ds-neutral-300);
+  --color-text-inverse: #ffffff;
+  --color-background-default: #ffffff;
+  --color-background-surface: #ffffff;
+  --color-background-subtle: #fafafa;
+  --color-background-inverse: var(--color-ds-neutral-500);
+  --color-border-default: var(--color-ds-neutral-200);
+  --color-border-subtle: var(--color-ds-neutral-100);
+  --color-border-strong: var(--color-ds-neutral-400);
+  --color-border-focus: var(--color-ds-blue-400);
+  --color-action-secondary: var(--color-ds-neutral-100);
+  --color-action-secondary-hover: var(--color-ds-neutral-200);
+  --color-category-framework: var(--color-ds-green-400);
+  --color-category-data: var(--color-ds-terracotta-400);
+  --color-category-ui: var(--color-ds-blue-400);
+  --color-category-performance: var(--color-ds-amber-400);
+  --color-category-tooling: var(--color-ds-neutral-400);
+  --color-surface-state-hover: #1111110f;
+  --color-surface-state-pressed: #1111111f;
+}
+
+.ds-mode-dark {
+  color-scheme: dark;
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #aea691;
+  --color-text-muted: #756c5b;
+  --color-text-inverse: #111111;
+  --color-background-default: #111111;
+  --color-background-surface: #1f1f1f;
+  --color-background-subtle: #1b1b1b;
+  --color-background-inverse: #ffffff;
+  --color-border-default: #2d2d2d;
+  --color-border-subtle: #232323;
+  --color-border-strong: #aea691;
+  --color-border-focus: #61adbf;
+  --color-action-secondary: #2b2b2b;
+  --color-action-secondary-hover: #3a3a3a;
+  --color-category-framework: var(--color-ds-green-300);
+  --color-category-data: var(--color-ds-terracotta-300);
+  --color-category-ui: var(--color-ds-blue-300);
+  --color-category-performance: var(--color-ds-amber-300);
+  --color-category-tooling: var(--color-ds-neutral-200);
+  --color-surface-state-hover: #ffffff1f;
+  --color-surface-state-pressed: #ffffff29;
+}
+
 /* Safelist for dynamic colors */
 @source inline('{bg-blue-{4,5,6}00,bg-emerald-500,bg-purple-500,bg-pink-500,bg-cyan-500,bg-slate-{4,5}00,bg-twine-700,bg-orange-{5,6,7}00,bg-yellow-500,bg-lime-700,bg-red-500,bg-green-500}/{20,30,40,80}');
 @source inline('{hover:{bg-blue-{4,5,6}00,bg-emerald-500,bg-purple-500,bg-pink-500,bg-cyan-500,bg-slate-{4,5}00,bg-twine-700,bg-orange-{5,6,7}00,bg-yellow-500,bg-lime-700,bg-red-500,bg-green-500}/40}');
@@ -748,12 +801,51 @@ button {
   transition-delay: 0s;
 }
 
+@keyframes mobile-mega-menu-item-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+    filter: blur(2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0);
+  }
+}
+
+.mobile-mega-menu-enter .mobile-mega-menu-enter-item {
+  animation: mobile-mega-menu-item-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+  animation-delay: 40ms;
+}
+
+.mobile-mega-menu-enter .mobile-mega-menu-enter-item:nth-child(2) {
+  animation-delay: 60ms;
+}
+
+.mobile-mega-menu-enter .mobile-mega-menu-enter-item:nth-child(3) {
+  animation-delay: 80ms;
+}
+
+.mobile-mega-menu-enter .mobile-mega-menu-enter-item:nth-child(4) {
+  animation-delay: 100ms;
+}
+
+.mobile-mega-menu-enter .mobile-mega-menu-enter-item:nth-child(5) {
+  animation-delay: 120ms;
+}
+
+.mobile-mega-menu-enter .mobile-mega-menu-enter-item:nth-child(n + 6) {
+  animation-delay: 140ms;
+}
+
 .ts-mega-dropdown-panel {
   position: relative;
   isolation: isolate;
   background-color: color-mix(
     in srgb,
-    var(--color-background-subtle) 95%,
+    var(--color-background-default) 95%,
     transparent
   );
   backdrop-filter: blur(6px);
@@ -958,6 +1050,10 @@ button {
   .ts-mega-dropdown {
     transition: none;
   }
+
+  .mobile-mega-menu-enter .mobile-mega-menu-enter-item {
+    animation: none;
+  }
 }
 
 @layer base {
diff --git a/src/ui/Badge.tsx b/src/ui/Badge.tsx
index 5b4556c92..a5b70f4f9 100644
--- a/src/ui/Badge.tsx
+++ b/src/ui/Badge.tsx
@@ -13,6 +13,7 @@ type BadgeVariant =
 type BadgeProps = {
   children: React.ReactNode
   variant?: BadgeVariant
+  rounded?: 'md' | 'full'
   className?: string
 }
 
@@ -32,12 +33,14 @@ const variantStyles: Record<BadgeVariant, string> = {
 export function Badge({
   children,
   variant = 'default',
+  rounded = 'full',
   className,
 }: BadgeProps) {
   return (
     <span
       className={twMerge(
-        'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
+        'inline-flex items-center px-2 py-1 text-xs font-medium',
+        rounded === 'full' ? 'rounded-full' : 'rounded-md',
         variantStyles[variant],
         className,
       )}
diff --git a/src/ui/Tooltip.tsx b/src/ui/Tooltip.tsx
index c0ebb7b0c..bf9fa6e44 100644
--- a/src/ui/Tooltip.tsx
+++ b/src/ui/Tooltip.tsx
@@ -38,6 +38,7 @@ export function Tooltip({
               'shadow-lg',
               'animate-in fade-in-0 zoom-in-95',
               'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+              '[transform-origin:var(--radix-tooltip-content-transform-origin)] motion-reduce:animate-none',
               className,
             )}
           >