Design language
Switcher 5G follows Material 3 Expressive and borrows its components from Petal. Everything below is live, so tap, press and switch themes to see it work.
Shaped icon badges
Icons sit on expressive shapes instead of plain circles. The app draws them with RoundedPolygon. This site uses the same four shapes as CSS clip paths.
Cookie, sunny, clover and flower. Each screen picks a shape to tell sections apart.
Connected containment
Related rows join into one group. The outer corners are 28dp. Corners between rows are only 6dp, so they read as one object with seams.
Corner radius
Toggle button group
Pick-one settings use a connected group instead of chips or sliders. The chosen button becomes a full pill.
Pill buttons that morph
Buttons are full pills. When you press one, the corners tighten to a rounded square and spring back on release.
Press and hold to see the morph. It also works with the keyboard: hold Space or Enter.
Contained loading indicator
One loader is used everywhere: a shape that morphs through cookie, sunny, clover and flower inside a rounded container. It replaces spinners and progress bars.
Sizes
In a button
Buttons swap their icon for a small loader while they work.
Color: palettes, modes and AMOLED
Four palettes ship with the app: Tide (default), Zen, Ember and Forest. Each has a light and a dark scheme, plus a pure black AMOLED option. Every text pair meets WCAG AA contrast.
Try a palette
Color roles
The site stores your choice in the data-theme-mode, data-palette and data-amoled attributes on the page, driven by CSS variables. In the app, Android 12+ can also use Material You colors from your wallpaper.
Spring motion
Things move with a little overshoot, like a spring, then settle. Press the button to see it. If your device is set to reduce motion, the site skips these animations.
Predictive back and depth blur
In the app, swiping back shows a live preview of the screen behind with rounded corners and a soft blur. Turn it off in Settings if you prefer a plain transition.