Layering | Telescope Design System
Skip to content
Telescope
Telescope
↑↓ to navigate | Enter to select | Esc to dismiss
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
Avatar
Mobile
A graphical representation of a user or entity - usually a photo or initials.
Components
Badge
Mobile
A static label that highlights an item's status.
Tags:
Tag, Pill, Chip, Label, Status
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
Mobile
A clickable element which communicates that users can trigger an action.
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
Checkbox
Mobile
A form element that enables users to make a binary choice (checked/unchecked).
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.
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
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
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
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
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
Mobile
Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text.
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
About
Home
Web
Design, build, and ship consistent and coherent experiences with Telescope - The Pleo Design System.
Components
Icon button
Mobile
Enables users to control the visibility of other UI elements.
Components
Inline
Web
A utility component for controlling horizontal layouts.
Foundations
Layering
Web
We use z-indices to manage layering in our interfaces, adding a third axis to arrange content.
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
Foundations
Opacity
Web
We use opacity for overlays, shadows and illustrative effects.
Components
Page
Web
A collection of components which let you compose a page in our web application.
Tags:
Layout, Screen
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.
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
Foundations
Shadow
Web
We use shadows to provide cues about depth, direction of movement and surface edges.
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
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
Table
Web
A component for displaying large amounts of data in rows and columns.
Components
Tag
Mobile
A static label that highlights an item's category or attribute.
Tags:
Label, Chip, Pill, Badge, Category
Components
Text field
Mobile
A form element that enables users to enter a single line of text.
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:
Metrics, ESLint, Chrome extension
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
Border
Color
Layering
Motion
Opacity
Radius
Shadow
Spacing
Typography
Design tokens
Graphic elements
Content
Components
Patterns
Tools
Contributing
Questions?
Get in touch
Foundations
Layering
Overview
We use z-indices to manage layering in our interfaces, adding a third axis to arrange content.
Didn't find what you were looking for?
Let us know in
#team-design-systems
or
make a request
.
Edit this page