frontend-material-design-3
Skill4 starsChanged 5 months agoMITView on GitHub
Material Design 3 (Material You) patterns for dashboards and web apps. Use for M3 components, design tokens, color system, tonal elevation, navigation patterns, canonical layouts, or dashboard layouts. Covers Angular Material and Svelte implementations.
In this repository101 other files it gives its agents.
- ai-video-understandingSkill
- apple-foundation-modelsSkill
- arch-dddSkill
- arch-decision-recordsSkill
- arch-diagramsSkill
- arch-eventsSkill
- arch-mvp-roadmapSkill
- arch-python-modernSkill
- aws-app-runnerSkill
- aws-cicd-patternsSkill
- aws-security-hardeningSkill
- azure-functions-python-v2Skill
- azure-identity-m2m-authSkill
- azure-service-bus-messagingSkill
- azure-workflow-execution-modelsSkill
- caddy-tls-proxySkill
- compliance-frameworksSkill
- design-system-workflowSkill
- dev-debugging-strategiesSkill
- dev-standardsSkill
- docker-python-poetrySkill
- docker-pythonSkill
- fastapi-patternsSkill
- ffmpeg-laravel-videoSkill
- formik-yup-react-nativeSkill
- frontend-accessibilitySkill
- frontend-angular-aiSkill
- frontend-angularSkill
- frontend-angular-toolingSkill
- frontend-design-systemsSkill
- frontend-material-chatSkill
- frontend-svelteSkill
- gcp-cicd-patternsSkill
- gcp-cloud-runSkill
- gcp-cloudsql-infrastructureSkill
- gcp-finopsSkill
- gcp-observabilitySkill
- gcp-security-hardeningSkill
- github-actions-cicdSkill
- healthkit-biofeedbackSkill
- infra-terraformSkill
- ios-app-qualitySkill
- ios-audio-hapticsSkill
- jest-nestjs-testingSkill
- langchain-azure-openai-patternsSkill
- laravel-auth-hardeningSkill
- laravel-ci-mysqlSkill
- laravel-mix-webpackSkill
- laravel-modern-patternsSkill
- laravel-pint-patternsSkill
- laravel-s3-storageSkill
- laravel-sail-dockerSkill
- mobile-app-deploymentSkill
- mobile-e2e-testingSkill
- mobile-offline-syncSkill
- mobile-push-notificationsSkill
- mobile-video-uploadSkill
- mongodb-asyncmongoclient-patternsSkill
- mongodb-atlas-patternsSkill
- nestjs-patternsSkill
- The first 60 shown.
The file
Files
Material Design 3 Patterns
M3 is Google's design system emphasizing dynamic color, personalization, and accessibility.
Key Pillars
| Pillar | Description |
| Dynamic Color | System-driven color from source color or user preferences |
| Tonal Elevation | Surface tints replace drop shadows (5-14% opacity) |
| Typography | 15-token scale: Display, Headline, Title, Body, Label |
| Motion | Physics-based animations (M3 Expressive, 2025) |
Color Roles Quick Reference
| Role | Purpose | Light | Dark |
primary | Key actions | Tone 40 | Tone 80 |
on-primary | Text on primary | Tone 100 | Tone 20 |
surface | Background | Tone 99 | Tone 10 |
on-surface | Default text | Tone 10 | Tone 90 |
surface-variant | Differentiated areas | Tone 90 | Tone 30 |
Window Size Classes
| Class | Width | Navigation |
| Compact | 0-599dp | Bottom nav bar |
| Medium | 600-839dp | Navigation rail |
| Expanded | 840dp+ | Navigation drawer |
Canonical Layouts
| Layout | Use Case |
| List-Detail | Email, file browsers, settings |
| Supporting Pane | Document + properties, chat + context |
| Feed | Social feeds, news, product catalogs |
Quick Example
/* M3 Token Usage */
.card {
background: var(--md-sys-color-surface);
color: var(--md-sys-color-on-surface);
border-radius: var(--md-sys-shape-corner-medium, 12px);
}When NOT to Use
- Simple static pages (hand-code faster)
- Non-Google ecosystem projects preferring other systems (Carbon, Fluent)
- Projects requiring M2 backwards compatibility
See reference.md for complete token system, Angular/Svelte setup, and component patterns.
See examples.md for dashboard implementations and theme switching.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.