Azure.cn Design Guidelines Last updated 2016/11
Confidential. For internal use only What’s new 2016/11
- Revamped guideline structure - Added logo principles, APP icon and QR code - Updated “color”, including grayscale, accent color, banner color and component colors - Updated examples - Added “layout”, including structure and grids
2 Azure.cn Design Guidelines Contents Style 4 Logo 10 Typography 18 Color
Layout 27 Structure 31 Grid 35 Breakpoints
Graphics 38 Icons 46 Banners 48 Topology
Resources 50 Resources
3 Azure.cn Design Guidelines Style - Logo - Typography - Color Logo - Style The Azure logo – color & composition
- Use the full-color “Microsoft Azure, operated by 21 Vianet” logo on all communications. - The logo consists two parts — Logotype of “Microsoft Azure” and “21 Vianet.” They showcases the composition of Azure in China. - Use Segoe typeface for “Microsoft Azure” logo, all products, and marketing. Use Microsoft Yahei in “21 Vianet” part, which is the recommended font for all products in simplified Chinese. - Adjust the brightness of “Operated by 21 Vianet” to make it fit into the background.
Full-color positive. Use the positive version on dark backgrounds, including dark areas in Full-color reverse. Use the reverse version on blue backgrounds. photographs.
5 Azure.cn Design Guidelines Logo - Style The Azure logo – spacing & sizing
- The width of “Operated by 21 Vianet” is no bigger than ¾ of the “Microsoft” type face. - Recommended font size of “Operated by 21 Vianet” is 6~12px, as the minimum and maximum size on screen. The space between the “Azure” logo type and “Operated by 21 Vianet” could be changed accordingly to the size of the logo. The minimum space is no less than 6px.
34 px 1.22 cm
Minimum size Web – the minimum height of “Microsoft Azure” is 20px. The space between “Azure” logo and “21 Vianet” is at least 6px. The minimum height of “21 Vianet” is 8px.
Print – the minimum height of “Microsoft Azure” is 0.7cm. The space between “Azure” logo and “21 Vianet” is at least 0.25cm. The minimum height of “21 Vianet” is 0.27cm.
Minimum clear space We respect the logo by giving it some space on all sides. The minimum clear space is equivalent to the height of “Microsoft Azure” typeface.
6 Azure.cn Design Guidelines Logo - Style The Azure logo – working with backgrounds
- Apply full-color logo on any of the background colors shown in below to ensure the readability. Ensure the logo clarity and quality when applying small logo.
Black: # 000000; Dark blue: # 002050; Light grey: # e6e6e6; Blue grey: # 323a45; Blue: # 0078d7; Lime white: # edf0f5; Picture: with blue grey Light blue: # 00bcf2 White: # ffffff mask (#323a45, opacity: 80%)
7 Azure.cn Design Guidelines Logo - Style APP icon – “add to home screen”
- Apply this icon for “add to home screen” in browsers, available for all platforms, iOS, Android, and Windows
Background color: # 323a45; Logo color: # 00bcf2; Logo type: Segoe UI
8 Azure.cn Design Guidelines Logo - Style QR code
- Apply QR code on campaigns, and social media to go viral
9 Azure.cn Design Guidelines Style - Logo - Typography - Color Typography - Style Typography overview
- The table below leaves a general impression of the typography on ACN. - The list below applies to the width from 320~979px, 980~∞px.
Font family Text style Font size Line spacing Letter spacing
Main Header, Banner 30px, Light (320~979px) 8-10px 110% Title 32px, Light (980~∞px)
Secondary Header 20px, Regular 8-10px 110%
Body Text, Link, Button, 微软雅黑（苹方，黑体） 14px, Regular 6-10px 110% Form, Tab
Tertiary Header, Tab 14px, Bold 6-10px 110%
Button Labels / Hint / 12px, Regular 6-8px 110% Meta Tags
Main Header, Banner 32px, Light 8-10px 0 Title
Secondary Header 20px, Regular 8-10px 0
Segoe UI ( San Body Text, Link, Button, Francisco, Helvetica, 14px, Regular 6-10px 0 Form, Tab 1 Arial, Tahoma )
Tertiary Header, Tab 2 14px, Bold 6-10px 0
Button Labels / Hint / 12px, Regular 8-10px 0 Meta Tags
11 Azure.cn Design Guidelines Typography - Style Typeface
Microsoft Yahei ( 微软雅黑 )
灵活开放支持所有主流操作系统 Light 语言或开发工具
提供国际水准的 99.95% 服务级别协议 Regular
基础结构即服务和平台即服务行业领袖的唯一主流云平台 Bold
Examples of Microsoft Yahei
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Regular 1234567890
Microsoft Yahei A-Z and numerals
12 Azure.cn Design Guidelines Typography - Style Typeface
Microsoft Yahei font weight - Microsoft Yahei has 3 font weights: thin, regular, bold
微软雅黑 细体 Light
微软雅黑 常规体 Regular
微软雅黑 粗体 Bold
Microsoft Yahei font weights
13 Azure.cn Design Guidelines Typography - Style Typeface
Segoe UI
Operating systems, Frameworks Light
Light Italic
POWERED BY WORLD-CLASS AZURE TECHNOLOGY Semilight PROTECT YOUR DATA Regular
Italic
Any developer or IT professional can be productive Semibold
Semibold Italic
Bold
Bold Italic
Black
Examples of Segoe UI
14 Azure.cn Design Guidelines Typography - Style Typeface
Segoe UI
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Regular 1234567890
Microsoft Yahei A-Z and numerals
15 Azure.cn Design Guidelines Typography - Style Typeface
Segoe UI font weight - Microsoft Yahei has 6 font weights: Light, Semilight, Regular, Semibold, Bold, Black
Segoe UI Light Segoe UI Semilight Segoe UI Regular Segoe UI Semibold
Examples of Segoe UI
16 Azure.cn Design Guidelines Typography - Style Typeface – examples
No. Font style
1 h1
2 h2
3 p
4 link in docs left- 5 navigation- category 6 h5
7 updated date
8 bookmark left- 9 navigation- links 10 h4
11 h3
17 Azure.cn Design Guidelines Style - Logo - Typography - Color Color - Style Primary color
- Provide frequently used website colors - Aims to provide professional, positive, and a clean UI
R: 50 R: 94 R: 182 R: 237 R: 230 R: 0 R: 31 G: 58 G: 109 G: 192 G: 240 G: 97 G: 163 G: 187 B: 69 B: 129 B: 207 B: 245 B: 2 B: 217 B: 166
#323a45 #5e6d81 #b6c1cf #edf0f5 #e66102 #00a3d9 #00b294
Blue-grey-1 Blue-grey-2 Ice-blue Lime-white Orange Light-blue Teal
Blue-gery-1 mainly used as headings, and background color
Blue-gery-2 mainly used as body text, and background color
Ice-blue applies to the information with a dark background as minor important information.
Lime-white mainly used as background color
Orange for interactive elements, highlight information, e.g. promo buttons, links
Light-blue is the primary color of ACN, represents cloud. Used as background color, and interactive elements, e.g. links, tabs.
Teal mainly used as background color. Also used on icons to provide positive feelings, e.g. unblock, healthy.
19 Azure.cn Design Guidelines Color - Style Secondary color
R: 69 R: 137 R: 0 R: 0 R: 0 R: 255 G: 84 G: 145 G: 188 G: 120 G: 32 G: 185 B: 96 B: 156 B: 242 B: 215 B: 80 B: 0
#404b59 #89919c #00bcf2 #0078d7 #002050 #ffb900
Accent color
R: 230 R: 255 G: 97 G: 185 B: 2 B: 0
#e66102 #ffb900
Grayscale
R: 0 R: 51 R: 81 R: 114 R: 204 R: 229 R: 255 G: 0 G: 51 G: 81 G: 114 G: 204 G: 229 G: 255 B: 0 B: 51 B: 81 B:114 B: 204 B: 229 B: 255
#000000 #333333 #505050 #737373 #cccccc #e6e6e6 #ffffff
20 Azure.cn Design Guidelines Color - Style Alternative accent color
# 7fba01 Good
# ff8e00 Warning
# e71e27 Error
# 0078d7 Information/ note
# e3008c Important
# a80000 China specific
# 000000
# 008000 Source code # 2b91af
# 800000
21 Azure.cn Design Guidelines Color - Style Themes
Main/ secondary/ tertiary header # 323a45 Main/ secondary/ tertiary header, text # ffffff
Text # 5e6d81 Text 2, link 2 # b6c1cf
Category in footer, hint text, link 2 # 89919c Category in footer, hint text # 89919c
Split Line 1, disabled text, # cccccc Split line 1, Disabled text, # 5e6d81, 30%
Split line 2 # b6c1cf, 60% Split line 2 # 5e6d81
Dividers # edf0f5 Dividers #404b59
Accent color # e66102 Accent Color # e66102
Links, tabs, buttons, clickable UI elements # 00a3d9 Links, tabs, buttons, clickable UI elements # 00a3d9
Light theme ( recommended ) Dark theme
22 Azure.cn Design Guidelines Color - Style Light theme – examples
23 Azure.cn Design Guidelines Color - Style Apply color on components – examples
- Use #edf0f5 as the background color of left navigation ( cent_nav ), bookmark, drop down menu. - Use #edf0f5 with transparency as background for notice, table, code, etc..
24 Azure.cn Design Guidelines Color - Style Background color – banner
- Background colors used on banners for each categories. - Each category is assigned with certain color schemes - “*” as recommended colors
Products/services Solutions Documentation Price/ / webinar/ news
# 00bcf2 # 333333 * # b5b5b5 * # e66102
# 66d7f7 # 505050 # d2d2d2 # ff8c00
# ccf2fc * # 737373 # e6e6e6 # ffb900 *
Support Case Study Blog
# 002050 * # 32145a * # 008272
# 334d73 # 5c2d91 # 00b294 *
25 Azure.cn Design Guidelines Color - Style Color hierarchy
When choosing colors for links, buttons or even colorized background, - Choose colors based on the context, and also consider the content relationship within the page - Use accent color on call to actions, highlight elements. Consider other color options listed in below to balance composition and its importance - See details in component section (work in progress)
Emphasize, highlight Neutral Secondary
26 Azure.cn Design Guidelines Layout - Structure - Grid - Breakpoints Structure - Layout Desktop structure: 980~∞px Header (Top nav) Side nav - Structure is made up of 4 parts, including top navigation, side navigation, Bookmark bookmark and footer. - Top navigation and footer appeared on every page in our website. - Side navigation and bookmark is optional, which can be added as second level navigations.
Footer
Example - desktop
Mobile structure: 320~979px Header
- Structure is made up of 4 parts, including top navigation, side navigation, Side nav bookmark and footer. - Top navigation and footer appeared on every page in our website. Bookmark - Side navigation and bookmark is optional, which can be added as second level navigations. - Top navigation is collapsed in nav icon and menus overlay all other structural elements. - Side navigation collapse in a dropdown menu. Users are able to navigate Footer through the dropdown list. We now invoke different styles of widgets for various mobile platforms.
Example - mobile
28 Azure.cn Design Guidelines Structure - Layout UI Region
- Define a primary divider, the horizontal one. - Use white space, background color and dividers to distinguish secondary areas. Avoid slicing up the interface into too many regions or L shapes.
The horizontal divider
Do. Don’t. Use white space and grey background color. Avoid slicing up the interface into too many pieces.
29 Azure.cn Design Guidelines Structure - Layout UI Region
- Use grid to organize the width of content. More details about grid system refer to the next section. - Use separate lines to group information or when more separation is needed than what white space can provide. - Use different background color, light grey is the first choice to distinguish various sections and specific behaviors.
A 3 column layout based on our grid system. Use separation lines for further grouping. Use different background color to segregate sections. 30 Azure.cn Design Guidelines Layout - Structure - Grid - Breakpoints Grid - Layout Grid size, gutter, and margin
- Our grid system is composed of 12 flexible columns with a 20px gutter between columns. - Our columns have a 10px padding on both sides which result in a 20px gutter between columns. Margin outside the columns is 10px which also make a 20px gutter on the grid edges. Even though our columns are fluid, the gutter remains constant.
32 Azure.cn Design Guidelines Grid - Layout Grid system
Size 1 of 1
1/1
Size 1 of 2
1/2 1/2
Size 1 of 3
1/3 1/3 1/3
Size 1 of 4
1/4 1/4 1/4 1/4
Size 1 of 6
1/6 1/6 1/6 1/6 1/6 1/6
Size 1 of 12
1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12
33 Azure.cn Design Guidelines Grid - Layout Grid system
Grid sizes and gutter
1/2 1/2
20px 20px 20px
Mixing Grids - The grid layout is easily extended by mixing different column sizes.
1/6 5/6
1/4 3/4
1/3 2/3
1/6 5/12 5/12
34 Azure.cn Design Guidelines Layout - Structure - Grid - Breakpoints Breakpoints - Layout Breakpoints
- Adapt layouts for the following breakpoint widths: 320, 768, 980, 1280px for the optimal user experience across devices. - The minimum width of our site is 320px, compatible with most of the mobile devices. - 768px for most of the tablets, while 980px for the PC screens. - Considering that our site is content-based, the layout won’t be changed except some banner pictures when users browse with their large screens.
Small Medium Default Large
320px 768px 980px 1280px
36 Azure.cn Design Guidelines Breakpoints - Layout Responsive Columns
- Our different column sizes change dimensions once they reach certain breakpoints. They do it automatically to make the website responsive and mobile friendly. - The following table shows the media-query breakpoints.
Breakpoints
Grids 1280px or more Between 1279px and 980px Between 979px and 768px 767px or less (including 320px)
Size 1 of 12 8.33% 8.33% 25% 50%
Size 1 of 6, Size 2 of 12 16.67% 16.67% 25% 50%
Size 1 of 4, Size 3 of 12 25% 25% 50% 100%
Size 1 of 3, Size 4 of 12 33.33% 33.33% 50% 100%
Size 5 of 12 41.67% 41.67% 100% 100%
Size 1 of 2, Size 6 of 12 50% 50% 100% 100%
Size 7 of 12 58.33% 58.33% 100% 100%
Size 2 of 3, Size 8 of 12 66.67% 66.67% 100% 100%
Size 3 of 4, Size 9 of 12 75% 75% 100% 100%
Size 5 of 6, Size 10 of 12 83.33% 83.33% 100% 100%
Size 11 of 12 91.67% 91.67% 100% 100%
Size 1 of 1, Size 2 of 2, Size 3 of 3, 100% 100% 100% 100% Size 4 of 4, Size 6 of 6, Size 12 of 12
Keep the width of the content at 1280px when the screen size is over 1280px
37 Azure.cn Design Guidelines Graphics - Icons - Banners - Topology Icons - Graphics Product icons
VPN-gateway express-route azure-redis-cache storsimple API-management active-directory
visual-studio-team- visual-studio-application- virtual-network power-BI-embedded backup scheduler services insights
web-apps notification-hubs remote-app load-balancer automation azure-security-center
service-fabrics cognitive-services event-hubs multi-factor traffic-manager service-bus authentication
39 Azure.cn Design Guidelines Icons - Graphics Product icons
CDN data-factory site-recovery log-analytics azure-iot-hub key-vault
application-gateway hockey-app stream-analytics DNS media-services search
mobile-engagement cloud-services biztalk-services virtual-machines azure-container-service batch
storage mobile-apps data-lake-analytics data-catalog mysql-database-on-azure machine-learning
40 Azure.cn Design Guidelines Icons - Graphics Product icons
sql-data-warehouse azure-devtest-labs HD-insight document-DB functions IOT-suite
app-service face-API emotion-API bing-speech-API computer-vision-API language-understanding- intelligent-service
text-analytics-API web-language-model-API bing-spell-check-API translator-text(speech)- speaker-recognition-API bing-search-APIs API
bing-autosuggest-API recommendation-API academic-knowledge-API
41 Azure.cn Design Guidelines Icons - Graphics Solution icons
backup-archive big-data business-intelligence data-warehouse dev-test digital-marketing
disaster-recovery e-commerce mobile predictive-maintenance remote-monitoring SAP
share-point dynamics digital-media high-performance- microservices hybrid-integration computing
converge-media precision-marketing
42 Azure.cn Design Guidelines Icons - Graphics Content icons
alarm news-board cognitive-service start-guide white-paper package
source-code online-form mobile-app msdn-forum FAQ docs
call 1-rmb-trial
43 Azure.cn Design Guidelines Icons - Graphics System icons
main-menu search link dropdown RSS account
view new like pdf expand-and-collapse play
call Weibo xiao-ice activity announcement Wechat
warning good info interrupt correct clear
44 Azure.cn Design Guidelines Icons - Graphics Client logos
cfwin centaur ipinyou beyondsoft iccl 91yyd changwuxian avepoint yungoal cogobuy
ilexnet admaster jingwei h3c vancl walltechsystem xvizion social-touch vanelife jinyinmao
digitalchina hollysys ezshoe his999 arrail bstar huashan inwatch chanjet nuskin
51banbao fotoable kingdee webluker testin csrender qorosauto uzoo pactera linekong
pptv scedu gmw inourway algoblu aidu365
45 Azure.cn Design Guidelines Graphics - Icons - Banners - Topology Banners - Graphics
47 Azure.cn Design Guidelines Graphics - Icons - Banners - Topology Topology - Graphics Topology
Icons - Apply #0078d7 for all icons - Retain the icon proportion and size Arrow line and background - Configuration: 1px, #b2b2b2, dotted line, 2px dash with 4px gap - Group sections by using #edf0f5 as background color - Apply arrow line in 3 directions: 90° vertical, 90° horizontal and 45° slash Font - Use Microsoft Yahei Regular for Chinese, and Segoe UI Regular for English - Font-size: 10px; font-color: #666 Margins and spacing - Keep at least 6 pixels between icons and texts, texts and lines - Keep at least 10 pixels between region background and elements, outside dividing line and elements
49 Azure.cn Design Guidelines Resources Resources Microsoft Branding
Brand central | Azure icons
51 Azure.cn Design Guidelines