Updated
Material 3
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.
Updated
On this page
Appetite UI redraws the Material 3 patterns on your tokens and puts your brand inside them. The structure stays Material: the same anatomy, the same spacing, the same behavior a user already knows. Color, type, shape and elevation come from your system, so an App Bar or a Dialog reads as Material and as yours at the same time.
How does Appetite UI support Material 3?
The Material pages rebuild Material 3 as Figma components: 17 pattern pages, 44 variant sets and 460 variants, each with Material's own anatomy and a brand or system reading. The android mode of the Platform collection sets the touch target to 48 and list rows to 56.
Hover is part of Material, so the Material sets carry a Hovered state that the Appetite UI components do not have.
Measured in the Figma file on October 2, 2026.
How do Brand and System mode differ?
Brand mode resolves the Material color, shape and type roles to Appetite UI tokens, and System mode resolves the same roles back to Material's baseline. Platform Bridge is one collection with two modes, and every Material color role in it is an alias, never a literal.
Switching the mode on a frame moves the whole mirror at once. Nothing is repainted and nothing is detached.
- Brand mode
M3/sys/color/primarybrand/basecolors/blue/500#155DFC - System mode
M3/sys/color/primaryplatform/m3/primary#6750A4
Geometry owned by the platform holds either way: the android switch track is 52 by 32, list rows are 56 and the touch target is 48.
Which Material 3 patterns are covered?
17 pattern pages in the Material mirror, one row each, with 44 variant sets and 460 variants in total, counted in the Figma file.
| Pattern page | Sets | Variants |
|---|---|---|
| App Bar | 1 | 4 |
| Button | 8 | 270 |
| Card | 1 | 3 |
| Checkbox | 1 | 6 |
| Chip | 1 | 8 |
| Dialog | 6 | 17 |
| Keyboard | 1 | 8 |
| List | 1 | 6 |
| Navigation Bar | 2 | 5 |
| Picker | 12 | 91 |
| Radio Button | 1 | 4 |
| Sheet | 4 | 10 |
| Snackbar | 2 | 14 |
| Status Bar | 0 | 0 |
| Switch | 1 | 4 |
| Text Field | 1 | 8 |
| Tooltip | 1 | 2 |
| Total | 44 | 460 |
Button and Picker hold most of the total because both cross size or format with state.
Counted in the Figma file on October 2, 2026. A set is every component set on the page, helper sets included, and a variant is a component inside one of those sets. Loose single components, Status Bar and Rich Tooltip among them, are not counted.
How are the Switch, Snackbar, time pickers and status bar built?
The time pickers read Appetite UI surfaces in Brand mode, the Snackbar comes in three configurations with an optional close affordance, and the status bar draws no camera cutout. The Switch sits beside them for its numbers.
| Component | Property | Options |
|---|---|---|
| Switch | Selected | True | False |
| Switch | Is Enabled | True | False |
| Snackbar | Configuration | Text only | Text & action | Text & longer action |
| Snackbar | Option | One line | Two lines |
| Snackbar | Show close affordance | True | False |
| Snackbar | Supporting Text | Any text |
| Dial picker | Format | 12 hour | 24 hour |
| Dial picker | Orientation | Vertical | Horizontal |
| Keyboard picker | Format | 12 hour | 24 hour |
The Switch is 52 × 32 at full radius. The selected thumb is 24 with a 16 check icon, the unselected thumb is 16, and the track reads M3/sys/color/primary when selected. A state layer sits over the track at opacity 0 until a state needs it.
The Snackbar is 344 wide and 48, 68 or 112 high, at radius 4 on M3/sys/color/inverse-surface. The close affordance is a 48 target around a 40 container.
The time pickers are cards at radius 24 on M3/sys/color/surface-container-high, which Brand mode maps to bg/weak-50, #F4F5F5 in Light. Dial picker is 328 × 520 vertical or 572 × 384 horizontal, and Keyboard picker is 328 × 243 at 12 hour or 264 × 243 at 24 hour.
The AM and PM selector is 52 × 80 in two 52 × 40 halves. The selected half reads M3/sys/color/tertiary-container with its label on M3/sys/color/tertiary, brand/lighter and brand/base in Brand mode, and the selector has Enabled, Hovered and Focused states.
The status bar is 412 × 52. It draws no camera cutout, because every Android maker places the camera hole differently and the system reports it through display cutout insets. The space stays as an empty spacer, so the time and icons keep their places and no baked in black spot covers app content.
How does Material 3 differ from iOS?
Material uses 48 dp touch targets against 44 pt on iOS, rounds controls fully, and carries a Hovered state on Button and Picker. The pairs below are the closest components on each side, measured in the Figma file.
| Component | Material 3 | iOS | What differs |
|---|---|---|---|
| Toggle | M3 / Switch, 52 × 32 | iOS / Toggle, 64 × 28 | Material has a 24 thumb inside the track, iOS has a 38 × 24 knob that becomes a glass lens when pressed |
| Navigation | M3 / Navigation bar, 412 × 80, three to five items | iOS / Tab Bar, floating capsule 62 high, two to five tabs | Material is a full width bar with a separate 24 high Gesture Navigation component, iOS floats on glass |
| Top bar | M3 / Top app bar, Small 64 high, Medium 112, Large 152 | iOS / Toolbar on a 44 high top bar | Material has four bar types: Small, Center-aligned, Medium and Large |
| Dialog | M3 / Basic dialog, 304 wide at radius 24 | iOS / Alert, 300 wide at radius 32 | Material has Basic, List and Scrollable list dialogs, iOS draws the alert as glass |
| Sheet | M3 / Bottom sheet 412 wide and Side Sheet 320 wide | iOS / Sheet - Full Screen | Material adds a side sheet for large screens |
| List | M3 / List Item, 56, 72 or 88 high by Lines | iOS / List with a 44 minimum row | Material sets the row height by lines of text, iOS sets only a minimum |
| Text field | M3 / Text Field, Filled or Outlined, 56 high | iOS / Text Field | Material has Enabled, Focused, Error and Disabled states |
| Picker | M3 / Modal date picker 360 × 524, Dial and Keyboard time pickers | iOS / Date and time pickers | Material offers a dial and a keyboard variant of the time picker |
| Chip | M3 / Chip, 32 high at radius 8 | No counterpart | The Apple pages have no chip |
| Snackbar | M3 / Snackbar, 344 wide | No counterpart | The Apple pages have no snackbar |
| Tooltip | M3 / Plain Tooltip and Rich Tooltip | No counterpart | The Apple pages have no tooltip |
The Platform collection carries the shared numbers, one mode per platform.
| Variable | android | ios-lg |
|---|---|---|
grid/safe-area/top | 52 | 62 |
grid/safe-area/bottom | 24 | 34 |
platform/min-touch-target | 48 | 44 |
platform/bar/top-height | 64 | 44 |
platform/bar/bottom-height | 64 | 49 |
platform/list-row/min-height | 56 | 44 |
platform/control/corner | 9999 | 8 |
platform/sheet/corner | 28 | 12 |
platform/dialog/corner | 28 | 12 |
platform/switch/track-width | 52 | 64 |
platform/switch/track-height | 32 | 28 |
The minimum touch target is 48 on android and 44 on every iOS mode. Both values are bound to platform/min-touch-target, so one list row obeys both platforms without a second copy. The iOS side is on the iOS page.
Tokens and state layers
Every Material role in Platform Bridge is prefixed M3/sys/: 32 color roles, 6 corner steps, 15 typescale steps and 7 state opacities.
| 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-high | #F4F5F5 | #ECE6F0 |
color/surface-container-highest | #E9E9EA | #E6E0E9 |
| Role | Brand | System |
|---|---|---|
color/primary | #2B7FFF | #D0BCFF |
color/secondary-container | #0D2673 | #4A4458 |
color/error | #FB2C36 | #F2B8B5 |
color/surface | #0E0E0F | #141218 |
color/on-surface | #FFFFFF | #E6E0E9 |
color/on-surface-variant | #C7C7CC | #CAC4D0 |
color/outline | #AEAEB2 | #938F99 |
color/surface-container-high | #242427 | #2B2930 |
color/surface-container-highest | #48484A | #36343B |
| Shape role | Brand | System |
|---|---|---|
corner-extra-small | 4 | 4 |
corner-small | 8 | 8 |
corner-medium | 12 | 12 |
corner-large | 16 | 16 |
corner-extra-large | 24 | 28 |
corner-full | 9999 | 9999 |
One of the six corner steps moves between the modes: corner-extra-large routes through dimensions/radius/* in Brand and holds Material's own 28 in System. 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 leaves alone: bare numbers, the same in both modes, because a state layer is a rule about interaction and brand does not decide it. They bind straight to node opacity on _M3 / State layer, over a fill of M3/sys/color/on-surface.
Values read in the Figma file on October 2, 2026, from the component _M3 / State layer, node 10166:478.
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 UI's own geometry, on its own tokens, in Inter, with Lucide icons. Material Symbols are not bundled: add them yourself and they fall under the Apache License 2.0.