Material 3 UI Build and Compliance Review

ANDROID SETTINGS SCREEN - MATERIAL 3 SPEC

Color System (Tonal):
• Primary: Color.onSurface (dark mode), Color.primary (light mode)
• Surface: Color.surface with tonal elevation +1
• Outline: Color.outline for dividers/borders

Component Tokens:

HEADER SECTION (Settings Category)
   Component: MaterialTopAppBar
   Style: centerAligned, headline/medium typography
   Background: Color.surface
   Elevation: 0dp (flat)

TOGGLE SETTINGS (e.g., "Dark Mode")
   Component: Switch (Material 3 variant)
   Spacing: 16dp padding, 56dp min height (touch target)
   Label: Body/large typography, left-aligned
   Layout: Row with icon-20dp on left

RADIO GROUP (e.g., "Sync Frequency")
   Component: RadioButton
   Spacing: 56dp height per option, 16dp padding
   Typography: Body/medium
   State: Handle selected vs unselected (color.primary vs color.outline)

DROPDOWN (e.g., "Theme")
   Component: ExposedDropdownMenuBox
   Style: Outlined variant, corner radius 12dp
   Spacing: 48dp height minimum
   Focus state: Color.primary outline

DIVIDERS BETWEEN SECTIONS
   Component: Divider
   Color: Color.surfaceVariant
   Height: 1dp
   Padding: 16dp horizontal

TYPOGRAPHY HIERARCHY
   Section title: Label/large, color.onSurface (99%)
   Setting label: Body/medium, color.onSurface
   Helper text: Label/small, color.onSurfaceVariant

CORNER RADIUS DEFAULTS
   Large components (cards): 28dp
   Buttons/inputs: 12dp
   Small elements: 8dp

Sample Output (Kotlin):
   Surface(modifier = Modifier.fillMaxWidth(), color = Color.surface) {
     Row(modifier = Modifier.padding(16.dp), verticalAlignment = CenterVertically) {
       Text("Dark Mode", style = MaterialTheme.typography.bodyMedium)
       Spacer(Modifier.weight(1f))
       Switch(checked = isDarkMode, onCheckedChange = { /* */ })
     }
   }

Key Material 3 Patterns:
• Use M3 Color.system for theming, not hardcoded hex
• All touch targets minimum 48x48dp
• No drop shadows; use tonal elevation only
• Spacing in multiples of 4dp or 8dp