Mica

Live preview base style — press Wear

This month

$2,100

Revenue, up 12% from last month.

Customer	Plan	Status	MRR
Northwind	Studio	Active	$1,240
Acme Labs	Team	Trial	$0
Kaldi Coffee	Studio	Active	$860

Use this style 16 tokens

--bg oklch(93% 0.018 285)
--fg oklch(13% 0.01 285)
--muted oklch(47% 0.012 285)
--surface oklch(99% 0.006 285)
--surface-2 oklch(96% 0.012 285)
--border oklch(83% 0.012 285)
--accent oklch(50% 0.22 248)
--accent-fg oklch(100% 0 0)
--focus oklch(50% 0.22 248)

Token	Value
--font-body	`'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif`
--font-display	`'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif`
--font-mono	`'Cascadia Code', 'Consolas', ui-monospace, monospace`
--radius	`8px`
--radius-sm	`4px`
--shadow	`0 1px 4px oklch(0% 0 0 / 0.06)`
--shadow-lg	`0 6px 20px oklch(0% 0 0 / 0.1)`

:root {
	--bg: oklch(93% 0.018 285);
	--fg: oklch(13% 0.01 285);
	--muted: oklch(47% 0.012 285);
	--surface: oklch(99% 0.006 285);
	--surface-2: oklch(96% 0.012 285);
	--border: oklch(83% 0.012 285);
	--accent: oklch(50% 0.22 248);
	--accent-fg: oklch(100% 0 0);
	--focus: oklch(50% 0.22 248);
	--font-body: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
	--font-display: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
	--font-mono: 'Cascadia Code', 'Consolas', ui-monospace, monospace;
	--radius: 8px;
	--radius-sm: 4px;
	--shadow: 0 1px 4px oklch(0% 0 0 / 0.06);
	--shadow-lg: 0 6px 20px oklch(0% 0 0 / 0.1);
}

Where it came from

Origin: Microsoft Windows 11 Fluent Design System

Mica is a Microsoft material introduced in Windows 11 as part of the Fluent Design System update. Unlike Acrylic (a translucent blur of the content immediately behind it), Mica is opaque and samples only the desktop wallpaper, once — creating a calmer tint that reflects the wallpaper under the window and falls back to a neutral colour when the app is inactive. It gives Windows 11 apps a sense of belonging to the system while remaining readable.

How to spot it

Opaque backdrop tinted by the desktop wallpaper
Falls back to a solid neutral colour when the window is inactive
Two variants — Mica and the stronger-tinted Mica Alt — as the base layer under content layers
Responds to system light and dark mode

Trade-offs

Strengths	Weaknesses
Connects app to system context without full transparency	Requires WinUI 3 / WinAppSDK — not available on web
More legible than fully transparent Acrylic	Tint quality depends on wallpaper colour — can look muddy
Distinctive Windows 11 personality	Subtle effect easy to miss on static screenshots

In the wild

Windows 11 Settings application
Microsoft Store and Xbox apps on Windows 11
Windows 11 File Explorer window chrome

Use it when

Windows 11 desktop apps using WinUI 3, or web UIs evoking a Windows 11 native feeling.