{"id":52,"date":"2020-08-07T08:05:26","date_gmt":"2020-08-07T08:05:26","guid":{"rendered":"https:\/\/www.embl.org\/guidelines\/design\/?page_id=52"},"modified":"2024-01-22T15:52:47","modified_gmt":"2024-01-22T15:52:47","slug":"design-guidelines","status":"publish","type":"page","link":"https:\/\/www.embl.org\/guidelines\/design\/","title":{"rendered":"Design Guidelines"},"content":{"rendered":"<style>\n    <\/style>\n\n<section id=\"wp-block-1\">\n  <div class=\"vf-card-container vf-card-container__col-3 | vf-u-fullbleed  \n  | vf-u-background-color-ui--grey--light \">\n        <div class=\"vf-card-container__inner\">\n            <div class=\"vf-section-header | vf-u-margin__bottom--600\">\n        <h2 class=\"vf-section-header__heading\" >\n        Design Guidelines    <\/h2>\n              <\/div>\n      \n\n<article class=\"vf-card vf-card--brand vf-card--bordered vf-u-margin__bottom--800\" >\n  <div class=\"vf-card__content | vf-stack vf-stack--400\">\n      <h3 class=\"vf-card__heading\">\n              <a class=\"vf-card__link\" href=\"https:\/\/www.embl.org\/guidelines\/design\/design-guidelines\/logo\/\">\n      EMBL Logo       <svg aria-hidden=\"true\" class=\"vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end\" width=\"1em\" height=\"1em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <path d=\"M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z\" fill=\"currentColor\" fill-rule=\"nonzero\"><\/path>\n       <\/svg>\n        <\/a>\n          <\/h3>\n                <p class=\"vf-card__text\">See how to use the logo correctly and download it here<\/p>\n      <\/div>\n<\/article>\n\n\n\n\n<article class=\"vf-card vf-card--brand vf-card--bordered vf-u-margin__bottom--800\" >\n  <div class=\"vf-card__content | vf-stack vf-stack--400\">\n      <h3 class=\"vf-card__heading\">\n              <a class=\"vf-card__link\" href=\"https:\/\/www.embl.org\/guidelines\/design\/design-guidelines\/typeface\/\">\n      EMBL Typeface       <svg aria-hidden=\"true\" class=\"vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end\" width=\"1em\" height=\"1em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <path d=\"M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z\" fill=\"currentColor\" fill-rule=\"nonzero\"><\/path>\n       <\/svg>\n        <\/a>\n          <\/h3>\n                <p class=\"vf-card__text\">Download our corporate typeface and review our guidelines<\/p>\n      <\/div>\n<\/article>\n\n\n\n\n<article class=\"vf-card vf-card--brand vf-card--bordered vf-u-margin__bottom--800\" >\n  <div class=\"vf-card__content | vf-stack vf-stack--400\">\n      <h3 class=\"vf-card__heading\">\n              <a class=\"vf-card__link\" href=\"https:\/\/www.embl.org\/guidelines\/design\/design-guidelines\/colours\/\">\n      EMBL Colours       <svg aria-hidden=\"true\" class=\"vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end\" width=\"1em\" height=\"1em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <path d=\"M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z\" fill=\"currentColor\" fill-rule=\"nonzero\"><\/path>\n       <\/svg>\n        <\/a>\n          <\/h3>\n                <p class=\"vf-card__text\">View the EMBL colours and understand our colour theory<\/p>\n      <\/div>\n<\/article>\n\n\n\n\n<article class=\"vf-card vf-card--brand vf-card--bordered vf-u-margin__bottom--800\" >\n  <div class=\"vf-card__content | vf-stack vf-stack--400\">\n      <h3 class=\"vf-card__heading\">\n              <a class=\"vf-card__link\" href=\"https:\/\/www.embl.org\/guidelines\/design\/design-guidelines\/graphical-elements\/\">\n      Graphical Elements       <svg aria-hidden=\"true\" class=\"vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end\" width=\"1em\" height=\"1em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <path d=\"M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z\" fill=\"currentColor\" fill-rule=\"nonzero\"><\/path>\n       <\/svg>\n        <\/a>\n          <\/h3>\n                <p class=\"vf-card__text\">See our Graphical elements and explore their use<\/p>\n      <\/div>\n<\/article>\n\n\n\n\n<article class=\"vf-card vf-card--brand vf-card--bordered vf-u-margin__bottom--800\" >\n  <div class=\"vf-card__content | vf-stack vf-stack--400\">\n      <h3 class=\"vf-card__heading\">\n              <a class=\"vf-card__link\" href=\"https:\/\/www.embl.org\/guidelines\/design\/design-guidelines\/design-principles\/\">\n      Design Principles       <svg aria-hidden=\"true\" class=\"vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end\" width=\"1em\" height=\"1em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <path d=\"M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z\" fill=\"currentColor\" fill-rule=\"nonzero\"><\/path>\n       <\/svg>\n        <\/a>\n          <\/h3>\n                <p class=\"vf-card__text\">More in-depth information on EMBL&#8217;s design systems<\/p>\n      <\/div>\n<\/article>\n\n\n\n\n<article class=\"vf-card vf-card--brand vf-card--bordered vf-u-margin__bottom--800\" >\n  <div class=\"vf-card__content | vf-stack vf-stack--400\">\n      <h3 class=\"vf-card__heading\">\n              <a class=\"vf-card__link\" href=\"https:\/\/stable.visual-framework.dev\/wordpress\/\">\n      WordPress       <svg aria-hidden=\"true\" class=\"vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end\" width=\"1em\" height=\"1em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <path d=\"M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z\" fill=\"currentColor\" fill-rule=\"nonzero\"><\/path>\n       <\/svg>\n        <\/a>\n          <\/h3>\n                <p class=\"vf-card__text\">For information on creating micro-sites and group pages in WordPress.<\/p>\n      <\/div>\n<\/article>\n\n\n\n          <\/div>\n      <\/div>\n<\/section>\n\n\n<hr class=\"vf-divider\">\n\n\n\n<div class=\"embl-grid embl-grid--has-centered-content\"><div class=\"\"><!--[vf\/content]-->\n<div class=\"vf-content\">\n<div class=\"vf-section-header | vf-u-margin__bottom--400\">\n  <h2 class=\"vf-section-header__heading\" \n    >\n  Overview  <\/h2>\n  <\/div>\n\n\n<\/div>\n<\/div>\n\n\n<div class=\"\"><!--[vf\/content]-->\n<div class=\"vf-content\">\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\"><strong>What is corporate design?<\/strong><\/h3>\n\n\n\n<p>It is the manner in which an organisation presents itself visually to the public.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What is its main purpose?<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>To facilitate identification of the organisation<\/li>\n\n\n\n<li>To differentiate it from other institutes<\/li>\n\n\n\n<li>To define a coherent design system across all channels<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>There are four core elements to the EMBL design as it is expressed visually:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>EMBL logo<\/li>\n\n\n\n<li>Typeface<\/li>\n\n\n\n<li>Colours<\/li>\n\n\n\n<li>Graphical elements<\/li>\n<\/ol>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">In addition we offer guidelines on:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Basic design principles to help you apply the core elements in an informed and effective way<\/li>\n\n\n\n<li>Web guidelines for the development of micro-sites and group pages<\/li>\n<\/ul>\n\n<\/div>\n<\/div>\n\n\n<div class=\"\"><!--[vf\/content]-->\n<div class=\"vf-content\">\n\n<div class=\"vf-embed vf-embed--16x9 | vf-u-margin__bottom--400\"\n>\n<iframe src=\"https:\/\/www.youtube.com\/embed\/ti1O_fwx_6U?si=Y8q5pPPzLs0rP5vx\" frameborder=\"0\" controls allowfullscreen><\/iframe><\/div>\n\n  \n<figcaption class=\"vf-figure__caption vf-u-margin__top--200\">About how EMBL has approached and built a coherent visual language for Europe\u2019s life sciences laboratory<\/figcaption>\n\n\n\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"vf-divider\">\n\n\n\n<div class=\"embl-grid embl-grid--has-centered-content\"><div class=\"\"><!--[vf\/content]-->\n<div class=\"vf-content\">\n<div class=\"vf-section-header | vf-u-margin__bottom--400\">\n  <h2 class=\"vf-section-header__heading\" \n    >\n  Resources  <\/h2>\n  <\/div>\n\n\n<\/div>\n<\/div>\n\n\n<div class=\"\"><!--[vf\/content]-->\n<div class=\"vf-content\">\n\n<p>The Creative team also maintains a library of templates and resources <a rel=\"noreferrer noopener\" href=\"https:\/\/www.embl.org\/internal-information\/communications\/design-resources\/\" target=\"_blank\">on the intranet<\/a> for multiple communication needs at EMBL.<\/p>\n\n<\/div>\n<\/div>\n\n\n<div class=\"\"><!--[vf\/content]-->\n<div class=\"vf-content\">\n\n<div class=\"vf-embed vf-embed--16x9 | vf-u-margin__bottom--400\"\n>\n<iframe src=\"https:\/\/www.youtube.com\/embed\/7PHUjVBxAsY?si=j8Ue2hwLV_Nii6TY\" frameborder=\"0\" controls allowfullscreen><\/iframe><\/div>\n\n  \n<figcaption class=\"vf-figure__caption vf-u-margin__top--200\">Creative Team showreel.<\/figcaption>\n\n\n\n\n\n<p><\/p>\n\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":10,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"embl_taxonomy":[],"class_list":["post-52","page","type-page","status-publish","hentry"],"acf":[],"embl_taxonomy_terms":[],"_links":{"self":[{"href":"https:\/\/www.embl.org\/guidelines\/design\/wp-json\/wp\/v2\/pages\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.embl.org\/guidelines\/design\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.embl.org\/guidelines\/design\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.embl.org\/guidelines\/design\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.embl.org\/guidelines\/design\/wp-json\/wp\/v2\/comments?post=52"}],"version-history":[{"count":61,"href":"https:\/\/www.embl.org\/guidelines\/design\/wp-json\/wp\/v2\/pages\/52\/revisions"}],"predecessor-version":[{"id":1187,"href":"https:\/\/www.embl.org\/guidelines\/design\/wp-json\/wp\/v2\/pages\/52\/revisions\/1187"}],"wp:attachment":[{"href":"https:\/\/www.embl.org\/guidelines\/design\/wp-json\/wp\/v2\/media?parent=52"}],"wp:term":[{"taxonomy":"embl_taxonomy","embeddable":true,"href":"https:\/\/www.embl.org\/guidelines\/design\/wp-json\/wp\/v2\/embl_taxonomy?post=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}