Appetite UI Symbol
Appetite UI

Platforms

Your brand, inside Apple and Material.

The native components are already in the file, wearing your colors and type. One dropdown puts everything back to the untouched platform baseline, so the accessibility behavior Apple and Google built stays exactly where it was.

Platform Bridge, mode

Apple, 15 system colors

Role

systemBlue

Value

#2E6BFF

Resolves to

brand/500

Material 3, 32 color roles

Role

sys.color.primary

Value

#2E6BFF

Resolves to

brand/500

Brand mode. Both mirrors resolve to your primitives. Switch the mode and the same roles resolve to the untouched platform defaults instead.

Inside the file

The platform work is a live collection, not a folder of screenshots.

Two mirrors and the bridge between them. The mirrors bind to the bridge, never to your tokens directly, which is what makes one dropdown enough to put everything back.

iOS 26 components in the Figma file wearing brand values

Apple, iOS 26

Fifteen system colors carrying real values in both modes, mapped so your accent lands where Apple intends an accent to land. Navigation, sheets, alerts and controls read from those roles rather than from a flat hex.

Material 3 components in the Figma file wearing brand values

Google, Material 3

Thirty two Material color roles mapped to your brand rather than a screenshot of the baseline. Material was designed to be recolored, so this mirror goes further than the Apple one and still follows the publicly documented Material conventions.

The Platform Bridge collection with Brand and System modes

The Platform Bridge

A separate collection with two modes. Both mirrors bind to it rather than to your tokens, so switching the mode returns the whole file to the untouched platform defaults in one edit.

Limits

Where the branding stops, and why stopping is the point.

A mirror that repaints everything is not a mirror, it is a redraw. These are the places where the platform is doing work you cannot see, and taking them over would quietly break it.

The same screen under increased contrast settings

System semantic colors

They shift with contrast settings, dark mode and vibrancy. Only the tint slot is safe to brand. Repainting label or background hands you an app that quietly ignores a user's accessibility preferences, and you will not see it happen on your own device.

Liquid Glass reacting to content moving behind it

Liquid Glass internals

The material takes luminance and blend inputs, not a fill. A color pass over it produces something that looks correct in a static frame and wrong the moment anything moves behind it. There is no safe way to brand a material that is calculating.

Back behaviour and sheet heights on both platforms

Conventions and gestures

Back behavior, sheet heights, tap targets, where a primary action sits. Users learned these from the operating system, not from your product. Changing them buys you a distinctive screen and costs you a confused user, which is a bad trade every time.

These mirrors carry real token values, not a flat picture of the operating system. One switch moves them between your brand and the untouched platform baseline, in light and dark. Carrying real values is only worth doing if you are also honest about where they should stop.

Start designing. Build faster. Look better.

One-time payment  |  Lifetime updates  |  Works on the free Figma plan