Skip to content
Telescope
Telescope
↑↓ 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
  • Components
    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
  • Components
    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
    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
    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.
  • Components
    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.
AboutWhat's new?
Foundations
Design tokens
Graphic elements
Content
Components
Patterns
ToolsContributing
Questions? Get in touch

Telescope.

Design, build, and ship coherent experiences with Pleo's design system.
Foundations
Our shared practices and design decisions captured and clarified
Design Tokens
Design primitives such as colors, typography and spacing
Components
Common Pleo design elements made shareable and reuseable
Patterns
How things go together and when to use what
Graphic elements
Our icons, flags, and illustrations
Tools
Such as our Chrome extension and metrics application
Want to know more? Let us tell you a bit about our design system.
Contribute
Help us make Telescope a better place by improving our code, design and documentation.
Get in touch
Telescope is built and maintained by the Design Systems team at Pleo.
  • Reach out in Slack
  • Make a request in Linear