# SORA App UI Implementation Review

Updated: 2026-08-26

This document is implementation input for designers, product owners, and app engineers. Treat every item under **Spec conflicts** as an open decision. Do not invent or silently choose a value.

## Scope

- Platforms: Android and iOS
- Current implementation target: Android XML + ViewBinding (no Compose)
- Languages: English and Chinese
- Orientation: portrait phones only
- Fonts: production font files will be provided
- Existing projects: use as functional references only; do not reuse their visual styles

Android and iOS use the same visual specification and component semantics. Resource systems, accessibility, touch targets, safe areas, and system UI are implemented per platform.

## Current assessment

- **Ready:** Theme tokens and initial component structure
- **Conflicting:** Component dimensions between Figma and the Style Guide
- **Missing:** Production fonts and assets, complete component states, and responsive layout rules

Theme work and component scaffolding can start. Final visual sign-off should wait until the conflicts and missing inputs below are resolved.

## Source usage

- **Figma:** Screen composition, component appearance, geometry, and visual sign-off
- **Style Guide:** Semantic tokens, typography, spacing, radii, control sizes, and motion
- **Interactive mock:** Core flows and state changes only; excluded from exact specification comparisons
- **Platform guidance:** System UI, permissions, navigation behavior, keyboard handling, and safe areas

## Ready to use

### Shared design inputs

- Semantic color roles with Light and Dark modes
- Typography hierarchy
- Spacing, radii, and control sizes
- Motion timing
- Most visual component variants

### Android XML first pass

- Theme attributes and day/night resources
- Text appearances, dimensions, and drawables
- Initial views for buttons, inputs, settings rows, headers, and related components
- String resources for all user-facing text

## Spec conflicts

Only exact values in Figma and the Style Guide are compared in this section. The interactive mock is a flow reference, not a specification source.

| Item | Current versions | Decision needed |
|---|---|---|
| Collapsing Header | Figma: `320→280`; Style Guide: `350→280` | Expanded and collapsed heights for each header state |
| Feature Tile | Figma: `171×103`; Style Guide: `166×104` | Fixed dimensions or responsive two-column width |
| OTP Code Cell | Figma: `50×62`; Style Guide: `50×60` | Final outer height |
| Segmented Control | Figma: `236×40.5`; Style Guide: `236×40` | Whether `0.5` is intentional or a stroke/pixel-grid artifact |

Related Figma nodes:

- [Header 403:153443](https://www.figma.com/design/hUa607IJpngrsaiYkQ2XBx/Sora-App?node-id=403-153443&p=f&m=dev)
- [Feature Tile 403:151827](https://www.figma.com/design/hUa607IJpngrsaiYkQ2XBx/Sora-App?node-id=403-151827&p=f&m=dev)
- [OTP Code Cell 403:151326](https://www.figma.com/design/hUa607IJpngrsaiYkQ2XBx/Sora-App?node-id=403-151326&p=f&m=dev)
- [Segmented Control 403:151450](https://www.figma.com/design/hUa607IJpngrsaiYkQ2XBx/Sora-App?node-id=403-151450&p=f&m=dev)

## Inputs needed for component sign-off

| Area | Input needed |
|---|---|
| Typography | Production font files, supported weights, embedding licenses, and Traditional/Simplified Chinese fallback |
| Assets | Source vectors, tint rules, naming, crop, transparency, and dark-mode usage |
| Component states | Pressed, disabled, loading, error, and selected states |
| Localization | Final Chinese scope, long-copy examples, maximum lines, truncation, and large-font behavior |
| Effects | Identification of shadows used in product UI and any shared effect tokens |
| Layout | Responsive widths beyond the 390-point reference frame and the relationship between visual size and touch target |

## Outside this review

The full-app implementation still needs separate specifications for navigation, sign-in and account behavior, APIs, BLE, permissions, persistence, offline behavior, error recovery, product copy, acceptance criteria, test environments, and representative data.

The interactive mock supports review of the main path and state sequence. Formal behavior and data contracts are still required for feature integration.

## Source links

- [Figma Ready for Dev](https://www.figma.com/design/hUa607IJpngrsaiYkQ2XBx/Sora-App?node-id=290-18528&p=f&m=dev)
- [Style Guide](https://sora-tester.vercel.app/style-guide-zh.html)
- [Interactive mock](https://sora-tester.vercel.app/)