From b931a069984c0d5f847db162c72a5a3ecd32d270 Mon Sep 17 00:00:00 2001
From: Jaap-Jan de Wit | DodoTech <jaap-jan@dodotech.dev>
Date: Sat, 8 Aug 2026 15:22:04 +0200
Subject: [PATCH] Repaint the phone's chrome, radii and accent to the v5
 vocabulary

---
 src/DodoSSH.Client.Android/Theme/Phone.axaml  | 96 +++++++++++++++----
 .../Views/FilesScreen.axaml                   |  7 +-
 .../Views/HostActionBar.axaml                 |  4 +-
 .../Views/HostsScreen.axaml                   |  7 +-
 .../Views/LockedScreen.axaml                  |  4 +-
 .../Views/PhoneRail.axaml                     | 16 +++-
 .../Views/PhoneShell.axaml                    | 22 ++++-
 .../Views/RecoveryCodeScreen.axaml            | 10 +-
 .../Views/ServerScreen.axaml                  | 14 ++-
 .../Views/SnippetsScreen.axaml                | 14 ++-
 .../Views/TerminalScreen.axaml                | 15 +--
 .../Views/VaultsScreen.axaml                  |  4 +-
 12 files changed, 168 insertions(+), 45 deletions(-)

diff --git a/src/DodoSSH.Client.Android/Theme/Phone.axaml b/src/DodoSSH.Client.Android/Theme/Phone.axaml
index 6c51b9c..5ee8c3c 100644
--- a/src/DodoSSH.Client.Android/Theme/Phone.axaml
+++ b/src/DodoSSH.Client.Android/Theme/Phone.axaml
@@ -12,10 +12,28 @@
     the alternative, and the red one is the one that costs something.
 
     ── v2 ──────────────────────────────────────────────────────────────────────────────────────────────
-    The second design rounds everything. The corner radii below are the design's own — 4 for a tag, 9 for a
-    button or a pill, 10 for a list row, 11 for the search well, 12 for a card, 14 for a block of
-    monospaced output — and they are a ladder rather than a set of preferences: the radius says how big the
-    thing is, so a 12 on a chip or a 4 on a card reads as the wrong size before it reads as the wrong shape.
+    The second design rounded everything on its own ladder — 4 for a tag, 9 for a button or a pill, 10 for
+    a list row, 11 for the search well, 12 for a card, 14 for a block of monospaced output — and the numbers
+    below carried it for three passes: the radius said how big the thing was, so a 12 on a chip or a 4 on a
+    card read as the wrong size before it read as the wrong shape. Left as a record of that reasoning rather
+    than deleted, because the reasoning still holds; only the numbers it was reasoning about have moved.
+
+    ── v5 ──────────────────────────────────────────────────────────────────────────────────────────────
+    This pass takes the desktop's v5 ladder instead of v2's own, on the same reversal recorded for the
+    fonts: the phone now matches the desktop's shape as well as its face. Three rungs rather than six —
+    cards and sections stay 12, a button or a field is 10, a chip or a tag is 6 — collapsing v2's 9/10/11
+    into the one value the desktop's buttons and fields already use, and moving its 4 up to 6 and its 14
+    down to 12 to land on the desktop's own chip and card numbers. The ladder still says how big a thing
+    is before it says what shape it is; it is just a shorter ladder now, because the desktop it is copying
+    never drew v2's 11-radius search well or a card any rounder than a chip's neighbour a step away, and the
+    same case that closed the gap between 9, 10 and 11 closes the one between 12 and 14.
+
+    Not every radius on this head belongs to this ladder. The floating action button is 28 — half its own
+    56, which is a circle rather than a ladder rung — and the sheets stay at 22 on their top corners only,
+    which is a phone idiom this codebase's own bottom sheets have used since v2 and the desktop draws
+    nothing like. Both are documented where they are set rather than here, for the reason FAB and sheet
+    radii are always documented locally: a reader who only ever meets one of them should not have to find
+    this paragraph to learn it was deliberate.
   -->
 
   <Style Selector="Button.primary">
@@ -23,15 +41,32 @@
     <Setter Property="HorizontalAlignment" Value="Stretch" />
     <Setter Property="HorizontalContentAlignment" Value="Center" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
-    <Setter Property="Background" Value="{StaticResource Accent}" />
     <Setter Property="Foreground" Value="{StaticResource AccentInk}" />
-    <Setter Property="CornerRadius" Value="9" />
+    <Setter Property="CornerRadius" Value="10" />
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
     <Setter Property="FontSize" Value="12" />
     <Setter Property="FontWeight" Value="SemiBold" />
   </Style>
