CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="LODE is an international communications & design agency for global brands." /> <meta name=“keywords” content=“design, animation, ci, corporate identity, brand identity, webgl, agency, wordpress, website, technology, ai, start-up, berlin, sydney, interactive, web development, storytelling, b2b, business to business, jules webster, malte pott” /> <title>HERE Widen Design System – LODE Design Agency</title> <meta name='robots' content='max-image-preview:large' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style> <link rel='dns-prefetch' href='//unpkg.com' /> <link rel='stylesheet' id='wp-block-library-css' href='https://likelode.com/wp-includes/css/dist/block-library/style.min.css?ver=6.7.1' type='text/css' media='all' /> <style id='acf-ltp-style-inline-css' type='text/css'> .ltp-block lottie-player{ display: inline-flex; max-width: 100%; height: 100%; } </style> <style id='acf-project-list-style-inline-css' type='text/css'> #blog-effects.project-list-block article .post-title{ font-family: "Syne"; font-size: 46px; line-height: 58px; } #blog-effects.project-list-block article .entry-meta-wrap{ line-height: 24px; } #blog-effects.project-list-block article .hover-reveal{ width: 300px; height: 600px; } #blog-effects.project-list-block article .article-content{ display: flex; align-items: center; justify-content: space-between; } #blog-effects.project-list-block article .article-wrap{ padding: 0; } #blog-effects.project-list-block article{ padding-bottom: 40px; } #blog-effects.project-list-block article:last-child{ padding-bottom: 0; } @media only screen and (max-width: 1466px){ #blog-effects.project-list-block article .hover-reveal { width: 250px; height: 333px; } } @media only screen and (max-width: 1024px){ #blog-effects.project-list-block article .hover-reveal { width: 200px; height: 266px; } } @media only screen and (max-width: 600px){ #blog-effects.project-list-block article .article-content{ flex-direction: column; align-items: flex-start; } #blog-effects.project-list-block article .entry-categories{ float: none; text-align: left; width: 100%; } } </style> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='contact-form-7-css' href='https://likelode.com/wp-content/cache/asset-cleanup/css/item/contact-form-7__includes__css__styles-css-vf448db67b8c5d28d5281e3989a761c25b2cb091f.css' type='text/css' media='all' /> <link rel='stylesheet' id='cnb-style-css' href='https://likelode.com/wp-content/cache/asset-cleanup/css/item/cookie-notice-banner__css__cnb-style-css-v9152a7ee770da68425acd453b9b201fa053ef43f.css' type='text/css' media='all' /> <link rel='stylesheet' id='elymor-content-css' href='https://likelode.com/wp-content/cache/asset-cleanup/css/item/elymor__css__content-css-v417a64c93a42a0ad5ea3dc7ca0b7db42e736eeb5.css' type='text/css' media='all' /> <link rel='stylesheet' id='elymor-showcase-css' href='https://likelode.com/wp-content/cache/asset-cleanup/css/item/elymor__css__showcase-css-va224ab138a2d264a03abb769adae6c80445e815e.css' type='text/css' media='all' /> <link rel='stylesheet' id='elymor-portfolio-css' href='https://likelode.com/wp-content/cache/asset-cleanup/css/item/elymor__css__portfolio-css-v5977b3804c7da136ecb4562a420ff0b8979e6525.css' type='text/css' media='all' /> <link rel='stylesheet' id='elymor-blog-css' href='https://likelode.com/wp-content/cache/asset-cleanup/css/item/elymor__css__blog-css-vd0f80be62df7bc99afb41872e1aea4c4708b11ff.css' type='text/css' media='all' /> <link rel='stylesheet' id='elymor-shortcodes-css' href='https://likelode.com/wp-content/cache/asset-cleanup/css/item/elymor__css__shortcodes-css-vc46f1e3f5b07909f5abd4df4dfaf33323197933c.css' type='text/css' media='all' /> <link rel='stylesheet' id='elymor-assets-css' href='https://likelode.com/wp-content/cache/asset-cleanup/css/item/elymor__css__assets-css-v0ba84b9a24630cd4f2bd50c9a0a69f02c6a46d5c.css' type='text/css' media='all' /> <link rel='stylesheet' id='elymor-style-wp-css' href='https://likelode.com/wp-content/cache/asset-cleanup/css/item/elymor__css__style-wp-css-vee7009f79cde1bf5cddf6a057dd17a1c781153b7.css' type='text/css' media='all' /> <link rel='stylesheet' id='elymor-page-builders-css' href='https://likelode.com/wp-content/cache/asset-cleanup/css/item/elymor__css__page-builders-css-v122e82ff8c2a96fcf4a289cb923e956905bba450.css' type='text/css' media='all' /> <link rel='stylesheet' id='parent-style-css' href='https://likelode.com/wp-content/cache/asset-cleanup/css/item/elymor__style-css-vfdd5a20dc09382fa9371aa610c4b40760a3a3bbf.css' type='text/css' media='all' /> <link rel='stylesheet' id='child-style-css' href='https://likelode.com/wp-content/cache/asset-cleanup/css/item/elymor-child__style-css-v151d4f08a67616129a9694c9b9352dbd958f36ef.css' type='text/css' media='all' /> <link rel='stylesheet' id='elymor-theme-css' href='https://likelode.com/wp-content/cache/asset-cleanup/css/item/elymor-child__style-css-v151d4f08a67616129a9694c9b9352dbd958f36ef.css' type='text/css' media='all' /> <link rel='stylesheet' id='fontawesome-css' href='https://likelode.com/wp-content/themes/elymor/css/all.min.css?ver=6.7.1' type='text/css' media='all' /> <script type="text/javascript" src="https://likelode.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://likelode.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script type="text/javascript" src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js?ver=6.7.1" id="ltp-js"></script> <link rel="canonical" href="https://likelode.com/portfolio/here-widen-design-system/" /> <script type='text/javascript'> /* <![CDATA[ */ var VPData = {"version":"3.3.9","pro":false,"__":{"couldnt_retrieve_vp":"Couldn't retrieve Visual Portfolio ID.","pswp_close":"Close (Esc)","pswp_share":"Share","pswp_fs":"Toggle fullscreen","pswp_zoom":"Zoom in\/out","pswp_prev":"Previous (arrow left)","pswp_next":"Next (arrow right)","pswp_share_fb":"Share on Facebook","pswp_share_tw":"Tweet","pswp_share_pin":"Pin it","pswp_download":"Download","fancybox_close":"Close","fancybox_next":"Next","fancybox_prev":"Previous","fancybox_error":"The requested content cannot be loaded. <br \/> Please try again later.","fancybox_play_start":"Start slideshow","fancybox_play_stop":"Pause slideshow","fancybox_full_screen":"Full screen","fancybox_thumbs":"Thumbnails","fancybox_download":"Download","fancybox_share":"Share","fancybox_zoom":"Zoom"},"settingsPopupGallery":{"enable_on_wordpress_images":false,"vendor":"fancybox","deep_linking":false,"deep_linking_url_to_share_images":false,"show_arrows":false,"show_counter":false,"show_zoom_button":false,"show_fullscreen_button":false,"show_share_button":false,"show_close_button":true,"show_thumbs":false,"show_download_button":false,"show_slideshow":false,"click_to_zoom":true,"restore_focus":true},"screenSizes":[320,576,768,992,1200]}; /* ]]> */ </script> <noscript> <style type="text/css"> .vp-portfolio__preloader-wrap{display:none}.vp-portfolio__filter-wrap,.vp-portfolio__items-wrap,.vp-portfolio__pagination-wrap,.vp-portfolio__sort-wrap{opacity:1;visibility:visible}.vp-portfolio__item .vp-portfolio__item-img noscript+img,.vp-portfolio__thumbnails-wrap{display:none} </style> </noscript> <style type="text/css"> /* If html does not have either class, do not show lazy loaded images. */ html:not(.vp-lazyload-enabled):not(.js) .vp-lazyload { display: none; } </style> <script> document.documentElement.classList.add( 'vp-lazyload-enabled' ); </script> <link rel="icon" href="https://likelode.com/wp-content/uploads/2023/02/cropped-fav-lode-1-32x32.png" sizes="32x32" /> <link rel="icon" href="https://likelode.com/wp-content/uploads/2023/02/cropped-fav-lode-1-192x192.png" sizes="192x192" /> <link rel="apple-touch-icon" href="https://likelode.com/wp-content/uploads/2023/02/cropped-fav-lode-1-180x180.png" /> <meta name="msapplication-TileImage" content="https://likelode.com/wp-content/uploads/2023/02/cropped-fav-lode-1-270x270.png" /> <style type="text/css" id="wp-custom-css"> /* Portfolio item title and description styling */ .wp-block-visual-portfolio .vp-portfolio__item-caption, .wp-block-visual-portfolio .vp-portfolio__item-meta-excerpt { color: #23262B !important; /* Dark grey text color for better readability */ margin: 0px; /* Margin around the title and description */ line-height: 1.3; /* Line height for better readability */ } /* Customize the filter buttons */ .wp-block-visual-portfolio .vp-filter__item { background-color: #23262B; /* Dark grey background for filter buttons */ color: #fff; /* White text color */ padding: 8px 16px; /* Padding for filter buttons */ margin: 0 8px 8px 0; /* Margin around filter buttons */ font-size: 1.3em; /* Increase text size by 30% */ font-family: 'Dahlia', serif; /* Set font family to Dahlia */ } /* Hover effect for inactive filter buttons */ .wp-block-visual-portfolio .vp-filter__item:hover { background-color: #D6DEFF !important; /* Dark blue background on hover */ } /* Active filter button styling */ .wp-block-visual-portfolio .vp-filter__item.vp-filter__item-active, .wp-block-visual-portfolio .vp-filter__item.vp-filter__item-active a { background-color: #7388FC !important; /* Dark blue background for active filter */ color: #23262B !important; /* White text color for active filter */ } /* Hide original filter menu and show dropdown filter for mobile devices */ @media (max-width: 767px) { .vp-portfolio__filter-wrap, .vp-filter { display: none !important; /* Hide the default filter buttons on mobile */ } .vp-filters-dropdown { display: block !important; /* Display the dropdown menu on mobile */ margin-bottom: 16px; background-color: #f5f5f5; /* Background color to match the page */ padding: 10px; /* Padding around the dropdown */ border-bottom: 1px solid #ccc; /* Optional border for better separation */ } .vp-filters-dropdown select { width: 100%; padding: 8px 16px; font-size: 1.3em; font-family: 'Dahlia', serif; background-color: #383A3F; color: #fff; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .vp-filters-dropdown select:focus { outline: none; } } .row_padding_bottom { padding-bottom: 4vw; } .row_padding_top { padding-top: 4vw; } @media (max-width: 767px) { .hidden-mobile { display: none; } } @media (max-width: 781px) { .flex:not(.is-not-stacked-on-mobile)>.wp-block-column { flex-basis:40%!important } .div-sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; } </style> </head> <body class="clapat_wp_portfolio-template-default single single-clapat_wp_portfolio postid-7402 wp-embed-responsive hidden hidden-ball hero-below-caption disable-preloader disable-ajaxload disable-cursor" data-primary-color="#ff4e38"> <main> <div class="cd-index cd-main-content"> <div id="page-content" class="dark-content magic-cursor-disabled " data-bgcolor="#e5ecf4" > <header class="invert-header classic-menu" data-menucolor="#23262b"> <div id="header-container"> <div id="logo" class="hide-ball"> <a class="ajax-link" data-type="page-transition" href="https://likelode.com"> <img class="black-logo" src="https://likelode.com/wp-content/uploads/2023/01/220714-LODE-Logo-black.svg" alt="Logo Black"> <img class="white-logo" src="https://likelode.com/wp-content/uploads/2023/01/220714-LODE-Logo-white.png" alt="Logo White"> </a> </div> <nav class="menu-primary-menu-container"><div class="nav-height"><div class="outer"><div class="inner"><ul id="menu-primary-menu" data-breakpoint="1025" class="flexnav menu"><li id="menu-item-7440" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-7440 link menu-timeline"><a href="https://likelode.com/" data-type="page-transition" class="ajax-link"><div class="before-span"><span data-hover="Home">Home</span></div></a></li> <li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-10 link menu-timeline"><a href="https://likelode.com/work/"><div class="before-span"><span data-hover="Work">Work</span></div></a> <ul class="sub-menu"> <li id="menu-item-7783" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7783 link"><a href="https://likelode.com/work/" data-type="page-transition" class="ajax-link">Featured Work</a></li> <li id="menu-item-7784" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7784 link"><a href="https://likelode.com/work/project-snippets/" data-type="page-transition" class="ajax-link">Project Snippets</a></li> </ul> </li> <li id="menu-item-6858" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-6858 link menu-timeline"><a href="https://likelode.com/services/"><div class="before-span"><span data-hover="Services">Services</span></div></a> <ul class="sub-menu"> <li id="menu-item-7782" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7782 link"><a href="https://likelode.com/services/" data-type="page-transition" class="ajax-link">Services Overview</a></li> <li id="menu-item-7781" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7781 link"><a href="https://likelode.com/services/capabilities/" data-type="page-transition" class="ajax-link">Detailed Capabilities</a></li> </ul> </li> <li id="menu-item-6084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6084 link menu-timeline"><a href="https://likelode.com/contact/" data-type="page-transition" class="ajax-link"><div class="before-span"><span data-hover="Contact">Contact</span></div></a></li> </ul></div></div></div></nav> <div class="button-wrap right menu burger-lines"> <div class="icon-wrap parallax-wrap"> <div class="button-icon parallax-element"> <div id="burger-wrapper"> <div id="menu-burger"> <span></span> <span></span> <span></span> </div> </div> </div> </div> <div class="button-text sticky right"><span data-hover=""></span></div> </div> </div> </header> <div id="content-scroll"> <div id="main"> <div id="hero" class="has-image autoscroll"> <div id="hero-styles"> <div id="hero-caption" class="content-max-width parallax-scroll-caption inline-title"> <div class="inner"> <div class="hero-title"><span><span>HERE Widen</span></span></div> <div class="hero-subtitle"><span><span>Design System</span></span></div> </div> </div> <div id="hero-footer"> <div class="hero-footer-left"> <div class="button-wrap left scroll-down"> <div class="icon-wrap parallax-wrap"> <div class="button-icon parallax-element"> <i class="fa-solid fa-angle-down"></i> </div> </div> <div class="button-text sticky left"><span data-hover="Scroll or drag to navigate">Scroll or drag to navigate</span></div> </div> </div> </div> </div> </div> <div id="hero-image-wrapper"> <div id="hero-background-layer" class="parallax-scroll-image"> <div id="hero-bg-image" style="background-image:url(https://likelode.com/wp-content/uploads/2024/04/HERE-Widen-thumbnail.png)"> </div> </div> </div> <div id="main-content"> <div id="main-page-content"> <div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-clapat-gutenberg-container content-row light-section normal" data-bgcolor="transparent" style="text-align:left"> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <h3>Strategy, Design, Content</h3> <p>HERE asked us to support in setting up a brand portal for a design system. A place where all assets live that are necessary to produce HERE communication material. The design of the portal itself was supposed to reflect the lively brand that HERE stands for. Easy to use and built according to the brand principles.</p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow"> <h6 class="wp-block-heading has-text-align-left" style="font-style:normal;font-weight:100;text-decoration:underline">Strategy<br>Design</h6> </div> </div> </div> <div class="wp-block-clapat-gutenberg-container content-row light-section normal row_padding_top" data-bgcolor="transparent" style="text-align:left"> <h3 class="wp-block-heading">The Brand Portal</h3> <div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="666" height="1024" src="https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-666x1024.jpg" alt="" class="wp-image-7409" srcset="https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-666x1024.jpg 666w, https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-195x300.jpg 195w, https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-768x1181.jpg 768w, https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-999x1536.jpg 999w, https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-1332x2048.jpg 1332w, https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-500x769.jpg 500w, https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-800x1230.jpg 800w, https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-1280x1968.jpg 1280w, https://likelode.com/wp-content/uploads/2024/04/widen-landingpage.jpg 1526w" sizes="(max-width: 666px) 100vw, 666px" /></figure> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <figure class="wp-block-image size-large"><img decoding="async" width="800" height="1024" src="https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-2-800x1024.jpg" alt="" class="wp-image-7408" srcset="https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-2-800x1024.jpg 800w, https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-2-234x300.jpg 234w, https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-2-768x983.jpg 768w, https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-2-1200x1536.jpg 1200w, https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-2-500x640.jpg 500w, https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-2-1280x1638.jpg 1280w, https://likelode.com/wp-content/uploads/2024/04/widen-landingpage-2.jpg 1526w" sizes="(max-width: 800px) 100vw, 800px" /></figure> </div> </div> </div> <div class="wp-block-clapat-gutenberg-container content-row light-section full row_padding_top row_padding_bottom has-animation" data-bgcolor="transparent" style="text-align:left"> <hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#dfded6;color:#dfded6"/> </div> <div class="wp-block-clapat-gutenberg-container content-row light-section normal" data-bgcolor="transparent" style="text-align:left"> <h3 class="wp-block-heading">Layout</h3> <div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div> <figure class="wp-block-video"><video autoplay loop muted src="https://likelode.com/wp-content/uploads/2024/04/HERE-Widen-layout-portfolio-LODE.mp4" playsinline></video></figure> </div> <div class="wp-block-clapat-gutenberg-container content-row light-section full row_padding_top row_padding_bottom has-animation" data-bgcolor="transparent" style="text-align:left"> <hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#dfded6;color:#dfded6"/> </div> <div class="wp-block-clapat-gutenberg-container content-row light-section normal" data-bgcolor="transparent" style="text-align:left"> <h3 class="wp-block-heading">Iconography</h3> <div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div> <figure class="wp-block-video"><video autoplay loop muted src="https://likelode.com/wp-content/uploads/2024/04/HERE-Widen-Iconography-portfolio-LODE.mp4" playsinline></video></figure> </div> <div class="wp-block-clapat-gutenberg-container content-row light-section full row_padding_top row_padding_bottom has-animation" data-bgcolor="transparent" style="text-align:left"> <hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#dfded6;color:#dfded6"/> </div> <p></p> </div> <div id="project-nav" class=" thumb-no-ajax"><div class="next-project-wrap"><div class="next-project-caption content-max-width"><a class="all-works link ajax-link" data-type="page-transition" href="https://likelode.com/work/">All Featured Work</a><div class="next-caption-wrapper"><div class="caption-wrapper"><a class="next-ajax-link-project" data-type="page-transition" href="https://likelode.com/portfolio/here-maps/" data-color="#fc4d3a" data-firstline="Next" data-secondline="Project"></a><div class="next-caption"><div class="next-hero-title">HERE Maps</div><div class="next-hero-subtitle"><span>Animation</span></div></div></div></div></div></div></div> </div> </div> <footer class="hidden"> <div id="footer-container"> <div class="footer-middle"><div class="copyright">2024© <a class="link" target="_self" href="https://www.likelode.com/privacy-policy/">Privacy Policy</a> | <a class="link" target="_self" href="https://www.likelode.com/imprint/">Imprint</a></div></div> </div> </footer> </div> <div id="app"></div> <div class="next-project-image-wrapper"> <div class="next-project-image"> <div class="next-project-image-bg" style="background-image:url(https://likelode.com/wp-content/uploads/2023/02/maps-animation-hero.jpg)"></div> </div> </div> </div> </div> </main> <div class="cd-cover-layer"></div> <div id="magic-cursor"> <div id="ball"> <div id="ball-drag-x"></div> <div id="ball-drag-y"></div> <div id="ball-loader"></div> </div> </div> <div id="clone-image"> <div class="hero-translate"></div> </div> <div id="rotate-device"></div> <div id="cookie-notice" class="cookie-notice" style="display: none;"> <p>We use only essential cookies on our website. By using this website, you agree to our terms. <a href="/privacy-policy">Learn more</a>.</p> <button id="cookie-accept" class="cookie-accept">Accept</button> </div><style id='core-block-supports-inline-css' type='text/css'> .wp-container-core-columns-is-layout-1{flex-wrap:nowrap;}.wp-container-core-columns-is-layout-2{flex-wrap:nowrap;} </style> <script type="text/javascript" src="https://likelode.com/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script> <script type="text/javascript" src="https://likelode.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); /* ]]> */ </script> <script type="text/javascript" src="https://likelode.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=5.9.8" id="swv-js"></script> <script type="text/javascript" id="contact-form-7-js-extra"> /* <![CDATA[ */ var wpcf7 = {"api":{"root":"https:\/\/likelode.com\/wp-json\/","namespace":"contact-form-7\/v1"}}; /* ]]> */ </script> <script type="text/javascript" src="https://likelode.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.9.8" id="contact-form-7-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/cache/asset-cleanup/js/item/cookie-notice-banner__js__cnb-script-js-vcf0e00b1457931597de351a7921e7276379c3ffb.js" id="cnb-script-js"></script> <script type="text/javascript" src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js?ver=6.7.1" id="ltp-interactivity-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/themes/elymor/core/js/jquery.flexnav.min.js?ver=6.7.1" id="jquery-flexnav-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/themes/elymor/core/js/jquery.waitforimages.js?ver=6.7.1" id="jquery-waitforimages-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/themes/elymor/core/js/jquery.magnific-popup.min.js?ver=6.7.1" id="jquery-magnific-popup-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/themes/elymor/core/js/jquery.justifiedGallery.js?ver=6.7.1" id="jquery-justifiedgallery-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/themes/elymor/core/js/packery-mode.pkgd.js?ver=6.7.1" id="packery-mode-pkd-js"></script> <script type="text/javascript" src="https://likelode.com/wp-includes/js/imagesloaded.min.js?ver=5.0.0" id="imagesloaded-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/themes/elymor/core/js/scrolltoplugin.min.js?ver=6.7.1" id="scroll-to-plugin-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/themes/elymor/core/js/gsap.min.js?ver=6.7.1" id="gsap-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/themes/elymor/core/js/cssruleplugin.min.js?ver=6.7.1" id="css-rule-plugin-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/themes/elymor/core/js/easepack.min.js?ver=6.7.1" id="ease-pack-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/themes/elymor/core/js/scrollmagic.min.js?ver=6.7.1" id="scroll-magic-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/themes/elymor/core/js/animation.gsap.min.js?ver=6.7.1" id="animation-gsap-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/themes/elymor/core/js/draggable.min.js?ver=6.7.1" id="draggable-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/themes/elymor/core/js/scrolltrigger.min.js?ver=6.7.1" id="scroll-trigger-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/plugins/visual-portfolio/assets/vendor/swiper/swiper-bundle.min.js?ver=8.4.7" id="swiper-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/themes/elymor/core/js/jssocials.min.js?ver=6.7.1" id="js-socials-js"></script> <script type="text/javascript" id="elymor-common-js-extra"> /* <![CDATA[ */ var ClapatThemeOptions = {"share_social_network_list":""}; var ClapatMapOptions = {"map_marker_image":"","map_address":"","map_zoom":"0","marker_title":"","marker_text":"","map_type":"satellite","map_api_key":""}; /* ]]> */ </script> <script type="text/javascript" src="https://likelode.com/wp-content/cache/asset-cleanup/js/item/elymor__core__js__common-js-v0f808d230c2b961c42473c02fee82f3c9140970a.js" id="elymor-common-js"></script> <script type="text/javascript" id="elymor-scripts-js-extra"> /* <![CDATA[ */ var ClapatElymorThemeOptions = {"enable_preloader":"0"}; /* ]]> */ </script> <script type="text/javascript" src="https://likelode.com/wp-content/cache/asset-cleanup/js/item/elymor__js__scripts-js-v8090b0089c54447b3f42970853bf832acf74239e.js" id="elymor-scripts-js"></script> <script type="text/javascript" src="https://likelode.com/wp-content/cache/asset-cleanup/js/item/elymor-child__lode-js-vbb8007253afd15f33583a056f24d15e41fca6c73.js" id="lode-js"></script> <script> document.addEventListener('DOMContentLoaded', function () { if (window.innerWidth <= 767) { // Create the dropdown element const dropdown = document.createElement('div'); dropdown.className = 'vp-filters-dropdown'; const select = document.createElement('select'); dropdown.appendChild(select); // Get the existing filter buttons const filters = document.querySelectorAll('.wp-block-visual-portfolio .vp-filter__item a'); filters.forEach(filter => { const option = document.createElement('option'); option.value = filter.getAttribute('data-vp-filter'); option.textContent = filter.textContent; select.appendChild(option); }); // Insert the dropdown before the portfolio items const portfolio = document.querySelector('.wp-block-visual-portfolio'); portfolio.insertBefore(dropdown, portfolio.firstChild); // Add change event listener to the dropdown select.addEventListener('change', function () { const selectedFilter = select.value; filters.forEach(filter => { if (filter.getAttribute('data-vp-filter') === selectedFilter) { filter.click(); } }); }); } }); </script> </body> </html>