Stop 08 · Design SystemsTopics · 8/9

Cross-Platform Design Systems

In short

Your brand should feel the same on web, iPhone and Android. But an iPhone user expects iPhone-style controls. Cross-platform systems share the brand and let each platform feel at home.

Maintaining consistency across web, iOS, and Android while respecting each platform's native conventions — a genuine tension between brand consistency and platform-appropriate behavior.

The jaadu stands beside three outfits in matching colours: a shirt, a sweater and a sports T-shirt.

Think of it like this

One school uniform, three seasons

A school keeps the same colours and badge all year. In summer it's a half-sleeve shirt, in winter a sweater, on sports day a T-shirt. Same identity, adapted to the situation. Your system shares tokens and adapts components per platform.

Watch it happen

Shared core, platform branches

Core tokens

Web

iOS

Android

CSS variables

Native controls

Material parts

1/4One shared core: brand colours, type scale, spacing and tone. These stay the same everywhere.

The big ideas

What you need to know

Share the brand

Colours, illustrations, voice and type scale can be identical. That's what makes it feel like your product.

Respect the platform

Pickers, switches and navigation should feel native. Fighting platform habits confuses people.

Tokens travel

One token file can be exported as CSS, Swift and Kotlin values, keeping all platforms in sync.

Decide case by case

For each component, ask: should this be identical everywhere, or feel native? Write the answer down.

Save yourself the pain

Common mistakes

Oops

Making the Android app an exact copy of the iOS design.

Do this instead

Keep the brand, but use Android patterns for navigation, back behaviour and system controls.

Oops

Letting each platform team pick its own colours.

Do this instead

Share one token source so brand values stay identical on every platform.

Your mission

Compare one app on two platforms

~25 min

Quick check

Which is usually best kept identical across web, iOS and Android?

Go deeper

1Compare how a well-known app's design differs subtly between iOS and Android versions.
2Learn where platform conventions (like navigation patterns) should generally be respected, not overridden.
3Identify what should stay identical across platforms (brand, color) versus what should adapt (navigation).