diff --git a/apps/web/src/app/settings/settings.component.scss b/apps/web/src/app/settings/settings.component.scss
index 4c6c0db57..14386f6b9 100644
--- a/apps/web/src/app/settings/settings.component.scss
+++ b/apps/web/src/app/settings/settings.component.scss
@@ -64,36 +64,33 @@
     gap: 16px;
 }
 
+// Flat section — no panel chrome. The v0.22 mockup treats Settings as a
+// single scroll column with each section anchored by a large title +
+// bottom-border separator. The previous card frame (border-radius 22px,
+// filled bg, box-shadow, active-state ring + icon-circle) made every
+// section look like a feature card, which fought the inline form rhythm.
 .settings-group {
     position: relative;
-    background: var(--settings-group-bg);
-    overflow: hidden;
-    scroll-margin-top: 24px;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    overflow: visible;
     padding: 0;
-    border: 1px solid var(--settings-group-border);
-    border-radius: 22px;
-    box-shadow: var(--settings-group-shadow);
-    transition:
-        background 0.2s ease,
-        box-shadow 0.2s ease,
-        border-color 0.2s ease;
+    margin-top: 24px;
+    scroll-margin-top: 24px;
+    transition: none;
+
+    &:first-of-type {
+        margin-top: 0;
+    }
 }
 
+// The active section no longer gets a ring/shadow — the rail's active
+// state on the left already announces "you are here". Title still
+// colours to the accent so users scanning the right pane don't lose the
+// anchor.
 .settings-group--active {
-    background: var(--settings-group-active-bg);
-    border-color: var(--settings-group-active-ring);
-    box-shadow: var(--settings-group-active-shadow);
-
-    .settings-group__header-icon {
-        background: color-mix(
-            in srgb,
-            var(--app-selection-surface-strong) 70%,
-            var(--mat-sys-surface-container-high)
-        );
-        color: var(--app-selection-color);
-        border-color: var(--settings-group-active-ring);
-    }
-
     .settings-group__header-text h3 {
         color: var(--app-selection-color);
     }
@@ -101,46 +98,33 @@
 
 .settings-group__header {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: 14px;
-    padding: 16px 18px 14px;
+    padding: 4px 0 18px;
+    margin: 0 0 8px;
+    border-bottom: 1px solid var(--settings-item-border);
 
+    // Icon-circle removed per UX-audit recommendation (the section title
+    // is the anchor, not a card). Hidden rather than ripped out of every
+    // section template so the existing markup stays untouched.
     .settings-group__header-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 40px;
-        height: 40px;
-        flex-shrink: 0;
-        border: 1px solid
-            color-mix(in srgb, var(--mat-sys-outline-variant) 74%, transparent);
-        border-radius: 12px;
-        background: color-mix(
-            in srgb,
-            var(--mat-sys-surface-container-high) 78%,
-            transparent
-        );
-        color: var(--mat-sys-on-surface-variant);
-
-        mat-icon {
-            font-size: 20px;
-            width: 20px;
-            height: 20px;
-        }
+        display: none;
     }
 
     .settings-group__header-text {
         h3 {
             margin: 0;
-            font-size: 1.08rem;
-            font-weight: 700;
-            letter-spacing: -0.02em;
+            font-size: 1.5rem;
+            font-weight: 600;
+            letter-spacing: -0.015em;
+            line-height: 1.2;
+            color: var(--app-heading-color);
         }
 
         p {
-            margin: 2px 0 0;
-            color: var(--settings-muted);
-            font-size: 0.84rem;
+            margin: 6px 0 0;
+            color: var(--app-body-color);
+            font-size: 0.92rem;
             line-height: 1.45;
         }
     }
@@ -151,15 +135,23 @@
     border-top: 1px solid var(--settings-item-border);
 }
 
+// Row layout — flat list aligned to the section title (no inset). The
+// previous `margin: 0 18px` came from the card chrome; now that each
+// section is a flat block, rows sit at the same gutter as the title.
 .setting-item {
     display: grid;
     grid-template-columns: minmax(0, 1.15fr) minmax(220px, 340px);
     gap: 14px;
-    margin: 0 18px;
-    padding: 14px 0;
+    margin: 0;
+    padding: 18px 0;
     border-top: 1px solid var(--settings-item-border);
     background: transparent;
 
+    &:first-of-type {
+        border-top: 0;
+        padding-top: 8px;
+    }
+
     &:last-of-type {
         margin-bottom: 0;
     }
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-settings-context-panel.component.scss b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-settings-context-panel.component.scss
index ea949a985..1b56b6755 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-settings-context-panel.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-settings-context-panel.component.scss
@@ -7,12 +7,21 @@
     overflow: hidden;
 }
 
+// Quiet mono eyebrow per the v0.22 mockup — replaces the previous bold
+// 20px h2 that competed with the section headers on the right pane for
+// "biggest text on screen". The rail is now a scannable list; the section
+// titles on the right are the dominant heading.
 .panel-title {
     margin: 0;
-    padding: 16px 16px 0;
-    font-size: 20px;
+    padding: 20px 18px 12px;
+    font-family:
+        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas,
+        monospace;
+    font-size: 11px;
     font-weight: 500;
-    color: var(--mat-sys-on-surface);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--mat-sys-on-surface-variant);
 }
 
 .settings-panel-body {