Skip to content

Glossary

The words of mobile design, as Apple and Google say them.

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. The values that differ between the two platforms stand side by side in iOS vs Android values.

77 terms, updated October 2026

Tokens and variables 10, Layout, type and touch 9, Components 34, Surfaces and states 24

Every term, A to Z

Tokens and variables

Accent color

iOS
Tint color, system accent
Material 3
Primary color role

The accent color is the one color an app uses for what can be tapped and what is selected. iOS calls it the tint and Material 3 calls it the primary role.

Components

Accordion

iOS
Disclosure group
Material 3
No component: expandable list item in code

An accordion is a list of rows that each expand to show more content and collapse to hide it. iOS calls the pattern a disclosure group, and Material 3 has no accordion component.

Surfaces and states

Action sheet

iOS
Action sheet
Material 3
Modal bottom sheet or menu

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.

Components

AI chat UI

iOS
Generative AI guidance, no chat component
Material 3
No chat component

An AI chat UI is a thread of messages and a prompt input where the answer arrives while it is written. Neither iOS nor Material 3 ships a component for it, so the message row and the composer are drawn by the app.

Surfaces and states

Alert dialog

iOS
Alert
Material 3
Dialog: basic, list and scrollable list

An alert dialog is a small modal window that interrupts a mobile screen to report a problem or ask for a decision. iOS calls it an Alert and Material 3 calls it a Dialog.

Surfaces and states

App icon

iOS
App icon, layered with Liquid Glass attributes
Material 3
Adaptive icon: foreground and background layers

An app icon is the image that stands for an app on the home screen, in search and in settings. Both platforms build it from a background and foreground layers, and the system applies the mask and the effects.

Components

Badge

iOS
Badge, on a tab item or a list row
Material 3
Badge: small dot or large with a number

A badge is a small mark on an item that says something is new or counts it, as a dot or a number. iOS puts it on a tab or a list row and Material 3 has small and large badges.

Surfaces and states

Bottom sheet

iOS
Sheet
Material 3
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.

Components

Button

iOS
Button: borderless, bordered, bordered prominent
Material 3
Button: filled, tonal, outlined, elevated, text

A button is the control that starts an action when tapped. iOS styles it as borderless, bordered or bordered prominent, and Material 3 offers filled, tonal, outlined, elevated and text buttons.

Components

Card

iOS
No card: List cells in plain, grouped and inset grouped styles
Material 3
Card: elevated, filled and outlined

A card is a container that groups related content and actions about one subject, such as a place, a product or an article. Material 3 has a Card component; iOS groups the same content in list cells.

Components

Chart

iOS
Charts, built with Swift Charts
Material 3
No chart component in the file

A chart turns a set of numbers into a shape people can read at a glance. On a phone the choice is by the shape of the data: a trend takes a line, a comparison takes bars, a share of a whole takes a donut.

Components

Checkbox and radio button

iOS
No checkbox: Toggle, or a list row with a checkmark
Material 3
Checkbox and Radio button

A checkbox lets people select any number of options, and a radio button lets them select exactly one. Material 3 has both on Android, while iOS uses a toggle or a list row with a checkmark instead.

Components

Chip

iOS
No chip on the kit’s Apple pages
Material 3
Chip, 32 high at radius 8

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.

Tokens and variables

Color contrast

iOS
System colors with increased contrast variants
Material 3
Color roles that pair content with its container

Color contrast is the difference in luminance between content and its background, written as a ratio. WCAG asks for 4.5 to 1 for normal text and 3 to 1 for large text and for the parts of controls.

Surfaces and states

Context menu

iOS
Context menu and Menu
Material 3
Dropdown menu

A context menu is a short list of actions that appears for the item a person touches and holds. iOS calls it a context menu, and Material 3 calls a similar list a dropdown menu.

Layout, type and touch

Corner radius

iOS
Corner radius
Material 3
Shape, corner tokens

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.

Tokens and variables

Dark mode

iOS
Dark Mode
Material 3
Dark theme

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.

Components

Data table

iOS
Table, as a list or SwiftUI Table
Material 3
No table in the file

A data table lays values out in rows and columns so they can be compared. On a phone it is wider than the screen, so it scrolls sideways under a pinned lead column and its headers can sort.

Tokens and variables

Design tokens

iOS
No token system in the HIG; colors and metrics are named system values
Material 3
Design tokens, such as md.sys.color.primary

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.

Components

Divider

iOS
Separator and Divider
Material 3
Divider: full width, inset

A divider is a thin line that separates items or groups of content. iOS calls it a separator, in lists and as a Divider view, and Material 3 has the divider with a 1 dp regular and an 8 dp heavy weight.

Tokens and variables

DTCG tokens

iOS
No equivalent
Material 3
No equivalent; Material Theme Builder exports its own JSON

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.

Surfaces and states

Dynamic Island

iOS
Dynamic Island and Live Activities
Material 3
No equivalent

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.

Tokens and variables

Dynamic Type and font scaling

iOS
Dynamic Type, text styles
Material 3
Type scale roles, sizes in sp

