feat(ui): refine Graphite visuals and center navigation content

docs/development/visual-direction.md

@@ -0,0 +1,56 @@
+# Ferese visual direction: quiet structure
+
+Reference reviewed on 2026-10-28: the user supplied a 9.78-second, 60 fps
+2168 × 2160 screen recording. It is an edited design progression, not a recording
+of a working desktop's interaction latency or animation timings. Local analysis
+frames and the source fingerprint live in `.artifacts/visual-reference-20261028/`.
+
+## What the reference changes
+
+| Segment | Observed change | Ferese application |
+| --- | --- | --- |
+| 0–3 s | Spacing guides replace uneven navigation and card offsets. | A 4 px spacing scale; 24 px page/section rhythm, 12 px card gutters, 36 px navigation rows. |
+| 3–5 s | Purple glows and saturated surfaces recede into neutral planes. | A selectable Graphite family, paired dark and light appearances; near-opaque surfaces and restrained tint/shadow. |
+| 5–7 s | Outline icons, a smaller brand, consistent insets and quieter selection. | 24 px brand mark, small outline icons, neutral navigation selection plus an accent marker. Keyboard focus stays explicit. |
+| 7–9.78 s | Typography and content become the hierarchy; color remains on meaningful data. | MiSans retained; medium-weight page/card titles, readable secondary text, color reserved for active state and status. |
+
+## Implemented layout
+
+Appearance is a configuration overview, with no invented metrics or dashboard
+content. Quick access puts language/general preferences and the complete editor
+on the first row. Desktop, interaction and system settings follow as grouped,
+equal-width cards. The card text owns the flexible space; chevrons align to the
+far edge. Above 680 logical pixels of content width the overview has two columns;
+below that it becomes one column. Card height follows the text, including Chinese
+and English line wrapping.
+
+Normal settings use thin section boundaries instead of large colored blocks.
+Each 36 px navigation hit area centers the complete content row vertically; the
+row then centers its text, icon and indicator internally. Both layers are necessary
+because the native custom button places its child at the top padding.
+Navigation selection and keyboard focus are independent: the former uses a quiet
+fill and a small accent marker, while keyboard focus has a clear outline. Stronger
+boundaries remain available through the existing high-contrast preference.
+Explicit gradient theme choices still apply to theme controls and window focus.
+
+Graphite is an ordinary registered theme family (`graphite`, `graphite-light`),
+so the Shell, Settings, locker and native Rime candidate popup receive it through
+the existing theme protocol. Theme selection changes only in the isolated preview
+for this review; choosing another family remains available in Appearance → Theme.
+No new configuration keys or input gestures are introduced by the visual update.
+
+## Acceptance
+
+Check both Graphite appearances and all existing presets, keyboard focus and text
+contrast, a narrow single-column view and a wide two-column view, card boundaries
+and reachability, the complete editor's scrolling, and a native Rime candidate.
+The edited video does not provide evidence for copying an easing curve or duration;
+existing motion and Reduce motion settings continue to own those behaviors.
+
+Validation completed in this fork: 115 Settings tests, 32 shared theme/control
+tests, 247 Shell tests and 46 configuration tests; optional profiling tests remain
+ignored. Native captures cover dark/light appearances and a 631 px window.
+All 15 navigation items have a centering regression check, including the three
+Interaction destinations selected in turn; a hover-only native probe confirms
+Windows aligns inside its highlighted hit area. Native Rime input, horizontal
+candidates, paging, theme changes and service recovery also passed.