No,Category,Pattern,Description,Do,Don't,Android_Value,Flutter_Equiv,RN_Equiv,Severity,Docs_URL
1,Colors,primary,Primary brand color for key elements and actions,Use from MaterialTheme.colorScheme for automatic light/dark adaptation,Hardcode hex values that don't adapt to theme,MaterialTheme.colorScheme.primary,Theme.of(context).colorScheme.primary,useTheme().colors.primary,High,https://m3.material.io/styles/color/system/overview
2,Colors,onPrimary,Text and icons displayed on primary color,Use for content on primary-colored surfaces,Use primary color text on primary surfaces,MaterialTheme.colorScheme.onPrimary,Theme.of(context).colorScheme.onPrimary,useTheme().colors.onPrimary,High,https://m3.material.io/styles/color/system/overview
3,Colors,primaryContainer,Subtle primary color for containers and backgrounds,Use for filled tonal buttons and less prominent containers,Use for high-emphasis elements requiring primary,MaterialTheme.colorScheme.primaryContainer,Theme.of(context).colorScheme.primaryContainer,useTheme().colors.primaryContainer,High,https://m3.material.io/styles/color/system/overview
4,Colors,onPrimaryContainer,Text and icons on primary container surfaces,Use for content displayed on primaryContainer,Use onPrimary on primaryContainer surfaces,MaterialTheme.colorScheme.onPrimaryContainer,Theme.of(context).colorScheme.onPrimaryContainer,useTheme().colors.onPrimaryContainer,High,https://m3.material.io/styles/color/system/overview
5,Colors,secondary,Secondary brand color for less prominent elements,Use for filters chips and less prominent actions,Use as primary action color,MaterialTheme.colorScheme.secondary,Theme.of(context).colorScheme.secondary,useTheme().colors.secondary,High,https://m3.material.io/styles/color/system/overview
6,Colors,onSecondary,Text and icons on secondary color surfaces,Use for content on secondary-colored elements,Mix with primary content colors,MaterialTheme.colorScheme.onSecondary,Theme.of(context).colorScheme.onSecondary,useTheme().colors.onSecondary,Medium,https://m3.material.io/styles/color/system/overview
7,Colors,tertiary,Accent color for contrasting elements,Use to create visual interest and highlight specific elements,Overuse as it should complement not dominate,MaterialTheme.colorScheme.tertiary,Theme.of(context).colorScheme.tertiary,useTheme().colors.tertiary,Medium,https://m3.material.io/styles/color/system/overview
8,Colors,surface,Primary background color for app surfaces,Use as main background for cards sheets and dialogs,Use background for elevated surfaces,MaterialTheme.colorScheme.surface,Theme.of(context).colorScheme.surface,useTheme().colors.surface,High,https://m3.material.io/styles/color/system/overview
9,Colors,surfaceContainer,Container surface with subtle elevation tint,Use for cards and elevated containers,Mix surface levels inconsistently,MaterialTheme.colorScheme.surfaceContainer,Theme.of(context).colorScheme.surfaceContainer,useTheme().colors.surfaceContainer,High,https://m3.material.io/styles/color/system/overview
10,Colors,surfaceContainerLow,Lower emphasis surface container,Use for less prominent background areas,Use for primary content containers,MaterialTheme.colorScheme.surfaceContainerLow,Theme.of(context).colorScheme.surfaceContainerLow,useTheme().colors.surfaceContainerLow,Medium,https://m3.material.io/styles/color/system/overview
11,Colors,surfaceContainerHigh,Higher emphasis surface container,Use for navigation drawers and modal surfaces,Use for flat background areas,MaterialTheme.colorScheme.surfaceContainerHigh,Theme.of(context).colorScheme.surfaceContainerHigh,useTheme().colors.surfaceContainerHigh,Medium,https://m3.material.io/styles/color/system/overview
12,Colors,background,App background color behind scrollable content,Use for the root background of the application,Use surface colors for background,MaterialTheme.colorScheme.background,Theme.of(context).colorScheme.background,useTheme().colors.background,High,https://m3.material.io/styles/color/system/overview
13,Colors,onBackground,Text and icons on background surfaces,Use for primary text on background,Use low contrast colors on background,MaterialTheme.colorScheme.onBackground,Theme.of(context).colorScheme.onBackground,useTheme().colors.onBackground,High,https://m3.material.io/styles/color/system/overview
14,Colors,error,Error state color for validation and alerts,Use for error messages and destructive actions,Use for warnings or non-error states,MaterialTheme.colorScheme.error,Theme.of(context).colorScheme.error,useTheme().colors.error,High,https://m3.material.io/styles/color/system/overview
15,Colors,onError,Text and icons on error surfaces,Use for content displayed on error-colored surfaces,Use error color text on error surfaces,MaterialTheme.colorScheme.onError,Theme.of(context).colorScheme.onError,useTheme().colors.onError,High,https://m3.material.io/styles/color/system/overview
16,Typography,displayLarge,Largest display text at 57sp for hero content,Use for hero headlines and large numbers,Use for body text or small screens,MaterialTheme.typography.displayLarge,Theme.of(context).textTheme.displayLarge,{ fontSize: 57 fontWeight: '400' lineHeight: 64 },High,https://m3.material.io/styles/typography/type-scale-tokens
17,Typography,displayMedium,Display text at 45sp for prominent titles,Use for large promotional headlines,Use for regular section headers,MaterialTheme.typography.displayMedium,Theme.of(context).textTheme.displayMedium,{ fontSize: 45 fontWeight: '400' lineHeight: 52 },High,https://m3.material.io/styles/typography/type-scale-tokens
18,Typography,displaySmall,Smaller display text at 36sp,Use for secondary display content,Use for primary navigation titles,MaterialTheme.typography.displaySmall,Theme.of(context).textTheme.displaySmall,{ fontSize: 36 fontWeight: '400' lineHeight: 44 },Medium,https://m3.material.io/styles/typography/type-scale-tokens
19,Typography,headlineLarge,Large headline at 32sp for page titles,Use for top-level page titles,Use for body content or labels,MaterialTheme.typography.headlineLarge,Theme.of(context).textTheme.headlineLarge,{ fontSize: 32 fontWeight: '400' lineHeight: 40 },High,https://m3.material.io/styles/typography/type-scale-tokens
20,Typography,headlineMedium,Medium headline at 28sp for section titles,Use for major section headers,Use for small labels or metadata,MaterialTheme.typography.headlineMedium,Theme.of(context).textTheme.headlineMedium,{ fontSize: 28 fontWeight: '400' lineHeight: 36 },High,https://m3.material.io/styles/typography/type-scale-tokens
21,Typography,headlineSmall,Small headline at 24sp for subsections,Use for card titles and subsection headers,Use for primary page titles,MaterialTheme.typography.headlineSmall,Theme.of(context).textTheme.headlineSmall,{ fontSize: 24 fontWeight: '400' lineHeight: 32 },Medium,https://m3.material.io/styles/typography/type-scale-tokens
22,Typography,titleLarge,Large title at 22sp for prominent UI elements,Use for app bar titles and dialog headers,Use for body text,MaterialTheme.typography.titleLarge,Theme.of(context).textTheme.titleLarge,{ fontSize: 22 fontWeight: '400' lineHeight: 28 },High,https://m3.material.io/styles/typography/type-scale-tokens
23,Typography,titleMedium,Medium title at 16sp medium weight,Use for list item titles and button text,Use for secondary descriptions,MaterialTheme.typography.titleMedium,Theme.of(context).textTheme.titleMedium,{ fontSize: 16 fontWeight: '500' lineHeight: 24 },High,https://m3.material.io/styles/typography/type-scale-tokens
24,Typography,titleSmall,Small title at 14sp medium weight,Use for minor titles and emphasized labels,Use for primary headings,MaterialTheme.typography.titleSmall,Theme.of(context).textTheme.titleSmall,{ fontSize: 14 fontWeight: '500' lineHeight: 20 },Medium,https://m3.material.io/styles/typography/type-scale-tokens
25,Typography,bodyLarge,Primary body text at 16sp,Use for main body content and paragraphs,Use for headlines or titles,MaterialTheme.typography.bodyLarge,Theme.of(context).textTheme.bodyLarge,{ fontSize: 16 fontWeight: '400' lineHeight: 24 },High,https://m3.material.io/styles/typography/type-scale-tokens
26,Typography,bodyMedium,Standard body text at 14sp,Use for secondary body content and descriptions,Use for primary content,MaterialTheme.typography.bodyMedium,Theme.of(context).textTheme.bodyMedium,{ fontSize: 14 fontWeight: '400' lineHeight: 20 },High,https://m3.material.io/styles/typography/type-scale-tokens
27,Typography,bodySmall,Small body text at 12sp,Use for captions and supporting text,Use for primary readable content,MaterialTheme.typography.bodySmall,Theme.of(context).textTheme.bodySmall,{ fontSize: 12 fontWeight: '400' lineHeight: 16 },Medium,https://m3.material.io/styles/typography/type-scale-tokens
28,Typography,labelLarge,Large label at 14sp medium weight,Use for buttons and prominent labels,Use for body paragraphs,MaterialTheme.typography.labelLarge,Theme.of(context).textTheme.labelLarge,{ fontSize: 14 fontWeight: '500' lineHeight: 20 },High,https://m3.material.io/styles/typography/type-scale-tokens
29,Typography,labelMedium,Medium label at 12sp medium weight,Use for chip labels and small buttons,Use for readable descriptions,MaterialTheme.typography.labelMedium,Theme.of(context).textTheme.labelMedium,{ fontSize: 12 fontWeight: '500' lineHeight: 16 },Medium,https://m3.material.io/styles/typography/type-scale-tokens
30,Typography,labelSmall,Smallest label at 11sp medium weight,Use for timestamps and minor annotations,Use for content users need to read easily,MaterialTheme.typography.labelSmall,Theme.of(context).textTheme.labelSmall,{ fontSize: 11 fontWeight: '500' lineHeight: 16 },Low,https://m3.material.io/styles/typography/type-scale-tokens
31,Spacing,spacing-4,Minimal 4dp spacing for tight layouts,Use between related inline elements,Use as primary spacing between sections,4.dp,4.0,4,Medium,https://m3.material.io/foundations/layout/understanding-layout/spacing
32,Spacing,spacing-8,Standard 8dp small spacing,Use for padding within compact components,Use for large content separation,8.dp,8.0,8,Medium,https://m3.material.io/foundations/layout/understanding-layout/spacing
33,Spacing,spacing-12,Medium 12dp spacing,Use for list item vertical padding,Use inconsistently with other spacing values,12.dp,12.0,12,Medium,https://m3.material.io/foundations/layout/understanding-layout/spacing
34,Spacing,spacing-16,Standard 16dp content spacing,Use for horizontal margins and section spacing,Use values that break the 4dp grid,16.dp,16.0,16,High,https://m3.material.io/foundations/layout/understanding-layout/spacing
35,Spacing,spacing-24,Large 24dp spacing for visual hierarchy,Use between major content sections,Use for tight inline spacing,24.dp,24.0,24,Medium,https://m3.material.io/foundations/layout/understanding-layout/spacing
36,Spacing,spacing-32,Extra large 32dp spacing,Use to separate distinct content groups,Overuse creating excessive whitespace,32.dp,32.0,32,Medium,https://m3.material.io/foundations/layout/understanding-layout/spacing
37,Spacing,spacing-48,Major 48dp section separation,Use between completely different content areas,Use within related content groups,48.dp,48.0,48,Low,https://m3.material.io/foundations/layout/understanding-layout/spacing
38,Spacing,spacing-64,Maximum 64dp spacing for dramatic separation,Use for hero sections and major breaks,Use in content-dense interfaces,64.dp,64.0,64,Low,https://m3.material.io/foundations/layout/understanding-layout/spacing
39,Spacing,hitTarget-48,Minimum 48dp touch target size,Ensure all interactive elements meet 48dp minimum,Create touch targets smaller than 48dp,Modifier.sizeIn(minWidth = 48.dp minHeight = 48.dp),SizedBox(width: 48 height: 48),{ minWidth: 48 minHeight: 48 },High,https://m3.material.io/foundations/accessible-design/accessibility-basics
40,Spacing,marginCompact,16dp margins for compact window sizes,Apply on phones and compact layouts,Use on larger screens,PaddingValues(horizontal = 16.dp),EdgeInsets.symmetric(horizontal: 16),{ paddingHorizontal: 16 },High,https://m3.material.io/foundations/layout/applying-layout/window-size-classes
41,Components,filledButton,High-emphasis filled button for primary actions,Use for the most important action on screen,Use multiple filled buttons competing for attention,Button(onClick = {}) { Text() },ElevatedButton(onPressed: () {} child: Text()),<Button mode="contained" onPress={handlePress}>,High,https://m3.material.io/components/buttons/overview
42,Components,filledTonalButton,Medium-emphasis tonal button for secondary actions,Use for important actions that aren't primary,Use for low-emphasis actions,FilledTonalButton(onClick = {}) { Text() },FilledButton.tonal(onPressed: () {} child: Text()),<Button mode="contained-tonal" onPress={handlePress}>,High,https://m3.material.io/components/buttons/overview
43,Components,elevatedButton,Elevated button with shadow for emphasis,Use when button needs to stand out from surface,Use for primary actions over filled button,ElevatedButton(onClick = {}) { Text() },ElevatedButton(onPressed: () {} child: Text()),<Button mode="elevated" onPress={handlePress}>,Medium,https://m3.material.io/components/buttons/overview
44,Components,outlinedButton,Medium-emphasis button with border outline,Use for secondary actions and alternative choices,Use for primary or high-emphasis actions,OutlinedButton(onClick = {}) { Text() },OutlinedButton(onPressed: () {} child: Text()),<Button mode="outlined" onPress={handlePress}>,Medium,https://m3.material.io/components/buttons/overview
45,Components,textButton,Low-emphasis text-only button,Use for tertiary actions and navigation links,Use for important actions requiring emphasis,TextButton(onClick = {}) { Text() },TextButton(onPressed: () {} child: Text()),<Button mode="text" onPress={handlePress}>,Medium,https://m3.material.io/components/buttons/overview
46,Components,filledCard,Filled card with solid background,Use for content that needs visual separation,Use for content at same level as background,Card(colors = CardDefaults.cardColors()) { },Card(child: content),<Card mode="contained">,High,https://m3.material.io/components/cards/overview
47,Components,elevatedCard,Card with elevation shadow,Use when card needs to stand out from surface,Overuse creating visual clutter,ElevatedCard(onClick = {}) { },Card(elevation: 1 child: content),<Card mode="elevated">,Medium,https://m3.material.io/components/cards/overview
48,Components,outlinedCard,Card with border outline only,Use for lower emphasis grouped content,Use for primary content cards,OutlinedCard(onClick = {}) { },Card.outlined(child: content),<Card mode="outlined">,Medium,https://m3.material.io/components/cards/overview
49,Components,switch,On/off toggle for binary settings,Use for settings that take immediate effect,Use for actions requiring confirmation,Switch(checked = state onCheckedChange = {}),Switch(value: state onChanged: (v) {}),<Switch value={state} onValueChange={setState} />,High,https://m3.material.io/components/switch/overview
50,Components,slider,Value selection along a continuous range,Use with clear min/max indicators,Use for precise numeric input,Slider(value = value onValueChange = {}),Slider(value: value onChanged: (v) {}),<Slider value={value} onValueChange={setValue} />,Medium,https://m3.material.io/components/sliders/overview
51,Components,checkbox,Multi-select option for lists,Use for independent selections from multiple options,Use for mutually exclusive choices,Checkbox(checked = state onCheckedChange = {}),Checkbox(value: state onChanged: (v) {}),<Checkbox status={state} onPress={toggle} />,High,https://m3.material.io/components/checkbox/overview
52,Components,radioButton,Single-select from mutually exclusive options,Use for selecting one option from a group,Use for independent multi-select,RadioButton(selected = state onClick = {}),Radio(value: value groupValue: selected onChanged: (v) {}),<RadioButton value={value} status={status} onPress={select} />,High,https://m3.material.io/components/radio-button/overview
53,Components,textField,Text input with outlined or filled styles,Use with supporting text and validation states,Use without label or placeholder,TextField(value = text onValueChange = {}),TextField(controller: controller decoration: InputDecoration()),<TextInput mode="outlined" />,High,https://m3.material.io/components/text-fields/overview
54,Components,searchBar,Text input optimized for search queries,Place prominently with search icon,Hide in navigation or menus,SearchBar(query = text onQueryChange = {}),SearchBar(controller: controller hintText: 'Search'),<Searchbar placeholder="Search" />,High,https://m3.material.io/components/search/overview
55,Components,fab,Floating action button for primary screen action,Use for the most common action on screen,Use multiple FABs or for minor actions,FloatingActionButton(onClick = {}) { Icon() },FloatingActionButton(onPressed: () {} child: Icon()),<FAB icon="plus" onPress={handlePress} />,High,https://m3.material.io/components/floating-action-button/overview
56,Components,extendedFab,Extended FAB with icon and label text,Use when action needs explanation,Use for simple iconic actions,ExtendedFloatingActionButton(onClick = {}) { Icon() Text() },FloatingActionButton.extended(onPressed: () {} label: Text() icon: Icon()),<FAB icon="plus" label="Create" extended onPress={handlePress} />,Medium,https://m3.material.io/components/extended-fab/overview
57,Navigation,navigationBar,Bottom navigation bar for 3-5 destinations,Use for top-level destinations with icons and labels,Use more than 5 items or without labels,NavigationBar(selectedItem = index) { items },NavigationBar(destinations: [] selectedIndex: index onDestinationSelected: (i) {}),<BottomNavigation navigationState={state} onIndexChange={setIndex}>,High,https://m3.material.io/components/navigation-bar/overview
58,Navigation,navigationRail,Vertical navigation rail for medium screens,Use on tablets and larger screens with 3-7 destinations,Use on phones or with more than 7 items,NavigationRail(selectedItem = index) { items },NavigationRail(destinations: [] selectedIndex: index onDestinationSelected: (i) {}),Custom NavigationRail implementation,High,https://m3.material.io/components/navigation-rail/overview
59,Navigation,navigationDrawer,Full navigation drawer for many destinations,Use for extensive navigation with unlimited items,Use for only a few destinations,ModalNavigationDrawer(drawerContent = {}) { content },Drawer(child: NavigationDrawer()),<Drawer.Navigator drawerContent={DrawerContent}>,High,https://m3.material.io/components/navigation-drawer/overview
60,Navigation,topAppBar,Top app bar with title and actions,Use for navigation title and contextual actions,Overcrowd with too many actions,TopAppBar(title = { Text() } navigationIcon = {}),AppBar(title: Text('Title') leading: IconButton()),<Appbar.Header><Appbar.Content title="Title" /></Appbar.Header>,High,https://m3.material.io/components/top-app-bar/overview
61,Navigation,mediumTopAppBar,Medium top app bar with larger title,Use for scrollable content with collapsing title,Use for non-scrollable content,MediumTopAppBar(title = { Text() } scrollBehavior = {}),SliverAppBar.medium(title: Text('Title')),Custom collapsing header implementation,Medium,https://m3.material.io/components/top-app-bar/overview
62,Navigation,largeTopAppBar,Large top app bar with prominent title,Use for top-level screens with hero titles,Use for detail or secondary screens,LargeTopAppBar(title = { Text() } scrollBehavior = {}),SliverAppBar.large(title: Text('Title')),Custom large header implementation,Medium,https://m3.material.io/components/top-app-bar/overview
63,Navigation,bottomSheet,Persistent bottom sheet for secondary content,Use for content related to main screen,Use for primary navigation,BottomSheetScaffold(sheetContent = {}) { },showBottomSheet(context: context builder: (c) {}),<BottomSheet visible={show} onDismiss={hide}>,High,https://m3.material.io/components/bottom-sheets/overview
64,Navigation,modalBottomSheet,Modal sheet covering main content,Use for focused tasks and selections,Use for content that should remain visible,ModalBottomSheet(onDismissRequest = {}) { },showModalBottomSheet(context: context builder: (c) {}),<Modal visible={show} onDismiss={hide}>,High,https://m3.material.io/components/bottom-sheets/overview
65,Navigation,snackbar,Brief message at bottom of screen,Use for brief feedback that auto-dismisses,Use for critical errors or actions requiring attention,Snackbar(message = { Text() } action = {}),ScaffoldMessenger.of(context).showSnackBar(SnackBar()),<Snackbar visible={show} onDismiss={hide}>,Medium,https://m3.material.io/components/snackbar/overview
66,Navigation,dialog,Modal dialog for important decisions,Use for confirmations and critical inputs,Overuse for non-critical information,AlertDialog(onDismissRequest = {}) { },showDialog(context: context builder: (c) => AlertDialog()),<Portal><Dialog visible={show} /></Portal>,High,https://m3.material.io/components/dialogs/overview
67,Shapes,shapeNone,No corner rounding at 0dp,Use for full-bleed images and dividers,Use for interactive components,RoundedCornerShape(0.dp),RoundedRectangleBorder(borderRadius: BorderRadius.zero),{ borderRadius: 0 },Low,https://m3.material.io/styles/shape/overview
68,Shapes,shapeExtraSmall,Extra small 4dp corner radius,Use for small components like chips,Use for large containers,RoundedCornerShape(4.dp),RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),{ borderRadius: 4 },Medium,https://m3.material.io/styles/shape/overview
69,Shapes,shapeSmall,Small 8dp corner radius,Use for buttons and small cards,Use for dialogs and large sheets,RoundedCornerShape(8.dp),RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),{ borderRadius: 8 },High,https://m3.material.io/styles/shape/overview
70,Shapes,shapeMedium,Medium 12dp corner radius,Use for cards and containers,Use for small interactive elements,RoundedCornerShape(12.dp),RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),{ borderRadius: 12 },High,https://m3.material.io/styles/shape/overview
71,Shapes,shapeLarge,Large 16dp corner radius,Use for bottom sheets and large cards,Use for buttons and small components,RoundedCornerShape(16.dp),RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),{ borderRadius: 16 },Medium,https://m3.material.io/styles/shape/overview
72,Shapes,shapeExtraLarge,Extra large 28dp corner radius,Use for dialogs and full-screen sheets,Use for small components,RoundedCornerShape(28.dp),RoundedRectangleBorder(borderRadius: BorderRadius.circular(28)),{ borderRadius: 28 },Medium,https://m3.material.io/styles/shape/overview
73,Shapes,shapeFull,Fully circular shape for round elements,Use for FABs and circular avatars,Use for rectangular content,CircleShape,CircleBorder() or BoxDecoration(shape: BoxShape.circle),{ borderRadius: 9999 },High,https://m3.material.io/styles/shape/overview
74,Shapes,shapeAsymmetric,Custom asymmetric corner rounding,Use for visual interest on specific elements,Overuse breaking consistency,RoundedCornerShape(topStart = 16.dp bottomEnd = 16.dp),RoundedRectangleBorder(borderRadius: BorderRadius.only()),{ borderTopLeftRadius: 16 borderBottomRightRadius: 16 },Low,https://m3.material.io/styles/shape/overview
75,Elevation,elevationLevel0,No elevation at 0dp,Use for flat surfaces at base level,Use for elements that need hierarchy,Elevation = 0.dp,elevation: 0,{ elevation: 0 },Medium,https://m3.material.io/styles/elevation/overview
76,Elevation,elevationLevel1,Subtle 1dp elevation,Use for cards and subtle surface distinction,Use for prominent floating elements,Elevation = 1.dp,elevation: 1,{ elevation: 1 },Medium,https://m3.material.io/styles/elevation/overview
77,Elevation,elevationLevel2,Low 3dp elevation,Use for navigation bars and app bars,Use for modal overlays,Elevation = 3.dp,elevation: 3,{ elevation: 3 },High,https://m3.material.io/styles/elevation/overview
78,Elevation,elevationLevel3,Medium 6dp elevation,Use for FABs and elevated buttons,Use for base-level surfaces,Elevation = 6.dp,elevation: 6,{ elevation: 6 },High,https://m3.material.io/styles/elevation/overview
79,Elevation,elevationLevel4,High 8dp elevation,Use for navigation drawers,Use for subtle distinctions,Elevation = 8.dp,elevation: 8,{ elevation: 8 },Medium,https://m3.material.io/styles/elevation/overview
80,Elevation,elevationLevel5,Highest 12dp elevation,Use for modals and dialogs,Use for base content,Elevation = 12.dp,elevation: 12,{ elevation: 12 },Medium,https://m3.material.io/styles/elevation/overview
81,Elevation,tonalElevation,Color tint based elevation instead of shadow,Use for Material 3 tonal surface hierarchy,Rely only on shadow elevation,Surface(tonalElevation = 1.dp),Material(surfaceTintColor: colorScheme.surfaceTint elevation: 1),Use surface color variants instead,High,https://m3.material.io/styles/elevation/overview
82,Elevation,shadowElevation,Traditional shadow-based elevation,Use sparingly for clear floating elements,Overuse creating visual clutter,shadowElevation = 6.dp,PhysicalModel(elevation: 6 shadowColor: Colors.black),{ shadowOffset: { width: 0 height: 3 } shadowOpacity: 0.2 shadowRadius: 6 },Medium,https://m3.material.io/styles/elevation/overview
83,Motion,motionStandard,Standard easing for common transitions,Use for most UI transitions and state changes,Use for expressive or playful animations,tween(durationMillis = 300 easing = FastOutSlowInEasing),Curves.easeInOut with Duration(milliseconds: 300),{ duration: 300 easing: Easing.inOut(Easing.ease) },High,https://m3.material.io/styles/motion/overview
84,Motion,motionExpressive,Bouncy expressive easing for delight,Use for celebratory and playful moments,Overuse creating distracting interfaces,spring(dampingRatio = 0.7f stiffness = 400f),Curves.elasticOut with SpringSimulation,{ spring: { damping: 15 stiffness: 150 } },Medium,https://m3.material.io/styles/motion/overview
85,Motion,durationShort1,Very short 50ms duration,Use for subtle state changes like hover,Use for significant transitions,durationMillis = 50,Duration(milliseconds: 50),{ duration: 50 },Low,https://m3.material.io/styles/motion/easing-and-duration
86,Motion,durationShort2,Short 100ms duration,Use for quick feedback and micro-interactions,Use for navigation transitions,durationMillis = 100,Duration(milliseconds: 100),{ duration: 100 },Medium,https://m3.material.io/styles/motion/easing-and-duration
87,Motion,durationMedium1,Medium 200ms duration,Use for component expand/collapse,Use for page-level transitions,durationMillis = 200,Duration(milliseconds: 200),{ duration: 200 },High,https://m3.material.io/styles/motion/easing-and-duration
88,Motion,durationMedium2,Standard 300ms duration,Use for most UI transitions,Use for very quick interactions,durationMillis = 300,Duration(milliseconds: 300),{ duration: 300 },High,https://m3.material.io/styles/motion/easing-and-duration
89,Motion,durationLong1,Long 450ms duration,Use for complex or large-scale transitions,Use for simple state changes,durationMillis = 450,Duration(milliseconds: 450),{ duration: 450 },Medium,https://m3.material.io/styles/motion/easing-and-duration
90,Motion,durationLong2,Very long 700ms duration,Use for dramatic or page-level transitions,Use for micro-interactions,durationMillis = 700,Duration(milliseconds: 700),{ duration: 700 },Low,https://m3.material.io/styles/motion/easing-and-duration
91,Layout,compactWidth,Compact window width 0-599dp for phones,Optimize for single-column layouts,Force multi-column on compact,WindowWidthSizeClass.Compact,MediaQuery.of(context).size.width < 600,Dimensions.get('window').width < 600,High,https://m3.material.io/foundations/layout/applying-layout/window-size-classes
92,Layout,mediumWidth,Medium window width 600-839dp for tablets,Use two-column list-detail layouts,Use single column or full multi-pane,WindowWidthSizeClass.Medium,MediaQuery.of(context).size.width >= 600 && < 840,Dimensions.get('window').width >= 600 && < 840,High,https://m3.material.io/foundations/layout/applying-layout/window-size-classes
93,Layout,expandedWidth,Expanded window width 840dp+ for large screens,Use full multi-pane layouts,Force single column on large screens,WindowWidthSizeClass.Expanded,MediaQuery.of(context).size.width >= 840,Dimensions.get('window').width >= 840,High,https://m3.material.io/foundations/layout/applying-layout/window-size-classes
94,Layout,scaffold,Material scaffold with slots for bars and FAB,Use for consistent app structure,Build custom scaffold from scratch,Scaffold(topBar = {} bottomBar = {} floatingActionButton = {}),Scaffold(appBar: AppBar() body: content floatingActionButton: fab),<View style={styles.scaffold}>,High,https://developer.android.com/develop/ui/compose/components/scaffold
95,Layout,bottomAppBar,Bottom app bar with navigation and FAB,Use for navigation actions with embedded FAB,Use with top app bar for same actions,BottomAppBar(actions = {} floatingActionButton = {}),BottomAppBar(child: Row() notchMargin: 4),<Appbar style={styles.bottom}>,Medium,https://m3.material.io/components/bottom-app-bar/overview
96,Layout,columnLayout,Vertical column arrangement,Use for stacking content vertically,Nest columns unnecessarily,Column { items.forEach { Item() } },Column(children: [widgets]),<View style={{ flexDirection: 'column' }}>,High,https://developer.android.com/develop/ui/compose/layouts/basics
97,Layout,gridLayout,Grid arrangement for collections,Use for image galleries and card grids,Use for linear content lists,LazyVerticalGrid(columns = GridCells.Fixed(2)) { items },GridView.count(crossAxisCount: 2 children: []),<FlatList numColumns={2} />,Medium,https://developer.android.com/develop/ui/compose/lists
98,Layout,responsiveMargins,Margins that adapt to window size,Scale margins with window size class,Use fixed margins on all screen sizes,PaddingValues based on WindowSizeClass,EdgeInsets based on MediaQuery,Dynamic padding based on Dimensions,High,https://m3.material.io/foundations/layout/understanding-layout/spacing
99,Layout,contentWidth,Maximum content width of 840dp,Limit content width on large screens,Let content span unlimited width on tablets,Modifier.widthIn(max = 840.dp),ConstrainedBox(constraints: BoxConstraints(maxWidth: 840)),{ maxWidth: 840 alignSelf: 'center' },Medium,https://m3.material.io/foundations/layout/understanding-layout/spacing
100,Layout,listDetail,List-detail pattern for master-detail navigation,Use for browsing and viewing content,Force list-detail on compact screens,ListDetailPaneScaffold(listPane = {} detailPane = {}),Row with NavigationRail and content,Custom list-detail implementation,High,https://developer.android.com/develop/ui/compose/layouts/adaptive/list-detail
101,Accessibility,minimumTouchTarget,48dp minimum touch target size,Ensure all interactive elements meet minimum,Create targets smaller than 48dp,Modifier.minimumInteractiveComponentSize(),SizedBox with minWidth/minHeight: 48,{ minWidth: 48 minHeight: 48 },High,https://m3.material.io/foundations/accessible-design/accessibility-basics
102,Accessibility,contrastUI,3:1 minimum contrast for UI components,Ensure icons and controls meet contrast ratio,Use low-contrast icons on similar backgrounds,Test with Accessibility Scanner,Use colors that pass WCAG AA for UI,Verify contrast with accessibility tools,High,https://m3.material.io/foundations/accessible-design/accessibility-basics
103,Accessibility,contrastText,4.5:1 minimum contrast for text,Ensure all text meets WCAG AA standards,Use light gray text on white backgrounds,MaterialTheme.colorScheme semantic colors,Use colorScheme colors with proper pairings,Verify text contrast with tools,High,https://m3.material.io/foundations/accessible-design/accessibility-basics
104,Accessibility,talkbackLabels,Descriptive labels for TalkBack screen reader,Provide contentDescription for all interactive elements,Use technical terms or leave elements unlabeled,Modifier.contentDescription('Add to cart'),Semantics(label: 'Add to cart' child: widget),accessibilityLabel="Add to cart",High,https://developer.android.com/develop/ui/compose/accessibility
105,Accessibility,contentDescription,Accessible description for meaningful images,Provide descriptions for informative images,Describe decorative images or leave meaningful images without description,Modifier.semantics { contentDescription = 'Profile photo' },Semantics(label: 'Profile photo' child: Image()),accessible={true} accessibilityLabel="Profile photo",High,https://developer.android.com/develop/ui/compose/accessibility
106,Accessibility,semanticHeadings,Mark headings for screen reader navigation,Use heading semantics for section titles,Leave headings without semantic marking,Modifier.semantics { heading() },Semantics(header: true child: Text()),accessibilityRole="header",Medium,https://developer.android.com/develop/ui/compose/accessibility
107,Accessibility,reducedMotion,Honor reduce motion accessibility setting,Disable or simplify animations when enabled,Ignore motion preferences causing discomfort,LocalReduceMotion.current,MediaQuery.disableAnimationsOf(context),AccessibilityInfo.isReduceMotionEnabled(),High,https://developer.android.com/develop/ui/compose/accessibility
108,Accessibility,largeText,Support for system large text scaling,Allow text to scale with system font size,Cap text scaling or break layout at large sizes,sp units scale automatically,MediaQuery.textScaleFactorOf(context),Text with allowFontScaling={true},High,https://developer.android.com/develop/ui/compose/accessibility
109,Accessibility,boldText,Support for system bold text preference,Respect system bold text setting,Override with fixed font weights,LocalConfiguration.current.fontWeightAdjustment,MediaQuery.boldTextOf(context),AccessibilityInfo.isBoldTextEnabled(),Medium,https://developer.android.com/develop/ui/compose/accessibility
110,Accessibility,colorBlindness,Design for color blindness accessibility,Use patterns and icons in addition to color,Rely on color alone to convey information,Test with color blindness simulation,Use shapes and text with color coding,Test with color blindness simulators,High,https://m3.material.io/foundations/accessible-design/accessibility-basics
111,Accessibility,highContrast,Support high contrast mode,Test and optimize for high contrast settings,Ignore high contrast accessibility mode,Test with Android high contrast mode,MediaQuery.highContrastOf(context),AccessibilityInfo.isHighTextContrastEnabled(),Medium,https://developer.android.com/develop/ui/compose/accessibility
112,Accessibility,focusIndicator,Visible focus indicator for keyboard navigation,Provide clear focus states for all interactive elements,Remove or hide focus indicators,Modifier.focusable() with indication,FocusNode with visible focus decoration,accessibilityState with focused state,High,https://developer.android.com/develop/ui/compose/accessibility
