Powered by Figma
4.7 on review
From 200+ designers
2.8x
faster decisions
6.4x
increased consistency
1.6x
faster alignment
4.4x
faster release
Widgets
You can find inspiration and create prototypes. Prototyping involves quickly generating, testing, and validating new ideas.
Customization
Each template can be tailored to meet your specific needs, from adjusting layouts to personalizing sections, the system offers a high degree of flexibility and customization.
Tokens
The foundations of the design systems are the core of stability and flexibility for each new component. This is why we tokenize them to allow enough structure and future-proof simplified adjustments.
Dark mode
Components and templates are built in a way that allows a one-click change between light and dark mode across the component or entire screens.
Auto-layout
Components auto-layout to ensure flexibility.
States
Each component has defined states variants.
Navigation
Header, footer, and side-nav templates
Avatar
pa/avatar
An avatar is a user interface (UI) element that displays textual or visual content to represent a user’s identity or entity.
Badge
pa/badge
An badge is used to highlight a page element and notify the user of something that requires their attention, often indicating a change to a specific item.
Chip
pa/ship
Chip are components commonly used to label items, categorize, filter data, select or deselect options, and include functionality to reveal related tags in another view.
Calendar
pa/calendar
Calendars allow users to select past, present, or future dates.
Drawer
pa/drawer
The drawer component is a modal dialog that slides in from the side of the screen.
Dropdown
pa/dropdown
Dropdowns display a list of options for users to select one or multiple choices.
Input area
pa/inputarea
Text area allow users to enter free-form text data. The type of text field used should match the length of the content expected from the user.
Slider
pa/slider
A slider enables a user to choose a single value or a range of values within the slider track. There are two variations of the slider: default and range.
Select
pa/select
The select component is used to gather user-provided information from a list of options.
Tooltip
pa/tooltip
A tooltip is a message box displayed when a user hovers over or focuses on a UI element. It is used to provide more information and should be paired with an interactive UI element, such as a button.
Toggle
pa/toggle
A toggle displays two exclusive choices and enables the user to toggle the state of a single item to on (checked) and off (unchecked).
Accordion
pa/accordion
The accordion component enables the presentation of a large amount of content in a condensed format through progressive disclosure.
Combobox
pa/combobox
The combo box allows the user to choose from a predefined list of options and is usually used when there are many options to choose from.
Checkbox
pa/checkbox
Checkboxes are used for selecting multiple options, not for exclusive choices. Each checkbox operates independently, so selecting one does not affect others.
Notifications
pa/notifications
Notification status conveys information using color-coded statuses and icons for a universal user experience.
Progress
pa/progress
A progress bar indicates that the user’s request has been received and the application is making progress toward completing the requested action.
Popover
pa/popover
A popover is a layer that appears above all other content on the page. Only one popover can appear at a time and it can contain different text and interactive elements.
Input field
pa/scroll
Text inputs allow users to enter free-form text data. The type of text field used should match the length of the content expected from the user.
Scroll
pa/scroll
Used to replace the browser's native scrollbar.
Stepper
pa/stepper
Stepper are similar to text inputs, but are used to specify only a numeric value. Number inputs incrementally increase or decrease the value with a two-segment control.
Treeview
pa/treeview
The TreeView component is a UI element that presents hierarchical data in a tree-like structure, allowing users to expand or collapse nodes to reveal or hide sub-levels of information.
Button
pa/button
Buttons are clickable elements that trigger actions.
Bredcrumbs
pa/breadcrumbs
Breadcrumbs indicate the user’s position in the website’s structure and allow them to navigate upwards.
Carousel
pa/carousel
A carousel optimizes screen space by displaying only a subset of images from a collection in a cyclic view.
Dialog
pa/dialog
Dialogs are most effective when used for short tasks or to alert the user to task-relevant information.
Pagination
pa/pagination
Generally, pagination is used when more than 25 items are displayed in one view. The default number displayed will vary depending on the context.
Radio button
pa/radiobutton
Radio buttons are used for exclusive choices, allowing only one selection at a time.
Segments
pa/segments
A segment is used to create a grouping of related content
Search
pa/search
Search offers users a way to explore a website or application using keywords. Search can be used as the primary means of discovering content or as a filter to aid the user in finding content.
Toast
pa/toast
The toast is a user interface (UI) element that serves as a customizable feedback message appearing on the user’s screen to provide feedback
Tabs
pa/tabs
A Tab component organizes content into tabs, allowing users to switch between different views within a single container.
Toolbar
pa/toolbar
A toolbar is a UI element that contains related actions or commands. It can include buttons, menus, checkboxes, and search bars.
