[Meta] Evolving the GitLab Visual Personality
There have been a lot of issues and discussions about evolving the GitLab personality (#22192 (closed) ). This is a meta issue to organize our exploration and work on this effort. It is important for us to balance both the details and the big picture as we work those these ideas. To that end, below are Experiments where we can take a full page of GitLab, and really push on the design, and Basics where we can discuss the various details that make up our visual language. The two levels will inform each other, so it can be helpful to jump between. Once some ideas and directions emerge from this work, we can evaluate and start to apply it to components such as buttons and links, etc.
Experiments
Make GitLab bolder #24305
Let's try using more colors and starker contrast. We can explore adding strong shapes and lines. We can consider pushing on the typographic contrast (size, weight, etc.)
Give GitLab depth #24306
What if we split the GitLab UI into layers of information? What elements would exist on the same layer? Which elements should be 'above' others, and 'closer' to the user? What elements should be pushed back?
Extremely minimal GitLab #24307
Let's take a page of GitLab and try to simplify it and remove as much as we can, but still have the page read well and make sense. What colors would we remove? What type sizes are absolutely necessary?
Basics
Type ramp #24310
What type sizes and weights do we use, and what we use them for?
Colors #24311
What is our color palette, and what meaning is applied to specific colors? What do we think about background colors?
Icons #24312
What is our icon style?
Illustrations #24314
What is our illustrative style? How does it relate to GitLab Marketing pages?
Animate all the things! #24831
Where should we start adding motion? What easing curves and timings should we use? Created guidance, and starting to implement.
Voice/tone
To add later. Let's focus on the other elements first
What is GitLab's voice and tone when it comes to copy and help text?