diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md
index daa73c3..6c5a917 100644
--- a/frontend/CLAUDE.md
+++ b/frontend/CLAUDE.md
@@ -109,10 +109,12 @@ status field. That's what makes honest history and excuse analysis possible.
 
 ## 6. Design language
 
-See `design.md`. In short: black chrome → white sheet with a 28 radius →
-oversized **Light** display title → tiny grey all-caps labels above values.
+See `design.md`. In short: sage-to-cream ambient backdrop, frosted glass
+controls, painted `SceneArt` instead of photos, image-led cards, two-tone
+greetings, night pills with a lime spark.
 
-- Every screen is built from `Sheet` (`designs/Shell.dart`).
+- Screens are built from `Sheet` (`designs/Shell.dart`); Home, Routines and
+  the routine player compose `AmbientBackground` + glass directly.
 - Display titles are `TextType.Light`. Bold is for labels and metrics only.
 - Never raw `Text`/`TextStyle` — use `text()` from `designs/text/Text.dart`.
 - Never inline hex — use `utils/Colors.dart`.
diff --git a/frontend/android/app/src/main/res/drawable-hdpi/android12splash.png b/frontend/android/app/src/main/res/drawable-hdpi/android12splash.png
index 2d047e4..1b9f27d 100644
Binary files a/frontend/android/app/src/main/res/drawable-hdpi/android12splash.png and b/frontend/android/app/src/main/res/drawable-hdpi/android12splash.png differ
diff --git a/frontend/android/app/src/main/res/drawable-hdpi/ic_launcher_foreground.png b/frontend/android/app/src/main/res/drawable-hdpi/ic_launcher_foreground.png
index 80bc7cf..ad9fb45 100644
Binary files a/frontend/android/app/src/main/res/drawable-hdpi/ic_launcher_foreground.png and b/frontend/android/app/src/main/res/drawable-hdpi/ic_launcher_foreground.png differ
diff --git a/frontend/android/app/src/main/res/drawable-hdpi/splash.png b/frontend/android/app/src/main/res/drawable-hdpi/splash.png
index adc1931..1b9f27d 100644
Binary files a/frontend/android/app/src/main/res/drawable-hdpi/splash.png and b/frontend/android/app/src/main/res/drawable-hdpi/splash.png differ
diff --git a/frontend/android/app/src/main/res/drawable-mdpi/android12splash.png b/frontend/android/app/src/main/res/drawable-mdpi/android12splash.png
index fa747f7..ceeb52d 100644
Binary files a/frontend/android/app/src/main/res/drawable-mdpi/android12splash.png and b/frontend/android/app/src/main/res/drawable-mdpi/android12splash.png differ
diff --git a/frontend/android/app/src/main/res/drawable-mdpi/ic_launcher_foreground.png b/frontend/android/app/src/main/res/drawable-mdpi/ic_launcher_foreground.png
index 9a6e840..5952220 100644
Binary files a/frontend/android/app/src/main/res/drawable-mdpi/ic_launcher_foreground.png and b/frontend/android/app/src/main/res/drawable-mdpi/ic_launcher_foreground.png differ
diff --git a/frontend/android/app/src/main/res/drawable-mdpi/splash.png b/frontend/android/app/src/main/res/drawable-mdpi/splash.png
index 92ef668..ceeb52d 100644
Binary files a/frontend/android/app/src/main/res/drawable-mdpi/splash.png and b/frontend/android/app/src/main/res/drawable-mdpi/splash.png differ
diff --git a/frontend/android/app/src/main/res/drawable-night-hdpi/android12splash.png b/frontend/android/app/src/main/res/drawable-night-hdpi/android12splash.png
index 2d047e4..1b9f27d 100644
Binary files a/frontend/android/app/src/main/res/drawable-night-hdpi/android12splash.png and b/frontend/android/app/src/main/res/drawable-night-hdpi/android12splash.png differ
diff --git a/frontend/android/app/src/main/res/drawable-night-mdpi/android12splash.png b/frontend/android/app/src/main/res/drawable-night-mdpi/android12splash.png
index fa747f7..ceeb52d 100644
Binary files a/frontend/android/app/src/main/res/drawable-night-mdpi/android12splash.png and b/frontend/android/app/src/main/res/drawable-night-mdpi/android12splash.png differ
diff --git a/frontend/android/app/src/main/res/drawable-night-xhdpi/android12splash.png b/frontend/android/app/src/main/res/drawable-night-xhdpi/android12splash.png
index 3c00d5f..2167bfa 100644
Binary files a/frontend/android/app/src/main/res/drawable-night-xhdpi/android12splash.png and b/frontend/android/app/src/main/res/drawable-night-xhdpi/android12splash.png differ
diff --git a/frontend/android/app/src/main/res/drawable-night-xxhdpi/android12splash.png b/frontend/android/app/src/main/res/drawable-night-xxhdpi/android12splash.png
index a28a19f..d9af843 100644
Binary files a/frontend/android/app/src/main/res/drawable-night-xxhdpi/android12splash.png and b/frontend/android/app/src/main/res/drawable-night-xxhdpi/android12splash.png differ
diff --git a/frontend/android/app/src/main/res/drawable-night-xxxhdpi/android12splash.png b/frontend/android/app/src/main/res/drawable-night-xxxhdpi/android12splash.png
index 043fa99..4c0013a 100644
Binary files a/frontend/android/app/src/main/res/drawable-night-xxxhdpi/android12splash.png and b/frontend/android/app/src/main/res/drawable-night-xxxhdpi/android12splash.png differ
diff --git a/frontend/android/app/src/main/res/drawable-v21/background.png b/frontend/android/app/src/main/res/drawable-v21/background.png
index cb0e069..2bb1952 100644
Binary files a/frontend/android/app/src/main/res/drawable-v21/background.png and b/frontend/android/app/src/main/res/drawable-v21/background.png differ
diff --git a/frontend/android/app/src/main/res/drawable-xhdpi/android12splash.png b/frontend/android/app/src/main/res/drawable-xhdpi/android12splash.png
index 3c00d5f..2167bfa 100644
Binary files a/frontend/android/app/src/main/res/drawable-xhdpi/android12splash.png and b/frontend/android/app/src/main/res/drawable-xhdpi/android12splash.png differ
diff --git a/frontend/android/app/src/main/res/drawable-xhdpi/ic_launcher_foreground.png b/frontend/android/app/src/main/res/drawable-xhdpi/ic_launcher_foreground.png
index 2ea8b4d..5a548f3 100644
Binary files a/frontend/android/app/src/main/res/drawable-xhdpi/ic_launcher_foreground.png and b/frontend/android/app/src/main/res/drawable-xhdpi/ic_launcher_foreground.png differ
diff --git a/frontend/android/app/src/main/res/drawable-xhdpi/splash.png b/frontend/android/app/src/main/res/drawable-xhdpi/splash.png
index ee90019..2167bfa 100644
Binary files a/frontend/android/app/src/main/res/drawable-xhdpi/splash.png and b/frontend/android/app/src/main/res/drawable-xhdpi/splash.png differ
diff --git a/frontend/android/app/src/main/res/drawable-xxhdpi/android12splash.png b/frontend/android/app/src/main/res/drawable-xxhdpi/android12splash.png
index a28a19f..d9af843 100644
Binary files a/frontend/android/app/src/main/res/drawable-xxhdpi/android12splash.png and b/frontend/android/app/src/main/res/drawable-xxhdpi/android12splash.png differ
diff --git a/frontend/android/app/src/main/res/drawable-xxhdpi/ic_launcher_foreground.png b/frontend/android/app/src/main/res/drawable-xxhdpi/ic_launcher_foreground.png
index a95c3ef..5ef632e 100644
Binary files a/frontend/android/app/src/main/res/drawable-xxhdpi/ic_launcher_foreground.png and b/frontend/android/app/src/main/res/drawable-xxhdpi/ic_launcher_foreground.png differ
diff --git a/frontend/android/app/src/main/res/drawable-xxhdpi/splash.png b/frontend/android/app/src/main/res/drawable-xxhdpi/splash.png
index 0c41fdb..d9af843 100644
Binary files a/frontend/android/app/src/main/res/drawable-xxhdpi/splash.png and b/frontend/android/app/src/main/res/drawable-xxhdpi/splash.png differ
diff --git a/frontend/android/app/src/main/res/drawable-xxxhdpi/android12splash.png b/frontend/android/app/src/main/res/drawable-xxxhdpi/android12splash.png
index 043fa99..4c0013a 100644
Binary files a/frontend/android/app/src/main/res/drawable-xxxhdpi/android12splash.png and b/frontend/android/app/src/main/res/drawable-xxxhdpi/android12splash.png differ
diff --git a/frontend/android/app/src/main/res/drawable-xxxhdpi/ic_launcher_foreground.png b/frontend/android/app/src/main/res/drawable-xxxhdpi/ic_launcher_foreground.png
index 429a9c1..3a66bde 100644
Binary files a/frontend/android/app/src/main/res/drawable-xxxhdpi/ic_launcher_foreground.png and b/frontend/android/app/src/main/res/drawable-xxxhdpi/ic_launcher_foreground.png differ
diff --git a/frontend/android/app/src/main/res/drawable-xxxhdpi/splash.png b/frontend/android/app/src/main/res/drawable-xxxhdpi/splash.png
index 82f7f01..4c0013a 100644
Binary files a/frontend/android/app/src/main/res/drawable-xxxhdpi/splash.png and b/frontend/android/app/src/main/res/drawable-xxxhdpi/splash.png differ
diff --git a/frontend/android/app/src/main/res/drawable/background.png b/frontend/android/app/src/main/res/drawable/background.png
index cb0e069..2bb1952 100644
Binary files a/frontend/android/app/src/main/res/drawable/background.png and b/frontend/android/app/src/main/res/drawable/background.png differ
diff --git a/frontend/android/app/src/main/res/mipmap-hdpi/ic_launcher.png b/frontend/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
index 5822822..2f410f1 100644
Binary files a/frontend/android/app/src/main/res/mipmap-hdpi/ic_launcher.png and b/frontend/android/app/src/main/res/mipmap-hdpi/ic_launcher.png differ
diff --git a/frontend/android/app/src/main/res/mipmap-mdpi/ic_launcher.png b/frontend/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
index fede849..e36c1dc 100644
Binary files a/frontend/android/app/src/main/res/mipmap-mdpi/ic_launcher.png and b/frontend/android/app/src/main/res/mipmap-mdpi/ic_launcher.png differ
diff --git a/frontend/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png b/frontend/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
index fd9748f..35e1825 100644
Binary files a/frontend/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png and b/frontend/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png differ
diff --git a/frontend/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png b/frontend/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
index 5c85366..4c76d3a 100644
Binary files a/frontend/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png and b/frontend/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png differ
diff --git a/frontend/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png b/frontend/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
index 0189403..bebf07a 100644
Binary files a/frontend/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png and b/frontend/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png differ
diff --git a/frontend/android/app/src/main/res/values-night-v31/styles.xml b/frontend/android/app/src/main/res/values-night-v31/styles.xml
index e051d71..48b8460 100644
--- a/frontend/android/app/src/main/res/values-night-v31/styles.xml
+++ b/frontend/android/app/src/main/res/values-night-v31/styles.xml
@@ -6,9 +6,9 @@
         <item name="android:windowFullscreen">false</item>
         <item name="android:windowDrawsSystemBarBackgrounds">false</item>
         <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
-        <item name="android:windowSplashScreenBackground">#141414</item>
+        <item name="android:windowSplashScreenBackground">#EAEFE6</item>
         <item name="android:windowSplashScreenAnimatedIcon">@drawable/android12splash</item>
-        <item name="android:windowSplashScreenIconBackgroundColor">#141414</item>
+        <item name="android:windowSplashScreenIconBackgroundColor">#EAEFE6</item>
     </style>
     <!-- Theme applied to the Android Window as soon as the process has started.
          This theme determines the color of the Android Window while your
diff --git a/frontend/android/app/src/main/res/values-v31/styles.xml b/frontend/android/app/src/main/res/values-v31/styles.xml
index 271e57e..5816be9 100644
--- a/frontend/android/app/src/main/res/values-v31/styles.xml
+++ b/frontend/android/app/src/main/res/values-v31/styles.xml
@@ -6,9 +6,9 @@
         <item name="android:windowFullscreen">false</item>
         <item name="android:windowDrawsSystemBarBackgrounds">false</item>
         <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
-        <item name="android:windowSplashScreenBackground">#141414</item>
+        <item name="android:windowSplashScreenBackground">#EAEFE6</item>
         <item name="android:windowSplashScreenAnimatedIcon">@drawable/android12splash</item>
-        <item name="android:windowSplashScreenIconBackgroundColor">#141414</item>
+        <item name="android:windowSplashScreenIconBackgroundColor">#EAEFE6</item>
     </style>
     <!-- Theme applied to the Android Window as soon as the process has started.
          This theme determines the color of the Android Window while your
diff --git a/frontend/android/app/src/main/res/values/colors.xml b/frontend/android/app/src/main/res/values/colors.xml
index cfde9b4..af50ded 100644
--- a/frontend/android/app/src/main/res/values/colors.xml
+++ b/frontend/android/app/src/main/res/values/colors.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#141414</color>
+    <color name="ic_launcher_background">#18211C</color>
 </resources>
\ No newline at end of file
diff --git a/frontend/assets/icons/icon.png b/frontend/assets/icons/icon.png
index 397b041..c0e1236 100644
Binary files a/frontend/assets/icons/icon.png and b/frontend/assets/icons/icon.png differ
diff --git a/frontend/assets/icons/icon_foreground.png b/frontend/assets/icons/icon_foreground.png
index 9c9d291..4480555 100644
Binary files a/frontend/assets/icons/icon_foreground.png and b/frontend/assets/icons/icon_foreground.png differ
diff --git a/frontend/assets/icons/splash_orb.png b/frontend/assets/icons/splash_orb.png
new file mode 100644
index 0000000..f114308
Binary files /dev/null and b/frontend/assets/icons/splash_orb.png differ
diff --git a/frontend/design.md b/frontend/design.md
index dd0aada..4536059 100644
--- a/frontend/design.md
+++ b/frontend/design.md
@@ -1,9 +1,34 @@
 # Grounded — Design Language
 
