From c5d4b5f71a412a468f2b325f7feb8a8b9c124b62 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 20:20:10 -0700
Subject: [PATCH] [eric] settings: rows become Apple-style contained cards via
 the shared style tokens

---
 .../pages/Settings/sections/settingsStyles.ts | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/pages/Settings/sections/settingsStyles.ts b/frontend/src/app/pages/Settings/sections/settingsStyles.ts
index be207670..b57775ab 100644
--- a/frontend/src/app/pages/Settings/sections/settingsStyles.ts
+++ b/frontend/src/app/pages/Settings/sections/settingsStyles.ts
@@ -8,21 +8,28 @@ export function makeSettingsStyles(c: any) {
 
   const sectionSx = {
     fontSize: '0.6875rem',
-    fontWeight: 600,
-    letterSpacing: '0.06em',
+    fontWeight: 700,
+    letterSpacing: '0.07em',
     textTransform: 'uppercase' as const,
-    color: c.text.tertiary,
-    mb: 0.5,
-    mt: 0.5,
+    color: c.text.muted,
+    mb: 1,
+    mt: 2.5,
+    px: 0.5,
   };
 
+  // Apple/ChatGPT settings grammar: each row is its own soft contained chip, not a hairline in a
+  // long scroll; the pane reads as a stack of quiet cards.
   const rowSx = {
-    py: 2,
-    borderBottom: `1px solid ${c.border.subtle}`,
+    px: 2,
+    py: 1.5,
+    mb: 1,
+    bgcolor: c.bg.surface,
+    border: `1px solid ${c.border.subtle}`,
+    borderRadius: '10px',
   };
 
   const rowLastSx = {
-    py: 2,
+    ...rowSx,
   };
 
   const inlineRowSx = {