Skip to main content
Pajamas Design System
Pajamas Design System

Main navigation

  • Brand
    • Introduction
      • Brand voice
      • Style and formatting
      • Core logo
      • Logomark
      • Branded lockups
      • Color
      • Typography
        • Core elements
        • Icons and Patterns
        • Illustrations
        • Diagrams
      • Motion
      • Photography
    • Style guides
    • Resources
  • Product
      • Navigating Pajamas
      • Contributing
      • Principles
      • Component lifecycle
        • Contributing
        • File structure
        • Release process
        • Release notes
        • Roadmap
        • Components
        • Libraries
        • Annotation
        • Sharing
        • Breaking changes
      • Resources
      • Repository
        • Overview
        • Reading guide
        • Usage guide
        • Technical implementation
        • All design tokens
      • Color
        • Fundamentals
        • Headings
        • Markdown
      • Spacing
      • Layout
      • Elevation
        • Fundamentals
        • Feedback
      • Iconography
      • Illustration
      • Accordion
      • Alert
      • Avatar
      • Badge
      • Banner
      • Breadcrumb
      • Broadcast message
        • Button
        • Sorting
      • Card
      • Color picker
      • Drawer
        • Overview
        • Disclosure
        • Combobox
        • Checkbox
        • Date picker
        • Filter
        • Radio button
        • Search
        • Select
        • Textarea
        • Text input
        • Token
      • Infinite scroll
      • Label
      • Link
      • Modal
      • Pagination
      • Path
      • Popover
      • Progress bar
      • Segmented control
      • Skeleton loader
      • Socks
      • Spinner
      • Stepper
      • Table
      • Tabs
      • Toast
      • Toggle
      • Tooltip
      • Tree
      • Dashboards
      • Empty States
      • Filtering
      • Forms
        • Calls to action
        • Feedback
        • Slash commands in GitLab Duo Chat
      • Keyboard shortcuts
      • Merge request reports
      • Notifications
      • Searching
      • Overview
      • Job
      • Merge request
      • Overview
      • Color
      • Charts
      • Single stat
      • Mini pipeline graph
      • UI text
      • Verb tenses
      • Punctuation
      • Date and time
      • AI-human interaction
      • Affordance
      • Contextual help and info
      • Destructive actions
      • Drag and drop
      • Feature discovery
      • Feature management
      • Loading
      • Navigation sidebar
      • Obfuscation
      • Progressive disclosure
      • Saving and feedback
      • Settings management
      • Statement of compliance
      • Inclusive design principles
      • Best practices
        • Section 508 Edition
        • WCAG Edition
        • Overview
        • Visual
        • Content and semantics
        • Keyboard-only
        • Screen readers

Patterns

A pattern combines components and/or content elements into a repeatable, consistent group that has a shared purpose, content association, or both. For example, filtering, forms, or navigation.

  • Calls to action for GitLab Duo Guidelines for designing and implementing AI-specific interactive elements that prompt user actions within GitLab.
  • Dashboards Guidelines for designing interfaces that present multiple panels of content and data for analysis and decision-making.
  • Empty States Informative and actionable regions aimed at improving feature adoption and usability when no content exists yet.
  • Feedback
  • Filtering Element combinations to narrow down a data list based on specific criteria.
  • Forms Guidelines for creating structured interfaces to capture, validate, and submit manual user input.
  • Keyboard shortcuts Improve user productivity and accessibility by optimizing flows with a keyboard.
  • Merge request reports Widgets that convey information about merge request changes, helping authors and reviewers understand their impact and what needs to be improved.
  • Notifications Recommendations for timely and relevant system-generated updates to keep users informed.
  • Searching Guidelines for different types of searches.
  • Slash commands in GitLab Duo Chat A method for communicating with and discovering GitLab Duo Chat functionality.
  • Page source
  • Open in Web IDE
  • Contribute
  • Privacy statement