+
+  <!--
+    ◆ Gradient and glow, replacing a flat Accent fill — the same swap App.axaml's Button.accent made on the
+    desktop, and for the same reason: this design draws every primary button top-to-bottom from a lighter
+    violet into the accent proper, lifted off the surface with a soft violet glow rather than a border. Both
+    live in Palette.axaml as AccentGradient and AccentGlow, already resolvable here because the palette is
+    shared — this is a resource-key swap, not new colour.
+
+    Background and BoxShadow are set here rather than as plain Setters above, because Fluent's default
+    button template only lets a style reach the fill and the glow through the ContentPresenter it draws
+    itself around — the same reason the desktop's rule targets /template/ ContentPresenter rather than the
+    Button. Height, radius and the rest stay ordinary Setters on Button.primary itself; only the two the
+    template intercepts move down here.
+  -->
+  <Style Selector="Button.primary /template/ ContentPresenter">
+    <Setter Property="Background" Value="{StaticResource AccentGradient}" />
+    <Setter Property="BoxShadow" Value="{StaticResource AccentGlow}" />
+  </Style>
   <Style Selector="Button.primary:pressed /template/ ContentPresenter">
-    <Setter Property="Background" Value="{StaticResource Accent}" />
+    <Setter Property="Background" Value="{StaticResource AccentGradient}" />
     <Setter Property="Opacity" Value="0.82" />
   </Style>
 
@@ -39,9 +74,15 @@
     Disabled is drawn as flat and unlit rather than merely dimmed. The design's CONTINUE button on the
     recovery screen is disabled until the checkbox is ticked, and a user who cannot tell it is disabled
     reads the screen as broken rather than as waiting for them.
+
+    BoxShadow has to be cleared here too, as "none" rather than left unset — see the remark on
+    Button.accent:disabled in the desktop's App.axaml for why the literal string is required and an empty
+    BoxShadows is not: the base rule's glow Setter is still in effect wherever a more specific one does not
+    override it, and a disabled primary button lit with a glow would read as wanting to be pressed.
   -->
   <Style Selector="Button.primary:disabled /template/ ContentPresenter">
     <Setter Property="Background" Value="{StaticResource Raised}" />
+    <Setter Property="BoxShadow" Value="none" />
     <Setter Property="TextElement.Foreground" Value="{StaticResource TextFaint}" />
   </Style>
 
@@ -54,7 +95,7 @@
     <Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
     <Setter Property="BorderThickness" Value="1" />
     <Setter Property="Foreground" Value="{StaticResource Text}" />
-    <Setter Property="CornerRadius" Value="9" />
+    <Setter Property="CornerRadius" Value="10" />
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
     <Setter Property="FontSize" Value="11.5" />
     <Setter Property="FontWeight" Value="SemiBold" />
@@ -69,7 +110,7 @@
     <Setter Property="BorderBrush" Value="{StaticResource DangerSoft}" />
     <Setter Property="BorderThickness" Value="1" />
     <Setter Property="Foreground" Value="{StaticResource Danger}" />
-    <Setter Property="CornerRadius" Value="9" />
+    <Setter Property="CornerRadius" Value="10" />
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
     <Setter Property="FontSize" Value="10.5" />
     <Setter Property="FontWeight" Value="SemiBold" />
@@ -126,7 +167,17 @@
 
     Accent-filled, which it shares with Button.primary and with nothing else — and it means the same thing
     in both places: the one action on the surface that is not a choice between peers. Circular by radius
-    rather than by a Path, so the pressed state the template draws is the same shape as the button.
+    rather than by a Path, so the pressed state the template draws is the same shape as the button — 28,
+    exactly half its own 56, which is a geometric constraint rather than a ladder rung and does not move
+    with the rest of this file's radii.
+
+    ◆ Gradient and glow since v5, matching Button.primary rather than staying a flat fill once that one
+    moved. The two are the only accent-filled controls on this head and are read as one idea — "the thing
+    this surface wants you to do" — so a flat FAB beside a gradient primary button would be the seam this
+    codebase's palette file keeps warning about, one screenshot over from the button it echoes. The glow
+    reads as well on a floating circle as it does on a bar-anchored rectangle: if anything a control that
+    already floats over content earns a lift more than one sitting in a row of chrome does, so it is kept
+    rather than dropped for the FAB's own shape.
 
     Still only on HOSTS. The design puts a second one on S3 and that editor genuinely does not exist yet, so
     the style being here is not permission to draw one there.
