Mobile Design Standards

Field Details
Status ACTIVE
Last Updated 12-05-2026

Purpose

Ensure mobile applications provide a consistent, responsive, accessible, and user-friendly experience across different devices and platforms.

Scope

Applies to: e.g. All mobile applications / All new code after 2026-05-12

Does not apply to: e.g. Legacy code, third-party libraries

Support Different Screen Sizes

UI must work across all devices

Bad:

width: 400


Preferred:

width: '100%'

Respect Safe Areas

Ensure UI does not overlap:

iPhone notch, Dynamic island, Android status bar.

Use:

SafeAreaView

Keyboard Handling

Input fields should remain visible when keyboard opens.

Use:

KeyboardAvoidingView

Loading States Are Mandatory

Never leave users staring at blank screens.

Examples:

- Skeleton loaders
- Activity indicators
- Progress bars

Use Centralized Styling

Avoid writing random styles throughout the app.

Preferred structure:

/theme
  colors.ts
  spacing.ts
  typography.ts
  themes.ts

/styles
  commonStyles.ts

Prefer StyleSheet.create

Avoid writing random styles throughout the app.

Bad:

<View style={{ padding: 10, backgroundColor: 'red' }} />

Preferred:

const styles = StyleSheet.create({
  container: {
    padding: 10,
    backgroundColor: COLORS.error,
  },
});

Avoid Hardcoded Values

Bad:

color: '#FF0000'
marginTop: 17
fontSize: 15

Preferred:

color: COLORS.primary
marginTop: SPACING.md
fontSize: FONT_SIZE.body

Apps Should Support Theme System Properly

Avoid manually checking colors everywhere.

Bad:

backgroundColor: isDark ? '#000' : '#FFF'

Preferred:

backgroundColor: theme.background

Exceptions

No exceptions

  • N/A

Changelog

Version Date Author Change
1.0.0 2026-05-12 Appu S Palathinkal Initial version