Skip to content

↑↓ to navigate | Enter to select | Esc to dismiss

About
AboutWeb
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
Components
AccordionWeb
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.
Tags:
Arrow toggle, Collapse, Collapsible, Details, Disclosure, Expandable
Components
Action bannerWeb
A versatile and somewhat unopinionated component. Commonly used as a linkbox to combine multiple elements into a single interactable element.
Tags:
Linkbox, Action link
Components
Action MenuWeb
Enable users to trigger actions from a list in a popover when space is limited.
Components
AvatarWeb
A graphical representation of a user or entity - usually a photo or initials
Components
AvatarMobile
A graphical representation of a user or entity - usually a photo or initials.
Components
BadgeWeb
A static label that highlights an item's status.
Tags:
Tag, Pill, Chip, Label, Status
Components
BadgeMobile
A static label that highlights an item's status.
Tags:
Tag, Pill, Chip, Label, Status
Components
BannerWeb
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.
Tags:
Banner, Page banner, Status banner
Foundations
BorderWeb
We use borders to define elements and create visual separation, making content easier to scan and understand.
Components
BoxWeb
A utility component for working with spacing.
Components
ButtonWeb
A clickable element which communicates that users can trigger an action.
Components
ButtonMobile
A clickable element which communicates that users can trigger an action.
Components
Button groupWeb
A layout component used to group multiple related actions a user can take.
Tags:
Toolbar
Components
CalloutWeb
Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section.
Tags:
Notification, Feedback, Message, Banner, Alert
Components
CalloutMobile
Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section.
Components
CardWeb
A styled container that groups related content and actions.
Components
CheckboxWeb
A form element that enables users to make a binary choice (checked/unchecked).
Tags:
Checkbox group
Components
CheckboxMobile
A form element that enables users to make a binary choice (checked/unchecked).
Components
Checkbox groupWeb
A form element that enables users to select multiple values from a list of options.
Tags:
Checkbox group
Components
ChipWeb
A compact, interactive control for suggesting, selecting, or representing an entered value.
Tags:
Pill, Tag, Filter chip, Selection chip
Components
Choice tilesWeb
Enable users to select a single value from a list of choices that support more complex content than regular radio buttons.
Tags:
Option Tiles, Radio Button, Radio Group
Utils
Click outsideWeb
A utility component that detects a click outside of the component it's wrapping
Components
Coach markWeb
A Popover that guides users step-by-step through key aspects of new features.
Tags:
Product tour
Foundations
ColorWeb
We use color to signal structure, highlight or emphasize important information or elements, and to display different states.
Components
ComponentsWeb
Presentational user interface components such as buttons, form elements and overlays. Browse all components or select a specific category.
Components
ComponentsMobile
Presentational user interface components such as buttons, form elements and overlays. Browse all components or select a specific category.
Content
ContentWeb
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.
Tags:
Copy, Writing
Contributing
ContributingWeb
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.
Components
CopyableWeb
A button that allow users to quickly and easily copy content to their clipboard.
Tags:
Clipboard, Code snippet
Components
CountWeb
A static label that indicates the quantity of items.
Tags:
Count, Badge, Pill, Tag, Counter
Components
Currency inputWeb
An enhanced input field that provides visual and non-visual cues to a user when entering an amount of money in a specified currency.
Components
Data listWeb
A versatile and accessible utility component for rendering lists of data. It provides features such as keyboard navigation, infinite scrolling, and customizable rendering.
Components
Date inputWeb
Enable users to input a date — either in a textfield or with a date picker.
Components
Date pickerWeb
A form element used to select a single or a range of dates.
Design tokens
Design tokensWeb
A complete list of all design tokens used in our design system.
Components
DrawerWeb
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.
Tags:
Tray, Flyout
Components
Empty stateWeb
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.
Tags:
Blank slate
Components
Feature TipWeb
Used to help users learn about new or unfamiliar interface features.
Tags:
Product tour
Patterns
Feedback and statusWeb
How to create feedback and status messages that build trust, reduce uncertainty, and keep users informed
Components
FieldsetWeb
A wrapper for related form fields. Used to separate form content with a label and spacing.
Tags:
Section, Divider
Components
File dropWeb
Utility component that lets users upload files by dragging and dropping the files into an area on a page, or activating a button.
Tags:
Drop zone, File input, File upload, File selector
Components
File inputWeb
Utility component that allow users to select a file(s) from the file system.
Tags:
File upload, File selector
Components
Filter menuWeb
A component used to apply category-specific filters for a dataset.
Components
Filter resultsWeb
Used to reflect the amount of results given a set of applied filters. It's also used to allow users to clear all filters.
Patterns
FilteringWeb
Filtering allows users to add or remove data items from a displayed data set by turning on and off certain predefined attributes.
Components
Filters layoutWeb
A composable and responsive layout component for filters
Graphic elements
FlagsWeb
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.
Tags:
flags, preview
Components
FlexWeb
A utility component for creating flex layouts
Utils
FocusWeb
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.
Components
FooterWeb
A footer bar for actions, pinned to the bottom of a page or panel.
Components
Form controlWeb
Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text.
Components
Form controlMobile
Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text.
Patterns
FormsWeb
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.
Foundations
FoundationsWeb
Foundations are the core styles and principles we use to create a consistent, scalable, and cohesive experience that looks, feels, and works like Pleo.
Graphic elements
Graphic elementsWeb
Our different types of graphic elements vary in size and purpose, all while maintaining a cohesive Pleo look and feel.
Components
HeaderMobile
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.
Tags:
Title, Navigation
Components
Help popoverWeb
An icon button with a question mark that reveals help information on click or tap.
Tags:
Input tip
About
HomeWeb
Design, build, and ship consistent and coherent experiences with Telescope - The Pleo Design System.
Components
Icon buttonWeb
Enables users to control the visibility of other UI elements.
Components
Icon buttonMobile
Enables users to control the visibility of other UI elements.
Graphic elements
IconsWeb
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.
Graphic elements
IllustrationsWeb
Every illustration available in code.
Components
Image viewerWeb
A viewer for previewing an image that can be zoomed, panned and rotated.
Components
InlineWeb
A utility component for controlling horizontal layouts.
Components
InputWeb
A form element that enables users to enter a single line of text.
Tags:
Text input
Foundations
LayeringWeb
We use z-indices to manage layering in our interfaces, adding a third axis to arrange content.
Components
LinkWeb
Text that navigates the user from one page to another.
Components
ListWeb
A set of text objects in a bulleted or numbered format.
Components
List itemWeb
A versatile element that can display information in a clear and organized manner.
Components
ListboxWeb
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.
Tags:
Select menu
Components
LoadingWeb
A component used as a placeholder when content is not yet available or to indicate that an action is being processed.
Components
ModalWeb
A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed.
Tags:
Dialog, Popup, Modal window
Components
Modal SplitWeb
Modal split is a focused-experience, introduced as an overlay to explain to customers concepts or actions within the product.
Tags:
Dialog, Popup, Modal window, Onboarding, Guide, Steps
Foundations
MotionWeb
We use motion to enhance interactions, provide feedback, and create a sense of continuity.
Foundations
OpacityWeb
We use opacity for overlays, shadows and illustrative effects.
Patterns
OverlaysWeb
An overlay provides contextual information and options in form of an additional layer on top of the current state of the interface.
Components
PageWeb
A collection of components which let you compose a page in our web application.
Tags:
Layout, Screen
Patterns
PatternsWeb
Telescope patterns are reusable combinations of components and design patterns as well as information on when to use which component.
Components
Phone inputWeb
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.
Components
Pleo logoWeb
The horizontal Pleo wordmark, drawn as an inline SVG in the brand logo colour.
Tags:
Logo, Brand, Wordmark, Pleo
Components
PopoverWeb
A small overlay that opens on demand. Popovers allow users to access additional content and actions without cluttering the page.
Tags:
Tooltip, Toggletip, Popup
Components
Progress barWeb
A component used to represent the completion of a task or to visualize different states that are relevant to the user.
Components
Promotional BannerWeb
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.
Tags:
Jumbotron, Hero
Components
Radio groupWeb
A form element that enables users to select a single value from a list of options.
Components
Radio groupMobile
A form element that allows users to select one option from a set of choices
Tags:
Radio Group, Radio Button
Foundations
RadiusWeb
We use border radiuses to create friendly, approachable interfaces that keep the focus on content.
Components
Screen templateMobile
A utility component for designers to create mobile app Figma UI designs.
Tags:
Layout
Components
SearchWeb
An input that allow users to find content by entering a search term.
Components
Segmented controlWeb
A hybrid somewhere between a button group, radio buttons, and tabs; segmented controls are used to switch between different options or views.
Tags:
Toggle, Radio switch
Components
SelectWeb
A form element that enables users to select a single or multiple values from a list of options.
Tags:
Dropdown, Select input
Foundations
ShadowWeb
We use shadows to provide cues about depth, direction of movement and surface edges.
Components
SkeletonWeb
Replaces content with a placeholder of the same shape to indicate a loading state.
Tags:
Skeleton loader, Content loader, Placeholder
Components
SliderWeb
A form control for choosing a value within a preset range of values.
Tags:
Range input
Components
Sortable ListWeb
A component that lets users customize the order of list items.
Tags:
Menu
Foundations
SpacingWeb
We use spacing to create clear, balanced layouts that improve readability and visual hierarchy.
Components
SpinnerWeb
A component used as a placeholder when content is not yet available or to indicate that an action is being processed.
Tags:
Loading
Components
StackWeb
A utility component for controlling vertical layouts.
Components
StepsWeb
An interactive representation of a user’s progress through a series of discrete steps, with the Wizard component as its non-interactive counterpart.
Tags:
Stepper
Components
Suggestion barWeb
A list of buttons shown below an input field that when clicked updates the input value
Tags:
Pill
Components
SwitchWeb
A control used to switch between two states - often on or off.
Tags:
Toggle, Toggle button, Lightswitch
Components
TableWeb
A component for displaying large amounts of data in rows and columns.
Components
TabsWeb
Tabs are labeled controls that allow users to switch between multiple views within a page.
Components
TagWeb
A static label that highlights an item's category or attribute.
Tags:
Badge, Pill, Chip, Label, Category
Components
TagMobile
A static label that highlights an item's category or attribute.
Tags:
Label, Chip, Pill, Badge, Category
Components
TextWeb
A primitive component that can be used to create all kinds of text styles.
Tags:
Paragraph, Heading
Components
Text fieldMobile
A form element that enables users to enter a single line of text.
Components
TextareaWeb
A form element that enables users to enter text on multiple lines.
Tags:
Textbox
Components
TextareaMobile
A form element that enables users to enter text on multiple lines.
Components
ToastWeb
Give users short, non-disruptive feedback on the outcome of an action.
Tags:
Snackbar
Tools
ToolsWeb
We're slowly but steadily adding tools and utilities to make it easier and more joyful to work with our design system.
Tags:
oxlint, Chrome extension
Components
TooltipWeb
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Tags:
Popover, Toggletip, Popup
Foundations
TypographyWeb
We use typography to create clear, consistent, and visually harmonious text across our products.
Utils
UtilsWeb
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.
Utils
Visually HiddenWeb
A wrapper component used to visually hide content that is necessary to provide appropriate context to users utilising assistive technology.
Tags:
Display, Visibility, Hidden, Screen reader, SR only
Components
WizardWeb
A non-interactive representation of a user’s progress through a series of discrete steps, with the Steps component as its interactive counterpart.

About What's new?

Graphic elements

Click outside
Focus
Visually Hidden

Tools Contributing

Questions? Get in touch

Utils

Utils

Overview

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.

Didn't find what you were looking for?

Let us know in #team-design-systems or make a request.