@@ -135,7 +186,6 @@
     <Setter Property="Width" Value="56" />
     <Setter Property="Height" Value="56" />
     <Setter Property="Padding" Value="0" />
-    <Setter Property="Background" Value="{StaticResource Accent}" />
     <Setter Property="BorderThickness" Value="0" />
     <Setter Property="CornerRadius" Value="28" />
     <Setter Property="HorizontalContentAlignment" Value="Center" />
@@ -145,8 +195,14 @@
     <Setter Property="FontSize" Value="24" />
     <Setter Property="FontWeight" Value="SemiBold" />
   </Style>
+  <!-- See the remark above Button.primary's own /template/ ContentPresenter rule: BoxShadow has no home on
+       a Button itself, so the fill moves down here alongside it rather than staying a plain Setter. -->
+  <Style Selector="Button.fab /template/ ContentPresenter">
+    <Setter Property="Background" Value="{StaticResource AccentGradient}" />
+    <Setter Property="BoxShadow" Value="{StaticResource AccentGlow}" />
+  </Style>
   <Style Selector="Button.fab:pressed /template/ ContentPresenter">
-    <Setter Property="Background" Value="{StaticResource Accent}" />
+    <Setter Property="Background" Value="{StaticResource AccentGradient}" />
     <Setter Property="Opacity" Value="0.82" />
   </Style>
 
@@ -194,7 +250,7 @@
   -->
   <Style Selector="Border.output">
     <Setter Property="Background" Value="{StaticResource TerminalSurface}" />
-    <Setter Property="CornerRadius" Value="14" />
+    <Setter Property="CornerRadius" Value="12" />
     <Setter Property="Padding" Value="12" />
   </Style>
 
@@ -205,7 +261,7 @@
   -->
   <Style Selector="Border.tag">
     <Setter Property="Background" Value="{StaticResource Chip}" />
-    <Setter Property="CornerRadius" Value="4" />
+    <Setter Property="CornerRadius" Value="6" />
     <Setter Property="Padding" Value="7,2" />
     <Setter Property="VerticalAlignment" Value="Center" />
   </Style>
@@ -231,7 +287,7 @@
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
     <Setter Property="BorderThickness" Value="1" />
-    <Setter Property="CornerRadius" Value="4" />
+    <Setter Property="CornerRadius" Value="6" />
     <Setter Property="Padding" Value="11,0" />
     <Setter Property="Foreground" Value="{StaticResource TextDim}" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
@@ -267,11 +323,17 @@
     Checked is a filled surface with accent *text*, not an accent fill. v2 makes that distinction
     everywhere — see the remark on AccentText in Palette.axaml — and a chip is where it matters most: a row
     of four solid blue lozenges is a row of four things that all look like the primary action.
+
+    ◆ Its own radius rather than Border.tag's or Button.chiptoggle's, despite the name. v2 drew this control
+    on the ladder's button-or-pill rung rather than its tag rung — 9, not 4 — and the v5 pass carries the
+    same rung forward to 10 rather than to Border.tag's 6: it is a much larger control at 34 tall against a
+    tag's line-height, and a radius picked for a 34-pixel chip is not the one a 20-pixel tag needs, whatever
+    the class is called. See the remark on Phone.axaml's own ladder, above.
   -->
   <Style Selector="RadioButton.chip">
     <Setter Property="MinHeight" Value="34" />
     <Setter Property="Padding" Value="13,6" />
-    <Setter Property="CornerRadius" Value="9" />
+    <Setter Property="CornerRadius" Value="10" />
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
     <Setter Property="BorderThickness" Value="1" />
@@ -314,7 +376,7 @@
     <Setter Property="Background" Value="{StaticResource Field}" />
     <Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
     <Setter Property="BorderThickness" Value="1" />
-    <Setter Property="CornerRadius" Value="11" />
+    <Setter Property="CornerRadius" Value="10" />
     <Setter Property="Foreground" Value="{StaticResource Text}" />
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
     <Setter Property="FontSize" Value="12" />
diff --git a/src/DodoSSH.Client.Android/Views/FilesScreen.axaml b/src/DodoSSH.Client.Android/Views/FilesScreen.axaml
index 6702fc7..7230dfe 100644
--- a/src/DodoSSH.Client.Android/Views/FilesScreen.axaml
+++ b/src/DodoSSH.Client.Android/Views/FilesScreen.axaml
@@ -178,7 +178,7 @@
     <ScrollViewer Grid.Row="3" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled"
                   IsVisible="{Binding IsConnected}" Margin="0,0,0,4">
       <StackPanel Orientation="Horizontal" Spacing="4" Margin="14,0" VerticalAlignment="Center">
