Research, UI, UX, Visual
Gemini Design System
Rumbleship's design system and component library
- building our product with consistency from the get-go
- push out design quickly at a high fidelity
The first version of our design system, creatively named Design Kit, met these two goal just fine, but it had a lot of hidden flaws. Because many of the components were designed on an as-needed basis, the consistency was...inconsistent. There were other elements that, while working perfectly on a single screen, when opened up to a system-level, were lacking in both function and appearance.
I decided to start over from basically scratch, taking what I learned from building out Design Kit and applying it to a new, more thoughtfully constructed system.
I audited a swath of design systems to get a sense of what components a fledgling design system would need.
I also tracked, in greater detail, the fonts and colors used by each system, as I felt that was the area where our previous system struggled the most.
Type and Colors
I started with type and colors. I tried out multiple new font variations, but eventually decided to stick with our established brand font of Freight Sans Pro. Freight Sans Pro was not the best font for long strings of letters and numbers (of which our product featured many) so I added on a monospaced font, Anonymous Pro, for use in these situations
I knew I wanted to stick with the primary/secondary brand colors of Purple and Plum, but even those needed slight tweaks. I added in a second primary Blue.
Inspired by The Guardian's color system, I switch to only having one primary color with three tints. The exception was for Grey, which I kept at 10 shades, from white to black, because I wanted to have more flexibility in that space
The rules for the colors are as follows:
- purple is for emphasis
- blue is for links
- green is for success
- yellow is for warnings
- red is for errors
- plum, orange, teal and pink are for illustrations and use in marketing materials
I did also create one "special" shade, background that is used in one place and one place only (bet you can never guess where?). The lighter shades of grey were just too cold when used as a full background color, so I made an extra light shade of plum to use instead.
Buttons and form inputs have rounded corners that are 3/8ths of their height. That proportion is double the 3/16ths scale used for the font sizes. I thought that was a nice little touch to keep everything feeling harmonious.
I also integrated icons more heavily into the components, to add a secondary bit of communication about functionality.
While the illustrations I created for our dashboard were not strictly part of the design system, I did develop a few general rules to keep their look consistent and on brand.
- All colors should be the brand colors (with tints allowed)
- All blacks are set at grey-100
- Skin tones are exempt from the color restrictions, all hair should be grey-100
- Background elements should, in general, be lighter than the foreground characters
- All characters wear "jumpsuits", meaning all their outfits should be from the same general 2-3 color sets, with patterns used to differentiate between top and bottoms
When you're working on a design system for a small company and a new product, the process is a lot less complicated than when you are overhauling a legacy project and have to bring a whole slew of designers and devs into sync.
Most of the work on Gemini was done solo. But once I debuted the system (to company-wide acclaim), we were actually able to get Gemini up and running on our Pay flow within a week. Moving the rest of our dashboards onto Gemini only took a few more weeks.