The dark version uses deep panels with soft borders, so content stands out. A glass style system UI. The control center has toggles, sliders, a media card and shortcuts. The settings screen has a profile and grouped rows.

What is included

• Frosted glass tiles over a color wallpaper
• Brightness and volume sliders
• A now playing card
• A settings list with colored icons
• Switches and chevrons

Where to use it

Use it for a system UI concept or a glass style app.

Design notes

This liquid glass control center and settings follows a simple rule: Mobile layouts need comfortable touch targets. The buttons and rows here are at least 44 pixels tall, and the text stays readable on small screens. It includes frosted glass tiles over a color wallpaper, brightness and volume sliders, a now playing card, so you can start from a finished layout and change only what you need.

Built for editing

Spacing follows a 4 point scale and layers have clear names, so developers can find what they need. Fonts are free on Google Fonts, and every color can be changed from the fill panel. You also get a settings list with colored icons and switches and chevrons.

How to use it

Copy the component with the copy button and paste it into Figma with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can edit text, colors and spacing. The text uses Plus Jakarta Sans and a few free Google Fonts. Install them first so the text looks the same.

Dark version

This listing is the dark version. The light version is listed separately.