-Reference: black device chrome, a white content sheet that rises into it with a
-large corner radius, oversized light display titles, tiny grey all-caps metadata
-labels, pill chips, and a lot of whitespace. The app reads as a record, not a
-dashboard.
+Reference: an airy fitness-app look. Sage mist drifting into cream behind
+everything (`AmbientBackground`), frosted glass for controls and floating
+chrome (`GlassSurface`, `glassCircle`), ink type with a soft grey second
+tone, painted landscapes instead of photography (`SceneArt`), a floating
+glass tab bar with a dark round action button (`FloatingNav`), and one lime
+spark on night-green for the primary control.
+
+## Building blocks (`designs/`)
+
+| Piece | Use |
+|---|---|
+| `AmbientBackground` | The backdrop for every light screen. |
+| `GlassSurface` / `glassCircle` | Frosted panels and round controls; `onDark` over a scene or tinted stage. |
+| `SceneArt` | Painted sky, sun and ridges with an optional figure glyph. Palettes come from `scenePalette(kind)`, `goalScene(accent)`, `classScene(class)`; seed with `sceneSeed(title)` so an item always wears the same picture. |
+| `DotDigits` | The dotted clock in the routine player. |
+| `FloatingNav` | Home's tab bar and action button. |
+| `GroundedMark` | The logo, drawn — a lime sun on a ground line under two arcs. The launcher PNGs in `assets/icons/` were rendered from the same geometry. |
+
+Cards are image-led where an item has a kind (routines, goals, tasks): scene on
+top or as a thumbnail, white type over the shaded lower half, three light
+numbers along the bottom. Greetings are two-tone: Medium ink, then Regular
+`colorInkSoft`. Primary buttons are night pills with a lime icon.
+
+`Sheet` is light (ambient) by default; passing `chrome`, `banner` or
+`scene` gives a tinted stage with white type. Home, Routines and the player
+build their own layouts from the same pieces.
+
+The sections below describe the original record-style type scale, which still
+applies to labels and metrics.
 
 ## Type — General Sans
 
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png
index a999268..233543d 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png
index 71cf5dc..bb03764 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png
index e5b35a4..69f1e66 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png
index 5a65045..38efeda 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png
index a2b12ac..108de03 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png
index 295a5b9..2773ed1 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png
index c9d727a..ec1caa5 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png
index e5b35a4..69f1e66 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png
index 2a3ad33..e6ee8e2 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png
index 83188e4..99c367f 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-50x50@1x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-50x50@1x.png
index 8e3fae7..0e295bc 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-50x50@1x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-50x50@1x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-50x50@2x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-50x50@2x.png
index e06342e..17b81fd 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-50x50@2x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-50x50@2x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-57x57@1x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-57x57@1x.png
index 9e77e53..7f05dad 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-57x57@1x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-57x57@1x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-57x57@2x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-57x57@2x.png
index 82b7cad..6c2fed9 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-57x57@2x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-57x57@2x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png
index 83188e4..99c367f 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png
index bc5050b..8d188b2 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-72x72@1x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-72x72@1x.png
index 30279a8..2f410f1 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-72x72@1x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-72x72@1x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-72x72@2x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-72x72@2x.png
index 5f40e46..4c76d3a 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-72x72@2x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-72x72@2x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png
index 8184f8a..d6b7058 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png
index 0c4983d..82f965c 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png
index f67a3bd..221e602 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png and b/frontend/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/LaunchBackground.imageset/background.png b/frontend/ios/Runner/Assets.xcassets/LaunchBackground.imageset/background.png
index cb0e069..2bb1952 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/LaunchBackground.imageset/background.png and b/frontend/ios/Runner/Assets.xcassets/LaunchBackground.imageset/background.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png b/frontend/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png
index 92ef668..ceeb52d 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png and b/frontend/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png b/frontend/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png
index ee90019..2167bfa 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png and b/frontend/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png differ
diff --git a/frontend/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png b/frontend/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png
index 0c41fdb..d9af843 100644
Binary files a/frontend/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png and b/frontend/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png differ
diff --git a/frontend/lib/Grounded/designs/AmbientBackground.dart b/frontend/lib/Grounded/designs/AmbientBackground.dart
new file mode 100644
index 0000000..9432c3c
--- /dev/null
+++ b/frontend/lib/Grounded/designs/AmbientBackground.dart
@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+
+import '../utils/Colors.dart';
+
+/// The airy backdrop: sage mist at the top drifting to cream, with two soft
+/// glows so the glass controls have something to blur.
+class AmbientBackground extends StatelessWidget {
+  final Widget child;
+
+  const AmbientBackground({super.key, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        const Positioned.fill(
+          child: DecoratedBox(
+            decoration: BoxDecoration(
+              gradient: LinearGradient(
+                begin: Alignment.topCenter,
+                end: Alignment.bottomCenter,
+                colors: <Color>[
+                  colorAmbientTop,
+                  colorAmbientMid,
+                  colorAmbientBottom,
+                ],
+                stops: <double>[0.0, 0.45, 1.0],
+              ),
+            ),
+          ),
+        ),
+        Positioned(
+          top: -140,
+          right: -110,
+          child: _glow(380, colorAmbientGlowSage),
+        ),
+        Positioned(
+          top: 300,
+          left: -170,
+          child: _glow(360, colorAmbientGlowWarm),
+        ),
+        Positioned.fill(child: child),
+      ],
+    );
+  }
+
+  Widget _glow(double size, Color color) {
+    return IgnorePointer(
+      child: Container(
+        width: size,
+        height: size,
+        decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          gradient: RadialGradient(
+            colors: <Color>[color, color.withValues(alpha: 0.0)],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/frontend/lib/Grounded/designs/ChromeTone.dart b/frontend/lib/Grounded/designs/ChromeTone.dart
new file mode 100644
index 0000000..5f22317
--- /dev/null
+++ b/frontend/lib/Grounded/designs/ChromeTone.dart
@@ -0,0 +1,19 @@
+import 'package:flutter/widgets.dart';
+
+/// Tells controls placed in a [Sheet]'s chrome whether they sit on the light
+/// ambient backdrop or on a coloured stage, so they pick glass to match.
+class ChromeTone extends InheritedWidget {
+  final bool light;
+
+  const ChromeTone({super.key, required this.light, required super.child});
+
+  static bool isLight(BuildContext context) {
+    return context.dependOnInheritedWidgetOfExactType<ChromeTone>()?.light ??
+        false;
+  }
+
+  @override
+  bool updateShouldNotify(covariant ChromeTone oldWidget) {
+    return oldWidget.light != light;
+  }
+}
diff --git a/frontend/lib/Grounded/designs/Component.dart b/frontend/lib/Grounded/designs/Component.dart
index c553c99..11b9b43 100644
--- a/frontend/lib/Grounded/designs/Component.dart
+++ b/frontend/lib/Grounded/designs/Component.dart
@@ -61,7 +61,7 @@ Widget card({
   EdgeInsets margin = EdgeInsets.zero,
   Color? background,
   Color? borderColor,
-  double radius = 16,
+  double radius = 22,
   VoidCallback? onTap,
 }) {
   final Widget body = Container(
@@ -71,12 +71,12 @@ Widget card({
     decoration: BoxDecoration(
       color: background ?? colorCard,
       borderRadius: BorderRadius.circular(radius),
-      border: Border.all(color: borderColor ?? colorBorder, width: 1),
+      border: Border.all(color: borderColor ?? colorGlassBorder, width: 1),
       boxShadow: const [
         BoxShadow(
-          color: Color(0x08000000),
-          blurRadius: 18,
-          offset: Offset(0, 4),
+          color: Color(0x0F2A3A30),
+          blurRadius: 24,
+          offset: Offset(0, 8),
         ),
       ],
     ),
diff --git a/frontend/lib/Grounded/designs/DotDigits.dart b/frontend/lib/Grounded/designs/DotDigits.dart
new file mode 100644
index 0000000..47dee5c
--- /dev/null
+++ b/frontend/lib/Grounded/designs/DotDigits.dart
@@ -0,0 +1,175 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+import '../utils/Colors.dart';
+
+/// A clock face drawn as a string of dots traced along each digit's outline —
+/// the runner's signature readout. Only digits and ':' are drawn.
+class DotDigits extends StatelessWidget {
+  final String value;
+
+  /// Glyph height in logical pixels.
+  final double height;
+
+  final Color? color;
+
+  const DotDigits({
+    super.key,
+    required this.value,
+    this.height = 64,
+    this.color,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final _DotDigitsPainter painter =
+        _DotDigitsPainter(value, height, color ?? colorInk);
+
+    return CustomPaint(size: painter.measure(), painter: painter);
+  }
+}
+
+class _DotDigitsPainter extends CustomPainter {
+  final String value;
+
+  final double height;
+
+  final Color color;
+
+  _DotDigitsPainter(this.value, this.height, this.color);
+
+  /// Glyphs live in a 1 × 1.6 box.
+  double get _scale => height / 1.6;
+
+  double get _digitWidth => _scale * 1.0;
+
+  double get _colonWidth => _scale * 0.5;
+
+  double get _tracking => _scale * 0.34;
+
+  Size measure() {
+    double width = 0;
+    for (int i = 0; i < value.length; i++) {
+      width = width + (value[i] == ':' ? _colonWidth : _digitWidth);
+      if (i != value.length - 1) {
+        width = width + _tracking;
+      }
+    }
+    return Size(width + height * 0.08, height + height * 0.08);
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final double dot = height * 0.036;
+    final double gap = height * 0.082;
+    final Paint paint = Paint()..color = color;
+
+    canvas.translate(height * 0.04, height * 0.04);
+
+    double x = 0;
+    for (int i = 0; i < value.length; i++) {
+      final String glyph = value[i];
+
+      if (glyph == ':') {
+        canvas.drawCircle(
+            Offset(x + _colonWidth / 2, _scale * 0.52), dot * 1.25, paint);
+        canvas.drawCircle(
+            Offset(x + _colonWidth / 2, _scale * 1.12), dot * 1.25, paint);
+        x = x + _colonWidth + _tracking;
+        continue;
+      }
+
+      final Path? outline = _glyph(glyph);
+      if (outline != null) {
+        final Path placed = outline.transform(
+            (Matrix4.identity()
+                  ..translateByDouble(x, 0, 0, 1)
+                  ..scaleByDouble(_scale, _scale, 1, 1))
+                .storage);
+
+        for (PathMetric metric in placed.computeMetrics()) {
+          final int count = (metric.length / gap).floor().clamp(1, 400);
+          final double step = metric.length / count;
+          final int last = metric.isClosed ? count - 1 : count;
+          for (int n = 0; n <= last; n++) {
+            final Tangent? tangent = metric.getTangentForOffset(n * step);
+            if (tangent != null) {
+              canvas.drawCircle(tangent.position, dot, paint);
+            }
+          }
+        }
+      }
+
+      x = x + _digitWidth + _tracking;
+    }
+  }
+
+  Path? _glyph(String glyph) {
+    switch (glyph) {
+      case '0':
+        return Path()
+          ..addRRect(RRect.fromRectAndRadius(
+              const Rect.fromLTWH(0, 0, 1, 1.6), const Radius.circular(0.5)));
+      case '1':
+        return Path()
+          ..moveTo(0.22, 0.32)
+          ..lineTo(0.6, 0)
+          ..lineTo(0.6, 1.6);
+      case '2':
+        return Path()
+          ..moveTo(0.03, 0.4)
+          ..cubicTo(0.06, 0.02, 0.97, 0.0, 0.97, 0.44)
+          ..cubicTo(0.97, 0.8, 0.05, 1.08, 0.0, 1.6)
+          ..lineTo(1.0, 1.6);
+      case '3':
+        return Path()
+          ..moveTo(0.04, 0.26)
+          ..cubicTo(0.2, -0.06, 0.95, 0.0, 0.95, 0.4)
+          ..cubicTo(0.95, 0.68, 0.66, 0.78, 0.4, 0.78)
+          ..cubicTo(0.76, 0.78, 1.0, 0.92, 1.0, 1.2)
+          ..cubicTo(1.0, 1.66, 0.18, 1.7, 0.0, 1.34);
+      case '4':
+        return Path()
+          ..moveTo(0.76, 1.6)
+          ..lineTo(0.76, 0.0)
+          ..lineTo(0.0, 1.12)
+          ..lineTo(1.0, 1.12);
+      case '5':
+        return Path()
+          ..moveTo(0.92, 0.0)
+          ..lineTo(0.14, 0.0)
+          ..lineTo(0.06, 0.72)
+          ..cubicTo(0.36, 0.54, 1.0, 0.6, 1.0, 1.08)
+          ..cubicTo(1.0, 1.66, 0.2, 1.7, 0.0, 1.36);
+      case '6':
+        return Path()
+          ..moveTo(0.86, 0.14)
+          ..cubicTo(0.44, -0.12, 0.0, 0.24, 0.0, 1.1)
+          ..addOval(const Rect.fromLTWH(0.0, 0.66, 1.0, 0.94));
+      case '7':
+        return Path()
+          ..moveTo(0.0, 0.0)
+          ..lineTo(1.0, 0.0)
+          ..lineTo(0.34, 1.6);
+      case '8':
+        return Path()
+          ..addOval(const Rect.fromLTWH(0.08, 0.0, 0.84, 0.74))
+          ..addOval(const Rect.fromLTWH(0.0, 0.74, 1.0, 0.86));
+      case '9':
+        return Path()
+          ..addOval(const Rect.fromLTWH(0.0, 0.0, 1.0, 0.94))
+          ..moveTo(1.0, 0.5)
+          ..cubicTo(1.0, 1.36, 0.56, 1.72, 0.14, 1.46);
+      default:
+        return null;
+    }
+  }
+
+  @override
+  bool shouldRepaint(covariant _DotDigitsPainter oldDelegate) {
+    return oldDelegate.value != value ||
+        oldDelegate.height != height ||
+        oldDelegate.color != color;
+  }
+}
diff --git a/frontend/lib/Grounded/designs/FloatingNav.dart b/frontend/lib/Grounded/designs/FloatingNav.dart
new file mode 100644
index 0000000..33ea526
--- /dev/null
+++ b/frontend/lib/Grounded/designs/FloatingNav.dart
@@ -0,0 +1,125 @@
+import 'package:flutter/material.dart';
+
+import '../about/internal/application/TextType.dart';
+import '../utils/Colors.dart';
+import 'GlassSurface.dart';
+import 'text/Text.dart';
+
+typedef NavEntry = ({IconData icon, String label, VoidCallback onTap});
+
+/// The floating glass tab bar with the dark round action button beside it.
+class FloatingNav extends StatelessWidget {
+  final List<NavEntry> entries;
+
+  final int selected;
+
+  final IconData actionIcon;
+
+  final VoidCallback onAction;
+
+  const FloatingNav({
+    super.key,
+    required this.entries,
+    required this.selected,
+    required this.actionIcon,
+    required this.onAction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      top: false,
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(16, 0, 16, 14),
+        child: Row(
+          children: [
+            Expanded(
+              child: Container(
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(34),
+                  boxShadow: const [
+                    BoxShadow(
+                      color: Color(0x1A1A1F1C),
+                      blurRadius: 30,
+                      offset: Offset(0, 10),
+                    ),
+                  ],
+                ),
+                child: GlassSurface(
+                  radius: BorderRadius.circular(34),
+                  tint: colorGlassStrong,
+                  padding: const EdgeInsets.all(6),
+                  child: Row(
+                    children: [
+                      for (int index = 0; index < entries.length; index++)
+                        Expanded(child: _tab(entries[index], index == selected)),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+            const SizedBox(width: 10),
+            GestureDetector(
+              onTap: onAction,
+              child: Container(
+                width: 64,
+                height: 64,
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  gradient: const RadialGradient(
+                    center: Alignment(-0.3, -0.4),
+                    colors: <Color>[colorNightGlow, colorNight],
+                  ),
+                  border: Border.all(color: colorWhite, width: 3),
+                  boxShadow: const [
+                    BoxShadow(
+                      color: Color(0x331A1F1C),
+                      blurRadius: 24,
+                      offset: Offset(0, 10),
+                    ),
+                  ],
+                ),
+                child: Icon(actionIcon, size: 24, color: colorLime),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _tab(NavEntry entry, bool active) {
+    return GestureDetector(
+      onTap: entry.onTap,
+      behavior: HitTestBehavior.opaque,
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 220),
+        curve: Curves.easeOutCubic,
+        padding: const EdgeInsets.symmetric(vertical: 9),
+        decoration: BoxDecoration(
+          color: active ? colorWhite : colorWhite.withValues(alpha: 0.0),
+          borderRadius: BorderRadius.circular(28),
+          boxShadow: active
+              ? const [
+                  BoxShadow(
+                    color: Color(0x141A1F1C),
+                    blurRadius: 12,
+                    offset: Offset(0, 4),
+                  ),
+                ]
+              : const [],
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(entry.icon,
+                size: 19, color: active ? colorInk : colorInkSoft),
+            const SizedBox(height: 4),
+            text(entry.label, 10, active ? TextType.Medium : TextType.Regular,
+                color: active ? colorInk : colorInkSoft, maxLines: 1),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/frontend/lib/Grounded/designs/GlassSurface.dart b/frontend/lib/Grounded/designs/GlassSurface.dart
new file mode 100644
index 0000000..11fa1cb
--- /dev/null
+++ b/frontend/lib/Grounded/designs/GlassSurface.dart
@@ -0,0 +1,104 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+import '../utils/Colors.dart';
+
+/// Frosted glass: the background blurred through a translucent white panel
+/// with a bright hairline edge. Controls and floating chrome are built from it.
+class GlassSurface extends StatelessWidget {
+  final Widget child;
+
+  final BorderRadius radius;
+
+  final EdgeInsets padding;
+
+  final Color? tint;
+
+  /// Over a dark or coloured stage the panel goes smoky instead of milky.
+  final bool onDark;
+
+  final double blur;
+
+  const GlassSurface({
+    super.key,
+    required this.child,
+    this.radius = const BorderRadius.all(Radius.circular(20)),
+    this.padding = EdgeInsets.zero,
+    this.tint,
+    this.onDark = false,
+    this.blur = 18,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipRRect(
+      borderRadius: radius,
+      child: BackdropFilter(
+        filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
+        child: Container(
+          padding: padding,
+          decoration: BoxDecoration(
+            color: tint ??
+                (onDark ? colorWhite.withValues(alpha: 0.16) : colorGlass),
+            borderRadius: radius,
+            border: Border.all(
+              color: onDark
+                  ? colorWhite.withValues(alpha: 0.22)
+                  : colorGlassBorder,
+              width: 1,
+            ),
+          ),
+          child: child,
+        ),
+      ),
+    );
+  }
+}
+
+/// A round frosted control — back, close, bell, more.
+Widget glassCircle(
+  IconData icon,
+  VoidCallback onTap, {
+  double size = 42,
+  bool onDark = false,
+  bool dotted = false,
+  Color? dotColor,
+}) {
+  return GestureDetector(
+    onTap: onTap,
+    behavior: HitTestBehavior.opaque,
+    child: Stack(
+      clipBehavior: Clip.none,
+      children: [
+        GlassSurface(
+          onDark: onDark,
+          radius: BorderRadius.circular(size),
+          child: SizedBox(
+            width: size,
+            height: size,
+            child: Icon(
+              icon,
+              size: size * 0.42,
+              color: onDark ? colorWhite : colorInk,
+            ),
+          ),
+        ),
+        if (dotted)
+          Positioned(
+            top: 2,
+            right: 2,
+            child: Container(
+              width: 10,
+              height: 10,
+              decoration: BoxDecoration(
+                color: dotColor ?? colorAccent,
+                shape: BoxShape.circle,
+                border: Border.all(color: colorWhite, width: 1.5),
+              ),
+            ),
+          ),
+      ],
+    ),
+  );
+}
diff --git a/frontend/lib/Grounded/designs/GroundedMark.dart b/frontend/lib/Grounded/designs/GroundedMark.dart
new file mode 100644
index 0000000..ac0e22b
--- /dev/null
+++ b/frontend/lib/Grounded/designs/GroundedMark.dart
@@ -0,0 +1,117 @@
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+
+import '../utils/Colors.dart';
+
+/// The Grounded mark: a lime sun resting on a ground line beneath two
+/// breathing arcs, on a night-green tile. Drawn, not bitmapped, so the splash
+/// can raise the sun and light the arcs. Geometry matches the launcher icon.
+class GroundedMark extends StatelessWidget {
+  final double size;
+
+  /// 0 → the sun is below the line; 1 → fully risen.
+  final double rise;
+
+  /// 0 → arcs hidden; 1 → both lit. The inner arc lights first.
+  final double arcs;
+
+  final bool tile;
+
+  const GroundedMark({
+    super.key,
+    this.size = 120,
+    this.rise = 1,
+    this.arcs = 1,
+    this.tile = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      size: Size.square(size),
+      painter: _MarkPainter(rise, arcs, tile),
+    );
+  }
+}
+
+class _MarkPainter extends CustomPainter {
+  final double rise;
+
+  final double arcs;
+
+  final bool tile;
+
+  _MarkPainter(this.rise, this.arcs, this.tile);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final double u = size.width / 1024;
+    final Rect bounds = Offset.zero & size;
+
+    if (tile) {
+      canvas.drawRRect(
+        RRect.fromRectAndRadius(bounds, Radius.circular(size.width * 0.235)),
+        Paint()
+          ..shader = const LinearGradient(
+            begin: Alignment.topLeft,
+            end: Alignment.bottomRight,
+            colors: <Color>[colorNightLift, colorNight],
+          ).createShader(bounds),
+      );
+    }
+
+    final double cx = 512 * u;
+    final double horizon = 630 * u;
+
+    // Arcs — inner then outer.
+    final List<double> radii = <double>[250, 330];
+    final List<double> alphas = <double>[0.6, 0.28];
+    for (int i = 0; i < 2; i++) {
+      final double lit = ((arcs * 2) - i).clamp(0.0, 1.0);
+      if (lit <= 0) {
+        continue;
+      }
+      final double r = radii[i] * u;
+      canvas.drawArc(
+        Rect.fromCircle(center: Offset(cx, horizon), radius: r - 15 * u),
+        math.pi * 198 / 180,
+        math.pi * 144 / 180,
+        false,
+        Paint()
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 30 * u
+          ..strokeCap = StrokeCap.round
+          ..color = colorAmbientMid.withValues(alpha: alphas[i] * lit),
+      );
+    }
+
+    // The sun, clipped at the horizon so it rises out of the ground.
+    final double radius = 168 * u;
+    canvas.save();
+    canvas.clipRect(Rect.fromLTRB(0, 0, size.width, horizon));
+    canvas.drawCircle(
+      Offset(cx, horizon + radius * 2 * (1 - rise)),
+      radius,
+      Paint()..color = colorLime,
+    );
+    canvas.restore();
+
+    // Ground line.
+    final double ground = horizon + 52 * u;
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromLTRB(250 * u, ground - 20 * u, 774 * u, ground + 20 * u),
+        Radius.circular(20 * u),
+      ),
+      Paint()..color = colorAmbientMid,
+    );
+  }
+
+  @override
+  bool shouldRepaint(covariant _MarkPainter oldDelegate) {
+    return oldDelegate.rise != rise ||
+        oldDelegate.arcs != arcs ||
+        oldDelegate.tile != tile;
+  }
+}
diff --git a/frontend/lib/Grounded/designs/Shell.dart b/frontend/lib/Grounded/designs/Shell.dart
index 510538a..2dc6a56 100644
--- a/frontend/lib/Grounded/designs/Shell.dart
+++ b/frontend/lib/Grounded/designs/Shell.dart
@@ -1,15 +1,20 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
 import '../about/internal/application/TextType.dart';
 import '../utils/Colors.dart';
-import 'Component.dart';
+import 'AmbientBackground.dart';
+import 'ChromeTone.dart';
+import 'GlassSurface.dart';
+import 'scene/SceneArt.dart';
 import 'text/Text.dart';
 
-/// The house layout: black chrome at the top, a white sheet rising into it with
-/// a large corner radius. Every screen is built from this so the app reads as
-/// one object rather than a stack of pages.
+/// The house layout. On the default ambient tone the screen floats on sage
+/// mist with frosted controls and ink type, and the content rises on a frosted
+/// sheet. Screens that carry a colour — a goal, a standing tier — or a banner
+/// get a tinted stage instead, with white type and smoky glass.
 class Sheet extends StatelessWidget {
-  /// Small all-caps label rendered in the black chrome, above the title.
+  /// Small all-caps label rendered in the chrome, above the title.
   final String eyebrow;
 
   /// The chrome title — small and centred, not the display title.
@@ -22,7 +27,7 @@ class Sheet extends StatelessWidget {
   /// Optional trailing control in the chrome.
   final Widget? action;
 
-  /// Chrome colour. Defaults to near-black; standing screens tint it.
+  /// Stage colour. Leaving it null (with no banner) gives the ambient tone.
   final Color? chrome;
 
   /// Rendered inside the chrome beneath the title — the standing strip.
@@ -30,6 +35,12 @@ class Sheet extends StatelessWidget {
 
   final bool scrollable;
 
+  /// A painted landscape behind a tinted stage's header, in place of the
+  /// flat gradient.
+  final List<Color>? scene;
+
+  final int sceneSeed;
+
   const Sheet({
     super.key,
     required this.title,
@@ -40,158 +51,207 @@ class Sheet extends StatelessWidget {
     this.chrome,
     this.banner,
     this.scrollable = true,
+    this.scene,
+    this.sceneSeed = 0,
   });
 
+  bool get _light => chrome == null && banner == null && scene == null;
+
   @override
   Widget build(BuildContext context) {
-    final Color chromeColor = chrome ?? colorPrimaryDark;
+    final bool light = _light;
+    final Color stage = chrome ?? colorPrimaryDark;
+    final Color ink = light ? colorInk : colorWhite;
+    final Color soft =
+        light ? colorInkSoft : colorWhite.withValues(alpha: 0.5);
 
-    return Scaffold(
-      backgroundColor: chromeColor,
-      body: Column(
-        mainAxisSize: MainAxisSize.max,
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        children: [
-          SafeArea(
-            bottom: false,
-            child: Padding(
-              padding: const EdgeInsets.fromLTRB(12, 4, 12, 16),
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  Row(
-                    children: [
-                      SizedBox(
-                        width: 44,
-                        child: onBack == null
-                            ? null
-                            : _chromeButton(
-                                Icons.arrow_back_ios_new_rounded, onBack!),
-                      ),
-                      Expanded(
-                        child: Column(
-                          mainAxisSize: MainAxisSize.min,
-                          children: [
-                            if (eyebrow.isNotEmpty) ...[
-                              text(
-                                eyebrow.toUpperCase(),
-                                9,
-                                TextType.Bold,
-                                color: colorWhite.withValues(alpha: 0.45),
-                                letterSpacing: 1.2,
-                                align: TextAlign.center,
-                              ),
-                              const SizedBox(height: 3),
-                            ],
-                            text(
-                              title,
-                              15,
-                              TextType.Medium,
-                              color: colorWhite,
-                              align: TextAlign.center,
-                            ),
-                          ],
+    final Widget header = SafeArea(
+      bottom: false,
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(16, 6, 16, 18),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Row(
+              children: [
+                SizedBox(
+                  width: 46,
+                  child: onBack == null
+                      ? null
+                      : Align(
+                          alignment: Alignment.centerLeft,
+                          child: glassCircle(
+                              CupertinoIcons.arrow_left, onBack!,
+                              onDark: !light),
                         ),
-                      ),
-                      SizedBox(
-                        width: 44,
-                        child: action == null
-                            ? null
-                            : Align(
-                                alignment: Alignment.centerRight,
-                                child: action,
-                              ),
+                ),
+                Expanded(
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      if (eyebrow.isNotEmpty) ...[
+                        text(
+                          eyebrow.toUpperCase(),
+                          9,
+                          TextType.Bold,
+                          color: soft,
+                          letterSpacing: 1.2,
+                          align: TextAlign.center,
+                        ),
+                        const SizedBox(height: 3),
+                      ],
+                      text(
+                        title.toUpperCase(),
+                        14,
+                        TextType.Medium,
+                        color: ink,
+                        letterSpacing: 0.6,
+                        align: TextAlign.center,
                       ),
                     ],
                   ),
-                  if (banner != null) ...[
-                    const SizedBox(height: 16),
-                    banner!,
-                  ],
-                ],
-              ),
-            ),
-          ),
-          Expanded(
-            child: Container(
-              decoration: BoxDecoration(
-                color: colorPrimaryLight,
-                borderRadius: const BorderRadius.only(
-                  topLeft: Radius.circular(28),
-                  topRight: Radius.circular(28),
                 ),
-              ),
-              clipBehavior: Clip.antiAlias,
-              child: scrollable
-                  ? SingleChildScrollView(
-                      padding: const EdgeInsets.fromLTRB(20, 28, 20, 40),
-                      child: child,
-                    )
-                  : Padding(
-                      padding: const EdgeInsets.fromLTRB(20, 28, 20, 0),
-                      child: child,
-                    ),
+                SizedBox(
+                  width: 46,
+                  child: action == null
+                      ? null
+                      : Align(
+                          alignment: Alignment.centerRight,
+                          child: action,
+                        ),
+                ),
+              ],
             ),
-          ),
-        ],
+            if (banner != null) ...[
+              const SizedBox(height: 18),
+              banner!,
+            ],
+          ],
+        ),
       ),
     );
-  }
 
-  Widget _chromeButton(IconData icon, VoidCallback onTap) {
-    return GestureDetector(
-      onTap: onTap,
+    final Widget body = Expanded(
       child: Container(
-        width: 38,
-        height: 38,
-        alignment: Alignment.center,
         decoration: BoxDecoration(
-          color: colorWhite.withValues(alpha: 0.10),
-          shape: BoxShape.circle,
+          color: light ? colorFrost : colorPrimaryLight,
+          borderRadius: const BorderRadius.only(
+            topLeft: Radius.circular(32),
+            topRight: Radius.circular(32),
+          ),
         ),
-        child: Icon(icon, size: 15, color: colorWhite),
+        clipBehavior: Clip.antiAlias,
+        child: scrollable
+            ? SingleChildScrollView(
+                padding: const EdgeInsets.fromLTRB(20, 28, 20, 40),
+                child: child,
+              )
+            : Padding(
+                padding: const EdgeInsets.fromLTRB(20, 28, 20, 0),
+                child: child,
+              ),
+      ),
+    );
+
+    final Widget column = ChromeTone(
+      light: light,
+      child: Column(
+        mainAxisSize: MainAxisSize.max,
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [header, body],
+      ),
+    );
+
+    if (light) {
+      return Scaffold(
+        backgroundColor: colorAmbientMid,
+        body: AmbientBackground(child: column),
+      );
+    }
+
+    // A tinted stage: the colour deepens downward and a soft light blooms in
+    // the corner, so it reads as lit rather than painted flat.
+    return Scaffold(
+      backgroundColor: stage,
+      body: Stack(
+        children: [
+          Positioned.fill(
+            child: DecoratedBox(
+              decoration: BoxDecoration(
+                gradient: LinearGradient(
+                  begin: Alignment.topLeft,
+                  end: Alignment.bottomRight,
+                  colors: <Color>[
+                    Color.lerp(stage, colorWhite, 0.14)!,
+                    stage,
+                    Color.lerp(stage, colorBlack, 0.35)!,
+                  ],
+                ),
+              ),
+            ),
+          ),
+          if (scene != null)
+            Positioned(
+              top: 0,
+              left: 0,
+              right: 0,
+              height: 250,
+              child: ShaderMask(
+                shaderCallback: (Rect bounds) => const LinearGradient(
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
+                  colors: <Color>[Color(0xFF000000), Color(0x00000000)],
+                  stops: <double>[0.6, 1.0],
+                ).createShader(bounds),
+                blendMode: BlendMode.dstIn,
+                child: Stack(
+                  fit: StackFit.expand,
+                  children: [
+                    SceneArt(palette: scene!, seed: sceneSeed),
+                    ColoredBox(color: colorBlack.withValues(alpha: 0.42)),
+                  ],
+                ),
+              ),
+            ),
+          Positioned(
+            top: -120,
+            right: -90,
+            child: Container(
+              width: 300,
+              height: 300,
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                gradient: RadialGradient(
+                  colors: <Color>[
+                    colorWhite.withValues(alpha: 0.16),
+                    colorWhite.withValues(alpha: 0.0),
+                  ],
+                ),
+              ),
+            ),
+          ),
+          Positioned.fill(child: column),
+        ],
       ),
     );
   }
 }
 
-/// A circular control for the black chrome, with an optional unread dot.
+/// A round frosted control for the chrome, with an optional unread dot. It
+/// matches the stage it sits on.
 Widget chromeAction(
   IconData icon,
   VoidCallback onTap, {
   bool dotted = false,
   Color? dotColor,
 }) {
-  return GestureDetector(
-    onTap: onTap,
-    child: Stack(
-      clipBehavior: Clip.none,
-      children: [
-        Container(
-          width: 38,
-          height: 38,
-          alignment: Alignment.center,
-          decoration: BoxDecoration(
-            color: colorWhite.withValues(alpha: 0.10),
-            shape: BoxShape.circle,
-          ),
-          child: Icon(icon, size: 17, color: colorWhite),
-        ),
-        if (dotted)
-          Positioned(
-            top: 1,
-            right: 1,
-            child: Container(
-              width: 9,
-              height: 9,
-              decoration: BoxDecoration(
-                color: dotColor ?? colorAccent,
-                shape: BoxShape.circle,
-                border: Border.all(color: colorPrimaryDark, width: 1.5),
-              ),
-            ),
-          ),
-      ],
+  return Builder(
+    builder: (BuildContext context) => glassCircle(
+      icon,
+      onTap,
+      onDark: !ChromeTone.isLight(context),
+      dotted: dotted,
+      dotColor: dotColor,
     ),
   );
 }
@@ -215,12 +275,11 @@ Widget labelled(
         label.toUpperCase(),
         9,
         TextType.Bold,
-        color: labelColor ?? colorGrey2,
+        color: labelColor ?? colorInkSoft,
         letterSpacing: 1.0,
       ),
       const SizedBox(height: 5),
-      text(value, valueSize, valueType,
-          color: valueColor ?? colorPrimaryDark),
+      text(value, valueSize, valueType, color: valueColor ?? colorInk),
     ],
   );
 }
@@ -247,41 +306,40 @@ Widget metaRow(List<Widget> items) {
 /// The oversized light display title that opens a section.
 Widget displayTitle(String value, {Color? color, double size = 34}) {
   return text(value, size, TextType.Light,
-      color: color ?? colorPrimaryDark, height: 1.15);
+      color: color ?? colorInk, height: 1.15);
 }
 
-/// A section break: hairline, then a small bold heading with an optional
-/// trailing chip.
+/// A section heading: medium ink label, a soft caption beside it and an
+/// optional trailing control ("View all").
 Widget sectionBreak(String heading, {Widget? trailing, String caption = ""}) {
-  return Column(
-    crossAxisAlignment: CrossAxisAlignment.start,
-    mainAxisSize: MainAxisSize.min,
-    children: [
-      hairline(margin: const EdgeInsets.only(bottom: 20)),
-      Row(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        crossAxisAlignment: CrossAxisAlignment.center,
-        children: [
-          Expanded(
-            child: Row(
-              crossAxisAlignment: CrossAxisAlignment.end,
-              children: [
-                text(heading, 17, TextType.Bold, color: colorPrimaryDark),
-                if (caption.isNotEmpty) ...[
-                  const SizedBox(width: 10),
-                  Padding(
-                    padding: const EdgeInsets.only(bottom: 2),
+  return Padding(
+    padding: const EdgeInsets.only(top: 6, bottom: 14),
+    child: Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        Expanded(
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.end,
+            children: [
+              text(heading, 16, TextType.Medium, color: colorInk),
+              if (caption.isNotEmpty) ...[
+                const SizedBox(width: 8),
+                Flexible(
+                  child: Padding(
+                    padding: const EdgeInsets.only(bottom: 1),
                     child: text(caption, 11, TextType.Regular,
-                        color: colorGrey2),
+                        color: colorInkSoft,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis),
                   ),
-                ],
+                ),
               ],
-            ),
+            ],
           ),
-          if (trailing != null) trailing,
-        ],
-      ),
-      const SizedBox(height: 16),
-    ],
+        ),
+        if (trailing != null) trailing,
+      ],
+    ),
   );
 }
diff --git a/frontend/lib/Grounded/designs/buttons/Buttons.dart b/frontend/lib/Grounded/designs/buttons/Buttons.dart
index f3570d4..b38a5da 100644
--- a/frontend/lib/Grounded/designs/buttons/Buttons.dart
+++ b/frontend/lib/Grounded/designs/buttons/Buttons.dart
@@ -13,10 +13,10 @@ Widget roundedCornerButton(
   Color? foreground,
   IconData? icon,
   bool enabled = true,
-  double radius = 14,
+  double radius = 99,
   double verticalPadding = 16,
 }) {
-  final Color bg = enabled ? (background ?? colorPrimaryDark) : colorGrey;
+  final Color bg = enabled ? (background ?? colorNight) : colorGrey;
   final Color fg = foreground ?? colorWhite;
 
   return ElevatedButton(
@@ -35,10 +35,13 @@ Widget roundedCornerButton(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         if (icon != null) ...[
-          Icon(icon, size: 16, color: fg),
+          // The default night pill carries the lime spark on its icon.
+          Icon(icon,
+              size: 16,
+              color: background == null && foreground == null ? colorLime : fg),
           const SizedBox(width: 8),
         ],
-        text(label, 14, TextType.Bold, color: fg),
+        text(label, 14, TextType.Medium, color: fg),
       ],
     ),
   );
@@ -52,7 +55,7 @@ Widget outlinedActionButton(
   Color? foreground,
   IconData? icon,
   bool enabled = true,
-  double radius = 14,
+  double radius = 99,
 }) {
   final Color fg = enabled ? (foreground ?? colorPrimaryDark) : colorGrey;
 
diff --git a/frontend/lib/Grounded/designs/scene/SceneArt.dart b/frontend/lib/Grounded/designs/scene/SceneArt.dart
new file mode 100644
index 0000000..c806341
--- /dev/null
+++ b/frontend/lib/Grounded/designs/scene/SceneArt.dart
@@ -0,0 +1,114 @@
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+
+import '../../utils/Colors.dart';
+import 'ScenePainter.dart';
+
+/// A painted landscape that stands in for photography: sky, a low sun, three
+/// ridges and an oversized figure glyph standing in front of them. The [seed]
+/// reshapes the ridges and moves the sun, so two routines of the same kind
+/// never wear the identical picture.
+class SceneArt extends StatelessWidget {
+  /// sky top, horizon, sun, far ridge, mid ridge, near ridge, ember.
+  final List<Color> palette;
+
+  final int seed;
+
+  /// The glyph standing in the scene — the kind's icon, usually.
+  final IconData? figure;
+
+  /// Figure size as a fraction of the shorter side.
+  final double figureScale;
+
+  final Alignment figureAlignment;
+
+  /// Darkens the lower half so white type laid over it stays legible.
+  final bool shade;
+
+  const SceneArt({
+    super.key,
+    required this.palette,
+    this.seed = 0,
+    this.figure,
+    this.figureScale = 0.5,
+    this.figureAlignment = const Alignment(0.35, 0.15),
+    this.shade = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (BuildContext context, BoxConstraints constraints) {
+        final double shortest = math.min(
+          constraints.maxWidth.isFinite ? constraints.maxWidth : 200,
+          constraints.maxHeight.isFinite ? constraints.maxHeight : 200,
+        );
+        final double glyph = shortest * figureScale;
+
+        return RepaintBoundary(
+          child: Stack(
+            fit: StackFit.expand,
+            children: [
+              CustomPaint(painter: ScenePainter(palette, seed)),
+              if (figure != null)
+                Align(
+                  alignment: figureAlignment,
+                  child: SizedBox(
+                    width: glyph * 1.6,
+                    height: glyph * 1.6,
+                    child: Stack(
+                      alignment: Alignment.center,
+                      children: [
+                        // The ember halo behind the figure — the reference's
+                        // orange gi, reduced to light.
+                        Container(
+                          width: glyph * 1.5,
+                          height: glyph * 1.5,
+                          decoration: BoxDecoration(
+                            shape: BoxShape.circle,
+                            gradient: RadialGradient(
+                              colors: <Color>[
+                                palette[6].withValues(alpha: 0.45),
+                                palette[6].withValues(alpha: 0.0),
+                              ],
+                            ),
+                          ),
+                        ),
+                        Icon(
+                          figure,
+                          size: glyph,
+                          color: colorWhite.withValues(alpha: 0.96),
+                          shadows: <Shadow>[
+                            Shadow(
+                              color: palette[5].withValues(alpha: 0.55),
+                              blurRadius: glyph * 0.22,
+                              offset: Offset(0, glyph * 0.08),
+                            ),
+                          ],
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              if (shade)
+                DecoratedBox(
+                  decoration: BoxDecoration(
+                    gradient: LinearGradient(
+                      begin: Alignment.topCenter,
+                      end: Alignment.bottomCenter,
+                      stops: const <double>[0.35, 1.0],
+                      colors: <Color>[
+                        colorBlack.withValues(alpha: 0.0),
+                        colorBlack.withValues(alpha: 0.55),
+                      ],
+                    ),
+                  ),
+                ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}
diff --git a/frontend/lib/Grounded/designs/scene/ScenePainter.dart b/frontend/lib/Grounded/designs/scene/ScenePainter.dart
new file mode 100644
index 0000000..47653ac
--- /dev/null
+++ b/frontend/lib/Grounded/designs/scene/ScenePainter.dart
@@ -0,0 +1,114 @@
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+
+import '../../utils/Colors.dart';
+
+/// Paints the landscape behind [SceneArt]. Everything is derived from the
+/// palette and the seed, so the same routine always gets the same picture.
+class ScenePainter extends CustomPainter {
+  final List<Color> palette;
+
+  final int seed;
+
+  ScenePainter(this.palette, this.seed);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final double w = size.width;
+    final double h = size.height;
+    final math.Random random = math.Random(seed);
+    final Rect bounds = Offset.zero & size;
+
+    // Sky.
+    canvas.drawRect(
+      bounds,
+      Paint()
+        ..shader = LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          colors: <Color>[palette[0], palette[1]],
+          stops: const <double>[0.0, 0.62],
+        ).createShader(bounds),
+    );
+
+    // Sun, with a wide soft glow.
+    final double radius = math.min(w, h) * (0.13 + random.nextDouble() * 0.05);
+    final Offset sun = Offset(
+      w * (0.18 + random.nextDouble() * 0.64),
+      h * (0.26 + random.nextDouble() * 0.12),
+    );
+    canvas.drawCircle(
+      sun,
+      radius * 2.6,
+      Paint()
+        ..shader = RadialGradient(
+          colors: <Color>[
+            palette[2].withValues(alpha: 0.55),
+            palette[2].withValues(alpha: 0.0),
+          ],
+        ).createShader(Rect.fromCircle(center: sun, radius: radius * 2.6)),
+    );
+    canvas.drawCircle(sun, radius, Paint()..color = palette[2]);
+
+    // A haze band along the horizon so the far ridge sits back.
+    final Rect haze = Rect.fromLTWH(0, h * 0.42, w, h * 0.22);
+    canvas.drawRect(
+      haze,
+      Paint()
+        ..shader = LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          colors: <Color>[
+            colorWhite.withValues(alpha: 0.0),
+            colorWhite.withValues(alpha: 0.35),
+            colorWhite.withValues(alpha: 0.0),
+          ],
+        ).createShader(haze),
+    );
+
+    // Three ridges, far to near.
+    final List<double> baselines = <double>[0.56, 0.68, 0.82];
+    final List<double> amplitudes = <double>[0.07, 0.06, 0.05];
+
+    for (int layer = 0; layer < 3; layer++) {
+      final double base = h * baselines[layer];
+      final double amp = h * amplitudes[layer];
+      final double f1 = 0.8 + random.nextDouble() * 1.4;
+      final double f2 = 2.0 + random.nextDouble() * 2.5;
+      final double p1 = random.nextDouble() * math.pi * 2;
+      final double p2 = random.nextDouble() * math.pi * 2;
+
+      final Path ridge = Path()..moveTo(0, h);
+      const int steps = 36;
+      for (int i = 0; i <= steps; i++) {
+        final double x = w * i / steps;
+        final double t = i / steps;
+        final double y = base -
+            amp *
+                (math.sin(t * f1 * math.pi * 2 + p1) * 0.65 +
+                    math.sin(t * f2 * math.pi * 2 + p2) * 0.35);
+        ridge.lineTo(x, y);
+      }
+      ridge
+        ..lineTo(w, h)
+        ..close();
+
+      final Color tone = palette[3 + layer];
+      canvas.drawPath(
+        ridge,
+        Paint()
+          ..shader = LinearGradient(
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+            colors: <Color>[tone, Color.lerp(tone, colorBlack, 0.18)!],
+          ).createShader(Rect.fromLTWH(0, base - amp, w, h - base + amp)),
+      );
+    }
+  }
+
+  @override
+  bool shouldRepaint(covariant ScenePainter oldDelegate) {
+    return oldDelegate.seed != seed || oldDelegate.palette != palette;
+  }
+}
diff --git a/frontend/lib/Grounded/see/goal/GoalDetailState.dart b/frontend/lib/Grounded/see/goal/GoalDetailState.dart
index 2016678..4c848cd 100644
--- a/frontend/lib/Grounded/see/goal/GoalDetailState.dart
+++ b/frontend/lib/Grounded/see/goal/GoalDetailState.dart
@@ -16,6 +16,7 @@ import '../../designs/Component.dart';
 import '../../designs/Responsive.dart';
 import '../../designs/Shell.dart';
 import '../../designs/buttons/Buttons.dart';
+import '../../designs/scene/SceneArt.dart';
 import '../../designs/text/Text.dart';
 import '../../utils/Colors.dart';
 import '../../utils/CommonUtils.dart';
@@ -181,6 +182,8 @@ class GoalDetailState extends State<GoalDetail>
       title: _goal.title,
       onBack: _onBack,
       chrome: _goal.colourHex.isEmpty ? null : goalColor(_goal.colourHex),
+      scene: goalScene(goalColor(_goal.colourHex)),
+      sceneSeed: sceneSeed(_goal.title),
       action: chromeAction(CupertinoIcons.pencil, _onEditGoal),
       banner: _progressBanner(),
       child: Column(
@@ -398,15 +401,19 @@ class GoalDetailState extends State<GoalDetail>
         onTap: () => _onEditRoutine(routine),
         child: Row(
           children: [
-            Container(
-              width: 48,
-              height: 48,
-              alignment: Alignment.center,
-              decoration: BoxDecoration(
-                color: kindBackground(routine.kind),
-                borderRadius: BorderRadius.circular(13),
+            SizedBox(
+              width: 58,
+              height: 58,
+              child: ClipRRect(
+                borderRadius: BorderRadius.circular(16),
+                child: SceneArt(
+                  palette: scenePalette(routine.kind),
+                  seed: sceneSeed(routine.title),
+                  figure: kindIcon(routine.kind),
+                  figureScale: 0.46,
+                  figureAlignment: const Alignment(0, 0.1),
+                ),
               ),
-              child: Icon(kindIcon(routine.kind), size: 21, color: tone),
             ),
             const SizedBox(width: 12),
             Expanded(
diff --git a/frontend/lib/Grounded/see/goal/GoalsState.dart b/frontend/lib/Grounded/see/goal/GoalsState.dart
index 114072f..0a2dfe4 100644
--- a/frontend/lib/Grounded/see/goal/GoalsState.dart
+++ b/frontend/lib/Grounded/see/goal/GoalsState.dart
@@ -5,9 +5,11 @@ import '../../about/external/data/Goal.dart';
 import '../../about/internal/application/TextType.dart';
 import '../../configs/Navigator.dart';
 import '../../designs/Component.dart';
+import '../../designs/GlassSurface.dart';
 import '../../designs/Responsive.dart';
 import '../../designs/Shell.dart';
 import '../../designs/buttons/Buttons.dart';
+import '../../designs/scene/SceneArt.dart';
 import '../../designs/text/Text.dart';
 import '../../utils/Colors.dart';
 import '../../utils/CommonUtils.dart';
@@ -104,112 +106,136 @@ class GoalsState extends State<Goals> implements ConnectGoals {
     );
   }
 
+  /// The goal as a painted card in its own colour: the ambition up top, the
+  /// progress and the cost along the bottom.
   Widget _goalCard(Goal goal) {
-    final Color accent =
-        goal.slipping ? colorStandingGrounded : goalColor(goal.colourHex);
+    final Color accent = goalColor(goal.colourHex);
+    final Color soft = colorWhite.withValues(alpha: 0.78);
+    final bool overdue = goal.targetDate != null &&
+        goal.targetDate!.isBefore(DateTime.now());
 
-    return Container(
-      margin: const EdgeInsets.only(bottom: 12),
-      child: card(
-        onTap: () => _onOpenGoal(goal),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            Row(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Expanded(
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      Row(
-                        children: [
-                          Container(
-                            width: 8,
-                            height: 8,
-                            decoration: BoxDecoration(
-                              color: goalColor(goal.colourHex),
-                              shape: BoxShape.circle,
-                            ),
-                          ),
-                          const SizedBox(width: 8),
-                          text(
+    return GestureDetector(
+      onTap: () => _onOpenGoal(goal),
+      child: Container(
+        height: 214,
+        margin: const EdgeInsets.only(bottom: 14),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(26),
+          boxShadow: const [
+            BoxShadow(
+              color: Color(0x262A3A30),
+              blurRadius: 24,
+              offset: Offset(0, 10),
+            ),
+          ],
+        ),
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(26),
+          child: Stack(
+            fit: StackFit.expand,
+            children: [
+              SceneArt(
+                palette: goalScene(accent),
+                seed: sceneSeed(goal.title),
+                figure: CupertinoIcons.flag_fill,
+                figureScale: 0.4,
+                figureAlignment: const Alignment(0.75, -0.35),
+                shade: true,
+              ),
+              Padding(
+                padding: const EdgeInsets.all(14),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      children: [
+                        GlassSurface(
+                          onDark: true,
+                          radius: BorderRadius.circular(99),
+                          padding: const EdgeInsets.symmetric(
+                              horizontal: 10, vertical: 5),
+                          child: text(
                             [
                               if (goal.category.isNotEmpty) goal.category,
                               goal.targetDate == null
                                   ? "No deadline"
                                   : targetLabel(goal.targetDate),
-                            ].join(" · ").toUpperCase(),
-                            9,
-                            TextType.Bold,
-                            color: goal.targetDate != null &&
-                                    goal.targetDate!.isBefore(DateTime.now())
-                                ? colorStandingGrounded
-                                : colorGrey2,
-                            letterSpacing: 1.0,
+                            ].join(" · "),
+                            10,
+                            TextType.Medium,
+                            color: overdue ? colorTinted : colorWhite,
                           ),
-                        ],
-                      ),
-                      const SizedBox(height: 8),
-                      text(goal.title, 19, TextType.Light,
-                          color: colorPrimaryDark,
-                          maxLines: 2,
-                          overflow: TextOverflow.ellipsis),
-                      if (goal.description.isNotEmpty) ...[
-                        const SizedBox(height: 6),
-                        text(goal.description, 12, TextType.Regular,
-                            color: colorGrey2,
-                            maxLines: 2,
-                            overflow: TextOverflow.ellipsis),
+                        ),
+                        const Spacer(),
+                        if (goal.overdueTasks > 0)
+                          pill("${goal.overdueTasks} late", colorWhite,
+                              colorStandingGrounded,
+                              textSize: 9),
                       ],
+                    ),
+                    const Spacer(),
+                    text(goal.title, 21, TextType.Medium,
+                        color: colorWhite,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis),
+                    if (goal.description.isNotEmpty) ...[
+                      const SizedBox(height: 3),
+                      text(goal.description, 12, TextType.Regular,
+                          color: soft,
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis),
                     ],
-                  ),
+                    const SizedBox(height: 12),
+                    meter(goal.progress,
+                        fill: colorLime,
+                        track: colorWhite.withValues(alpha: 0.25),
+                        height: 5),
+                    const SizedBox(height: 10),
+                    Row(
+                      children: [
+                        Expanded(
+                          child: _cardStat(
+                              "${goal.completedTasks}/${goal.totalTasks}",
+                              "Done",
+                              soft),
+                        ),
+                        Expanded(
+                          child: _cardStat(
+                              "${goal.remainingTasks}", "Remaining", soft),
+                        ),
+                        Expanded(
+                          child: _cardStat(
+                              formatDebt(goal.debtContribution), "Debt", soft,
+                              alert: goal.debtContribution > 0),
+                        ),
+                      ],
+                    ),
+                  ],
                 ),
-                const SizedBox(width: 10),
-                if (goal.overdueTasks > 0)
-                  pill("${goal.overdueTasks} late", colorStandingGrounded,
-                      colorStandingGroundedBg, textSize: 9),
-              ],
-            ),
-            const SizedBox(height: 18),
-            meter(goal.progress, fill: accent),
-            const SizedBox(height: 12),
-            Row(
-              children: [
-                Expanded(
-                  child: labelled(
-                    "Done",
-                    "${goal.completedTasks} of ${goal.totalTasks}",
-                    valueSize: 13,
-                  ),
-                ),
-                Expanded(
-                  child: labelled(
-                    "Remaining",
-                    "${goal.remainingTasks}",
-                    valueSize: 13,
-                  ),
-                ),
-                Expanded(
-                  child: labelled(
-                    "Debt",
-                    formatDebt(goal.debtContribution),
-                    valueSize: 13,
-                    valueColor: goal.debtContribution > 0
-                        ? colorStandingGrounded
-                        : colorPrimaryDark,
-                  ),
-                ),
-              ],
-            ),
-          ],
+              ),
+            ],
+          ),
         ),
       ),
     );
   }
 
+  Widget _cardStat(String value, String caption, Color tone,
+      {bool alert = false}) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.end,
+      children: [
+        text(value, 18, TextType.Light,
+            color: alert ? colorTinted : colorWhite),
+        const SizedBox(width: 5),
+        Padding(
+          padding: const EdgeInsets.only(bottom: 2),
+          child: text(caption, 10, TextType.Regular, color: tone),
+        ),
+      ],
+    );
+  }
+
   @override
   void onGoalsLoaded(List<Goal> goals) {
     setState(() {
diff --git a/frontend/lib/Grounded/see/home/ConnectHome.dart b/frontend/lib/Grounded/see/home/ConnectHome.dart
index 3e0eb61..b680d65 100644
--- a/frontend/lib/Grounded/see/home/ConnectHome.dart
+++ b/frontend/lib/Grounded/see/home/ConnectHome.dart
@@ -1,5 +1,6 @@
 import '../../about/external/data/Commitment.dart';
 import '../../about/external/data/ExcuseCluster.dart';
+import '../../about/external/data/RoutineChain.dart';
 import '../../about/internal/application/Standing.dart';
 import '../../about/internal/application/UserDetails.dart';
 
@@ -10,6 +11,9 @@ abstract class ConnectHome {
 
   void onOverdueLoaded(List<Commitment> overdue);
 
+  /// The routine library, for the up-next rail.
+  void onRoutinesLoaded(List<RoutineChain> routines);
+
   /// Standing arrives derived, with the debt it was derived from.
   void onStandingResolved(Standing standing, double debtScore);
 
diff --git a/frontend/lib/Grounded/see/home/HomeState.dart b/frontend/lib/Grounded/see/home/HomeState.dart
index 9f6fd46..c7e9327 100644
--- a/frontend/lib/Grounded/see/home/HomeState.dart
+++ b/frontend/lib/Grounded/see/home/HomeState.dart
@@ -1,22 +1,30 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
 import 'package:stacked/stacked.dart';
 
 import '../../about/external/data/Commitment.dart';
 import '../../about/external/data/ExcuseCluster.dart';
+import '../../about/external/data/RoutineChain.dart';
 import '../../about/internal/application/CommitmentClass.dart';
 import '../../about/internal/application/CommitmentStatus.dart';
 import '../../about/internal/application/NavigatorType.dart';
 import '../../about/internal/application/NotificationType.dart';
+import '../../about/internal/application/RoutineKind.dart';
 import '../../about/internal/application/Standing.dart';
 import '../../about/internal/application/TextType.dart';
 import '../../about/internal/application/UserDetails.dart';
 import '../../configs/Navigator.dart';
+import '../../designs/AmbientBackground.dart';
 import '../../designs/Checkbox.dart';
 import '../../designs/Component.dart';
+import '../../designs/FloatingNav.dart';
+import '../../designs/GlassSurface.dart';
+import '../../designs/ProgressRing.dart';
 import '../../designs/Responsive.dart';
 import '../../designs/Shell.dart';
 import '../../designs/buttons/Buttons.dart';
+import '../../designs/scene/SceneArt.dart';
 import '../../designs/text/Text.dart';
 import '../../utils/Colors.dart';
 import '../../utils/CommonUtils.dart';
@@ -28,6 +36,7 @@ import '../excuse/ExcuseReport.dart';
 import '../goal/Goals.dart';
 import '../overdue/OverdueQueue.dart';
 import '../reportcard/ReportCardScreen.dart';
+import '../routine/RoutineRunner.dart';
 import '../routine/Routines.dart';
 import '../settings/Settings.dart';
 import '../training/Training.dart';
@@ -44,6 +53,8 @@ class HomeState extends State<Home> implements ConnectHome {
 
   List<Commitment> _overdue = <Commitment>[];
 
+  List<RoutineChain> _routines = <RoutineChain>[];
+
   Standing _standing = Standing.Good;
 
   double _debt = 0;
@@ -81,6 +92,26 @@ class HomeState extends State<Home> implements ConnectHome {
     _model?.initialise();
   }
 
+  // ── Derived ───────────────────────────────────────────────────────────────
+
+  bool _isDone(Commitment item) {
+    return item.status == CommitmentStatus.Completed ||
+        item.status == CommitmentStatus.LateCompleted ||
+        _ticked.contains(item.id);
+  }
+
+  int get _doneCount => _plan.where(_isDone).length;
+
+  /// Today's routines that are still open, soonest first; the whole library
+  /// when nothing is due.
+  List<RoutineChain> get _upNext {
+    final DateTime now = DateTime.now();
+    final List<RoutineChain> open = _routines
+        .where((item) => item.scheduledOn(now) && !item.complete)
+        .toList();
+    return (open.isEmpty ? _routines : open).take(6).toList();
+  }
+
   // ── Handlers ──────────────────────────────────────────────────────────────
 
   void _onOpenOverdue() async {
@@ -137,9 +168,30 @@ class HomeState extends State<Home> implements ConnectHome {
         .navigateToPage(NavigatorType.justOpen, const Training(), context);
   }
 
-  void _onOpenRoutines() {
-    GroundedNavigation()
-        .navigateToPage(NavigatorType.justOpen, const Routines(), context);
+  void _onOpenRoutines() async {
+    await GroundedNavigation()
+        .navigateToPageWithData(const Routines(), context);
+    _model?.loadRoutines();
+  }
+
+  void _onOpenKind(RoutineKind kind) async {
+    await GroundedNavigation()
+        .navigateToPageWithData(Routines(kind: kind), context);
+    _model?.loadRoutines();
+  }
+
+  void _onStartRoutine(RoutineChain routine) async {
+    if (routine.steps.isEmpty) {
+      _onOpenRoutines();
+      return;
+    }
+
+    final result = await GroundedNavigation().navigateToPageWithData(
+        RoutineRunner(routine: routine.copy()), context);
+
+    if (result == true) {
+      _model?.loadRoutines();
+    }
   }
 
   void _onOpenSettings() {
@@ -152,6 +204,8 @@ class HomeState extends State<Home> implements ConnectHome {
         .navigateToPage(NavigatorType.justOpen, const ExcuseReport(), context);
   }
 
+  void _onNavToday() {}
+
   // ── Views ─────────────────────────────────────────────────────────────────
 
   Widget _mobileView(BoxConstraints constraints) {
@@ -160,111 +214,330 @@ class HomeState extends State<Home> implements ConnectHome {
     final bool queueIsHome =
         StandingEngine.showsOverdueQueueAsHome(_standing) && !_distressed;
 
-    return Sheet(
-      eyebrow: _user.name.isEmpty ? "Grounded" : _user.name,
-      title: queueIsHome ? "What you owe" : "Today",
-      chrome: _distressed ? colorPrimaryDark : _chromeFor(_standing),
-      banner: _standingBanner(),
-      action: chromeAction(
-        CupertinoIcons.person,
-        _onOpenSettings,
-        dotted: _user.sickMode,
-        dotColor: colorStandingWarned,
+    return Scaffold(
+      backgroundColor: colorAmbientMid,
+      body: AmbientBackground(
+        child: Stack(
+          children: [
+            SafeArea(
+              bottom: false,
+              child: SingleChildScrollView(
+                padding: const EdgeInsets.fromLTRB(20, 8, 20, 130),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    _topBar(),
+                    const SizedBox(height: 26),
+                    _greeting(queueIsHome),
+                    const SizedBox(height: 24),
+                    if (!_distressed) ...[
+                      _standingCard(),
+                      const SizedBox(height: 28),
+                    ],
+                    if (_distressed)
+                      _frosted(_distressBody())
+                    else if (queueIsHome)
+                      _frosted(_groundedBody())
+                    else
+                      _planBody(),
+                  ],
+                ),
+              ),
+            ),
+            Positioned(
+              left: 0,
+              right: 0,
+              bottom: 0,
+              child: FloatingNav(
+                selected: 0,
+                actionIcon: CupertinoIcons.add,
+                onAction: _onAddCommitment,
+                entries: <NavEntry>[
+                  (
+                    icon: CupertinoIcons.house_fill,
+                    label: "Today",
+                    onTap: _onNavToday
+                  ),
+                  (
+                    icon: CupertinoIcons.square_stack_3d_up_fill,
+                    label: "Routines",
+                    onTap: _onOpenRoutines
+                  ),
+                  (
+                    icon: CupertinoIcons.flag_fill,
+                    label: "Goals",
+                    onTap: _onOpenGoals
+                  ),
+                  (
+                    icon: CupertinoIcons.flame_fill,
+                    label: "Training",
+                    onTap: _onOpenTraining
+                  ),
+                ],
+              ).animate().fadeIn(duration: 400.ms, delay: 250.ms).slideY(
+                  begin: 0.4,
+                  end: 0,
+                  duration: 500.ms,
+                  delay: 250.ms,
+                  curve: Curves.easeOutCubic),
+            ),
+          ],
+        ),
       ),
-      child: _distressed
-          ? _distressBody()
-          : queueIsHome
-              ? _groundedBody()
-              : _planBody(),
     );
   }
 
-  /// The chrome carries the standing colour, so the tier is legible before a
-  /// single word is read.
-  Color _chromeFor(Standing standing) {
-    switch (standing) {
-      case Standing.Good:
-        return colorPrimaryDark;
-      case Standing.Warned:
-        return colorPrimaryDark;
-      case Standing.Grounded:
-        return colorStandingGrounded;
-      case Standing.Lockdown:
-        return colorStandingLockdown;
-    }
-  }
-
-  /// The debt strip that sits in the black chrome under the title.
-  Widget _standingBanner() {
-    if (_distressed) {
-      return const SizedBox.shrink();
-    }
-
-    final Color tone = standingColor(_standing);
-
-    return Container(
-      padding: const EdgeInsets.fromLTRB(16, 14, 16, 14),
-      decoration: BoxDecoration(
-        color: colorWhite.withValues(alpha: 0.08),
-        borderRadius: BorderRadius.circular(16),
-      ),
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.center,
-        children: [
-          Expanded(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                Row(
-                  children: [
-                    Container(
-                      width: 7,
-                      height: 7,
-                      decoration: BoxDecoration(
-                        color: _standing == Standing.Good ? tone : colorWhite,
-                        shape: BoxShape.circle,
-                      ),
-                    ),
-                    const SizedBox(width: 8),
-                    text(
-                      standingLabel(_standing).toUpperCase(),
-                      9,
-                      TextType.Bold,
-                      color: colorWhite.withValues(alpha: 0.75),
-                      letterSpacing: 1.2,
-                    ),
-                  ],
-                ),
-                const SizedBox(height: 8),
-                text(
-                  ToneEngine.standingHeadline(_standing, _user.tone),
-                  16,
-                  TextType.Medium,
-                  color: colorWhite,
-                ),
-              ],
-            ),
-          ),
-          const SizedBox(width: 16),
-          Column(
-            crossAxisAlignment: CrossAxisAlignment.end,
+  Widget _topBar() {
+    return Row(
+      children: [
+        _avatar(46),
+        const SizedBox(width: 12),
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisSize: MainAxisSize.min,
             children: [
-              text("DEBT", 9, TextType.Bold,
-                  color: colorWhite.withValues(alpha: 0.45),
-                  letterSpacing: 1.0),
-              const SizedBox(height: 4),
-              text(formatDebt(_debt), 30, TextType.Light, color: colorWhite),
+              text(
+                "${weekdayName(DateTime.now().weekday)}, ${DateTime.now().day} ${_monthName(DateTime.now().month)}",
+                12,
+                TextType.Regular,
+                color: colorInkSoft,
+              ),
+              const SizedBox(height: 2),
+              text("Grounded", 15, TextType.Medium, color: colorInk),
             ],
           ),
+        ),
+        glassCircle(
+          CupertinoIcons.bell,
+          _onOpenOverdue,
+          dotted: _overdue.isNotEmpty,
+          dotColor: colorStandingGrounded,
+        ),
+        const SizedBox(width: 8),
+        glassCircle(CupertinoIcons.chart_bar_alt_fill, _onOpenReportCard),
+        const SizedBox(width: 8),
+        glassCircle(
+          CupertinoIcons.person,
+          _onOpenSettings,
+          dotted: _user.sickMode,
+          dotColor: colorStandingWarned,
+        ),
+      ],
+    );
+  }
+
+  /// A round portrait cut from the painted landscape, with the initial on it.
+  Widget _avatar(double size) {
+    final String initial =
+        _user.name.isEmpty ? "G" : _user.name.substring(0, 1).toUpperCase();
+
+    return Container(
+      width: size,
+      height: size,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        border: Border.all(color: colorWhite, width: 2),
+        boxShadow: const [
+          BoxShadow(
+            color: Color(0x1A1A1F1C),
+            blurRadius: 12,
+            offset: Offset(0, 4),
+          ),
         ],
       ),
+      child: ClipOval(
+        child: Stack(
+          fit: StackFit.expand,
+          children: [
+            SceneArt(palette: sceneWorkout, seed: sceneSeed(_user.name)),
+            Center(
+              child: text(initial, size * 0.4, TextType.Medium,
+                  color: colorWhite),
+            ),
+          ],
+        ),
+      ),
     );
   }
 
-  /// The normal day: the plan, with the overdue count kept visible above it so
-  /// it is never out of sight.
+  /// "Hey ◯ Alex / Here's what to hold today." — two tones, oversized.
+  Widget _greeting(bool queueIsHome) {
+    final String name = _user.name.isEmpty ? "there" : _user.name;
+
+    String second;
+    if (_distressed) {
+      second = "Go easy on\nyourself today.";
+    } else if (queueIsHome) {
+      second = "Clear what you\nowe first.";
+    } else if (_plan.isNotEmpty && _doneCount == _plan.length) {
+      second = "Every promise\nkept today.";
+    } else {
+      second = "Here's what to\nhold today.";
+    }
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Row(
+          children: [
+            text("Hey", 38, TextType.Medium,
+                color: colorInk, letterSpacing: -1.0),
+            const SizedBox(width: 10),
+            _avatar(36),
+            const SizedBox(width: 10),
+            Flexible(
+              child: text(name, 38, TextType.Medium,
+                  color: colorInk,
+                  letterSpacing: -1.0,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis),
+            ),
+          ],
+        ),
+        const SizedBox(height: 4),
+        text(second, 34, TextType.Regular,
+            color: colorInkSoft, height: 1.12, letterSpacing: -0.8),
+      ],
+    )
+        .animate()
+        .fadeIn(duration: 500.ms)
+        .slideY(begin: 0.15, end: 0, duration: 600.ms, curve: Curves.easeOut);
+  }
+
+  /// The day at a glance: a ring for what is done, the standing, and the
+  /// three numbers that matter.
+  Widget _standingCard() {
+    final Color tone = standingColor(_standing);
+    final double fraction = _plan.isEmpty ? 0 : _doneCount / _plan.length;
+
+    return GestureDetector(
+      onTap: _overdue.isEmpty ? _onOpenReportCard : _onOpenOverdue,
+      child: Container(
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(28),
+          boxShadow: const [
+            BoxShadow(
+              color: Color(0x142A3A30),
+              blurRadius: 30,
+              offset: Offset(0, 12),
+            ),
+          ],
+        ),
+        child: GlassSurface(
+          radius: BorderRadius.circular(28),
+          tint: colorGlassStrong,
+          padding: const EdgeInsets.all(18),
+          child: Row(
+            children: [
+              ProgressRing(
+                fraction: fraction,
+                size: 84,
+                stroke: 8,
+                fill: colorPrimary,
+                track: colorPrimary.withValues(alpha: 0.12),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    text("$_doneCount/${_plan.length}", 19, TextType.Medium,
+                        color: colorInk),
+                    text("done", 10, TextType.Regular, color: colorInkSoft),
+                  ],
+                ),
+              ),
+              const SizedBox(width: 18),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Row(
+                      children: [
+                        Container(
+                          width: 8,
+                          height: 8,
+                          decoration: BoxDecoration(
+                            color: tone,
+                            shape: BoxShape.circle,
+                            boxShadow: <BoxShadow>[
+                              BoxShadow(
+                                  color: tone.withValues(alpha: 0.5),
+                                  blurRadius: 6),
+                            ],
+                          ),
+                        ),
+                        const SizedBox(width: 7),
+                        text(standingLabel(_standing).toUpperCase(), 9,
+                            TextType.Bold,
+                            color: tone, letterSpacing: 1.2),
+                      ],
+                    ),
+                    const SizedBox(height: 6),
+                    text(
+                      ToneEngine.standingHeadline(_standing, _user.tone),
+                      15,
+                      TextType.Medium,
+                      color: colorInk,
+                      maxLines: 2,
+                      overflow: TextOverflow.ellipsis,
+                    ),
+                    const SizedBox(height: 14),
+                    Row(
+                      children: [
+                        Expanded(
+                            child: _miniStat("Debt", formatDebt(_debt))),
+                        Expanded(
+                          child: _miniStat(
+                              "Planned", formatMinutes(_plannedMinutes())),
+                        ),
+                        Expanded(
+                          child: _miniStat("Overdue", "${_overdue.length}",
+                              alert: _overdue.isNotEmpty),
+                        ),
+                      ],
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    ).animate().fadeIn(duration: 500.ms, delay: 120.ms).slideY(
+        begin: 0.15, end: 0, duration: 600.ms, delay: 120.ms,
+        curve: Curves.easeOut);
+  }
+
+  Widget _miniStat(String label, String value, {bool alert = false}) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        text(value, 19, TextType.Light,
+            color: alert ? colorStandingGrounded : colorInk),
+        const SizedBox(height: 2),
+        text(label, 10, TextType.Regular, color: colorInkSoft),
+      ],
+    );
+  }
+
+  /// Grounded and distress bodies keep their copy; they sit on a frosted
+  /// panel so they belong to the same surface as everything else.
+  Widget _frosted(Widget child) {
+    return Container(
+      padding: const EdgeInsets.fromLTRB(20, 24, 20, 24),
+      decoration: BoxDecoration(
+        color: colorFrost,
+        borderRadius: BorderRadius.circular(28),
+        border: Border.all(color: colorGlassBorder),
+      ),
+      child: child,
+    );
+  }
+
+  /// The normal day: categories, the up-next rail, the pattern and the plan.
   Widget _planBody() {
     final int overdueCount = _overdue.length;
 
@@ -274,19 +547,30 @@ class HomeState extends State<Home> implements ConnectHome {
       children: [
         if (overdueCount > 0) ...[
           _overdueCallout(overdueCount),
-          const SizedBox(height: 24),
+          const SizedBox(height: 26),
+        ],
+        sectionBreak("Your day",
+            trailing: _viewAll("View all", _onOpenRoutines)),
+        _categoryRail(),
+        const SizedBox(height: 26),
+        if (_upNext.isNotEmpty) ...[
+          sectionBreak("Up next",
+              caption: "${_upNext.length} routines",
+              trailing: _viewAll("Library", _onOpenRoutines)),
+          _featuredRail(),
+          const SizedBox(height: 28),
         ],
         if (_insight != null) ...[
           _insightCard(_insight!),
-          const SizedBox(height: 24),
+          const SizedBox(height: 28),
         ],
         sectionBreak(
           "The plan",
-          caption: "${_plan.length} committed",
+          caption: "$_doneCount of ${_plan.length} done",
           trailing: _plan.isEmpty
               ? null
-              : text(formatMinutes(_plannedMinutes()), 12, TextType.Bold,
-                  color: colorGrey2),
+              : text(formatMinutes(_plannedMinutes()), 12, TextType.Medium,
+                  color: colorInkSoft),
         ),
         if (_plan.isEmpty)
           emptyState(
@@ -295,28 +579,28 @@ class HomeState extends State<Home> implements ConnectHome {
             "An empty plan is a decision too. Add something you actually intend to do.",
           )
         else ...[
-          ..._plan.map(_commitmentRow),
+          for (int index = 0; index < _plan.length; index++)
+            _commitmentRow(_plan[index])
+                .animate()
+                .fadeIn(duration: 350.ms, delay: (60 * index).ms)
+                .slideX(
+                    begin: 0.06,
+                    end: 0,
+                    duration: 400.ms,
+                    delay: (60 * index).ms,
+                    curve: Curves.easeOut),
           addTaskAffordance(
             _onAddCommitment,
             enabled: StandingEngine.permitsNewCommitment(_standing),
           ),
         ],
-        const SizedBox(height: 12),
-        _quickLinks(),
-        const SizedBox(height: 24),
-        roundedCornerButton(
-          "Commit to something",
-          _onAddCommitment,
-          icon: CupertinoIcons.add,
-          enabled: StandingEngine.permitsNewCommitment(_standing),
-        ),
         if (!StandingEngine.permitsNewCommitment(_standing)) ...[
-          const SizedBox(height: 10),
+          const SizedBox(height: 4),
           text(
             ToneEngine.standingBody(_standing, _user.tone),
             12,
             TextType.Regular,
-            color: colorGrey2,
+            color: colorInkSoft,
             align: TextAlign.center,
           ),
         ],
@@ -324,6 +608,210 @@ class HomeState extends State<Home> implements ConnectHome {
     );
   }
 
+  Widget _viewAll(String label, VoidCallback onTap) {
+    return GestureDetector(
+      onTap: onTap,
+      behavior: HitTestBehavior.opaque,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 4),
+        child: text(label, 12, TextType.Regular, color: colorInkSoft),
+      ),
+    );
+  }
+
+  /// Round painted portraits — tap one to open that part of the day.
+  Widget _categoryRail() {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        _category(sceneWorkout, kindIcon(RoutineKind.Workout), "Workout", 3,
+            () => _onOpenKind(RoutineKind.Workout)),
+        _category(sceneMeditation, kindIcon(RoutineKind.Meditation),
+            "Meditate", 5, () => _onOpenKind(RoutineKind.Meditation)),
+        _category(sceneMustDo, kindIcon(RoutineKind.MustDo), "Must-do", 8,
+            () => _onOpenKind(RoutineKind.MustDo)),
+        _category(goalScene(goalAccents[4]), CupertinoIcons.flag_fill,
+            "Goals", 13, _onOpenGoals),
+        _category(goalScene(goalAccents[2]),
+            CupertinoIcons.chart_bar_alt_fill, "Report", 21, _onOpenReportCard),
+      ],
+    );
+  }
+
+  Widget _category(List<Color> palette, IconData icon, String label, int seed,
+      VoidCallback onTap) {
+    return GestureDetector(
+      onTap: onTap,
+      behavior: HitTestBehavior.opaque,
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Container(
+            width: 60,
+            height: 60,
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              border: Border.all(color: colorWhite, width: 2.5),
+              boxShadow: const [
+                BoxShadow(
+                  color: Color(0x1F2A3A30),
+                  blurRadius: 14,
+                  offset: Offset(0, 6),
+                ),
+              ],
+            ),
+            child: ClipOval(
+              child: SceneArt(
+                palette: palette,
+                seed: seed,
+                figure: icon,
+                figureScale: 0.48,
+                figureAlignment: const Alignment(0, 0.25),
+              ),
+            ),
+          ),
+          const SizedBox(height: 8),
+          text(label, 11, TextType.Regular, color: colorInk),
+        ],
+      ),
+    );
+  }
+
+  Widget _featuredRail() {
+    final List<RoutineChain> items = _upNext;
+
+    return SizedBox(
+      height: 236,
+      child: ListView.separated(
+        scrollDirection: Axis.horizontal,
+        clipBehavior: Clip.none,
+        itemCount: items.length,
+        separatorBuilder: (context, index) => const SizedBox(width: 12),
+        itemBuilder: (context, index) => _featuredCard(items[index]),
+      ),
+    );
+  }
+
+  /// The image-led card: a painted scene, a glass chip, the title and three
+  /// light numbers along the bottom.
+  Widget _featuredCard(RoutineChain routine) {
+    final Color label = colorWhite.withValues(alpha: 0.75);
+    final bool workout = routine.kind == RoutineKind.Workout;
+
+    return GestureDetector(
+      onTap: () => _onStartRoutine(routine),
+      child: Container(
+        width: 196,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(26),
+          boxShadow: const [
+            BoxShadow(
+              color: Color(0x262A3A30),
+              blurRadius: 24,
+              offset: Offset(0, 10),
+            ),
+          ],
+        ),
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(26),
+          child: Stack(
+            fit: StackFit.expand,
+            children: [
+              SceneArt(
+                palette: scenePalette(routine.kind),
+                seed: sceneSeed(routine.title),
+                figure: kindIcon(routine.kind),
+                figureScale: 0.44,
+                figureAlignment: const Alignment(0.1, -0.25),
+                shade: true,
+              ),
+              Padding(
+                padding: const EdgeInsets.all(12),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      children: [
+                        GlassSurface(
+                          onDark: true,
+                          radius: BorderRadius.circular(99),
+                          padding: const EdgeInsets.symmetric(
+                              horizontal: 10, vertical: 5),
+                          child: text(
+                            routine.startMinute >= 0
+                                ? formatStartMinute(routine.startMinute)
+                                : kindLabel(routine.kind),
+                            10,
+                            TextType.Medium,
+                            color: colorWhite,
+                          ),
+                        ),
+                        const Spacer(),
+                        glassCircle(CupertinoIcons.play_fill,
+                            () => _onStartRoutine(routine),
+                            size: 32, onDark: true),
+                      ],
+                    ),
+                    const Spacer(),
+                    text(routine.title, 16, TextType.Medium,
+                        color: colorWhite,
+                        maxLines: 2,
+                        overflow: TextOverflow.ellipsis),
+                    const SizedBox(height: 10),
+                    Row(
+                      children: [
+                        Expanded(
+                          child: _cardStat(
+                              "${(routine.totalSeconds / 60).round()}",
+                              CupertinoIcons.clock,
+                              "Min",
+                              label),
+                        ),
+                        Expanded(
+                          child: _cardStat("${routine.steps.length}",
+                              CupertinoIcons.list_bullet, "Steps", label),
+                        ),
+                        Expanded(
+                          child: _cardStat(
+                              workout
+                                  ? "${routine.totalSets}"
+                                  : "${(routine.partialCompletion * 100).round()}%",
+                              workout
+                                  ? CupertinoIcons.repeat
+                                  : CupertinoIcons.chart_pie,
+                              workout ? "Sets" : "Held",
+                              label),
+                        ),
+                      ],
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _cardStat(String value, IconData icon, String caption, Color tone) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        text(value, 20, TextType.Light, color: colorWhite),
+        const SizedBox(height: 2),
+        Row(
+          children: [
+            Icon(icon, size: 10, color: tone),
+            const SizedBox(width: 3),
+            text(caption, 9, TextType.Regular, color: tone),
+          ],
+        ),
+      ],
+    );
+  }
+
   /// Grounded: the plan is hidden entirely and only the mess is shown.
   Widget _groundedBody() {
     return Column(
@@ -331,7 +819,7 @@ class HomeState extends State<Home> implements ConnectHome {
       mainAxisSize: MainAxisSize.min,
       children: [
         text("YOUR PLANS ARE HIDDEN", 10, TextType.Bold,
-            color: colorGrey2, letterSpacing: 1.2),
+            color: colorInkSoft, letterSpacing: 1.2),
         const SizedBox(height: 10),
         displayTitle(
           _standing == Standing.Lockdown
@@ -343,7 +831,7 @@ class HomeState extends State<Home> implements ConnectHome {
           ToneEngine.standingBody(_standing, _user.tone),
           14,
           TextType.Regular,
-          color: colorGrey2,
+          color: colorInkSoft,
           height: 1.55,
         ),
         const SizedBox(height: 28),
@@ -403,7 +891,8 @@ class HomeState extends State<Home> implements ConnectHome {
       crossAxisAlignment: CrossAxisAlignment.stretch,
       mainAxisSize: MainAxisSize.min,
       children: [
-        text("A NOTE", 10, TextType.Bold, color: colorGrey2, letterSpacing: 1.2),
+        text("A NOTE", 10, TextType.Bold,
+            color: colorInkSoft, letterSpacing: 1.2),
         const SizedBox(height: 10),
         displayTitle(ToneEngine.distressHeadline()),
         const SizedBox(height: 14),
@@ -411,7 +900,7 @@ class HomeState extends State<Home> implements ConnectHome {
           ToneEngine.distressBody(),
           15,
           TextType.Regular,
-          color: colorGrey2,
+          color: colorInkSoft,
           height: 1.6,
         ),
         const SizedBox(height: 28),
@@ -426,13 +915,13 @@ class HomeState extends State<Home> implements ConnectHome {
                   color: colorPositive, letterSpacing: 1.2),
               const SizedBox(height: 8),
               text("Debt is not accruing right now.", 16, TextType.Medium,
-                  color: colorPrimaryDark),
+                  color: colorInk),
               const SizedBox(height: 6),
               text(
                 "Nothing you miss this week is counting against you.",
                 13,
                 TextType.Regular,
-                color: colorGrey2,
+                color: colorInkSoft,
                 height: 1.5,
               ),
             ],
@@ -452,82 +941,137 @@ class HomeState extends State<Home> implements ConnectHome {
     );
   }
 
+  /// Overdue, as a warm card with a painted strip — impossible to miss,
+  /// still part of the same world.
   Widget _overdueCallout(int count) {
-    return card(
-      background: colorStandingGroundedBg,
-      borderColor: colorStandingGrounded.withValues(alpha: 0.20),
+    return GestureDetector(
       onTap: _onOpenOverdue,
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.center,
-        children: [
-          Container(
-            width: 44,
-            height: 44,
-            alignment: Alignment.center,
-            decoration: BoxDecoration(
-              color: colorStandingGrounded,
-              borderRadius: BorderRadius.circular(13),
-            ),
-            child: text("$count", 17, TextType.Bold, color: colorWhite),
+      child: Container(
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(24),
+          gradient: const LinearGradient(
+            begin: Alignment.topLeft,
+            end: Alignment.bottomRight,
+            colors: <Color>[colorOverdueWarm, colorOverdueWarmEnd],
           ),
-          const SizedBox(width: 14),
-          Expanded(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                text("OVERDUE", 9, TextType.Bold,
-                    color: colorStandingGrounded, letterSpacing: 1.2),
-                const SizedBox(height: 5),
-                text(
-                  count >= Thresholds.maxOpenOverdue
-                      ? "You are at the cap. Nothing new until this drops."
-                      : "$count item${count == 1 ? "" : "s"} past the window.",
-                  14,
-                  TextType.Medium,
-                  color: colorPrimaryDark,
+          border: Border.all(color: colorWhite, width: 1.5),
+          boxShadow: const [
+            BoxShadow(
+              color: Color(0x1AB5442F),
+              blurRadius: 24,
+              offset: Offset(0, 10),
+            ),
+          ],
+        ),
+        padding: const EdgeInsets.all(14),
+        child: Row(
+          children: [
+            Container(
+              width: 50,
+              height: 50,
+              alignment: Alignment.center,
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                gradient: const RadialGradient(
+                  center: Alignment(-0.3, -0.4),
+                  colors: <Color>[colorOverdueGlow, colorStandingGrounded],
                 ),
+                boxShadow: <BoxShadow>[
+                  BoxShadow(
+                    color: colorStandingGrounded.withValues(alpha: 0.35),
+                    blurRadius: 12,
+                    offset: const Offset(0, 5),
+                  ),
+                ],
+              ),
+              child: text("$count", 19, TextType.Medium, color: colorWhite),
+            ),
+            const SizedBox(width: 14),
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  text("Overdue", 11, TextType.Medium,
+                      color: colorStandingGrounded),
+                  const SizedBox(height: 3),
+                  text(
+                    count >= Thresholds.maxOpenOverdue
+                        ? "You are at the cap. Nothing new until this drops."
+                        : "$count item${count == 1 ? "" : "s"} past the window.",
+                    15,
+                    TextType.Medium,
+                    color: colorInk,
+                  ),
+                ],
+              ),
+            ),
+            glassCircle(CupertinoIcons.arrow_right, _onOpenOverdue, size: 36),
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// The excuse confrontation. One pattern, stated plainly, on the dark
+  /// night card with the lime spark.
+  Widget _insightCard(ExcuseCluster cluster) {
+    return GestureDetector(
+      onTap: _onOpenExcuses,
+      child: Container(
+        padding: const EdgeInsets.fromLTRB(20, 18, 20, 20),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(26),
+          gradient: const LinearGradient(
+            begin: Alignment.topLeft,
+            end: Alignment.bottomRight,
+            colors: <Color>[colorNightLift, colorNight],
+          ),
+          boxShadow: const [
+            BoxShadow(
+              color: Color(0x332A3A30),
+              blurRadius: 24,
+              offset: Offset(0, 10),
+            ),
+          ],
+        ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Row(
+              children: [
+                Icon(CupertinoIcons.sparkles, size: 14, color: colorLime),
+                const SizedBox(width: 6),
+                text("Pattern spotted", 12, TextType.Medium, color: colorLime),
+                const Spacer(),
+                text("${cluster.occurrences}× this month", 11,
+                    TextType.Regular,
+                    color: colorWhite.withValues(alpha: 0.5)),
               ],
             ),
-          ),
-          Icon(CupertinoIcons.chevron_right,
-              size: 15, color: colorStandingGrounded),
-        ],
+            const SizedBox(height: 12),
+            text(cluster.insight, 16, TextType.Regular,
+                color: colorWhite, height: 1.5),
+          ],
+        ),
       ),
     );
   }
 
-  /// The excuse confrontation. One pattern, stated plainly, with the
-  /// suggestion attached.
-  Widget _insightCard(ExcuseCluster cluster) {
-    return card(
-      background: colorPrimaryDark,
-      borderColor: colorPrimaryDark,
-      onTap: _onOpenExcuses,
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              text("PATTERN", 9, TextType.Bold,
-                  color: colorWhite.withValues(alpha: 0.45),
-                  letterSpacing: 1.2),
-              text("${cluster.occurrences}×", 11, TextType.Bold,
-                  color: colorWhite.withValues(alpha: 0.45)),
-            ],
-          ),
-          const SizedBox(height: 12),
-          text(cluster.insight, 15, TextType.Regular,
-              color: colorWhite, height: 1.55),
-        ],
-      ),
-    );
+  IconData _classIcon(CommitmentClass value) {
+    switch (value) {
+      case CommitmentClass.NonNegotiable:
+        return CupertinoIcons.flame_fill;
+      case CommitmentClass.Standard:
+        return CupertinoIcons.bolt_fill;
+      case CommitmentClass.Elective:
+        return CupertinoIcons.sun_max_fill;
+    }
   }
 
-  /// A task line with its tick box. Completed items keep their place, struck
-  /// through — the day stays a record of what was asked, not just what is left.
+  /// A task row: painted thumbnail, the class as a coloured kicker, the title,
+  /// the window and cost, and a round tick on the right.
   Widget _commitmentRow(Commitment item) {
     final bool settled = item.status == CommitmentStatus.Completed ||
         item.status == CommitmentStatus.LateCompleted;
@@ -536,127 +1080,137 @@ class HomeState extends State<Home> implements ConnectHome {
 
     final bool late = item.windowClosed && !settled;
 
-    final Color accent = classColor(item.commitmentClass);
+    final Color accent = item.status == CommitmentStatus.LateCompleted
+        ? colorStandingWarned
+        : classColor(item.commitmentClass);
 
     return Container(
-      margin: const EdgeInsets.only(bottom: 6),
+      margin: const EdgeInsets.only(bottom: 10),
       child: card(
-        padding: const EdgeInsets.fromLTRB(12, 8, 14, 8),
-        child: TickRow(
-          checked: ticked,
-          title: item.title,
-          accent: item.status == CommitmentStatus.LateCompleted
-              ? colorStandingWarned
-              : accent,
-          onTick: settled ? null : () => _onTick(item),
-          onTap: _onOpenOverdue,
-          detail: Row(
-            children: [
-              text(formatWindow(item), 11, TextType.Regular,
-                  color: colorGrey2),
-              const SizedBox(width: 10),
-              Container(
-                width: 3,
-                height: 3,
-                decoration:
-                    BoxDecoration(color: colorGrey, shape: BoxShape.circle),
+        padding: const EdgeInsets.fromLTRB(8, 8, 12, 8),
+        onTap: _onOpenOverdue,
+        child: Row(
+          children: [
+            SizedBox(
+              width: 64,
+              height: 64,
+              child: ClipRRect(
+                borderRadius: BorderRadius.circular(16),
+                child: Opacity(
+                  opacity: ticked ? 0.45 : 1,
+                  child: SceneArt(
+                    palette: classScene(item.commitmentClass),
+                    seed: sceneSeed(item.title),
+                    figure: _classIcon(item.commitmentClass),
+                    figureScale: 0.46,
+                    figureAlignment: const Alignment(0, 0.1),
+                  ),
+                ),
               ),
-              const SizedBox(width: 10),
-              text(formatMinutes(item.estMinutes), 11, TextType.Regular,
-                  color: colorGrey2),
-              if (late) ...[
-                const SizedBox(width: 10),
-                pill(
-                  overdueLabel(item),
-                  colorStandingGrounded,
-                  colorStandingGroundedBg,
-                  textSize: 9,
-                ),
-              ],
-              if (item.status == CommitmentStatus.LateCompleted) ...[
-                const SizedBox(width: 10),
-                pill("Late", colorStandingWarned, colorStandingWarnedBg,
-                    textSize: 9),
-              ],
-            ],
-          ),
-          trailing: ticked
-              ? null
-              : pill(
-                  classLabel(item.commitmentClass),
-                  accent,
-                  classBackground(item.commitmentClass),
-                  textSize: 9,
-                ),
+            ),
+            const SizedBox(width: 12),
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  text(
+                    late
+                        ? overdueLabel(item)
+                        : item.status == CommitmentStatus.LateCompleted
+                            ? "Completed late"
+                            : classLabel(item.commitmentClass),
+                    10,
+                    TextType.Medium,
+                    color: late ? colorStandingGrounded : accent,
+                  ),
+                  const SizedBox(height: 3),
+                  text(
+                    item.title,
+                    15,
+                    TextType.Medium,
+                    color: ticked ? colorInkSoft : colorInk,
+                    maxLines: 2,
+                    overflow: TextOverflow.ellipsis,
+                    decoration: ticked ? TextDecoration.lineThrough : null,
+                  ),
+                  const SizedBox(height: 5),
+                  Row(
+                    children: [
+                      Icon(CupertinoIcons.clock, size: 11,
+                          color: colorInkSoft),
+                      const SizedBox(width: 4),
+                      Flexible(
+                        child: text(formatWindow(item), 11, TextType.Regular,
+                            color: colorInkSoft,
+                            maxLines: 1,
+                            overflow: TextOverflow.ellipsis),
+                      ),
+                      const SizedBox(width: 10),
+                      Icon(CupertinoIcons.timer, size: 11,
+                          color: colorInkSoft),
+                      const SizedBox(width: 4),
+                      text(formatMinutes(item.estMinutes), 11,
+                          TextType.Regular,
+                          color: colorInkSoft),
+                    ],
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(width: 8),
+            _roundTick(ticked, accent, settled ? null : () => _onTick(item)),
+          ],
         ),
       ),
     );
   }
 
-  Widget _quickLinks() {
-    return Column(
-      children: [
-        Row(
-          children: [
-            Expanded(
-              child: _quickLink(
-                CupertinoIcons.flag_fill,
-                "Goals",
-                _onOpenGoals,
-              ),
-            ),
-            const SizedBox(width: 10),
-            Expanded(
-              child: _quickLink(
-                CupertinoIcons.square_stack_3d_up_fill,
-                "Routines",
-                _onOpenRoutines,
-              ),
-            ),
-          ],
-        ),
-        const SizedBox(height: 10),
-        Row(
-          children: [
-            Expanded(
-              child: _quickLink(
-                CupertinoIcons.flame_fill,
-                "Training",
-                _onOpenTraining,
-              ),
-            ),
-            const SizedBox(width: 10),
-            Expanded(
-              child: _quickLink(
-                CupertinoIcons.chart_bar_alt_fill,
-                "Report",
-                _onOpenReportCard,
-              ),
-            ),
-          ],
-        ),
-      ],
-    );
-  }
-
-  Widget _quickLink(IconData icon, String label, VoidCallback onTap) {
-    return card(
-      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 16),
+  /// The tick as a ring: hollow while open, filled with a check once done.
+  Widget _roundTick(bool checked, Color accent, VoidCallback? onTap) {
+    return GestureDetector(
       onTap: onTap,
-      child: Row(
-        children: [
-          Icon(icon, size: 17, color: colorPrimaryDark),
-          const SizedBox(width: 10),
-          Expanded(
-            child: text(label, 13, TextType.Medium,
-                color: colorPrimaryDark, maxLines: 1,
-                overflow: TextOverflow.ellipsis),
+      behavior: HitTestBehavior.opaque,
+      child: Padding(
+        padding: const EdgeInsets.all(4),
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 220),
+          curve: Curves.easeOutBack,
+          width: 38,
+          height: 38,
+          decoration: BoxDecoration(
+            shape: BoxShape.circle,
+            color: checked ? colorPrimary : colorWhite,
+            border: Border.all(
+              color: checked ? colorPrimary : accent.withValues(alpha: 0.35),
+              width: 2,
+            ),
+            boxShadow: checked
+                ? <BoxShadow>[
+                    BoxShadow(
+                      color: colorPrimary.withValues(alpha: 0.35),
+                      blurRadius: 10,
+                      offset: const Offset(0, 4),
+                    ),
+                  ]
+                : const [],
           ),
-        ],
+          child: checked
+              ? Icon(Icons.check_rounded, size: 20, color: colorWhite)
+              : null,
+        ),
       ),
     );
   }
 
+  String _monthName(int month) {
+    const List<String> names = <String>[
+      "January", "February", "March", "April", "May", "June", "July",
+      "August", "September", "October", "November", "December",
+    ];
+    return names[month - 1];
+  }
+
   double _plannedMinutes() {
     double total = 0;
     for (Commitment item in _plan) {
@@ -691,6 +1245,13 @@ class HomeState extends State<Home> implements ConnectHome {
     });
   }
 
+  @override
+  void onRoutinesLoaded(List<RoutineChain> routines) {
+    setState(() {
+      _routines = routines;
+    });
+  }
+
   @override
   void onStandingResolved(Standing standing, double debtScore) {
     setState(() {
diff --git a/frontend/lib/Grounded/see/home/ViewHome.dart b/frontend/lib/Grounded/see/home/ViewHome.dart
index 374526b..dea0c40 100644
--- a/frontend/lib/Grounded/see/home/ViewHome.dart
+++ b/frontend/lib/Grounded/see/home/ViewHome.dart
@@ -1,5 +1,6 @@
 import '../../about/external/data/Commitment.dart';
 import '../../about/external/data/ExcuseCluster.dart';
+import '../../about/external/data/RoutineChain.dart';
 import '../../about/external/data/pages/request/CommitmentsRequest.dart';
 import '../../about/external/data/pages/request/HistoryRequest.dart';
 import '../../about/external/data/pages/request/PageAndSort.dart';
@@ -13,6 +14,7 @@ import '../../about/internal/application/Standing.dart';
 import '../../about/internal/application/UserDetails.dart';
 import '../../utils/DebtEngine.dart';
 import '../../utils/GuardrailEngine.dart';
+import '../../utils/ObjectConvertors.dart';
 import '../../utils/StandingEngine.dart';
 import '../../utils/ToneEngine.dart';
 import '../parent/ParentViewModel.dart';
@@ -52,11 +54,30 @@ class ViewHome extends ParentViewModel {
       connection.onPlanLoaded(page.content);
 
       loadOverdue();
+
+      loadRoutines();
     } catch (e) {
       handleError(e, () => loadPlan(), () => dismissError(), "Retry");
     }
   }
 
+  /// The routines feed the home rail. Quiet on failure — the plan is the
+  /// screen; the rail is a shortcut.
+  void loadRoutines() async {
+    try {
+      final response = await getDataManager().getMyRoutines(HistoryRequest(
+        query: PageAndSort(
+          sort: Sort('asc', 'startMinute'),
+          page: Pageable(0, 0, 50, 0),
+        ),
+      ));
+
+      connection.onRoutinesLoaded(getRoutineChainList(response.data));
+    } catch (e) {
+      connection.onRoutinesLoaded(<RoutineChain>[]);
+    }
+  }
+
   void loadOverdue() async {
     try {
       final response = await getDataManager().getOverdueQueue(HistoryRequest(
diff --git a/frontend/lib/Grounded/see/routine/RoutineRunnerState.dart b/frontend/lib/Grounded/see/routine/RoutineRunnerState.dart
index ca5d023..1f042a3 100644
--- a/frontend/lib/Grounded/see/routine/RoutineRunnerState.dart
+++ b/frontend/lib/Grounded/see/routine/RoutineRunnerState.dart
@@ -12,10 +12,14 @@ import '../../about/internal/application/RoutinePhase.dart';
 import '../../about/internal/application/RoutineRun.dart';
 import '../../about/internal/application/StepMode.dart';
 import '../../about/internal/application/TextType.dart';
+import '../../designs/AmbientBackground.dart';
 import '../../designs/Component.dart';
+import '../../designs/DotDigits.dart';
+import '../../designs/GlassSurface.dart';
 import '../../designs/ProgressRing.dart';
 import '../../designs/Shell.dart';
 import '../../designs/buttons/Buttons.dart';
+import '../../designs/scene/SceneArt.dart';
 import '../../designs/text/Text.dart';
 import '../../utils/Colors.dart';
 import '../../utils/CommonUtils.dart';
@@ -24,9 +28,9 @@ import 'ConnectRoutineRunner.dart';
 import 'RoutineRunner.dart';
 import 'ViewRoutineRunner.dart';
 
-/// The routine player. A coloured stage carries the phase — a ring that
-/// drains for timed work, a breathing circle for meditation — and the sheet
-/// beneath it carries the chain: where you are, what is next, and the clock.
+/// The routine player. A painted scene carries the phase — a glass ring that
+/// drains for timed work, a breathing circle for meditation — and the light
+/// panel beneath it carries the chain on an arc, the step and the dotted clock.
 class RoutineRunnerState extends State<RoutineRunner>
     with WidgetsBindingObserver, SingleTickerProviderStateMixin
     implements ConnectRoutineRunner {
@@ -50,7 +54,7 @@ class RoutineRunnerState extends State<RoutineRunner>
 
   final ScrollController _carousel = ScrollController();
 
-  static const double _carouselItem = 76;
+  static const double _carouselItem = 78;
 
   /// Run time below which leaving logs nothing — opening the player by
   /// mistake is not a broken chain.
@@ -94,7 +98,7 @@ class RoutineRunnerState extends State<RoutineRunner>
         child: AnnotatedRegion<SystemUiOverlayStyle>(
           value: SystemUiOverlayStyle.light,
           child: Scaffold(
-            backgroundColor: kindDeep(_run.chain.kind),
+            backgroundColor: colorAmbientMid,
             body: _finished ? _summaryView() : _runnerView(),
           ),
         ),
@@ -230,10 +234,9 @@ class RoutineRunnerState extends State<RoutineRunner>
     if (!_carousel.hasClients) {
       return;
     }
-    final double viewport = _carousel.position.viewportDimension;
-    final double target = (_run.phase.stepIndex * _carouselItem) -
-        (viewport / 2) +
-        (_carouselItem / 2);
+    // The list is padded by half a viewport either side, so step n is
+    // centred at exactly n item-widths of scroll.
+    final double target = _run.phase.stepIndex * _carouselItem;
 
     _carousel.animateTo(
       target.clamp(0, _carousel.position.maxScrollExtent),
@@ -354,66 +357,108 @@ class RoutineRunnerState extends State<RoutineRunner>
   // ── Views ─────────────────────────────────────────────────────────────────
 
   Widget _runnerView() {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.stretch,
-      children: [
-        Expanded(flex: 5, child: _stage()),
-        Expanded(flex: 6, child: _panel()),
-      ],
+    return AmbientBackground(
+      child: LayoutBuilder(
+        builder: (BuildContext context, BoxConstraints constraints) {
+          final double stageHeight = constraints.maxHeight * 0.48;
+
+          return Stack(
+            children: [
+              Positioned(
+                top: 0,
+                left: 0,
+                right: 0,
+                height: stageHeight + 70,
+                child: _scene(),
+              ),
+              Positioned(
+                top: 0,
+                left: 0,
+                right: 0,
+                height: stageHeight,
+                child: _stage(),
+              ),
+              Positioned(
+                left: 0,
+                right: 0,
+                top: stageHeight - 40,
+                bottom: 0,
+                child: _panel(),
+              ),
+            ],
+          );
+        },
+      ),
     );
   }
 
-  /// The top half: kind gradient, chrome controls and the phase visual.
+  /// The painted world the run happens in. Rest dims it to dusk.
+  Widget _scene() {
+    return ShaderMask(
+      shaderCallback: (Rect bounds) => const LinearGradient(
+        begin: Alignment.topCenter,
+        end: Alignment.bottomCenter,
+        colors: <Color>[Color(0xFF000000), Color(0x00000000)],
+        stops: <double>[0.62, 1.0],
+      ).createShader(bounds),
+      blendMode: BlendMode.dstIn,
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          SceneArt(
+            palette: scenePalette(_run.chain.kind),
+            seed: sceneSeed(_run.chain.title),
+          ),
+          AnimatedContainer(
+            duration: const Duration(milliseconds: 600),
+            color: colorNight.withValues(alpha: _run.phase.rest ? 0.45 : 0.08),
+          ),
+        ],
+      ),
+    );
+  }
+
+  /// The top half: frosted controls and the phase visual over the scene.
   Widget _stage() {
     final RoutineKind kind = _run.chain.kind;
 
-    return Container(
-      decoration: BoxDecoration(
-        gradient: LinearGradient(
-          begin: Alignment.topCenter,
-          end: Alignment.bottomCenter,
-          colors: <Color>[
-            _run.phase.rest ? colorPrimaryDark2 : kindColor(kind),
-            kindDeep(kind),
+    return SafeArea(
+      bottom: false,
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(16, 6, 16, 50),
+        child: Column(
+          children: [
+            Row(
+              children: [
+                glassCircle(CupertinoIcons.arrow_left, _onRequestExit,
+                    onDark: true),
+                const Spacer(),
+                _totalPill(),
+                const SizedBox(width: 8),
+                glassCircle(CupertinoIcons.ellipsis_vertical, _onOpenSteps,
+                    onDark: true),
+              ],
+            ),
+            Expanded(
+              child: Center(
+                child: kind == RoutineKind.Meditation && !_run.phase.rest
+                    ? _breathingCircle()
+                    : _phaseRing(),
+              ),
+            ),
+            _stageStatus(),
           ],
         ),
       ),
-      child: SafeArea(
-        bottom: false,
-        child: Padding(
-          padding: const EdgeInsets.fromLTRB(16, 4, 16, 18),
-          child: Column(
-            children: [
-              Row(
-                children: [
-                  chromeAction(CupertinoIcons.xmark, _onRequestExit),
-                  Expanded(child: Center(child: _totalPill())),
-                  chromeAction(CupertinoIcons.list_bullet, _onOpenSteps),
-                ],
-              ),
-              Expanded(
-                child: Center(
-                  child: kind == RoutineKind.Meditation && !_run.phase.rest
-                      ? _breathingCircle()
-                      : _phaseRing(),
-                ),
-              ),
-              _stageStatus(),
-            ],
-          ),
-        ),
-      ),
     );
   }
 
   /// Total elapsed and planned remaining — the reference's "Time" pill.
   Widget _totalPill() {
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 9),
-      decoration: BoxDecoration(
-        color: colorWhite.withValues(alpha: 0.12),
-        borderRadius: BorderRadius.circular(999),
-      ),
+    return GlassSurface(
+      onDark: true,
+      radius: BorderRadius.circular(99),
+      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 11),
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: [
@@ -426,68 +471,59 @@ class RoutineRunnerState extends State<RoutineRunner>
             height: 3,
             margin: const EdgeInsets.symmetric(horizontal: 8),
             decoration: BoxDecoration(
-              color: colorWhite.withValues(alpha: 0.45),
+              color: colorWhite.withValues(alpha: 0.6),
               shape: BoxShape.circle,
             ),
           ),
           text("~${formatClock(_run.plannedRemaining())} left", 12,
               TextType.Regular,
-              color: colorWhite.withValues(alpha: 0.6)),
+              color: colorWhite.withValues(alpha: 0.8)),
         ],
       ),
     );
   }
 
+  /// A glass disc standing in the scene with the figure in it; the ring
+  /// drains as the phase runs down.
   Widget _phaseRing() {
     final RoutinePhase phase = _run.phase;
 
-    return Stack(
-      alignment: Alignment.center,
-      children: [
-        Container(
-          width: 236,
-          height: 236,
-          decoration: BoxDecoration(
-            shape: BoxShape.circle,
-            color: colorWhite.withValues(alpha: 0.04),
-          ),
+    return ProgressRing(
+      fraction: phase.countsDown ? _run.phaseProgress() : 0,
+      size: 180,
+      stroke: 5,
+      fill: colorWhite,
+      track: colorWhite.withValues(alpha: 0.22),
+      child: GlassSurface(
+        onDark: true,
+        radius: BorderRadius.circular(100),
+        child: SizedBox(
+          width: 150,
+          height: 150,
+          child: phase.rest
+              ? Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Icon(CupertinoIcons.wind, size: 38, color: colorWhite),
+                    const SizedBox(height: 8),
+                    text("Rest", 14, TextType.Medium, color: colorWhite),
+                  ],
+                )
+              : Icon(
+                  phase.step.mode == StepMode.Check
+                      ? CupertinoIcons.checkmark_alt
+                      : kindIcon(_run.chain.kind),
+                  size: 70,
+                  color: colorWhite,
+                  shadows: const <Shadow>[
+                    Shadow(
+                        color: Color(0x40000000),
+                        blurRadius: 18,
+                        offset: Offset(0, 6)),
+                  ],
+                ),
         ),
-        ProgressRing(
-          fraction: phase.countsDown ? _run.phaseProgress() : 0,
-          size: 208,
-          stroke: 4,
-          fill: colorWhite,
-          track: colorWhite.withValues(alpha: 0.12),
-          child: Container(
-            width: 166,
-            height: 166,
-            alignment: Alignment.center,
-            decoration: BoxDecoration(
-              shape: BoxShape.circle,
-              color: colorWhite.withValues(alpha: 0.08),
-            ),
-            child: phase.rest
-                ? Column(
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      Icon(CupertinoIcons.wind,
-                          size: 34, color: colorWhite.withValues(alpha: 0.8)),
-                      const SizedBox(height: 8),
-                      text("REST", 11, TextType.Bold,
-                          color: colorWhite.withValues(alpha: 0.7),
-                          letterSpacing: 2),
-                    ],
-                  )
-                : Icon(
-                    phase.step.mode == StepMode.Check
-                        ? CupertinoIcons.checkmark_alt
-                        : kindIcon(_run.chain.kind),
-                    size: 64,
-                    color: colorWhite,
-                  ),
-          ),
-        ),
-      ],
+      ),
     );
   }
 
@@ -498,38 +534,44 @@ class RoutineRunnerState extends State<RoutineRunner>
         final double t = Curves.easeInOut.transform(_breath.value);
         final bool inhaling = _breath.status == AnimationStatus.forward;
 
-        return Stack(
-          alignment: Alignment.center,
-          children: [
-            Container(
-              width: 150 + 90 * t,
-              height: 150 + 90 * t,
-              decoration: BoxDecoration(
-                shape: BoxShape.circle,
-                color: colorWhite.withValues(alpha: 0.05),
+        return SizedBox(
+          width: 240,
+          height: 240,
+          child: Stack(
+            alignment: Alignment.center,
+            children: [
+              Container(
+                width: 140 + 96 * t,
+                height: 140 + 96 * t,
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  color: colorWhite.withValues(alpha: 0.10),
+                  border: Border.all(
+                      color: colorWhite.withValues(alpha: 0.35), width: 1),
+                ),
               ),
-            ),
-            Container(
-              width: 130 + 60 * t,
-              height: 130 + 60 * t,
-              decoration: BoxDecoration(
-                shape: BoxShape.circle,
-                color: colorWhite.withValues(alpha: 0.10),
-                border: Border.all(
-                    color: colorWhite.withValues(alpha: 0.25), width: 1),
+              GlassSurface(
+                onDark: true,
+                radius: BorderRadius.circular(200),
+                child: SizedBox(
+                  width: 120 + 50 * t,
+                  height: 120 + 50 * t,
+                  child: Center(
+                    child: text(
+                      !_run.running
+                          ? "Paused"
+                          : inhaling
+                              ? "Breathe in"
+                              : "Breathe out",
+                      16,
+                      TextType.Medium,
+                      color: colorWhite,
+                    ),
+                  ),
+                ),
               ),
-            ),
-            text(
-              !_run.running
-                  ? "Paused"
-                  : inhaling
-                      ? "Breathe in"
-                      : "Breathe out",
-              17,
-              TextType.Light,
-              color: colorWhite,
-            ),
-          ],
+            ],
+          ),
         );
       },
     );
@@ -537,109 +579,100 @@ class RoutineRunnerState extends State<RoutineRunner>
 
   Widget _stageStatus() {
     final String status = !_run.running
-        ? "PAUSED"
+        ? "Paused"
         : _run.phase.rest
-            ? "RESTING"
-            : "IN PROGRESS";
+            ? "Resting"
+            : "In progress";
 
     return Row(
       children: [
-        Container(
-          width: 7,
-          height: 7,
-          decoration: BoxDecoration(
-            color: _run.running ? colorWhite : colorWarning,
-            shape: BoxShape.circle,
+        GlassSurface(
+          onDark: true,
+          radius: BorderRadius.circular(99),
+          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 7),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Container(
+                width: 7,
+                height: 7,
+                decoration: BoxDecoration(
+                  color: _run.running ? colorLime : colorWarning,
+                  shape: BoxShape.circle,
+                ),
+              ),
+              const SizedBox(width: 7),
+              text(status, 11, TextType.Medium, color: colorWhite),
+            ],
           ),
         ),
-        const SizedBox(width: 8),
-        text(status, 9, TextType.Bold,
-            color: colorWhite.withValues(alpha: 0.6), letterSpacing: 1.4),
         if (_run.backgroundedCount > 0) ...[
-          const SizedBox(width: 10),
-          pill("Left ${_run.backgroundedCount}×", colorWarning,
-              colorWarning.withValues(alpha: 0.14),
-              textSize: 9),
-        ],
-        const Spacer(),
-        GestureDetector(
-          onTap: _onTogglePause,
-          child: pill(
-            _run.running ? "Pause" : "Resume",
-            colorWhite,
-            colorWhite.withValues(alpha: 0.12),
-            icon: _run.running
-                ? CupertinoIcons.pause_fill
-                : CupertinoIcons.play_fill,
-            textSize: 9,
+          const SizedBox(width: 8),
+          GlassSurface(
+            onDark: true,
+            radius: BorderRadius.circular(99),
+            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 7),
+            child: text("Left app ${_run.backgroundedCount}×", 11,
+                TextType.Medium,
+                color: colorWarmYellow),
           ),
-        ),
+        ],
       ],
     );
   }
 
-  /// The bottom sheet: chain carousel, step counter, clock and transport.
+  /// The lower half: the chain on an arc, the step, the dotted clock and the
+  /// transport.
   Widget _panel() {
     final RoutinePhase phase = _run.phase;
     final Color tone = kindColor(_run.chain.kind);
 
-    return Container(
-      decoration: BoxDecoration(
-        color: colorPrimaryLight,
-        borderRadius: BorderRadius.only(
-          topLeft: Radius.circular(28),
-          topRight: Radius.circular(28),
-        ),
-      ),
-      child: SafeArea(
-        top: false,
-        child: Column(
-          children: [
-            const SizedBox(height: 14),
-            _stepCarousel(),
-            const SizedBox(height: 4),
-            Expanded(
-              child: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 24),
-                child: Column(
-                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                  children: [
-                    Column(
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        text(
-                          "${phase.stepIndex + 1} OF ${_run.chain.steps.length}",
-                          10,
-                          TextType.Bold,
-                          color: colorGrey2,
-                          letterSpacing: 1.4,
-                        ),
-                        const SizedBox(height: 6),
-                        text(
-                          phase.rest ? "Rest" : phase.step.title,
-                          24,
-                          TextType.Light,
-                          color: colorPrimaryDark,
-                          align: TextAlign.center,
-                          maxLines: 2,
-                          overflow: TextOverflow.ellipsis,
-                        ),
-                        if (phase.step.sets > 1) ...[
-                          const SizedBox(height: 10),
-                          _setDots(phase, tone),
-                        ],
+    return SafeArea(
+      top: false,
+      child: Column(
+        children: [
+          _stepCarousel(),
+          Expanded(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 24),
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                children: [
+                  Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      text(
+                        "${phase.stepIndex + 1} OF ${_run.chain.steps.length}",
+                        13,
+                        TextType.Regular,
+                        color: colorInkSoft,
+                        letterSpacing: 0.6,
+                      ),
+                      const SizedBox(height: 4),
+                      text(
+                        phase.rest ? "Rest" : phase.step.title,
+                        24,
+                        TextType.Medium,
+                        color: colorInk,
+                        align: TextAlign.center,
+                        maxLines: 2,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                      if (phase.step.sets > 1) ...[
+                        const SizedBox(height: 10),
+                        _setDots(phase, tone),
                       ],
-                    ),
-                    _clock(phase, tone),
-                    _caption(phase),
-                  ],
-                ),
+                    ],
+                  ),
+                  _clock(phase, tone),
+                  _caption(phase),
+                ],
               ),
             ),
-            _transport(phase, tone),
-            const SizedBox(height: 14),
-          ],
-        ),
+          ),
+          _transport(phase, tone),
+          const SizedBox(height: 14),
+        ],
       ),
     );
   }
@@ -648,81 +681,95 @@ class RoutineRunnerState extends State<RoutineRunner>
     final List<RoutineStep> steps = _run.chain.steps;
 
     return SizedBox(
-      height: 84,
-      child: ListView.builder(
-        controller: _carousel,
-        scrollDirection: Axis.horizontal,
-        padding: const EdgeInsets.symmetric(horizontal: 12),
-        itemCount: steps.length,
-        itemExtent: _carouselItem,
-        itemBuilder: (context, index) => _carouselStep(index, steps[index]),
+      height: 104,
+      child: LayoutBuilder(
+        builder: (BuildContext context, BoxConstraints constraints) {
+          final double side = (constraints.maxWidth - _carouselItem) / 2;
+
+          return ListView.builder(
+            controller: _carousel,
+            scrollDirection: Axis.horizontal,
+            padding: EdgeInsets.symmetric(horizontal: side),
+            itemCount: steps.length,
+            itemExtent: _carouselItem,
+            itemBuilder: (context, index) =>
+                _carouselStep(index, steps[index]),
+          );
+        },
       ),
     );
   }
 
+  /// Each step as a painted portrait. They sit on an arc that dips away from
+  /// the current one, like beads on a string.
   Widget _carouselStep(int index, RoutineStep step) {
-    final bool current = index == _run.phase.stepIndex;
+    final int current = _run.phase.stepIndex;
+    final bool isCurrent = index == current;
     final bool done = step.completed;
-    final Color tone = kindColor(_run.chain.kind);
-    final double size = current ? 50 : 40;
+    final int distance = (index - current).abs();
+    final double drop = (distance * distance * 5.0).clamp(0, 30).toDouble();
+    final double size = isCurrent ? 58 : 46;
 
     return GestureDetector(
       onTap: () => _onJumpTo(index),
       behavior: HitTestBehavior.opaque,
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.start,
-        children: [
-          AnimatedContainer(
-            duration: const Duration(milliseconds: 250),
-            curve: Curves.easeOutCubic,
-            margin: EdgeInsets.only(top: current ? 0 : 6),
-            width: size,
-            height: size,
-            alignment: Alignment.center,
-            decoration: BoxDecoration(
-              shape: BoxShape.circle,
-              gradient: current
-                  ? LinearGradient(
-                      begin: Alignment.topLeft,
-                      end: Alignment.bottomRight,
-                      colors: <Color>[tone, kindDeep(_run.chain.kind)],
-                    )
-                  : null,
-              color: current ? null : (done ? tone.withValues(alpha: 0.12) : colorWhite),
-              border: Border.all(
-                color: current
-                    ? colorWhite
-                    : done
-                        ? tone.withValues(alpha: 0.3)
-                        : colorBorder,
-                width: current ? 3 : 1,
+      child: AnimatedPadding(
+        duration: const Duration(milliseconds: 300),
+        curve: Curves.easeOutCubic,
+        padding: EdgeInsets.only(top: drop),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [
+            AnimatedContainer(
+              duration: const Duration(milliseconds: 300),
+              curve: Curves.easeOutCubic,
+              width: size,
+              height: size,
+              padding: const EdgeInsets.all(2.5),
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                color: isCurrent ? colorNight : colorWhite,
+                boxShadow: const [
+                  BoxShadow(
+                    color: Color(0x262A3A30),
+                    blurRadius: 12,
+                    offset: Offset(0, 5),
+                  ),
+                ],
               ),
-              boxShadow: current
-                  ? [
-                      BoxShadow(
-                        color: tone.withValues(alpha: 0.25),
-                        blurRadius: 12,
-                        offset: const Offset(0, 4),
+              child: ClipOval(
+                child: Stack(
+                  fit: StackFit.expand,
+                  children: [
+                    SceneArt(
+                      palette: scenePalette(_run.chain.kind),
+                      seed: sceneSeed(step.title),
+                      figure: stepModeIcon(step.mode),
+                      figureScale: 0.42,
+                      figureAlignment: const Alignment(0, 0.2),
+                    ),
+                    if (done && !isCurrent)
+                      Container(
+                        color: colorNight.withValues(alpha: 0.55),
+                        child: Icon(Icons.check_rounded,
+                            size: 20, color: colorLime),
                       ),
-                    ]
-                  : null,
+                  ],
+                ),
+              ),
             ),
-            child: done && !current
-                ? Icon(Icons.check_rounded, size: 18, color: tone)
-                : text("${index + 1}", current ? 15 : 12, TextType.Bold,
-                    color: current ? colorWhite : colorGrey2),
-          ),
-          const SizedBox(height: 6),
-          text(
-            step.title,
-            10,
-            current ? TextType.Bold : TextType.Regular,
-            color: current ? colorPrimaryDark : colorGrey2,
-            maxLines: 1,
-            overflow: TextOverflow.ellipsis,
-            align: TextAlign.center,
-          ),
-        ],
+            const SizedBox(height: 5),
+            text(
+              step.title,
+              10,
+              isCurrent ? TextType.Medium : TextType.Regular,
+              color: isCurrent ? colorInk : colorInkSoft,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              align: TextAlign.center,
+            ),
+          ],
+        ),
       ),
     );
   }
@@ -731,8 +778,8 @@ class RoutineRunnerState extends State<RoutineRunner>
     return Row(
       mainAxisSize: MainAxisSize.min,
       children: [
-        text("SET ${phase.set} / ${phase.step.sets}", 9, TextType.Bold,
-            color: tone, letterSpacing: 1.0),
+        text("Set ${phase.set} of ${phase.step.sets}", 11, TextType.Medium,
+            color: tone),
         const SizedBox(width: 10),
         ...List<Widget>.generate(phase.step.sets, (index) {
           final int set = index + 1;
@@ -742,11 +789,11 @@ class RoutineRunnerState extends State<RoutineRunner>
 
           return AnimatedContainer(
             duration: const Duration(milliseconds: 200),
-            width: active ? 18 : 7,
+            width: active ? 20 : 7,
             height: 7,
             margin: const EdgeInsets.only(right: 4),
             decoration: BoxDecoration(
-              color: filled || active ? tone : colorMuted,
+              color: filled || active ? tone : tone.withValues(alpha: 0.15),
               borderRadius: BorderRadius.circular(999),
             ),
           );
@@ -755,36 +802,49 @@ class RoutineRunnerState extends State<RoutineRunner>
     );
   }
 
+  /// The dotted clock — counting down for timed work, up for everything else,
+  /// and the rep target for rep sets.
   Widget _clock(RoutinePhase phase, Color tone) {
-    final String label;
-    final String value;
+    final Color ink = _run.running ? colorInk : colorInkSoft;
 
-    if (phase.countsDown) {
-      label = phase.rest ? "REST REMAINING" : "REMAINING";
-      value = formatClock(_run.phaseRemaining());
-    } else if (phase.step.mode == StepMode.Reps) {
-      label = "REPS · ${formatClock(_run.phaseElapsed())}";
-      value = "× ${phase.step.reps}";
-    } else {
-      label = "ON THIS TASK";
-      value = formatClock(_run.phaseElapsed());
+    if (!phase.countsDown && phase.step.mode == StepMode.Reps) {
+      return Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Row(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              text("×", 44, TextType.Light, color: ink),
+              const SizedBox(width: 10),
+              DotDigits(value: "${phase.step.reps}", height: 62, color: ink),
+            ],
+          ),
+          const SizedBox(height: 8),
+          text("reps · ${formatClock(_run.phaseElapsed())} on this set", 12,
+              TextType.Regular,
+              color: colorInkSoft),
+        ],
+      );
     }
 
+    final int seconds =
+        phase.countsDown ? _run.phaseRemaining() : _run.phaseElapsed();
+
     return Column(
       mainAxisSize: MainAxisSize.min,
       children: [
-        text(label, 9, TextType.Bold,
-            color: colorGrey2, letterSpacing: 1.6),
-        const SizedBox(height: 4),
-        text(value, 64, TextType.Light,
-            color: _run.running ? colorPrimaryDark : colorGrey2, height: 1.0),
+        DotDigits(value: formatClock(seconds), height: 62, color: ink),
         if (phase.countsDown) ...[
           const SizedBox(height: 12),
           SizedBox(
             width: 180,
             child: meter(_run.phaseProgress(),
-                fill: phase.rest ? colorGrey2 : tone, height: 4),
+                fill: phase.rest ? colorInkSoft : tone, height: 4),
           ),
+        ] else ...[
+          const SizedBox(height: 8),
+          text("on this task", 12, TextType.Regular, color: colorInkSoft),
         ],
       ],
     );
@@ -806,7 +866,7 @@ class RoutineRunnerState extends State<RoutineRunner>
     }
 
     return text(line, 13, TextType.Regular,
-        color: colorGrey2, align: TextAlign.center, maxLines: 2, height: 1.4);
+        color: colorInkSoft, align: TextAlign.center, maxLines: 2, height: 1.4);
   }
 
   Widget _transport(RoutinePhase phase, Color tone) {
@@ -819,8 +879,8 @@ class RoutineRunnerState extends State<RoutineRunner>
         children: [
           _roundControl(
             _haptics
-                ? CupertinoIcons.waveform
-                : CupertinoIcons.waveform_path_badge_minus,
+                ? CupertinoIcons.speaker_2
+                : CupertinoIcons.speaker_slash,
             _onToggleHaptics,
           ),
           _roundControl(CupertinoIcons.backward_end_fill, _onPrevious,
@@ -829,33 +889,39 @@ class RoutineRunnerState extends State<RoutineRunner>
             onTap: _onPrimary,
             child: AnimatedContainer(
               duration: const Duration(milliseconds: 200),
-              width: 118,
-              height: 56,
+              width: 116,
+              height: 58,
               alignment: Alignment.center,
               decoration: BoxDecoration(
-                color: colorPrimaryDark,
+                color: colorNight,
                 borderRadius: BorderRadius.circular(999),
+                boxShadow: const [
+                  BoxShadow(
+                    color: Color(0x331A1F1C),
+                    blurRadius: 18,
+                    offset: Offset(0, 8),
+                  ),
+                ],
               ),
               child: countdown
                   ? Icon(
                       _run.running
                           ? CupertinoIcons.pause_fill
                           : CupertinoIcons.play_fill,
-                      size: 22,
-                      color: colorKindWorkoutBg,
+                      size: 24,
+                      color: colorLime,
                     )
                   : Row(
                       mainAxisSize: MainAxisSize.min,
                       children: [
-                        Icon(Icons.check_rounded,
-                            size: 18, color: colorKindWorkoutBg),
+                        Icon(Icons.check_rounded, size: 18, color: colorLime),
                         const SizedBox(width: 6),
                         text(
                           phase.step.mode == StepMode.Reps
                               ? "Set done"
                               : "Done",
                           13,
-                          TextType.Bold,
+                          TextType.Medium,
                           color: colorWhite,
                         ),
                       ],
@@ -871,23 +937,14 @@ class RoutineRunnerState extends State<RoutineRunner>
 
   Widget _roundControl(IconData icon, VoidCallback onTap,
       {bool enabled = true}) {
-    return GestureDetector(
-      onTap: enabled ? onTap : null,
-      child: Container(
-        width: 46,
-        height: 46,
-        alignment: Alignment.center,
-        decoration: BoxDecoration(
-          color: colorWhite,
-          shape: BoxShape.circle,
-          border: Border.all(color: colorBorder),
-        ),
-        child: Icon(icon,
-            size: 17, color: enabled ? colorPrimaryDark : colorGrey),
-      ),
+    return Opacity(
+      opacity: enabled ? 1 : 0.4,
+      child: glassCircle(icon, enabled ? onTap : _onDisabled, size: 48),
     );
   }
 
+  void _onDisabled() {}
+
   /// Every step with its state. Tap one to jump there.
   Widget _stepsSheet(BuildContext sheetContext) {
     final Color tone = kindColor(_run.chain.kind);
@@ -977,106 +1034,137 @@ class RoutineRunnerState extends State<RoutineRunner>
 
   /// End of run. Held or not, it is stated plainly and then logged.
   Widget _summaryView() {
-    final RoutineKind kind = _run.chain.kind;
     final bool held = _run.chain.complete;
     final int done = _run.chain.completedSteps;
     final int total = _run.chain.steps.length;
     final bool broken =
         !held && _run.chain.partialCompletion < Thresholds.routinePartialFloor;
-    final Color label = colorWhite.withValues(alpha: 0.5);
 
-    return Container(
-      decoration: BoxDecoration(
-        gradient: LinearGradient(
-          begin: Alignment.topCenter,
-          end: Alignment.bottomCenter,
-          colors: <Color>[kindColor(kind), kindDeep(kind)],
-        ),
-      ),
-      child: SafeArea(
-        child: Padding(
-          padding: const EdgeInsets.fromLTRB(28, 20, 28, 24),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.stretch,
-            children: [
-              text(
-                held ? "CHAIN HELD" : (broken ? "CHAIN BROKEN" : "PARTIAL"),
-                10,
-                TextType.Bold,
-                color: label,
-                letterSpacing: 1.6,
+    return AmbientBackground(
+      child: Stack(
+        children: [
+          Positioned(
+            top: 0,
+            left: 0,
+            right: 0,
+            height: 420,
+            child: ShaderMask(
+              shaderCallback: (Rect bounds) => const LinearGradient(
+                begin: Alignment.topCenter,
+                end: Alignment.bottomCenter,
+                colors: <Color>[Color(0xFF000000), Color(0x00000000)],
+                stops: <double>[0.5, 1.0],
+              ).createShader(bounds),
+              blendMode: BlendMode.dstIn,
+              child: SceneArt(
+                palette: scenePalette(_run.chain.kind),
+                seed: sceneSeed(_run.chain.title),
               ),
-              const SizedBox(height: 12),
-              text(_run.chain.title, 36, TextType.Light,
-                  color: colorWhite, height: 1.1),
-              const SizedBox(height: 14),
-              text(
-                held
-                    ? "Every step, in order. That is the whole point."
-                    : "$done of $total steps. This goes in as partial — honest, not hidden.",
-                14,
-                TextType.Regular,
-                color: colorWhite.withValues(alpha: 0.7),
-                height: 1.5,
-              ),
-              const Spacer(),
-              Center(
-                child: ProgressRing(
-                  fraction: _run.chain.partialCompletion,
-                  size: 180,
-                  stroke: 5,
-                  fill: colorWhite,
-                  track: colorWhite.withValues(alpha: 0.14),
-                  child: Column(
-                    mainAxisSize: MainAxisSize.min,
+            ),
+          ),
+          SafeArea(
+            child: Padding(
+              padding: const EdgeInsets.fromLTRB(24, 20, 24, 24),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  Row(
                     children: [
-                      text("$done/$total", 40, TextType.Light,
-                          color: colorWhite),
-                      text("STEPS", 9, TextType.Bold,
-                          color: label, letterSpacing: 1.4),
+                      GlassSurface(
+                        onDark: true,
+                        radius: BorderRadius.circular(99),
+                        padding: const EdgeInsets.symmetric(
+                            horizontal: 12, vertical: 7),
+                        child: text(
+                          held
+                              ? "Chain held"
+                              : (broken ? "Chain broken" : "Partial"),
+                          12,
+                          TextType.Medium,
+                          color: colorWhite,
+                        ),
+                      ),
                     ],
                   ),
-                ),
-              ),
-              const Spacer(),
-              Row(
-                children: [
-                  Expanded(
-                    child: labelled("Time", formatClock(_run.elapsedSeconds()),
-                        valueSize: 22,
-                        valueType: TextType.Light,
-                        valueColor: colorWhite,
-                        labelColor: label),
+                  const Spacer(),
+                  Center(
+                    child: ProgressRing(
+                      fraction: _run.chain.partialCompletion,
+                      size: 190,
+                      stroke: 6,
+                      fill: held ? colorLime : colorWhite,
+                      track: colorWhite.withValues(alpha: 0.3),
+                      child: GlassSurface(
+                        onDark: true,
+                        radius: BorderRadius.circular(100),
+                        child: SizedBox(
+                          width: 158,
+                          height: 158,
+                          child: Column(
+                            mainAxisAlignment: MainAxisAlignment.center,
+                            children: [
+                              text("$done/$total", 42, TextType.Light,
+                                  color: colorWhite),
+                              text("steps", 12, TextType.Regular,
+                                  color: colorWhite.withValues(alpha: 0.8)),
+                            ],
+                          ),
+                        ),
+                      ),
+                    ),
                   ),
-                  Expanded(
-                    child: labelled("Skipped", "${_run.skippedCount}",
-                        valueSize: 22,
-                        valueType: TextType.Light,
-                        valueColor: colorWhite,
-                        labelColor: label),
+                  const SizedBox(height: 36),
+                  text(_run.chain.title, 32, TextType.Medium,
+                      color: colorInk, height: 1.1, letterSpacing: -0.6),
+                  const SizedBox(height: 8),
+                  text(
+                    held
+                        ? "Every step, in order. That is the whole point."
+                        : "$done of $total steps. This goes in as partial — honest, not hidden.",
+                    14,
+                    TextType.Regular,
+                    color: colorInkSoft,
+                    height: 1.5,
                   ),
-                  Expanded(
-                    child: labelled("Left app", "${_run.backgroundedCount}×",
-                        valueSize: 22,
-                        valueType: TextType.Light,
-                        valueColor: _run.backgroundedCount > 0
-                            ? colorWarning
-                            : colorWhite,
-                        labelColor: label),
+                  const SizedBox(height: 22),
+                  GlassSurface(
+                    radius: BorderRadius.circular(24),
+                    tint: colorGlassStrong,
+                    padding: const EdgeInsets.fromLTRB(18, 16, 18, 16),
+                    child: Row(
+                      children: [
+                        Expanded(
+                          child: labelled(
+                              "Time", formatClock(_run.elapsedSeconds()),
+                              valueSize: 22, valueType: TextType.Light),
+                        ),
+                        Expanded(
+                          child: labelled("Skipped", "${_run.skippedCount}",
+                              valueSize: 22, valueType: TextType.Light),
+                        ),
+                        Expanded(
+                          child: labelled(
+                              "Left app", "${_run.backgroundedCount}×",
+                              valueSize: 22,
+                              valueType: TextType.Light,
+                              valueColor: _run.backgroundedCount > 0
+                                  ? colorWarning
+                                  : colorInk),
+                        ),
+                      ],
+                    ),
+                  ),
+                  const Spacer(),
+                  roundedCornerButton(
+                    "Log it",
+                    _onLog,
+                    icon: CupertinoIcons.checkmark,
                   ),
                 ],
               ),
-              const SizedBox(height: 28),
-              roundedCornerButton(
-                "Log it",
-                _onLog,
-                background: colorWhite,
-                foreground: colorPrimaryDark,
-                icon: CupertinoIcons.checkmark,
-              ),
-            ],
+            ),
           ),
-        ),
+        ],
       ),
     );
   }
diff --git a/frontend/lib/Grounded/see/routine/Routines.dart b/frontend/lib/Grounded/see/routine/Routines.dart
index ff14e1b..5f03337 100644
--- a/frontend/lib/Grounded/see/routine/Routines.dart
+++ b/frontend/lib/Grounded/see/routine/Routines.dart
@@ -1,9 +1,13 @@
 import 'package:flutter/material.dart';
 
+import '../../about/internal/application/RoutineKind.dart';
 import 'RoutinesState.dart';
 
 class Routines extends StatefulWidget {
-  const Routines({super.key});
+  /// Opens pre-filtered to one kind; null shows the whole library.
+  final RoutineKind? kind;
+
+  const Routines({super.key, this.kind});
 
   @override
   State<Routines> createState() => RoutinesState();
diff --git a/frontend/lib/Grounded/see/routine/RoutinesState.dart b/frontend/lib/Grounded/see/routine/RoutinesState.dart
index 8853f19..aa98603 100644
--- a/frontend/lib/Grounded/see/routine/RoutinesState.dart
+++ b/frontend/lib/Grounded/see/routine/RoutinesState.dart
@@ -8,11 +8,14 @@ import '../../about/internal/application/CommitmentClass.dart';
 import '../../about/internal/application/RoutineKind.dart';
 import '../../about/internal/application/TextType.dart';
 import '../../configs/Navigator.dart';
+import '../../designs/AmbientBackground.dart';
 import '../../designs/Component.dart';
+import '../../designs/GlassSurface.dart';
 import '../../designs/ProgressRing.dart';
 import '../../designs/Responsive.dart';
 import '../../designs/Shell.dart';
 import '../../designs/buttons/Buttons.dart';
+import '../../designs/scene/SceneArt.dart';
 import '../../designs/text/Text.dart';
 import '../../utils/Colors.dart';
 import '../../utils/CommonUtils.dart';
@@ -53,6 +56,7 @@ class RoutinesState extends State<Routines> implements ConnectRoutines {
   }
 
   void _initiate() {
+    _kind = widget.kind;
     _model?.loadRoutines();
   }
 
@@ -150,61 +154,144 @@ class RoutinesState extends State<Routines> implements ConnectRoutines {
   // ── Views ─────────────────────────────────────────────────────────────────
 
   Widget _mobileView(BoxConstraints constraints) {
-    return Sheet(
-      eyebrow: "${_routines.length} routine${_routines.length == 1 ? "" : "s"}",
-      title: "Routines",
-      onBack: _onBack,
-      action: chromeAction(CupertinoIcons.add, _onBuild),
-      banner: _routines.isEmpty ? null : _todayBanner(),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          text(
-            "${weekdayName(DateTime.now().weekday).toUpperCase()} · ${_today.length} DUE",
-            11,
-            TextType.Bold,
-            color: colorGrey2,
-            letterSpacing: 1.2,
-          ),
-          const SizedBox(height: 8),
-          displayTitle(_headline()),
-          const SizedBox(height: 24),
-          _kindRail(),
-          const SizedBox(height: 28),
-          if (_filtered.isEmpty)
-            emptyState(
-              _kind == null ? CupertinoIcons.square_stack_3d_up : kindIcon(_kind!),
-              _kind == null
-                  ? "No routines yet"
-                  : "No ${kindLabel(_kind!).toLowerCase()} routines",
-              "A routine is a chain: every step, in order. Break it and it is logged as partial, not quietly forgotten.",
-            )
-          else ...[
-            sectionBreak(
-              "Up next",
-              caption: _today.isEmpty ? "from your library" : "today",
-            ),
-            _featuredRail(),
-            const SizedBox(height: 28),
-            if (_today.isNotEmpty) ...[
-              sectionBreak(
-                "Scheduled today",
-                caption: "${_today.where((item) => item.complete).length} of ${_today.length} done",
+    return Scaffold(
+      backgroundColor: colorAmbientMid,
+      body: AmbientBackground(
+        child: SingleChildScrollView(
+          padding: const EdgeInsets.only(bottom: 40),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              _hero(),
+              Padding(
+                padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    if (_routines.isNotEmpty) ...[
+                      _todayStrip(),
+                      const SizedBox(height: 26),
+                    ],
+                    sectionBreak("Category",
+                        caption: _kind == null ? "all kinds" : "tap again to clear"),
+                    _kindRail(),
+                    const SizedBox(height: 22),
+                    if (_filtered.isEmpty)
+                      emptyState(
+                        _kind == null
+                            ? CupertinoIcons.square_stack_3d_up
+                            : kindIcon(_kind!),
+                        _kind == null
+                            ? "No routines yet"
+                            : "No ${kindLabel(_kind!).toLowerCase()} routines",
+                        "A routine is a chain: every step, in order. Break it and it is logged as partial, not quietly forgotten.",
+                      )
+                    else ...[
+                      sectionBreak(
+                        "Featured",
+                        caption: _today.isEmpty ? "from your library" : "up next today",
+                      ),
+                      _featuredRail(),
+                      const SizedBox(height: 28),
+                      if (_today.isNotEmpty) ...[
+                        sectionBreak(
+                          "Active today",
+                          caption:
+                              "${_today.where((item) => item.complete).length} of ${_today.length} done",
+                        ),
+                        ..._today.map(_routineRow),
+                        const SizedBox(height: 18),
+                      ],
+                      if (_rest.isNotEmpty) ...[
+                        sectionBreak("Library", caption: "${_rest.length} more"),
+                        ..._rest.map(_routineRow),
+                      ],
+                    ],
+                    const SizedBox(height: 24),
+                    roundedCornerButton(
+                      "Build a routine",
+                      _onBuild,
+                      icon: CupertinoIcons.add,
+                    ),
+                  ],
+                ),
               ),
-              ..._today.map(_routineRow),
-              const SizedBox(height: 20),
             ],
-            if (_rest.isNotEmpty) ...[
-              sectionBreak("Library", caption: "${_rest.length} more"),
-              ..._rest.map(_routineRow),
-            ],
-          ],
-          const SizedBox(height: 24),
-          roundedCornerButton(
-            "Build a routine",
-            _onBuild,
-            icon: CupertinoIcons.add,
+          ),
+        ),
+      ),
+    );
+  }
+
+  /// The image header: a painted scene for the selected kind, fading into
+  /// the backdrop, with frosted controls and the day's headline on it.
+  Widget _hero() {
+    final RoutineKind shown = _kind ?? RoutineKind.Workout;
+
+    return SizedBox(
+      height: 330,
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          ShaderMask(
+            shaderCallback: (Rect bounds) => const LinearGradient(
+              begin: Alignment.topCenter,
+              end: Alignment.bottomCenter,
+              colors: <Color>[Color(0xFF000000), Color(0x00000000)],
+              stops: <double>[0.55, 1.0],
+            ).createShader(bounds),
+            blendMode: BlendMode.dstIn,
+            child: AnimatedSwitcher(
+              duration: const Duration(milliseconds: 450),
+              child: SceneArt(
+                key: ValueKey<RoutineKind>(shown),
+                palette: scenePalette(shown),
+                seed: 40 + shown.index,
+                figure: kindIcon(shown),
+                figureScale: 0.36,
+                figureAlignment: const Alignment(0.45, -0.1),
+              ),
+            ),
+          ),
+          Positioned(
+            top: 0,
+            left: 0,
+            right: 0,
+            child: SafeArea(
+              bottom: false,
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(16, 6, 16, 0),
+                child: Row(
+                  children: [
+                    glassCircle(CupertinoIcons.arrow_left, _onBack),
+                    const Spacer(),
+                    glassCircle(CupertinoIcons.add, _onBuild),
+                  ],
+                ),
+              ),
+            ),
+          ),
+          Positioned(
+            left: 20,
+            right: 20,
+            bottom: 18,
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                text(
+                  "${weekdayName(DateTime.now().weekday)} · ${_today.length} due",
+                  13,
+                  TextType.Regular,
+                  color: colorInkSoft,
+                ),
+                const SizedBox(height: 6),
+                text(_headline(), 32, TextType.Medium,
+                    color: colorInk, height: 1.1, letterSpacing: -0.8),
+              ],
+            ),
           ),
         ],
       ),
@@ -213,20 +300,20 @@ class RoutinesState extends State<Routines> implements ConnectRoutines {
 
   String _headline() {
     if (_routines.isEmpty) {
-      return "Build the things you do every time.";
+      return "Build the things\nyou do every time.";
     }
     final int open = _today.where((item) => !item.complete).length;
     if (_today.isEmpty) {
-      return "Nothing scheduled. Run one anyway.";
+      return "Nothing scheduled.\nRun one anyway.";
     }
     if (open == 0) {
-      return "Every chain held today.";
+      return "Every chain\nheld today.";
     }
-    return "Here's what to hold today.";
+    return "Here's what to\nhold today.";
   }
 
-  /// The strip in the black chrome: today's load at a glance.
-  Widget _todayBanner() {
+  /// Today's load at a glance, on glass.
+  Widget _todayStrip() {
     final DateTime now = DateTime.now();
     final List<RoutineChain> due =
         _routines.where((item) => item.scheduledOn(now)).toList();
@@ -242,112 +329,117 @@ class RoutinesState extends State<Routines> implements ConnectRoutines {
         .toList()
       ..sort((a, b) => a.startMinute.compareTo(b.startMinute));
 
-    final Color label = colorWhite.withValues(alpha: 0.45);
-
-    return Container(
-      padding: const EdgeInsets.fromLTRB(16, 14, 16, 14),
-      decoration: BoxDecoration(
-        color: colorWhite.withValues(alpha: 0.08),
-        borderRadius: BorderRadius.circular(16),
-      ),
+    return GlassSurface(
+      radius: BorderRadius.circular(24),
+      tint: colorGlassStrong,
+      padding: const EdgeInsets.fromLTRB(18, 16, 18, 16),
       child: Row(
         children: [
           Expanded(
-            child: labelled("Due today", "${due.length}",
-                valueSize: 22,
-                valueType: TextType.Light,
-                valueColor: colorWhite,
-                labelColor: label),
+            child: _stripStat(CupertinoIcons.calendar_today, "${due.length}",
+                "Due today"),
           ),
           Expanded(
-            child: labelled("Planned", formatMinutes(seconds / 60),
-                valueSize: 22,
-                valueType: TextType.Light,
-                valueColor: colorWhite,
-                labelColor: label),
+            child: _stripStat(CupertinoIcons.clock,
+                formatMinutes(seconds / 60), "Planned"),
           ),
           Expanded(
-            child: labelled(
-                "Next",
-                ahead.isEmpty ? "—" : formatStartMinute(ahead.first.startMinute),
-                valueSize: 22,
-                valueType: TextType.Light,
-                valueColor: colorWhite,
-                labelColor: label),
+            child: _stripStat(
+                CupertinoIcons.arrow_right_circle,
+                ahead.isEmpty
+                    ? "—"
+                    : formatStartMinute(ahead.first.startMinute),
+                "Next"),
           ),
         ],
       ),
     );
   }
 
-  /// Round category tiles — tap to filter, tap again to clear.
+  Widget _stripStat(IconData icon, String value, String label) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        text(value, 22, TextType.Light, color: colorInk),
+        const SizedBox(height: 3),
+        Row(
+          children: [
+            Icon(icon, size: 11, color: colorInkSoft),
+            const SizedBox(width: 4),
+            text(label, 10, TextType.Regular, color: colorInkSoft),
+          ],
+        ),
+      ],
+    );
+  }
+
+  /// Round painted portraits — tap to filter, tap again to clear.
   Widget _kindRail() {
     final List<RoutineKind?> options = <RoutineKind?>[null, ...RoutineKind.values];
 
-    return SizedBox(
-      height: 96,
-      child: ListView.separated(
-        scrollDirection: Axis.horizontal,
-        itemCount: options.length,
-        separatorBuilder: (context, index) => const SizedBox(width: 14),
-        itemBuilder: (context, index) => _kindTile(options[index]),
-      ),
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: options.map(_kindTile).toList(),
     );
   }
 
   Widget _kindTile(RoutineKind? kind) {
     final bool selected = _kind == kind;
-    final Color tone = kind == null ? colorPrimaryDark : kindColor(kind);
 
     return GestureDetector(
       onTap: () => _onSelectKind(kind),
       behavior: HitTestBehavior.opaque,
       child: SizedBox(
-        width: 70,
+        width: 74,
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
             AnimatedContainer(
-              duration: const Duration(milliseconds: 180),
+              duration: const Duration(milliseconds: 200),
               curve: Curves.easeOut,
-              width: 60,
-              height: 60,
-              alignment: Alignment.center,
+              width: 64,
+              height: 64,
+              padding: const EdgeInsets.all(2.5),
               decoration: BoxDecoration(
                 shape: BoxShape.circle,
-                gradient: selected
-                    ? LinearGradient(
-                        begin: Alignment.topLeft,
-                        end: Alignment.bottomRight,
-                        colors: <Color>[
-                          tone,
-                          kind == null ? colorPrimaryDark2 : kindDeep(kind),
-                        ],
-                      )
-                    : null,
-                color: selected ? null : colorWhite,
-                border: Border.all(
-                  color: selected ? tone : colorBorder,
-                  width: selected ? 2 : 1,
-                ),
+                color: selected ? colorNight : colorWhite,
+                boxShadow: const [
+                  BoxShadow(
+                    color: Color(0x1F2A3A30),
+                    blurRadius: 14,
+                    offset: Offset(0, 6),
+                  ),
+                ],
               ),
-              child: Icon(
-                kind == null ? CupertinoIcons.square_grid_2x2_fill : kindIcon(kind),
-                size: 22,
-                color: selected ? colorWhite : tone,
+              child: ClipOval(
+                child: kind == null
+                    ? Container(
+                        color: colorWhite,
+                        alignment: Alignment.center,
+                        child: Icon(CupertinoIcons.square_grid_2x2_fill,
+                            size: 22, color: colorInk),
+                      )
+                    : SceneArt(
+                        palette: scenePalette(kind),
+                        seed: 3 + kind.index * 7,
+                        figure: kindIcon(kind),
+                        figureScale: 0.48,
+                        figureAlignment: const Alignment(0, 0.25),
+                      ),
               ),
             ),
             const SizedBox(height: 8),
             text(
               kind == null ? "All" : kindLabel(kind),
               11,
-              selected ? TextType.Bold : TextType.Regular,
-              color: selected ? colorPrimaryDark : colorGrey2,
+              selected ? TextType.Medium : TextType.Regular,
+              color: selected ? colorInk : colorInkSoft,
               maxLines: 1,
             ),
-            const SizedBox(height: 2),
-            text("${_countFor(kind)}", 9, TextType.Bold,
-                color: colorGrey, letterSpacing: 0.6),
+            const SizedBox(height: 1),
+            text("${_countFor(kind)}", 10, TextType.Regular,
+                color: colorInkSoft),
           ],
         ),
       ),
@@ -358,7 +450,7 @@ class RoutinesState extends State<Routines> implements ConnectRoutines {
     final List<RoutineChain> items = _upNext;
 
     return SizedBox(
-      height: 214,
+      height: 240,
       child: ListView.separated(
         scrollDirection: Axis.horizontal,
         clipBehavior: Clip.none,
@@ -369,146 +461,143 @@ class RoutinesState extends State<Routines> implements ConnectRoutines {
     );
   }
 
-  /// The large gradient card. The kind's icon sits oversized in the corner as
-  /// the card's picture — routines have no stock photography.
+  /// The image-led card: the painted scene, a glass chip, the title and three
+  /// light numbers along the bottom.
   Widget _featuredCard(RoutineChain routine) {
-    final Color tone = kindColor(routine.kind);
-    final Color label = colorWhite.withValues(alpha: 0.55);
+    final Color label = colorWhite.withValues(alpha: 0.75);
+    final bool workout = routine.kind == RoutineKind.Workout;
 
     return GestureDetector(
       onTap: () => _onPreview(routine),
       child: Container(
-        width: 248,
+        width: 200,
         decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(20),
-          gradient: LinearGradient(
-            begin: Alignment.topLeft,
-            end: Alignment.bottomRight,
-            colors: <Color>[tone, kindDeep(routine.kind)],
-          ),
+          borderRadius: BorderRadius.circular(26),
           boxShadow: const [
             BoxShadow(
-              color: Color(0x08000000),
-              blurRadius: 18,
-              offset: Offset(0, 4),
+              color: Color(0x262A3A30),
+              blurRadius: 24,
+              offset: Offset(0, 10),
             ),
           ],
         ),
-        clipBehavior: Clip.antiAlias,
-        child: Stack(
-          children: [
-            Positioned(
-              right: -26,
-              bottom: 34,
-              child: Icon(
-                kindIcon(routine.kind),
-                size: 150,
-                color: colorWhite.withValues(alpha: 0.08),
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(26),
+          child: Stack(
+            fit: StackFit.expand,
+            children: [
+              SceneArt(
+                palette: scenePalette(routine.kind),
+                seed: sceneSeed(routine.title),
+                figure: kindIcon(routine.kind),
+                figureScale: 0.44,
+                figureAlignment: const Alignment(0.1, -0.25),
+                shade: true,
               ),
-            ),
-            Padding(
-              padding: const EdgeInsets.all(16),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Row(
-                    children: [
-                      pill(kindLabel(routine.kind), colorWhite,
-                          colorWhite.withValues(alpha: 0.14),
-                          textSize: 9),
-                      if (routine.commitmentClass ==
-                          CommitmentClass.NonNegotiable) ...[
-                        const SizedBox(width: 6),
-                        pill("Must hold", colorWhite,
-                            colorWhite.withValues(alpha: 0.14),
-                            textSize: 9),
+              Padding(
+                padding: const EdgeInsets.all(12),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      children: [
+                        GlassSurface(
+                          onDark: true,
+                          radius: BorderRadius.circular(99),
+                          padding: const EdgeInsets.symmetric(
+                              horizontal: 10, vertical: 5),
+                          child: text(
+                            routine.commitmentClass ==
+                                    CommitmentClass.NonNegotiable
+                                ? "Must hold"
+                                : kindLabel(routine.kind),
+                            10,
+                            TextType.Medium,
+                            color: colorWhite,
+                          ),
+                        ),
+                        const Spacer(),
+                        glassCircle(CupertinoIcons.play_fill,
+                            () => _onStart(routine),
+                            size: 32, onDark: true),
+                      ],
+                    ),
+                    const Spacer(),
+                    if (routine.startMinute >= 0)
+                      text(
+                        "${formatStartMinute(routine.startMinute)} · ${formatDays(routine.days)}",
+                        10,
+                        TextType.Regular,
+                        color: label,
+                        maxLines: 1,
+                      ),
+                    const SizedBox(height: 3),
+                    text(routine.title, 17, TextType.Medium,
+                        color: colorWhite,
+                        maxLines: 2,
+                        overflow: TextOverflow.ellipsis),
+                    const SizedBox(height: 10),
+                    Row(
+                      children: [
+                        Expanded(
+                          child: _cardStat(
+                              "${(routine.totalSeconds / 60).round()}",
+                              CupertinoIcons.clock,
+                              "Min",
+                              label),
+                        ),
+                        Expanded(
+                          child: _cardStat("${routine.steps.length}",
+                              CupertinoIcons.list_bullet, "Steps", label),
+                        ),
+                        Expanded(
+                          child: _cardStat(
+                              workout
+                                  ? "${routine.totalSets}"
+                                  : routine.startMinute < 0
+                                      ? "Any"
+                                      : formatStartMinute(routine.startMinute),
+                              workout
+                                  ? CupertinoIcons.repeat
+                                  : CupertinoIcons.alarm,
+                              workout ? "Sets" : "Starts",
+                              label),
+                        ),
                       ],
-                      const Spacer(),
-                      Container(
-                        width: 34,
-                        height: 34,
-                        alignment: Alignment.center,
-                        decoration: BoxDecoration(
-                          color: colorWhite,
-                          shape: BoxShape.circle,
-                        ),
-                        child: Icon(CupertinoIcons.play_fill,
-                            size: 14, color: kindDeep(routine.kind)),
-                      ),
-                    ],
-                  ),
-                  const Spacer(),
-                  if (routine.startMinute >= 0) ...[
-                    text(
-                      "${formatStartMinute(routine.startMinute)} · ${formatDays(routine.days)}"
-                          .toUpperCase(),
-                      9,
-                      TextType.Bold,
-                      color: label,
-                      letterSpacing: 1.0,
                     ),
-                    const SizedBox(height: 6),
                   ],
-                  text(routine.title, 21, TextType.Light,
-                      color: colorWhite,
-                      maxLines: 2,
-                      overflow: TextOverflow.ellipsis,
-                      height: 1.15),
-                  const SizedBox(height: 14),
-                  Container(
-                    height: 1,
-                    color: colorWhite.withValues(alpha: 0.12),
-                  ),
-                  const SizedBox(height: 12),
-                  Row(
-                    children: [
-                      Expanded(
-                        child: labelled(
-                          "Minutes",
-                          "${(routine.totalSeconds / 60).round()}",
-                          valueSize: 17,
-                          valueColor: colorWhite,
-                          labelColor: label,
-                        ),
-                      ),
-                      Expanded(
-                        child: labelled(
-                          "Steps",
-                          "${routine.steps.length}",
-                          valueSize: 17,
-                          valueColor: colorWhite,
-                          labelColor: label,
-                        ),
-                      ),
-                      Expanded(
-                        child: labelled(
-                          routine.kind == RoutineKind.Workout ? "Sets" : "Starts",
-                          routine.kind == RoutineKind.Workout
-                              ? "${routine.totalSets}"
-                              : routine.startMinute < 0
-                                  ? "Any"
-                                  : formatStartMinute(routine.startMinute),
-                          valueSize: 17,
-                          valueColor: colorWhite,
-                          labelColor: label,
-                        ),
-                      ),
-                    ],
-                  ),
-                ],
+                ),
               ),
-            ),
-          ],
+            ],
+          ),
         ),
       ),
     );
   }
 
+  Widget _cardStat(String value, IconData icon, String caption, Color tone) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        text(value, 20, TextType.Light, color: colorWhite, maxLines: 1),
+        const SizedBox(height: 2),
+        Row(
+          children: [
+            Icon(icon, size: 10, color: tone),
+            const SizedBox(width: 3),
+            text(caption, 9, TextType.Regular, color: tone),
+          ],
+        ),
+      ],
+    );
+  }
+
   Widget _routineRow(RoutineChain routine) {
     final Color tone = kindColor(routine.kind);
     final bool weighted = routine.commitmentClass != CommitmentClass.Standard;
 
-    final List<String> eyebrow = <String>[
+    final List<String> kicker = <String>[
       if (weighted) classLabel(routine.commitmentClass),
       if (routine.startMinute >= 0) formatStartMinute(routine.startMinute),
       formatDays(routine.days),
@@ -517,45 +606,43 @@ class RoutinesState extends State<Routines> implements ConnectRoutines {
     return Container(
       margin: const EdgeInsets.only(bottom: 10),
       child: card(
-        padding: const EdgeInsets.fromLTRB(10, 10, 14, 10),
+        padding: const EdgeInsets.fromLTRB(8, 8, 12, 8),
         onTap: () => _onPreview(routine),
         child: Row(
           children: [
-            Container(
-              width: 58,
-              height: 58,
-              decoration: BoxDecoration(
-                borderRadius: BorderRadius.circular(14),
-                gradient: LinearGradient(
-                  begin: Alignment.topLeft,
-                  end: Alignment.bottomRight,
-                  colors: <Color>[kindBackground(routine.kind), colorWhite],
+            SizedBox(
+              width: 70,
+              height: 70,
+              child: ClipRRect(
+                borderRadius: BorderRadius.circular(18),
+                child: SceneArt(
+                  palette: scenePalette(routine.kind),
+                  seed: sceneSeed(routine.title),
+                  figure: kindIcon(routine.kind),
+                  figureScale: 0.46,
+                  figureAlignment: const Alignment(0, 0.1),
                 ),
-                border: Border.all(color: tone.withValues(alpha: 0.15)),
               ),
-              alignment: Alignment.center,
-              child: Icon(kindIcon(routine.kind), size: 24, color: tone),
             ),
-            const SizedBox(width: 14),
+            const SizedBox(width: 12),
             Expanded(
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 mainAxisSize: MainAxisSize.min,
                 children: [
                   text(
-                    eyebrow.join(" · ").toUpperCase(),
-                    9,
-                    TextType.Bold,
+                    kicker.join(" · "),
+                    10,
+                    TextType.Medium,
                     color: weighted
                         ? classColor(routine.commitmentClass)
-                        : colorGrey2,
-                    letterSpacing: 0.9,
+                        : tone,
                     maxLines: 1,
                     overflow: TextOverflow.ellipsis,
                   ),
-                  const SizedBox(height: 5),
+                  const SizedBox(height: 3),
                   text(routine.title, 15, TextType.Medium,
-                      color: colorPrimaryDark,
+                      color: colorInk,
                       maxLines: 1,
                       overflow: TextOverflow.ellipsis),
                   const SizedBox(height: 6),
@@ -586,6 +673,7 @@ class RoutinesState extends State<Routines> implements ConnectRoutines {
                 : ProgressRing(
                     fraction: routine.partialCompletion,
                     fill: tone,
+                    track: tone.withValues(alpha: 0.12),
                   ),
           ],
         ),
@@ -610,98 +698,162 @@ class RoutinesState extends State<Routines> implements ConnectRoutines {
     return Row(
       mainAxisSize: MainAxisSize.min,
       children: [
-        Icon(icon, size: 12, color: colorGrey2),
+        Icon(icon, size: 12, color: colorInkSoft),
         const SizedBox(width: 4),
-        text(value, 11, TextType.Regular, color: colorGrey2),
+        text(value, 11, TextType.Regular, color: colorInkSoft),
       ],
     );
   }
 
-  /// The preview: the whole chain laid out before you commit to starting it.
+  /// The preview: the scene up top, then the whole chain laid out before you
+  /// commit to starting it.
   Widget _previewSheet(BuildContext sheetContext, RoutineChain routine) {
     final Color tone = kindColor(routine.kind);
 
     return Container(
       constraints: BoxConstraints(
-        maxHeight: MediaQuery.of(sheetContext).size.height * 0.86,
+        maxHeight: MediaQuery.of(sheetContext).size.height * 0.9,
       ),
       decoration: const BoxDecoration(
-        color: colorSheetBackground,
+        color: colorAmbientMid,
         borderRadius: BorderRadius.only(
-          topLeft: Radius.circular(28),
-          topRight: Radius.circular(28),
+          topLeft: Radius.circular(32),
+          topRight: Radius.circular(32),
         ),
       ),
+      clipBehavior: Clip.antiAlias,
       child: Column(
         mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
-          Center(
-            child: Container(
-              width: 38,
-              height: 4,
-              margin: const EdgeInsets.only(top: 10),
-              decoration: BoxDecoration(
-                color: colorGrey.withValues(alpha: 0.5),
-                borderRadius: BorderRadius.circular(999),
-              ),
-            ),
-          ),
           Flexible(
             child: SingleChildScrollView(
-              padding: const EdgeInsets.fromLTRB(24, 20, 24, 12),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 mainAxisSize: MainAxisSize.min,
                 children: [
-                  Row(
-                    children: [
-                      pill(kindLabel(routine.kind), tone,
-                          kindBackground(routine.kind),
-                          icon: kindIcon(routine.kind), textSize: 9),
-                      const SizedBox(width: 6),
-                      pill(classLabel(routine.commitmentClass),
-                          classColor(routine.commitmentClass),
-                          classBackground(routine.commitmentClass),
-                          textSize: 9),
-                    ],
-                  ),
-                  const SizedBox(height: 14),
-                  displayTitle(routine.title, size: 30),
-                  if (routine.note.isNotEmpty) ...[
-                    const SizedBox(height: 8),
-                    text(routine.note, 13, TextType.Regular,
-                        color: colorGrey2, height: 1.5),
-                  ],
-                  const SizedBox(height: 20),
-                  Row(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Expanded(
-                          child: statTile("Minutes",
-                              "${(routine.totalSeconds / 60).round()}")),
-                      Expanded(
-                          child: statTile("Steps", "${routine.steps.length}")),
-                      Expanded(
-                        child: statTile(
-                          "When",
-                          routine.startMinute < 0
-                              ? "Any"
-                              : formatStartMinute(routine.startMinute),
-                          caption: formatDays(routine.days),
+                  SizedBox(
+                    height: 220,
+                    child: Stack(
+                      fit: StackFit.expand,
+                      children: [
+                        SceneArt(
+                          palette: scenePalette(routine.kind),
+                          seed: sceneSeed(routine.title),
+                          figure: kindIcon(routine.kind),
+                          figureScale: 0.5,
+                          figureAlignment: const Alignment(0.4, -0.1),
+                          shade: true,
                         ),
-                      ),
-                    ],
+                        Positioned(
+                          top: 10,
+                          left: 0,
+                          right: 0,
+                          child: Center(
+                            child: Container(
+                              width: 38,
+                              height: 4,
+                              decoration: BoxDecoration(
+                                color: colorWhite.withValues(alpha: 0.7),
+                                borderRadius: BorderRadius.circular(999),
+                              ),
+                            ),
+                          ),
+                        ),
+                        Positioned(
+                          left: 24,
+                          right: 24,
+                          bottom: 18,
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            mainAxisSize: MainAxisSize.min,
+                            children: [
+                              Row(
+                                children: [
+                                  GlassSurface(
+                                    onDark: true,
+                                    radius: BorderRadius.circular(99),
+                                    padding: const EdgeInsets.symmetric(
+                                        horizontal: 10, vertical: 5),
+                                    child: text(kindLabel(routine.kind), 10,
+                                        TextType.Medium,
+                                        color: colorWhite),
+                                  ),
+                                  const SizedBox(width: 6),
+                                  GlassSurface(
+                                    onDark: true,
+                                    radius: BorderRadius.circular(99),
+                                    padding: const EdgeInsets.symmetric(
+                                        horizontal: 10, vertical: 5),
+                                    child: text(
+                                        classLabel(routine.commitmentClass),
+                                        10,
+                                        TextType.Medium,
+                                        color: colorWhite),
+                                  ),
+                                ],
+                              ),
+                              const SizedBox(height: 10),
+                              text(routine.title, 28, TextType.Medium,
+                                  color: colorWhite,
+                                  height: 1.1,
+                                  letterSpacing: -0.6),
+                            ],
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.fromLTRB(24, 18, 24, 12),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        if (routine.note.isNotEmpty) ...[
+                          text(routine.note, 13, TextType.Regular,
+                              color: colorInkSoft, height: 1.5),
+                          const SizedBox(height: 16),
+                        ],
+                        GlassSurface(
+                          radius: BorderRadius.circular(22),
+                          tint: colorGlassStrong,
+                          padding: const EdgeInsets.fromLTRB(16, 14, 16, 14),
+                          child: Row(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Expanded(
+                                child: _stripStat(
+                                    CupertinoIcons.clock,
+                                    "${(routine.totalSeconds / 60).round()}",
+                                    "Minutes"),
+                              ),
+                              Expanded(
+                                child: _stripStat(CupertinoIcons.list_bullet,
+                                    "${routine.steps.length}", "Steps"),
+                              ),
+                              Expanded(
+                                child: _stripStat(
+                                    CupertinoIcons.alarm,
+                                    routine.startMinute < 0
+                                        ? "Any"
+                                        : formatStartMinute(
+                                            routine.startMinute),
+                                    formatDays(routine.days)),
+                              ),
+                            ],
+                          ),
+                        ),
+                        const SizedBox(height: 22),
+                        sectionBreak("The chain",
+                            caption: routine.kind == RoutineKind.Workout
+                                ? "${routine.totalSets} sets, in order"
+                                : "${routine.steps.length} steps, in order"),
+                        ...routine.steps.asMap().entries.map((entry) =>
+                            _previewStep(entry.key, entry.value, tone)),
+                      ],
+                    ),
                   ),
-                  const SizedBox(height: 24),
-                  sectionBreak("The chain",
-                      caption: routine.kind == RoutineKind.Workout
-                          ? "${routine.totalSets} sets, in order"
-                          : "${routine.steps.length} steps, in order"),
-                  ...routine.steps
-                      .asMap()
-                      .entries
-                      .map((entry) => _previewStep(entry.key, entry.value, tone)),
                 ],
               ),
             ),
@@ -738,20 +890,24 @@ class RoutinesState extends State<Routines> implements ConnectRoutines {
   }
 
   Widget _previewStep(int index, RoutineStep step, Color tone) {
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 12),
+    return Container(
+      margin: const EdgeInsets.only(bottom: 8),
+      padding: const EdgeInsets.fromLTRB(10, 10, 14, 10),
+      decoration: BoxDecoration(
+        color: colorWhite,
+        borderRadius: BorderRadius.circular(18),
+      ),
       child: Row(
-        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Container(
-            width: 28,
-            height: 28,
+            width: 34,
+            height: 34,
             alignment: Alignment.center,
             decoration: BoxDecoration(
               color: tone.withValues(alpha: 0.10),
               shape: BoxShape.circle,
             ),
-            child: text("${index + 1}", 11, TextType.Bold, color: tone),
+            child: text("${index + 1}", 12, TextType.Medium, color: tone),
           ),
           const SizedBox(width: 12),
           Expanded(
@@ -759,18 +915,14 @@ class RoutinesState extends State<Routines> implements ConnectRoutines {
               crossAxisAlignment: CrossAxisAlignment.start,
               mainAxisSize: MainAxisSize.min,
               children: [
-                const SizedBox(height: 4),
-                text(step.title, 14, TextType.Medium, color: colorPrimaryDark),
+                text(step.title, 14, TextType.Medium, color: colorInk),
                 const SizedBox(height: 3),
                 text(stepSummary(step), 11, TextType.Regular,
-                    color: colorGrey2),
+                    color: colorInkSoft),
               ],
             ),
           ),
-          Padding(
-            padding: const EdgeInsets.only(top: 5),
-            child: Icon(stepModeIcon(step.mode), size: 15, color: colorGrey),
-          ),
+          Icon(stepModeIcon(step.mode), size: 15, color: colorInkSoft),
         ],
       ),
     );
diff --git a/frontend/lib/Grounded/see/splash/SplashState.dart b/frontend/lib/Grounded/see/splash/SplashState.dart
index a77a051..6c13738 100644
--- a/frontend/lib/Grounded/see/splash/SplashState.dart
+++ b/frontend/lib/Grounded/see/splash/SplashState.dart
@@ -1,16 +1,20 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
 import 'package:stacked/stacked.dart';
 
 import '../../about/internal/application/MeDescription.dart';
 import '../../about/internal/application/NavigatorType.dart';
 import '../../about/internal/application/TextType.dart';
 import '../../configs/Navigator.dart';
+import '../../designs/AmbientBackground.dart';
+import '../../designs/GlassSurface.dart';
+import '../../designs/GroundedMark.dart';
 import '../../designs/Responsive.dart';
+import '../../designs/scene/SceneArt.dart';
 import '../../designs/text/Text.dart';
 import '../../utils/Colors.dart';
-import '../../utils/Images.dart';
 import '../home/Home.dart';
 import '../login/Login.dart';
 import 'ConnectSplash.dart';
@@ -31,7 +35,7 @@ class SplashState extends State<Splash> implements ConnectSplash {
       builder: (context, viewModel, child) => PopScope(
         canPop: false,
         child: Scaffold(
-          backgroundColor: colorPrimaryDark,
+          backgroundColor: colorAmbientMid,
           body: LayoutBuilder(
             builder: (BuildContext context, BoxConstraints constraints) {
               return Responsive(
@@ -47,69 +51,193 @@ class SplashState extends State<Splash> implements ConnectSplash {
   }
 
   Future<void> _initiate() async {
-    // A beat on the wordmark, then the session decides where we land.
-    await Future.delayed(const Duration(milliseconds: 900));
+    // Long enough for the mark to land and take one breath, then the session
+    // decides where we land.
+    await Future.delayed(const Duration(milliseconds: 2200));
     _model?.initialize();
   }
 
   Widget _mobileView(BoxConstraints constraints) {
-    return SafeArea(
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 36),
-        child: Column(
-          mainAxisSize: MainAxisSize.max,
-          crossAxisAlignment: CrossAxisAlignment.start,
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          children: [
-            text("GROUNDED", 10, TextType.Bold,
-                color: colorWhite.withValues(alpha: 0.45), letterSpacing: 2.0),
-            Column(
-              mainAxisSize: MainAxisSize.min,
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                // The same mark the native splash shows, so the handover from
-                // the OS screen into the app is invisible.
-                Image.asset(
-                  splashMark,
-                  width: 108,
-                  height: 108,
-                  errorBuilder: (context, error, stackTrace) =>
-                      const SizedBox(height: 108),
-                ),
-                const SizedBox(height: 28),
-                text("Grounded", 52, TextType.Light,
-                    color: colorWhite, height: 1.05),
-                const SizedBox(height: 16),
-                Container(
-                  width: 44,
-                  height: 2,
-                  color: colorWhite.withValues(alpha: 0.30),
-                ),
-                const SizedBox(height: 20),
-                text(
-                  "A to-do app that does not believe you.",
-                  15,
-                  TextType.Regular,
-                  color: colorWhite.withValues(alpha: 0.60),
-                  height: 1.5,
-                ),
-              ],
-            ),
-            SizedBox(
-              width: 22,
-              height: 22,
-              child: CircularProgressIndicator(
-                strokeWidth: 2,
-                backgroundColor: colorWhite.withValues(alpha: 0.12),
-                color: colorWhite.withValues(alpha: 0.70),
+    return AmbientBackground(
+      child: Stack(
+        children: [
+          // The landscape rising from the bottom edge — the same painted world
+          // the routine cards live in.
+          Positioned(
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: constraints.maxHeight * 0.34,
+            child: ShaderMask(
+              shaderCallback: (Rect bounds) => const LinearGradient(
+                begin: Alignment.topCenter,
+                end: Alignment.bottomCenter,
+                colors: <Color>[Color(0x00000000), Color(0xFF000000)],
+                stops: <double>[0.0, 0.45],
+              ).createShader(bounds),
+              blendMode: BlendMode.dstIn,
+              child: const SceneArt(palette: sceneWorkout, seed: 11),
+            )
+                .animate()
+                .fadeIn(duration: 1200.ms, curve: Curves.easeOut)
+                .slideY(begin: 0.25, end: 0, duration: 1400.ms,
+                    curve: Curves.easeOutCubic),
+          ),
+          SafeArea(
+            child: Padding(
+              padding: const EdgeInsets.fromLTRB(28, 18, 28, 32),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      text("Grounded", 17, TextType.Regular, color: colorInk),
+                      text("Daily discipline", 17, TextType.Regular,
+                          color: colorInkSoft),
+                    ],
+                  ).animate().fadeIn(duration: 600.ms, delay: 200.ms),
+                  const Spacer(flex: 3),
+                  Center(child: _mark()),
+                  const SizedBox(height: 40),
+                  _wordmark(),
+                  const Spacer(flex: 4),
+                  _loader(),
+                ],
               ),
             ),
-          ],
-        ),
+          ),
+        ],
       ),
     );
   }
 
+  /// The mark on glass, inside rings that breathe outward.
+  Widget _mark() {
+    return SizedBox(
+      width: 230,
+      height: 230,
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          for (int ring = 0; ring < 3; ring++)
+            Container(
+              width: 120,
+              height: 120,
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                border: Border.all(
+                    color: colorWhite.withValues(alpha: 0.9), width: 1.4),
+              ),
+            )
+                .animate(onPlay: (controller) => controller.repeat())
+                .scale(
+                  begin: const Offset(1, 1),
+                  end: const Offset(1.9, 1.9),
+                  duration: 2400.ms,
+                  delay: (ring * 800).ms,
+                  curve: Curves.easeOutCubic,
+                )
+                .fadeOut(duration: 2400.ms, delay: (ring * 800).ms),
+          GlassSurface(
+            radius: BorderRadius.circular(44),
+            padding: const EdgeInsets.all(10),
+            child: Container(
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(32),
+                boxShadow: <BoxShadow>[
+                  BoxShadow(
+                    color: colorPrimary.withValues(alpha: 0.35),
+                    blurRadius: 40,
+                    offset: const Offset(0, 16),
+                  ),
+                ],
+              ),
+              // The sun rises out of the ground line, then the arcs light.
+              child: TweenAnimationBuilder<double>(
+                tween: Tween<double>(begin: 0, end: 1),
+                duration: const Duration(milliseconds: 1700),
+                builder: (context, t, child) => GroundedMark(
+                  size: 132,
+                  rise: Curves.easeOutCubic
+                      .transform((t / 0.6).clamp(0.0, 1.0)),
+                  arcs: Curves.easeOut
+                      .transform(((t - 0.45) / 0.55).clamp(0.0, 1.0)),
+                ),
+              ),
+            ),
+          )
+              .animate()
+              .scale(
+                begin: const Offset(0.6, 0.6),
+                end: const Offset(1, 1),
+                duration: 900.ms,
+                curve: Curves.easeOutBack,
+              )
+              .fadeIn(duration: 500.ms),
+        ],
+      ),
+    );
+  }
+
+  /// Two-tone, like the greeting on the home screen.
+  Widget _wordmark() {
+    return Column(
+      children: [
+        text("Grounded", 46, TextType.Medium,
+                color: colorInk, align: TextAlign.center, letterSpacing: -1.2)
+            .animate()
+            .fadeIn(duration: 700.ms, delay: 350.ms)
+            .slideY(begin: 0.3, end: 0, duration: 700.ms, delay: 350.ms,
+                curve: Curves.easeOutCubic),
+        const SizedBox(height: 10),
+        text("A to-do app that\ndoesn't believe you.", 22, TextType.Light,
+                color: colorInkSoft, align: TextAlign.center, height: 1.3)
+            .animate()
+            .fadeIn(duration: 700.ms, delay: 650.ms)
+            .slideY(begin: 0.3, end: 0, duration: 700.ms, delay: 650.ms,
+                curve: Curves.easeOutCubic),
+      ],
+    );
+  }
+
+  /// A glass capsule that fills while the session resolves.
+  Widget _loader() {
+    return Column(
+      children: [
+        GlassSurface(
+          radius: BorderRadius.circular(99),
+          padding: const EdgeInsets.all(3),
+          child: SizedBox(
+            width: 140,
+            height: 6,
+            child: Align(
+              alignment: Alignment.centerLeft,
+              child: Container(
+                width: 140,
+                decoration: BoxDecoration(
+                  color: colorNight,
+                  borderRadius: BorderRadius.circular(99),
+                ),
+              )
+                  .animate()
+                  .scaleX(
+                    begin: 0.04,
+                    end: 1,
+                    alignment: Alignment.centerLeft,
+                    duration: 2000.ms,
+                    curve: Curves.easeInOutCubic,
+                  ),
+            ),
+          ),
+        ),
+        const SizedBox(height: 12),
+        text("Checking what you promised", 12, TextType.Regular,
+            color: colorWhite.withValues(alpha: 0.9)),
+      ],
+    ).animate().fadeIn(duration: 500.ms, delay: 900.ms);
+  }
+
   @override
   void launchHome(MeDescription value) {
     GroundedNavigation()
diff --git a/frontend/lib/Grounded/utils/Colors.dart b/frontend/lib/Grounded/utils/Colors.dart
index b42508c..cbe132a 100644
--- a/frontend/lib/Grounded/utils/Colors.dart
+++ b/frontend/lib/Grounded/utils/Colors.dart
@@ -102,6 +102,47 @@ const List<Color> goalAccents = <Color>[
   Color(0xFF3F6E73),
 ];
 
+// ── Ambient ───────────────────────────────────────────────────────────────────
+// The light, airy surface everything now sits on: sage mist drifting into
+// cream, frosted glass for controls, ink for type and one lime spark for the
+// primary transport control.
+const Color colorAmbientTop = Color(0xFFD5E3DA);
+const Color colorAmbientMid = Color(0xFFEAEFE6);
+const Color colorAmbientBottom = Color(0xFFF5F1E6);
+const Color colorAmbientGlowSage = Color(0xFFB9D6C4);
+const Color colorAmbientGlowWarm = Color(0xFFF3DEC0);
+const Color colorInk = Color(0xFF1A1F1C);
+const Color colorInkSoft = Color(0xFF8E9690);
+const Color colorGlass = Color(0x8CFFFFFF);
+const Color colorGlassStrong = Color(0xD9FFFFFF);
+const Color colorGlassBorder = Color(0xB3FFFFFF);
+const Color colorLime = Color(0xFFB9F25B);
+const Color colorNight = Color(0xFF18211C);
+const Color colorFrost = Color(0xE6F6F7F2);
+// Night lit from the top-left: the tile, the insight card, the action button.
+const Color colorNightLift = Color(0xFF2B3A31);
+const Color colorNightGlow = Color(0xFF3A4A40);
+// The overdue callout: a warm blush rather than an alarm panel.
+const Color colorOverdueWarm = Color(0xFFF9E1D8);
+const Color colorOverdueWarmEnd = Color(0xFFFFF6EF);
+const Color colorOverdueGlow = Color(0xFFD7654B);
+
+// ── Scene art ─────────────────────────────────────────────────────────────────
+// The painted landscapes that stand in for photography on cards. Each kind has
+// a sky (top → horizon), a sun, three ridges (far → near) and an ember accent.
+const List<Color> sceneWorkout = <Color>[
+  Color(0xFF9CCBB0), Color(0xFFEFF1DC), Color(0xFFFFD49A),
+  Color(0xFF86B79B), Color(0xFF4E8C6F), Color(0xFF24563F), Color(0xFFE5793D),
+];
+const List<Color> sceneMeditation = <Color>[
+  Color(0xFFAEB8E6), Color(0xFFF6E3E2), Color(0xFFFFE6C6),
+  Color(0xFFA2A9D6), Color(0xFF7480B8), Color(0xFF3F4A7A), Color(0xFFF2A6A0),
+];
+const List<Color> sceneMustDo = <Color>[
+  Color(0xFFEBCFA3), Color(0xFFF8F0E0), Color(0xFFFFB46B),
+  Color(0xFFD9B37F), Color(0xFFB0834A), Color(0xFF6B4C26), Color(0xFF2F6F4E),
+];
+
 // ── Debt / charting ───────────────────────────────────────────────────────────
 const Color colorDebtLine = Color(0xFFB5442F);
 const Color colorDebtFill = Color(0x1AB5442F);
diff --git a/frontend/lib/Grounded/utils/CommonUtils.dart b/frontend/lib/Grounded/utils/CommonUtils.dart
index edb83ce..14a45ac 100644
--- a/frontend/lib/Grounded/utils/CommonUtils.dart
+++ b/frontend/lib/Grounded/utils/CommonUtils.dart
@@ -352,3 +352,55 @@ String targetLabel(DateTime? target) {
   }
   return "$days day${days == 1 ? "" : "s"} left";
 }
+
+/// The painted landscape a routine kind wears on its cards.
+List<Color> scenePalette(RoutineKind value) {
+  switch (value) {
+    case RoutineKind.Workout:
+      return sceneWorkout;
+    case RoutineKind.Meditation:
+      return sceneMeditation;
+    case RoutineKind.MustDo:
+      return sceneMustDo;
+  }
+}
+
+/// A landscape tinted from a goal's accent, so a goal's cards read as its own.
+List<Color> goalScene(Color accent) {
+  final HSLColor base = HSLColor.fromColor(accent);
+  Color shade(double lightness, double saturation) => base
+      .withLightness(lightness)
+      .withSaturation((base.saturation * saturation).clamp(0.0, 1.0))
+      .toColor();
+
+  return <Color>[
+    shade(0.80, 0.55),
+    const Color(0xFFF6EFE2),
+    const Color(0xFFFFD9A0),
+    shade(0.66, 0.6),
+    shade(0.48, 0.8),
+    shade(0.30, 0.9),
+    const Color(0xFFE5793D),
+  ];
+}
+
+/// The landscape for a task row, chosen by how much the task weighs.
+List<Color> classScene(CommitmentClass value) {
+  switch (value) {
+    case CommitmentClass.NonNegotiable:
+      return sceneMustDo;
+    case CommitmentClass.Standard:
+      return sceneMeditation;
+    case CommitmentClass.Elective:
+      return sceneWorkout;
+  }
+}
+
+/// A stable seed from any string, so the same item always gets the same scene.
+int sceneSeed(String key) {
+  int hash = 7;
+  for (int unit in key.codeUnits) {
+    hash = (hash * 31 + unit) & 0x7fffffff;
+  }
+  return hash;
+}
diff --git a/frontend/lib/Grounded/utils/Images.dart b/frontend/lib/Grounded/utils/Images.dart
index 1262b80..108789a 100644
--- a/frontend/lib/Grounded/utils/Images.dart
+++ b/frontend/lib/Grounded/utils/Images.dart
@@ -2,8 +2,8 @@ const String imagePath = "assets/images";
 
 const String iconPath = "assets/icons";
 
-/// The anchor mark, matching the native splash so the handover is invisible.
-const String splashMark = "$iconPath/splash.png";
+/// The mark on a night disc, as the native splash shows it.
+const String splashMark = "$iconPath/splash_orb.png";
 
 const String logoMark = "$iconPath/icon.png";
 
diff --git a/frontend/pubspec.yaml b/frontend/pubspec.yaml
index ae103ed..dfd45e3 100644
--- a/frontend/pubspec.yaml
+++ b/frontend/pubspec.yaml
@@ -104,15 +104,15 @@ flutter:
 flutter_launcher_icons:
   image_path: "assets/icons/icon.png"
   android: "ic_launcher"
-  adaptive_icon_background: "#141414"
+  adaptive_icon_background: "#18211C"
   adaptive_icon_foreground: "assets/icons/icon_foreground.png"
   min_sdk_android: 21
   ios: true
   remove_alpha_ios: true
   web:
     generate: true
-    background_color: "#141414"
-    theme_color: "#141414"
+    background_color: "#EAEFE6"
+    theme_color: "#18211C"
   windows:
     generate: true
     icon_size: 256
@@ -121,12 +121,12 @@ flutter_launcher_icons:
 # The native splash matches the Flutter splash exactly, so the handover from
 # the OS screen to the app is invisible.
 flutter_native_splash:
-  color: "#141414"
-  image: "assets/icons/splash.png"
+  color: "#EAEFE6"
+  image: "assets/icons/splash_orb.png"
   android_12:
-    color: "#141414"
-    image: "assets/icons/icon_foreground.png"
-    icon_background_color: "#141414"
+    color: "#EAEFE6"
+    image: "assets/icons/splash_orb.png"
+    icon_background_color: "#EAEFE6"
   android: true
   ios: true
   web: true
diff --git a/frontend/web/favicon.png b/frontend/web/favicon.png
index 3991827..f58a456 100644
Binary files a/frontend/web/favicon.png and b/frontend/web/favicon.png differ
diff --git a/frontend/web/icons/Icon-192.png b/frontend/web/icons/Icon-192.png
index 0189403..bebf07a 100644
Binary files a/frontend/web/icons/Icon-192.png and b/frontend/web/icons/Icon-192.png differ
diff --git a/frontend/web/icons/Icon-512.png b/frontend/web/icons/Icon-512.png
index 8385253..3c96364 100644
Binary files a/frontend/web/icons/Icon-512.png and b/frontend/web/icons/Icon-512.png differ
diff --git a/frontend/web/icons/Icon-maskable-192.png b/frontend/web/icons/Icon-maskable-192.png
index 0189403..bebf07a 100644
Binary files a/frontend/web/icons/Icon-maskable-192.png and b/frontend/web/icons/Icon-maskable-192.png differ
diff --git a/frontend/web/icons/Icon-maskable-512.png b/frontend/web/icons/Icon-maskable-512.png
index 8385253..3c96364 100644
Binary files a/frontend/web/icons/Icon-maskable-512.png and b/frontend/web/icons/Icon-maskable-512.png differ
diff --git a/frontend/web/index.html b/frontend/web/index.html
index 4e6d931..e54d59a 100644
--- a/frontend/web/index.html
+++ b/frontend/web/index.html
@@ -29,6 +29,11 @@
 
   <title>grounded</title>
   <link rel="manifest" href="manifest.json">
+  
+  
+  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
+  
+  
   <style id="splash-screen-style">
     html {
       height: 100%
@@ -37,7 +42,7 @@
     body {
       margin: 0;
       min-height: 100%;
-      background-color: #141414;
+      background-color: #EAEFE6;
           background-size: 100% 100%;
     }
 
@@ -94,7 +99,6 @@
       document.body.style.background = "transparent";
     }
   </script>
-  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
 </head>
 <body>
   <picture id="splash">
@@ -102,6 +106,8 @@
       <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x" media="(prefers-color-scheme: dark)">
       <img class="center" aria-hidden="true" src="splash/img/light-1x.png" alt="">
   </picture>
+  
+  
   <!--
     You can customize the "flutter_bootstrap.js" script.
     This is useful to provide a custom configuration to the Flutter loader
diff --git a/frontend/web/manifest.json b/frontend/web/manifest.json
index 56eb30b..5095059 100644
--- a/frontend/web/manifest.json
+++ b/frontend/web/manifest.json
@@ -3,8 +3,8 @@
     "short_name": "grounded",
     "start_url": ".",
     "display": "standalone",
-    "background_color": "#141414",
-    "theme_color": "#141414",
+    "background_color": "#EAEFE6",
+    "theme_color": "#18211C",
     "description": "A new Flutter project.",
     "orientation": "portrait-primary",
     "prefer_related_applications": false,
diff --git a/frontend/web/splash/img/dark-1x.png b/frontend/web/splash/img/dark-1x.png
index 92ef668..ceeb52d 100644
Binary files a/frontend/web/splash/img/dark-1x.png and b/frontend/web/splash/img/dark-1x.png differ
diff --git a/frontend/web/splash/img/dark-2x.png b/frontend/web/splash/img/dark-2x.png
index ee90019..2167bfa 100644
Binary files a/frontend/web/splash/img/dark-2x.png and b/frontend/web/splash/img/dark-2x.png differ
diff --git a/frontend/web/splash/img/dark-3x.png b/frontend/web/splash/img/dark-3x.png
index 0c41fdb..d9af843 100644
Binary files a/frontend/web/splash/img/dark-3x.png and b/frontend/web/splash/img/dark-3x.png differ
diff --git a/frontend/web/splash/img/dark-4x.png b/frontend/web/splash/img/dark-4x.png
index 82f7f01..4c0013a 100644
Binary files a/frontend/web/splash/img/dark-4x.png and b/frontend/web/splash/img/dark-4x.png differ
diff --git a/frontend/web/splash/img/light-1x.png b/frontend/web/splash/img/light-1x.png
index 92ef668..ceeb52d 100644
Binary files a/frontend/web/splash/img/light-1x.png and b/frontend/web/splash/img/light-1x.png differ
diff --git a/frontend/web/splash/img/light-2x.png b/frontend/web/splash/img/light-2x.png
index ee90019..2167bfa 100644
Binary files a/frontend/web/splash/img/light-2x.png and b/frontend/web/splash/img/light-2x.png differ
diff --git a/frontend/web/splash/img/light-3x.png b/frontend/web/splash/img/light-3x.png
index 0c41fdb..d9af843 100644
Binary files a/frontend/web/splash/img/light-3x.png and b/frontend/web/splash/img/light-3x.png differ
diff --git a/frontend/web/splash/img/light-4x.png b/frontend/web/splash/img/light-4x.png
index 82f7f01..4c0013a 100644
Binary files a/frontend/web/splash/img/light-4x.png and b/frontend/web/splash/img/light-4x.png differ
diff --git a/frontend/windows/runner/resources/app_icon.ico b/frontend/windows/runner/resources/app_icon.ico
index e1f2a15..97f0321 100644
Binary files a/frontend/windows/runner/resources/app_icon.ico and b/frontend/windows/runner/resources/app_icon.ico differ