📺 Video: https://www.youtube.com/watch?v=eX1-tMoZMrY&t=3829s 🔗 Links below ▼ Event: Altice Labs 129th TechDay Date: 2023-11-15 🔗 Links • GitLab: https://about.gitlab.com/ • Pajamas Design System: http://design.gitlab.com • GitLab UI (code library): https://gitlab-org.gitlab.io/gitlab-ui/ • Pajamas UI Kit (Figma design library): https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit • GitLab SVGs (icons and illustrations): https://gitlab-org.gitlab.io/gitlab-svgs/ • "The Evolution of UX at GitLab": https://about.gitlab.com/blog/2021/05/04/the-evolution-of-ux-at-gitlab/ • Pajamas adoption scanner: https://gitlab-org.gitlab.io/frontend/pajamas-adoption-scanner/history • Pajamas adoption scanner (code): https://gitlab.com/gitlab-org/frontend/pajamas-adoption-scanner • Dropdown migration epic: https://gitlab.com/groups/gitlab-org/-/epics/4284 • Pajamas Migration Day Leaderboard: https://leaderboard.pajamasmigrationday.com/ • André Luís: https://gitlab.com/andr3 • Pedro Moreira da Silva: http://pedroms.com

1. GitLab Copyright
Pajamas Design System
design.gitlab.com
André Luís + Pedro Moreira da Silva
November 15, 2023 · TechDay@Altice Labs

2. GitLab Copyright
Frontend Engineering Manager
André Luís
Staff Product Designer
Pedro Moreira da Silva

3. GitLab Copyright

4. GitLab Copyright
Every company must
be great at developing,
securing, and
deploying software.

5. GitLab Copyright
Software. Faster.
The DevSecOps Platform
✓ Unified data model
✓ One user interface
✓ Single application
✓ Cloud agnostic
✓ Superior user experience
✓ Open core

6. More than 30 million users
More than 50% of Fortune 100
are GitLab customers
Transportation
/ Automotive
Financial
Services
Public Sector /
Education
Consumer /
Retail
Technology /
Internet

7. GitLab Copyright
Contributors
All-remote company
Broad adoption
Strong community
2,000+
Team members
in 60+ countries
Offices
Users from startups
to global enterprises
0
30M+ 4,000+

8. GitLab Copyright
Pajamas: A design system
named after clothing

9. GitLab Copyright
design.gitlab.com
● Design principles
● Foundational design patterns
● Components
● Accessibility audits
● Usability standards
● Objects and conceptual model

10. GitLab Copyright
Structure
Pajamas website
Documentation
GitLab UI
Code
GitLab SVGs
Icons and illustrations
Pajamas UI Kit
Figma
GitLab
Platform
GitLab does not assert to own any right, title or interest to any marks shown. All trademarks, logos, and images are owned by the applicable entity(ies).

11. GitLab Copyright
Using Pajamas
3 main external projects
Many internal ones
Customers Portal
GitLab Platform
GitLab Dedicated

12. GitLab Copyright
Brief history
● 2011 — Start of GitLab (1st commit)
● 2014 — 1st designer is hired
● 2016 — UX team is established
● 2017 — Start of Pajamas
● 2018 — Design and code library
● 2020 — Pajamas team and company
integration effort
2017
NN/g UX Maturity Model: Stages 1–4 Stages 5–8
Blog post

13. GitLab Copyright
Implementation
Making it real

14. GitLab Copyright
Migrating legacy
to Pajamas
Step 1
Make status visible
Pajamas adoption scanner

15. GitLab Copyright
Migrating legacy
to Pajamas
Step 1
Make status visible
Pajamas adoption scanner

16. GitLab Copyright
Migrating legacy
to Pajamas
Step 1
Make status visible
Code: Pajamas adoption scanner

17. GitLab Copyright
Migrating legacy
to Pajamas
Step 2
Crowdsource the rewrite
Dropdown migration epic

18. GitLab Copyright
Migrating legacy
to Pajamas
Step 2
Crowdsource the rewrite
Pajamas Migration Day Leaderboard
Hackathon leaderboard

19. GitLab Copyright
Obrigado!
design.gitlab.com gitlab.com/andr3 pedroms.com