Skip to content
M3 Expressive

Foundation

Styles

Color roles, type scale, shape library, motion springs, elevation and state layers — every token below comes from src/routes/layout.css and follows the theme controls live.

Theme

Use the Theme panel (palette button in the rail or app bar) to change the seed color, scheme variant, contrast, dark mode, motion scheme and spec version. Everything on this page follows it live.

Static M3 baseline (layout.css) · light · expressive motion

Untouched shadcn components (bridge):

Color roles

All 49 md.sys.color roles for the active light scheme. Utility: bg-<role> / text-<role> (collisions: m3-primary, m3-secondary, m3-background).

Primary

  • primary #6750a4
  • on-primary #ffffff
  • primary-container #eaddff
  • on-primary-container #4f378b
  • primary-fixed #eaddff
  • primary-fixed-dim #d0bcff
  • on-primary-fixed #21005d
  • on-primary-fixed-variant #4f378b
  • inverse-primary #d0bcff
  • surface-tint #6750a4

Secondary

  • secondary #625b71
  • on-secondary #ffffff
  • secondary-container #e8def8
  • on-secondary-container #4a4458
  • secondary-fixed #e8def8
  • secondary-fixed-dim #ccc2dc
  • on-secondary-fixed #1d192b
  • on-secondary-fixed-variant #4a4458

Tertiary

  • tertiary #7d5260
  • on-tertiary #ffffff
  • tertiary-container #ffd8e4
  • on-tertiary-container #633b48
  • tertiary-fixed #ffd8e4
  • tertiary-fixed-dim #efb8c8
  • on-tertiary-fixed #31111d
  • on-tertiary-fixed-variant #633b48

Error

  • error #b3261e
  • on-error #ffffff
  • error-container #f9dedc
  • on-error-container #8c1d18

Surface

  • surface-dim #ded8e1
  • surface #fef7ff
  • surface-bright #fef7ff
  • surface-container-lowest #ffffff
  • surface-container-low #f7f2fa
  • surface-container #f3edf7
  • surface-container-high #ece6f0
  • surface-container-highest #e6e0e9
  • on-surface #1d1b20
  • surface-variant #e7e0ec
  • on-surface-variant #49454f
  • background #fef7ff
  • on-background #1d1b20

Outline, inverse, scrim

  • outline #79747e
  • outline-variant #cac4d0
  • inverse-surface #322f35
  • inverse-on-surface #f5eff7
  • scrim #000000
  • shadow #000000

Type scale

Baseline and emphasized styles. type-* sets family + size + line height + tracking + weight; text-* sets everything but the family. Brand = Google Sans Flex, plain = Roboto Flex; emphasized adds ROND 100.

Display large 57/64 · brand · 400 / 500 .type-display-lg

Expressive type

Emphasized type

Display medium 45/52 · brand · 400 / 500 .type-display-md

Expressive type

Emphasized type

Display small 36/44 · brand · 400 / 500 .type-display-sm

Expressive type

Emphasized type

Headline large 32/40 · brand · 400 / 500 .type-headline-lg

Expressive type

Emphasized type

Headline medium 28/36 · brand · 400 / 500 .type-headline-md

Expressive type

Emphasized type

Headline small 24/32 · brand · 400 / 500 .type-headline-sm

Expressive type

Emphasized type

Title large 22/28 · brand · 400 / 500 .type-title-lg

Expressive type

Emphasized type

Title medium 16/24 · plain · 500 / 600 · +0.15 .type-title-md

Expressive type

Emphasized type

Title small 14/20 · plain · 500 / 600 · +0.1 .type-title-sm

Expressive type

Emphasized type

Body large 16/24 · plain · 400 / 500 · +0.5 .type-body-lg

Expressive type

Emphasized type

Body medium 14/20 · plain · 400 / 500 · +0.25 .type-body-md

Expressive type

Emphasized type

Body small 12/16 · plain · 400 / 500 · +0.4 .type-body-sm

Expressive type

Emphasized type

Label large 14/20 · plain · 500 / 600 · +0.1 .type-label-lg

Expressive type

Emphasized type

Label medium 12/16 · plain · 500 / 600 · +0.5 .type-label-md

Expressive type

Emphasized type

Label small 11/16 · plain · 500 / 600 · +0.5 .type-label-sm

Expressive type

Emphasized type

text-headline-md (no family → font-sans)

Roboto Flex headline

type-headline-md (brand family)

Google Sans Flex headline

text-label-lg-emphasized font-brand

Label emphasized, brand family

text-body-lg font-plain

Body large via text-* utility

Corner radius

rounded-m3-* — the 10-step M3 Expressive corner scale.

  • none 0
  • xs 4
  • sm 8
  • md 12
  • lg 16
  • lg-increased 20
  • xl 28
  • xl-increased 32
  • xxl 48
  • full full

Shape library

The 35 M3 Expressive shapes (RoundedPolygon port of androidx.graphics.shapes). Tap the first tile to morph with a fast-spatial spring.

  • progress 0.000
  • Circle
  • Square
  • Slanted
  • Arch
  • Fan
  • Arrow
  • Semicircle
  • Oval
  • Pill
  • Triangle
  • Diamond
  • Clamshell
  • Pentagon
  • Gem
  • Sunny
  • Very sunny
  • 4-sided cookie
  • 6-sided cookie
  • 7-sided cookie
  • 9-sided cookie
  • 12-sided cookie
  • Ghost-ish
  • 4-leaf clover
  • 8-leaf clover
  • Burst
  • Soft burst
  • Boom
  • Soft boom
  • Flower
  • Puffy
  • Puffy diamond
  • Pixel circle
  • Pixel triangle
  • Bun
  • Heart

Motion

Springs for the expressive scheme as CSS linear() easings (ease-spring-* duration-spring-*), plus legacy easing tokens (ease-m3-* duration-m3-*). Spatial springs overshoot; effects springs never do.

Easing & duration tokens

Elevation

shadow-m3-0 … shadow-m3-5 (key 30% + ambient 15% shadows). Prefer tonal surface-container roles for separation; levels 4–5 are for hover/drag only.

  • Level 0 0dp shadow-m3-0
  • Level 1 1dp shadow-m3-1
  • Level 2 3dp shadow-m3-2
  • Level 3 6dp shadow-m3-3
  • Level 4 8dp shadow-m3-4
  • Level 5 12dp shadow-m3-5

State layers & ripple

{@attach ripple()} — hover 8%, focus-visible 10%, pressed 10% of the content color, ripple grows from the pointer (450ms, min press 225ms). Keyboard: Tab to focus, Space/Enter to press.

Ripple surface Pressed 0 times · role="button"