Material Design 3

Google's current design system: tonal color roles generated from a seed color, Roboto typography, five-step shape scale, tonal elevation instead of heavy shadows, and emphasized motion easing. The baseline light scheme uses a violet seed.

Primary action

Card

Signature element

Tonal color pairs — every fill color has a matching 'on-' color and a soft 'container' variant — plus pill-shaped filled buttons and 12–28px rounded surfaces.

Palette

bg
#fffbfe
surface
#f7f2fa
surface-variant
#e7e0ec
text
#1c1b1f
text-muted
#49454f
accent
#6750a4
on-accent
#ffffff
accent-container
#eaddff
on-accent-container
#21005d
error
#b3261e
border
#79747e