<!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">© 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>