# PIE Design System

> PIE is the global design system for Just Eat Takeaway.com, powering all our products.

## Foundations

- [Design Tokens - Overview](https://www.pie.design/foundations/design-tokens/): Design Tokens store design decisions within our Foundations, enabling us to apply them consistently throughout designs, products, code and platforms.
- [Design Tokens - Updates & maintenance](https://www.pie.design/foundations/design-tokens/updates-and-maintenance/): The workflow for updating design tokens, from Figma and the PIE Design Changelog to releasing the pie-design-tokens package and rolling it out to web, iOS and Android.
- [Blur - Overview](https://www.pie.design/foundations/blur/): Effect applied to a container to distort its background and create visual hierarchy.
- [Blur - Alias tokens](https://www.pie.design/foundations/blur/tokens/alias/): Blur alias tokens (base, neutral and prominent) are available for ios and web and should always be paired with the equivalent container fill token.
- [Colour - Overview](https://www.pie.design/foundations/colour/): Our colour system builds on the recognition of the JET brand colours to make the product interface more usable.
- [Colour - Alias tokens - Dark theme](https://www.pie.design/foundations/colour/tokens/alias/dark/): Dark theme colour alias tokens grouped by role, such as backgrounds, borders, content, feedback, brand, interactive and states, with usage guidance and their global tokens.
- [Colour - Alias tokens - Light theme](https://www.pie.design/foundations/colour/tokens/alias/light/): Light theme colour alias tokens grouped by role, such as backgrounds, borders, content, feedback, brand, interactive and states, with usage guidance and their global tokens.
- [Elevation - Overview](https://www.pie.design/foundations/elevation/): Shadows are used to give the impression of distance or elevation between surfaces, which adds depth to our designs.
- [Elevation - Alias tokens - Dark theme](https://www.pie.design/foundations/elevation/tokens/alias/dark/): Dark theme elevation alias tokens for default and inverse surfaces, with the elements each depth is used for and the global box-shadow token it maps to.
- [Elevation - Alias tokens - Light theme](https://www.pie.design/foundations/elevation/tokens/alias/light/): Light theme elevation alias tokens for default and inverse surfaces, with the elements each depth is used for and the global box-shadow token it maps to.
- [Elevation - Android specific](https://www.pie.design/foundations/elevation/android/): How elevation works on Android using Material Design elevation values, with a table mapping each PIE elevation token to its Material equivalent.
- [Gradients - Overview](https://www.pie.design/foundations/gradients/): Gradients are a type of style that are made up of two or more colours and can be used for backgrounds, containers and small UI elements.
- [Gradients - Alias tokens - Dark theme](https://www.pie.design/foundations/gradients/alias-tokens/dark/): Dark theme gradient alias tokens for AI, container, border, JET+, brand and support use, each made of global colour tokens set at stops between 0 and 100%.
- [Gradients - Alias tokens - Light theme](https://www.pie.design/foundations/gradients/alias-tokens/light/): Light theme gradient alias tokens for AI, container, border, JET+, brand and support use, each made of global colour tokens set at stops between 0 and 100%.
- [Iconography - Overview](https://www.pie.design/foundations/iconography/): Icons are graphic symbols that are used to represent concepts, objects or actions.
- [Iconography - Library](https://www.pie.design/foundations/iconography/library/): The full list of icons available in the PIE icon library, grouped by category.
- [Iconography - Code](https://www.pie.design/foundations/iconography/code/): How to use PIE icons in code on web (React, Vue and vanilla JS via pie-icons-webc), iOS (JustUI) and Android (PIE BOM), with naming conventions and colour tinting.
- [Motion - Overview](https://www.pie.design/foundations/motion/): How we use motion in PIE.
- [Motion - Timing](https://www.pie.design/foundations/motion/timing/): Motion durations, when to use short, medium and long timings based on element size and travel distance, why exits are faster than entrances, and how to use delays.
- [Motion - Easing](https://www.pie.design/foundations/motion/easing/): Entrance, exit and functional easing, when to use each to mimic real-world physics, and why motion without easing feels unnatural.
- [Radius - Overview](https://www.pie.design/foundations/radius/): Use radius to round the corners of any element.
- [Radius - Alias tokens](https://www.pie.design/foundations/radius/tokens/alias/): Radius alias tokens from rounded-none to rounded-g, with the components each corner radius is used for, such as tags, cards, modals and buttons, and their global tokens.
- [Spacing - Overview](https://www.pie.design/foundations/spacing/): Space is the horizontal and vertical distance between or around different design elements.
- [Spacing - Alias tokens](https://www.pie.design/foundations/spacing/tokens/alias/): Static spacing alias tokens from spacing-none to spacing-j, with their dp/sp/px and rem values and the global token each maps to.
- [Typography - Overview](https://www.pie.design/foundations/typography/): PIE typography works with our layouts to present content in a clear hierarchy and in a way that's easy to read.
- [Typography - Alias tokens - Narrow screens](https://www.pie.design/foundations/typography/tokens/alias/narrow/): Typography alias tokens for narrow screens covering headings, subheadings, body, caption and interactive text styles, with the global font tokens each combines.
- [Typography - Alias tokens - Wide screens](https://www.pie.design/foundations/typography/tokens/alias/wide/): Typography alias tokens for wide screens covering headings, subheadings, body, caption and interactive text styles, with the global font tokens each combines.

## Components

- [Component status](https://www.pie.design/components/component-status/): A preview of the components and their status' in all PIE libraries.
- [Accordion - Overview](https://www.pie.design/components/accordion/): Overview of the Accordion component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Accordion - Web](https://www.pie.design/components/accordion/web/): Web design guidance for the Accordion component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Accordion - Apps](https://www.pie.design/components/accordion/apps/): iOS and Android design guidance for the Accordion component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [App Bar - Overview](https://www.pie.design/components/app-bar/): Overview of the App Bar component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [App Bar - Android](https://www.pie.design/components/app-bar/android/): Android design guidance for the App Bar component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [App Bar - iOS](https://www.pie.design/components/app-bar/ios/): iOS design guidance for the App Bar component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Assistive Text - Overview](https://www.pie.design/components/assistive-text/): Overview of the Assistive Text component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Assistive Text - Web](https://www.pie.design/components/assistive-text/web/): Web design guidance for the Assistive Text component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Assistive Text - Apps](https://www.pie.design/components/assistive-text/apps/): iOS and Android design guidance for the Assistive Text component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Assistive Text - Code](https://www.pie.design/components/assistive-text/code/): Where to find the code resources for the Assistive Text component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Avatar - Overview](https://www.pie.design/components/avatar/): Overview of the Avatar component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Avatar - Web](https://www.pie.design/components/avatar/web/): Web design guidance for the Avatar component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Avatar - Apps](https://www.pie.design/components/avatar/apps/): iOS and Android design guidance for the Avatar component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Badge - Overview](https://www.pie.design/components/badge/): Overview of the Badge component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Badge - Web](https://www.pie.design/components/badge/web/): Web design guidance for the Badge component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Badge - Apps](https://www.pie.design/components/badge/apps/): iOS and Android design guidance for the Badge component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Bottom Navigation - Overview](https://www.pie.design/components/bottom-navigation/): Overview of the Bottom Navigation component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Bottom Navigation - Android](https://www.pie.design/components/bottom-navigation/android/): Android design guidance for the Bottom Navigation component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Bottom Navigation - iOS](https://www.pie.design/components/bottom-navigation/ios/): iOS design guidance for the Bottom Navigation component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Bottom Sheet - Overview](https://www.pie.design/components/bottom-sheet/): Overview of the Bottom Sheet component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Bottom Sheet - Web](https://www.pie.design/components/bottom-sheet/web/): Web design guidance for the Bottom Sheet component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Bottom Sheet - Android](https://www.pie.design/components/bottom-sheet/android/): Android design guidance for the Bottom Sheet component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Bottom Sheet - iOS](https://www.pie.design/components/bottom-sheet/ios/): iOS design guidance for the Bottom Sheet component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Breadcrumb - Overview](https://www.pie.design/components/breadcrumb/): Overview of the Breadcrumb component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Breadcrumb - Web](https://www.pie.design/components/breadcrumb/web/): Web design guidance for the Breadcrumb component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Breadcrumb - Code](https://www.pie.design/components/breadcrumb/code/): Where to find the code resources for the Breadcrumb component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Button - Overview](https://www.pie.design/components/button/): Overview of the Button component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Button - Web](https://www.pie.design/components/button/web/): Web design guidance for the Button component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Button - Apps](https://www.pie.design/components/button/apps/): iOS and Android design guidance for the Button component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Button - Code](https://www.pie.design/components/button/code/): Where to find the code resources for the Button component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Card - Overview](https://www.pie.design/components/card/): Overview of the Card component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Card - Web](https://www.pie.design/components/card/web/): Web design guidance for the Card component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Card - Apps](https://www.pie.design/components/card/apps/): iOS and Android design guidance for the Card component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Card - Code](https://www.pie.design/components/card/code/): Where to find the code resources for the Card component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Carousel Indicator - Overview](https://www.pie.design/components/carousel-indicator/): Overview of the Carousel Indicator component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Carousel Indicator - Web](https://www.pie.design/components/carousel-indicator/web/): Web design guidance for the Carousel Indicator component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Carousel Indicator - Apps](https://www.pie.design/components/carousel-indicator/apps/): iOS and Android design guidance for the Carousel Indicator component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Checkbox - Overview](https://www.pie.design/components/checkbox/): Overview of the Checkbox component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Checkbox - Web](https://www.pie.design/components/checkbox/web/): Web design guidance for the Checkbox component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Checkbox - Android](https://www.pie.design/components/checkbox/android/): Android design guidance for the Checkbox component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Checkbox - iOS](https://www.pie.design/components/checkbox/ios/): iOS design guidance for the Checkbox component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Checkbox - Motion](https://www.pie.design/components/checkbox/motion/): Motion specifications for the Checkbox component, showing how it animates between states and transitions.
- [Checkbox - Code](https://www.pie.design/components/checkbox/code/): Where to find the code resources for the Checkbox component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Checkbox Group - Overview](https://www.pie.design/components/checkbox-group/): Overview of the Checkbox Group component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Checkbox Group - Web](https://www.pie.design/components/checkbox-group/web/): Web design guidance for the Checkbox Group component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Checkbox Group - Code](https://www.pie.design/components/checkbox-group/code/): Where to find the code resources for the Checkbox Group component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Chip - Overview](https://www.pie.design/components/chip/): Overview of the Chip component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Chip - Web](https://www.pie.design/components/chip/web/): Web design guidance for the Chip component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Chip - Android](https://www.pie.design/components/chip/android/): Android design guidance for the Chip component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Chip - iOS](https://www.pie.design/components/chip/ios/): iOS design guidance for the Chip component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Chip - Code](https://www.pie.design/components/chip/code/): Where to find the code resources for the Chip component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Data Table - Overview](https://www.pie.design/components/data-table/): Overview of the Data Table component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Data Table - Web](https://www.pie.design/components/data-table/web/): Web design guidance for the Data Table component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Data Visualisation - Bar Chart - Overview](https://www.pie.design/components/data-visualisation/bar-chart/): Overview of the Bar Chart component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Data Visualisation - Bar Chart - Web](https://www.pie.design/components/data-visualisation/bar-chart/web/): Web design guidance for the Bar Chart component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Data Visualisation - Line Chart - Overview](https://www.pie.design/components/data-visualisation/line-chart/): Overview of the Line Chart component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Data Visualisation - Line Chart - Web](https://www.pie.design/components/data-visualisation/line-chart/web/): Web design guidance for the Line Chart component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Date Picker - Overview](https://www.pie.design/components/date-picker/): Overview of the Date Picker component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Date Picker - Web](https://www.pie.design/components/date-picker/web/): Web design guidance for the Date Picker component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Date Picker - Android](https://www.pie.design/components/date-picker/android/): Android design guidance for the Date Picker component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Date Picker - iOS](https://www.pie.design/components/date-picker/ios/): iOS design guidance for the Date Picker component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Divider - Overview](https://www.pie.design/components/divider/): Overview of the Divider component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Divider - Code](https://www.pie.design/components/divider/code/): Where to find the code resources for the Divider component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Dropdown - Overview](https://www.pie.design/components/dropdown/): Overview of the Dropdown component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Dropdown - Web](https://www.pie.design/components/dropdown/web/): Web design guidance for the Dropdown component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Dropdown - Android](https://www.pie.design/components/dropdown/android/): Android design guidance for the Dropdown component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Dropdown - iOS](https://www.pie.design/components/dropdown/ios/): iOS design guidance for the Dropdown component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [FAB - Overview](https://www.pie.design/components/fab/): Overview of the FAB component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [FAB - Web](https://www.pie.design/components/fab/web/): Web design guidance for the FAB component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [FAB - Apps](https://www.pie.design/components/fab/apps/): iOS and Android design guidance for the FAB component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Form Label - Overview](https://www.pie.design/components/form-label/): Overview of the Form Label component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Form Label - Web](https://www.pie.design/components/form-label/web/): Web design guidance for the Form Label component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Form Label - Apps](https://www.pie.design/components/form-label/apps/): iOS and Android design guidance for the Form Label component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Form Label - Code](https://www.pie.design/components/form-label/code/): Where to find the code resources for the Form Label component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Icon Button - Overview](https://www.pie.design/components/icon-button/): Overview of the Icon Button component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Icon Button - Web](https://www.pie.design/components/icon-button/web/): Web design guidance for the Icon Button component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Icon Button - Android](https://www.pie.design/components/icon-button/android/): Android design guidance for the Icon Button component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Icon Button - iOS](https://www.pie.design/components/icon-button/ios/): iOS design guidance for the Icon Button component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Icon Button - Code](https://www.pie.design/components/icon-button/code/): Where to find the code resources for the Icon Button component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Icon With Background - Overview](https://www.pie.design/components/icon-with-background/): Overview of the Icon With Background component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Icon With Background - Web](https://www.pie.design/components/icon-with-background/web/): Web design guidance for the Icon With Background component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Link - Overview](https://www.pie.design/components/link/): Overview of the Link component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Link - Web](https://www.pie.design/components/link/web/): Web design guidance for the Link component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Link - Apps](https://www.pie.design/components/link/apps/): iOS and Android design guidance for the Link component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Link - Code](https://www.pie.design/components/link/code/): Where to find the code resources for the Link component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [List Item - Overview](https://www.pie.design/components/list-item/list-item/): Overview of the List Item component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [List Item - Web](https://www.pie.design/components/list-item/list-item/web/): Web design guidance for the List Item component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [List Item - Android](https://www.pie.design/components/list-item/list-item/android/): Android design guidance for the List Item component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [List Item - iOS](https://www.pie.design/components/list-item/list-item/ios/): iOS design guidance for the List Item component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [List Item - Interactive - Overview](https://www.pie.design/components/list-item/list-item-interactive/): Overview of the List Item - Interactive component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Map Pin - Overview](https://www.pie.design/components/map-pin/): Overview of the Map Pin component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Map Pin - Web](https://www.pie.design/components/map-pin/web/): Web design guidance for the Map Pin component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Map Pin - Apps](https://www.pie.design/components/map-pin/apps/): iOS and Android design guidance for the Map Pin component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Modal - Overview](https://www.pie.design/components/modal/): Overview of the Modal component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Modal - Web](https://www.pie.design/components/modal/web/): Web design guidance for the Modal component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Modal - Android](https://www.pie.design/components/modal/android/): Android design guidance for the Modal component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Modal - iOS](https://www.pie.design/components/modal/ios/): iOS design guidance for the Modal component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Modal - Motion](https://www.pie.design/components/modal/motion/): Motion specifications for the Modal component, showing how it animates between states and transitions.
- [Modal - Code](https://www.pie.design/components/modal/code/): Where to find the code resources for the Modal component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Modal - Native - Overview](https://www.pie.design/components/modal-native/): Overview of the Modal - Native component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Modal - Native - Android](https://www.pie.design/components/modal-native/android/): Android design guidance for the Modal - Native component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Modal - Native - iOS](https://www.pie.design/components/modal-native/ios/): iOS design guidance for the Modal - Native component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Notification - Overview](https://www.pie.design/components/notification/): Overview of the Notification component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Notification - Web](https://www.pie.design/components/notification/web/): Web design guidance for the Notification component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Notification - Android](https://www.pie.design/components/notification/android/): Android design guidance for the Notification component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Notification - iOS](https://www.pie.design/components/notification/ios/): iOS design guidance for the Notification component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Notification - Code](https://www.pie.design/components/notification/code/): Where to find the code resources for the Notification component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Numeric Stepper - Overview](https://www.pie.design/components/numeric-stepper/numeric-stepper/): Overview of the Numeric Stepper component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Numeric Stepper - Web](https://www.pie.design/components/numeric-stepper/numeric-stepper/web/): Web design guidance for the Numeric Stepper component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Numeric Stepper - Apps](https://www.pie.design/components/numeric-stepper/numeric-stepper/apps/): iOS and Android design guidance for the Numeric Stepper component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Numeric Stepper - Form - Overview](https://www.pie.design/components/numeric-stepper/numeric-stepper-form/): Overview of the Numeric Stepper - Form component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Numeric Stepper - Form - Web](https://www.pie.design/components/numeric-stepper/numeric-stepper-form/web/): Web design guidance for the Numeric Stepper - Form component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Numeric Stepper - Form - Apps](https://www.pie.design/components/numeric-stepper/numeric-stepper-form/apps/): iOS and Android design guidance for the Numeric Stepper - Form component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Numeric Stepper - Input - Overview](https://www.pie.design/components/numeric-stepper/numeric-stepper-input/): Overview of the Numeric Stepper - Input component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Numeric Stepper - Input - Web](https://www.pie.design/components/numeric-stepper/numeric-stepper-input/web/): Web design guidance for the Numeric Stepper - Input component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Numeric Stepper - Input - Apps](https://www.pie.design/components/numeric-stepper/numeric-stepper-input/apps/): iOS and Android design guidance for the Numeric Stepper - Input component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Numeric Stepper - Simple - Overview](https://www.pie.design/components/numeric-stepper/numeric-stepper-simple/): Overview of the Numeric Stepper - Simple component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Numeric Stepper - Simple - Web](https://www.pie.design/components/numeric-stepper/numeric-stepper-simple/web/): Web design guidance for the Numeric Stepper - Simple component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Numeric Stepper - Simple - Apps](https://www.pie.design/components/numeric-stepper/numeric-stepper-simple/apps/): iOS and Android design guidance for the Numeric Stepper - Simple component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Pagination - Overview](https://www.pie.design/components/pagination/): Overview of the Pagination component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Pagination - Web](https://www.pie.design/components/pagination/web/): Web design guidance for the Pagination component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Pagination - Apps](https://www.pie.design/components/pagination/apps/): iOS and Android design guidance for the Pagination component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Payment Method Card - Apps](https://www.pie.design/components/payment-method-card/): iOS and Android design guidance for the Payment Method Card component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Popover - Overview](https://www.pie.design/components/popover/): Overview of the Popover component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Popover - Web](https://www.pie.design/components/popover/web/): Web design guidance for the Popover component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Popover - iOS](https://www.pie.design/components/popover/ios/): iOS design guidance for the Popover component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Progress Bar - Overview](https://www.pie.design/components/progress-bar/): Overview of the Progress Bar component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Progress Bar - Web](https://www.pie.design/components/progress-bar/web/): Web design guidance for the Progress Bar component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Progress Bar - Apps](https://www.pie.design/components/progress-bar/apps/): iOS and Android design guidance for the Progress Bar component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Progress Stepper - Overview](https://www.pie.design/components/progress-stepper/): Overview of the Progress Stepper component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Progress Stepper - Web](https://www.pie.design/components/progress-stepper/web/): Web design guidance for the Progress Stepper component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Progress Stepper - Apps](https://www.pie.design/components/progress-stepper/apps/): iOS and Android design guidance for the Progress Stepper component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Radio - Overview](https://www.pie.design/components/radio/): Overview of the Radio component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Radio - Web](https://www.pie.design/components/radio/web/): Web design guidance for the Radio component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Radio - Android](https://www.pie.design/components/radio/android/): Android design guidance for the Radio component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Radio - iOS](https://www.pie.design/components/radio/ios/): iOS design guidance for the Radio component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Radio - Motion](https://www.pie.design/components/radio/motion/): Motion specifications for the Radio component, showing how it animates between states and transitions.
- [Radio - Code](https://www.pie.design/components/radio/code/): Where to find the code resources for the Radio component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Radio Group - Overview](https://www.pie.design/components/radio-group/): Overview of the Radio Group component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Radio Group - Web](https://www.pie.design/components/radio-group/web/): Web design guidance for the Radio Group component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Radio Group - Android](https://www.pie.design/components/radio-group/android/): Android design guidance for the Radio Group component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Radio Group - iOS](https://www.pie.design/components/radio-group/ios/): iOS design guidance for the Radio Group component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Radio Group - Code](https://www.pie.design/components/radio-group/code/): Where to find the code resources for the Radio Group component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Rating - Overview](https://www.pie.design/components/rating/): Overview of the Rating component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Rating - Web](https://www.pie.design/components/rating/web/): Web design guidance for the Rating component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Rating - Apps](https://www.pie.design/components/rating/apps/): iOS and Android design guidance for the Rating component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Segmented Controls - Overview](https://www.pie.design/components/segmented-controls/): Overview of the Segmented Controls component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Segmented Controls - Web](https://www.pie.design/components/segmented-controls/web/): Web design guidance for the Segmented Controls component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Segmented Controls - Apps](https://www.pie.design/components/segmented-controls/apps/): iOS and Android design guidance for the Segmented Controls component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Select Input - Overview](https://www.pie.design/components/select-input/): Overview of the Select Input component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Select Input - Web](https://www.pie.design/components/select-input/web/): Web design guidance for the Select Input component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Select Input - Code](https://www.pie.design/components/select-input/code/): Where to find the code resources for the Select Input component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Show More - Overview](https://www.pie.design/components/show-more/): Overview of the Show More component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Show More - Web](https://www.pie.design/components/show-more/web/): Web design guidance for the Show More component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Show More - Apps](https://www.pie.design/components/show-more/apps/): iOS and Android design guidance for the Show More component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Side Sheet - Overview](https://www.pie.design/components/side-sheet/): Overview of the Side Sheet component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Skeleton - Overview](https://www.pie.design/components/skeleton/): Overview of the Skeleton component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Skeleton - Web](https://www.pie.design/components/skeleton/web/): Web design guidance for the Skeleton component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Skeleton - Apps](https://www.pie.design/components/skeleton/apps/): iOS and Android design guidance for the Skeleton component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Slider - Overview](https://www.pie.design/components/slider/): Overview of the Slider component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Slider - Web](https://www.pie.design/components/slider/web/): Web design guidance for the Slider component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Slider - Android](https://www.pie.design/components/slider/android/): Android design guidance for the Slider component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Slider - iOS](https://www.pie.design/components/slider/ios/): iOS design guidance for the Slider component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Spinner - Overview](https://www.pie.design/components/spinner/): Overview of the Spinner component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Spinner - Web](https://www.pie.design/components/spinner/web/): Web design guidance for the Spinner component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Spinner - Android](https://www.pie.design/components/spinner/android/): Android design guidance for the Spinner component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Spinner - iOS](https://www.pie.design/components/spinner/ios/): iOS design guidance for the Spinner component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Spinner - Motion](https://www.pie.design/components/spinner/motion/): Motion specifications for the Spinner component, showing how it animates between states and transitions.
- [Spinner - Code](https://www.pie.design/components/spinner/code/): Where to find the code resources for the Spinner component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Stacked Notification - Overview](https://www.pie.design/components/stacked-notification/): Overview of the Stacked Notification component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Stacked Notification - Apps](https://www.pie.design/components/stacked-notification/apps/): iOS and Android design guidance for the Stacked Notification component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Switch - Overview](https://www.pie.design/components/switch/): Overview of the Switch component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Switch - Web](https://www.pie.design/components/switch/web/): Web design guidance for the Switch component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Switch - Android](https://www.pie.design/components/switch/android/): Android design guidance for the Switch component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Switch - iOS](https://www.pie.design/components/switch/ios/): iOS design guidance for the Switch component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Switch - Code](https://www.pie.design/components/switch/code/): Where to find the code resources for the Switch component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Tabs - Overview](https://www.pie.design/components/tabs/): Overview of the Tabs component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Tabs - Web](https://www.pie.design/components/tabs/web/): Web design guidance for the Tabs component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Tabs - Apps](https://www.pie.design/components/tabs/apps/): iOS and Android design guidance for the Tabs component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Tag - Overview](https://www.pie.design/components/tag/): Overview of the Tag component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Tag - Android](https://www.pie.design/components/tag/android/): Android design guidance for the Tag component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Tag - Web](https://www.pie.design/components/tag/web/): Web design guidance for the Tag component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Tag - iOS](https://www.pie.design/components/tag/ios/): iOS design guidance for the Tag component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Tag - Code](https://www.pie.design/components/tag/code/): Where to find the code resources for the Tag component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Tag - Icon Only - Overview](https://www.pie.design/components/tag-icon-only/): Overview of the Tag - Icon Only component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Tag - Icon Only - Web](https://www.pie.design/components/tag-icon-only/web/): Web design guidance for the Tag - Icon Only component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Tag - Icon Only - Android](https://www.pie.design/components/tag-icon-only/android/): Android design guidance for the Tag - Icon Only component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Tag - Icon Only - iOS](https://www.pie.design/components/tag-icon-only/ios/): iOS design guidance for the Tag - Icon Only component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Text Input - Overview](https://www.pie.design/components/text-input/): Overview of the Text Input component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Text Input - Web](https://www.pie.design/components/text-input/web/): Web design guidance for the Text Input component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Text Input - Android](https://www.pie.design/components/text-input/android/): Android design guidance for the Text Input component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Text Input - iOS](https://www.pie.design/components/text-input/ios/): iOS design guidance for the Text Input component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Text Input - Code](https://www.pie.design/components/text-input/code/): Where to find the code resources for the Text Input component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Textarea - Overview](https://www.pie.design/components/textarea/): Overview of the Textarea component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Textarea - Web](https://www.pie.design/components/textarea/web/): Web design guidance for the Textarea component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Textarea - Code](https://www.pie.design/components/textarea/code/): Where to find the code resources for the Textarea component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Thumbnail - Overview](https://www.pie.design/components/thumbnail/): Overview of the Thumbnail component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Thumbnail - Web](https://www.pie.design/components/thumbnail/web/): Web design guidance for the Thumbnail component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Thumbnail - Apps](https://www.pie.design/components/thumbnail/apps/): iOS and Android design guidance for the Thumbnail component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Thumbnail - Code](https://www.pie.design/components/thumbnail/code/): Where to find the code resources for the Thumbnail component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Toast - Overview](https://www.pie.design/components/toast/): Overview of the Toast component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Toast - Web](https://www.pie.design/components/toast/web/): Web design guidance for the Toast component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Toast - Apps](https://www.pie.design/components/toast/apps/): iOS and Android design guidance for the Toast component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Toast - Motion](https://www.pie.design/components/toast/motion/): Motion specifications for the Toast component, showing how it animates between states and transitions.
- [Toast - Code](https://www.pie.design/components/toast/code/): Where to find the code resources for the Toast component, with a link to its PIE Web Components Storybook docs and who to contact for iOS and Android.
- [Tooltip - Overview](https://www.pie.design/components/tooltip/): Overview of the Tooltip component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Tooltip - Android](https://www.pie.design/components/tooltip/android/): Android design guidance for the Tooltip component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Tooltip - iOS](https://www.pie.design/components/tooltip/ios/): iOS design guidance for the Tooltip component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Uploader - Overview](https://www.pie.design/components/uploader/): Overview of the Uploader component, with its purpose and a table of its resources and availability in Figma and the web, iOS and Android libraries.
- [Uploader - Web](https://www.pie.design/components/uploader/web/): Web design guidance for the Uploader component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.
- [Uploader - Apps](https://www.pie.design/components/uploader/apps/): iOS and Android design guidance for the Uploader component, such as anatomy, variants, modifiers, sizes, states, content, behaviour, dos and don'ts, and examples.

## Patterns

- [Cookie Banner - Overview](https://www.pie.design/patterns/cookie-banner/): Cookie banner anatomy, banner and modal variants, content, behaviour, sizing, positioning and motion, with LTR and RTL examples.
- [Cookie Banner - Code](https://www.pie.design/patterns/cookie-banner/code/): Link to the cookie banner code documentation in the PIE Web Components Storybook.
- [Errors - Overview](https://www.pie.design/patterns/errors/): The error types (global, page level, field and feedback) and which components to use for each, such as notifications, modals, assistive text, error summaries and toasts.
- [Focus State - Overview](https://www.pie.design/patterns/focus-state/): How PIE shows focus with a two-colour 2px outline built into components, and guidelines for using it consistently and sparingly and testing the focus order.
- [Forms - Overview](https://www.pie.design/patterns/forms/): Best practices for forms, covering relevant data, surfaces, optional fields, calls to action, character limits and user feedback.
- [Forms - Guidance](https://www.pie.design/patterns/forms/guidance/): Detailed form guidance on which inputs to use, input widths, column layouts, labels and assistive text, autofill and spellcheck, and live or submission validation.
- [Haptic Feedback - Overview](https://www.pie.design/patterns/haptic-feedback/): Best practices for haptic feedback, such as using system patterns and not overusing it, and how designers and developers work together to add haptic interactions.
- [Haptic Feedback - Guidance](https://www.pie.design/patterns/haptic-feedback/guidance/): The PIE haptic feedback types (soft, medium, success, warning and error) and where to use each one.
- [JET AI - Overview](https://www.pie.design/patterns/jet-ai/): JET AI visual identity guide covering brand principles, icons, AI gradients and colours for light and dark mode, motion, AI component styles and the language and tone to use.
- [Just Eat + - Overview](https://www.pie.design/patterns/just-eat-plus/): Just Eat+ visual identity guide covering logos, JET+ gradients and colours for light and dark mode, typography, imagery, components such as offer tags and cards, and motion.
- [Messaging and Chatbots - Overview](https://www.pie.design/patterns/messaging-and-chatbots/): Introduction to messaging and chatbots, and how to work with third party platforms, including customisation levels and Figma UI kits.
- [Messaging and Chatbots - Guidance](https://www.pie.design/patterns/messaging-and-chatbots/guidance/): Design guidance for messaging and chatbot UIs, covering content width, message colours, borders, tails and groups, structured responses, metadata, avatars and backgrounds.
- [Nested Overrides - Overview](https://www.pie.design/patterns/nested-overrides/): When designers can override nested elements within components, covering variant, size, alignment and typography overrides, restricted overrides and a summary table.
- [Onboarding and Guided Tour - Web](https://www.pie.design/patterns/onboarding-and-guided-tour/web-guidance/): Web onboarding options, such as modals and carousels for overview onboarding, and tooltips and spotlights for contextual onboarding, with LTR and RTL examples.
- [Onboarding and Guided Tour - Apps](https://www.pie.design/patterns/onboarding-and-guided-tour/apps-guidance/): iOS and Android onboarding options, such as alerts, dialogs and full screen sheets for overview onboarding, and tooltips, spotlights and bottom sheets for contextual onboarding.
- [Overlay Patterns - Overview](https://www.pie.design/patterns/overlay-patterns/): Best practices for overlay patterns, covering purposeful use, clarity and visibility, user control, responsive design and consistency.
- [Overlay Patterns - Web guidance](https://www.pie.design/patterns/overlay-patterns/web-guidance/): Guidance on overlay patterns on components such as modal, popover, toast and tooltip on web, including a decision tree, z-index table and visual examples showing how components stack.
- [Overlay Patterns - iOS guidance](https://www.pie.design/patterns/overlay-patterns/ios-guidance/): Guidance on overlay patterns on components such as bottom sheet, modal, popover, toast and tooltip on android, including a decision tree, z-index table and visual examples showing how components stack.
- [Overlay Patterns - Android guidance](https://www.pie.design/patterns/overlay-patterns/android-guidance/): Guidance on overlay patterns on components such as bottom sheet, modal, popover, toast and tooltip on android, including a decision tree, z-index table and visual examples showing how components stack.
- [Selected State - Overview](https://www.pie.design/patterns/selected-state/): How to show selected states, with do's and don'ts, border tokens such as $color-border-selected, iconography and the selected variant of components.

## Accessibility

- [Overview](https://www.pie.design/accessibility/overview/): In this section you’ll find useful information about accessibility and why it is important at Just Eat Takeaway.com
- [Testing for accessibility](https://www.pie.design/accessibility/testing-for-accessibility/): Find out more about how we test for accessibility and ensure that our products meet accessibility standards.
- [Text Scaling - Apps](https://www.pie.design/accessibility/text-scaling/): How text scaling differs from zoom on iOS and Android, the WCAG resize text requirement, and how components should handle larger text, including icons, truncation, layout and navigation.
- [Resources](https://www.pie.design/accessibility/resources/): In this section you’ll find a list of resources about accessibility in design systems and digital products.

## All about PIE

- [What is PIE?](https://www.pie.design/all-about-pie/what-is-pie/): Principles for Interfaces and Experiences (PIE) is Just Eat Takeaway’s global design system.
- [Our vision](https://www.pie.design/all-about-pie/our-vision/): Sustain a JET design system which empowers us all to create consistent, effective and inclusive products for our users.
- [Roadmap](https://www.pie.design/all-about-pie/roadmap/): This roadmap displays our current projects and future plans. Its aim is to inform and assist our teams in planning their work.

## Agents

- [Agentic AI Resources](https://www.pie.design/agents/resources/): This page provides different resources for working with agentic AIs.

## Designers

- [Getting started - Overview](https://www.pie.design/designers/getting-started/): In this section you’ll find everything you need to know to get up and running with the PIE design system.
- [Getting started - Best practices](https://www.pie.design/designers/getting-started/best-practices/): Best practices for designing with PIE in Figma, such as following PIE comms, using Foundation styles, keeping libraries up to date, Auto Layout, and using and creating Figma slots.
- [Getting started - Figma files](https://www.pie.design/designers/getting-started/figma-files/): Links to the PIE Figma libraries for foundations, web and app components, patterns, motion, accessibility, icons and illustrations, plus business area libraries.
- [Contributing](https://www.pie.design/designers/contributing/): Everything you need to know about contributing to our design system and how you can help us.
- [How we support you](https://www.pie.design/designers/how-we-support-you/): All you need to know about the ways in which we support different teams across JET.

## Engineers

- [Getting started - Overview](https://www.pie.design/engineers/getting-started/): In this section you’ll find everything you need to get you up and running with the PIE design system for engineers.
- [Getting started - Structure](https://www.pie.design/engineers/getting-started/structure/): Compares the JET component libraries that implement PIE (PIE Web Components, Snacks, Fozzie and Skip PIE), recommends which one to use for each tech stack (React, Next, Vue, Nuxt and SSR), explains what to do when a web component is missing, and describes how the PIE monorepo is organised into apps and packages.
- [Guidelines - Overview](https://www.pie.design/engineers/guidelines/): In this section you’ll find helpful engineering guides and standards that have been produced by the PIE team.
- [Guidelines - Browser support](https://www.pie.design/engineers/guidelines/browser-support/): Browser support levels and their testing requirements, the level of each desktop and mobile browser, and recommended devices to test on.
- [Contributing](https://www.pie.design/engineers/contributing/): In this section you’ll find everything you need to know about contributing to our design system and how you can help us.
- [Web components - Overview](https://www.pie.design/engineers/web-components/): In this section you’ll find all the information you need to use our PIE Web Components library.
- [Web components - Nuxt 3 Integration](https://www.pie.design/engineers/web-components/integration-guides/nuxt-3/): How to install and set up PIE Web Components with SSR in a Nuxt 3 app, including pie-css, nuxt-ssr-lit and the required nuxt.config settings, with a usage example.
- [Web components - NextJS 14 Integration](https://www.pie.design/engineers/web-components/integration-guides/nextjs-14/): How to install and set up PIE Web Components with SSR in a NextJS 14 app, including pie-css, the @lit-labs/nextjs config, React imports and "use client" with the app router.

## Support

- [FAQ](https://www.pie.design/support/faq/): Here you’ll find the answers to our frequently asked questions, but feel free to reach out to us if you need additional help.
- [Contact us](https://www.pie.design/support/contact-us/): Have a question about our design system? The PIE team is here to assist you.

Generated on: 2026-11-05T10:35:20.277Z