<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
		<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/main.css">
		<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/logo.css">
		<link rel="icon"
			type="image/png"
			href="images/favicon.ico">
		<title>OpenUI5 - Logo</title>

		<script>
  			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  			})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  			ga('create', 'UA-50072417-1', 'sap.github.io');
			ga('set', 'anonymizeIp', true);
  			ga('send', 'pageview');
		</script>

		<style>
			/* style for obfuscated mail address */
			.addr {
				position: relative;
				display: inline-block;
				width: 140px;
				height: 20px;
			}
			.addr > img {
				position: absolute;
				left: 0;
				top: 0;
				cursor: pointer;
				margin-top: 4px;
			}
		</style>
	</head>
	<body>
		<!-- HEADER -->
		<div id="header_wrap" class="outer">
			<div class="wrap_ie9">
				<div class="inner">
					<img src="./images/OpenUI5_new_big_side.png" class="ui5logo" alt="OpenUI5 Logo">
					<h1 id="project_title">
						<span class="header_headline">Code once.</span><br>
						<span class="header_headline">Run on any device.</span>
					</h1>
					<h2 id="project_tagline">
						<span class="headertitle"><a href="index.html">Intro</a></span>
						
						<span class="headertitle"><a href="features.html">Key Features</a></span>
						
						<span class="headertitle"><a href="getstarted.html">Get Started</a></span>
						
						<span class="headertitle"><a href="download.html">Download</a></span>
						
						<span class="headertitle"><a href="http://openui5.tumblr.com/">Blog</a></span>
						
						<span class="headertitle"><a href="planet/">Feed</a></span>
						
						<span class="headertitle"><a href="faq.html">FAQ</a></span>
						
						<span class="headertitle"><a href="whoUsesUI5.html">Who Uses UI5?</a></span>
						
						<span class="headertitle"><a href="relatedProjects.html">Related Projects</a></span>
					</h2>
				</div>
			</div>
		</div>

		<!-- Fork me on GitHub -->
		<a href="https://github.com/SAP/openui5/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="images/forkme_fiori.png" alt="Fork me on GitHub"></a>

		<!-- MAIN CONTENT -->
		<div id="main_content_wrap" class="outer">
			<div id="main_content" class="inner" >
				<div class="inner">
					<h3>Usage of the OpenUI5 name and logo</h3>
					
					<p>Feel free to spread the word about OpenUI5 and use our logo.<br/>
					Please follow these few guidelines when doing so:</p>

					<h3 class="headlineLogo">Name</h3>
					
					<p>The official name is <span class="strong">OpenUI5</span> - capital O, capital UI, no spaces between Open and UI5.<br/>
					If you use the correct name you help people recognize it and e.g. avoid the impression that we are building "Openui" 
					in version 5.<br/>
					The short name <span class="strong">UI5</span> is also fine, in particular when you explain something that is not specific to the Open Source 
					version, but also applies to SAPUI5.</p>

					<h3 class="headlineLogo">Flavors: Fire and Water</h3>
					
					<p>The <span class="strong">OpenUI5</span> logo comes in 2 flavors: Fire and Water.<br/>
					The orange logo sits on black background, blue stands on white.</p>
					<div class="logo-flex-container">
						<div class="logo-flex-item ui5-logo-new">
							<img src="resources/OpenUI5_newlogo_orange_only.png"/>
						</div>
						<div class="logo-flex-item ui5-logo-new">
							<img src="resources/OpenUI5_newlogo_blue_only.png"/>
						</div>

					</div>
					<h3 class="headlineLogo">Colors: 2 Color Tracks</h3>
					
					<p>Main and Secondary colors are mostly meant for additional elements (e.g. header in a presentation, sticker on an image).<br/>
					You can use them as background colors only if the logo is single colored (black for orange and white for blue).<br/>
					Both tracks could be combined with neutral greys.</p>
					
					<div class="color-flex-container color-table_header">
						<div class="color-table-block color-flex-title"></div>
						<div class="color-table-block color-flex-item">Main</div>
						<div class="color-table-block color-flex-item">Secondary</div>
						<div class="color-table-block color-flex-item">Background</div>
					</div>
					
					<div class="color-flex-container margin-bottom">
						<div class="color-table-block color-flex-title">Fire:</div>
						<div class="color-table-block color-flex-item" style="background-color: #FF5A37;">
							<img style="vertical-align: middle;" src="resources/phoenix_black.png"/>
						#FF5A37
						</div>
						<div class="color-table-block color-flex-item" style="background-color: #FFA42C;">
							<img style="vertical-align: middle;" src="resources/phoenix_black.png"/>
						#FFA42C
						</div>
						<div class="color-table-block color-flex-item" style="background-color: #000000; color: #FFFFFF;">
							<img style="vertical-align: middle;" src="resources/phoenix_orange_tiny.png"/>
						#000000
						</div>
					</div>
					<div class="color-flex-container margin-bottom">
						<div class="color-table-block color-flex-title">Water:</div>
						<div class="color-table-block color-flex-item" style="background-color: #1873B4; color: #FFFFFF">
							<img style="vertical-align: middle;" src="resources/phoenix_white.png"/>
						#1873B4
						</div>
						<div class="color-table-block color-flex-item" style="background-color: #53B8DE; color: #FFFFFF">
							<img style="vertical-align: middle;" src="resources/phoenix_white.png"/>
						#53B8DE
						</div>
						<div class="color-table-block color-flex-item" style="background-color: #FFFFFF;">
							<img style="vertical-align: middle;" src="resources/phoenix_blue_tiny.png"/>
						#FFFFFF
						</div>
					</div>

					<h3 class="headlineLogo">Layout: Horizontal and Vertical</h3>
					
					<p class="padding-bottom">Depending on the context, you have two layout options - horizontal and vertical.<br/>
						Download the different versions in the Assets section below.</p>

					<div class="logo-flex-container">
						<div class="logo-flex-item">
							<a href="resources/OpenUI5_newlogo_orange_horizontal.png" class="logo-image-link">
								<img src="resources/OpenUI5_newlogo_orange_horizontal.png" />
							</a>
							<a href="resources/OpenUI5_newlogo_orange_vertical.png" class="logo-image-link">
								<img src="resources/OpenUI5_newlogo_orange_vertical.png" />
							</a>
						</div>
						<div  class="logo-flex-item">
							<a href="resources/OpenUI5_newlogo_blue_horizontal.png" class="logo-image-link">
								<img src="resources/OpenUI5_newlogo_blue_horizontal.png" />
							</a>
							<a href="resources/OpenUI5_newlogo_blue_vertical.png" class="logo-image-link">
								<img src="resources/OpenUI5_newlogo_blue_vertical.png" />
							</a>
						</div>
					</div>

					<h3 class="headlineLogo">Assets</h3>
					
					<h4>Web:</h4>
					<p>The .ZIP contains PNG files with transparent background in RGB color mode.<br/>
					Those work best on screens, but they're okay for A4 print.</p>
					
					<a href="resources/logoset.zip" download class="downloadbutton">Download Web Assets</a>
					
					<h4>Print:</h4>
					<p>The .ZIP contains EPS files in CMYK color mode.<br/>
					Use those if you're printing a shirt, mug or an umbrella.</p>
					
					<a href="resources/logoset_print.zip" class="downloadbutton">Download Print Assets</a>
					
					<h4>Wallpapers:</h4>
					<p>Team Orange or Blue? Get your UI5 Wallpaper here.</p>
					
					<a href="resources/wallpapers.zip" class="downloadbutton">Download Wallpapers</a>

					<h4>Former Logo:</h4>
					<p>You can find the files for the former UI5 Logo <a href="resources/logoset_old.zip" download>here</a>. <br/>
					Please do not use it further for official purposes.</p>
					
					<h3 class="headlineLogo">How to use?</h3>
					
					<h4>DO:</h4>
					<ul>
						<li>Use our logo for visual purposes (presentations, products, websites, merchandise...)</li>
						<li>Show a clear differentiation between your initiative/service/product and the OpenUI5 brand</li>
						<li>Clearly state that you are a partner or community project and link to our official website</li>
					</ul>
					
					<h4>DON'T:</h4>
					<ul>
						<li>Pretend to be officially affiliated with OpenUI5 unless authorized by the OpenUI5 Team</li>
						<li>Publish and replicate content from our official website. Link to us instead if possible.</li>
						<li>Change the logo in any way (e.g. colors, shadow, glow, stretching)</li>
						<li>Register and operate official looking accounts or websites (e.g. registering the "OpenUI5" account in a social network)</li>
						<li>Mix it with other content.</li>
					</ul>
					
					Why? We want people to recognize it easily.
					Be fair and honest to people interested in UI5 and don't try to attract them by pretending to be an official site.
					
					<br>

					<h3 class="headlineLogo">3D Logo Model</h3>

					<a href="resources/3d_logos_new.jpg"><img src="resources/3d_logos_new.jpg" style="margin-top: 15px;"/></a>

					<p>
					Here you can download STL model files for use with 3D printers:
					<ul>
						<li><a href="resources/UI5_logo_2.0_standing.zip" download>Freestanding</a> (flat bottom)</li>
						<li><a href="resources/UI5_logo_2.0.zip" download>Round</a> </li>
						<li><a href="resources/UI5_logo_2.0_keyring.zip" download>Keychain</a> (with hole in the top)</li>
					</ul>
					
					You can use the 3D model data under the same terms as the OpenUI5 logo graphics.
					</p>


					<br>
					<p>
					For any other legal or organizational questions please contact us at 
					<script>
					var u1 = "resources/a" + "ddr1.png";
					var u2 = "resources/a" + "ddr2.png";
					var content = "<span class='addr'><img src='" + u1 + "'><img id='addrImg2' src='" + u2 + "'></span>.";
					
					document.write(content);
					
					window.setTimeout(function(){
						var elem = document.getElementById("addrImg2");
						elem.addEventListener("click", function(evt){
							var murl = "mai" + "lto:";
							var m = "openui" + "5asapd".replace("d",".");
							var m = m.slice(0, 7) + "@" + m.slice(8, 12) + "com";
							window.open(murl + m, "_blank");
						});
					}, 2000);
					</script>

					<noscript>[Turn on JavaScript to see the email address]</noscript> Please do NOT use this mail address for any technical questions.
					</p>
				</div>			 
			</div>
		</div>
		<div id="footer_wrap" class="outer">
			<div class="wrap_ie9">
				<div class="inner">
					<p class="copyright">&copy; SAP SE, made available under Apache License 2.0</p>
					<script>
						var ref = encodeURIComponent(document.referrer);
						document.write('<img class="counter" src="https://openui5.hana.ondemand.com/resources/sap/ui/core/themes/base/img/1x1.gif?page=logo&ref=' + ref + '" style="width:1px;height:1px" alt="counter">');
					</script>
					<noscript><img class="counter" src="https://openui5.hana.ondemand.com/resources/sap/ui/core/themes/base/img/1x1.gif?page=logo" style="width:1px;height:1px" alt="counter"></noscript>
					<a class="legal" href="impressum.html">Legal Disclosure / Impressum</a>
					<a class="legal" href="http://global.sap.com/corporate-en/legal/privacy.epx">Privacy</a>
					<a class="legal" href="http://www.sap.com/germany/about/legal/privacy.html">Datenschutz</a>
					<a class="legal" href="ga_disclaimer.html">Google Analytics Disclaimer</a>
					<a class="legal" href="logo.html">Logo Guidelines</a>
				</div>
			</div>
		</div>
	</body>
</html>