Dynamic Type is the iOS setting that lets people choose the size of text, and a design supports it by using text styles. Android has the same idea through font scale and text sizes in sp.

Surfaces and states

Elevation

iOS
No named ramp: materials and depth
Material 3
Elevation levels

Elevation is the distance at which a surface sits above another, drawn as a shadow, a tint or a material. Material 3 sets it in dp levels, and iOS has no named shadow ramp.

Surfaces and states

Empty state

iOS
Content unavailable view
Material 3
No component; covered in the guidelines

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.

Components

File upload

iOS
Document and photo pickers, Files app
Material 3
No component in the file

File upload is the control that lets people add a photo or a document, then shows the file and its progress. On a phone the selection itself is handed to a system picker and the app draws the surface around it.

Components

Floating action button

iOS
No component; the action goes in a toolbar or the navigation bar
Material 3
Floating action button and extended FAB

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.

Surfaces and states

Focus ring

iOS
System focus ring
Material 3
Focus state layer

A focus ring marks the control that has keyboard or switch focus. iPadOS and macOS draw a ring around it, and Material 3 tints the control with a focus state layer.

Components

Form validation

iOS
Entering data: text field with dynamic validation
Material 3
Text field error state

Form validation checks what people enter and says what is wrong near the field, as soon as the value is entered. Apple asks to validate dynamically so mistakes are not found after a long form.

Surfaces and states

Haptic feedback

iOS
Playing haptics
Material 3
Haptic feedback, Android haptics APIs

Haptic feedback is a tap, tick or vibration the device plays in answer to a touch. iOS plays it for switches, sliders and pickers on its own, and Android offers APIs for adding it to events.

Layout, type and touch

Large title

iOS
Large title in a navigation bar
Material 3
Medium and Large top app bar

A large title is the oversized screen heading in an iOS navigation bar that shrinks to a standard title as the content scrolls. Material 3 has a similar pattern in the Medium and Large top app bars.

Surfaces and states

Launch screen

iOS
Launch screen, shown by the system
Material 3
Splash screen API

A launch screen is what the system shows from the moment an app starts until its first screen is ready. Apple asks to launch instantly and to use it to give the impression of speed, not to advertise.

Surfaces and states

Liquid Glass

iOS
Liquid Glass
Material 3
No equivalent

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.

Components

List row

iOS
List row, 44 minimum
Material 3
List item, 56, 72 or 88 by lines

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.

In the docs: List

Tokens and variables

Motion, easing and duration

iOS
Motion: purposeful, optional, brief
Material 3
Easing and duration, with standard, decelerate and accelerate curves

Motion is how a screen changes over time, set by an easing curve and a duration. Material defines named easing and duration tokens, and Apple’s guidance asks for motion that is purposeful, brief and optional.

Surfaces and states

Onboarding

iOS
Onboarding
Material 3
No component: guidance only

Onboarding is the first-run flow that takes a person from opening a mobile app to using it, through a welcome, a sign-in and any setup. Apple asks for a flow that is fast, fun and optional.

Components

Page control

iOS
Page control
Material 3
No page control; carousels

A page control is a row of small dots that shows which page of a swipeable sequence is current. iOS calls it a Page Control, and Material 3 has no matching component.

Surfaces and states

Passkey

iOS
Passkeys, sign in with Face ID or Touch ID
Material 3
Credential Manager with passkeys

A passkey is a credential stored on the device that replaces a password, unlocked with Face ID, a fingerprint or a screen lock. People give only a user name, and nothing typed can be phished.

Surfaces and states

Permission request

iOS
Requesting permission, with a purpose description
Material 3
Runtime permissions, requested in context

A permission request is the system alert that asks for access to data or a device feature, such as the camera or location. Both platforms ask the design to request it only when the feature needs it.

Components

Picker

iOS
Date picker and Picker
Material 3
Date picker and time picker

A picker is the control that lets people choose a value from a set instead of typing it, most often a date or a time. iOS offers compact, inline and wheel date pickers, and Material 3 offers modal date pickers and dial or keyboard time pickers.

Tokens and variables

Platform Bridge

iOS
Maps onto iOS system colors
Material 3
Maps onto Material 3 color roles

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.

In the docs: Platform Bridge

Layout, type and touch

Points and dp

iOS
Point
Material 3
Density-independent pixel (dp)

A point (pt) is the unit of layout on iOS and a dp is the unit on Android; both are virtual pixels that the system scales to the screen’s density. A Figma frame of 402 by 874 is in points, not in device pixels.

Surfaces and states

Progress indicator

iOS
Progress view and activity indicator
Material 3
Linear and circular progress indicator

A progress indicator shows that a task is running, as a bar, a ring or a spinner. Apple calls the spinner an activity indicator, and Material 3 calls the family progress indicators.

Surfaces and states

Push notification

iOS
Notifications: short look and long look
Material 3
Notifications

A push notification is a message an app sends outside itself, shown as a banner or on the lock screen. It is brief, and Apple warns it should not be the only way to deliver critical information.

Surfaces and states

Review prompt

iOS
Ratings and reviews, system prompt
Material 3
Google Play in-app review

