Material 3 Expressive

Also called: M3 Expressive, Material You Expressive, M3E

Google’s tonal Material You, made bolder: lilac tonal containers, scalloped and clover shapes, springy morphing corners and big FABs.

“Material You, turned up”Platform Design SystemsEra: 2025 → today (Android 16)FriendlyPlayfulCalm

Open full screen ↗

material-3-expressive / landingEN

material-3-expressive / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm12pxRadius md20pxRadius lg28pxRadius xl40pxDensity×1.1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

tonal colour containersscalloped cookie shapesshape morphingspringy overshoot motionbig rounded FABpill active indicatoremphasized bold headlineslilac Material You palette

Material 3 Expressive keeps Material You’s tonal palette (every surface is a tint of one seed colour) and pushes it: heavier emphasized headlines, extra-large 28–40px corners, a shape library of cookies, clovers and flowers used for icons and avatars, and springy motion where buttons morph from pill to rounded square when pressed. Surfaces are flat tonal fills rather than shadows; colour roles (primary, secondary, tertiary containers) do the hierarchy.

Best for

Android-first consumer apps
Wellness, habit and health trackers
Friendly onboarding and settings flows
Products already using Material components (Compose, MDC, Flutter)

Avoid for

Luxury or editorial brands that need restraint
Dense enterprise data tools
iOS-only apps that should feel native to Apple

✓ Do

Derive every surface from one seed colour as tonal containers (primary/secondary/tertiary container)
Use 28px+ corners on cards and a 9/12-scallop shape for avatars and icons
Use one spring easing (overshoot) for press and hover morphs — pill → 14px rounded square (icon buttons 12px)
Give filter chips an 8px radius (the one deliberate small radius) with a check mark when selected
Keep resting surfaces shadowless; shadow-md only on the FAB, menus and dragged items, shadow-lg only on dialogs

✕ Don't

Don’t add drop shadows to every card — elevation is tonal
Don’t pile up big decorative shapes — one fixed cookie + clover backdrop, plus at most one large shape per section (hero scallop; CTA scallop + clover)
Don’t use hairline 1px outlines as the main separator

Not to be confused with

Flat Design →Flat design uses many unrelated bright colours with small radii; M3 Expressive uses tints of one seed colour, huge corners and scalloped shapes.Claymorphism →Claymorphism inflates surfaces with soft inner and drop shadows; M3 Expressive stays flat and tonal, its playfulness comes from shape and motion.Dopamine Design →Dopamine design throws saturated clashing colours at you; M3 Expressive is harmonious tonal lilac with one tertiary pink.

On mobile

This is its home turf: navigation bar with a 64×32 pill indicator behind the active icon, filled tonal cards with 28px corners, 8px-radius filter chips, scalloped avatars and a large rounded-square FAB. Keep the spring easing short (≈350ms) and only morph shape on press.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinRoboto Flex · 500/600/800

The quick brown fox

Heading · ThaiMitr · 500/600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinRoboto · 400/500/700

Clear words make shared decisions.

Body · ThaiNoto Sans Thai · 400/500/700

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Mitr’s chunky rounded strokes carry the same friendly, heavy emphasis as Roboto Flex headlines; Noto Sans Thai is Google’s own loopless companion to Roboto for body text.

Colour palette

Light

Dark

Design tokens

