Build Material Design interfaces with elevation & motion

This sub-style reference provides code examples for implementing Material Design aesthetics - interfaces built on the metaphor of digital paper and ink with z-axis elevation, shadows for hierarchy, and structured layouts. It includes CSS, SwiftUI, Flutter, React Native, and Jetpack Compose implementation patterns with Material elevation shadows, typography configurations, and color mapping.

Use this sub-style when a design request matches the Material Design aesthetic described in the source. This is a child reference of the design-it skill and is not meant to be triggered directly.

The source recommends this approach for interfaces using z-axis elevation where shadows communicate hierarchy and state, meaningful motion with continuous animations, and structured layouts with 8dp baseline grids and specific component anatomies like cards, FABs, and app bars.

The source provides implementation patterns for Material Design components across multiple platforms. For web implementations, CSS examples include Material elevation shadows with specific box-shadow values, border-radius settings, and transition timing:

.material-card {
  background: var(--bg-surface);
  border-radius: 8px;
  padding: 16px;
  /* Material Elevation 2 */
  box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 
              0 2px 2px 0 rgba(0,0,0,0.14), 
              0 1px 5px 0 rgba(0,0,0,0.12);
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.material-btn {
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1.25px;
  padding: 0 16px;
  height: 36px;
  border-radius: 4px;
  background: var(--cta-highlight);
  color: #fff;
  border: none;
}

The source specifies visual characteristics including colors that work with Desert Mirage or Minimalist Slate palettes using primary, secondary, surface, and error semantic mapping; typography using Roboto or Google Sans with the Material Type Scale; and moderately rounded corners from 4px to 16px.

Flutter: The source states "Flutter IS Material Design" and recommends using MaterialApp, ThemeData(useMaterial3: true), and standard widgets. It includes mapping universal palettes via colorSchemeSeed or manual ColorScheme construction, using the Material type scale via Theme.of(context).textTheme, and notes that ripple effects come with InkWell and ElevatedButton.

SwiftUI: Examples show emulating Material elevation levels by stacking multiple .shadow() modifiers at different blur/offset values, using .cornerRadius(8...16) for Material Design 3 shapes, and animating shadow changes using .animation(.easeInOut(duration: 0.28)) for 280ms transitions.

React Native: The source recommends react-native-paper for Material Design 3 implementation, configuring themes to map universal palettes to Material semantic colors, and using components like Card with elevation prop and Button with mode prop. It notes ripple effects on Android via Pressable and iOS via TouchableRipple.

Jetpack Compose: The source states "Jetpack Compose IS Material Design" and shows using MaterialTheme with lightColorScheme and Typography configuration.

Developers implementing Material Design patterns across web and mobile platforms who need reference code for elevation-based components, Material typography scales, and semantic color systems. The source material is structured as implementation guidance rather than a standalone tool.