What is Pajamas?
The Pajamas Design System is a design system created and maintained by GitLab. It provides consistency and efficiency for GitLab's product design and development. Pajamas provides design principles, UI components, patterns, and guidelines to help designers and developers create user interfaces quickly and maintain a consistent user experience.
The Evolution and Versions
16.0 (2023-05-22)
Added new illustrations (e.g., empty-labels-starred-md), enriching page design resources.
17.0 (2024-05-14)
Navigation components released: Introduced project navigation, group navigation, and admin navigation components.
Annotations and utilities: Released annotation and utility tools to support design documentation and decision recording.
17.4 (2024-09-16)
New button components: Redesigned button components to unify multiple button types, enhancing flexibility.
Design tokens deepened: Expanded the use of design tokens in more components (e.g., Tabs, Tree).
17.7 (2024-12-17)
Full support for Dark Mode: The components now work perfectly in dark mode. You can easily switch between light and dark using special color settings, and it still looks good and is easy to use.
Design tokens out of beta: The design token library is now officially ready to use. It helps designers and developers work faster and better together.
You can briefly review its history through the web page: Release notes
What Products Built with Pajamas
Pajamas Design System is a design system made by GitLab. It helps make GitLab's products and tools look and feel the same, so users have a consistent experience.
GitLab: GitLab uses the Pajamas Design System for everything. From working with code to running tests, all the designs look the same to keep things simple and clear.
GitLab Documentation: GitLab’s help pages and API guides are made with Pajamas so they are easy to read and understand.
GitLab Developer Tools: Developer tools, like settings and coding resources, also use Pajamas to make them simple and consistent.
Applicable industries for reference
The Pajamas Design System, as a comprehensive and flexible design framework, can serve as a reference for various industries that require consistent and scalable design solutions.
Software Development and IT: DevOps platforms, software development tools, and IT management systems.
Technology and Saas: Companies offering Software-as-a-Service (SaaS) products that require a unified design language across their web and mobile applications.
Enterprise Software: Tools focused on project management, team collaboration, HR management, and analytics dashboards.
E-commerce: Online shopping websites can use Pajamas to make reusable designs for product pages, checkout, and user accounts.
Platform Support and Use Cases of Pajamas
Supported Platforms
Pajamas Design System is designed to support various platforms, ensuring a consistent and scalable user experience across different environments:
Web Applications: Pajamas provides reusable components and guidelines for building responsive and accessible web applications.
Mobile Applications: Pajamas is mainly for websites, but its design ideas can also help make mobile apps look the same and consistent.
Desktop Applications: Pajamas can help design desktop apps with a unified and matching style.
API Documentation Platforms: Pajamas is ideal for creating user-friendly and consistent API documentation interfaces.
Use Case Scenarios
A Guide and Template for Pajamas
Style Template File for Motiff
Effective Use of the Color System
Pajamas' brand color system uses primary and secondary colors to show what the brand stands for and to keep things looking the same everywhere. On screens like websites and videos, it uses HEX or RGB codes to make colors look right. For printed things like banners and stickers, it uses CMYK or PMS codes to keep the colors consistent. This makes the brand look professional and easy to recognize.
Typography Hierarchy and Readability
GitLab's typography system ensures the consistency and readability of the design system through a clear hierarchy, simple font choices, and strict typographic rules. The primary typeface, GitLab Sans, emphasizes simplicity and flexibility, while the secondary typeface, GitLab Mono, provides visual support for code-related content. The hierarchy is well-defined, focusing on consistency and readability, while creative elements like type repetitions add visual interest.
Icon Design Principles
In the Icon Design Principles of the Pajamas Design System, icons are powerful visual cues that should reflect GitLab's unique style. The design of icons conveys the characteristics of balance and structure, modern and approachable, crisp and intentional, as well as simple and concise.
Pajamas Components Templates
A-B
C-G
H-P
R-S
T-Z
Accessibility in Pajamas
The Pajamas design system uses Inclusive Design Principles to make sure everyone can easily access content and features. Its goal is to focus on people, especially those who may have long-term, short-term, or situational challenges. Here are its key principles.
Provide a fair experience: Make sure everyone can do their tasks in a way that suits them, while enjoying the same high-quality experience.
Consider different situations: Design should adapt to different environments, like lighting, noise, or how familiar someone is with technology.
Add meaningful improvements: Make small but helpful changes that address real user needs.
Other Resources
GitLab product principles: These are the key principles that Pajamas creators believe great product teams should follow. The goal is to create a PM system for GitLab that supports these principles.
GitLab: GitLab is a tool that helps teams work together to write code, test it, and release software faster.