Updated
Glossary
The words of mobile design systems, each with the name Apple uses, the name Material 3 uses and what it is in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system. Where the two systems give it different values, the term’s page prints both.
Updated
Tokens and variables
| Term | Apple | Material 3 | Appetite UI |
|---|---|---|---|
| Design tokens | No token system in the HIG; colors and metrics are named system values | Design tokens, such as md.sys.color.primary | Figma variables in six collections, exported as DTCG |
| Semantic tokens | Semantic colors, such as label and systemBackground | Color roles, such as primary and surface-container | Color Tokens collection, roles such as brand/base and bg/weak-50 |
| Variable modes | Appearance (light and dark) and size classes | Color schemes (light and dark) and window size classes | Modes of the Color Tokens and Platform collections |
| DTCG tokens | No equivalent | No equivalent; Material Theme Builder exports its own JSON | tokens.json, W3C DTCG |
| Dark mode | Dark Mode | Dark theme | The Dark mode of the Color Tokens collection |
| Platform Bridge | Maps onto iOS system colors | Maps onto Material 3 color roles | Platform Bridge collection, Brand and System modes |
Design tokens
A design token is a named design decision, such as a color, a spacing step or a radius, stored once and read by design files and code alike. Changing the token changes every place that reads it.
Semantic tokens
A semantic token names a role, such as bg/weak-50 or text/strong-950, and points at a primitive token that holds the raw value. Components bind to the role, never to the primitive.
Variable modes
A mode is one column of values in a Figma variable collection, such as Light and Dark. A frame set to a mode resolves every variable in it against that column.
DTCG tokens
DTCG is the file format of the W3C Design Tokens Community Group: JSON in which each token has a $value and a $type. Tools that read it can turn one file into code for every platform.
Dark mode
Dark mode is a second set of values for the same color roles, chosen for a dark background. Done with tokens, it is one mode switch, not a second set of frames.
Platform Bridge
Platform Bridge is the Appetite UI collection that maps Apple and Material 3 color and type slots to your brand tokens. One mode switch returns each platform’s own values.
- DocsPlatform Bridge
Layout and touch
| Term | Apple | Material 3 | Appetite UI |
|---|---|---|---|
| Touch target | Hit target, 44 by 44 pt minimum | Touch target, 48 by 48 dp minimum | platform/min-touch-target |
| Safe area | Safe area and layout margins | Window insets and edge to edge | grid/safe-area/top and grid/safe-area/bottom |
| Corner radius | Corner radius | Shape, corner tokens | platform/*/corner and the radius scale |
| Dynamic Type | Dynamic Type | Type scale and font scale | Typography collection, mapped on /docs/typography |
Touch target
A touch target is the area that responds to a tap, which can be larger than the control people see. Apple asks for at least 44 by 44 points and Material for 48 by 48 density-independent pixels.
Safe area
The safe area is the part of the screen no system element covers: inside the status bar, the Dynamic Island or camera, the home indicator and the rounded corners. Content goes inside it, backgrounds may run past it.
Corner radius
Corner radius is how round the corners of a surface or control are. Apple and Material round different things by different amounts, so one value rarely suits both.
Dynamic Type
Dynamic Type is the iOS setting that lets people choose their text size, and the set of text styles that follow it. Material 3 has a type scale and Android a font scale setting for the same need.
- DocsTypography
Components
| Term | Apple | Material 3 | Appetite UI |
|---|---|---|---|
| Tab bar | Tab bar | Navigation bar | Navigation |
| Top app bar | Navigation bar | Top app bar | Top Bar |
| Toggle and switch | Toggle | Switch | Toggle |
| Chip | No chip on the kit’s Apple pages | Chip, 32 high at radius 8 | Chip |
| Segmented control | Segmented control | Segmented button | Segmented Control |
| List row | List row, 44 minimum | List item, 56, 72 or 88 by lines | List |
| Floating action button | No component; the action goes in a toolbar | Floating action button | Floating Action Button, in /docs/button |
Tab bar
A tab bar is the row of top level destinations at the bottom of an app. Apple calls it a tab bar; Material 3 calls the same thing a navigation bar.
Top app bar
The bar at the top of a screen with its title, a way back and a few actions. Material 3 calls it the top app bar; Apple calls it a navigation bar.
Toggle and switch
A switch turns one setting on or off, and the change takes effect at once. Apple calls the control a toggle, Material 3 a switch.
Chip
A chip is a compact capsule that filters a list, picks from a set or shows an entry someone added. It is a Material 3 component with no counterpart on the kit’s Apple pages.
Segmented control
A segmented control switches between two to five views of the same content, one segment selected at a time. Material 3 calls it a segmented button.
List row
A list row is one line of a list: a leading icon or avatar, a title and an optional line under it, and a trailing chevron, value or control. iOS sets a 44 minimum, Material sets the height by lines of text.
- DocsList
Surfaces and states
| Term | Apple | Material 3 | Appetite UI |
|---|---|---|---|
| Bottom sheet | Sheet | Bottom sheet | Modal Sheet |
| Toast and snackbar | No system component | Snackbar | Toast |
| Liquid Glass | Liquid Glass | No equivalent | liquidGlass effect styles |
| Empty state | Content unavailable view | No component; covered in the guidelines | Empty State |
| Skeleton screen | Redacted placeholder | No component | Skeleton |
| Action sheet | Action sheet | Bottom sheet or menu | Action Sheet |
Bottom sheet
A bottom sheet is a surface that slides up over the screen for a task related to it, and slides away when the task is done. Apple calls it a sheet.
Toast and snackbar
A toast or snackbar reports what just happened in a short message that leaves on its own and does not block the screen. Material 3 calls it a snackbar and can add one action; iOS has no system toast.
Liquid Glass
Liquid Glass is the translucent material Apple introduced with iOS 26 for bars, buttons and sheets that float over content. Material 3 has no equivalent.
Empty state
An empty state is what a screen shows when it has nothing to show yet: no trips, an empty cart, no messages. A good one names what is missing and offers the action that fills it.
Skeleton screen
A skeleton screen holds the shape of content while it loads, as grey lines, circles and blocks with a slow pulse, so the layout does not jump when the content arrives.
- DocsSkeleton
Action sheet
An action sheet lists the actions for one object at the bottom of the screen, with Cancel set apart. Material 3 uses a bottom sheet or a menu for the same job.
- DocsAction Sheet