# 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)` |