Flags | Telescope Design System
Skip to content
Telescope
Telescope
↑↓ to navigate | Enter to select | Esc to dismiss
About
About
Web
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
Accordion
Web
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 banner
Web
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 Menu
Web
Enable users to trigger actions from a list in a popover when space is limited.
Graphic elements
Animated illustrations
Web
We use animations to bring life to our illustrations. We use them sparingly and only when they add value to the user experience.
Components
Avatar
Web
A graphical representation of a user or entity - usually a photo or initials
Components
Avatar
Mobile
A graphical representation of a user or entity - usually a photo or initials.
Components
Badge
Web
A static label that highlights an item's status.
Tags:
Tag, Pill, Chip, Label, Status
Components
Badge
Mobile
A static label that highlights an item's status.
Tags:
Tag, Pill, Chip, Label, Status
Components
Banner
Web
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
Border
Web
We use borders to define elements and create visual separation, making content easier to scan and understand.
Components
Box
Web
A utility component for working with spacing.
Components
Button
Web
A clickable element which communicates that users can trigger an action.
Components
Button
Mobile
A clickable element which communicates that users can trigger an action.
Components
Button group
Web
A layout component used to group multiple related actions a user can take.
Tags:
Toolbar
Components
Callout
Web
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
Callout
Mobile
Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section.
Components
Card
Web
A styled container that groups related content and actions.
Components
Checkbox
Web
A form element that enables users to make a binary choice (checked/unchecked).
Tags:
Checkbox group
Components
Checkbox
Mobile
A form element that enables users to make a binary choice (checked/unchecked).
Components
Checkbox group
Web
A form element that enables users to select multiple values from a list of options.
Tags:
Checkbox group
Components
Choice tiles
Web
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 outside
Web
A utility component that detects a click outside of the component it's wrapping
Components
Coach mark
Web
A Popover that guides users step-by-step through key aspects of new features.
Tags:
Product tour
Foundations
Color
Web
We use color to signal structure, highlight or emphasize important information or elements, and to display different states.
Components
Components
Web
Presentational user interface components such as buttons, form elements and overlays. Browse all components or select a specific category.
Components
Components
Mobile
Presentational user interface components such as buttons, form elements and overlays. Browse all components or select a specific category.
Content
Content
Web
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
Contributing
Web
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
Copyable
Web
A button that allow users to quickly and easily copy content to their clipboard.
Tags:
Clipboard, Code snippet
Components
Count
Web
A static label that indicates the quantity of items.
Tags:
Count, Badge, Pill, Tag, Counter
Components
Currency input
Web
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 list
Web
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 input
Web
Enable users to input a date — either in a textfield or with a date picker.
Components
Date picker
Web
A form element used to select a single or a range of dates.
Design tokens
Design tokens
Web
A complete list of all design tokens used in our design system.
Components
Drawer
Web
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 state
Web
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 Tip
Web
Used to help users learn about new or unfamiliar interface features.
Tags:
Product tour
Patterns
Feedback and status
Web
How to create feedback and status messages that build trust, reduce uncertainty, and keep users informed
Components
Fieldset
Web
A wrapper for related form fields. Used to separate form content with a label and spacing.
Tags:
Section, Divider
Components
File drop
Web
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 input
Web
Utility component that allow users to select a file(s) from the file system.
Tags:
File upload, File selector
Components
Filter menu
Web
A component used to apply category-specific filters for a dataset.
Components
Filter results
Web
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
Filtering
Web
Filtering allows users to add or remove data items from a displayed data set by turning on and off certain predefined attributes.
Components
Filters layout
Web
A composable and responsive layout component for filters
Graphic elements
Flags
Web
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
Flex
Web
A utility component for creating flex layouts
Components
Focus
Web
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
Form control
Web
Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text.
Components
Form control
Mobile
Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text.
Patterns
Forms
Web
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
Foundations
Web
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 elements
Web
Our different types of graphic elements vary in size and purpose, all while maintaining a cohesive Pleo look and feel.
Components
Header
Mobile
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 popover
Web
An icon button with a question mark that reveals help information on click or tap.
Tags:
Input tip
About
Home
Web
Design, build, and ship consistent and coherent experiences with Telescope - The Pleo Design System.
Components
Icon button
Web
Enables users to control the visibility of other UI elements.
Components
Icon button
Mobile
Enables users to control the visibility of other UI elements.
Graphic elements
Icons
Web
We use icons to enhance usability by visually communicating actions, statuses, and concepts in a compact, recognizable form. They come in sizes 16px, 24px, and 32px.
Graphic elements
Illustrations
Web
We use illustrations to simplify complex concepts, guide attention, and add personality to our product, ranging from low complexity accents for small UI elements to high complexity visuals that enhance storytelling in larger layouts. They have a minimum width of 320px.
Graphic elements
Illustrations Rebrand
Web
Every illustration available in the new @pleo-io/telescope-illustrations package.
Tags:
illustrations, rebrand, preview
Components
Inline
Web
A utility component for controlling horizontal layouts.
Components
Input
Web
A form element that enables users to enter a single line of text.
Tags:
Text input
Foundations
Layering
Web
We use z-indices to manage layering in our interfaces, adding a third axis to arrange content.
Components
Link
Web
Text that navigates the user from one page to another.
Components
List
Web
A set of text objects in a bulleted or numbered format.
Components
List item
Web
A versatile element that can display information in a clear and organized manner.
Components
Listbox
Web
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
Loading
Web
A component used as a placeholder when content is not yet available or to indicate that an action is being processed.
Components
Modal
Web
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 Split
Web
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
Motion
Web
We use motion to enhance interactions, provide feedback, and create a sense of continuity.
Foundations
Opacity
Web
We use opacity for overlays, shadows and illustrative effects.
Patterns
Overlays
Web
An overlay provides contextual information and options in form of an additional layer on top of the current state of the interface.
Components
Page
Web
A collection of components which let you compose a page in our web application.
Tags:
Layout, Screen
Patterns
Patterns
Web
Telescope patterns are reusable combinations of components and design patterns as well as information on when to use which component.
Components
Phone input
Web
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.
Graphic elements
Pictograms
Web
We use pictograms to enhance visual communication and direct attention in containers, like cards, often for in-product marketing purposes. They're no smaller than 48px and no larger than 80px.
Components
Popover
Web
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 bar
Web
A component used to represent the completion of a task or to visualize different states that are relevant to the user.
Components
Promotional Banner
Web
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 group
Web
A form element that enables users to select a single value from a list of options.
Components
Radio group
Mobile
A form element that allows users to select one option from a set of choices
Tags:
Radio Group, Radio Button
Foundations
Radius
Web
We use border radiuses to create friendly, approachable interfaces that keep the focus on content.
Components
Screen template
Mobile
A utility component for designers to create mobile app Figma UI designs.
Tags:
Layout
Components
Search
Web
An input that allow users to find content by entering a search term.
Components
Segmented control
Web
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
Select
Web
A form element that enables users to select a single or multiple values from a list of options.
Tags:
Dropdown, Select input
Foundations
Shadow
Web
We use shadows to provide cues about depth, direction of movement and surface edges.
Components
Skeleton
Web
Replaces content with a placeholder of the same shape to indicate a loading state.
Tags:
Skeleton loader, Content loader, Placeholder
Components
Slider
Web
A form control for choosing a value within a preset range of values.
Tags:
Range input
Components
Sortable List
Web
A component that lets users customize the order of list items.
Tags:
Menu
Foundations
Spacing
Web
We use spacing to create clear, balanced layouts that improve readability and visual hierarchy.
Components
Spinner
Web
A component used as a placeholder when content is not yet available or to indicate that an action is being processed.
Tags:
Loading
Components
Stack
Web
A utility component for controlling vertical layouts.
Components
Steps
Web
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 bar
Web
A list of buttons shown below an input field that when clicked updates the input value
Tags:
Pill
Components
Switch
Web
A control used to switch between two states - often on or off.
Tags:
Toggle, Toggle button, Lightswitch
Components
Table
Web
A component for displaying large amounts of data in rows and columns.
Components
Tabs
Web
Tabs are labeled controls that allow users to switch between multiple views within a page.
Components
Tag
Web
A static label that highlights an item's category or attribute.
Tags:
Badge, Pill, Chip, Label, Category
Components
Tag
Mobile
A static label that highlights an item's category or attribute.
Tags:
Label, Chip, Pill, Badge, Category
Components
Text
Web
A primitive component that can be used to create all kinds of text styles.
Tags:
Paragraph, Heading
Components
Text field
Mobile
A form element that enables users to enter a single line of text.
Components
Textarea
Web
A form element that enables users to enter text on multiple lines.
Tags:
Textbox
Components
Textarea
Mobile
A form element that enables users to enter text on multiple lines.
Components
Toast
Web
Give users short, non-disruptive feedback on the outcome of an action.
Tags:
Snackbar
Tools
Tools
Web
We're slowly but steadily adding tools and utilities to make it easier and more joyful to work with our design system.
Tags:
ESLint, Chrome extension
Components
Tooltip
Web
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
Typography
Web
We use typography to create clear, consistent, and visually harmonious text across our products.
Components
Visually Hidden
Web
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
Wizard
Web
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?
Foundations
Design tokens
Graphic elements
Animated illustrations
Icons
Illustrations
Pictograms
Content
Components
Patterns
Tools
Contributing
Questions?
Get in touch
Flags
New:
New
Overview
Code
Design
Requests and contributions
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.
Next →
Flags: Code