No,Category,Pattern,Description,Do,Don't,iOS_Value,Flutter_Equiv,RN_Equiv,Severity,Docs_URL
1,Colors,systemBlue,Primary interactive color for tappable elements and links,Use for primary actions and interactive elements,Hardcode hex values that don't adapt to dark mode,Color(.systemBlue),CupertinoColors.systemBlue.resolveFrom(context),PlatformColor('systemBlue'),High,https://developer.apple.com/design/human-interface-guidelines/color
2,Colors,systemGreen,Success states and positive actions,Use for confirmations and success indicators,Use for destructive actions,Color(.systemGreen),CupertinoColors.systemGreen.resolveFrom(context),PlatformColor('systemGreen'),High,https://developer.apple.com/design/human-interface-guidelines/color
3,Colors,systemRed,Destructive actions and error states,Use for delete buttons and error messages,Use for non-destructive primary actions,Color(.systemRed),CupertinoColors.destructiveRed.resolveFrom(context),PlatformColor('systemRed'),High,https://developer.apple.com/design/human-interface-guidelines/color
4,Colors,systemOrange,Warning states and attention-grabbing elements,Use for warnings and notifications requiring attention,Overuse as it can cause visual fatigue,Color(.systemOrange),CupertinoColors.systemOrange.resolveFrom(context),PlatformColor('systemOrange'),Medium,https://developer.apple.com/design/human-interface-guidelines/color
5,Colors,systemYellow,Caution indicators and highlights,Use for starred or favorited items,Use for text on light backgrounds due to low contrast,Color(.systemYellow),CupertinoColors.systemYellow.resolveFrom(context),PlatformColor('systemYellow'),Medium,https://developer.apple.com/design/human-interface-guidelines/color
6,Colors,systemPink,Accent color for health and lifestyle apps,Use as accent in appropriate contexts,Use as primary action color in business apps,Color(.systemPink),CupertinoColors.systemPink.resolveFrom(context),PlatformColor('systemPink'),Low,https://developer.apple.com/design/human-interface-guidelines/color
7,Colors,systemPurple,Creative and premium feature indicators,Use for creative tools and premium badges,Overuse in utilitarian interfaces,Color(.systemPurple),CupertinoColors.systemPurple.resolveFrom(context),PlatformColor('systemPurple'),Low,https://developer.apple.com/design/human-interface-guidelines/color
8,Colors,systemTeal,Secondary interactive elements,Use for secondary actions and info states,Confuse with systemBlue for primary actions,Color(.systemTeal),CupertinoColors.systemTeal.resolveFrom(context),PlatformColor('systemTeal'),Medium,https://developer.apple.com/design/human-interface-guidelines/color
9,Colors,systemBackground,Primary background adapting to light/dark mode,Use as the main view background,Use hardcoded #FFFFFF or #000000,Color(.systemBackground),CupertinoColors.systemBackground.resolveFrom(context),PlatformColor('systemBackground'),High,https://developer.apple.com/design/human-interface-guidelines/color
10,Colors,secondarySystemBackground,Grouped content and card backgrounds,Use for cards and elevated content areas,Use for primary backgrounds,Color(.secondarySystemBackground),CupertinoColors.secondarySystemBackground.resolveFrom(context),PlatformColor('secondarySystemBackground'),High,https://developer.apple.com/design/human-interface-guidelines/color
11,Colors,label,Primary text color adapting to appearance,Use for all primary text content,Use gray or custom colors for main text,Color(.label),CupertinoColors.label.resolveFrom(context),PlatformColor('label'),High,https://developer.apple.com/design/human-interface-guidelines/color
12,Colors,secondaryLabel,Secondary text like subtitles and captions,Use for supplementary text information,Use for primary content or CTAs,Color(.secondaryLabel),CupertinoColors.secondaryLabel.resolveFrom(context),PlatformColor('secondaryLabel'),High,https://developer.apple.com/design/human-interface-guidelines/color
13,Colors,tertiaryLabel,Tertiary text for disabled or placeholder states,Use for placeholder text and disabled labels,Use for important readable content,Color(.tertiaryLabel),CupertinoColors.tertiaryLabel.resolveFrom(context),PlatformColor('tertiaryLabel'),Medium,https://developer.apple.com/design/human-interface-guidelines/color
14,Colors,separator,Thin lines between list items and sections,Use for visual separation between content,Use thick or prominent lines,Color(.separator),CupertinoColors.separator.resolveFrom(context),PlatformColor('separator'),Medium,https://developer.apple.com/design/human-interface-guidelines/color
15,Colors,groupedBackground,Background for grouped table views,Use as background for inset grouped lists,Use for non-grouped content areas,Color(.systemGroupedBackground),CupertinoColors.systemGroupedBackground.resolveFrom(context),PlatformColor('systemGroupedBackground'),Medium,https://developer.apple.com/design/human-interface-guidelines/color
16,Typography,largeTitle,Large prominent titles at 34pt for top-level views,Use at the top of main screens with large title navigation,Use in body content or nested views,.font(.largeTitle),TextStyle(fontSize: 34 fontWeight: FontWeight.w400),{ fontSize: 34 fontWeight: '400' },High,https://developer.apple.com/design/human-interface-guidelines/typography
17,Typography,title1,Primary title at 28pt for section headers,Use for major section headings,Use for body text or small labels,.font(.title),TextStyle(fontSize: 28 fontWeight: FontWeight.w400),{ fontSize: 28 fontWeight: '400' },High,https://developer.apple.com/design/human-interface-guidelines/typography
18,Typography,title2,Secondary title at 22pt for subsections,Use for card titles and secondary headings,Use for primary navigation titles,.font(.title2),TextStyle(fontSize: 22 fontWeight: FontWeight.w400),{ fontSize: 22 fontWeight: '400' },High,https://developer.apple.com/design/human-interface-guidelines/typography
19,Typography,title3,Tertiary title at 20pt for smaller headings,Use for list section headers and minor titles,Use for body content,.font(.title3),TextStyle(fontSize: 20 fontWeight: FontWeight.w400),{ fontSize: 20 fontWeight: '400' },Medium,https://developer.apple.com/design/human-interface-guidelines/typography
20,Typography,headline,Emphasized text at 17pt semibold,Use for list item titles and emphasized content,Use for long-form text,.font(.headline),TextStyle(fontSize: 17 fontWeight: FontWeight.w600),{ fontSize: 17 fontWeight: '600' },High,https://developer.apple.com/design/human-interface-guidelines/typography
21,Typography,body,Standard readable text at 17pt regular,Use for all main body content and descriptions,Use for titles or headings,.font(.body),TextStyle(fontSize: 17 fontWeight: FontWeight.w400),{ fontSize: 17 fontWeight: '400' },High,https://developer.apple.com/design/human-interface-guidelines/typography
22,Typography,callout,Supporting text at 16pt,Use for captions accompanying main content,Use as primary text style,.font(.callout),TextStyle(fontSize: 16 fontWeight: FontWeight.w400),{ fontSize: 16 fontWeight: '400' },Medium,https://developer.apple.com/design/human-interface-guidelines/typography
23,Typography,subheadline,Smaller heading text at 15pt,Use for secondary information and subtitles,Use for primary headings,.font(.subheadline),TextStyle(fontSize: 15 fontWeight: FontWeight.w400),{ fontSize: 15 fontWeight: '400' },Medium,https://developer.apple.com/design/human-interface-guidelines/typography
24,Typography,footnote,Small informational text at 13pt,Use for timestamps and metadata,Use for primary content,.font(.footnote),TextStyle(fontSize: 13 fontWeight: FontWeight.w400),{ fontSize: 13 fontWeight: '400' },Medium,https://developer.apple.com/design/human-interface-guidelines/typography
25,Typography,caption1,Small caption text at 12pt (base size - scales with Dynamic Type),Use for labels and annotations,Use for readable body content,.font(.caption),TextStyle(fontSize: 12 fontWeight: FontWeight.w400),{ fontSize: 12 fontWeight: '400' },Medium,https://developer.apple.com/design/human-interface-guidelines/typography
26,Typography,caption2,Smallest text at 11pt (base size - scales with Dynamic Type),Use for legal text and very minor labels,Use for any content users need to read easily,.font(.caption2),TextStyle(fontSize: 11 fontWeight: FontWeight.w400),{ fontSize: 11 fontWeight: '400' },Low,https://developer.apple.com/design/human-interface-guidelines/typography
27,Typography,dynamicType,Support for user-preferred text sizes,Implement Dynamic Type for all text elements,Use fixed font sizes that ignore user preferences,@ScaledMetric var fontSize: CGFloat,MediaQuery.textScaleFactorOf(context),PixelRatio.getFontScale(),High,https://developer.apple.com/design/human-interface-guidelines/typography
28,Spacing,spacing-4,Minimal spacing for tight layouts,Use between related inline elements,Use as primary spacing between sections,4,4.0,4,Medium,https://developer.apple.com/design/human-interface-guidelines/layout
29,Spacing,spacing-8,Standard small spacing,Use for padding within compact components,Use for large content separation,8,8.0,8,Medium,https://developer.apple.com/design/human-interface-guidelines/layout
30,Spacing,spacing-12,Medium-small spacing,Use for list item vertical padding,Use inconsistently with other spacing values,12,12.0,12,Medium,https://developer.apple.com/design/human-interface-guidelines/layout
31,Spacing,spacing-16,Standard content spacing and margins,Use for leading/trailing margins and section spacing,Use values like 15 or 17 that break the grid,16,16.0,16,High,https://developer.apple.com/design/human-interface-guidelines/layout
32,Spacing,spacing-24,Large spacing for visual hierarchy,Use between major content sections,Use for tight inline spacing,24,24.0,24,Medium,https://developer.apple.com/design/human-interface-guidelines/layout
33,Spacing,spacing-32,Extra large spacing,Use to separate distinct content groups,Overuse creating excessive whitespace,32,32.0,32,Medium,https://developer.apple.com/design/human-interface-guidelines/layout
34,Spacing,spacing-48,Major section separation,Use between completely different content areas,Use within related content groups,48,48.0,48,Low,https://developer.apple.com/design/human-interface-guidelines/layout
35,Spacing,spacing-64,Maximum spacing for dramatic separation,Use for hero sections and major breaks,Use in content-dense interfaces,64,64.0,64,Low,https://developer.apple.com/design/human-interface-guidelines/layout
36,Spacing,safeAreaInsets,Device-specific safe areas for notch and home indicator,Respect safe area insets for all edge content,Place interactive content in unsafe areas,.safeAreaInset() / GeometryReader,SafeArea.of(context) / MediaQuery.padding,SafeAreaView / useSafeAreaInsets(),High,https://developer.apple.com/design/human-interface-guidelines/layout
37,Spacing,hitTarget-44,Minimum 44x44pt touch target size,Ensure all interactive elements meet minimum size,Create touch targets smaller than 44pt,.frame(minWidth: 44 minHeight: 44),SizedBox(width: 44 height: 44),{ minWidth: 44 minHeight: 44 },High,https://developer.apple.com/design/human-interface-guidelines/accessibility
38,Components,roundedButton,Standard rounded rectangle button style,Use for primary and secondary actions with clear labels,Use without sufficient padding or contrast,Button { } .buttonStyle(.bordered),CupertinoButton(child: Text('Label') onPressed: () {}),<Pressable style={{ borderRadius: 8 }}>,High,https://developer.apple.com/design/human-interface-guidelines/buttons
39,Components,filledButton,Prominent filled button for primary actions,Use for the single most important action on screen,Use multiple filled buttons competing for attention,Button { } .buttonStyle(.borderedProminent),CupertinoButton.filled(child: Text('Label') onPressed: () {}),<Pressable style={{ backgroundColor: '#007AFF' }}>,High,https://developer.apple.com/design/human-interface-guidelines/buttons
40,Components,borderlessButton,Text-only button for tertiary actions,Use for less prominent actions and links,Use for primary actions that need emphasis,Button { } .buttonStyle(.borderless),CupertinoButton(child: Text('Label') padding: EdgeInsets.zero onPressed: () {}),<Pressable><Text style={{ color: '#007AFF' }}>,Medium,https://developer.apple.com/design/human-interface-guidelines/buttons
41,Components,toggle,On/off switch for binary settings,Use for settings that take effect immediately,Use for actions requiring confirmation first,Toggle(isOn: $value) { },CupertinoSwitch(value: value onChanged: (v) {}),<Switch value={value} onValueChange={setValue} />,High,https://developer.apple.com/design/human-interface-guidelines/toggles
42,Components,slider,Value selection along a continuous range,Use with clear min/max indicators and current value,Use for precise numeric input requiring exact values,Slider(value: $value in: 0...100),CupertinoSlider(value: value onChanged: (v) {}),<Slider value={value} onValueChange={setValue} />,Medium,https://developer.apple.com/design/human-interface-guidelines/sliders
43,Components,stepper,Increment/decrement for small numeric values,Use for quantities with reasonable bounds,Use for large number ranges or precise values,Stepper(value: $count in: 0...10),Row(children: [IconButton() Text() IconButton()]),<View><Pressable /><Text /><Pressable /></View>,Medium,https://developer.apple.com/design/human-interface-guidelines/steppers
44,Components,segmentedControl,Mutually exclusive options in a horizontal bar,Use for 2-5 related options of equal importance,Use for more than 5 options or navigation,Picker { } .pickerStyle(.segmented),CupertinoSlidingSegmentedControl(children: {} onValueChanged: (v) {}),<SegmentedButtons> (custom implementation),High,https://developer.apple.com/design/human-interface-guidelines/segmented-controls
45,Components,picker,Selection from a scrolling wheel interface,Use for date/time and bounded value selection,Use for long lists better suited to search,Picker { } .pickerStyle(.wheel),CupertinoPicker(children: [] onSelectedItemChanged: (i) {}),<Picker selectedValue={value} onValueChange={setValue}>,Medium,https://developer.apple.com/design/human-interface-guidelines/pickers
46,Components,datePicker,Date and time selection with native iOS wheel,Use for date/time input with appropriate granularity,Force users to type dates manually,DatePicker(selection: $date),CupertinoDatePicker(onDateTimeChanged: (d) {}),<DateTimePicker value={date} onChange={setDate} />,High,https://developer.apple.com/design/human-interface-guidelines/date-pickers
47,Components,textField,Single-line text input with iOS styling,Use with clear placeholder text and proper keyboard type,Use without appropriate input validation,TextField(text: $text),CupertinoTextField(placeholder: 'Enter text'),<TextInput placeholder="Enter text" />,High,https://developer.apple.com/design/human-interface-guidelines/text-fields
48,Components,searchBar,Text input optimized for search queries,Place prominently at top of searchable content,Hide or minimize in search-heavy interfaces,SearchBar(text: $searchText),CupertinoSearchTextField(onChanged: (s) {}),<SearchBar placeholder="Search" />,High,https://developer.apple.com/design/human-interface-guidelines/search-fields
49,Components,listCell,Standard list row with disclosure indicator,Use consistent cell heights and disclosure indicators,Mix different cell styles inconsistently in one list,List { ForEach { Text() } },CupertinoListTile(title: Text('Title') trailing: Icon()),<Pressable style={styles.listCell}>,High,https://developer.apple.com/design/human-interface-guidelines/lists-and-tables
50,Components,groupedList,Inset grouped list with rounded corners,Use for settings and form-style interfaces,Use for long scrolling content lists,List { } .listStyle(.insetGrouped),CupertinoListSection.insetGrouped(children: []),<SectionList sections={sections} />,High,https://developer.apple.com/design/human-interface-guidelines/lists-and-tables
51,Components,progressIndicator,Determinate progress bar for known durations,Show progress percentage when task duration is known,Use for tasks with unknown duration,ProgressView(value: progress),CupertinoActivityIndicator() or LinearProgressIndicator(),<ProgressBar progress={value} />,Medium,https://developer.apple.com/design/human-interface-guidelines/progress-indicators
52,Components,activityIndicator,Spinning indicator for indeterminate loading,Use when task duration is unknown,Use for tasks where progress can be calculated,ProgressView().progressViewStyle(.circular),CupertinoActivityIndicator(),<ActivityIndicator />,Medium,https://developer.apple.com/design/human-interface-guidelines/progress-indicators
53,Navigation,tabBar,Bottom navigation for 3-5 top-level destinations,Use for primary app navigation with clear icons and labels,Use more than 5 tabs or hide labels,TabView { }.tabViewStyle(.tabBarOnly),CupertinoTabBar(items: [] onTap: (i) {}),<Tab.Navigator tabBar={props => <BottomTabBar />}>,High,https://developer.apple.com/design/human-interface-guidelines/tab-bars
54,Navigation,navigationBar,Top bar with title and navigation controls,Include back button and contextual actions,Overcrowd with too many buttons,NavigationStack { NavigationLink { } },CupertinoNavigationBar(middle: Text('Title')),<Stack.Navigator screenOptions={{ headerShown: true }}>,High,https://developer.apple.com/design/human-interface-guidelines/navigation-bars
55,Navigation,largeTitles,Large collapsing titles for top-level views,Use for primary views that scroll,Use in detail views or sheets,.navigationBarTitleDisplayMode(.large),CupertinoSliverNavigationBar(largeTitle: Text('Title')),headerLargeTitle: true in Stack.Screen options,High,https://developer.apple.com/design/human-interface-guidelines/navigation-bars
56,Navigation,sheet,Modal presentation sliding from bottom,Use for focused tasks that can be dismissed,Use for primary navigation paths,.sheet(isPresented: $show) { },showCupertinoModalPopup(context: context builder: (c) {}),<BottomSheet isVisible={show}>,High,https://developer.apple.com/design/human-interface-guidelines/sheets
57,Navigation,fullScreenCover,Full screen modal for immersive experiences,Use for content requiring full attention,Use for simple confirmations or forms,.fullScreenCover(isPresented: $show) { },Navigator.push(context CupertinoPageRoute(builder: (c) {})),<Modal visible={show} presentationStyle="fullScreen">,Medium,https://developer.apple.com/design/human-interface-guidelines/modality
58,Navigation,popover,Floating content anchored to a source element,Use on iPad for contextual information,Use on iPhone where sheets are preferred,.popover(isPresented: $show) { },showCupertinoModalPopup with custom positioning,Popover component (custom implementation),Medium,https://developer.apple.com/design/human-interface-guidelines/popovers
59,Navigation,alert,System-styled alert for important messages,Use for critical confirmations and errors,Overuse for non-critical information,.alert(title isPresented: $show) { },showCupertinoDialog(context: context builder: (c) {}),Alert.alert('Title' 'Message' buttons),High,https://developer.apple.com/design/human-interface-guidelines/alerts
60,Navigation,confirmationDialog,Action sheet for multiple choices,Use for destructive action confirmation with alternatives,Use for simple yes/no confirmations,.confirmationDialog(title isPresented: $show) { },showCupertinoModalPopup with CupertinoActionSheet,ActionSheetIOS.showActionSheetWithOptions(),High,https://developer.apple.com/design/human-interface-guidelines/action-sheets
61,Navigation,pageControl,Dots indicating current page in horizontal scroll,Use for onboarding and image carousels,Use for more than 10 pages,TabView { }.tabViewStyle(.page),PageView with DotsIndicator,<FlatList pagingEnabled /> with custom dots,Medium,https://developer.apple.com/design/human-interface-guidelines/page-controls
62,Navigation,toolbar,Action buttons at bottom of screen,Use for contextual actions on current content,Duplicate actions already in navigation bar,.toolbar { ToolbarItem { } },CupertinoNavigationBar bottom or custom Toolbar,<View style={styles.toolbar}>,Medium,https://developer.apple.com/design/human-interface-guidelines/toolbars
63,Gestures,tap,Single touch for primary interactions,Respond immediately to single taps on interactive elements,Require multiple taps for simple actions,.onTapGesture { },GestureDetector(onTap: () {}),<Pressable onPress={handlePress}>,High,https://developer.apple.com/design/human-interface-guidelines/gestures
64,Gestures,doubleTap,Two quick taps for secondary actions,Use for zoom or like actions as enhancement,Require double tap for primary functionality,.onTapGesture(count: 2) { },GestureDetector(onDoubleTap: () {}),<TapGestureHandler numberOfTaps={2}>,Medium,https://developer.apple.com/design/human-interface-guidelines/gestures
65,Gestures,longPress,Extended press for contextual menus,Use to reveal additional options or preview,Use as only way to access important features,.onLongPressGesture { },GestureDetector(onLongPress: () {}),<Pressable onLongPress={handleLongPress}>,Medium,https://developer.apple.com/design/human-interface-guidelines/gestures
66,Gestures,swipe,Horizontal gesture for navigation or actions,Use for back navigation and quick actions,Override system back swipe gesture,.swipeActions { },Dismissible(child: widget onDismissed: (d) {}),Swipeable from react-native-gesture-handler,High,https://developer.apple.com/design/human-interface-guidelines/gestures
67,Gestures,swipeActions,Contextual actions revealed by swiping list rows,Provide undo for destructive swipe actions,Hide critical functionality only in swipe actions,.swipeActions(edge: .trailing) { },Slidable with ActionPane,<Swipeable renderRightActions={renderActions}>,Medium,https://developer.apple.com/design/human-interface-guidelines/gestures
68,Gestures,pan,Continuous drag for moving or positioning,Provide visual feedback during drag operations,Allow panning through interactive elements,.gesture(DragGesture()),GestureDetector(onPanUpdate: (d) {}),<PanGestureHandler onGestureEvent={handler}>,Medium,https://developer.apple.com/design/human-interface-guidelines/gestures
69,Gestures,pinch,Two-finger gesture for zooming,Support pinch zoom on images and maps,Use pinch for non-zoom interactions,.gesture(MagnificationGesture()),GestureDetector(onScaleUpdate: (d) {}),<PinchGestureHandler onGestureEvent={handler}>,Medium,https://developer.apple.com/design/human-interface-guidelines/gestures
70,Gestures,rotation,Two-finger rotation gesture,Use for rotating objects in creative apps,Require rotation for basic functionality,.gesture(RotationGesture()),GestureDetector(onScaleUpdate with rotation),<RotationGestureHandler onGestureEvent={handler}>,Low,https://developer.apple.com/design/human-interface-guidelines/gestures
71,Gestures,hapticFeedback,Tactile feedback for user actions,Use light impact for UI feedback and heavy for significant actions,Overuse haptics causing fatigue,UIImpactFeedbackGenerator(style: .medium).impactOccurred(),HapticFeedback.lightImpact(),Haptics.impactAsync(ImpactFeedbackStyle.Medium),Medium,https://developer.apple.com/design/human-interface-guidelines/playing-haptics
72,Gestures,scrollViewPhysics,Bounce and momentum scrolling behavior,Preserve iOS scroll physics and rubber banding,Disable bounce or use non-native scroll behavior,ScrollView { }.scrollBounceBehavior(.always),BouncingScrollPhysics(),<ScrollView bounces={true}>,High,https://developer.apple.com/design/human-interface-guidelines/gestures
73,Animation,springAnimation,Custom bouncy spring animation (Apple defaults: response 0.55 dampingFraction 1.0 for critically damped),Use for UI transitions and interactive animations. Note: example uses bouncy values (0.5/0.7) - Apple defaults are response 0.55 dampingFraction 1.0 (critically damped),Use linear animations for UI elements,withAnimation(.spring(response: 0.5 dampingFraction: 0.7)),CupertinoPageTransitionsBuilder or spring curves,Animated.spring(value { toValue useNativeDriver: true }),High,https://developer.apple.com/design/human-interface-guidelines/motion
74,Animation,easeInOut,Smooth acceleration and deceleration,Use for elements entering and exiting together,Use for elements that need to feel interactive,withAnimation(.easeInOut(duration: 0.3)),Curves.easeInOut with AnimatedContainer,Animated.timing(value { easing: Easing.inOut(Easing.ease) }),Medium,https://developer.apple.com/design/human-interface-guidelines/motion
75,Animation,easeIn,Gradual start with quick end,Use for elements exiting the screen,Use for elements entering the screen,withAnimation(.easeIn(duration: 0.3)),Curves.easeIn,Animated.timing(value { easing: Easing.in(Easing.ease) }),Medium,https://developer.apple.com/design/human-interface-guidelines/motion
76,Animation,easeOut,Quick start with gradual end,Use for elements entering the screen,Use for elements exiting the screen,withAnimation(.easeOut(duration: 0.3)),Curves.easeOut,Animated.timing(value { easing: Easing.out(Easing.ease) }),Medium,https://developer.apple.com/design/human-interface-guidelines/motion
77,Animation,reducedMotion,Respect user's reduced motion preference,Provide alternative non-animated transitions,Ignore accessibility motion preferences,@Environment(\.accessibilityReduceMotion),MediaQuery.disableAnimationsOf(context),AccessibilityInfo.isReduceMotionEnabled(),High,https://developer.apple.com/design/human-interface-guidelines/motion
78,Animation,interactiveSpring,Responsive spring for gesture-driven animations,Use for drag and interactive transitions,Use slow animations for interactive gestures,withAnimation(.interactiveSpring()),SpringSimulation with custom parameters,Animated.spring with low friction,Medium,https://developer.apple.com/design/human-interface-guidelines/motion
79,Animation,implicitAnimation,Automatic animation when state changes,Use for simple property changes,Use for complex multi-step animations,withAnimation { state = newValue },AnimatedContainer or implicit animation widgets,LayoutAnimation.configureNext(),Medium,https://developer.apple.com/design/human-interface-guidelines/motion
80,Animation,transitionAnimation,View transition animations for navigation,Match system transition styles for consistency,Create jarring or unexpected transitions,.transition(.slide),CupertinoPageRoute for native transitions,cardStyleInterpolator in Stack.Navigator,High,https://developer.apple.com/design/human-interface-guidelines/motion
81,Icons,sfSymbolSizing,SF Symbol size variants for different contexts,Use appropriate size: small (17pt) medium (22pt) large (28pt),Use inconsistent icon sizes within same context,Image(systemName: name).imageScale(.medium),Icon(CupertinoIcons.name size: 22),<Icon name="name" size={22} />,Medium,https://developer.apple.com/design/human-interface-guidelines/sf-symbols
82,Icons,sfSymbolWeight,Symbol weight matching text weight,Match symbol weight to accompanying text weight,Mix heavy symbols with light text,Image(systemName: name).fontWeight(.regular),Icon with appropriate font weight styling,Icon with fontWeight style property,Medium,https://developer.apple.com/design/human-interface-guidelines/sf-symbols
83,Icons,sfSymbolRendering,Rendering modes: monochrome hierarchical palette multicolor,Use hierarchical for depth and multicolor for meaning,Use multicolor when monochrome conveys meaning better,Image(systemName: name).symbolRenderingMode(.hierarchical),CupertinoIcons or custom SVG with colors,Custom SVG rendering or icon libraries,Low,https://developer.apple.com/design/human-interface-guidelines/sf-symbols
84,Icons,iconWithLabel,Icon paired with text label,Always pair toolbar icons with labels for accessibility,Use icon-only buttons without accessibility labels,Label(title: { Text() } icon: { Image() }),Row(children: [Icon() SizedBox(width: 4) Text()]),<View style={styles.row}><Icon /><Text /></View>,High,https://developer.apple.com/design/human-interface-guidelines/sf-symbols
85,Icons,iconOnly,Standalone icon without visible label,Provide accessibility label for VoiceOver,Ship icon-only buttons without accessibility support,Image(systemName: name).accessibilityLabel(Text('Description')),Semantics(label: 'Description' child: Icon()),accessibilityLabel="Description" on icon element,High,https://developer.apple.com/design/human-interface-guidelines/accessibility
86,Icons,iconColor,Icon coloring following semantic colors,Use semantic colors that adapt to dark mode,Hardcode icon colors that don't adapt,Image(systemName: name).foregroundStyle(.secondary),Icon(color: CupertinoColors.secondaryLabel),<Icon color={PlatformColor('secondaryLabel')} />,Medium,https://developer.apple.com/design/human-interface-guidelines/color
87,Icons,customIconGuidelines,Guidelines for custom app icons,Follow SF Symbol design principles for consistency,Create icons that clash with system icon style,Custom SF Symbol or SVG matching Apple guidelines,Custom icons matching CupertinoIcons style,Custom SVG icons with consistent styling,Medium,https://developer.apple.com/design/human-interface-guidelines/app-icons
88,Icons,lucideAlternative,Mapping Lucide icons to SF Symbol equivalents,Use SF Symbols on iOS for native feel and accessibility,Use web icon libraries without iOS adaptations,Use SF Symbol equivalent where available,CupertinoIcons mapping or custom icons,Platform-specific icon selection,Medium,https://developer.apple.com/sf-symbols/
89,Layout,sizeClasses,Adaptive layouts for compact and regular widths,Adapt UI based on horizontal and vertical size classes,Show same layout on iPhone and iPad,@Environment(\.horizontalSizeClass),MediaQuery.of(context).size.width breakpoints,useWindowDimensions() with breakpoint logic,High,https://developer.apple.com/design/human-interface-guidelines/layout
90,Layout,splitView,Two-column layout for iPad and large screens,Use master-detail pattern for navigation lists,Force split view on compact width devices,NavigationSplitView { } detail: { },Row with NavigationRail and content area,DrawerLayoutAndroid or custom split view,High,https://developer.apple.com/design/human-interface-guidelines/sidebars
91,Layout,masterDetail,List selection revealing detail content,Maintain selection state and show empty states,Navigate away from list without showing detail,NavigationSplitView with selection binding,Scaffold with navigation and content panes,Custom implementation with state management,High,https://developer.apple.com/design/human-interface-guidelines/sidebars
92,Layout,stackView,Horizontal or vertical arrangement of views,Use stack views for flexible adaptive layouts,Use fixed frames that don't adapt,VStack { } HStack { } ZStack { },Column() Row() Stack(),<View style={{ flexDirection: 'column' }}>,High,https://developer.apple.com/design/human-interface-guidelines/layout
93,Layout,lazyGrid,Grid layout that loads content lazily,Use for image galleries and collection views,Load all grid items upfront for large datasets,LazyVGrid(columns: [GridItem]) { },GridView.builder(gridDelegate: SliverGridDelegate),<FlatList numColumns={2} />,Medium,https://developer.apple.com/design/human-interface-guidelines/layout
94,Layout,scrollView,Scrollable content container with iOS physics,Preserve native scroll feel and indicators,Disable scroll indicators or native physics,ScrollView { } .scrollIndicators(.automatic),SingleChildScrollView(physics: BouncingScrollPhysics()),<ScrollView showsVerticalScrollIndicator={true}>,High,https://developer.apple.com/design/human-interface-guidelines/layout
95,Layout,listView,Optimized scrolling list with cell reuse,Use List for long scrolling content,Use ScrollView with ForEach for large datasets,List { ForEach(items) { item in } },ListView.builder(itemBuilder: (c i) {}),<FlatList data={items} renderItem={renderItem} />,High,https://developer.apple.com/design/human-interface-guidelines/lists-and-tables
96,Layout,marginStandard,Standard 16pt leading and trailing margins,Apply consistent margins across all screens,Use varying margins that break visual rhythm,.padding(.horizontal 16),Padding(padding: EdgeInsets.symmetric(horizontal: 16)),{ paddingHorizontal: 16 },High,https://developer.apple.com/design/human-interface-guidelines/layout
97,Layout,contentInsets,Content insets for readability on large screens,Limit content width on iPad for readability,Let content span full width on very large screens,.scenePadding(.horizontal),ConstrainedBox(constraints: BoxConstraints(maxWidth: 600)),{ maxWidth: 600 alignSelf: 'center' },Medium,https://developer.apple.com/design/human-interface-guidelines/layout
98,Layout,adaptiveSpacing,Dynamic spacing based on content and size class,Scale spacing proportionally to screen size,Use fixed spacing that doesn't adapt,.padding(.vertical UIDevice.current.userInterfaceIdiom == .pad ? 24 : 16),EdgeInsets.all(MediaQuery.of(context).size.width > 600 ? 24 : 16),Responsive spacing based on Dimensions.get('window'),Medium,https://developer.apple.com/design/human-interface-guidelines/layout
99,Accessibility,voiceOverLabels,Descriptive labels for VoiceOver screen reader,Provide meaningful labels for all interactive elements,Use technical terms or leave elements unlabeled,.accessibilityLabel(Text('Add item to cart')),Semantics(label: 'Add item to cart' child: widget),accessibilityLabel="Add item to cart",High,https://developer.apple.com/design/human-interface-guidelines/accessibility
100,Accessibility,voiceOverHints,Additional context for VoiceOver users,Add hints explaining result of activation,Repeat the label in the hint,.accessibilityHint(Text('Double tap to add this item')),Semantics(hint: 'Double tap to add this item' child: widget),accessibilityHint="Double tap to add this item",Medium,https://developer.apple.com/design/human-interface-guidelines/accessibility
101,Accessibility,accessibilityTraits,Semantic traits identifying element type and state,Use appropriate traits: button link header image,Leave interactive elements without traits,.accessibilityAddTraits(.isButton),Semantics(button: true child: widget),accessibilityRole="button",High,https://developer.apple.com/design/human-interface-guidelines/accessibility
102,Accessibility,dynamicTypeSupport,Support for user text size preferences,Scale text with Dynamic Type up to XXXL,Cap text size or break layout at large sizes,@ScaledMetric var size: CGFloat = 17,MediaQuery.textScaleFactorOf(context),Text with allowFontScaling={true},High,https://developer.apple.com/design/human-interface-guidelines/accessibility
103,Accessibility,reduceMotion,Honor reduce motion accessibility setting,Provide static alternatives to animations,Ignore motion preferences causing discomfort,@Environment(\.accessibilityReduceMotion),MediaQuery.disableAnimationsOf(context),AccessibilityInfo.isReduceMotionEnabled(),High,https://developer.apple.com/design/human-interface-guidelines/motion
104,Accessibility,reduceTransparency,Honor reduce transparency setting,Use solid backgrounds when transparency is reduced,Rely on blur effects for essential information,@Environment(\.accessibilityReduceTransparency),MediaQuery.highContrastOf(context),AccessibilityInfo.isReduceTransparencyEnabled(),Medium,https://developer.apple.com/design/human-interface-guidelines/accessibility
105,Accessibility,differentiateWithoutColor,Convey information without relying on color alone,Use icons shapes or text in addition to color,Use only color to indicate state or errors,@Environment(\.accessibilityDifferentiateWithoutColor),MediaQuery.highContrastOf(context),AccessibilityInfo.announceForAccessibility,High,https://developer.apple.com/design/human-interface-guidelines/color
106,Accessibility,minimumContrastRatio,4.5:1 contrast ratio for text readability,Test all text against backgrounds for sufficient contrast,Use light gray text on white backgrounds,Color.primary on Color(.systemBackground),Ensure CupertinoColors meet contrast requirements,Verify color contrast with accessibility tools,High,https://developer.apple.com/design/human-interface-guidelines/accessibility
107,Accessibility,focusManagement,Logical focus order and focus visibility,Manage focus order for keyboard and assistive tech,Allow focus to get lost or trapped,@FocusState var isFocused: Bool,FocusNode and FocusScope management,ref with focus() and accessibility focus,High,https://developer.apple.com/design/human-interface-guidelines/accessibility
108,Accessibility,accessibilityContainer,Group related elements for VoiceOver,Group related content as single accessible element,Leave small elements as separate focus targets,.accessibilityElement(children: .combine),MergeSemantics(child: widget),accessible={true} on container View,Medium,https://developer.apple.com/design/human-interface-guidelines/accessibility
109,Accessibility,invertColors,Support for smart and classic invert colors,Test app with color inversion enabled,Use images that look wrong when inverted,@Environment(\.accessibilityInvertColors),MediaQuery.invertColorsOf(context),AccessibilityInfo.isInvertColorsEnabled(),Medium,https://developer.apple.com/design/human-interface-guidelines/accessibility
110,Accessibility,boldText,Support for system bold text preference,Increase font weight when bold text is enabled,Ignore bold text preference,@Environment(\.legibilityWeight),MediaQuery.boldTextOf(context),AccessibilityInfo.isBoldTextEnabled(),Medium,https://developer.apple.com/design/human-interface-guidelines/accessibility
