Restyle header of docs.gitlab.com
Problem to solve
- The eyebrow of our documentation site blends in with the rest of the page, making it difficult to easily scan.
- The “Choose version” selector in the eyebrow doesn't conform to Pajamas standards. The red border indicates an error, the border radius is overly rounded, and the left margin needs some space.
- Visual differentiation from the GitLab product makes it feel disconnected from the primary user experience and our brand.
Intended users
Users of the documentation site
Further details
Proposal
- Use similar styles and layout as gitlab.com
- Use default indigo theme for background and text colors
- Reduce height of header
- Increase size of search field
- Use similar navigation and dropdown style as gitlab.com
- Use SVG for “GitLab” logo text
- Use default search box text "Search our docs..." for clarity per #638 (closed)
Proposed Design
(See design in Figma.)
What does success look like, and how can we measure that?
- Docs site is better aligned visually with the GitLab brand and product
Edited by Mike Lewis