Microsoft Fluent Design System 2
CommunityCross-platform Fluent UI with accessible tokens.
Design & Creative#theming#accessibility#cross-platform#design-system#motion#ui-patterns#fluent-design
AuthorGeneralJerel
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Fluent Design System 2 provides a cohesive, cross-platform UI language with theming and accessibility guidelines to streamline design and development workflows.
Core Features & Use Cases
- Token-based theming, scalable typography, spacing, and elevation to maintain visual consistency across platforms.
- Cross-platform components and patterns (buttons, panels, acrylic, and mica surfaces) to deliver coherent Windows, iOS, Android, and web experiences.
- Accessibility-first guidance (contrast, focus indicators, motion guidelines) to meet WCAG AAA targets in light and dark modes.
Quick Start
Refactor your UI to adopt Fluent Design System 2 using the provided tokens, components, and patterns.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: Microsoft Fluent Design System 2 Download link: https://github.com/GeneralJerel/awesome-style-refs/archive/main.zip#microsoft-fluent-design-system-2 Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.