skills.rest
GeneralJerel
GeneralJerelCOMMUNITY
Explore all skills by this author →
GitHub

Microsoft Fluent Design System 2

Coordinate cross-platform UI design with Fluent Design System 2 tokens and accessibility standards.

Updated Mar 23, 2026
Search Tags:#theming#accessibility#cross-platform#design-system#motion#ui-patterns#fluent-design
One-click install
npx skills add https://github.com/GeneralJerel/awesome-style-refs --skill microsoft-fluent-design-system-2
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Microsoft Fluent Design System 2
Source: https://github.com/GeneralJerel/awesome-style-refs/tree/main/skills/fluent-design
Command: npx skills add https://github.com/GeneralJerel/awesome-style-refs --skill microsoft-fluent-design-system-2

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about Microsoft Fluent Design System 2

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement cross-platform UI theming with consistent design tokens?▼

Cross-platform UI theming uses token-based design to maintain visual consistency across Windows, iOS, Android, and web by applying scalable typography, spacing, and elevation guidelines throughout the application.

What is Fluent Design System 2 and how does it handle accessibility?▼

Fluent Design System 2 is a cohesive UI language that handles accessibility by providing contrast, focus indicator, and motion guidelines to meet WCAG AAA targets in both light and dark modes.

How do I apply acrylic and mica materials for cross-platform app depth and translucency?▼

Acrylic and mica materials are applied as cross-platform component patterns to deliver depth and translucency, ensuring coherent visual experiences across Windows, iOS, Android, and web platforms.

Does Fluent Design System 2 support WCAG AAA contrast in light and dark modes?▼

Yes, Fluent Design System 2 supports WCAG AAA contrast targets by providing accessibility-first guidance for contrast, focus indicators, and motion guidelines across both light and dark modes.

Can I use Fluent UI components for both web and mobile platforms?▼

Yes, you can use Fluent UI components like buttons and panels to deliver coherent cross-platform experiences across Windows, iOS, Android, and web using standard component patterns.

What's the best way to refactor existing UI to adopt token-based design system patterns?▼

Refactoring existing UI to adopt token-based design system patterns involves replacing hardcoded values with scalable typography, spacing, elevation tokens, and standard component patterns to streamline development workflows.

Related Skills

Explore More Design & Creative Skills→
aliciaplsaliciapls

flutter-patterns

Standardize Flutter UI development with reusable design, layout, and testing patterns.

Community
Advanced
VincentH-NetVincentH-Net
7

uno-fluent2

Apply Fluent 2 theme dictionaries and styling overrides to Uno Platform WinUI projects.

Community
Advanced
Community-AccessCommunity-Access
387

design-system

Validate design system tokens for WCAG AA/AAA contrast, focus, and touch target compliance.

Official
Advanced
xiaoliwanshuixiaoliwanshui
21

flutter-theming-apps

Centralize Flutter theming with ThemeData and ColorScheme across platforms.

Community
Intermediate