Skip to content
Telescope
Telescope
↑↓ to navigate | Enter to select | Esc to dismiss
About
About
Web
Telescope is a collection of reusable user interface patterns and tools, guided by clear standards, that can be assembled together to build digital products and 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
Badge
Web
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 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
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 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
Foundations
Color
Web
We use color to signal structure, highlight or emphasize important information or elements, and to display different states.
Components
Components
Mobile
Presentational user interface components such as buttons, form elements and overlays. Browse all components or select a specific category.
Components
Components
Web
Presentational user interface components such as buttons, form elements and overlays. Browse all components or select a specific category.
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
Date input
Web
A means of inputting a date - either in a textfield or using a date picker interface.
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 state
Components
Feature tip
Web
Used to help users learn about new or unfamiliar interface features.
Tags:
Coach mark, Guided tour, Product tour, Onboarding
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
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.
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.
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.
Icons
Icons
Web
Our iconset has been customly crafted for Pleo products. Icons are available in the sizes 16, 24 and 32.
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.
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.
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.
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.
Foundations
Radius
Web
We use border radiuses to create friendly, approachable interfaces that keep the focus on content.
Components
Search
Web
An input that allow users to find content by entering a search term.
Tags:
Search, Search input
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:
Radio switch, Toggle
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
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:
Progress indicator, Progress tracker, Stepper
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
Text
Web
A primitive component that can be used to create all kinds of text styles.
Tags:
Paragraph, Heading
Components
Textarea
Web
A form element that enables users to enter text on multiple lines.
Tags:
Textbox
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.
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
What's new?
Web
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.
Tags:
Guide, Step-by-step, Onboarding
About
What's new?
Foundations
Design tokens
Graphic elements
Components
Patterns
Tools
Contributing
Questions?
Get in touch
Icons
Overview
About
Code
Design
Contributing
Our iconset has been customly crafted for Pleo products. Icons are available in the sizes 16, 24 and 32.
Our initial icon set was designed by
Studio Lenzing
. They also helped us create our
icon style guide
.
Get code
AddApp
Get code
Archive
Get code
ArrowCircleLeft
Get code
ArrowCircleRight
Get code
ArrowDiagonalDown
Get code
ArrowDiagonalUp
Get code
ArrowDown
Get code
ArrowLeft
Get code
ArrowLeftRight
Get code
ArrowRight
Get code
ArrowUp
Get code
ArrowUpDown
Get code
Attention
Get code
Bag
Get code
Bank
Get code
BankPlus
Get code
Bars
Get code
Bell
Get code
BellOff
Get code
BikeCourier
Get code
Bold
Get code
Box
Get code
BurgerMenu
Get code
Calculator
Get code
Calendar
Get code
CalendarClock
Get code
CalendarRange
Get code
CalendarToday
Get code
Camera
Get code
CameraPlus
Get code
Car
Get code
CashSingle
Get code
CategoryEntertainment
Get code
CategoryEquipment
Get code
CategoryIDonTKnow
Get code
CategoryMarketing
Get code
CategoryMealsAndDrinks
Get code
CategoryNone
Get code
CategoryOffice
Get code
CategoryOther
Get code
CategoryPhoneInternet
Get code
CategoryService
Get code
CategorySoftware
Get code
CategorySupplies
Get code
CategoryTravel
Get code
Check
Get code
CheckCircleFilled
Get code
CheckSmall
Get code
ChevronDown
Get code
ChevronLeft
Get code
ChevronRight
Get code
ChevronTripleRight
Get code
ChevronUp
Get code
CircleArrowDown
Get code
CircleArrowLeft
Get code
CircleArrowRight
Get code
CircleArrowUp
Get code
CircleCheck
Get code
CircleCheckInner
Get code
CircleClose
Get code
CircleCloseInner
Get code
CircleEmpty
Get code
CirclePlus
Get code
Clock
Get code
Close
Get code
Coffee
Get code
CoffeeAlt
Get code
Cog
Get code
Connect
Get code
Copy
Get code
CreditCard
Get code
CreditCardPlus
Get code
Delete
Get code
DiamondEmpty
Get code
DiamondFull
Get code
DiamondHalf
Get code
Download
Get code
Email
Get code
EmotionDisappointed
Get code
EmotionExpressionless
Get code
EmotionHushed
Get code
EmotionSlightlySmiling
Get code
EmotionSmiley
Get code
Expenses
Get code
Export
Get code
Eye
Get code
EyeClosed
Get code
FaceId
Get code
FastFood
Get code
File
Get code
Filter
Get code
Fingerprint
Get code
Flag
Get code
FlashCircle
Get code
FlashOff
Get code
FlashOn
Get code
Folder
Get code
Gallery
Get code
GalleryAlt
Get code
Heart
Get code
Help
Get code
HighFive
Get code
History
Get code
Home
Get code
HomeFilled
Get code
Inbox
Get code
Info
Get code
Italic
Get code
Key
Get code
Lightbulb
Get code
Link
Get code
LinkSlash
Get code
List
Get code
ListNumbered
Get code
Lock
Get code
LockOpen
Get code
LockReset
Get code
Login
Get code
Logout
Get code
Minus
Get code
MinusCircle
Get code
NewTab
Get code
Office
Get code
Options
Get code
Pen
Get code
PenUnderline
Get code
PerDiem
Get code
Pin
Get code
Play
Get code
PlayCircle
Get code
Plus
Get code
PlusCircleFilled
Get code
Pocket
Get code
Puzzle
Get code
RaisedHand
Get code
Receipt
Get code
ReceiptCheck
Get code
ReceiptCross
Get code
ReceiptPlus
Get code
Reimburse
Get code
Rocket
Get code
Sandwich
Get code
Search
Get code
SendMoney
Get code
Share
Get code
Shield
Get code
ShieldLock
Get code
ShoppingBag
Get code
Snowflake
Get code
SpeechBubble
Get code
Spinner
Get code
Spreadsheet
Get code
Store
Get code
Swap
Get code
Tag
Get code
Team
Get code
ThumbDown
Get code
ThumbUp
Get code
Trash
Get code
TrashClock
Get code
Truck
Get code
Upload
Get code
User
Get code
UserCog
Get code
UserPlus
Get code
UserPlusAlt
Get code
UserSecurity
Get code
Wallet
Get code
Wand
Get code
Warning
Get code
Wine