aswin-haridas/apple-guidelines-for-ui

UI design guidelines (platform-neutral)

119 reference pages in references/ (next to this file), rewritten from Apple's HIG to apply to any platform. Each page keeps a Source: line pointing to the original.

How to use

1. Identify the topics the task touches (component, pattern, foundation, input). Pick from the catalog below.
2. Read only the relevant pages with the Read tool, e.g. references/buttons.md. Grep references/ for a keyword when unsure which page covers it.
3. Apply the guidance to the platform actually in use (web, Android, iOS, desktop...). When a page names cross-platform equivalents (screen readers, Cmd/Ctrl, Material vs. system conventions), pick the one for the target platform; follow that platform's native conventions where they conflict.
4. When reviewing a UI, cite the page and the specific rule (e.g. "alerts.md: use a cancel button for destructive actions") and say concretely what to change.

Always weigh design-principles.md (purpose, agency, responsibility, familiarity, flexibility, simplicity, craft, delight) and accessibility.md for any UI work.

Index pages: index.md, foundations.md, patterns.md, components.md, inputs.md.

Catalog

• accessibility.md — Accessibility: Accessible user interfaces empower everyone to have a great experience with your app or game.
• action-sheets.md — Action sheets: An action sheet (sometimes called a confirmation dialog or bottom sheet menu) is a modal view that presents choices related to an action peo
• activity-views.md — Activity views: An activity view — often called a share sheet — presents a range of tasks that people can perform in the current context. On the web,
• alerts.md — Alerts: An alert gives people critical information they need right away.
• app-icons.md — App icons: A unique, memorable icon expresses your app’s or game’s purpose and personality and helps people recognize it at a glance.
• augmented-reality.md — Augmented reality: Augmented reality (or AR) lets you deliver immersive, engaging experiences that seamlessly blend virtual objects with the real world.
• boxes.md — Boxes: A box creates a visually distinct group of logically related information and components.
• branding.md — Branding: Apps and games express their unique brand identity in ways that make them instantly recognizable while feeling at home on the platform and g
• buttons.md — Buttons: A button initiates an instantaneous action.
• charting-data.md — Charting data: Presenting data in a chart can help you communicate information with clarity and appeal.
• charts.md — Charts: Organize data in a chart to communicate information with clarity and visual appeal.
• collaboration-and-sharing.md — Collaboration and sharing: Great collaboration and sharing experiences are simple and responsive, letting people engage with the content while communicating effectivel
• collections.md — Collections: A collection manages an ordered set of content and presents it in a customizable and highly visual layout.
• color-wells.md — Color wells: A color well lets people adjust the color of text, shapes, guides, and other onscreen elements.
• color.md — Color: Judicious use of color can enhance communication, evoke your brand, provide visual continuity, communicate status and feedback, and help peo
• column-views.md — Column views: A column view — also called a browser or Miller columns — lets people view and navigate a data hierarchy using a series of vertical
• combo-boxes.md — Combo boxes: A combo box combines a text field with a pull-down button in a single control.
• components.md — Components: Learn how to use and customize system-defined components to give people a familiar and consistent experience.
• content.md — Content: - Charts
• context-menus.md — Context menus: A context menu provides access to functionality that’s directly related to an item, without cluttering the interface.
• controls.md — Controls: A control provides quick access to a feature of your app from system surfaces like a quick settings panel, the lock screen, or a hardware sh
• dark-mode.md — Dark Mode: Dark mode is a systemwide appearance setting that uses a dark color palette to provide a comfortable viewing experience tailored for low-lig
• design-principles.md — Design principles: Explore fundamental principles that guide design across platforms — web, mobile, desktop, and beyond.
• designing-for-games.md — Designing for games: When people play your game on any device, they dive into the world you designed while relying on the platform features they love.
• disclosure-controls.md — Disclosure controls: Disclosure controls reveal and hide information and functionality related to specific controls or views.
• drag-and-drop.md — Drag and drop: Using drag and drop, people can move or duplicate selected photos, text, and other content by dragging the selection from one location to an
• edit-menus.md — Edit menus: An edit menu lets people make changes to selected content in the current view, in addition to offering related commands like Copy, Select, T
• entering-data.md — Entering data: When you need information from people, design ways that make it easy for them to provide it without making mistakes.
• feedback.md — Feedback: Feedback helps people know what’s happening, discover what they can do next, understand the results of actions, and avoid mistakes.
• file-management.md — File management: Some apps can support documents and files that people expect to manage throughout the system.
• focus-and-selection.md — Focus and selection: Focus helps people visually confirm the object that their interaction targets.
• foundations.md — Foundations: Understand how fundamental design elements help you create rich experiences.
• game-controls.md — Game controls: Precise, intuitive game controls enhance gameplay and can increase a player’s immersion in the game.
• gauges.md — Gauges: A gauge displays a specific numerical value within a range of values.
• generative-ai.md — Generative AI: Generative AI empowers you to enhance your app or game with dynamic content and offer intelligent features that unlock new levels of creativ
• gestures.md — Gestures: A gesture is a physical motion that a person uses to directly affect an object in an app or game on their device.
• getting-started.md — Getting started: Create an app or game that feels at home on every platform you support — web, mobile, desktop, and beyond.
• going-full-screen.md — Going full screen: Phones, tablets, desktops, and web browsers offer full-screen modes that let people expand a window to fill the screen, hiding system contro
• gyro-and-accelerometer.md — Gyroscope and accelerometer: On-device gyroscopes and accelerometers can supply data about a device’s movement in the physical world.
• icons.md — Icons: An effective icon is a graphic asset that expresses a single concept in ways people instantly understand.
• image-views.md — Image views: An image view displays a single image — or in some cases, an animated sequence of images — on a transparent or opaque background.
• image-wells.md — Image wells: An image well is an editable version of an image view.
• images.md — Images: To make sure your artwork looks great on all devices you support, learn how the system displays content and how to deliver art at the approp
• inclusion.md — Inclusion: Inclusive apps and games put people first by prioritizing respectful communication and presenting content and functionality in ways that eve
• index.md — Interface design guidelines: These guidelines contain guidance and best practices that can help you design a great experience on any platform — web, mobile, desktop, a
• inputs.md — Inputs: Learn about the various methods people use to control your app or game and enter data.
• keyboards.md — Keyboards: A physical keyboard can be an essential input device for entering text, playing games, controlling apps, and more.
• labels.md — Labels: A label is a static piece of text that people can read and often copy, but not edit.
• launching.md — Launching: A streamlined launch experience helps people start using your app or game immediately.
• layout-and-organization.md — Layout and organization: - Boxes
• layout.md — Layout: A consistent layout that adapts across display sizes, orientations, and multitasking configurations helps people understand and enjoy your a
• lists-and-tables.md — Lists and tables: Lists and tables present data in one or more columns of rows.
• live-viewing-apps.md — Live-viewing apps: As you design a live-viewing app, prioritize the content and create fun, fluid interactions that encourage immersion in the live-viewing exp
• loading.md — Loading: The best content-loading experience finishes before people become aware of it.
• machine-learning.md — Machine learning: Machine learning enables apps and games to learn from data and usage patterns, letting you improve existing experiences and create engaging
• managing-accounts.md — Managing accounts: When it doesn’t create an unnecessary barrier to your experience, an account can be a convenient way for people to access their content an
• managing-notifications.md — Managing notifications: Notifications can give people timely and important information, whether the device is locked or in use.
• maps.md — Maps: A map displays outdoor or indoor geographical data in your app or on your website.
• materials.md — Materials: A material is a visual effect that creates a sense of depth, layering, and hierarchy between foreground and background elements.
• menus-and-actions.md — Menus and actions: - Activity views
• menus.md — Menus: A menu reveals its options when people interact with it, making it a space-efficient way to present commands in your app or game.
• modality.md — Modality: Modality is a design technique that presents content in a separate, dedicated mode that prevents interaction with the parent view and requir
• motion.md — Motion: Beautiful, fluid motions bring the interface to life, conveying status, providing feedback and instruction, and enriching the visual experie
• multitasking.md — Multitasking: Multitasking lets people switch quickly from one app to another, performing tasks in each.
• navigation-and-search.md — Navigation and search: - Search fields
• nearby-interactions.md — Nearby interactions: Nearby interactions support on-device experiences that integrate the presence of people and objects in the nearby environment, using proximi
• nfc.md — NFC: Near-field communication (NFC) allows devices within a few centimeters of each other to exchange information wirelessly.
• notifications.md — Notifications: A notification gives people timely, high-value information they can understand at a glance.
• offering-help.md — Offering help: Although the most effective experiences are approachable and intuitive, you can provide contextual help when necessary.
• onboarding.md — Onboarding: Onboarding can help people get a quick start using your app or game.
• outline-views.md — Outline views: An outline view presents hierarchical data in a scrolling list of cells that are organized into columns and rows.
• page-controls.md — Page controls: A page control (also called a page indicator or dots indicator) displays a row of indicator images, each of which represents a page in a fla
• panels.md — Panels: In a desktop app, a panel typically floats above other open windows providing supplementary controls, options, or information related to the
• patterns.md — Patterns: Get design guidance for supporting common user actions, tasks, and experiences.
• pickers.md — Pickers: A picker displays one or more scrollable lists of distinct values that people can choose from.
• playing-audio.md — Playing audio: People expect rich audio experiences that automatically adjust when the context changes on the device.
• playing-haptics.md — Playing haptics: Playing haptics can engage people’s sense of touch and bring their familiarity with the physical world into your app or game.
• playing-video.md — Playing video: People expect to enjoy rich video experiences on their devices, regardless of the app or game they’re using.
• pointing-devices.md — Pointing devices: People can use a pointing device like a trackpad or mouse to navigate the interface and initiate actions.
• pop-up-buttons.md — Pop-up buttons: A pop-up button (also called a dropdown or select on some platforms) displays a menu of mutually exclusive options.
• popovers.md — Popovers: A popover is a transient view that appears above other content when people click or tap a control or interactive area.
• presentation.md — Presentation: - Action sheets
• printing.md — Printing: An app can integrate system-provided print functionality when it makes sense, presenting custom printer- and document-specific options if ne
• privacy.md — Privacy: Privacy is paramount: it’s critical to be transparent about the privacy-related data and resources you require and essential to protect th
• progress-indicators.md — Progress indicators: Progress indicators let people know that your app isn’t stalled while it loads content or performs lengthy operations.
• pull-down-buttons.md — Pull-down buttons: A pull-down button displays a menu of items or actions that directly relate to the button’s purpose.
• rating-indicators.md — Rating indicators: A rating indicator uses a series of horizontally arranged graphical symbols — by default, stars — to communicate a ranking level.
• ratings-and-reviews.md — Ratings and reviews: People often view the ratings and reviews for an app or game before they download it.
• right-to-left.md — Right to left: Support right-to-left languages like Arabic and Hebrew by reversing your interface as needed to match the reading direction of the related s
• scroll-views.md — Scroll views: A scroll view lets people view content that’s larger than the view’s boundaries by moving the content vertically or horizontally.
• search-fields.md — Search fields: A search field lets people search a collection of content for specific terms they enter.
• searching.md — Searching: People use various search techniques to find content on their device, within an app, and within a document or file.
• segmented-controls.md — Segmented controls: A segmented control (also called a segmented button or button group) is a linear set of two or more segments, each of which functions as a b
• selection-and-input.md — Selection and input: - Color wells
• settings.md — Settings: People expect apps and games to just work, but they also appreciate having ways to customize the experience to fit their needs.
• sheets.md — Sheets: A sheet helps people perform a scoped task that’s closely related to their current context.
• sidebars.md — Sidebars: A sidebar appears on the leading side of a view and lets people navigate between areas of your app or top-level collections of content, like
• sliders.md — Sliders: A slider is a horizontal track with a control, called a thumb, that people can adjust between a minimum and maximum value.
• snippets.md — Snippets: When someone performs a task with a voice assistant or a system shortcut, a snippet shows the result or asks for confirmation.
• split-views.md — Split views: A split view manages the presentation of multiple adjacent panes of content, each of which can contain a variety of components, including ta
• status-bars.md — Status bars: A status bar appears along the upper edge of the screen and displays information about the device’s current state, like the time, cellular
• status.md — Status: - Gauges
• steppers.md — Steppers: A stepper is a two-segment control that people use to increase or decrease an incremental value.
• system-experiences.md — System experiences: - Controls
• tab-bars.md — Tab bars: A tab bar lets people navigate between top-level sections of your app.
• tab-views.md — Tab views: A tab view presents multiple mutually exclusive panes of content in the same area, which people can switch between using a tabbed control.
• text-fields.md — Text fields: A text field is a rectangular area in which people enter or edit small, specific pieces of text.
• text-views.md — Text views: A text view displays multiline, styled text content, which can optionally be editable.
• toggles.md — Toggles: A toggle lets people choose between a pair of opposing states, like on and off, using a different appearance to indicate each state.
• token-fields.md — Token fields: A token field is a type of text field that can convert text into tokens that are easy to select and manipulate.
• toolbars.md — Toolbars: A toolbar provides convenient access to frequently used commands, controls, navigation, and search.
• typography.md — Typography: Your typographic choices can help you display legible text, convey an information hierarchy, communicate important content, and express your
• undo-and-redo.md — Undo and redo: Undo and redo gives people easy ways to reverse many types of actions, which can also help people explore and experiment safely as they lear
• virtual-keyboards.md — Virtual keyboards: On devices without physical keyboards, the system offers various types of virtual keyboards people can use to enter data.
• web-views.md — Web views: A web view loads and displays rich web content, such as embedded HTML and websites, directly within your app.
• widgets.md — Widgets: A widget provides quick access to essential information and focused interactions from your app or game in additional contexts.
• windows.md — Windows: A window presents UI views and components in your app or game.
• workouts.md — Workouts: A great workout or fitness experience encourages people to engage with their current activity and helps them track their progress on their d
• writing.md — Writing: The words you choose within your app are an essential part of its user experience.