Material Design 3 (M3)

Material Design 3 is the system Google builds Android and its own apps with, documented at m3.material.io, with its code libraries published under open-source licenses (Apache 2.0 for Material Web and Compose, BSD-3-Clause for Flutter); the guidelines content and Google's brand assets are not part of those licenses. It launched with Android 12 in October 2021 as Material You, and its current evolution, M3 Expressive, leans harder into color, shape, and motion, with new components such as toolbars, split buttons, and button groups.

Color is the headline, and it is real engineering Dynamic color starts from one source color and builds five tonal palettes (primary, secondary, tertiary, neutral, neutral variant). Each palette holds the same hue and chroma at stepped tones, and the light and dark schemes assign fixed tones from those palettes to roles like primary, surface, and on-surface. The work happens in HCT (hue, chroma, tone), where tone is designed to track perceived lightness evenly across hues, unlike HSL lightness, which is why a generated scheme stays balanced instead of turning muddy at some hues. The generator itself is open source as Material Color Utilities, so Flutter, web, and third-party implementations produce the same scheme from the same source color.

One caution the marketing version skips: generated does not mean automatically compliant. The scheme's role pairings are designed to meet contrast targets at their assigned tones, but the moment you override a role, place text over imagery, or adopt a user's wallpaper-derived scheme unchanged, the pairings are yours to re-test.

Tokens and adaptive layout Below color, M3 is a token system: reference, system, and component tokens for color, typography, shape, and motion. On the web these surface as CSS custom properties (--md-sys-color-primary and its siblings), so retheming is a token swap. Layout adapts by window size class rather than device type: compact widths get a navigation bar, medium widths a rail, expanded widths a drawer, and components such as search and toolbars restyle at the same breakpoints. Foldables and tablets are where this earns its keep.

Where implementation is strong, and where it is not Android is the home platform and it shows: the Jetpack Compose Material 3 library is where new components land first, and Google states Material on Android is now Compose-first. Flutter is a genuine second platform, with M3 support in the framework's Material library. The web is the weak leg. Material Web (@material/web) is a Lit-based web-components library styled by the same tokens, but it implements a subset of the component set, and its README now lists it as in maintenance mode pending new maintainers, so a web team can follow the M3 guidelines exactly and still end up hand-building components the Android library ships. iOS has no first-party M3 library at all.

What you give up The look. Even themed, M3 products read as Material products, which is a benefit inside the Android ecosystem and a cost for a brand that wants to look like itself first. Dynamic color cuts both ways for the same reason: it personalizes by taking color decisions away from the brand. And the system's touch-first spacing makes dense, data-heavy desktop tooling (the Carbon and Ant Design home ground) a poorer fit.

Bottom line Choose M3 when Android is a primary platform, when you want one token and color foundation shared with Flutter, or when dynamic color is itself a feature. On the web, adopt the guidelines and tokens with your eyes open about Material Web's coverage, and budget for building the missing components to spec.