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.
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. The values that differ between the two platforms stand side by side in iOS vs Android values.
Tokens and variables
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
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
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
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
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
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
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
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
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
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
A carousel is a row of items that people scroll sideways, such as images or cards. Material 3 has a Carousel with multi-browse, uncontained, hero and full-screen layouts, and iOS has no component of that name.
Components
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
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
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 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
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 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 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
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
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
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.
Components
A dropdown menu is a list that opens from a visible control to pick an option or run a command. iOS splits it into a pop-up button for options and a pull-down button for commands, and Material 3 has a dropdown menu.
Tokens and variables
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
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 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 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
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 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
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
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 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 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
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
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 is the translucent material Apple introduced with iOS 26 for bars, buttons and sheets that float over content. Material 3 has no equivalent.
Components
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 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.
Components
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.
Components
A navigation rail is a vertical bar of top-level destinations at the edge of a medium or large screen. Material 3 has it in collapsed and expanded forms, and iOS moves the same job into a sidebar or a tab bar.
Surfaces and states
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
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
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
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
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 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
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
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
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
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
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
A search bar is the field in which people type a query to find content in an app. Apple calls it a search field and Material 3 calls it a search bar, each with suggestions below it.
Components
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
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
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 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 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.
Components
A sidebar is a panel at the leading edge that lists the main areas of an app. iOS uses it on iPad and Mac, where it can float on Liquid Glass; Material 3 has the navigation drawer and the rail.
Surfaces and states
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 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
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
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
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
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
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
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
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 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
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
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
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
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
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
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
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
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
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
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.
Each term maps to a component, token or pattern you can inspect in the preview.