Radius	`sm 12px · md 20px · lg 28px · xl 40px · pill 999px`
Border	`1px`
Shadow	`0 1px 2px rgba(29,27,32,0.16), 0 2px 6px 2px rgba(29,27,32,0.08)`
Display	`clamp(3rem, 7vw, 5.6rem)`
Motion	`380ms cubic-bezier(.34,1.45,.5,1)`
Density	`×1.1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Material 3 Expressive (material-3-expressive) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@500;600;800&family=Roboto:wght@400;500;700&family=Mitr:wght@500;600;700&family=Noto+Sans+Thai:wght@400;500;700&display=swap
 */
:root {
  --radius: 28px;
  --background: #FEF7FF;
  --foreground: #1D1B20;
  --card: #F3EDF7;
  --card-foreground: #1D1B20;
  --popover: #F3EDF7;
  --popover-foreground: #1D1B20;
  --primary: #6750A4;
  --primary-foreground: #FFFFFF;
  --secondary: #7D5260;
  --secondary-foreground: #FFFFFF;
  --muted: #ECE6F0;
  --muted-foreground: #49454F;
  --accent: #ECE6F0;
  --accent-foreground: #1D1B20;
  --destructive: #B3261E;
  --border: #CAC4D0;
  --input: #CAC4D0;
  --ring: #6750A4;
  --chart-1: #6750A4;
  --chart-2: #D0577B;
  --chart-3: #3F8F5A;
  --chart-4: #E39B2E;
  --chart-5: #A08CD6;
  --sidebar: #F3EDF7;
  --sidebar-foreground: #1D1B20;
  --sidebar-primary: #6750A4;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #ECE6F0;
  --sidebar-accent-foreground: #1D1B20;
  --sidebar-border: #CAC4D0;
  --sidebar-ring: #6750A4;
}

.dark {
  --background: #141218;
  --foreground: #E6E0E9;
  --card: #211F26;
  --card-foreground: #E6E0E9;
  --popover: #211F26;
  --popover-foreground: #E6E0E9;
  --primary: #D0BCFF;
  --primary-foreground: #381E72;
  --secondary: #EFB8C8;
  --secondary-foreground: #492532;
  --muted: #2B2930;
  --muted-foreground: #CAC4D0;
  --accent: #2B2930;
  --accent-foreground: #E6E0E9;
  --destructive: #F2B8B5;
  --border: #49454F;
  --input: #49454F;
  --ring: #D0BCFF;
  --chart-1: #D0BCFF;
  --chart-2: #EFB8C8;
  --chart-3: #9CD67D;
  --chart-4: #FFB870;
  --chart-5: #B0C6FF;
  --sidebar: #211F26;
  --sidebar-foreground: #E6E0E9;
  --sidebar-primary: #D0BCFF;
  --sidebar-primary-foreground: #381E72;
  --sidebar-accent: #2B2930;
  --sidebar-accent-foreground: #E6E0E9;
  --sidebar-border: #49454F;
  --sidebar-ring: #D0BCFF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Material 3 Expressive (material-3-expressive) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@500;600;800&family=Roboto:wght@400;500;700&family=Mitr:wght@500;600;700&family=Noto+Sans+Thai:wght@400;500;700&display=swap
 */
@theme {
  --color-bg: #FEF7FF;
  --color-surface: #F3EDF7;
  --color-surface-2: #ECE6F0;
  --color-text: #1D1B20;
  --color-text-muted: #49454F;
  --color-primary: #6750A4;
  --color-on-primary: #FFFFFF;
  --color-secondary: #7D5260;
  --color-on-secondary: #FFFFFF;
  --color-accent: #FFD8E4;
  --color-border: #CAC4D0;
  --color-success: #2E6B30;
  --color-warning: #8A5300;
  --color-danger: #B3261E;
  --color-chart-1: #6750A4;
  --color-chart-2: #D0577B;
  --color-chart-3: #3F8F5A;
  --color-chart-4: #E39B2E;
  --color-chart-5: #A08CD6;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 1px 2px rgba(29,27,32,0.16), 0 2px 6px 2px rgba(29,27,32,0.08);
  --shadow-lg: 0 4px 8px 3px rgba(29,27,32,0.10), 0 1px 3px rgba(29,27,32,0.18);
  --font-heading: "Roboto Flex", "Mitr", system-ui, sans-serif;
  --font-body: "Roboto", "Noto Sans Thai", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace;
}

.dark {
  --color-bg: #141218;
  --color-surface: #211F26;
  --color-surface-2: #2B2930;
  --color-text: #E6E0E9;
  --color-text-muted: #CAC4D0;
  --color-primary: #D0BCFF;
  --color-on-primary: #381E72;
  --color-secondary: #EFB8C8;
  --color-on-secondary: #492532;
  --color-accent: #633B48;
  --color-border: #49454F;
  --color-success: #9CD67D;
  --color-warning: #FFB870;
  --color-danger: #F2B8B5;
  --color-chart-1: #D0BCFF;
  --color-chart-2: #EFB8C8;
  --color-chart-3: #9CD67D;
  --color-chart-4: #FFB870;
  --color-chart-5: #B0C6FF;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Material 3 Expressive (material-3-expressive). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@500;600;800&family=Roboto:wght@400;500;700&family=Mitr:wght@500;600;700&family=Noto+Sans+Thai:wght@400;500;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9961,
            0.9686,
            1
          ],
          "hex": "#fef7ff"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9294,
            0.9686
          ],
          "hex": "#f3edf7"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9255,
            0.902,
            0.9412
          ],
          "hex": "#ece6f0"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1137,
            0.1059,
            0.1255
          ],
          "hex": "#1d1b20"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2863,
            0.2706,
            0.3098
          ],
          "hex": "#49454f"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4039,
            0.3137,
            0.6431
          ],
          "hex": "#6750a4"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4902,
            0.3216,
            0.3765
          ],
          "hex": "#7d5260"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8471,
            0.8941
          ],
          "hex": "#ffd8e4"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7922,
            0.7686,
            0.8157
          ],
          "hex": "#cac4d0"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.4196,
            0.1882
          ],
          "hex": "#2e6b30"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5412,
            0.3255,
            0
          ],
          "hex": "#8a5300"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.702,
            0.149,
            0.1176
          ],
          "hex": "#b3261e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4039,
            0.3137,
            0.6431
          ],
          "hex": "#6750a4"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8157,
            0.3412,
            0.4824
          ],
          "hex": "#d0577b"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.5608,
            0.3529
          ],
          "hex": "#3f8f5a"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.6078,
            0.1804
          ],
          "hex": "#e39b2e"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6275,
            0.549,
            0.8392
          ],
          "hex": "#a08cd6"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0706,
            0.0941
          ],
          "hex": "#141218"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1294,
            0.1216,
            0.149
          ],
          "hex": "#211f26"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1608,
            0.1882
          ],
          "hex": "#2b2930"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.8784,
            0.9137
          ],
          "hex": "#e6e0e9"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7922,
            0.7686,
            0.8157
          ],
          "hex": "#cac4d0"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8157,
            0.7373,
            1
          ],
          "hex": "#d0bcff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2196,
            0.1176,
            0.4471
          ],
          "hex": "#381e72"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9373,
            0.7216,
            0.7843
          ],
          "hex": "#efb8c8"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2863,
            0.1451,
            0.1961
          ],
          "hex": "#492532"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3882,
            0.2314,
            0.2824
          ],
          "hex": "#633b48"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2863,
            0.2706,
            0.3098
          ],
          "hex": "#49454f"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6118,
            0.8392,
            0.4902
          ],
          "hex": "#9cd67d"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7216,
            0.4392
          ],
          "hex": "#ffb870"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7216,
            0.7098
          ],
          "hex": "#f2b8b5"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8157,
            0.7373,
            1
          ],
          "hex": "#d0bcff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9373,
            0.7216,
            0.7843
          ],
          "hex": "#efb8c8"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6118,
            0.8392,
            0.4902
          ],
          "hex": "#9cd67d"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7216,
            0.4392
          ],
          "hex": "#ffb870"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6902,
            0.7765,
            1
          ],
          "hex": "#b0c6ff"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 40,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1137,
              0.1059,
              0.1255
            ],
            "hex": "#1d1b20",
            "alpha": 0.16
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1137,
              0.1059,
              0.1255
            ],
            "hex": "#1d1b20",
            "alpha": 0.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 6,
            "unit": "px"
          },
          "spread": {
            "value": 2,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1137,
              0.1059,
              0.1255
            ],
            "hex": "#1d1b20",
            "alpha": 0.1
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 8,
            "unit": "px"
          },
          "spread": {
            "value": 3,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1137,
              0.1059,
              0.1255
            ],
            "hex": "#1d1b20",
            "alpha": 0.18
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 3,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Roboto Flex",
        "Mitr",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Roboto",
        "Noto Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Noto Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 800
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 380,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.34,
      1.45,
      0.5,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!