Files
adolf/apps/android/style.md
alvis bedb527145
Some checks failed
ClawSweeper Dispatch / dispatch (push) Has been cancelled
CodeQL / Security High (actions) (push) Has been cancelled
CodeQL / Security High (channel-runtime-boundary) (push) Has been cancelled
CodeQL / Security High (core-auth-secrets) (push) Has been cancelled
CodeQL / Security High (mcp-process-tool-boundary) (push) Has been cancelled
CodeQL / Security High (network-ssrf-boundary) (push) Has been cancelled
CodeQL / Security High (plugin-trust-boundary) (push) Has been cancelled
CodeQL / Security High (process-exec-boundary) (push) Has been cancelled
Docs Sync Publish Repo / sync-publish-repo (push) Has been cancelled
Docs / docs (push) Has been cancelled
OpenClaw Stable Main Closeout / Resolve stable release closeout inputs (push) Has been cancelled
OpenClaw Stable Main Closeout / Verify stable main closeout (push) Has been cancelled
Workflow Sanity / no-tabs (push) Has been cancelled
Workflow Sanity / actionlint (push) Has been cancelled
Workflow Sanity / generated-doc-baselines (push) Has been cancelled
CI / runner-admission (push) Has been cancelled
CI / preflight (push) Has been cancelled
CI / security-fast (push) Has been cancelled
CI / pnpm-store-warmup (push) Has been cancelled
CI / build-artifacts (push) Has been cancelled
CI / native-i18n (push) Has been cancelled
CI / ${{ matrix.check_name }} (push) Has been cancelled
CI / ${{ matrix.checkName }} (push) Has been cancelled
CI / checks-node-compat-node22 (push) Has been cancelled
CI / check-bundled-channel-config-metadata (push) Has been cancelled
CI / check-dependencies (push) Has been cancelled
CI / check-guards (push) Has been cancelled
CI / check-lint (push) Has been cancelled
CI / check-prod-types (push) Has been cancelled
CI / check-shrinkwrap (push) Has been cancelled
CI / check-test-types (push) Has been cancelled
CI / check-additional-boundaries-a (push) Has been cancelled
CI / check-additional-boundaries-bcd (push) Has been cancelled
CI / check-additional-extension-bundled (push) Has been cancelled
CI / check-additional-extension-channels (push) Has been cancelled
CI / check-additional-extension-package-boundary (push) Has been cancelled
CI / check-additional-runtime-topology-architecture (push) Has been cancelled
CI / check-session-accessor-boundary (push) Has been cancelled
CI / check-session-transcript-reader-boundary (push) Has been cancelled
CI / check-docs (push) Has been cancelled
CI / skills-python (push) Has been cancelled
CI / macos-swift (push) Has been cancelled
CI / ios-build (push) Has been cancelled
CI / ci-timings-summary (push) Has been cancelled
Native App Locale Refresh / Refresh native fa (push) Has been cancelled
Native App Locale Refresh / Refresh native fr (push) Has been cancelled
Native App Locale Refresh / Refresh native hi (push) Has been cancelled
Native App Locale Refresh / Refresh native id (push) Has been cancelled
Native App Locale Refresh / Refresh native it (push) Has been cancelled
Native App Locale Refresh / Refresh native ja-JP (push) Has been cancelled
Control UI Locale Refresh / plan (push) Has been cancelled
Control UI Locale Refresh / Refresh ${{ matrix.locale }} (push) Has been cancelled
Control UI Locale Refresh / Commit control UI locale refresh (push) Has been cancelled
Live Media Runner Image / Build live media runner image (push) Has been cancelled
Native App Locale Refresh / Refresh native ar (push) Has been cancelled
Native App Locale Refresh / Refresh native de (push) Has been cancelled
Native App Locale Refresh / Refresh native es (push) Has been cancelled
Native App Locale Refresh / Refresh native ko (push) Has been cancelled
Native App Locale Refresh / Refresh native nl (push) Has been cancelled
Native App Locale Refresh / Refresh native pl (push) Has been cancelled
Native App Locale Refresh / Refresh native pt-BR (push) Has been cancelled
Native App Locale Refresh / Refresh native ru (push) Has been cancelled
Native App Locale Refresh / Refresh native sv (push) Has been cancelled
Native App Locale Refresh / Refresh native th (push) Has been cancelled
Native App Locale Refresh / Refresh native tr (push) Has been cancelled
Native App Locale Refresh / Refresh native uk (push) Has been cancelled
Native App Locale Refresh / Refresh native vi (push) Has been cancelled
Native App Locale Refresh / Refresh native zh-CN (push) Has been cancelled
Native App Locale Refresh / Refresh native zh-TW (push) Has been cancelled
Native App Locale Refresh / Commit native locale refresh (push) Has been cancelled
Plugin Init Scaffold Validation / Validate provider scaffold (push) Has been cancelled
Plugin NPM Release / preview_plugins_npm (push) Has been cancelled
Plugin NPM Release / Validate release publish approval (push) Has been cancelled
Plugin NPM Release / preview_plugin_pack (push) Has been cancelled
Plugin NPM Release / publish_plugins_npm (push) Has been cancelled
Sandbox Common Smoke / sandbox-common-smoke (push) Has been cancelled
Website Installer Sync / static (push) Has been cancelled
Website Installer Sync / linux-docker (push) Has been cancelled
Website Installer Sync / macos-installer (push) Has been cancelled
Website Installer Sync / windows-installer (push) Has been cancelled
Website Installer Sync / sync-website (push) Has been cancelled
Vendor OpenClaw source as Adolf fork baseline
Adolf is a fork/vendored clone of github.com/openclaw/openclaw (v2026.6.11),
free to diverge. Tree copied sans upstream .git; upstream remote added for
future syncs. Node pinned to 24 (.nvmrc); engines already require >=22.19.
Preserves docs/ARCHITECTURE.md.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LeqyaxJF2nbRXJtae2kNB2
2026-07-05 09:36:54 +00:00