-        <Button Classes="row" MinHeight="36" Padding="9,0" CornerRadius="9"
+        <Button Classes="row" MinHeight="36" Padding="9,0" CornerRadius="10"
                 Command="{Binding RemoteUpCommand}">
           <TextBlock Classes="mono" FontSize="12" Text="↑" Foreground="{StaticResource AccentText}" />
         </Button>
@@ -188,7 +188,7 @@
           </ItemsControl.ItemsPanel>
           <ItemsControl.ItemTemplate>
             <DataTemplate x:DataType="vm:CrumbViewModel">
-              <Button Classes="row" MinHeight="36" Padding="7,0" CornerRadius="9"
+              <Button Classes="row" MinHeight="36" Padding="7,0" CornerRadius="10"
                       Command="{Binding $parent[views:FilesScreen].((vm:TransfersViewModel)DataContext).GoRemoteCommand}"
                       CommandParameter="{Binding Path}">
                 <TextBlock Classes="detail" FontSize="11" Text="{Binding Name}" />
@@ -265,7 +265,8 @@
     </Panel>
 
     <!-- ============ what to do with the chosen entry ============ -->
-    <Border Grid.Row="5" IsVisible="{Binding IsConnected}" Background="{StaticResource Chrome}"
+    <!-- DeepChrome rather than Chrome, since v5 — see the remark on PhoneShell's vault header. -->
+    <Border Grid.Row="5" IsVisible="{Binding IsConnected}" Background="{StaticResource DeepChrome}"
             BorderBrush="{StaticResource Border}" BorderThickness="0,1,0,0" Padding="12,10">
       <StackPanel Spacing="9">
 
diff --git a/src/DodoSSH.Client.Android/Views/HostActionBar.axaml b/src/DodoSSH.Client.Android/Views/HostActionBar.axaml
index f3ae998..82f1ce5 100644
--- a/src/DodoSSH.Client.Android/Views/HostActionBar.axaml
+++ b/src/DodoSSH.Client.Android/Views/HostActionBar.axaml
@@ -29,7 +29,9 @@
     of "edit these six". The three that stay are the ones a count makes better rather than worse.
   -->
 
-  <Border Background="{StaticResource Chrome}" BorderBrush="{StaticResource Border}"
+  <!-- DeepChrome rather than Chrome, since v5: this bar takes the vault header's own place, so it takes
+       the vault header's own surface too — see the remark on that header in PhoneShell.axaml. -->
+  <Border Background="{StaticResource DeepChrome}" BorderBrush="{StaticResource Border}"
           BorderThickness="0,0,0,1" Padding="6,0" Height="56">
     <Grid ColumnDefinitions="Auto,*,Auto,Auto">
 
diff --git a/src/DodoSSH.Client.Android/Views/HostsScreen.axaml b/src/DodoSSH.Client.Android/Views/HostsScreen.axaml
index bb3a919..f4360ea 100644
--- a/src/DodoSSH.Client.Android/Views/HostsScreen.axaml
+++ b/src/DodoSSH.Client.Android/Views/HostsScreen.axaml
@@ -68,7 +68,7 @@
       of a selection and ticking it is a thing this screen supports rather than merely survives.
     -->
     <Border Grid.Row="0" Margin="14,10,14,4" Background="{StaticResource Field}"
-            BorderBrush="{StaticResource BorderMid}" BorderThickness="1" CornerRadius="11" Height="44">
+            BorderBrush="{StaticResource BorderMid}" BorderThickness="1" CornerRadius="10" Height="44">
       <Grid ColumnDefinitions="Auto,*">
         <TextBlock Grid.Column="0" Text="⌕" Foreground="{StaticResource TextFaint}" FontSize="13"
                    Margin="13,0,0,0" VerticalAlignment="Center" />
@@ -974,7 +974,10 @@
     <Grid IsVisible="{Binding IsEditing}" RowDefinitions="Auto,*"
           Background="{StaticResource Canvas}">
 
