0design / Library
Mountain View2021UI Style

Material 3

Dynamic softness.

Adaptive, personal, and tactile. Material 3 blends humanist color with elevation cues and personalized palettes.

Interactive Playground

Live components rendered with Material 3 tokens.

Live Preview

Authentication

Secure your account with our new multi-factor authentication system.

Badges & Tags

NewFeaturedBetaPro

Type Scale

Display XL
H1 / 800 / 100%
Heading L
H2 / 600 / 80%

Typography

Primary / Headings

Aa

Secondary / Body

Aa

“The typography in Material 3 relies on geometric clarity.”

Use high contrast for headings. Maintain strict hierarchy and translate the font stack into design tokens so brands can extend the style without guesswork.

Color System

Background
Surface
Accent
Text

Usage Guidelines

When to Use Material 3

Material 3 excels when you need adaptive, personal, and tactile. material 3 blends humanist color with elevation cues and personalized palettes.. This style works best when you want to dynamic softness..

Best Practices

  • •Maintain consistent spacing using the gap-6 grid system.
  • •Use font-sans font-bold tracking-tight for headings and font-sans text-[#4f5b78] for body text.
  • •Apply rounded-2xl for rounded corners and shadow-[0_10px_30px_rgba(15,30,60,0.08)] for depth.

Style Playbook

Google’s Material 3 is tactile minimalism: physics-informed elevation, dynamic color, and adaptive components across Android, web, and beyond.

History

  • •Introduced in 2014 as Material Design, reimagined in 2021 with Material You.
  • •Focus shifted from skeuomorphic paper metaphor to personalized, algorithmic palettes.

Layout Principles

  • •Use 4dp/8dp spacing increments for consistency with native Android components.
  • •Express depth via layered surfaces and shadow tokens rather than drop shadows baked into assets.

Color Guidelines

Dynamic color

Derive palettes from user wallpapers using HCT color space when possible.

Baseline palette

When personalization is unavailable, rely on tonal palettes (primary/secondary/tertiary + neutrals).

Typography

Display & headline

Use Google Sans or Space Grotesk with optical sizing for readability.

Label systems

Map label sizes to component types (Label Large for buttons, Body Small for helper text).

Best For

  • Cross-platform apps
  • Android products
  • Large component libraries needing localization

Watch Outs

  • ⚠️Over-personalization can create low-contrast palettes if not clamped.
  • ⚠️Ignoring elevation tokens breaks the spatial model and confuses users.

Notable Brands

Google WorkspaceSpotify Android refreshAirbnb mobile

Execution Tips

  • →Adopt Material motion curves (Standard, Emphasized, Decelerate) for natural feel.
  • →Keep component specs aligned with the latest M3 guidelines to avoid fragmenting UI between platforms.

AI Palette Generator

Describe a mood, scene, or style (e.g., "Cyberpunk Tokyo Rain" or "Scandinavian Morning"), and let our AI craft the perfect color system.