3.6 KiB

OpenClaw Android UI Style Guide

Scope: all native Android UI in apps/android (Jetpack Compose). Goal: one coherent visual system across onboarding, settings, and future screens.

1. Design Direction

  • Clean, quiet surfaces.
  • Strong readability first.
  • One clear primary action per screen state.
  • Progressive disclosure for advanced controls.
  • Deterministic flows: validate early, fail clearly.

2. Style Baseline

The onboarding flow defines the current visual baseline. New screens should match that language unless there is a strong product reason not to.

Baseline traits:

  • Light neutral background with subtle depth.
  • Clear blue accent for active/primary states.
  • Strong border hierarchy for structure.
  • Medium/semibold typography (no thin text).
  • Divider-and-spacing layout over heavy card nesting.

3. Core Tokens

Use these as shared design tokens for new Compose UI.

  • Background gradient: #FFFFFF, #F7F8FA, #EFF1F5
  • Surface: #F6F7FA
  • Border: #E5E7EC
  • Border strong: #D6DAE2
  • Text primary: #17181C
  • Text secondary: #4D5563
  • Text tertiary: #8A92A2
  • Accent primary: #1D5DD8
  • Accent soft: #ECF3FF
  • Success: #2F8C5A
  • Warning: #C8841A

Rule: do not introduce random per-screen colors when an existing token fits.

4. Typography

Primary type family: Manrope (400/500/600/700).

Recommended scale:

  • Display: 34sp / 40sp, bold
  • Section title: 24sp / 30sp, semibold
  • Headline/action: 16sp / 22sp, semibold
  • Body: 15sp / 22sp, medium
  • Callout/helper: 14sp / 20sp, medium
  • Caption 1: 12sp / 16sp, medium
  • Caption 2: 11sp / 14sp, medium

Use monospace only for commands, setup codes, endpoint-like values. Hard rule: avoid ultra-thin weights on light backgrounds.

5. Layout And Spacing

  • Respect safe drawing insets.
  • Keep content hierarchy mostly via spacing + dividers.
  • Prefer vertical rhythm from 8/10/12/14/20dp.
  • Use pinned bottom actions for multi-step or high-importance flows.
  • Avoid unnecessary container nesting.

6. Buttons And Actions

  • Primary action: filled accent button, visually dominant.
  • Secondary action: lower emphasis (outlined/text/surface button).
  • Icon-only buttons must remain legible and >=44dp target.
  • Back buttons in action rows use rounded-square shape, not circular by default.

7. Inputs And Forms

  • Always show explicit label or clear context title.
  • Keep helper copy short and actionable.
  • Validate before advancing steps.
  • Prefer immediate inline errors over hidden failure states.
  • Keep optional advanced fields explicit (Manual, Advanced, etc.).

8. Progress And Multi-Step Flows

  • Use clear step count (Step X of N).
  • Use labeled progress rail/indicator when steps are discrete.
  • Keep navigation predictable: back/next behavior should never surprise.

9. Accessibility

  • Minimum practical touch target: 44dp.
  • Do not rely on color alone for status.
  • Preserve high contrast for all text tiers.
  • Add meaningful contentDescription for icon-only controls.

10. Architecture Rules

  • Durable UI state in MainViewModel.
  • Composables: state in, callbacks out.
  • No business/network logic in composables.
  • Keep side effects explicit (LaunchedEffect, activity result APIs).

11. Source Of Truth

  • app/src/main/java/ai/openclaw/android/ui/OpenClawTheme.kt
  • app/src/main/java/ai/openclaw/android/ui/OnboardingFlow.kt
  • app/src/main/java/ai/openclaw/android/ui/RootScreen.kt
  • app/src/main/java/ai/openclaw/android/ui/SettingsSheet.kt
  • app/src/main/java/ai/openclaw/android/MainViewModel.kt

If style and implementation diverge, update both in the same change.