Apple Design — Materials & Iconography

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-transparency opaque fallback.
• The squircle is a G2 continuous-curvature shape (community-reverse-engineered Bézier), not border-radius. Use clip-path/SVG, or corner-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.