# Glossary

> The words of mobile design systems, each with its Apple name, its Material 3 name and its value in Appetite UI, a Figma UI kit for iOS and Android apps.

Page: https://www.appetiteui.com/academy/glossary. Every term with a page also has a markdown twin at its URL plus .md. The site map for agents: https://www.appetiteui.com/llms.txt.

## Which values differ between iOS and Android?

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |
| Top safe area | 59 pt | 52 dp | `grid/safe-area/top` |
| Bottom safe area | 34 pt | 24 dp | `grid/safe-area/bottom` |
| Top bar height | 44 pt | 64 dp | `platform/bar/top-height` |
| Tab bar height | 49 pt | 64 dp | `platform/bar/bottom-height` |
| List row, minimum height | 44 pt | 56 dp | `platform/list-row/min-height` |
| Switch track width | 64 pt | 52 dp | `platform/switch/track-width` |
| Switch track height | 28 pt | 32 dp | `platform/switch/track-height` |
| Control corner | 8 pt | Fully round | `platform/control/corner` |
| Sheet corner | 12 pt | 28 dp | `platform/sheet/corner` |
| Dialog corner | 12 pt | 28 dp | `platform/dialog/corner` |
| Screen side padding | 16 pt | 16 dp | `platform/screen-padding` |

## Tokens and variables

