Material Design UI design style

Generate coordinated tonal palettes from one or more source colors, then assign semantic roles such as primary, secondary, tertiary, surface, container, outline, and error. Distinguish hierarchy primarily through tonal surface changes rather than heavy shadows; support user personalization, light and dark schemes, accessible contrast, and selectively stronger color relationships in expressive variants. In a daisyUI theme, map the main source-color family to `primary`, its lower-chroma companion to `secondary`, and use three progressively deeper source-tinted surface tones for `base-100`, `base-200`, and `base-300`.

Use imagery inside clearly shaped, cropped, or edge-aligned containers that participate in the layout rather than appearing as detached decoration. Favor approachable photography, bold illustrations, product imagery, or simple graphic compositions; coordinate image crops with surrounding curves, typography, and tonal surfaces while preserving readable overlays and accessible contrast.

Favor medium density with comfortable spacing, large touch targets, and clearly separated interaction zones. Increase density for data-heavy or productivity contexts through compact component variants and responsive panes, but avoid shrinking controls or collapsing hierarchy merely to fit more content.

Use motion to explain navigation, state changes, container transformations, selection, and spatial relationships. Prefer shared-axis transitions, shape morphing, expanding containers, fading state layers, and spring-like movement with coordinated acceleration and deceleration; expressive variants may use greater overshoot, duration contrast, and rhythmic sequencing while routine interactions remain restrained.

Build the interface from rounded rectangles, capsules, circles, and selectively contrasting geometric or organic silhouettes. Apply corner families systematically across components, using shape to communicate hierarchy, emphasis, grouping, and interaction state; combine highly rounded controls with sharper or more unusual containers when stronger expression is appropriate. In daisyUI themes, set the `--radius-*` variables between `0.75rem` and `1.5rem`.

Use a role-based type scale for display, headline, title, body, and label text, with each role defining size, weight, line height, and tracking. Maintain strong hierarchy and readable body text, use weight and scale rather than excessive decoration, align labels closely with their controls, and allow variable width, weight, or emphasized display styles for expressive moments.