explainx.ainewsletter3.4k
Back to designs

DESIGN.md · explainx registry

Google (Material 3)

Material 3 (Material You) is Google’s latest evolution of its design language. It is defined by personalization, accessibility, and an adaptive color system that responds to the user's environment.

Design System#design#ui#ux#template
Get a custom design.md for your product
DESIGN.md (markdown body)
name
Google (Material 3)
colors
background: "#fef7ff" foreground: "#1d1b20" brand: "#6750a4" # Primary muted: "#49454f" # Outline/Muted border: "#79747e" # Outline card: "#f3edf7" # Surface Variant accent: "#625b71" # Secondary success: "#24a148" danger: "#b3261e" # Error dark: background: "#141218" foreground: "#e6e1e5" muted: "#cac4d0" border: "#938f99" card: "#211f26" accent: "#ccc2dc"
typography
fontFamily: sans: "Roboto, system-ui, -apple-system, sans-serif" mono: "Roboto Mono, monospace" body: fontSize: "16px" lineHeight: "1.5" fontWeight: "400" heading: fontWeight: "500" letterSpacing: "0"
rounded
default: "12px" # M3 uses 12px for cards/buttons by default md: "12px" lg: "16px" full: "9999px"

Design System: Google (Material 3)

Overview

Material 3 (Material You) is Google’s latest evolution of its design language. It is defined by personalization, accessibility, and an adaptive color system that responds to the user's environment.

Design Philosophy

  1. Material You: The brand is the user. The system uses dynamic color extraction to create a unique tonal palette based on the user's wallpaper.
  2. Adaptive Accessibility: Uses a tonal palette system (0–100) to guarantee contrast ratios across any color combination.
  3. Personal & Expressive: Moves away from the rigid grid of Material 2 toward softer shapes, larger interactive targets, and playful motion.
  4. Coherent Hierarchy: Uses three tiers of tokens (Reference, System, Component) to manage complexity across platforms.

Colors

  • The Tonal System: Colors are defined by their luminance rather than just hue. Primary, Secondary, and Tertiary roles each have their own tonal range.
  • Surface Variant: Used for secondary containers and cards to create subtle depth without relying on heavy shadows.
  • On-Colors: A strict system where every background color has a corresponding "On" color (e.g., On Primary) for high-contrast text and icons.

Typography

  • Roboto & Roboto Flex: The primary font family, engineered for maximum legibility and flexibility in both digital and print.
  • Variable Weights: Uses variable font technology to subtly shift weights based on the user's device or environment.

Components

  • FAB (Floating Action Button): Now often larger and square-rounded (16px) rather than a perfect circle.
  • Navigation Bar: A horizontal bottom bar with large, rounded pill-shaped indicators for the active state.
  • Cards: Feature a standard 12px rounding and often use the "Surface Variant" color instead of a border.

Visual Effects

  • Dynamic Color: The primary visual flourish. The entire UI shifts its hue to match the user's context.
  • Soft Shadows: Uses very subtle, multi-layered shadows that feel more like "ambient occlusion" than traditional drop shadows.
  • State Layers: Interactive elements use an overlay (usually 8% to 12% opacity) to indicate hover and focus states.

Usage

  1. Copy DESIGN.md into your project or paste it into your IDE agent chat.
  2. Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
  3. When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.

Common questions

What is Google (Material 3) on explainx.ai?
Material 3 (Material You) is Google’s latest evolution of its design language. It is defined by personalization, accessibility, and an adaptive color system that responds to the user's environment. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
What is DESIGN.md?
DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
Where is the source repo?
Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
How current is this DESIGN.md?
Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
Need a fresh DESIGN.md from scratch?
Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.

Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.

Reference →DESIGN.md generator →Skills registry →

List Your Design.md

Share your design system with AI agents worldwide

GET_STARTED →