Atomic design encourages the idea of unpacking designs into parts that can be packed together to create new things. In Tango's case, we established variables to branch out into stellar designs.
As a designer, a beautiful color palette sets the mood for the remainder of the designs. However, that can often result in endless hours spent on picking a beautiful spectrum of colors. When thinking about design systems, especially for scalability, there is little value in picking 20 colors. Start with the basics. I selected the colors based on the hierarchy of use: primary, accent, secondary, and tertiary colors. These colors include our brand colors, grays, and blacks. Keep in mind, I've purposely created a color hierarchy which you'll later see reflected within the designs. However, I do recommend evaluating the need for hierarchical color systems over using a general palette.
Each of these colors included tints and shades, which can vary by increasing or decreasing the saturation or white/black balance. This is crucial for indicating element states (i.e. default, selected, or disabled).
Next I selected base colors which are typically used for background colors within a design. This could be the background of the entire design or the background of an element like a card or pop-up. Lastly, I selected colors for confirmations, errors, and alerts.
I knew I wanted to keep type colors minimal since the primary focus would be on the content.
Our type colors had two styles: a light style for dark backgrounds and a dark style for light backgrounds. From these two styles, we utilized transparencies to indicate primary, secondary, and tertiary type colors.
We created a few fixed rules of where text colors would be used at 100%.
Additionally, having text transparencies allow for designers to focus on content, readability and visual contrast. The advantage of using this system is that background colors begin to play a role in creating colors for us without overwhelming developers with additional hex codes.
Naming colors is primarily for developers to have semantic ways of using the palette in the product. Therefore, I avoided naming the colors like Snow-white and Rebecca-black, as it would have confused our engineers. I approached the naming system as such:
Color, Color-light, Color-dark
Developers worked with me to standardize this across the board so if a new product were created by the company, the color schemes would be easily adopted.
Originally, our team had selected Lato as our brand font because it was a web font (also for future web projects and marketing sites) that had excellent readability. However, over time we encountered a few hurdles that taught us even more about mobile technology.
For mobile devices, one of the things to consider is the weight of the app. Fonts often contribute to the amount of space an app takes up in a device. System fonts can usually eliminate that issue. With that in mind, we knew we wanted our app to also be pretty lean for our users from a technical standpoint so we stuck with system fonts, San Francisco Text and Roboto. Another factor we considered with the font choice was for globalization. The majority of Tango’s users are international users who speak a variety of languages. So having fonts that accommodate that is really important.
Since we’re a mobile application company, typographic scale needed to accommodate scalability of device screens. I decided to scale the type by multiples of 4 because
Navigations help users identify where they're at on the application.
Tango's core application navigation consisted of the following: