Variables

Creating the Basic Building Blocks of the Design

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.


Color System

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.

  • Primary: this can be the primary color used most prominently and can sometimes be the brand color. When creating colors for systems you’re naming colors by usage. In Tango's case, we now have two applications and so we created a primary color for the respective applications.
  • Accent: this is often the color that compliments the primary color. It is sometimes used for CTAs, highlights, or elements that have primary actions.
  • Secondary: usually this is used to bring prominence to elements that have a secondary action.
  • Tertiary: this is usually used for elements that compliment the form of the design (i.e. dividers, shadows, text colors, etc.).


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.




Font Colors

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%.

  • On backgrounds that are Primary-light or darker, font colors will change to #fff and vary by % transparency.
  • Depending on the typographic hierarchy, the text color transparency varies by percentages.

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

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.


Typography

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.




Typographic Scale

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

  • Even numbers are easier to scale down
  • Pt and sp work well with multiples of 2 and 4, which means it will work for iOS and Android platforms



Information Architecture / Navigation

Navigations help users identify where they're at on the application.

Tango's core application navigation consisted of the following:



Tango's social application, Fiesta Navigation consisted of the following: