Pajamas

GitLab's 오픈소스 디자인 시스템 를 위한 consistent, accessible interfaces 전체에 걸쳐 products.

제품 개요

Pajamas is GitLab's official open-source design system, providing reusable UI components, patterns, guidelines, and tools to build consistent, accessible, and scalable user experiences across GitLab's web applications and ecosystem. It emphasizes modularity, inclusivity, and developer-designer collaboration with a comprehensive Figma library, React components (via GitLab UI), and detailed documentation, ensuring alignment with GitLab's user-centered principles. Component Library: Reusable elements like buttons, forms, navigation, tables, modals, and alerts with variants for themes and states. Design Tokens: Semantic colors, typography, spacing, icons (GitLab SVG Icons), and motion for unified branding. Accessibility: WCAG 2.1 AA compliance with ARIA support, keyboard navigation, and inclusive patterns. Tools: Figma kit for prototyping; GitLab UI React library for implementation; Storybook for component exploration.

주요 기능

컴포넌트 라이브러리: Reusable elements 같은 buttons, forms, navigation, tables, modals, 및 alerts 를 사용한 variants 를 위한 themes 및 states.
디자인 토큰: Semantic 색상, 타이포그래피, 간격, 아이콘 (GitLab SVG 아이콘), 및 motion 를 위한 unified 브랜딩.
접근성: WCAG 2.1 AA compliance 를 사용한 ARIA 지원, keyboard navigation, 및 inclusive 패턴.
도구: Figma 키트 를 위한 프로토타이핑; GitLab UI React 라이브러리 를 위한 implementation; Storybook 를 위한 컴포넌트 exploration.

장점

+오픈 소스
+실시간 협업
+방대한 아이콘 라이브러리
+확장 가능한 벡터 포맷

단점

-도입 시 팀 조율 필요
-커스터마이징이 복잡할 수 있음

/// 스펙

가격:
Free
플랫폼:
Browser

ASSETS_DIRECTORY

figma

/// 유사 도구

Porsche Design System

오픈소스 프레임워크 를 위한 consistent, 프리미엄 automotive digital interfaces.

Moon Design System

오픈소스 UI 프레임워크 를 위한 consistent, 사용자 정의 가능 digital experiences.

NativeBase Design System

오픈소스 UI 컴포넌트 라이브러리 를 위한 React 네이티브 를 사용한 사용자 정의 가능, accessible 크로스 플랫폼 디자인.

NewsKit

News UK's 오픈소스 디자인 시스템 를 위한 consistent, accessible digital news experiences.

Orbit

Kiwi.com's 오픈소스 디자인 시스템 를 위한 consistent, accessible travel booking interfaces.

Palmetto Design System

오픈소스 디자인 시스템 를 위한 consistent, accessible solar energy product interfaces.

Paste

Twilio's 오픈소스 디자인 시스템 를 위한 consistent, accessible communication product interfaces.

Pando Design System

Pluralsight's 오픈소스 디자인 시스템 를 위한 consistent, accessible 웹 interfaces.

gluestack-ui

오픈소스 universal React UI 라이브러리 를 사용한 사용자 정의 가능, accessible 컴포넌트 를 위한 웹 및 네이티브 apps.

Paradigm Design System

Mail.ru/VK's 오픈소스 프레임워크 를 위한 consistent 웹 interfaces.