Skip to content
Components
/
Platform Bridge
Dark

Platform Bridge

The layer that puts your brand inside Apple's and Google's own design systems. 112 variables on two modes: Brand resolves a platform role to an Appetite token, System returns the platform's published value. One dropdown moves a whole screen.

What it covers

Appetite UI does not replace the Apple and Material design systems. It names their slots and points each one at a token you control. 112 slots, 52 from Apple and 60 from Material, covering colour, shape and type size. Nothing here redraws a component. It decides where a component reads its value from.

Slot group
Slots
Brand mode reads
System mode reads
iOS colour roles
34
Color Tokens, semantic
platform/ios/*
iOS shape
7
dimensions/radius/*
Apple's own radii
iOS type size
11
typography/fontSize/*
Dynamic Type at Large
Material colour roles
32
Color Tokens, semantic
platform/m3/*
Material shape
6
dimensions/radius/*
Material's own radii
Material state opacity
7
a bare number
the same number
Material type size
15
typography/fontSize/*
published typescale

A second collection, Platform, is easy to confuse with this one and does a different job. It holds 16 variables on three modes, ios-md, ios-lg and android, and it carries geometry rather than colour: min-touch-target 44, 44, 48; bar/top-height 44, 44, 64; control/corner 8, 8, 9999. The two iOS modes differ in exactly one variable, grid/safe-area/top at 59 and 62.

Brand mode

In Brand mode a platform slot stops being a colour and becomes a pointer. iOS/tintColor points at brand/base, which points at colors/blue/500, and that primitive is the only place the hex is written down. M3/sys/color/primary ends on the same primitive, so one edit moves an iOS screen and an Android screen together.

Two platforms, one brand colour, one source. Both accents end on colors/blue/500.

Platform slot
Resolves through
Brand value
iOS/label
text/strong-950colors/gray/950
#0E0E0F
M3/sys/color/on-surface
text/strong-950colors/gray/950
#0E0E0F
iOS/systemRed
state/error/base-500colors/red/500
#FB2C36
M3/sys/color/error
state/error/base-500colors/red/500
#FB2C36
iOS/secondaryLabel
text/sub-700colors/gray/700
#48484A
iOS/separator
border/soft-100colors/gray/100
#E9E9EA
M3/sys/color/tertiary
state/feature/base-500colors/purple/500
#7D52F4

101 of the 112 slots resolve to an Appetite token in Brand mode. The other 11 hold a platform value or a bare number in both modes, and they are named under What does not move.

System mode

Switch the collection to System and every slot drops its pointer and returns the value Apple and Google publish. Nothing is approximated. Those values sit in Color Tokens as 67 untouched platform primitives, stored once and never retyped into a component. It is one switch on the frame, not a rebuild. The screen stops being yours and becomes theirs, which is what a native review asks to see.

Platform slot
Brand mode
System mode
Published as
iOS/tintColor
#155DFC
#007AFF
systemBlue
iOS/secondaryLabel
#48484A
#3C3C43 at 60%
secondaryLabel
iOS/separator
#E9E9EA
#3C3C43 at 18%
separator
iOS/systemGray
#8E8E93
#8E8E93
systemGray
M3/sys/color/primary
#155DFC
#6750A4
Material baseline primary

A few slots land on the same value in both modes without being wired that way. The Appetite grey scale and Apple's systemGray already agree at #8E8E93.

Typography

The Bridge carries type, not only colour. 11 iOS text styles and 15 Material typescale steps each point at an Appetite step in Brand mode and return the platform's own published size in System mode. It carries the size step only, not weight, line height or letter spacing.

Step
Brand points at
Brand
System
iOS/sys/typography/largeTitle
fontSize/4xl
36
34
iOS/sys/typography/title2
fontSize/xl
20
22
iOS/sys/typography/headline
fontSize/lg
18
17
iOS/sys/typography/body
fontSize/lg
18
17
iOS/sys/typography/subheadline
fontSize/sm
14
15
iOS/sys/typography/footnote
fontSize/xs
12
13
iOS/sys/typography/caption2
fontSize/xs
12
11
M3/sys/typescale/display-large
fontSize/6xl
60
57
M3/sys/typescale/headline-large
fontSize/3xl
30
32
M3/sys/typescale/title-large
fontSize/xl
20
22
M3/sys/typescale/label-small
fontSize/xs
12
11

The Appetite scale is coarser than either platform ramp, so steps collapse in Brand mode. iOS headline and body both land on fontSize/lg, and footnote, caption1 and caption2 all land on fontSize/xs. Distinctions Apple draws a point apart do not survive the switch.

What does not move

Fourteen slots are wired to the same source in both modes. Eleven are the ones counted out of the 112 under Brand mode, and the switch cannot reach them. Three run the other way: they take an Appetite token like the other 101, then keep it.

Slots
Count
Value in both modes
M3/sys/state/*
7
Bare numbers, not colours: hover 8, focus 10, pressed 10, dragged 16, disabled 38 and 12, scrim 32.
iOS/glassControl iOS/segmentSelected iOS/glassClear iOS/glassBorderDark
4
An Apple value in Brand mode too. The last is a bare white at 12%, written into the variable itself.
iOS/glassBorder iOS/glassEdge iOS/glassShadow
3
An Appetite glass token in System mode too, because Apple publishes no value for them to return to.

Keeping the Appetite token in those three is the honest result, not a gap.