docs: add UI design system

Author: SayanthRock

docs/UI_DESIGN_SYSTEM.md

@@ -0,0 +1,52 @@
+# UI Design System
+
+Use this design system for the default theme, customer helper app, screenshots, and future website.
+
+## Visual style
+
+- Premium dark UI
+- Desert Sand accent
+- Rounded cards
+- Soft glass look
+- Clear spacing
+- Strong title hierarchy
+- Minimal motion
+- Mobile-first layout
+
+## Colors
+
+| Token | Value | Usage |
+|---|---|---|
+| Background | `#0f0f10` | Main dark background |
+| Surface | `#1a1a1d` | Cards and panels |
+| Surface soft | `#242429` | Secondary cards |
+| Accent | `#e2b884` | Buttons, active states, highlights |
+| Text primary | `#f5f2ea` | Main text |
+| Text muted | `#b9b1a3` | Notes and descriptions |
+| Warning | `#ffcc66` | Experimental or test-required labels |
+| Success | `#8fd694` | Safe or supported labels |
+
+## Layout rules
+
+- Use 16dp screen padding minimum
+- Use 20dp to 28dp card radius
+- Keep cards under 5 lines of text
+- Show feature status badges clearly
+- Avoid heavy blur on low-end phones
+- Avoid long animations
+- Use compressed preview images
+
+## Customer screen order
+
+1. Default theme
+2. Wallpaper setup
+3. Lock screen setup
+4. Home screen setup
+5. Device support status
+6. Lag fix checklist
+7. Support report
+8. Rollback help
+
+## Motion rule
+
+Animations should feel premium, but never make the app slower. Use short fade or slide transitions only.