1. You are here:
2. Handbook
3. Marketing
4. Inbound Marketing Handbook
5. Digital Experience Handbook
6. Slippers Design System Documentation

Maintained by:

On this page

• Slippers Design System
  • Resources
  • Why slippers
  • Why not Pajamas
  • Goals (Q3 2021)
  • Our vision (Q3 2021)
  • Our plan (Q3 2021)
  • Implementation Details (as of Q1 2021)
  • Pages using Slippers
    • Pages using Slippers CSS
    • Pages using Slippers components
  • Opportunities for Growth

Slippers Design System

Slippers is following Semantic Versioning and is currently in 0.x.y and is not considered stable.

Resources

• Slippers Design System repository
• Slippers Design System webpage
• Architecture discussion video Jan 2020
• Digital definitions
• GitLab Blog: Why design systems benefit everyone

Why slippers

Slippers is the Marketing Website Design System used on about.gitlab.com. It's called Slippers because it pairs nicely with the Pajamas design system. Slippers is currently maintained by the Digital Experience team in Inbound Marketing at GitLab.

Why not Pajamas

• Pajamas code is written using different technology than the marketing website and handbook. For the sake of building things that don't scale, we choose something that aligns better with our existing tech stack. That said, we want to align with Pajamas whenever possible.
• Product has a much longer-lasting design cycle than marketing. Marketing frequently performs design tests and pivots. End-users of a product expect stability. Marketers need the flexibility to try new things.
• Best practices for a marketing website differ from those used when building a product.
  • Certain occasions might call for a toast in a software product compared to a modal popup on a marketing website.

Goals (Q3 2021)

• Make it easier to update the about.gitlab website.
• Clarify what's possible, what's permissible, and what's advisable.
• Improve the UX, UI, IA, and other design aspects of the about website.
• Document design decisions, use cases, and best practices in a central and contextually relevant location.
• Improve single-source-of-truth (SSOT) for the website.
• Codify design tokens.
• Strengthen weak points in our tech stack and reduce tech debt.
• Make more of the code modular and reuseable (less spaghetti).
• Modernize code using paradigms such as BEM and Atomic design.
• Clarify ownership of systems and contents.

Our vision (Q3 2021)

We want to have a design system that is visible to the world and searchable from a URL similar to Pajamas. We would love to have a living design system where the code used in the website is built using the same components that the design system is built from, where updating one updates the other.

Our plan (Q3 2021)

The process so far involves small incremental changes. Before we have a place to store the design system components we might apply raw HTML and CSS straight from Figma to existing pages while we explore and build out those systems, tools, designs, and code.

• Do UX research.
• Start a new a new design language built with Figma files.
• Establish a new CSS starting point.
• Rebuild pilot pages such as the homepage and enterprise page using that design language with alpha (non-final) exploratory code.
• Build a repository where we can iterate on design system tools such as Storybook with an independent codebase.
• Apply the new design language to that repository. Add researched and vetted components to that codebase.
• Apply the new CSS code into our new CMS using block components.
• Apply our new design language to a utility framework such as Tailwind CSS on our design system repository.
• Keep iterating until we reach a point where our new CSS system is integrated with Tailwind and Storybook, implementing a rough draft of a functional design system.
• Rebuild and iterate our pilot pages with final components and code as they become available.

Implementation Details (as of Q1 2021)

• Inventory of existing front-end code: Issue
• Create a base2020.scss file as a working solution to use in new pages
• Create page YAML front matter properties disable_handbook_styles and disable_default_styles
• Create a new repository to hold Slippers code
• Recreate UI components using Storybook as a dedicated development environment
• Publish package through npm
• Include slippers-ui in package.json for about-gitlab
• Support usage on same pages with base2020.scss, roll out Slippers to the blog
• Support Slippers within Middleman templating and usage as a client side library

Pages using Slippers

Pages using Slippers CSS

These are pages that are using Slippers CSS in the frontmatter, or using 2020base.css:

• Homepage
• Pricing
• Free Trial
• Install page
• Enterprise
• SMB
• Campuses
• Partners landing
• Partner pages
• Localized landing pages
• Topic pages
• Continuous Integration
• Out of the office report
• Remote work report

Pages using Slippers components

These are pages that have been built in our Storybook instance, and ported over to about.gitlab.com:

• Blog pages
• DevSecOps Survey
• DevOps Download
• Event Template (coming soon!)
• Site Navigation and Footer (coming soon!)

Opportunities for Growth

TODO