Design Glossary

A layout strategy that adjusts structure, navigation, and pane count based on the current window size class, ensuring optimal UX from phones to large desktops.

A 4dp grid to which line heights and vertical spacing align, ensuring consistent rhythm and readability across all text sizes.

A surface that slides up from the bottom of the screen. Standard sheets are non-modal; modal sheets require dismissal before interacting with content behind.

One of four standard responsive layouts (List-Detail, Supporting Panel, Feed, Hero) recommended by M3 for common app patterns across all window size classes.

A semantic assignment like 'primary', 'on-surface', or 'error-container' that maps to a specific tone in a tonal palette. Roles change between light and dark modes.

The complete set of color role assignments for a given mode (light or dark). Generated from tonal palettes by selecting specific tones for each role.

The most specific token layer, defining values for individual component parts. Prefixed with md.comp. These reference system tokens to enable cascading theme changes.

The primary bounding shape of a component (e.g., a button's background rectangle). Containers receive color, shape, and elevation tokens.

A named, platform-agnostic variable that stores a design decision (color, spacing, typography, etc.). Tokens enable consistency, theming, and cross-platform parity.

The length of an animation in milliseconds. M3 defines short (50–200ms), medium (250–400ms), long (450–700ms), and extra-long (800–1000ms) ranges.

A system that generates color schemes at runtime from content (e.g., wallpaper) or user preferences. Introduced in Android 12 as part of Material You.

A timing function that controls acceleration and deceleration of animations. M3 defines standard, emphasized, and emphasized-decelerate curves.

A system for conveying hierarchy using surface tint and shadow. M3 defines 6 levels (0–5), each increasing in dp-offset shadow and tonal surface overlay.

Floating Action Button — a prominent circular or rounded-rectangular button for the screen's primary action. Available in small, regular, and large sizes.

Hue-Chroma-Tone, a perceptually uniform color space created by Google for Material Design 3. Unlike HSL, HCT guarantees that equal tone differences produce equal perceived lightness differences.

A system of columns, margins, and gutters that structures content placement. The number of columns scales with window size class: 4 (compact), 8 (medium), 12 (expanded).

Google's personalization vision introduced with Android 12 that combines dynamic color, adaptive layouts, and user-driven customization into a cohesive system.

A horizontal bottom navigation component for compact screens. Shows 3–5 destinations with icons and labels.

A side panel navigation component for expanded screens (840dp+). Shows destinations with icons, labels, and optional badges.

A vertical navigation component shown on medium-width screens (600–839dp). Provides 3–7 destination icons with optional labels.

A distinct content region within a canonical layout. Compact screens show one pane; expanded screens may show two or three side by side.

The base layer of the M3 token hierarchy containing raw, absolute values (hex colors, pixel sizes). Prefixed with md.ref. These never change with theme.

A radial ink-spread animation originating from the touch point, providing tactile feedback on interactive surfaces. The ripple uses the on-surface color at state-layer opacity.

The single input color from which the entire M3 color scheme is derived. The seed is analyzed in HCT space to generate primary, secondary, tertiary, neutral, and error tonal palettes.

The corner rounding of component containers. M3 defines a scale from None (0dp) through Extra Small (4dp), Small (8dp), Medium (12dp), Large (16dp), Extra Large (28dp), to Full (pill).

A semi-transparent overlay applied to a component's container that indicates its interaction state: hover (8%), focus (10%), pressed (10%), or dragged (16%).

A set of five surface color roles (lowest, low, default, high, highest) that provide tonal variety for layered surfaces without using shadows.

A translucent overlay of the primary color applied to surfaces at higher elevations. Replaces shadow-based elevation in dark mode to maintain visual hierarchy.

The semantic layer mapping meaning to reference values. Prefixed with md.sys. System tokens change between light/dark mode and custom themes.

A set of 13 tones (0–100) generated from a single hue and chroma value. Each palette provides the raw color values used by the color scheme roles.

The lightness dimension in HCT color space, ranging from 0 (black) to 100 (white). A tone difference of 40+ ensures WCAG AA contrast (4.5:1) for normal text.

The minimum tappable area for interactive elements, set to 48×48dp in M3 to ensure accessible interaction regardless of visual component size.

A reusable animation recipe combining easing, duration, and property targeting for common UI changes like enter, exit, fade, and shared-axis transforms.

The semantic function of a type scale entry (e.g., 'headline-large' for page headings, 'label-medium' for button text). Roles map to specific font family, weight, size, and tracking values.

The predefined set of text styles (Display, Headline, Title, Body, Label) at three sizes each (Large, Medium, Small), totaling 15 styles.

A breakpoint classification (Compact, Medium, Expanded, Large, Extra-large) that determines the number of layout columns, navigation pattern, and pane configuration.