-      <Border Grid.Row="0" Background="{StaticResource Chrome}" BorderBrush="{StaticResource Border}"
+      <!-- DeepChrome rather than Chrome, since v5: "its header carries what the surrounding chrome no longer
+           can" below is still true, and now the header itself carries the darker chrome the rest of this
+           head's frame does — see the remark on PhoneShell's vault header. -->
+      <Border Grid.Row="0" Background="{StaticResource DeepChrome}" BorderBrush="{StaticResource Border}"
               BorderThickness="0,0,0,1" Padding="6,0" Height="56">
         <Grid ColumnDefinitions="Auto,*,Auto">
           <Button Grid.Column="0" Classes="icon" Content="←" Command="{Binding CancelEditCommand}"
diff --git a/src/DodoSSH.Client.Android/Views/LockedScreen.axaml b/src/DodoSSH.Client.Android/Views/LockedScreen.axaml
index 905c106..059f12d 100644
--- a/src/DodoSSH.Client.Android/Views/LockedScreen.axaml
+++ b/src/DodoSSH.Client.Android/Views/LockedScreen.axaml
@@ -91,8 +91,8 @@
 
           Not Border.card, and neither are its two counterparts on HOSTS and FILES: that class is a panel,
           and this is a warning, so the background and the border are the warn pair rather than the chrome
-          one. What it does take is the radius the v2 ladder gives anything card-sized, which is what the
-          other two already draw.
+          one. What it does take is the radius the ladder gives anything card-sized — 12, unchanged from v2
+          to v5 — which is what the other two already draw.
         -->
         <Border IsVisible="{Binding HasLiveSessions}" Margin="0,22,0,0"
                 Background="{StaticResource WarnWash}" BorderBrush="{StaticResource WarnSoft}"
diff --git a/src/DodoSSH.Client.Android/Views/PhoneRail.axaml b/src/DodoSSH.Client.Android/Views/PhoneRail.axaml
index fc6d7be..fc1d06a 100644
--- a/src/DodoSSH.Client.Android/Views/PhoneRail.axaml
+++ b/src/DodoSSH.Client.Android/Views/PhoneRail.axaml
@@ -36,6 +36,18 @@
     The .railentry styles live in this file because they are this control's own shape and nothing else wears
     them; every colour in them is resolved from Theme/Palette.axaml by key, which is the rule that matters —
     a rail that named its own blues is how a fifth surface colour ends up in the application.
+
+    ── DEEP CHROME, SINCE v5 ───────────────────────────────────────────────────────────────────────────────
+    This rail's own surface moves from Sidebar to DeepChrome in this pass, matching the desktop's NavRail —
+    which is exactly what this control is standing in for on a wide phone, and which took the same v5b move
+    itself: Palette.axaml's own remark on DeepChrome names "the rail down the side" as one of the five things
+    that colour is for. Sidebar stays what a card sits on; this is the frame the cards sit inside, the same
+    distinction PhoneShell's header, strip and bottom bar are drawing at the same time.
+
+    The hover fill moves too, from Panel to Track — and Track rather than Hover, because Palette.axaml's own
+    remark on Track names "the rail row a pointer sits over" as one of the three things that colour is for,
+    literally. Panel was never named for this; it read close enough that nobody had gone looking for the
+    seam, which is exactly the kind of gap Track exists to close.
   -->
 
   <UserControl.Styles>
@@ -54,7 +66,7 @@
     </Style>
 
     <Style Selector="Button.railentry:pointerover /template/ ContentPresenter">
-      <Setter Property="Background" Value="{StaticResource Panel}" />
+      <Setter Property="Background" Value="{StaticResource Track}" />
     </Style>
 
     <Style Selector="Button.railentry.active /template/ ContentPresenter">
@@ -96,7 +108,7 @@
     </Style>
   </UserControl.Styles>
 
-  <Border Width="188" Background="{StaticResource Sidebar}"
+  <Border Width="188" Background="{StaticResource DeepChrome}"
           BorderBrush="{StaticResource Border}" BorderThickness="0,0,1,0">
 
     <!--
diff --git a/src/DodoSSH.Client.Android/Views/PhoneShell.axaml b/src/DodoSSH.Client.Android/Views/PhoneShell.axaml
index f603054..b82d923 100644
--- a/src/DodoSSH.Client.Android/Views/PhoneShell.axaml
+++ b/src/DodoSSH.Client.Android/Views/PhoneShell.axaml
@@ -97,7 +97,16 @@
         the surface. See PhoneShell.ShowsVaultHeader.
       -->
       <Panel Grid.Row="0" IsVisible="{Binding $parent[views:PhoneShell].ShowsVaultHeader}">
