logos colors illustration type - ziff davis...isolation main lockup usage use this unless you...
TRANSCRIPT
Contents
Identity System
LOGOS
COLORS
ILLUSTRATION
TYPE
1.00
2.00
3.00
4.00
SPEEDTEST LOGO1.00
SPEEDTEST
Identity System
Logo
Speedtest is the most trusted name in network testing.
LOGO COMPOSITION1.01
Ø = yx
x * 125% x * 375%
x * 75%
Kerning adjustments
-40 -20 -20 -20 -30 0 0 -14
Identity System
Logo Mark
The logo mark can be used on its own.
Logo Type
The Logo Type cannot be used on its own.
Isolation
MAIN LOCKUP
Usage
Use this unless you can’t.
Can’t = When Speedtest is too small to be easily readable.
Use only in black or white.
Any color usage must be approved by [email protected]
1.02
SPEEDTEST SPEEDTEST
Identity System
SPEEDTESTPadding = 1.0 x cap height
MEDIUM LOCKUP1.03
SPEEDTEST
Isolation
Usage
For smaller, rectangular spaces where the main lockup would be unreadable.
Use only in black or white.
Any color usage must be approved by [email protected] SPEEDTEST
Identity System
Padding = 0.75 x Cap Height
50% d
dSPEEDTEST
Isolation
HORIZONTAL LOCKUP
Usage
The horizontal lockup is for use in space constrained situations.
Use only in black or white.
Any color usage must be approved by [email protected]
1.04
Identity System
Padding = 0.5 x Cap Height
120%Cap
height
33%Cap height
Align bottom of gauge with cap height
1.05 SPEEDTEST SUB-BRANDS
Main Lockup
Identity System
Gotham LightSame font sizeas logo text
42%Cap height
intelligence
1.06 POWERED BY SPEEDTEST
The Powered By Speedtest Badge usage must be approved by Ookla, and is only for licensed partners that are embedding Speedtest applications, or embedding Speedtest results in their own products.
The badge must be present whenever Speedtest results are present.
The badge must be clickable and link to http://www.speedtest.net/
Please place the badge so it is close enough to the Speedtest results and makes it clear to the user where the results are coming from. For example, do not place the badge at the top of a page if Speedtest results aren't viewable until you scroll down.
Please contact your account executive, or email [email protected] with any questions.
Logo
Usage Rules
Identity System
1.07 POWERED BY SPEEDTEST USAGE
Colors
This logo must only be used in black and white, or outlined black and white.
Any other color usage must be approved by [email protected]
Isolation and Scale
Scale should be set at no less than 40px height and proportional width at standard resolution.
Scale should increase relative to screen density (@2x means a minimum of 80px in height).
Identity System
Padding = 1.0 x cap height
COMPACT USAGE1.08
Usage
Use the compact logo when logo will appear 24px wide or less.
The speedtest logo should never be smaller than 16 px wide.
‘Speedtest’ text should never be smaller than 16px
The speedtest logo should never be printed smaller than 0.875” (including padding)
Any color usage must be approved by [email protected]
Identity System
intelligence
1.09 OOKLA LOGO
Ookla is the team that makes Speedtest. We are a couple dozen people mostly located in Seattle who want to help create a better, faster internet.
The Ookla logo embodies performance and metrics. It carries with it the same standard of excellence and trust that Speedtest is known for.
The Ookla logo must always be presented with the Speedtest logo andnever alone.
Any usage of the Ookla logo must be approved by [email protected]
Logo
Identity System
1.10 SPEEDTEST BY OOKLA
Padding: 0.5 x Cap HeightTop padding: 1 x Cap Height
Color
Isolation
Scale
The cap height of the Ookla logo should not go below 11.5px
The Ookla logo should not be printed smaller than 0.625” (in-cluding padding)
Identity System
11.5px minimum
0.625” minimum
1.11 SPEEDTEST BY OOKLA
Padding: 0.5 x Cap HeightTop padding: 1 x Cap Height
by33%
Cap height
x78% x
by
Endorsed Brand
This variation is the primary way the Ookla logo is used and co-branded with Speedtest.
Can be used in Black, White, and Grey.
Scale and Isolation
Three options are available for Powered By Speedtest. Navy, Outline, and Black.
Any other color usage must be approved by [email protected]
Identity System
1.12 SPEEDTEST BY OOKLA LOCKUPS
Speedtest by Ookla
Typically the ‘by Ookla’ logo is separated from the Speedtest logo, but there are some instances where they are combined into one mark.
Identity System
2.00 COLOR
Identity System
BLACK-BLUE
Hex:
PMS:
#0B0C1B
296 C
GREY
Hex: #9193A8
BLUE
Hex:
PMS:
#1CBFFF
2925 U
NAVY
Hex:
PMS:
#1A1B2E
296 U
LIGHT NAVY
Hex: #26273B
DARK NAVY
Hex: #141526
TRANSPARENT GREY
Hex:
50% OPACITY#9193A8
FLAT BLUE
Hex: #232F4E
PURPLE
Hex:
PMS:
#BF71FF
2573 U
YELLOW
Hex:
PMS:
#FFF38E
602 U
GREEN
Hex:
PMS:
#6AFFF3
318 U
Some of the time
An extended palette is available for things like UI states.
Most of the time.
These 7 colors make up the majority of the color system.
2.01 MAIN PALETTE
Identity System
2.02 LIGHT BACKGROUNDS
Darker Hues
When dealing with light backgrounds, use these colors in place of their counter-parts from the main palette.
BLUE
Hex: #1FA4E9
PURPLE
Hex: #A244DA
YELLOW
Hex: #EBDD52
GREEN
Hex: #2DE5D1
Identity System
Expanded colors.
These 6 colors can be used when additional colors become necessary to make object in the UI distinct (eg. Charts).
2.03 UI COLORS
RED
Hex: #FF3366
Identity System
GREEN
Hex: #19BF78
BLUE
Hex: #01A3E5
GOLD
Hex: #FFB834
PINK
Hex: #E97BCE
PURPLE
Hex: #6B3295
2.04 GRADIENTS
Identity System
Gradients.
Gradients are used in the UI to show progression, such as the gradient in the gauge during testing to show the progress from low speeds to higher speeds.
#72FFBC#6FFFED35%
#2DD9EC
#FF7AD2#825ED4
#FFFFFF100% Opacity
#222F4D75% Opacity
30%
#222F4D0% Opacity
#FFFFFF #1CBFFF30%
#FFFFFF #BF71FF30%
#FFFFFF #6AFFF330%
Download Gradient
Upload Gradient
Needle Gradient
3.00 ILLUSTRATION
Identity System
Illustration
The internet is composed of network packets moving around the world at light speed between client computers and servers.
A single packet is represented as a dot. A packet in transmission is represented as a line, or a series of flowing dots.
We employ this simple metaphor in our approach to creating graphics and illustration across the brand.
3.01 ILLUSTRATION EXAMPLES
Identity System
Basic Examples
Complex Examples
3.02 ILLUSTRATION AS UI
Identity System
Examples
When possible, match the iconography to the visual representation of the functionality.
The Nearby Speeds icon is a smaller version of the radar graphic used when loading in blips on the map.
The speed gauge is a larger version of the Speedtest logo.
0
1
5
10
20
30
50
75
100
3.03 UI EXAMPLES
Identity System
Common Elements
Objects such as buttons and simple inputs should follow the same general rules as illustration; elliptical and pill shape.
Other UI
All
RESULTS HISTORY
Sign Up
Modal Flyout Email
General Link
4.00 TYPOGRAPHY
Identity System
4.01 GOTHAM
Identity System
Gotham Light ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!@#$%^&*()_+.,<>?[]\~=-
Gotham Book ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!@#$%^&*()_+.,<>?[]\~=-
Gotham Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!@#$%^&*()_+.,<>?[]\~=-
Gotham Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!@#$%^&*()_+.,<>?[]\~=-
4.02 GAUGE REGULAR
Identity System
Specimen
Gauge Regular is a custom developed font with specific usage requirements:
Use at a larger scale than surrounding type. There must be obvious visual contrast.
Only use Gauge Regular for individual metrics.
Never use type of the same size inline with Gauge Regular.
1 2 3 4 5 6 7 8 9 0 . ,
4.03 BASIC USAGE
Examples
Identity System
36pt Gotham Light
21pt Gotham Light
14pt Gotham Medium
14pt Gotham Light
60pt Gauge Regular
BUTTON
HeaderSub-Header
TITLE
Body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, link text quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo con-sequat.
123.45Mbps