Apple's surface character: translucent glass materials, and the icon/symbol system.
When to use
- Building a frosted/glass panel, nav, sheet, or the Liquid Glass look.
- Designing an app icon (the squircle is not a plain rounded rectangle).
- Using or imitating SF Symbols.
Core rules
- Glass is a layer, not a paint. It samples + blurs what's behind, then tints with vibrant labels. Web approximation:
backdrop-filter: blur() saturate()+ a translucent fill + a light top-edge highlight. CSS can't do Apple's real-time lensing/refraction — approximate, don't pretend. - Never stack glass on glass, and never put low-contrast text on a busy translucent area. Always provide a
prefers-reduced-transparencyopaque fallback. - The squircle is a G2 continuous-curvature shape (community-reverse-engineered Bézier), not
border-radius. Useclip-path/SVG, orcorner-shape: squircle(Chrome 139+, not yet Safari/Firefox). - SF Symbols match font weight + optical size; pick one rendering mode (monochrome / hierarchical / palette / multicolor) deliberately. Don't multicolor everything.
References
| File | Use for |
|---|---|
references/materials-liquid-glass.md |
System material names, Liquid Glass behaviors, CSS glass recipes, SwiftUI .glassEffect(), fidelity limits |
references/iconography-sf-symbols.md |
Squircle math + CSS/SVG, icon grid, SF Symbols weights/scales/modes/effects |
Common mistakes
- Over-blurring everything; glass-on-glass; ignoring reduce-transparency.
- Simple
border-radiusinstead of continuous corners; off-grid icon art. - Mismatched symbol weight vs adjacent text; multicolor overuse.
Related: the material's color/contrast → apple-design-foundations · glass under reduce-transparency → apple-design-tactics.