-        <Border Background="{StaticResource Chrome}" BorderBrush="{StaticResource Border}"
+        <!--
+          ◆ DeepChrome rather than Chrome, since v5. The desktop's own titlebar and nav rail made the same
+          move in v5b — one step darker than Chrome, #0B0B14 against #10111E, so the frame reads as what
+          holds the glass rather than as another pane of it — and this header is the phone's equivalent
+          furniture: it is what the desktop's titlebar is, on the surface that has no window to carry one.
+          HostActionBar, which takes this header's own place while hosts are selected, and the editor's
+          header in HostsScreen, which the header stands down for, both move with it for the same reason;
+          see the remark on each.
+        -->
+        <Border Background="{StaticResource DeepChrome}" BorderBrush="{StaticResource Border}"
                 BorderThickness="0,0,0,1" Padding="14,0" Height="56">
           <Grid ColumnDefinitions="Auto,*,Auto,Auto">
 
@@ -288,7 +297,10 @@
         PhoneShell.ShowsShellStrip, which is where that "and" is made, Avalonia's bindings having none.
       -->
       <Panel Grid.Row="2" IsVisible="{Binding $parent[views:PhoneShell].ShowsShellStrip}">
-        <Border IsVisible="{Binding HasTabs}" Background="{StaticResource Sidebar}"
+        <!-- DeepChrome rather than Sidebar, since v5, joining the header and the bar above and below it:
+             the strip is chrome the same way they are — a frame around the screen rather than a pane of
+             it — and Sidebar is what a card sits on, which this row is not. -->
+        <Border IsVisible="{Binding HasTabs}" Background="{StaticResource DeepChrome}"
                 BorderBrush="{StaticResource Border}" BorderThickness="0,1,0,0" Height="46">
           <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
             <ItemsControl ItemsSource="{Binding Tabs}" Margin="12,0" VerticalAlignment="Center">
@@ -297,7 +309,7 @@
               </ItemsControl.ItemsPanel>
               <ItemsControl.ItemTemplate>
                 <DataTemplate x:DataType="vm:TerminalTabViewModel">
-                  <Button Classes="row" MinHeight="34" Padding="13,0" CornerRadius="9"
+                  <Button Classes="row" MinHeight="34" Padding="13,0" CornerRadius="10"
                           Background="{StaticResource Panel}" BorderBrush="{StaticResource BorderMid}"
                           BorderThickness="1"
                           Command="{Binding $parent[views:PhoneShell].((vm:MainWindowViewModel)DataContext).SelectTabCommand}"
@@ -341,8 +353,10 @@
         shape of everything else already behind the hub. What is left is the two halves of using this
         application, and the drawer holding the rest.
       -->
+      <!-- DeepChrome rather than Chrome, since v5 — see the remark on the vault header, above, which this
+           bar is the foot of the same frame the header is the top of. -->
       <Border Grid.Row="3" IsVisible="{Binding $parent[views:PhoneShell].ShowsBottomBar}"
-              Background="{StaticResource Chrome}" BorderBrush="{StaticResource Border}"
+              Background="{StaticResource DeepChrome}" BorderBrush="{StaticResource Border}"
               BorderThickness="0,1,0,0" Height="64">
         <Grid ColumnDefinitions="*,*,*">
 
diff --git a/src/DodoSSH.Client.Android/Views/RecoveryCodeScreen.axaml b/src/DodoSSH.Client.Android/Views/RecoveryCodeScreen.axaml
index 7abd847..e6af71d 100644
--- a/src/DodoSSH.Client.Android/Views/RecoveryCodeScreen.axaml
+++ b/src/DodoSSH.Client.Android/Views/RecoveryCodeScreen.axaml
@@ -36,8 +36,16 @@
         good way to read a code and a bad way to copy one: a user who cannot select it will photograph the
         screen, and that is a worse home for it than their clipboard.
       -->
+      <!--
+        ◆ CornerRadius 12, not 6. Its padding, 14,13, is Border.card's own — this box was already drawn to a
+        card's proportions, in every dimension but the corner — so under v2's ladder 6 was an outlier this
+        file never explained. It is worse than unexplained now: v5's ladder gives 6 to a chip, and a
+        full-width box holding the one secret this whole screen exists to show is not a chip wearing a
+        card's padding by coincidence. 12 is what a card-shaped box gets on this ladder, and this one always
+        was one.
+      -->
       <Border Margin="0,20,0,0" Background="{StaticResource Field}" BorderBrush="{StaticResource BorderMid}"
-              BorderThickness="1" CornerRadius="6" Padding="14,13">
+              BorderThickness="1" CornerRadius="12" Padding="14,13">
         <SelectableTextBlock Text="{Binding RecoveryCode}"
                              FontFamily="{StaticResource MonoFont}" FontSize="14"
                              Foreground="{StaticResource Accent}"
