mobile-ios/docs/blur-materials.md

iOS Blur Materials Reference (from Figma)

All materials use backdrop-blur: 50px (equivalent to UIBlurEffect system radius).

---

Dark Mode Materials

Ultrathin — Dark

Most transparent. Use for subtle overlays, nav bar pills.

Layer	Property
Base fill	rgba(255, 255, 255, 0.07)
Blur layer	backdrop-blur: 50px, rgba(255, 255, 255, 0.03), blend: color-dodge

SwiftUI equivalent: .ultraThinMaterial (note: adds slight grey chromatic tint on pure black)

Thin — Dark

Slight blur. Use for search bars, secondary panels.

Layer	Property
Base fill	rgba(255, 255, 255, 0.05)
Blur layer	backdrop-blur: 50px, rgba(255, 255, 255, 0.40), blend: color-dodge

SwiftUI equivalent: .thinMaterial

Regular (Default) — Dark

Medium blur. Use for tab bars, cards, input bars.

Layer	Property
Base fill	rgba(255, 255, 255, 0.25), blend: plus-lighter
Blur layer	backdrop-blur: 50px, rgba(255, 255, 255, 0.60), blend: color-dodge

SwiftUI equivalent: .regularMaterial

Thick — Dark

Heavy, opaque blur. Use for modal overlays, sheets.

Layer	Property
Fill	rgba(0, 0, 0, 0.60)
Blur	backdrop-blur: 50px

SwiftUI equivalent: .thickMaterial

---

Dark Mode Vibrant Colors (on material backgrounds)

Labels (text over material)

Token	Hex	Usage
Vibrant Primary	#FFFFFF	Main text
Vibrant Secondary	#999999	Subtitle, caption
Vibrant Tertiary	#404040	Hint, placeholder
Vibrant Quaternary	#262626	Disabled text

Fills (elements over material)

Token	Hex	Usage
Vibrant Primary	#333333	Main fill
Vibrant Secondary	#121212	Secondary fill
Vibrant Tertiary	#121212	Tertiary fill

Separator

Token	Hex
Separator	#1A1A1A

---

Dark Theme — Practical Gotchas

1. .thinMaterial / .ultraThinMaterial look grey on dark backgrounds — they add a light chromatic tint. For elements on pure black, use Color.white.opacity(0.08) or the Figma "Ultrathin" recipe: rgba(255,255,255,0.07) base fill.

2. Telegram-style dark fades are LinearGradient with Color.black opacity stops, NOT material blurs.

3. UIVisualEffectView cannot blur SwiftUI content — different rendering layers.

---

iOS Version Mapping

Figma Material	iOS < 26 (SwiftUI)	iOS 26+
Ultrathin	.ultraThinMaterial or Color.white.opacity(0.07)	.glassEffect(.ultraThin)
Thin	.thinMaterial or Color.white.opacity(0.05)	.glassEffect(.thin)
Regular	.regularMaterial	.glassEffect(.regular)
Thick	.thickMaterial or Color.black.opacity(0.6)	.glassEffect(.thick)