Material's own patterns, rebuilt as Figma components. Every layer reads a token, so one screen carries your brand or drops back to the untouched system values without a single detach.
This is not a replacement for the Material 3 kit. It is the layer that puts your brand inside it.
Each pattern is rebuilt on Appetite tokens. The structure stays Material: the same anatomy, the same spacing, the same behaviour a user already knows. Colour, type, shape and elevation come from your system, so an App Bar or a Dialog reads as Material and reads as yours at the same time.
The Platform Bridge holds both readings at once. Brand mode resolves every Material role to an Appetite token. System mode resolves them back to Material's own baseline, untouched. One swap on one collection, and there is no second set of screens to keep in sync.
Brand and system
Platform Bridge is one collection with two modes. Every Material role in it is an alias, never a literal, so switching the mode on a frame moves the whole mirror at once.
Geometry owned by the platform holds either way: the android switch track is 52 by 32, list rows 56, the touch target 48. Nothing is repainted and nothing is detached.
What is covered
Seventeen pattern pages in the Material mirror, one row each. Counted in the Figma file, not estimated.
Pattern page
Sets
Components
Status Bar
0
1
App Bar
1
4
Switch
1
4
Checkbox
1
6
Radio Button
1
4
Card
1
3
Chip
1
8
Text Field
1
8
List
1
6
Navigation Bar
2
7
Button
8
270
Dialog
6
20
Picker
12
93
Sheet
4
12
Snackbar
2
14
Tooltip
0
2
Keyboard
1
8
Total
43
470
Sets are variant sets. Components counts every variant inside them. Button and Picker hold most of the total because both cross size with state. Status Bar and Tooltip carry no set: each is a single component, not a matrix. Counted 8 Sep 2026.
Tokens and state layers
Every Material role in Platform Bridge is prefixed M3/sys/: 32 colour roles, 6 corner steps, 15 typescale steps, 7 state opacities. Resolved in Light.
Role
Brand
System
color/primary
#155DFC
#6750A4
color/secondary-container
#DBEAFE
#E8DEF8
color/error
#FB2C36
#B3261E
color/surface
#FFFFFF
#FEF7FF
color/on-surface
#0E0E0F
#1D1B20
color/on-surface-variant
#48484A
#49454F
color/outline
#8E8E93
#79747E
color/surface-container-highest
#DEDEE0
#E6E0E9
Shape role
Brand
System
corner-extra-small
4
4
corner-small
8
8
corner-medium
12
12
corner-large
18
16
corner-extra-large
24
28
corner-full
9999
9999
Brand is not only a recolour. Two of the six corner steps move: Brand routes them through dimensions/radius/*, System holds Material's own. Typescale binds the same way: typescale/body-large is typography/fontSize/base in Brand and 16 in System.
State opacity
Both modes
Covers
state/hover-opacity
8
Pointer over a target
state/focus-opacity
10
Keyboard focus
state/pressed-opacity
10
Touch down
state/disabled-container-opacity
12
A disabled container
state/dragged-opacity
16
An item being moved
state/scrim-opacity
32
The wash behind a dialog
state/disabled-content-opacity
38
A disabled label or icon
The seven opacities are the one part of the mirror the Bridge does not touch: bare numbers, the same in both modes, because a state layer is a rule about interaction, not a brand decision. They bind straight to node opacity on _M3 / State layer 10166:478, over a fill of M3/sys/color/on-surface.
Material Design is a trademark of Google LLC. iOS, SwiftUI, SF Pro and SF Symbols are trademarks of Apple Inc. Appetite UI is not affiliated with, endorsed by or sponsored by either; platform names here describe compatibility. These patterns are referenced under CC BY 4.0 and redrawn in Appetite geometry, on Appetite tokens, in Inter, with Lucide icons. Material Symbols are not bundled: add them yourself and they fall under the Apache License 2.0.
