# Material 3 Expressive > Google’s tonal Material You, made bolder: lilac tonal containers, scalloped and clover shapes, springy morphing corners and big FABs. - Nickname: Material You, turned up - Also called: M3 Expressive, Material You Expressive, M3E - Category: Platform Design Systems - Moods: Friendly, Playful, Calm - Industries: Fitness & Wellness, Healthcare, Education, Startup & Tech, Kids & Family - Style page: https://uilingo.dev/styles/material-3-expressive/ 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 ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Material 3 Expressive" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Google’s tonal Material You, made bolder: lilac tonal containers, scalloped and clover shapes, springy morphing corners and big FABs. Design keywords: tonal colour containers, scalloped cookie shapes, shape morphing, springy overshoot motion, big rounded FAB, pill active indicator, emphasized bold headlines, lilac Material You palette. ## Visual language Google's Material You after the 2025 Expressive update: a soft lilac-white canvas (#FEF7FF) where every surface is a tint of one violet seed colour — lavender primary containers, pale pink tertiary containers, grey-lilac fields. Elevation is tonal, not shadowed. Personality comes from shape and motion: 28–40px corners from the radius scale plus a few named shape extras, deliberately mismatched corner radii, a shape library (12-scallop cookie, 9-scallop badge, 4-leaf clover, 8-petal flower) used for icons, avatars and big background forms, and springy overshoot animations where pills morph into rounded squares on press. Headlines are heavy and tight: display, h1 and h2 are Roboto Flex 800. ## Signature details (must be visible) - Tonal colour roles (names match the tokens): primary #6750A4; primary container #EADDFF / on #21005D; secondary container #E8DEF8 / on #1D192B; the 'secondary' token #7D5260 is M3's tertiary colour; the 'accent' token #FFD8E4 is the tertiary container / on #31111D; surface container #F3EDF7; container-highest #E6E0E9 (fields, tracks); outline #79747E - Radius: the token scale (sm 12 / md 20 / lg 28 / xl 40 / pill) plus named extras — --r-sheet 56px (alt-section sheets, CTA panel), --r-hero-cta 24px (giant hero CTA at rest), --r-press 14px (pressed button, stepper buttons), --r-inner 6px (segmented-list inner corners), and mismatched card corners drawn from 12/24/32/48/80px, e.g. --r-tucked '48px 48px 48px 12px' rotated per card ('12px 48px 48px 48px'). The only other exceptions: filter chips 8px, pressed icon button 12px (= sm), checkbox 4px, text-field bottom corners 4px, rail FAB 16px - Shape library — four families as CSS masks with real geometry (viewBox 0 0 100 100, centre 50,50): cookie-12 = 12 rounded bumps (tips r≈49, valleys r≈41); scallop-9 = 9 bumps (tips r≈49, valleys r≈40); clover-4 = 4 round lobes (tips r≈49, waist r≈27); flower-8 = 8 petals (tips r≈49, valleys r≈35). Apply as mask-image: url("data:image/svg+xml,…") with mask-size: contain; mask-repeat: no-repeat; mask-position: center, on a solid background-colour - Shape budget for large decorative shapes (small icon, avatar, logo, eyebrow and step-number masks don't count): the fixed page backdrop is one ≈620px cookie-12 bottom-right (primary container, 60% opacity) + one ≈460px clover-4 bottom-left (tertiary container, 55%), rotating slowly (90s / 120s reverse); on top of it each section may add at most: hero = one scallop-9 behind the product cards; CTA panel = a scallop-9 peeking top-right + a clover-4 bottom-left, both clipped by the panel; every other section adds none. Mobile screens keep one 300px cookie only; dashboard and article fade the backdrop to 30% - Shape morphing on the spring easing cubic-bezier(.34,1.45,.5,1) over ~380ms (radius, scale, position): buttons are pills → 14px rounded square + scale .97 on :active (icon buttons → 12px). The hero CTA is 72px tall: rest 24px → hover pill (999px) → active 14px + scale .97 - Type ladder (Latin): display 800 at −0.035em, line-height 1.02, clamp(3rem,7vw,5.6rem); h1 and h2 800 at −0.025em (the tracking token); h3 and h4 600; the nav brand alone uses −0.02em. Thai: :lang(th) :is(h1,h2,.display){font-weight:700; letter-spacing:0; line-height:1.3} — Mitr 700 is Mitr's heaviest, loaded, never synthesized — and scale the Thai display down to clamp(2.6rem,6vw,4.6rem) so line-height 1.3 doesn't make the hero too tall - Wavy progress indicator: the active part is a 3px sine wave (20px period) over a flat 4px secondary-container track, filling the goal percentage of the track (e.g. 74%); animate it only under prefers-reduced-motion: no-preference, phase-shifting the wave 20px over 1.2s linear, infinite - Elevation: every resting surface is shadow: none. shadow-md only on the FAB, menus and dragged items; shadow-lg only on dialogs (shadow-sm is 'none') ## Design tokens — use these exact values Colours (light mode): - background #FEF7FF - surface #F3EDF7 - surface-2 #ECE6F0 - text #1D1B20 - text-muted #49454F - primary #6750A4 (text on it #FFFFFF) - secondary #7D5260 (text on it #FFFFFF) - accent #FFD8E4 - border #CAC4D0 - success #2E6B30 · warning #8A5300 · danger #B3261E - chart series #6750A4, #D0577B, #3F8F5A, #E39B2E, #A08CD6 Radius: sm 12px, md 20px, lg 28px, xl 40px, pill 999px Border width: 1px Shadows: sm `none`, md `0 1px 2px rgba(29,27,32,0.16), 0 2px 6px 2px rgba(29,27,32,0.08)`, lg `0 4px 8px 3px rgba(29,27,32,0.10), 0 1px 3px rgba(29,27,32,0.18)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.1 density Motion: 380ms cubic-bezier(.34,1.45,.5,1) ## Typography (Latin + Thai) - Headings: Roboto Flex 500/600/800 with Thai fallback Mitr 500/600/700 - Body: Roboto 400/500/700 with Thai fallback Noto Sans Thai 400/500/700 - Google Fonts URL: 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 - CSS stacks: heading `"Roboto Flex", "Mitr", system-ui, sans-serif`; body `"Roboto", "Noto Sans Thai", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3rem, 7vw, 5.6rem), heading weight 800, heading tracking -0.025em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Buttons: filled primary pill (48px, 56px large), filled tonal secondary (secondary container #E8DEF8), text button in primary colour; hover adds a 9% currentColor state layer; press morphs the radius to 14px (icon buttons 12px) and scales 0.97 - Cards: flat surface-container fill (#F3EDF7), no border, no shadow, 28px radius; featured ones in primary/tertiary containers with mismatched corners. The big 2×2 primary bento tile pins its copy to the bottom and shows an oversized 160px cookie in its top-right corner - Bento: 4 columns (2 below 900px), tile 1 spans 2×2, tile 4 spans 2; every row filled — with 6 tiles, tiles 5 and 6 each span 2 columns. Tiles cycle surface container / tertiary / secondary / primary containers with cookie, clover and flower icons - Text fields: filled — container-highest #E6E0E9, 12px top corners, 1px #79747E bottom indicator that becomes 2px primary on focus; search bars are full pills - Filter chips: 8px radius (not pills), 1px #79747E outline; selected = secondary container fill with a leading check mark - Navigation bar (mobile): surface-container background, no border, active icon inside a 64×32 secondary-container pill indicator, bold active label - Switch: 52×32 track; off = outlined track with a small 16px outline-colour thumb; on = primary track with a 24px white thumb - Segmented button: outlined pill split by 1px dividers, selected segment in secondary container with a ✓ - Badges: tonal pills; status badges mix the status colour 15–18% into white - Charts: 4px rounded lines, pill-shaped bars, round-capped donut segments with 9px stroke, capsule heatmap cells ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → features → showcase → stats → testimonials → pricing → faq → cta. Feature section as bento. Landing: top app bar with a scalloped logo and a pill-highlighted current link (secondary container). Split hero with an 800-weight headline, the giant 72px CTA (24px at rest, pill on hover) beside a tonal pill, and the product cards sitting on a huge scallop-9 — the cards are tonal and unshadowed (main chart card on surface container #F3EDF7, side cards in primary and tertiary containers) and the wavy progress indicator sits in the main card under the goal number. Features: the bento of tonal containers with mismatched corners and cookie/clover/flower icons, every row filled. Showcase: an alt section inside a --r-sheet 56px surface-container sheet — copy and a check list beside a white card holding primary-underline tabs and the tonal product mock. Stats: 800-weight primary-colour numbers at −0.04em, clamp(2.6rem,5vw,4rem), straight on the canvas with a muted label below (no card). Testimonials: another --r-sheet 56px surface-container sheet holding white (container-lowest) 28px cards, scallop-9 avatars in tertiary container and a tertiary-colour quote mark. Pricing: 40px cards, featured plan in primary with --r-tucked corners. FAQ: tonal 24px cards that turn primary-container (32/32/32/8 corners) when open. CTA: a 56px-radius primary-container panel with a scallop-9 top-right and a clover-4 bottom-left peeking from the corners. Footer: a surface-container band with 48px top corners. Dashboard: a 96px navigation rail with a 56px rounded-square FAB (16px radius, tertiary container, shadow-md) at the top, icons above labels, the active icon inside a 56×32 secondary-container pill; tonal KPI cards in alternating containers, pill bars, a round-capped donut and a capsule heatmap. ## Content Use realistic product copy (fictional brand) suited to: Android-first consumer apps. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Drop shadows on resting cards (hero product cards included) or hairline borders as the main separator — elevation is tonal - Many unrelated colours — everything must come from one seed palette plus one tertiary - Small 4–8px radii on cards and buttons (8px is reserved for filter chips; 6px only on segmented-list inner corners) - Linear or ease-out-only motion — the style needs a springy overshoot - Thin or light-weight headlines, or faux-bold Thai (load Mitr 700, never request 800 from it) - Wrapping Latin words inside Thai headings in spans to give them negative tracking — on lang=th pages the whole heading gets letter-spacing 0 - Glossy gradients, glass blur or neon glows ## Stack notes One self-contained HTML file with a