diff --git a/src/DodoSSH.Client.Android/Views/ServerScreen.axaml b/src/DodoSSH.Client.Android/Views/ServerScreen.axaml
index 58c4142..ff556a3 100644
--- a/src/DodoSSH.Client.Android/Views/ServerScreen.axaml
+++ b/src/DodoSSH.Client.Android/Views/ServerScreen.axaml
@@ -20,9 +20,17 @@
       <StackPanel Spacing="10" HorizontalAlignment="Center" Margin="0,48,0,36">
         <!--
           Filled rather than outlined since v2, the same mark the header, the desktop titlebar and the
-          launcher icon carry. The radius is not picked: the mark runs 6 at 20 and 8 at 26, which is a
-          third of a unit per unit of tile and lands on 14 at 44 — and 14 is a rung of Phone.axaml's
-          ladder, the one for a block of monospaced output, which is what this is.
+          launcher icon carry. The radius is not picked: the mark runs 6 at 20 and 8 at 26, a third of a
+          unit per unit of tile, and lands on 14 at 44.
+
+          ◆ That used to be a rung of Phone.axaml's own ladder too — 14, the one for a block of monospaced
+          output, which this glyph reads as — and the coincidence was worth a sentence: one fewer number
+          the ladder had to introduce. It is a coincidence no longer. v5's ladder moves output to 12 and
+          never reaches 14 at all, so the mark's own 6/8/14 progression stands on its own now rather than
+          borrowing a card- or output-shaped justification — a self-contained proportion for a badge that
+          answers to nothing but its own three sizes. Left at 14 rather than moved to 12 with everything
+          else: the ladder governs content surfaces, and this is a mark, sized off its own tile rather than
+          off what it holds.
         -->
         <Border Width="44" Height="44" CornerRadius="14" Background="{StaticResource Accent}"
                 HorizontalAlignment="Center">
diff --git a/src/DodoSSH.Client.Android/Views/SnippetsScreen.axaml b/src/DodoSSH.Client.Android/Views/SnippetsScreen.axaml
index 29e1c39..e4ae987 100644
--- a/src/DodoSSH.Client.Android/Views/SnippetsScreen.axaml
+++ b/src/DodoSSH.Client.Android/Views/SnippetsScreen.axaml
@@ -156,8 +156,12 @@
                   </Border>
                 </StackPanel>
 
-                <!-- The command, on the surface every block of monospace in this design is drawn on. -->
-                <Border Classes="output" CornerRadius="9" Padding="11,9">
+                <!-- The command, on the surface every block of monospace in this design is drawn on.
+                     No radius override any more: it diverged from Border.output's own 14 under v2 for a
+                     smaller card-nested block, and now that the style's own value has moved to 12 there is
+                     no gap left worth a second number for — it takes the class's, like every other output
+                     block on this head. -->
+                <Border Classes="output" Padding="11,9">
                   <TextBlock Classes="mono" FontSize="11" Text="{Binding Preview}"
                              Foreground="{StaticResource Text}" TextTrimming="CharacterEllipsis" />
                 </Border>
@@ -174,8 +178,12 @@
       second column to put it in. Both buttons name the terminal — "TYPE INTO pg-primary" — because on a
       phone the tab strip may be scrolled away and "whatever is in the terminal receives this" is not a
       sentence anybody should have to guess the subject of.
+
+      DeepChrome rather than Chrome, since v5: this bar is chrome furniture in the same sense the bottom
+      nav bar it sits above is — a raised strip of frame rather than a pane of content — and joins the same
+      DeepChrome decision PhoneShell's header, strip and bar made. See the remark there.
     -->
-    <Border Grid.Row="4" IsVisible="{Binding HasSelection}" Background="{StaticResource Chrome}"
+    <Border Grid.Row="4" IsVisible="{Binding HasSelection}" Background="{StaticResource DeepChrome}"
             BorderBrush="{StaticResource Border}" BorderThickness="0,1,0,0" Padding="14,12"
             IsEnabled="{Binding !IsEditing}">
       <StackPanel Spacing="9">
diff --git a/src/DodoSSH.Client.Android/Views/TerminalScreen.axaml b/src/DodoSSH.Client.Android/Views/TerminalScreen.axaml
index 527227a..cebfc62 100644
--- a/src/DodoSSH.Client.Android/Views/TerminalScreen.axaml
+++ b/src/DodoSSH.Client.Android/Views/TerminalScreen.axaml
@@ -49,7 +49,10 @@
       to 34, the pills to 30 — because a bar that shrank around controls that did not would only have moved
       the clipping somewhere harder to see.
     -->
