Logoskills for everything
Agent Skill
2/28/2026

material-design

Google Material Design 3 guidelines for creating beautiful, accessible, and consistent user interfaces. Use when building UI components, designing color schemes, applying typography, creating layouts, or styling any web/mobile application following Material Design principles. Triggers on requests for Material Design, M3, Material You, Google design system, or UI/UX design following Google guidelines.

S
seraphin
0GitHub Stars
28Views
npx skills add seraphin-angel/claude_glm_2

SKILL.md

Namematerial-design
DescriptionGoogle Material Design 3 guidelines for creating beautiful, accessible, and consistent user interfaces. Use when building UI components, designing color schemes, applying typography, creating layouts, or styling any web/mobile application following Material Design principles. Triggers on requests for Material Design, M3, Material You, Google design system, or UI/UX design following Google guidelines.

name: material-design description: Google Material Design 3 guidelines for creating beautiful, accessible, and consistent user interfaces. Use when building UI components, designing color schemes, applying typography, creating layouts, or styling any web/mobile application following Material Design principles. Triggers on requests for Material Design, M3, Material You, Google design system, or UI/UX design following Google guidelines.

Material Design 3

Apply Google's Material Design 3 (M3) system to create expressive, accessible, and consistent user interfaces.

Core Principles

  1. Personal - Dynamic color adapts to user preferences
  2. Adaptive - Responsive layouts for all screen sizes
  3. Expressive - Vibrant styles with emotional impact

Quick Reference

Color System

M3 uses a tonal palette system with key color roles:

RoleUsage
PrimaryKey components, active states
SecondaryLess prominent components
TertiaryContrasting accents
SurfaceBackgrounds, cards
ErrorError states, destructive actions

Each role has container and on-container variants (e.g., primary, on-primary, primary-container, on-primary-container).

Typography Scale

StyleSizeWeightUse Case
Display Large57px400Hero text
Display Medium45px400Large headers
Display Small36px400Section headers
Headline Large32px400Page titles
Headline Medium28px400Card titles
Headline Small24px400Subsections
Title Large22px400Dialog titles
Title Medium16px500List headers
Title Small14px500Tabs
Body Large16px400Primary content
Body Medium14px400Secondary content
Body Small12px400Captions
Label Large14px500Buttons
Label Medium12px500Navigation
Label Small11px500Badges

Shape Scale

CategoryCorner Radius
None0dp
Extra Small4dp
Small8dp
Medium12dp
Large16dp
Extra Large28dp
Full50% (circular)

Elevation Levels

LevelElevationUsage
00dpFlat surfaces
11dpCards, search bars
23dpButtons, menus
36dpFABs, navigation drawers
48dpSide sheets
512dpDialogs, modals

Detailed Guides

Implementation Workflow

  1. Define brand colors using the M3 color system
  2. Generate tonal palettes from source colors
  3. Apply typography scale consistently
  4. Use appropriate elevation and shape for components
  5. Ensure color contrast meets accessibility standards (WCAG 2.1 AA minimum)

Accessibility Requirements

  • Maintain 4.5:1 contrast ratio for normal text
  • Maintain 3:1 contrast ratio for large text and UI components
  • Support reduced motion preferences
  • Provide sufficient touch targets (minimum 48x48dp)
Skills Info
Original Name:material-designAuthor:seraphin
Download
View on GitHub