What are Patterns
Patterns are recurring solutions addressing common design problems or user needs, like navigation menus or search bars. They create intuitive and predictable user interfaces, improving overall user experience.
Definition
Core Patterns List
- Breadcrumbs
- Card view
- Checkout
- Composer
- Data Viz Card
- Feature
- FAB
- Filter
- Footer
- Follow
- Full Screen Menu
- Flyout
- Hero
- Card
- Invite
- List view
- Login
- Mega Menu
- Modal
- NavBar
- Pagination
- Pricing Table
- Prompt
- Review
- Select Card
- Settings
- Share sheet
- Sidebar
- Signup
- Sort
- Table
- Text editor
- Text pairing
- Title
- Tour
Design System Pattern Definitions
- Breadcrumbs: Hierarchical navigation aids showing user’s location.
- Card View: Visual container grouping related information and actions.
- Checkout: Final purchase step in e-commerce interfaces.
- Composer: Tool for creating or editing content.
- Data Viz Card: Card showcasing graphical data representations.
- Feature: Distinctive functionality or service of a product.
- FAB: Floating Action Button for primary interface action.
- Filter: Tool for refining displayed data or content.
- Footer: Bottom section of a page providing supplementary information.
- Follow: Action to subscribe to user or content updates.
- Full Screen Menu: Navigation option overlaying the entire screen.
- Flyout: Temporary, secondary interface panel for extra content.
- Hero: Prominent banner displaying key marketing message.
- Card: Container encapsulating related information in a compact form.
- Invite: Action to request others’ participation or access.
- List View: Data display in a vertical list format.
- Login: Authentication process to access a user account.
- Mega Menu: Large, comprehensive dropdown navigation panel.
- Modal: Temporary window requiring user action, overlaying main content.
- NavBar: Horizontal bar with main navigation links.
- Pagination: Control for navigating through segmented content.
- Pricing Table: Tabulated display of product prices and features.
- Prompt: Request for user action or input.
- Review: User’s qualitative evaluation of a product or service.
- Select Card: Interactive card used for selection purposes.
- Settings: User controls to customize app or interface behavior.
- Share Sheet: Panel offering various content sharing options.
- Sidebar: Vertical navigation or content panel on screen side.
- Signup: Process to create a new user account.
- Sort: Tool for ordering displayed data or content.
- Table: Grid of data arranged in rows and columns.
- Text Editor: Interface for creating or modifying text content.
- Text Pairing: Two typographical elements used together.
- Title: Primary heading indicating content topic.
- Tour: Guided walkthrough for orienting users in a system.