material-design

Material Design

"Digital paper and ink. Interfaces built on the physical properties of stacked material."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Z-Axis Elevation: Everything exists on a specific layer. Shadows communicate hierarchy and state.
2. Meaningful Motion: Animations are continuous, guiding the user's focus from one state to the next (e.g., ripple effects, shared element transitions).
3. Structured Layout: Strict adherence to an 8dp baseline grid and specific component anatomies (cards, FABs, app bars).

Visual DNA

• Colors: Works excellently with Desert Mirage or Minimalist Slate. Utilize primary, secondary, surface, and error semantic mapping.
• Typography: Roboto or Google Sans (or equivalent clean geometric sans). Stick strictly to the Material Type Scale (H1-H6, Subtitle, Body, Caption, Overline).
• Shapes: Moderately rounded corners (4px to 16px).

Web Implementation

• Do not reinvent the wheel: mimic standard Material elevations.
• CSS Example:

.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