TOPWEATHER
Design Guide
Updated May 2020
TopWeather is a web app for mountain sports aficionados to check the weather so that they can practice their favorite activities sports and hobbies in an enjoyable and safe manner.
The app allows users to follow the weather of their favorite mountains and to build personalized forecasts so that they will know when the desired for their activity is met.
Use TOPWEATHER's logo form and logotype primarily in their high contrast versions forms for better readability
Use 'watermark', low-contrast versions of the logo on non-navigational design elements.
Please use the exact height of the logo to measure clear space all around.
Color Pallete
TW Blue, Dark Blue, and White are to be used for all branded and interactive surfaces.
Weather Light Blue, Yellow, and Magenta should ONLY be used on iconography and charts describing the weather.
TW Blue (Brand)
Weather Light blue
TW Dark Blue (Brand)
Weather Yellow
Success Teal
Weather Magenta
Iconography
Grid System
It is based on the 12-column Bootstrap v4.5 responsive grid system to allow for flexibility in the design on different breakpoints.
Accessibility
Topweather's goal is to facilitate weather readings at any time of the day in any location with a fast or low internet connection. To achieve that, we have used minimal design in a way that improves load times and readability.
Our color palette provides high contrast in both light and dark modes and all iconography status modes rely on a mix of shape and color.
Dark and light modes are available to adapt color range depending on environment and visual preferences.
The type scale is based on 20px to ensure readability.
Targets on mobile have a minimum width and height of 60px.
Language & Voice
The tone should be friendly and enthusiastic but not patronizing.
Weather terminology and overall language should always remain clear, friendly, and concise.
Avoid the use of possessive adjectives like 'your' or 'our', 'my' to improve readability and to avoid sounding condescending.
Try to keep headlines to one or two words.