# Telescope Design System > Pleo's design system: @pleo-io/telescope React components, design tokens, icons, and guidelines. ## About - [About: Growth](https://telescope.pleo.io/about/about.growth.md): We promote a bottom-up approach that supports the organic growth of design elements. In this approach, new elements are placed close to the feature where they are used. Centralisation is only done when necessary. - [About: Overview](https://telescope.pleo.io/about/about.overview.md): Telescope is a collection of reusable user interface assets guided by clear standards that can be assembled together to build coherent digital experiences at Pleo - [About: Principles](https://telescope.pleo.io/about/about.principles.md): Our principles are the practical, stern, opinionated standards that guide decision making. They reinforce our core values and help decisions move in a consistent direction. - [About: Sharing](https://telescope.pleo.io/about/about.sharing.md): Sharing is not always caring. It's a delicate balance, but complexities added to the foundation of our system can become difficult to change once users get accustomed to them. - [About: Values](https://telescope.pleo.io/about/about.values.md): Our values describe the feeling we want elicited by our customers when they use our products. They are the small carefully chosen subset of intentionally broad adjectives that helps inform our principles. - [Home](https://telescope.pleo.io/home/home.landing.md): Design, build, and ship consistent and coherent experiences with Telescope - The Pleo Design System. ## Components - [Accordion: Code](https://telescope.pleo.io/components/web/accordion/accordion.code.md): A stacked set of interactive items that you can click to show more information. Each item can be either collapsed or expanded to reveal the complete content. - [Accordion: Guidelines](https://telescope.pleo.io/components/web/accordion/accordion.guidelines.md): A stacked set of interactive items that you can click to show more information. Each item can be either collapsed or expanded to reveal the complete content. - [Action banner: Code](https://telescope.pleo.io/components/web/action-banner/action-banner.code.md): A versatile and somewhat unopinionated component. Commonly used as a linkbox to combine multiple elements into a single interactable element. - [Action banner: Guidelines](https://telescope.pleo.io/components/web/action-banner/action-banner.guidelines.md): A versatile and somewhat unopinionated component. Commonly used as a linkbox to combine multiple elements into a single interactable element. - [Action Menu: Code](https://telescope.pleo.io/components/web/action-menu/action-menu.code.md): Enable users to trigger actions from a list in a popover when space is limited. - [Action Menu: Guidelines](https://telescope.pleo.io/components/web/action-menu/action-menu.guidelines.md): Enable users to trigger actions from a list in a popover when space is limited. - [Avatar (Mobile)](https://telescope.pleo.io/components/mobile/avatar/avatar.guidelines.md): A graphical representation of a user or entity - usually a photo or initials. - [Avatar: Code](https://telescope.pleo.io/components/web/avatar/avatar.code.md): A graphical representation of a user or entity - usually a photo or initials - [Avatar: Guidelines](https://telescope.pleo.io/components/web/avatar/avatar.guidelines.md): A graphical representation of a user or entity - usually a photo or initials - [Badge (Mobile)](https://telescope.pleo.io/components/mobile/badge/badge.guidelines.md): A static label that highlights an item's status. - [Badge: Code](https://telescope.pleo.io/components/web/badge/badge.code.md): A static label that highlights an item's status. - [Badge: Guidelines](https://telescope.pleo.io/components/web/badge/badge.guidelines.md): A static label that highlights an item's status. - [Banner: Code](https://telescope.pleo.io/components/web/banner/banner.code.md): A prominent section at the top of a page that provides users with important feedback or information relating to the entire page, product, or application. - [Banner: Content](https://telescope.pleo.io/components/web/banner/banner.content.md): A prominent section at the top of a page that provides users with important feedback or information relating to the entire page, product, or application. - [Banner: Guidelines](https://telescope.pleo.io/components/web/banner/banner.guidelines.md): A prominent section at the top of a page that provides users with important feedback or information relating to the entire page, product, or application. - [Box](https://telescope.pleo.io/components/web/box/box.guidelines.md): A utility component for working with spacing. - [Button (Mobile)](https://telescope.pleo.io/components/mobile/button/button.guidelines.md): A clickable element which communicates that users can trigger an action. - [Button group: Code](https://telescope.pleo.io/components/web/button-group/button-group.code.md): A layout component used to group multiple related actions a user can take. - [Button group: Guidelines](https://telescope.pleo.io/components/web/button-group/button-group.guidelines.md): A layout component used to group multiple related actions a user can take. - [Button: Code](https://telescope.pleo.io/components/web/button/button.code.md): A clickable element which communicates that users can trigger an action. - [Button: Content](https://telescope.pleo.io/components/web/button/button.content.md): A clickable element which communicates that users can trigger an action. - [Button: Guidelines](https://telescope.pleo.io/components/web/button/button.guidelines.md): A clickable element which communicates that users can trigger an action. - [Callout (Mobile)](https://telescope.pleo.io/components/mobile/callout/callout.guidelines.md): Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section. - [Callout: Code](https://telescope.pleo.io/components/web/callout/callout.code.md): Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section. - [Callout: Content](https://telescope.pleo.io/components/web/callout/callout.content.md): Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section. - [Callout: Guidelines](https://telescope.pleo.io/components/web/callout/callout.guidelines.md): Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section. - [Card: Code](https://telescope.pleo.io/components/web/card/card.code.md): A styled container that groups related content and actions. - [Card: Guidelines](https://telescope.pleo.io/components/web/card/card.guidelines.md): A styled container that groups related content and actions. - [Checkbox (Mobile)](https://telescope.pleo.io/components/mobile/checkbox/checkbox.guidelines.md): A form element that enables users to make a binary choice (checked/unchecked). - [Checkbox group: Code](https://telescope.pleo.io/components/web/checkbox-group/checkbox-group.code.md): A form element that enables users to select multiple values from a list of options. - [Checkbox group: Guidelines](https://telescope.pleo.io/components/web/checkbox-group/checkbox-group.guidelines.md): A form element that enables users to select multiple values from a list of options. - [Checkbox: Code](https://telescope.pleo.io/components/web/checkbox/checkbox.code.md): A form element that enables users to make a binary choice (checked/unchecked). - [Checkbox: Guidelines](https://telescope.pleo.io/components/web/checkbox/checkbox.guidelines.md): A form element that enables users to make a binary choice (checked/unchecked). - [Chip: Code](https://telescope.pleo.io/components/web/chip/chip.code.md): A compact, interactive control for suggesting, selecting, or representing an entered value. - [Chip: Guidelines](https://telescope.pleo.io/components/web/chip/chip.guidelines.md): A compact, interactive control for suggesting, selecting, or representing an entered value. - [Choice tiles: Code](https://telescope.pleo.io/components/web/choice-tiles/choice-tiles.code.md): Enable users to select a single value from a list of choices that support more complex content than regular radio buttons. - [Choice tiles: Guidelines](https://telescope.pleo.io/components/web/choice-tiles/choice-tiles.guidelines.md): Enable users to select a single value from a list of choices that support more complex content than regular radio buttons. - [Coach mark: Code](https://telescope.pleo.io/components/web/coach-mark/coach-mark.code.md): A Popover that guides users step-by-step through key aspects of new features. - [Coach mark: Guidelines](https://telescope.pleo.io/components/web/coach-mark/coach-mark.guidelines.md): A Popover that guides users step-by-step through key aspects of new features. - [Code input](https://telescope.pleo.io/components/web/code-input/code-input.guidelines.md): A numeric code input rendered as individual cells, for passcodes, one-time passwords (OTP) and authenticator (TOTP) codes. - [Components](https://telescope.pleo.io/components/web/overview/overview.overview.md): Presentational user interface components such as buttons, form elements and overlays. Browse all components or select a specific category. - [Components (Mobile)](https://telescope.pleo.io/components/mobile/overview/overview.overview.md): Presentational user interface components such as buttons, form elements and overlays. Browse all components or select a specific category. - [Copyable: Code](https://telescope.pleo.io/components/web/copyable/copyable.code.md): A button that allows users to quickly and easily copy content to their clipboard. - [Copyable: Guidelines](https://telescope.pleo.io/components/web/copyable/copyable.guidelines.md): A button that allow users to quickly and easily copy content to their clipboard. - [Count: Code](https://telescope.pleo.io/components/web/count/count.code.md): A static label that indicates the quantity of items. - [Count: Guidelines](https://telescope.pleo.io/components/web/count/count.guidelines.md): A static label that indicates the quantity of items. - [Currency input: Code](https://telescope.pleo.io/components/web/currency-input/currency-input.code.md): An enhanced input field that provides visual and non-visual cues to a user when entering an amount of money in a specified currency. - [Currency input: Guidelines](https://telescope.pleo.io/components/web/currency-input/currency-input.guidelines.md): An enhanced input field that provides visual and non-visual cues to a user when entering an amount of money in a specified currency. - [Data list](https://telescope.pleo.io/components/web/data-list/data-list.guidelines.md): A versatile and accessible utility component for rendering lists of data. It provides features such as keyboard navigation, infinite scrolling, and customizable rendering. - [Date input: Code](https://telescope.pleo.io/components/web/date-input/date-input.code.md): A means of inputting a date - either by typing it or using a date picker interface. - [Date input: Guidelines](https://telescope.pleo.io/components/web/date-input/date-input.guidelines.md): Enable users to input a date — either in a textfield or with a date picker. - [Date picker: Code](https://telescope.pleo.io/components/web/date-picker/date-picker.code.md): A form element used to select a single or a range of dates. - [Date picker: Guidelines](https://telescope.pleo.io/components/web/date-picker/date-picker.guidelines.md): A form element used to select a single or a range of dates. - [Drawer: Code](https://telescope.pleo.io/components/web/drawer/drawer.code.md): A panel that slides out from the edge of the screen to focus a user's attention on completing a task or viewing details about an item. - [Drawer: Guidelines](https://telescope.pleo.io/components/web/drawer/drawer.guidelines.md): A panel that slides out from the edge of the screen to focus a user's attention on completing a task or viewing details about an item. - [Empty state: Code](https://telescope.pleo.io/components/web/empty-state/empty-state.code.md): Used when there is no data to display to describe what the user can do next. Empty state provides explanation and guidance to help user progress. - [Empty state: Guidelines](https://telescope.pleo.io/components/web/empty-state/empty-state.guidelines.md): Used when there is no data to display to describe what the user can do next. Empty state provides explanation and guidance to help user progress. - [Feature tip: Code](https://telescope.pleo.io/components/web/feature-tip/feature-tip.code.md): Used to help users learn about new or unfamiliar interface features. - [Feature Tip: Guidelines](https://telescope.pleo.io/components/web/feature-tip/feature-tip.guidelines.md): Used to help users learn about new or unfamiliar interface features. - [Fieldset: Code](https://telescope.pleo.io/components/web/fieldset/fieldset.code.md): A wrapper for related form fields. Used to separate form content with a label and spacing. - [Fieldset: Guidelines](https://telescope.pleo.io/components/web/fieldset/fieldset.guidelines.md): A wrapper for related form fields. Used to separate form content with a label and spacing. - [File drop: Code](https://telescope.pleo.io/components/web/file-drop/file-drop.code.md): Utility component that lets users upload files by dragging and dropping them into an area on a page, or by activating a button. - [File drop: Guidelines](https://telescope.pleo.io/components/web/file-drop/file-drop.guidelines.md): Utility component that lets users upload files by dragging and dropping the files into an area on a page, or activating a button. - [File input: Code](https://telescope.pleo.io/components/web/file-input/file-input.code.md): Utility component that allows users to select a file from their device. - [File input: Guidelines](https://telescope.pleo.io/components/web/file-input/file-input.guidelines.md): Utility component that allow users to select a file(s) from the file system. - [Filter menu: Code](https://telescope.pleo.io/components/web/filter-menu/filter-menu.code.md): A component used to apply category-specific filters for a dataset. - [Filter menu: Guidelines](https://telescope.pleo.io/components/web/filter-menu/filter-menu.guidelines.md): A component used to apply category-specific filters for a dataset. - [Filter results: Code](https://telescope.pleo.io/components/web/filter-results/filter-results.code.md): Used to reflect the amount of results given a set of applied filters. It's also used to allow users to clear all filters. - [Filter results: Guidelines](https://telescope.pleo.io/components/web/filter-results/filter-results.guidelines.md): Used to reflect the amount of results given a set of applied filters. It's also used to allow users to clear all filters. - [Filters layout: Code](https://telescope.pleo.io/components/web/filters-layout/filters-layout.code.md): A composable and responsive layout component for filters - [Filters layout: Guidelines](https://telescope.pleo.io/components/web/filters-layout/filters-layout.guidelines.md): A composable and responsive layout component for filters - [Flex](https://telescope.pleo.io/components/web/flex/flex.guidelines.md): A utility component for creating flex layouts - [Footer](https://telescope.pleo.io/components/web/footer/footer.guidelines.md): A footer bar for actions, pinned to the bottom of a page or panel. - [Form control (Mobile)](https://telescope.pleo.io/components/mobile/form-control/form-control.guidelines.md): Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text. - [Form control: Code](https://telescope.pleo.io/components/web/form-control/form-control.code.md): Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text. - [Form control: Guidelines](https://telescope.pleo.io/components/web/form-control/form-control.guidelines.md): Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text. - [Header (Mobile)](https://telescope.pleo.io/components/mobile/header/header.guidelines.md): The topmost element displaying the screen title and optional design elements such as subtitle, avatar, and icon buttons. It helps users navigate the app and access key actions easily. - [Help popover: Code](https://telescope.pleo.io/components/web/help-popover/help-popover.code.md): An icon button with a question mark that reveals help information on click or tap. - [Help popover: Content](https://telescope.pleo.io/components/web/help-popover/help-popover.content.md): An icon button with a question mark that reveals help information on click or tap. - [Help popover: Guidelines](https://telescope.pleo.io/components/web/help-popover/help-popover.guidelines.md): An icon button with a question mark that reveals help information on click or tap. - [Icon button (Mobile)](https://telescope.pleo.io/components/mobile/icon-button/icon-button.guidelines.md): Enables users to control the visibility of other UI elements. - [Icon button: Code](https://telescope.pleo.io/components/web/icon-button/icon-button.code.md): Enables users to control the visibility of other UI elements. - [Icon button: Guidelines](https://telescope.pleo.io/components/web/icon-button/icon-button.guidelines.md): Enables users to control the visibility of other UI elements. - [Image viewer](https://telescope.pleo.io/components/web/image-viewer/image-viewer.code.md): A viewer for previewing an image that can be zoomed, panned and rotated. - [Inline](https://telescope.pleo.io/components/web/inline/inline.guidelines.md): A utility component for controlling horizontal layouts. - [Input: Code](https://telescope.pleo.io/components/web/input/input.code.md): A form element that enables users to enter a single line of text. - [Input: Guidelines](https://telescope.pleo.io/components/web/input/input.guidelines.md): A form element that enables users to enter a single line of text. - [Link: Code](https://telescope.pleo.io/components/web/link/link.code.md): Text that navigates the user from one webpage to another. - [Link: Guidelines](https://telescope.pleo.io/components/web/link/link.guidelines.md): Text that navigates the user from one page to another. - [List item: Code](https://telescope.pleo.io/components/web/list-item/list-item.code.md): A versatile element that can display information in a clear and organized manner. - [List item: Guidelines](https://telescope.pleo.io/components/web/list-item/list-item.guidelines.md): A versatile element that can display information in a clear and organized manner. - [List: Code](https://telescope.pleo.io/components/web/list/list.code.md): A set of text objects in a bulleted or numbered format. - [List: Guidelines](https://telescope.pleo.io/components/web/list/list.guidelines.md): A set of text objects in a bulleted or numbered format. - [Listbox: Code](https://telescope.pleo.io/components/web/listbox/listbox.code.md): A listbox provides a way to select options from a predefined, searchable list that is always visible. - [Listbox: Guidelines](https://telescope.pleo.io/components/web/listbox/listbox.guidelines.md): A listbox provides a way to select or reorder options in a predefined list and a selected option can then be made to perform a single action. - [Loading: Code](https://telescope.pleo.io/components/web/loading/loading.code.md): A component used as a placeholder when content is not yet available or to indicate that an action is being processed. - [Loading: Guidelines](https://telescope.pleo.io/components/web/loading/loading.guidelines.md): A component used as a placeholder when content is not yet available or to indicate that an action is being processed. - [Modal Split: Code](https://telescope.pleo.io/components/web/modal-split/modal-split.code.md): Modal split is a focused-experience, introduced as an overlay to explain to customers concepts or actions within the product. - [Modal split: Content](https://telescope.pleo.io/components/web/modal-split/modal-split.content.md): Modal split is a focused-experience, introduced as an overlay to explain to customers concepts or actions within the product. - [Modal Split: Guidelines](https://telescope.pleo.io/components/web/modal-split/modal-split.guidelines.md): Modal split is a focused-experience, introduced as an overlay to explain to customers concepts or actions within the product. - [Modal: Code](https://telescope.pleo.io/components/web/modal/modal.code.md): A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed. - [Modal: Content](https://telescope.pleo.io/components/web/modal/modal.content.md): A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed. - [Modal: Guidelines](https://telescope.pleo.io/components/web/modal/modal.guidelines.md): A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed. - [Page](https://telescope.pleo.io/components/web/page/page.guidelines.md): A collection of components which let you compose a page in our web application. - [Phone input](https://telescope.pleo.io/components/web/phone-input/phone-input.guidelines.md): Used to collect phone numbers with international dial codes. It contains a dropdown which allows the user to choose from a list of countries and dial codes. - [Pleo logo](https://telescope.pleo.io/components/web/pleo-logo/pleo-logo.guidelines.md): The horizontal Pleo wordmark, drawn as an inline SVG in the brand logo colour. - [Popover: Code](https://telescope.pleo.io/components/web/popover/popover.code.md): A small overlay that opens on demand. Popovers allow users to access additional content and actions without cluttering the page. - [Popover: Guidelines](https://telescope.pleo.io/components/web/popover/popover.guidelines.md): A small overlay that opens on demand. Popovers allow users to access additional content and actions without cluttering the page. - [Progress bar: Code](https://telescope.pleo.io/components/web/progress-bar/progress-bar.code.md): A component used to represent the completion of a task or to visualize different states that are relevant to the user. - [Progress bar: Guidelines](https://telescope.pleo.io/components/web/progress-bar/progress-bar.guidelines.md): A component used to represent the completion of a task or to visualize different states that are relevant to the user. - [Promotional Banner: Code](https://telescope.pleo.io/components/web/promotional-banner/promotional-banner.code.md): Displays an important, succinct, promotional message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed. - [Promotional banner: Content](https://telescope.pleo.io/components/web/promotional-banner/promotional-banner.content.md): Displays an important, succinct, promotional message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed. - [Promotional Banner: Guidelines](https://telescope.pleo.io/components/web/promotional-banner/promotional-banner.guidelines.md): Displays an important, succinct, promotional message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed. - [Radio group (Mobile)](https://telescope.pleo.io/components/mobile/radio-group/radio-group.guidelines.md): A form element that allows users to select one option from a set of choices - [Radio group: Code](https://telescope.pleo.io/components/web/radio-group/radio-group.code.md): A form element that enables users to select a single value from a list of options. - [Radio group: Guidelines](https://telescope.pleo.io/components/web/radio-group/radio-group.guidelines.md): A form element that enables users to select a single value from a list of options. - [Screen template (Mobile)](https://telescope.pleo.io/components/mobile/screen-template/screen-template.guidelines.md): A utility component for designers to create mobile app Figma UI designs. - [Search: Code](https://telescope.pleo.io/components/web/search/search.code.md): An input that allows users to find content by entering a search term. - [Search: Guidelines](https://telescope.pleo.io/components/web/search/search.guidelines.md): An input that allow users to find content by entering a search term. - [Segmented control: Code](https://telescope.pleo.io/components/web/segmented-control/segmented-control.code.md): A hybrid somewhere between a button group, radio buttons, and tabs; segmented controls are used to switch between different options or views. - [Segmented control: Guidelines](https://telescope.pleo.io/components/web/segmented-control/segmented-control.guidelines.md): A hybrid somewhere between a button group, radio buttons, and tabs; segmented controls are used to switch between different options or views. - [Select: Code](https://telescope.pleo.io/components/web/select/select.code.md): A form element that enables users to select a single or multiple values from a list of options. - [Select: Guidelines](https://telescope.pleo.io/components/web/select/select.guidelines.md): A form element that enables users to select a single or multiple values from a list of options. - [Skeleton: Code](https://telescope.pleo.io/components/web/skeleton/skeleton.code.md): Replaces content with a placeholder of the same shape to indicate a loading state. - [Skeleton: Guidelines](https://telescope.pleo.io/components/web/skeleton/skeleton.guidelines.md): Replaces content with a placeholder of the same shape to indicate a loading state. - [Slider: Code](https://telescope.pleo.io/components/web/slider/slider.code.md): A form control for choosing a value within a preset range of values. - [Slider: Guidelines](https://telescope.pleo.io/components/web/slider/slider.guidelines.md): A form control for choosing a value within a preset range of values. - [Sortable List: Code](https://telescope.pleo.io/components/web/sortable-list/sortable-list.code.md): A component that lets users customize the order of list items. - [Sortable List: Guidelines](https://telescope.pleo.io/components/web/sortable-list/sortable-list.guidelines.md): A component that lets users customize the order of list items. - [Spinner: Code](https://telescope.pleo.io/components/web/spinner/spinner.code.md): A component used as a placeholder when content is not yet available or to indicate that an action is being processed. - [Spinner: Guidelines](https://telescope.pleo.io/components/web/spinner/spinner.guidelines.md): A component used as a placeholder when content is not yet available or to indicate that an action is being processed. - [Stack](https://telescope.pleo.io/components/web/stack/stack.guidelines.md): A utility component for controlling vertical layouts. - [Steps: Code](https://telescope.pleo.io/components/web/steps/steps.code.md): An interactive representation of a user’s progress through a series of discrete steps, with the Wizard component as its non-interactive counterpart. - [Steps: Guidelines](https://telescope.pleo.io/components/web/steps/steps.guidelines.md): An interactive representation of a user’s progress through a series of discrete steps, with the Wizard component as its non-interactive counterpart. - [Suggestion bar: Code](https://telescope.pleo.io/components/web/suggestion-bar/suggestion-bar.code.md): A list of buttons shown below an input field that when clicked updates the input value - [Suggestion bar: Guidelines](https://telescope.pleo.io/components/web/suggestion-bar/suggestion-bar.guidelines.md): A list of buttons shown below an input field that when clicked updates the input value - [Switch: Code](https://telescope.pleo.io/components/web/switch/switch.code.md): A control used to switch between two states - often on or off. - [Switch: Guidelines](https://telescope.pleo.io/components/web/switch/switch.guidelines.md): A control used to switch between two states - often on or off. - [Table: Code](https://telescope.pleo.io/components/web/table/table.code.md): A component for displaying large amounts of data in rows and columns. - [Table: Guidelines](https://telescope.pleo.io/components/web/table/table.guidelines.md): A component for displaying large amounts of data in rows and columns. - [Tabs: Code](https://telescope.pleo.io/components/web/tabs/tabs.code.md): Tabs are labeled controls that allow users to switch between multiple views within a page. - [Tabs: Content](https://telescope.pleo.io/components/web/tabs/tabs.content.md): Tabs are labeled controls that allow users to switch between multiple views within a page. - [Tabs: Guidelines](https://telescope.pleo.io/components/web/tabs/tabs.guidelines.md): Tabs are labeled controls that allow users to switch between multiple views within a page. - [Tag (Mobile)](https://telescope.pleo.io/components/mobile/tag/tag.guidelines.md): A static label that highlights an item's category or attribute. - [Tag: Code](https://telescope.pleo.io/components/web/tag/tag.code.md): A static label that highlights an item's category or attribute. - [Tag: Guidelines](https://telescope.pleo.io/components/web/tag/tag.guidelines.md): A static label that highlights an item's category or attribute. - [Text field (Mobile)](https://telescope.pleo.io/components/mobile/text-field/text-field.guidelines.md): A form element that enables users to enter a single line of text. - [Text: Code](https://telescope.pleo.io/components/web/text/text.code.md): A primitive component that can be used to create all kinds of text styles. - [Text: Guidelines](https://telescope.pleo.io/components/web/text/text.guidelines.md): A primitive component that can be used to create all kinds of text styles. - [Textarea (Mobile)](https://telescope.pleo.io/components/mobile/textarea/textarea.guidelines.md): A form element that enables users to enter text on multiple lines. - [Textarea: Code](https://telescope.pleo.io/components/web/textarea/textarea.code.md): A form element that enables users to enter text on multiple lines. - [Textarea: Guidelines](https://telescope.pleo.io/components/web/textarea/textarea.guidelines.md): A form element that enables users to enter text on multiple lines. - [Toast: Code](https://telescope.pleo.io/components/web/toast/toast.code.md): Give users short, non-disruptive feedback on the outcome of an action. - [Toast: Guidelines](https://telescope.pleo.io/components/web/toast/toast.guidelines.md): Give users short, non-disruptive feedback on the outcome of an action. - [Tooltip: Code](https://telescope.pleo.io/components/web/tooltip/tooltip.code.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. - [Tooltip: Guidelines](https://telescope.pleo.io/components/web/tooltip/tooltip.guidelines.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. - [Wizard: Code](https://telescope.pleo.io/components/web/wizard/wizard.code.md): A non-interactive representation of a user’s progress through a series of discrete steps, with the Steps component as its interactive counterpart. - [Wizard: Guidelines](https://telescope.pleo.io/components/web/wizard/wizard.guidelines.md): A non-interactive representation of a user’s progress through a series of discrete steps, with the Steps component as its interactive counterpart. ## Content - [Content guidelines: Guidelines](https://telescope.pleo.io/content/notion-guidelines.guidelines.md): Guide for how to fill out the component content guidelines template - [Content guidelines: Template](https://telescope.pleo.io/content/notion-guidelines.template.md): This template outlines how we create content guidelines for our design system components in Notion. - [Content: Generative AI](https://telescope.pleo.io/content/content.generative-ai.md): Generative AI is changing content production. Its growing role in our day to day work means we need to examine how we use it at Pleo. - [Content: Principles](https://telescope.pleo.io/content/content.principles.md): Our content design principles outline how to write conversational, consistent, and easily scannable copy for a global audience, always prioritising localisation to create a clear user experience. - [Incidents: Incidents](https://telescope.pleo.io/content/content.incidents.md): When something goes wrong — from phishing attempts to system outages — how we communicate defines trust. - [Notion building blocks: Building blocks](https://telescope.pleo.io/content/notion-guidelines.building-blocks.md): This page contains the building blocks (patterns) that can be used to create guideline pages which can then be translated into pages for the Telescope website. ## Contributing - [Contributing](https://telescope.pleo.io/contributing/contributing.overview.md): Our contribution model enables product teams to add new features based on their product requirements. At the same time, it allows us to keep an eye on the quality and consistency of the user experience. ## Design tokens - [Design tokens: About](https://telescope.pleo.io/design-tokens/design-tokens.about.md): What they are, why we use them, and how we name them. - [Design tokens: Code](https://telescope.pleo.io/design-tokens/design-tokens.code.md): How to use our design tokens in code. - [Design tokens: Design](https://telescope.pleo.io/design-tokens/design-tokens.design.md): How to use our design tokens in your designs. - [Design tokens: Overview](https://telescope.pleo.io/design-tokens/design-tokens.overview.md): A complete list of all design tokens used in our design system. ## Foundations - [Border](https://telescope.pleo.io/foundations/border/border.overview.md): We use borders to define elements and create visual separation, making content easier to scan and understand. - [Color](https://telescope.pleo.io/foundations/color/color.overview.md): We use color to signal structure, highlight or emphasize important information or elements, and to display different states. - [Foundations](https://telescope.pleo.io/foundations/overview/overview.overview.md): Foundations are the core styles and principles we use to create a consistent, scalable, and cohesive experience that looks, feels, and works like Pleo. - [Layering](https://telescope.pleo.io/foundations/z-index/z-index.overview.md): We use z-indices to manage layering in our interfaces, adding a third axis to arrange content. - [Motion: About](https://telescope.pleo.io/foundations/motion/motion.about.md): Why and how we use motion to help convey meaning in our UI. - [Motion: Accessibility](https://telescope.pleo.io/foundations/motion/motion.accessibility.md): How to use motion in an accessible way. - [Motion: Design](https://telescope.pleo.io/foundations/motion/motion.design.md): How to use our motion tokens in your designs. - [Motion: Overview](https://telescope.pleo.io/foundations/motion/motion.overview.md): We use motion to enhance interactions, provide feedback, and create a sense of continuity. - [Motion: Resources](https://telescope.pleo.io/foundations/motion/motion.resources.md): Key motion design resources that shaped our guidelines. - [Opacity](https://telescope.pleo.io/foundations/opacity/opacity.overview.md): We use opacity for overlays, shadows and illustrative effects. - [Radius](https://telescope.pleo.io/foundations/radius/radius.overview.md): We use border radiuses to create friendly, approachable interfaces that keep the focus on content. - [Shadow](https://telescope.pleo.io/foundations/shadow/shadow.overview.md): We use shadows to provide cues about depth, direction of movement and surface edges. - [Spacing](https://telescope.pleo.io/foundations/spacing/spacing.overview.md): We use spacing to create clear, balanced layouts that improve readability and visual hierarchy. - [Typography](https://telescope.pleo.io/foundations/typography/typography.overview.md): We use typography to create clear, consistent, and visually harmonious text across our products. ## Graphic elements - [Flags: Code](https://telescope.pleo.io/graphic-elements/flags/flags.code.md): We expose flags for both React and React Native, through a single `Flag` component rather than one component per country. - [Flags: Design](https://telescope.pleo.io/graphic-elements/flags/flags.design.md): How to find our flags in Figma. - [Flags: Overview](https://telescope.pleo.io/graphic-elements/flags/flags.overview.md): We use flags to visually represent a country — for example next to a company's registered country, or a payment card's issuing country. Unlike icons, flags keep their own colors and aren't recolorable. - [Flags: Requests and contributions](https://telescope.pleo.io/graphic-elements/flags/flags.requests-and-contributions.md): How to request a new flag. - [Graphic elements](https://telescope.pleo.io/graphic-elements/overview/overview.overview.md): Our different types of graphic elements vary in size and purpose, all while maintaining a cohesive Pleo look and feel. - [Icons: Code](https://telescope.pleo.io/graphic-elements/icons/icons.code.md): We expose icons for both React and React Native. We also supply PNGs for special cases such as the navigation bar on iOS. - [Icons: Design](https://telescope.pleo.io/graphic-elements/icons/icons.design.md): How to use our icons in your designs. - [Icons: Overview](https://telescope.pleo.io/graphic-elements/icons/icons.overview.md): We use icons to enhance usability by visually communicating actions, statuses, and concepts in a compact, recognizable form. They come in sizes 16px, 20px, and 24px. - [Icons: Requests and contributions](https://telescope.pleo.io/graphic-elements/icons/icons.requests-and-contributions.md): How to request a new icon or contribute one yourself. - [Illustrations: About](https://telescope.pleo.io/graphic-elements/illustrations/illustrations.about.md): Our illustration library uses a fixed set of objects to support copy, guide attention, and add personality to the product. - [Illustrations: Code](https://telescope.pleo.io/graphic-elements/illustrations/illustrations.code.md): How to use our illustrations in code. - [Illustrations: Design](https://telescope.pleo.io/graphic-elements/illustrations/illustrations.design.md): How to use illustrations in your designs. - [Illustrations: Overview](https://telescope.pleo.io/graphic-elements/illustrations/illustrations.overview.md): Every illustration available in code. - [Illustrations: Requests](https://telescope.pleo.io/graphic-elements/illustrations/illustrations.requests.md): How to get a new illustration added in Figma and code. ## Patterns - [Feedback and status: About](https://telescope.pleo.io/patterns/feedback-and-status/feedback-and-status.about.md): How to create feedback and status messages that build trust, reduce uncertainty, and keep users informed - [Feedback and status: Accessibility](https://telescope.pleo.io/patterns/feedback-and-status/feedback-and-status.accessibility.md): How to ensure feedback and status messages are accessible to all users - [Feedback and status: Components](https://telescope.pleo.io/patterns/feedback-and-status/feedback-and-status.components.md): How to pick the right Telescope component for feedback and status messages - [Feedback and status: Resources](https://telescope.pleo.io/patterns/feedback-and-status/feedback-and-status.resources.md): We prefer to stand on the shoulders of giants. A lot could be written on the topic of feedback and status, and a lot already has. - [Feedback and status: Status types](https://telescope.pleo.io/patterns/feedback-and-status/feedback-and-status.status-types.md): How to pick the right status type and use the appropriate icons and semantic colour tokens - [Filtering: About](https://telescope.pleo.io/patterns/filtering/filtering.about.md): Filtering allows users to add or remove data items from a displayed data set by turning on and off certain predefined attributes. - [Filtering: Resources](https://telescope.pleo.io/patterns/filtering/filtering.resources.md): We prefer to stand on the shoulders of giants. A lot could be written on the topic of filtering and a lot already has. - [Forms: About](https://telescope.pleo.io/patterns/forms/forms.about.md): Forms can be simple or complex, and may be presented as dedicated pages, side panels, or modals depending on the use case and the situation. - [Forms: Accessibility](https://telescope.pleo.io/patterns/forms/forms.accessibility.md): Forms can be simple or complex, and may be presented as dedicated pages, side panels, or modals depending on the use case and the situation. - [Forms: Resources](https://telescope.pleo.io/patterns/forms/forms.resources.md): Forms can be simple or complex, and may be presented as dedicated pages, side panels, or dialogs depending on the use case and the situation. - [Overlays: About](https://telescope.pleo.io/patterns/overlays/overlays.about.md): An overlay provides contextual information and options in form of an additional layer on top of the current state of the interface. - [Overlays: Resources](https://telescope.pleo.io/patterns/overlays/overlays.resources.md): We prefer to stand on the shoulders of giants. A lot could be written on this topic of overlays and a lot already has. - [Patterns: About](https://telescope.pleo.io/patterns/overview/overview.about.md): Telescope patterns are reusable combinations of components and design patterns as well as information on when to use which component. - [Patterns: Overview](https://telescope.pleo.io/patterns/overview/overview.overview.md): Telescope patterns are reusable combinations of components and design patterns as well as information on when to use which component. - [Patterns: Resources](https://telescope.pleo.io/patterns/overview/overview.resources.md): We prefer to stand on the shoulders of giants. A lot could be written on the topic of guidelines and a lot already has. ## Tools - [Tools](https://telescope.pleo.io/tools/tools.overview.md): We're slowly but steadily adding tools and utilities to make it easier and more joyful to work with our design system. - [Tools: Contributing](https://telescope.pleo.io/tools/tools.contributing.md): We encourage product designers and developers to collaborate with us to keep Telescope relevant and effective over time. ## Utils - [Click outside: Code](https://telescope.pleo.io/utils/click-outside/click-outside.code.md): A utility component that detects a click outside of the component it's wrapping. - [Click outside: Guidelines](https://telescope.pleo.io/utils/click-outside/click-outside.guidelines.md): A utility component that detects a click outside of the component it's wrapping - [Focus](https://telescope.pleo.io/utils/focus/focus.guidelines.md): Different UI elements require different focus styles. That's why we expose three different focus styles. This provides our customers who navigate by keyboard with an optimal experience. - [Utils](https://telescope.pleo.io/utils/overview/overview.overview.md): Helpers we ship with Telescope that support other components, such as behaviour and styles you wire into your own UI. They have little or no design of their own. - [Visually Hidden](https://telescope.pleo.io/utils/visually-hidden/visually-hidden.guidelines.md): A wrapper component used to visually hide content that is necessary to provide appropriate context to users utilising assistive technology.