CINXE.COM
Websites | Yale Identity
<!DOCTYPE html> <html lang="en" dir="ltr" prefix="og: https://ogp.me/ns#"> <head> <meta charset="utf-8" /> <link rel="canonical" href="https://yaleidentity.yale.edu/guidelines/websites" /> <meta property="og:site_name" content="Yale Identity" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://yaleidentity.yale.edu/guidelines/websites" /> <meta property="og:title" content="Websites" /> <meta name="Generator" content="Drupal 10 (https://www.drupal.org)" /> <meta name="MobileOptimized" content="width" /> <meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="apple-touch-icon" href="/profiles/custom/yalesites_profile/modules/custom/ys_core/images/favicons/apple-touch-icon.png" /> <link sizes="32x32" rel="icon" type="image/png" href="/profiles/custom/yalesites_profile/modules/custom/ys_core/images/favicons/favicon-32x32.png" /> <link sizes="16x16" rel="icon" type="image/png" href="/profiles/custom/yalesites_profile/modules/custom/ys_core/images/favicons/favicon-16x16.png" /> <link rel="shortcut icon" href="/profiles/custom/yalesites_profile/modules/custom/ys_core/images/favicons/favicon.ico" /> <style>:root { --color-theme-action: var(--color-); --color-theme-accent: var(--color-); --color-theme-pull-quote-accent: var(--color-); --color-theme-divider: var(--color-); --thickness-theme-divider: var(--thickness-divider-); }</style> <title>Websites | Yale Identity</title> <link rel="stylesheet" media="all" href="/sites/default/files/css/css_24OtLNmiUuGM9_IIVJwsSe87PZyP4V9fZ95bsuiLCQ4.css?delta=0&language=en&theme=atomic&include=eJxti1EKwzAMQy-U4SMFJ3VLwIlG7Kz49huU9mt_T3qShbl0KmyS2NFbpUNRWO-kHFj-KqvpJvNudwznUwxd0rXIW7OKj8wgDKnQFJYvZfRg9hP5J1cfyeONY7Y96KH_n8JjyPwCgV9EYw" /> <link rel="stylesheet" media="all" href="https://yale-webfonts.yalespace.org/fonts.min.css" /> <link rel="stylesheet" media="all" href="/sites/default/files/css/css_zYi5RraSDzQpp-q4YX_clwtBQXkP7_fT2CqqLWaOkns.css?delta=2&language=en&theme=atomic&include=eJxti1EKwzAMQy-U4SMFJ3VLwIlG7Kz49huU9mt_T3qShbl0KmyS2NFbpUNRWO-kHFj-KqvpJvNudwznUwxd0rXIW7OKj8wgDKnQFJYvZfRg9hP5J1cfyeONY7Y96KH_n8JjyPwCgV9EYw" /> </head> <body class="ys-content-type-page"> <a href=#main-content class="link-skip__link visually-hidden focusable ys-content-type-page"> Skip to main content</a> <div class="dialog-off-canvas-main-canvas" data-off-canvas-main-canvas> <div class="layout-container" data-global-theme="one" > <header data-main-menu-state="loaded" data-component-width="site" data-site-header-nav-position="left" data-site-header-border-thickness="8" data-header-theme="one" data-header-accent="two" class="site-header"> <div class="site-header__inner"> <div class="site-header__mobile-header"> <a data-link-style="underline" data-link-type="internal" class="site-header__site-branding site-header__site-branding--mobile" href="/"> Yale Identity</a> <button aria-expanded="false" class="menu-toggle"> <span class="menu-toggle__text">Menu</span> <span class="menu-toggle__bars"> <span class="menu-toggle__bar"></span> <span class="menu-toggle__bar"></span> <span class="menu-toggle__bar"></span> </span> </button> </div> <div class="site-header__menu-wrapper"> <div class="site-header__menu-secondary site-header__menu-secondary--desktop"> <div class="site-header__secondary"> <a data-link-style="underline" data-link-type="internal" class="site-header__yale-branding" href="https://www.yale.edu"> Yale University</a> <div class="site-header__utility-nav"> <div class="utility-bar"> <div class="utility-nav__search"> <form action="/search" class="form--inline" method="get" id="header-search-form-desktop" accept-charset="UTF-8"> <div class="form-item form-item-keywords"> <label for="edit-keywords--header-search-form-desktop"> <svg class="utility-nav__icon utility-nav__icon--search" aria-hidden="true" role="img" > <use xlink:href="/themes/contrib/atomic/node_modules/@yalesites-org/component-library-twig/dist/icons.svg#magnifying-glass"></use> </svg> <span class="visually-hidden">Search</span> </label> <input placeholder="Search this site" type="text" id="edit-keywords--header-search-form-desktop" name="keywords" value="" size="30" maxlength="128" class="form-text"> </div> <div class="form-actions form-wrapper" id="edit-actions--header-search-form-desktop"> <input class="visually-hidden button form-submit" type="submit" id="edit-submit-search--header-search-form-desktop" value="Search"> </div> </form> </div> </div> </div> </div> </div> <div class="site-header__primary"> <a data-link-style="underline" data-link-type="internal" class="site-header__site-branding site-header__site-branding--primary" href="/"> Yale Identity</a> <div class="site-header__primary-nav"> <nav class="primary-nav menu-with-toggle" aria-label="primary" data-menu-variation="mega"> <ul class="primary-nav__menu primary-nav__menu--level-0"> <li class="primary-nav__item primary-nav__item--level-0"> <a data-link-style="underline" data-link-type="internal" class="primary-nav__link primary-nav__link--level-0" href="/core-identity-elements"> Core Identity Elements</a> </li> <li class="primary-nav__item primary-nav__item--level-0"> <a data-link-style="underline" data-link-type="internal" class="primary-nav__link primary-nav__link--level-0" href="/guidelines"> Guidelines</a> </li> <li class="primary-nav__item primary-nav__item--level-0"> <a data-link-style="underline" data-link-type="internal" class="primary-nav__link primary-nav__link--level-0" href="/assets-and-templates"> Assets and Templates</a> </li> <li class="primary-nav__item primary-nav__item--level-0"> <a data-link-style="underline" data-link-type="internal" class="primary-nav__link primary-nav__link--level-0" href="/resources-and-support"> Resources and Support</a> </li> </ul> </nav> </div> </div> <div class="site-header__menu-secondary site-header__menu-secondary--mobile"> <div class="site-header__secondary"> <a data-link-style="underline" data-link-type="internal" class="site-header__yale-branding" href="https://www.yale.edu"> Yale University</a> <div class="site-header__utility-nav"> <div class="utility-bar"> <div class="utility-nav__search"> <form action="/search" class="form--inline" method="get" id="header-search-form-mobile" accept-charset="UTF-8"> <div class="form-item form-item-keywords"> <label for="edit-keywords--header-search-form-mobile"> <svg class="utility-nav__icon utility-nav__icon--search" aria-hidden="true" role="img" > <use xlink:href="/themes/contrib/atomic/node_modules/@yalesites-org/component-library-twig/dist/icons.svg#magnifying-glass"></use> </svg> <span class="visually-hidden">Search</span> </label> <input placeholder="Search this site" type="text" id="edit-keywords--header-search-form-mobile" name="keywords" value="" size="30" maxlength="128" class="form-text"> </div> <div class="form-actions form-wrapper" id="edit-actions--header-search-form-mobile"> <input class="visually-hidden button form-submit" type="submit" id="edit-submit-search--header-search-form-mobile" value="Search"> </div> </form> </div> </div> </div> </div> </div> </div> </div> </header> <div class="site-header__overlay"></div> <div> <div data-drupal-messages-fallback class="hidden"></div> </div> <div class="main" id="main-content"> <main class="main-content"> <div class="layout layout--banner"> <div > </div> </div> <div class="layout layout--onecol"> <div > <div data-breadcrumbs-overflow="hidden" data-component-width="site" class="breadcrumbs__wrapper breadcrumbs__wrapper--collapsible"> <button aria-expanded="false" class="breadcrumbs__button"> <span class="visually-hidden">Show all breadcrumbs</span> <svg class="breadcrumbs__icon" aria-hidden="true" role="img" > <use xlink:href="/themes/contrib/atomic/node_modules/@yalesites-org/component-library-twig/dist/icons.svg#angle-down"></use> </svg> <span aria-hidden="true">Guidelines</span> </button> <div class="breadcrumbs__inner" data-scroll-indicator="none" id="breadcrumbs-inner"> <nav class="breadcrumbs breadcrumbs--collapsible" aria-label="Breadcrumb" data-menu-variation="basic"> <ol class="breadcrumbs__menu breadcrumbs__menu--level-0"> <li class="breadcrumbs__item breadcrumbs__item--level-0"> <a data-link-style="underline" data-link-type="internal" class="breadcrumbs__link breadcrumbs__link--level-0" href="/"> Home</a> </li> <li class="breadcrumbs__item breadcrumbs__item--level-0"> <a data-link-style="underline" data-link-type="internal" class="breadcrumbs__link breadcrumbs__link--level-0" href="/guidelines"> Guidelines</a> </li> <li class="breadcrumbs__item breadcrumbs__item--level-0 breadcrumbs__item--active"> <a aria-current="page" data-link-style="underline" data-link-type="internal" class="breadcrumbs__link breadcrumbs__link--level-0 breadcrumbs__link--active"> Websites</a> </li> </ol> </nav> <button aria-hidden="true" tabindex="-1" class="breadcrumbs__control breadcrumbs__control--left"> <svg class="breadcrumbs__icon breadcrumbs__icon--left" aria-hidden="true" role="img" > <use xlink:href="/themes/contrib/atomic/node_modules/@yalesites-org/component-library-twig/dist/icons.svg#angle-down"></use> </svg> </button> <button aria-hidden="true" tabindex="-1" class="breadcrumbs__control breadcrumbs__control--right"> <svg class="breadcrumbs__icon breadcrumbs__icon--right" aria-hidden="true" role="img" > <use xlink:href="/themes/contrib/atomic/node_modules/@yalesites-org/component-library-twig/dist/icons.svg#angle-down"></use> </svg> </button> </div> </div> <div> <div data-component-width="site" class="page-title visible"> <div class="page-title__inner"> <div class="page-title__top"> <div class="page-title__title-wrap"> <h1 class="page-title__heading"> Websites</h1> </div> </div> </div> </div> </div> </div> </div> <div class="layout layout--onecol"> <div class="layout__region layout__region--content"> <div data-component-width="site" data-component-alignment="left" data-component-variation="default" class="text-field"> <div class="text-field__inner"> <div class="text"> <p>Yale has developed a set of web guidelines that permits considerable design flexibility while preserving key interface and institutional branding elements that complement Yale’s visual identity. These user-oriented interface elements create a minimal but consistent set of conventions across all university websites.</p> </div> </div> </div> <div data-component-width="site" class="divider__wrapper"> <div data-divider-position="left" class="divider__inner"> <div data-animate-item="enabled" class="divider" data-divider-width="100"></div> </div> </div> <div data-component-width="site" data-component-alignment="left" data-component-variation="default" class="text-field"> <div class="text-field__inner"> <div class="text"> <h2>Logos</h2> <p>The Yale logo is “Yale” set in a modified version of the Yale typeface, and standard practice includes it in the footer of all web pages. The signature “Yale University” is normally included in the top-left corner of the header region on web pages. The site title is usually below the signature set in the YaleNew Roman typeface.</p> </div> </div> </div> <div data-component-width="site" data-wrapped-image-style="floated" data-wrapped-image-alignment="right" class="wrapped-image"> <div class="wrapped-image__inner"> <div class="wrapped-image__content-wrapper"> <div class="wrapped-image__image"> <div> <img loading="eager" srcset="/sites/default/files/styles/max_width_320/public/2023-10/01-header-example.png?itok=xfiVWgAi 320w, /sites/default/files/styles/max_width_480/public/2023-10/01-header-example.png?itok=Ud1tswpE 480w, /sites/default/files/styles/max_width_640/public/2023-10/01-header-example.png?itok=GNOKMB7Y 640w, /sites/default/files/styles/max_width_800/public/2023-10/01-header-example.png?itok=w-mSuil- 800w, /sites/default/files/styles/max_width_896/public/2023-10/01-header-example.png?itok=wMJbxDoG 896w, /sites/default/files/styles/max_width_960/public/2023-10/01-header-example.png?itok=9FtbJWjz 960w, /sites/default/files/styles/max_width_1120/public/2023-10/01-header-example.png?itok=KwACVwgx 1120w, /sites/default/files/styles/max_width_1280/public/2023-10/01-header-example.png?itok=Wdax_mw3 1280w, /sites/default/files/styles/max_width_1440/public/2023-10/01-header-example.png?itok=pWq2YUbJ 1440w, /sites/default/files/styles/max_width_1600/public/2023-10/01-header-example.png?itok=HY9bxS56 1600w, /sites/default/files/styles/max_width_1760/public/2023-10/01-header-example.png?itok=L04AfCMo 1760w, /sites/default/files/styles/max_width_1920/public/2023-10/01-header-example.png?itok=HBn1DRtI 1920w, /sites/default/files/styles/max_width_2080/public/2023-10/01-header-example.png?itok=HNhge5gK 2080w, /sites/default/files/styles/max_width_2240/public/2023-10/01-header-example.png?itok=wvfVrWVM 2240w, /sites/default/files/styles/max_width_2400/public/2023-10/01-header-example.png?itok=F3oBzVJz 2311w" sizes="(min-width: 992px) 640px, (min-width: 838px) 896px, 100vw" width="960" height="290" src="/sites/default/files/styles/max_width_320/public/2023-10/01-header-example.png?itok=xfiVWgAi" alt="Example of website header with university signature and site title" /> </div> </div> <div class="wrapped-image__text"><p><strong>Example of Yale University signature and site title</strong></p> </div> </div> </div> </div> <div data-component-width="site" data-component-alignment="left" data-component-variation="default" class="text-field"> <div class="text-field__inner"> <div class="text"> <p>The standard colors for the Yale logo and signature are Yale Blue set against a white or light gray background or reversed white set against Yale Blue. The logo and signature may also be black or dark gray when the page design requires it.</p> <p>It is recommended that the footer of all web pages include the Yale logo in the lower left corner. The footer should also have a copyright statement with year, and a link to the Yale University Privacy Policy. Websites may also include a contact e-mail link, social media buttons, and additional information. Footer content is generally placed near the Yale logo but must not crowd it; breathing space should always be left around the logo.</p> </div> </div> </div> <div data-component-width="site" data-wrapped-image-style="floated" data-wrapped-image-alignment="right" class="wrapped-image"> <div class="wrapped-image__inner"> <div class="wrapped-image__content-wrapper"> <div class="wrapped-image__image"> <div> <img loading="eager" srcset="/sites/default/files/styles/max_width_320/public/2023-10/02-footer-example-1.png?itok=tWUZgkyt 320w, /sites/default/files/styles/max_width_480/public/2023-10/02-footer-example-1.png?itok=cxuj2_mP 480w, /sites/default/files/styles/max_width_640/public/2023-10/02-footer-example-1.png?itok=na5zkwva 640w, /sites/default/files/styles/max_width_800/public/2023-10/02-footer-example-1.png?itok=IC0P1MOU 800w, /sites/default/files/styles/max_width_896/public/2023-10/02-footer-example-1.png?itok=-b9Kn46Z 896w, /sites/default/files/styles/max_width_960/public/2023-10/02-footer-example-1.png?itok=A9pbEP2l 960w, /sites/default/files/styles/max_width_1120/public/2023-10/02-footer-example-1.png?itok=8PFhrUDy 1120w, /sites/default/files/styles/max_width_1280/public/2023-10/02-footer-example-1.png?itok=OoTN07V3 1280w, /sites/default/files/styles/max_width_1440/public/2023-10/02-footer-example-1.png?itok=RL09ixFR 1440w, /sites/default/files/styles/max_width_1600/public/2023-10/02-footer-example-1.png?itok=0hhHVHwO 1600w, /sites/default/files/styles/max_width_1760/public/2023-10/02-footer-example-1.png?itok=197x3HOX 1760w, /sites/default/files/styles/max_width_1920/public/2023-10/02-footer-example-1.png?itok=oY6DcTty 1920w, /sites/default/files/styles/max_width_2080/public/2023-10/02-footer-example-1.png?itok=6FFz3l_C 2080w, /sites/default/files/styles/max_width_2240/public/2023-10/02-footer-example-1.png?itok=9aTpl3wL 2240w, /sites/default/files/styles/max_width_2400/public/2023-10/02-footer-example-1.png?itok=at77-_mB 2400w" sizes="(min-width: 992px) 640px, (min-width: 838px) 896px, 100vw" width="960" height="141" src="/sites/default/files/styles/max_width_320/public/2023-10/02-footer-example-1.png?itok=tWUZgkyt" alt="Example website footer with white background" /> </div> </div> <div class="wrapped-image__text"><p><strong>Example of website footer on white background</strong></p> </div> </div> </div> </div> <div data-component-width="site" data-wrapped-image-style="floated" data-wrapped-image-alignment="right" class="wrapped-image"> <div class="wrapped-image__inner"> <div class="wrapped-image__content-wrapper"> <div class="wrapped-image__image"> <div> <img loading="eager" srcset="/sites/default/files/styles/max_width_320/public/2023-10/03-footer-example-2.png?itok=h-cQngln 320w, /sites/default/files/styles/max_width_480/public/2023-10/03-footer-example-2.png?itok=wXGI3jC1 480w, /sites/default/files/styles/max_width_640/public/2023-10/03-footer-example-2.png?itok=r92Q1T3S 640w, /sites/default/files/styles/max_width_800/public/2023-10/03-footer-example-2.png?itok=ziPadaot 800w, /sites/default/files/styles/max_width_896/public/2023-10/03-footer-example-2.png?itok=Z2uIRK70 896w, /sites/default/files/styles/max_width_960/public/2023-10/03-footer-example-2.png?itok=q8fg44bg 960w, /sites/default/files/styles/max_width_1120/public/2023-10/03-footer-example-2.png?itok=j5tc0xne 1120w, /sites/default/files/styles/max_width_1280/public/2023-10/03-footer-example-2.png?itok=M5VuwnQh 1280w, /sites/default/files/styles/max_width_1440/public/2023-10/03-footer-example-2.png?itok=ZdjcxLBz 1440w, /sites/default/files/styles/max_width_1600/public/2023-10/03-footer-example-2.png?itok=eqHLg-xh 1600w, /sites/default/files/styles/max_width_1760/public/2023-10/03-footer-example-2.png?itok=jz5KvKqg 1760w, /sites/default/files/styles/max_width_1920/public/2023-10/03-footer-example-2.png?itok=031DjQGA 1920w, /sites/default/files/styles/max_width_2080/public/2023-10/03-footer-example-2.png?itok=9uIQ-vZw 2080w, /sites/default/files/styles/max_width_2240/public/2023-10/03-footer-example-2.png?itok=gSetIKzt 2240w, /sites/default/files/styles/max_width_2400/public/2023-10/03-footer-example-2.png?itok=4I7pyzGR 2400w" sizes="(min-width: 992px) 640px, (min-width: 838px) 896px, 100vw" width="960" height="103" src="/sites/default/files/styles/max_width_320/public/2023-10/03-footer-example-2.png?itok=h-cQngln" alt="Example of website footer on blue background" /> </div> </div> <div class="wrapped-image__text"><p><strong>Example of website footer on blue background</strong></p> </div> </div> </div> </div> <div data-component-width="site" data-component-alignment="left" data-component-variation="default" class="text-field"> <div class="text-field__inner"> <div class="text"> <p>The Yale logo should never be combined with other designs to form a new or hybrid logo. The logo and signature should be linked to the main Yale website.</p> <p>In addition, Yale College and other organizations may have their own wordmarks. For schools and administrative divisions, special wordmarks are available from the <a href="http://printer.yale.edu">University Printer</a>.</p> </div> </div> </div> <div data-component-width="site" class="divider__wrapper"> <div data-divider-position="left" class="divider__inner"> <div data-animate-item="enabled" class="divider" data-divider-width="75"></div> </div> </div> <div data-component-width="site" data-component-alignment="left" data-component-variation="default" class="text-field"> <div class="text-field__inner"> <div class="text"> <h2>Typefaces</h2> <p><a href="/core-identity-elements/yale-typefaces" data-entity-type="node" data-entity-uuid="718ce419-9b01-43d0-8db0-e3bd86bb8f22" data-entity-substitution="canonical" title="Yale Typefaces">Yale’s own typeface</a> is the preferred serif font for Yale websites and may be used throughout for titles, headings, and menu items. The standard sans-serif font for Yale sites is Mallory, which is recommended for body text and may also be used for menus and headings.</p> <p><strong>Recommended styles</strong></p> </div> </div> </div> <div data-component-width="site" data-wrapped-image-style="floated" data-wrapped-image-alignment="right" class="wrapped-image"> <div class="wrapped-image__inner"> <div class="wrapped-image__content-wrapper"> <div class="wrapped-image__image"> <div> <img loading="eager" srcset="/sites/default/files/styles/max_width_320/public/2023-10/heading1-alone.png?itok=l2xi-gbD 320w, /sites/default/files/styles/max_width_480/public/2023-10/heading1-alone.png?itok=K-5bRcZm 480w, /sites/default/files/styles/max_width_640/public/2023-10/heading1-alone.png?itok=jlPcqqaI 640w, /sites/default/files/styles/max_width_800/public/2023-10/heading1-alone.png?itok=ZaoMD1RH 800w, /sites/default/files/styles/max_width_896/public/2023-10/heading1-alone.png?itok=h5QEbd5w 896w, /sites/default/files/styles/max_width_960/public/2023-10/heading1-alone.png?itok=yQ34wWxy 960w, /sites/default/files/styles/max_width_1120/public/2023-10/heading1-alone.png?itok=NbTJ7cUI 1120w, /sites/default/files/styles/max_width_1280/public/2023-10/heading1-alone.png?itok=WlD8lVJk 1280w, /sites/default/files/styles/max_width_1440/public/2023-10/heading1-alone.png?itok=SahI_wN3 1440w, /sites/default/files/styles/max_width_1600/public/2023-10/heading1-alone.png?itok=IDp1KeXp 1600w, /sites/default/files/styles/max_width_2400/public/2023-10/heading1-alone.png?itok=KRAnPqag 1630w" sizes="(min-width: 992px) 640px, (min-width: 838px) 896px, 100vw" width="960" height="110" src="/sites/default/files/styles/max_width_320/public/2023-10/heading1-alone.png?itok=l2xi-gbD" alt="Yale typeface heading 1 page title example" /> </div> </div> <div class="wrapped-image__text"><p>The Yale typeface, heading 1 page title</p> </div> </div> </div> </div> <div data-component-width="site" data-wrapped-image-style="floated" data-wrapped-image-alignment="right" class="wrapped-image"> <div class="wrapped-image__inner"> <div class="wrapped-image__content-wrapper"> <div class="wrapped-image__image"> <div> <img loading="eager" srcset="/sites/default/files/styles/max_width_320/public/2023-10/headings2-4.png?itok=qqj0kw9P 320w, /sites/default/files/styles/max_width_480/public/2023-10/headings2-4.png?itok=8KAEioVf 480w, /sites/default/files/styles/max_width_640/public/2023-10/headings2-4.png?itok=GjTmyhzN 640w, /sites/default/files/styles/max_width_800/public/2023-10/headings2-4.png?itok=z2MOK2J7 800w, /sites/default/files/styles/max_width_896/public/2023-10/headings2-4.png?itok=McLcWThh 896w, /sites/default/files/styles/max_width_960/public/2023-10/headings2-4.png?itok=EqlGRnFf 960w, /sites/default/files/styles/max_width_1120/public/2023-10/headings2-4.png?itok=g1iMnY-9 1120w, /sites/default/files/styles/max_width_2400/public/2023-10/headings2-4.png?itok=yNJmE2OE 1229w" sizes="(min-width: 992px) 640px, (min-width: 838px) 896px, 100vw" width="960" height="434" src="/sites/default/files/styles/max_width_320/public/2023-10/headings2-4.png?itok=qqj0kw9P" alt="Yale typeface headings 2-4 subhead examples" /> </div> </div> <div class="wrapped-image__text"><p>The Yale typeface, headings 2–4 sub-headers</p> </div> </div> </div> </div> <div data-component-width="site" data-wrapped-image-style="floated" data-wrapped-image-alignment="right" class="wrapped-image"> <div class="wrapped-image__inner"> <div class="wrapped-image__content-wrapper"> <div class="wrapped-image__image"> <div> <img loading="eager" srcset="/sites/default/files/styles/max_width_320/public/2023-10/05-mallory-subhead.png?itok=l23ooSXj 320w, /sites/default/files/styles/max_width_480/public/2023-10/05-mallory-subhead.png?itok=4W1j0pQq 480w, /sites/default/files/styles/max_width_960/public/2023-10/05-mallory-subhead.png?itok=zofu_akQ 599w" sizes="(min-width: 992px) 640px, (min-width: 838px) 896px, 100vw" width="599" height="49" src="/sites/default/files/styles/max_width_320/public/2023-10/05-mallory-subhead.png?itok=l23ooSXj" alt="Mallory small caps heading 5 subheader" /> </div> </div> <div class="wrapped-image__text"><p>Mallory Small Caps, heading 5 sub-header</p> </div> </div> </div> </div> <div data-component-width="site" data-wrapped-image-style="floated" data-wrapped-image-alignment="right" class="wrapped-image"> <div class="wrapped-image__inner"> <div class="wrapped-image__content-wrapper"> <div class="wrapped-image__image"> <div> <img loading="eager" srcset="/sites/default/files/styles/max_width_320/public/2024-03/mallory%20lorem%20ipsum%20for%20web.png?itok=qwr6Vk85 320w, /sites/default/files/styles/max_width_480/public/2024-03/mallory%20lorem%20ipsum%20for%20web.png?itok=8UH3M-ZX 480w, /sites/default/files/styles/max_width_640/public/2024-03/mallory%20lorem%20ipsum%20for%20web.png?itok=3fVdxsgg 640w, /sites/default/files/styles/max_width_800/public/2024-03/mallory%20lorem%20ipsum%20for%20web.png?itok=vK3tIa7e 800w, /sites/default/files/styles/max_width_896/public/2024-03/mallory%20lorem%20ipsum%20for%20web.png?itok=zyJrq0ET 896w, /sites/default/files/styles/max_width_960/public/2024-03/mallory%20lorem%20ipsum%20for%20web.png?itok=DNIih7WB 960w, /sites/default/files/styles/max_width_1120/public/2024-03/mallory%20lorem%20ipsum%20for%20web.png?itok=GdTEGPDz 1120w, /sites/default/files/styles/max_width_1280/public/2024-03/mallory%20lorem%20ipsum%20for%20web.png?itok=NgjhGqY8 1280w, /sites/default/files/styles/max_width_1440/public/2024-03/mallory%20lorem%20ipsum%20for%20web.png?itok=wSVWcNUN 1440w, /sites/default/files/styles/max_width_1600/public/2024-03/mallory%20lorem%20ipsum%20for%20web.png?itok=yoI9jPuW 1600w, /sites/default/files/styles/max_width_1760/public/2024-03/mallory%20lorem%20ipsum%20for%20web.png?itok=F3Lw32zW 1760w, /sites/default/files/styles/max_width_2400/public/2024-03/mallory%20lorem%20ipsum%20for%20web.png?itok=nlIgNB2v 1860w" sizes="(min-width: 992px) 640px, (min-width: 838px) 896px, 100vw" width="960" height="407" src="/sites/default/files/styles/max_width_320/public/2024-03/mallory%20lorem%20ipsum%20for%20web.png?itok=qwr6Vk85" alt="Mallory type specimen" /> </div> </div> <div class="wrapped-image__text"><p>Mallory body text</p> </div> </div> </div> </div> <div data-component-width="site" data-component-alignment="left" data-component-variation="default" class="text-field"> <div class="text-field__inner"> <div class="text"> <p>If additional web fonts are used, care should be taken to select fonts that are highly legible and harmonize with the recommended typefaces. Unusual and “quirky” typeface styles should be avoided.</p> <p>Mallory web fonts are available as part of the <a href="http://yalesites.yale.edu">YaleSites offering</a>.</p> </div> </div> </div> <div class="component-wrapper component-wrapper--no-top-margin" data-component-width="site" data-component-alignment="left"> <div class="component-wrapper__inner"> <div class="cta-group"> <a data-cta-hover-style="fade" data-cta-radius="none" data-cta-style="filled" data-cta-outline-weight="2" data-cta-theme="two" href="/core-identity-elements/yale-typefaces/download-the-yale-typeface" class="cta">Get the Yale typeface</a> </div> </div> </div> <div data-component-width="site" class="divider__wrapper"> <div data-divider-position="left" class="divider__inner"> <div data-animate-item="enabled" class="divider" data-divider-width="75"></div> </div> </div> <div data-component-width="site" data-component-alignment="left" data-component-variation="default" class="text-field"> <div class="text-field__inner"> <div class="text"> <h2>Colors</h2> <p>Yale Blue is the university’s identifying color, and has the hex value #00356b. The standard range of blue tints is shown in the primary color palette below along with the standard range of grays and three accent colors. Additional colors may be used as long as they complement, rather than clash with, the colors in the primary color palette.</p> <p><strong>Primary color palette</strong></p> </div> </div> </div> <div data-component-width="site" data-component-alignment="left" class="content-image"> <div class="content-image__inner"> <div> <img loading="eager" srcset="/sites/default/files/styles/max_width_320/public/2024-08/web-colors-with-yellow-large.png?itok=77QtJLvj 320w, /sites/default/files/styles/max_width_444/public/2024-08/web-colors-with-yellow-large.png?itok=xA6azP4o 444w, /sites/default/files/styles/max_width_480/public/2024-08/web-colors-with-yellow-large.png?itok=8SsO6pov 480w, /sites/default/files/styles/max_width_540/public/2024-08/web-colors-with-yellow-large.png?itok=wb-4UQ8O 540w, /sites/default/files/styles/max_width_640/public/2024-08/web-colors-with-yellow-large.png?itok=sZc_doRU 640w, /sites/default/files/styles/max_width_800/public/2024-08/web-colors-with-yellow-large.png?itok=9ZdJf_Ie 800w, /sites/default/files/styles/max_width_896/public/2024-08/web-colors-with-yellow-large.png?itok=rdA1aP5F 896w, /sites/default/files/styles/max_width_960/public/2024-08/web-colors-with-yellow-large.png?itok=Exmbkydo 960w, /sites/default/files/styles/max_width_1120/public/2024-08/web-colors-with-yellow-large.png?itok=SyF21Eel 1120w, /sites/default/files/styles/max_width_1280/public/2024-08/web-colors-with-yellow-large.png?itok=nqQWUDxx 1280w, /sites/default/files/styles/max_width_1440/public/2024-08/web-colors-with-yellow-large.png?itok=h-JR31oA 1440w, /sites/default/files/styles/max_width_1600/public/2024-08/web-colors-with-yellow-large.png?itok=Mkmab47z 1600w, /sites/default/files/styles/max_width_1760/public/2024-08/web-colors-with-yellow-large.png?itok=SstHE10_ 1760w, /sites/default/files/styles/max_width_1920/public/2024-08/web-colors-with-yellow-large.png?itok=Cpmba6r7 1920w, /sites/default/files/styles/max_width_2080/public/2024-08/web-colors-with-yellow-large.png?itok=OnGJ7mPm 2080w, /sites/default/files/styles/max_width_2400/public/2024-08/web-colors-with-yellow-large.png?itok=YMZEI6VX 2189w" sizes="(min-width: 896px) 896px, 100vw" width="960" height="732" src="/sites/default/files/styles/max_width_320/public/2024-08/web-colors-with-yellow-large.png?itok=77QtJLvj" alt="Yale web color palette" /> </div> </div> </div> <div data-component-width="site" class="divider__wrapper"> <div data-divider-position="left" class="divider__inner"> <div data-animate-item="enabled" class="divider" data-divider-width="75"></div> </div> </div> <div data-component-width="site" data-component-alignment="left" data-component-variation="default" class="text-field"> <div class="text-field__inner"> <div class="text"> <h2>White space & layout</h2> <p>The Yale web design standards make use of generous sizes for type, photos, and other design elements with plenty of white space between them. Every section and component of the design avoids being small and cramped. The layout grid offers large gutter spaces between columns and there is extra line-space between major divisions on a page.</p> <p>Web page layouts should always be handled via a responsive grid system. Older fixed-width grids and layout methods should no longer be used since they do not display well across various screen sizes and devices.</p> </div> </div> </div> <div data-component-width="site" class="divider__wrapper"> <div data-divider-position="left" class="divider__inner"> <div data-animate-item="enabled" class="divider" data-divider-width="75"></div> </div> </div> <div data-component-width="site" data-component-alignment="left" data-component-variation="default" class="text-field"> <div class="text-field__inner"> <div class="text"> <h2>Icons</h2> <p>Small icons representing Yale simply show the “Y” from the Yale logo, centered in a square format. These are the standard web shortcut icon, or “favicon,” social media icons, and home screen and application icons for mobile devices. The Yale favicon may only be used on websites having the Yale.edu web domain.</p> </div> </div> </div> <div data-component-width="site" data-wrapped-image-style="floated" data-wrapped-image-alignment="right" class="wrapped-image"> <div class="wrapped-image__inner"> <div class="wrapped-image__content-wrapper"> <div class="wrapped-image__image"> </div> <div class="wrapped-image__text"><p><strong>“Y” size specifications:</strong></p> <p><strong>Icon for social media - 48x48</strong><br><strong>Favicon for web shortcut - 16x16</strong></p> </div> </div> </div> </div> <div class="component-wrapper component-wrapper--no-top-margin" data-component-width="site" data-component-alignment="left"> <div class="component-wrapper__inner"> <div class="cta-group"> <a data-cta-hover-style="fade" data-cta-radius="none" data-cta-style="filled" data-cta-outline-weight="2" data-cta-theme="two" href="https://yaleedu.sharepoint.com/:f:/s/OfficeoftheUniversityPrinterAssetsResources/EufenFVm8v5LgJWlwHx9eQwB21FACtDkk8O6XM7mjOT6kg?e=DeEqRB" class="cta">Download icon set</a> </div> </div> </div> </div> </div> <div class="yds-two-column" data-component-width='site' data-embedded-components> <div class="yds-two-column yds-two-column__inner"> </div> </div> <div class="layout layout--onecol"> <div > </div> </div> </main> </div> <div id="block-yalesitesfooterblock"> <footer data-component-width="site" data-site-footer-border-thickness="8" data-footer-theme="one" data-footer-accent="two" data-footer-variation="basic" class="site-footer"> <div class="site-footer__inner"> <div class="site-footer__primary"> <div class="site-footer__branding"> <div class="site-footer__logo"> <a data-link-style="no-underline" class="site-footer__site-branding site-footer__site-branding--primary" href="https://yale.edu"></a> </div> </div> <div class="site-footer__columns"> </div> </div> <div class="site-footer__secondary"> <div class="site-footer__social"> </div> <div class="site-footer__meta"> <a data-link-style="underline-with-icon" data-link-type="external" class="link link--footer-link link--with-icon" href="https://usability.yale.edu/web-accessibility/accessibility-yale"> Accessibility at Yale</a> <span class="site-footer__divider">|</span> <a data-link-style="underline-with-icon" data-link-type="external" class="link link--footer-link link--with-icon" href="https://privacy.yale.edu/resources/privacy-statement"> Privacy Policy</a> <span class="site-footer__divider">|</span> <span>Copyright © 2024 Yale University. All rights reserved.</span> </div> </div> </div> </footer> </div> </div> </div> <script type="application/json" data-drupal-selector="drupal-settings-json">{"path":{"baseUrl":"\/","pathPrefix":"","currentPath":"node\/18","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"en"},"pluralDelimiter":"\u0003","suppressDeprecationErrors":true,"user":{"uid":0,"permissionsHash":"cfa5cdf4215c5bbf296f837771c78e975babd0dfdfb5a7e0ddabc92e23cab556"}}</script> <script src="/sites/default/files/js/js_nq4FWSuLRcbzzVyTJ0zfcwsqM7u-rZBJv00Y5bdGEcY.js?scope=footer&delta=0&language=en&theme=atomic&include=eJw1ykEKwDAIAMEPpeRJRY0UIdagNjS_76HktgwLaSpUr24Ivaw4yZxrSLLocJtc4D-S39yNztDIH8XYNFwUfB03zA9TjSBx"></script> <script src="https://siteimproveanalytics.com/js/siteanalyze_66356571.js" async></script> <script src="/sites/default/files/js/js_u_YAuYXTQsIlF-5yPargNywCQxc-TWRQ1FgsEv7_LI0.js?scope=footer&delta=2&language=en&theme=atomic&include=eJw1ykEKwDAIAMEPpeRJRY0UIdagNjS_76HktgwLaSpUr24Ivaw4yZxrSLLocJtc4D-S39yNztDIH8XYNFwUfB03zA9TjSBx"></script> </body> </html>