Skip to content
Telescope
Telescope
↑↓ to navigate | Enter to select | Esc to dismiss
About
About
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.
Foundations
Accessibility
Technology makes so many things easier in modern life. And for people with disabilities, technology has the potential to take the impossible and make it possible.
Components
Accordion
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
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
Enable users to trigger actions from a list in a popover when space is limited.
Illustrations
Animated
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
A graphical representation of a user or entity - usually a photo or initials
Components
Badge
A static label that highlights an item's status.
Tags:
Tag, Pill, Chip, Label, Status
Components
Banner
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
Design Tokens
Border
We use borders to contain elements or to separate them from each other in order to group content in ways that make it easier to decode and understand.
Components
Box
A utility component for working with spacing.
Components
Button
A clickable element which communicates that users can trigger an action.
Components
Button group
A layout component used to group multiple related actions a user can take.
Tags:
Toolbar
Components
Callout
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
A styled container that groups related content and actions.
Components
Checkbox
Checkboxes are most commonly used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
Tags:
Checkbox group
Components
Choice Tiles
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
A utility component that detects a click outside of the component it's wrapping
Foundations
Color
We use color to signal structure, highlight or emphasize important information or elements, and to display different states. Use color intentionally. It’s not decoration. Color is supposed to be functional.
Design Tokens
Color
We use color to signal structure, highlight or emphasize important information or elements, and to display different states.
Components
Components
Presentational user interface components such as buttons, form elements and overlays. Browse all components or select a specific category.
Contributing
Contributing
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
A button that allow users to quickly and easily copy content to their clipboard.
Tags:
Clipboard, Code snippet
Foundations
Copywriting
Words are key to defining how usable products are. Without words, apps would be an unusable jumble of shapes and icons.
Components
Count
A static label that indicates the quantity of items.
Tags:
Count, Badge, Pill, Tag, Counter
Components
Currency input
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
A means of inputting a date - either in a textfield or using a date picker interface.
Components
Date picker
A form element used to select a single or a range of dates.
Design Tokens
Design Tokens
Design primitives such as colors, typography and spacing.
Components
Drawer
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
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
Used to help users learn about new or unfamiliar interface features.
Tags:
Coach mark, Guided tour, Product tour, Onboarding
Components
Fieldset
A wrapper for related form fields. Used to separate form content with a label and spacing.
Tags:
Section, Divider
Components
File drop
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
Utility component that allow users to select a file(s) from the file system.
Tags:
File upload, File selector
Components
Filter menu
A component used to apply category-specific filters for a dataset.
Components
Filter results
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
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
A composable and responsive layout component for filters
Components
Focus
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
Form control displays a labelled input and, optionally, associated validation text and/or hint text.
Patterns
Forms
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
Foundations are the visual elements needed to create engaging end-to-end user experiences. This includes guidance on typography, illustration and color.
Components
Help popover
An icon button with a question mark that reveals help information on click or tap.
Tags:
Input tip
About
Home
Design, build, and ship consistent and coherent experiences with Telescope - The Pleo Design System.
Components
Icon button
Enables users to control the visibility of other UI elements.
Foundations
Iconography
Icons carry intent both from product and brand design. They should be something you can easily interact with, and they should capture the idea they try to represent.
Icons
Icons
Our iconset has been customly crafted for Pleo products. Icons are available in the sizes 16, 24 and 32.
Foundations
Illustration
We’re honest and distinct. It’s honesty without feeling too naive or childlike. It’s distinct without feeling too foreign or crazy.
Illustrations
Illustrations
Illustration is one of the strongest assets that can simplify the over-complicated in finance, all while putting the focus on people and relatability.
Components
Inline
A utility component for controlling horizontal layouts.
Components
Input
An element used to create interactive controls for web-based forms in order to accept data from the user.
Tags:
Text input
Design Tokens
Layering
We use z-indices to control layering in our user interfaces by providing a third axis to arrange content. They are commonly used for overlay components such as for modals, popovers and tooltips.
Components
Link
Text that navigates the user from one page to another.
Components
List
A set of text objects in a bulleted or numbered format.
Components
List item
A versatile element that can display information in a clear and organized manner.
Components
Listbox
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
A component used as a placeholder when content is not yet available or to indicate that an action is being processed.
Components
Modal
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
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
We use motion to help convey meaning in our user interfaces.
Design Tokens
Motion
We use motion to help convey meaning in our user interfaces.
Design Tokens
Opacity
We use opacity for overlays, shadows and illustrative effects.
Patterns
Overlays
An overlay provides contextual information and options in form of an additional layer on top of the current state of the interface.
Components
Page
A collection of components which let you compose a page in our web application.
Patterns
Patterns
Telescope patterns are reusable combinations of components and design patterns as well as information on when to use which component.
Components
Phone input
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.
Pictograms
Pictograms
Explore all the pictograms available in Telescope.
Components
Popover
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
A component used to represent the completion of a task or to visualize different states that are relevant to the user.
Components
Promotional Banner
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
A form element that allow users to select an single option from a list of at least two options.
Design Tokens
Radius
We use radii for components such as buttons, inputs and cards in order to deliver friendly and approachable user interfaces. Radii help draw attention to the content of an element rather than the element itself.
Components
Search
An input that allow users to find content by entering a search term.
Tags:
Search, Search input
Components
Segmented control
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
A form component used to select data from a list.
Tags:
Dropdown, Select input
Design Tokens
Shadow
We use shadows to provide cues about depth, direction of movement and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.
Components
Skeleton
Replaces content with a placeholder of the same shape to indicate a loading state.
Tags:
Skeleton loader, Content loader, Placeholder
Components
Slider
A form control for choosing a value within a preset range of values.
Tags:
Range input
Design Tokens
Spacing
Spacing is an important — and often overlooked — part of product design. We provide tokens to take the guesswork out of spacing and help deliver clear, functional layouts.
Components
Spinner
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
A utility component for controlling vertical layouts.
Components
Steps
A representation of a user’s progress through a series of discrete steps.
Tags:
Progress indicator, Progress tracker, Stepper
Components
Switch
A control used to switch between two states - often on or off.
Tags:
Toggle, Toggle button, Lightswitch
Components
Table
A component for displaying large amounts of data in rows and columns.
Components
Tabs
Tabs are labeled controls that allow users to switch between multiple views within a page.
Components
Tag
A static label that highlights an item's category or attribute.
Tags:
Badge, Pill, Chip, Label, Category
Components
Text
A primitive component that can be used to create all kinds of text styles.
Tags:
Paragraph, Heading
Components
Textarea
A form element that allows users to enter text on multiple lines.
Tags:
Textbox
Tools
Tools
We're slowly but steadily adding tools and utilities to make it easier and more joyful to work with our design system.
Components
Tooltip
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
Our typography is simple, honest and functional, reflecting the true aesthetics of Nordic design. We use limited weights for consistent and bold visual stand out.
Design Tokens
Typography
We consider typography to be one of the most important aspects of our design system. We use typography to present designs and content as clearly and efficiently as possible.
Components
Visually Hidden
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?
Components
Wizard
A setup process where the user is guided through a series of steps to achieve a goal.
Tags:
Guide, Step-by-step, Onboarding
About
What's new?
Foundations
Design Tokens
Components
Patterns
Icons
Illustrations
Tools
Contributing
Warning:
Draft
Questions?
Get in touch
Illustrations
Overview
About
Contributing
Illustration is one of the strongest assets that can simplify the over-complicated in finance, all while putting the focus on people and relatability.
Animated
We use animations to bring life to our illustrations. We use them sparingly and only when they add value to the user experience.
Pictograms
Explore all the pictograms available in Telescope.
