## Purpose Pajamas provides foundational styles and element, component guidelines, abstracted objects, and UX content, but it's less clear on how to assemble all of these disparate parts. It's these middle guiding layers of the design system that need built out to provide more visual design direction and UI consistency when it comes to implementation. At the same time, Pajamas needs a common vernacular with agreed upon definitions and categorization. For example, terms like "patterns," "organisms," and "regions" mean different things to everyone and time spent aligning on meaning stifles additions and system maturity. A large part of the initial effort will be to refine the GitLab design language and provide the consistent groundwork that efforts like "unboxing" and "beautification" — and future ones like them — need to stand on. Pajamas is not just _what_, but _how_, and this is what it means to have a design language and not just a design system. ## Phases 1. **Pajamas scaffolding** - Definitions - Website / design system IA and content mapping - Gap analysis: - Gaps in Pajamas design language - Gaps between Pajamas and product 2. **Pajamas structure** (TBD) - Website updates: Implement IA changes - SSoT: What would it take to make the Pajamas site the go-to? 3. **PajamasOps** (TBD) - Storybook: Playground, features, robust layouts, accessibility testing - Figma: Internal plugins, designer efficiency - Triage and contributions - Prioritization ## Outcomes - Consistency in design execution and user experience - Shared design language - More informed decisions and contribution - Pajamas → Product planning and prioritization ## Considerations - Pajamas documentation should be prescriptive when necessary, and guiding when not. The aim is not to have a draconian system, but one that provides meaningful constraints to foster collaboration, provide clear and informed guidance, and inspire new possibilities. - Refining the design language gives space for efforts like tokenizing and theming to have a meaningful place. - Gap analysis helps to define not only what areas need building out, but also the size and impact of gaps between Pajamas and the product. For example, typography is foundational, but not consumed by the product. ## Resources and reference - [IBM Design Language](https://www.ibm.com/design/language/) - [Visual Design Language: The Building Blocks Of Design](https://www.smashingmagazine.com/2020/03/visual-design-language-building-blocks/) ## Key results