- **[Design tokens](https://www.appetiteui.com/academy/glossary/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. Apple: No token system in the HIG; colors and metrics are named system values. Material 3: Design tokens, such as md.sys.color.primary. Appetite UI: Figma variables in six collections, exported as DTCG.
- **[Semantic tokens](https://www.appetiteui.com/academy/glossary/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. Apple: Semantic colors, such as label and systemBackground. Material 3: Color roles, such as primary and surface-container. Appetite UI: Color Tokens collection, roles such as brand/base and bg/weak-50.
- **[Variable modes](https://www.appetiteui.com/academy/glossary/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. Apple: Appearance (light and dark) and size classes. Material 3: Color schemes (light and dark) and window size classes. Appetite UI: Modes of the Color Tokens and Platform collections.
- **[DTCG tokens](https://www.appetiteui.com/academy/glossary/dtcg)**: 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. Apple: No equivalent. Material 3: No equivalent; Material Theme Builder exports its own JSON. Appetite UI: tokens.json, W3C DTCG.
- **[Dark mode](https://www.appetiteui.com/academy/glossary/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. Apple: Dark Mode. Material 3: Dark theme. Appetite UI: The Dark mode of the Color Tokens collection.
- **[Platform Bridge](https://www.appetiteui.com/academy/glossary#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. Apple: Maps onto iOS system colors. Material 3: Maps onto Material 3 color roles. Appetite UI: Platform Bridge collection, Brand and System modes.

## Layout, type and touch

- **[Touch target](https://www.appetiteui.com/academy/glossary/touch-target)**: A touch target is the area that responds to a tap, which can be larger than the control people see. Apple gives 44 by 44 points as the default control size on iPhone, and Material asks for at least 48 by 48 dp. Apple: Hit region, 44 by 44 pt by default, 28 by 28 pt at the smallest. Material 3: Touch target, 48 by 48 dp minimum. Appetite UI: platform/min-touch-target.
- **[Safe area](https://www.appetiteui.com/academy/glossary/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. Apple: Safe area and layout margins. Material 3: Window insets and edge to edge. Appetite UI: grid/safe-area/top and grid/safe-area/bottom.
- **[Spacing scale](https://www.appetiteui.com/academy/glossary/spacing-scale)**: A spacing scale is the fixed set of distances every padding and gap in an interface is taken from, usually multiples of 4 or 8. Picking from a scale instead of typing numbers keeps a whole app on one rhythm. Apple: No named scale; layout margins and spacing are set per component. Material 3: An 8 dp grid for layout and a 4 dp grid for small elements. Appetite UI: dimensions/spacing/*, a 4 pt scale.
- **[Type scale](https://www.appetiteui.com/academy/glossary/type-scale)**: A type scale is the set of text sizes an interface uses, each a step with its own size, line height and weight. Apple names its steps Dynamic Type text styles, such as body and title1, and Material 3 names them roles, such as bodyLarge and headlineSmall. Apple: Dynamic Type text styles, largeTitle to caption2. Material 3: Type scale roles: display, headline, title, body, label. Appetite UI: Typography collection, steps xs to 6xl.
- **[Corner radius](https://www.appetiteui.com/academy/glossary/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. Apple: Corner radius. Material 3: Shape, corner tokens. Appetite UI: platform/*/corner and the radius scale.
- **[Status bar](https://www.appetiteui.com/academy/glossary/status-bar)**: The status bar is the strip at the top of the screen with the time, signal and battery, drawn by the system over every app. An app leaves room for it and chooses only whether its content is light or dark. Apple: Status bar. Material 3: Status bar, one of the system bars. Appetite UI: iOS / Status Bar, and grid/safe-area/top on Android.

## Components

- **[Tab bar](https://www.appetiteui.com/academy/glossary/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. Apple: Tab bar. Material 3: Navigation bar. Appetite UI: Navigation.
- **[Top app bar](https://www.appetiteui.com/academy/glossary/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. Apple: Navigation bar. Material 3: Top app bar. Appetite UI: Top Bar.
- **[Navigation drawer](https://www.appetiteui.com/academy/glossary/navigation-drawer)**: A navigation drawer is a panel that slides in from the leading edge with an app’s top level destinations, for apps that have more than a tab bar holds. Material 3 has one; iOS has no drawer and uses a tab bar, or a sidebar on iPad. Apple: No drawer; a tab bar, or a sidebar on iPad. Material 3: Navigation drawer, being replaced by the expanded navigation rail. Appetite UI: Navigation Drawer.
- **[Toggle and switch](https://www.appetiteui.com/academy/glossary/toggle-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. Apple: Toggle. Material 3: Switch. Appetite UI: Toggle.
- **[Chip](https://www.appetiteui.com/academy/glossary/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. Apple: No chip on the kit’s Apple pages. Material 3: Chip, 32 high at radius 8. Appetite UI: Chip.
- **[Segmented control](https://www.appetiteui.com/academy/glossary/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. Apple: Segmented control. Material 3: Segmented button. Appetite UI: Segmented Control.
- **[Floating action button](https://www.appetiteui.com/academy/glossary/floating-action-button)**: A floating action button is a round button that floats over the content for the one action a screen exists for, such as a new task. It is a Material component; iOS puts the same action in a bar. Apple: No component; the action goes in a toolbar or the navigation bar. Material 3: Floating action button and extended FAB. Appetite UI: Floating Action Button, in /docs/button.
- **[List row](https://www.appetiteui.com/academy/glossary#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. Apple: List row, 44 minimum. Material 3: List item, 56, 72 or 88 by lines. Appetite UI: List.

## Surfaces and states

- **[Bottom sheet](https://www.appetiteui.com/academy/glossary/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. Apple: Sheet. Material 3: Bottom sheet. Appetite UI: Modal Sheet.
- **[Action sheet](https://www.appetiteui.com/academy/glossary/action-sheet)**: An action sheet lists the actions for one object at the bottom of the screen, with Cancel set apart. Material 3 has no action sheet and uses a modal bottom sheet for the same job. Apple: Action sheet. Material 3: Modal bottom sheet or menu. Appetite UI: Action Sheet.
- **[Toast and snackbar](https://www.appetiteui.com/academy/glossary/toast-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. Apple: No system component. Material 3: Snackbar. Appetite UI: Toast.
- **[Liquid Glass](https://www.appetiteui.com/academy/glossary/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. Apple: Liquid Glass. Material 3: No equivalent. Appetite UI: liquidGlass effect styles.
- **[Dynamic Island](https://www.appetiteui.com/academy/glossary/dynamic-island)**: The Dynamic Island is the black pill around the iPhone’s front camera that grows to show live information, such as a timer, a delivery or a call. A Live Activity is what an app shows in it and on the Lock Screen. Apple: Dynamic Island and Live Activities. Material 3: No equivalent. Appetite UI: iOS / Dynamic Island, with System and Expanded sets.
- **[Empty state](https://www.appetiteui.com/academy/glossary/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. Apple: Content unavailable view. Material 3: No component; covered in the guidelines. Appetite UI: Empty State.
- **[Skeleton screen](https://www.appetiteui.com/academy/glossary/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. Apple: Redacted placeholder in SwiftUI, no Figma component. Material 3: No component; progress indicators only. Appetite UI: Skeleton.