Material Design 2

Overview

Material Design 2 is Google's foundational design system that emphasizes clarity, hierarchy, and purposeful interaction through a print-inspired aesthetic. The brand embodies "Systematic Minimalism"—a philosophy that strips away ornament to reveal essential structure, using a neutral palette (black, white, grays) punctuated by intentional accent colors (deep purples, reds) for critical actions. The system serves designers and developers building interfaces across Android, Web, Flutter, and iOS platforms. The emotional response is one of calm confidence: users trust Material interfaces because every element has a reason, every color choice signals meaning, and every interaction feels inevitable rather than surprising. The voice is authoritative yet approachable—Material speaks like a senior designer who has solved this problem a thousand times and is sharing the solution without ego. Tone: precise, instructional, never trendy. Example sentence: "Use the primary action button only for the single most important task on the screen; secondary actions belong in the overflow menu."

Colors

Material Design 2 employs a rigorously structured color system rooted in print design and accessibility. Primary (#000000) is pure black—the signature action color for buttons, links, and focus states—chosen for maximum contrast and authority. On-primary (#ffffff) provides the required 21:1 contrast ratio for WCAG AAA compliance on all interactive elements. The surface stack (white #ffffff down to #e0e0e0 for highest container) creates subtle visual hierarchy through luminance alone, never relying on color saturation. Secondary (#424242, a dark gray) supports primary actions and appears in secondary buttons, icons, and disabled states. Tertiary (#6200ee, a deep purple) is reserved for brand-specific highlights, premium features, and accent elements in component libraries—it appears sparing

Typography

The Material 2 type system uses Roboto exclusively, a geometric sans-serif optimized for screen legibility at 16px body size with 24px line-height (1.5x multiplier). Display (60px, 400 weight) is reserved for hero headlines and rarely used; Headline-lg (40px, 400 weight) anchors page sections; Body-md (16px, 400 weight, 0.02em letter-spacing) is the baseline for all body copy and achieves 16px minimum for mobile accessibility. Weight hierarchy is minimal—only label elements use 500 weight to distinguish interactive text from passive content. Letter-spacing increases slightly on smaller sizes (label-sm uses 0.04em) to maintain legibility at 12px. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white text over colored backgrounds when contrast falls below 7:1. Line-height is always unitl

Layout

Material Design 2 uses a 12-column grid with a maximum container width of 1280px, maintaining a 24px gutter between columns and 40px outer margins on desktop. The spacing scale is semantic: unit (8px) is the base increment; sm (12px) for compact spacing within components; md (24px) for section separation and card padding; lg (40px) for major section breaks; xl (64px) for hero-to-content transitions. Responsive behavior: at tablet (768px), reduce gutter to 16px and outer margins to 24px; at mobile (360px), collapse to 16px gutter and 16px margins. White-space is generous—never fill more than 60% of the viewport width with content; the remaining 40% is breathing room that prevents cognitive overload. Cards and containers use md (24px) padding consistently, creating a visual rhythm that users

Elevation & Depth

Material Design 2 conveys depth through a shadow system that mimics physical paper elevation. The system defines three elevation levels: Level 1 (sm shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)) for cards and contained elements at rest; Level 2 (md shadow: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12)) for hovered cards, floating action buttons, and modals; Level 3 (lg shadow: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10)) for dropdowns, popovers, and top-level modals. Shadows use two layers: a larger blur (20px) for ambient shadow and a smaller blur (4px)

Shapes

Material Design 2 embraces "Geometric Clarity"—a shape philosophy that favors sharp corners and minimal rounding to convey precision and control. Border-radius follows a strict scale: sm (2px) for subtle softening on input fields and dividers; DEFAULT (4px) for most UI elements (buttons, chips, cards); md (8px) for slightly more prominent containers; lg (16px) for floating action buttons and elevated modals; xl (22px) for large hero elements and full-width cards; full (9999px) for pills and circular badges. Buttons use lg (16px) to signal interactivity without appearing playful. Cards use md (

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#000000) background with {colors.on-primary} (#ffffff) text, 48px height, 12px 24px padding, and {rounded.lg} (16px border-radius). On hover, darken to #1a1a1a and apply {elevation.lg} shadow (0 10px 20px rgba(0,0,0,0.15)). On active/pressed, maintain #1a1a1a and reduce shadow to {elevation.md}. Disabled state: #bdbdbd background with rgba(0,0,0,0.38) text, no shadow. Button-secondary uses {colors.primary-container} (#e0e0e0) with {colors.on-primary-container} (#212121) text, same dimensions, and {elevation.sm} shadow. Transition all state changes over 235ms cubic-bezier(0.4, 0, 0.2, 1). Chips are compact, pill-shaped buttons (32px height, 8px 16px padding, {rounded.full}) used for filt

Do's and Don'ts

**Do**

• Do use primary (#000000) exclusively for the single most important action per screen; secondary actions belong in secondary buttons or overflow menus.
• Do maintain 24px padding inside cards and containers; this spacing creates visual breathing room and prevents content from feeling cramped.
• Do apply {elevation.md} shadow on hover for interactive elements; this provides tactile feedback without changing color.
• Do use Roboto 400 weight for body text and 500 weight only for labels and interactive text; weight hierarchy must be subtle.
• Do align all elements to 8px increments; this invisible grid creates order and makes layouts feel intentional.
• Do test color contrast ratios; primary text on primary background must achieve 21:1 WCAG AAA compliance.

**Don't**

• Don't introduce new colors for hover/focus states; reuse the existing palette and vary shadow elevation instead.
• Don't use border-radius > 22px on large elements; it undermines Material's geometric precision and reads as trendy.
• Don't apply text-shadow on dark text over light backgrounds; it reduces legibility and adds visual noise.
• Don't mix font families; Roboto is the only typeface in Material 2—no exceptions for headings or accents.
• Don't use opacity to disable interactive elements; always change the background color to #bdbdbd and text to rgba(0,0,0,0.38).
• Don't exceed 60% viewport width for content; white-space is a design tool, not wasted space.