A review prompt is the dialog that asks for an App Store rating inside the app. Apple prefers the system prompt, which asks for a rating and an optional review and limits itself to three a year.

Layout, type and touch

Safe area

iOS
Safe area and layout margins
Material 3
Window insets and edge to edge

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.

Components

Segmented control

iOS
Segmented control
Material 3
Segmented button

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.

Tokens and variables

Semantic tokens

iOS
Semantic colors, such as label and systemBackground
Material 3
Color roles, such as primary and surface-container

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.

Components

Settings screen

iOS
Settings
Material 3
Settings pattern, list with switches

A settings screen is a grouped list of preferences, with a switch for each yes or no choice. Apple asks for good defaults and as few settings as possible.

Components

SF Symbols and Material Symbols

iOS
SF Symbols
Material 3
Material Symbols

SF Symbols is the icon set of Apple platforms and Material Symbols is the icon set of Android, both variable fonts with weights that match text. Appetite UI draws its icons from one outline set for both.

Surfaces and states

Sheet detents

iOS
Sheet with medium and large detents
Material 3
Bottom sheet, standard and modal

Sheet detents are the heights at which a sheet comes to rest. iOS sheets have a large detent and an optional medium detent, and Material 3 bottom sheets are standard or modal.

Surfaces and states

Sign-in screen

iOS
Managing accounts: Sign in with Apple, passkeys
Material 3
Credential Manager sign-in

A sign-in screen is where an app asks who someone is. Apple asks to require an account only when the core function needs one, and to delay the request until people have seen what the app does.

Layout, type and touch

Size classes

iOS
Horizontal and vertical size classes: compact, regular
Material 3
Window size classes: compact, medium, expanded

Size classes describe how much space an app has, so a layout can adapt. iOS has compact and regular size classes for each dimension, and Android has compact, medium and expanded window size classes by width.

Surfaces and states

Skeleton screen

iOS
Redacted placeholder in SwiftUI, no Figma component
Material 3
No component; progress indicators only

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.

Components

Slider

iOS
Slider
Material 3
Slider and Range slider

A slider is a control for choosing a value from a continuous range by dragging a thumb along a track. iOS calls it a Slider, and Material 3 adds a Range slider with two thumbs.

Layout, type and touch

Spacing scale

iOS
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

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.

Components

Split view

iOS
Split view
Material 3
List-detail layout, by window size class

A split view shows several levels of an app at once: a primary pane, a secondary one and sometimes a third. It needs width, so it belongs to regular windows and collapses to one pane on a phone.

Layout, type and touch

Status bar

iOS
Status bar
Material 3
Status bar, one of the system bars

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.

Components

Stepper

iOS
Stepper
Material 3
No stepper or step indicator

A stepper is a control with a minus and a plus that changes a value one step at a time. A step indicator is a different thing that shows where someone is in a flow; iOS has the first and Material 3 has neither.

Components

Tab bar

iOS
Tab bar
Material 3
Navigation 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.

Components

Tabs

iOS
No top tabs: segmented control; the Tab bar is for destinations
Material 3
Primary tabs and secondary tabs

Tabs switch between related views inside one screen, with one tab selected at a time. Material 3 has primary and secondary tabs, and iOS has no top tabs: its tab bar moves between top-level destinations.

Components

Text field

iOS
Text Field and Secure Field
Material 3
Text field, Filled or Outlined

A text field is the control in which people type a single line of text, such as an email, a name or a search term. iOS calls it a Text Field, and Material 3 draws it as a Filled or Outlined Text Field.

Surfaces and states

Toast and snackbar

iOS
No system component
Material 3
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.

Components

Toggle and switch

iOS
Toggle
Material 3
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.

Components

Toolbar

iOS
Toolbar
Material 3
Bottom app bar

A toolbar is a bar of actions for the current view, placed at the bottom or top edge. iOS calls it a Toolbar and Material 3 has the bottom app bar, which can carry a floating action button.

Surfaces and states

Tooltip

iOS
No tooltip on iPhone: help tags in macOS and visionOS
Material 3
Plain tooltip and rich tooltip

A tooltip is a short label that explains a control, shown when it is pointed at or long-pressed. Material 3 has plain and rich tooltips, and Apple shows tooltips only in macOS and visionOS.

Components

Top app bar

iOS
Navigation bar
Material 3
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.

Layout, type and touch

Touch target

iOS
Hit region, 44 by 44 pt by default, 28 by 28 pt at the smallest
Material 3
Touch target, 48 by 48 dp minimum

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.

Layout, type and touch

Type scale

iOS
Dynamic Type text styles, largeTitle to caption2
Material 3
Type scale roles: display, headline, title, body, label

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.

Tokens and variables

Variable modes

iOS
Appearance (light and dark) and size classes
Material 3
Color schemes (light and dark) and window size classes

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.

Surfaces and states

Widget

iOS
Widgets: system families and accessory widgets
Material 3
App widgets

A widget is a small view of an app that lives on the home screen or lock screen and shows timely, glanceable content. Some widgets carry interactive elements.

Meet the words in the file.

Each term maps to a component, token or pattern you can inspect in the preview.