-    <Border Grid.Row="0" Height="35" Background="{StaticResource Chrome}"
+    <!-- DeepChrome rather than Chrome, since v5: this bar is what the vault header, the strip and the
+         bottom bar collapse into while a shell is showing, so it takes their surface along with their
+         job — see the remark on the header in PhoneShell.axaml. -->
+    <Border Grid.Row="0" Height="35" Background="{StaticResource DeepChrome}"
             BorderBrush="{StaticResource Border}" BorderThickness="0,0,0,1">
       <Grid ColumnDefinitions="Auto,*,Auto">
 
@@ -87,9 +90,9 @@
                   row where nothing sits above or below it to be hit by mistake.
                 -->
                 <Border Background="{StaticResource Panel}" BorderBrush="{StaticResource BorderMid}"
-                        BorderThickness="1" CornerRadius="9" Height="30">
+                        BorderThickness="1" CornerRadius="10" Height="30">
                   <StackPanel Orientation="Horizontal">
-                    <Button Classes="row" MinHeight="28" Padding="11,0" CornerRadius="9"
+                    <Button Classes="row" MinHeight="28" Padding="11,0" CornerRadius="10"
                             VerticalContentAlignment="Center"
                             Command="{Binding $parent[views:TerminalScreen].((vm:MainWindowViewModel)DataContext).SelectTabCommand}"
                             CommandParameter="{Binding}">
@@ -116,7 +119,7 @@
                       It reads as a misprint, which for the control that ends a session is the wrong thing
                       to look like.
                     -->
-                    <Button Classes="row" MinHeight="28" Width="44" Padding="0" CornerRadius="0,9,9,0"
+                    <Button Classes="row" MinHeight="28" Width="44" Padding="0" CornerRadius="0,10,10,0"
                             HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                             BorderBrush="{StaticResource BorderMid}" BorderThickness="1,0,0,0"
                             Command="{Binding $parent[views:TerminalScreen].((vm:MainWindowViewModel)DataContext).CloseTabCommand}"
@@ -362,7 +365,7 @@
           <Border Width="1" Height="18" Background="{StaticResource Border}" Margin="0,0,3,0"
                   VerticalAlignment="Center" />
 
-          <Button Classes="row" MinHeight="30" Height="30" MinWidth="40" Padding="0" CornerRadius="9"
+          <Button Classes="row" MinHeight="30" Height="30" MinWidth="40" Padding="0" CornerRadius="10"
                   HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                   Background="{StaticResource Panel}" BorderBrush="{StaticResource BorderMid}"
                   BorderThickness="1" Focusable="False"
@@ -371,7 +374,7 @@
             <TextBlock Classes="mono" FontSize="13" Text="A−" />
           </Button>
 
-          <Button Classes="row" MinHeight="30" Height="30" MinWidth="40" Padding="0" CornerRadius="9"
+          <Button Classes="row" MinHeight="30" Height="30" MinWidth="40" Padding="0" CornerRadius="10"
                   HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                   Background="{StaticResource Panel}" BorderBrush="{StaticResource BorderMid}"
                   BorderThickness="1" Focusable="False"
diff --git a/src/DodoSSH.Client.Android/Views/VaultsScreen.axaml b/src/DodoSSH.Client.Android/Views/VaultsScreen.axaml
index 1b0f65a..4d4480d 100644
--- a/src/DodoSSH.Client.Android/Views/VaultsScreen.axaml
+++ b/src/DodoSSH.Client.Android/Views/VaultsScreen.axaml
@@ -336,9 +336,11 @@
       the thing the whole screen is about — a member can only be selected under one, so choosing who is the
       only half left to make.
     -->
+    <!-- DeepChrome rather than Chrome, since v5 — the same raised-bar decision SnippetsScreen and
+         FilesScreen make for their own selection bars; see the remark on PhoneShell's vault header. -->
     <Border Grid.Row="4"
             IsVisible="{Binding SelectedMember, Converter={x:Static ObjectConverters.IsNotNull}}"
-            Background="{StaticResource Chrome}" BorderBrush="{StaticResource Border}"
+            Background="{StaticResource DeepChrome}" BorderBrush="{StaticResource Border}"
             BorderThickness="0,1,0,0" Padding="14,12">
       <StackPanel Spacing="9">