Brand Style Guide

 

Introduction

The brand style guide documents the PRL's design standards. This document is an extension of Michigan State University's Brand Guidelines and the College of Natural Science's Web Knowledge Base. Its goal is to present a visual language consistent with MSU's and CNS's guidelines but with added custom visual elements that distinguish and reflect the PRL's brand goals.

In order to avoid redundancy, the brand style guide mostly focuses on print design and web elements and does not cover elements included in MSU's and CNS's documentation (ex: graphic elements, editorial style guide, etc.).

What is a brand?

A brand is not a logo, tagline, colors, TV commercials, or websites. A brand is perception. More specifically, it’s the sum total of people’s perceptions and experiences - what they think, feel, and respond to when they interact with an organization. And branding is the intentional process of shaping that perception.

    The value of a brand

    A strong brand is the most valuable intangible asset any organization owns. A strong brand:

    • Communicates clearly what the organization stands for
    • Is credible, reflecting reality and aspirations
    • Connects emotionally with its audiences
    • Motivates the target audience to take action
    • Creates loyalty
    • Makes it possible to charge a higher price for the same product

    Why have guidelines?

    Great brands build strong bonds with their audiences by being consistent. They are instantly recognizable, stand for something, and speak a common language, despite the fact that they may speak to different people.

    PRL's branding strategy defines a set of identities, emotions, targeted goals, and interested audiences related to the institution. Branding guidelines provide a unified platform to communicate these ideas.

    Where do the guidelines apply?

    These guidelines are for external and internal communications, including brochures, websites, advertising, invitations, direct mail, postcards, fliers, catalogs, posters, billboards, banners, video, DVD, CD, film, presentations and stationery.

    • Web-only guidelines apply to the following: bullet points, buttons, cards, fonticons, layout, wells
    • Web and print guidelines apply to the following: colors, images, typography

    Design sources and inspiration

    PRL resources:

    MSU resources:

    External design inspirations:

    Bullet points

    In addition to regular bulleted lists, the stylized option offers more space and contrast around the bulleted material.

    • Unordered List - Bullet 1
    • Bullet 2
    • Bullet 3
    <!-- Stylized Unordered List -->    
    <div class="prl-bulletpoint-fancy">
      <ul>
        <li>Unordered List - Bullet 1</li>
        <li>Bullet 2</li>
        <li>Bullet 3</li>
      </ul>
    </div>
    1. Ordered List - Bullet 1
    2. Bullet 2
    3. Bullet 3
    <!-- Stylized Ordered List -->    
    <div class="prl-bulletpoint-fancy">
      <ol>
        <li>Ordered List - Bullet 1</li>
        <li>Bullet 2</li>
        <li>Bullet 3</li>
      </ol>
    </div>

    Buttons

    Buttons trigger a reaction on press.

    Use active verbs for button language, such as:

    • "Find Out More"
    • "View All Events"
    • "Apply Here"

    Don't use passive language, such as:

    • "More"
    • "More Information"
    • "Events."

    Primary button

    The main PRL button, which fills with color on hover and press.

    <!-- Raised Button -->
    <div>
      <a class="prl-btn" href="#">Find Out More</a>
    </div>

    Secondary arrow button

    The secondary button includes an arrow animation on hover to indicate a link.

    Find Out More

    <!-- Button With Animated Arrow -->
    <div>
      <a class="prl-arrow-btn" href="#">Find Out More</a>
    </div>

    Tertiary flat button

    The flat button is primarily used in cards. Although it can be used on its own, the secondary button, with arrow animation, is a better visual indicator for links.

    <!-- Flat Button -->
    <div>
      <a class="prl-flat-btn" href="#">Find Out More</a>
    </div>

    Back to top button

    Shrink the browser window to see an example on this page. The button consists of a "chevron circle up" fonticon, uses the secondary PRL red color, and is set on the bottom right corner of mobile and tablet screens only. On press, the user is redirected to the top of the page, with an added jQuery scroll effect.

    <!-- Back To Top Button -->
    <div><a class="prl-back-to-top-btn" href="#"><span class="fa fa-chevron-circle-up">&nbsp;</span><span class="sr-only">Chevron circle up</span></a></div>

    Cards

    Cards are entry points to more detailed information. They may contain a photo, text, and a link about a single subject. Cards can be used alone or in a collection (see News page). Use cards to display content that:

    • Comprises multiple data types, like images, movies, and text
    • Does not require direct comparison (users don't compare the images or text)
    • Contains interactive content, such as one or more buttons

    Don't:

    • Overload cards with too many actions or extraneous information
    • Include inline links

    Design and code resources

    The card examples below contain code snippets, but for access to cleaner code, use these options:


    Image sources for examples: Cyanobacteria bloom by brewbooks from near Seattle, USA (Grand Prismatic Spring) CC BY-SA 2.0, via Wikimedia Commons; Solar panel: Pexels, CC0 Creative Commons

    Basic card

    Cyanobacteria bloom by a hot spring

    Card Title

    The information falls here. Be brief and avoid extraneous information.

    <!-- Basic Card -->
    <div class="prl-card">
      <!-- Image -->
      <div class="prl-card-image">
        <img alt="" src="" />
      </div>
      <!-- Content -->
      <div class="prl-card-body">
        <h3>Card Title</h3>
        <p>The information falls here. Be brief and avoid extraneous information.</p>
      </div>
      <!-- Buttons -->
      <div class="prl-card-readmore-btns">
        <a class="prl-flat-btn" href="#">Action 1</a>
        <a class="prl-flat-btn" href="#">Action 2</a>
      </div>
    </div>

    Without image

    Card Title

    The information falls here. Be brief and avoid extraneous information.

    <!-- Basic Card Without Image -->
    <div class="prl-card">
      <!-- Content -->
      <div class="prl-card-body">
        <h3>Card Title</h3>
        <p>The information falls here. Be brief and avoid extraneous information.</p>
      </div>
      <!-- Buttons -->
      <div class="prl-card-readmore-btns">
        <a class="prl-flat-btn" href="#">Action 1</a>
        <a class="prl-flat-btn" href="#">Action 2</a>
      </div>
    </div>

    With bottom border

    Card With Bottom Border

    The information falls here. Be brief and avoid extraneous information.

    Solar panels on an evening

    Card With Bottom Border

    The information falls here. Be brief and avoid extraneous information.

    <!-- Card Without Image and With Bottom Border -->
    <div class="prl-card-w-border">
      <!-- Content -->
      <div class="prl-card-body">
        <h3>Card With Bottom Border</h3>
        <p>The information falls here. Be brief and avoid extraneous information.</p>
      </div>
      <!-- Buttons -->
      <div class="prl-card-readmore-btns">
        <a class="prl-flat-btn" href="#">Action 1</a>
        <a class="prl-flat-btn" href="#">Action 2</a>
      </div>
    </div>

    <!-- Card with Image and Bottom Border -->
    <div class="prl-card-w-border">
      <!-- Image -->
      <div class="prl-card-image">
        <img alt="" src="" />
      </div>
      <!-- Content -->
      <div class="prl-card-body">
        <h3>Card With Bottom Border</h3>
        <p>The information falls here. Be brief and avoid extraneous information.</p>
      </div>
      <!-- Buttons -->
      <div class="prl-card-readmore-btns">
        <a class="prl-flat-btn" href="#">Action 1</a>
        <a class="prl-flat-btn" href="#">Action 2</a>
      </div>
    </div>

    Title overlaying image

    Solar panels on an evening

    Card Title

    The information falls here. Be brief and avoid extraneous information.

    <!-- Card With Image and Title Overlay -->
    <div class="prl-card">
        <!-- Image-->
      <div class="prl-card-image">
        <img alt="" src="">
        <!-- Title Overlay -->
        <div class="prl-card-image-overlay">
          <h3>Card Title</h3>
        </div>
      </div>
      <!-- Content -->
      <div class="prl-card-body">
        <p>The information falls here. Be brief and avoid extraneous information.</p>
      </div>
      <!-- Buttons -->
      <div class="prl-card-readmore-btns">
        <a class="prl-flat-btn" href="#">Action 1</a>
        <a class="prl-flat-btn" href="#">Action 2</a>
      </div>
    </div>

    Title overlay and hover effect

    Hover effects indicate the presence of a links on cards that do not include visible action buttons. Usage examples include "Related Content" in news articles (See example).
     
    Cyanobacteria bloom by a hot spring

    Card Title

    Optional text can go here too

    Cyanobacteria bloom by a hot spring

    Card Title

    Related Story: This is the summary of the story

    <!-- Card With Image and Text Overlay -->
    <div class="prl-card-hover-effect">
      <div class="prl-card-image-only">
      <!-- Image-->
      <img alt="" src="">
        <!-- Text Overlay -->
        <div class="prl-card-image-no-summary-overlay">
          <h3>Card Title</h3>
          <p>Optional text can go here too</p>
        </div>
      </div>
      <!-- Link Area -->
      <div class="prl-readmore-fill-container">
        <a href="#">Action 1</a>
      </div>
    </div>

    <!-- Card With Image, Title Overlay, and Content -->
    <div class="prl-card-hover-effect">
      <div class="prl-card-image">
      <!-- Image-->
      <img alt="" src="">
        <!-- Title Overlay -->
        <div class="prl-card-image-overlay">
          <h3>Card Title</h3>
        </div>
      </div>
      <!-- Content -->
      <div class="prl-card-body">
        <p> Related Story: This is the summary of the story </p>
      </div>
      <!-- Link Area -->
      <div class="prl-readmore-fill-container">
        <a href="#">Action 1</a>
      </div>
    </div>

    Small borderless card

    The card takes minimal space and is useful as "Related Content" in news stories (See example). Recommended bootstrap grid definition is "col-sm-6 col-xs-12" class with a "pull-right" class.

    Solar panels on an evening
    <!-- Small Borderless Card -->
    <div class="col-sm-6 col-xs-12 prl-relcontent-body-small pull-right">
    <img alt="" src="">
      <!-- Text Area -->
      <div class="prl-relcontent-body-small-link">
        <h3>Card Title</h3>
        <p>Link here.</p>
      </div>
    </div>

    Colors

    The PRL color palette is monochromatic, including:

    Primary Colors

     

    Main color
    HEX: #2E4D4D
    CMYK: C:40 M:0 Y:0 K: 70
    RGB: R=46 G=77 B=77
    Bridges between CNS and MSU greens

     

    Complementary Color
    HEX: #846E28
    CMYK: C:0 M:17 Y:70 K:48
    RGB: R=132 G=110 B=40
    Accent color for contrast

    Secondary Colors

    Although the PRL's palette is monochromatic, secondary colors can be introduced for delightful contrasts. These colors are subtle variations on MSU secondary colors and are more suitable for the PRL brand. However, if needed, MSU's secondary color palette can also be used.

     

    HEX: #41304C
    CMYK: C:14 M:37 Y:0 K:70
    RGB: R=65 G=48 B=76

     

    HEX: #804540
    CMYK: C:0 M:46 Y:50 K: 50
    RGB: R=128 G=69 B=64

    Graphic elements

    The two primary elements are the vertical line and the circle and curves.

    Vertical line

    Vertical line

    The vertical line comes from the MSU-DOE Plant Research Laboratory logo, where the line used between the wordmark on the left and the text to the right. The vertical line is useful to distinguish or separate content from its surroundings. Examples include:

    • Image captions: line used as a left border
    • Homepage - Featured Research area header: line used as left border

    Circle and curves

    Vertical line

    The circle and curves elements are inspired by the latest trends in Material Design, where components are having rounder edges for a softer and more spacious look. In essence, one can think of four curves adding up to make a circle, or on the contrary, a circle breaking down into four distinct curves. Examples include:

    • Homepage, About page, and Graduate Program Overview page: use of circle for the small logos
    • Secondary arrow button (see buttons on this page): circle surrounds the arrow element
    • Cards (see cards on this page): curved edges
    • About page: images have curved edges

    Images

    Images are a vital part of the PRL brand. They express the essence of the PRL: world-class scientists working together to impact scientific research and human lives. Beautiful images convey emotions and a sense of what the PRL is to the outside visitor.

    Use:

    • Vivid images that convey emotions of wonder, awe, vastness
    • Simple in composition
    • If appropriate, images can be whimsical

    Don't use:

    • Dull, uninteresting images
    • Busy in composition

    Basic image with caption

    The basic figure includes an image on top and a caption on the bottom, with a left border line. Figures are automatically styled with CSS.

    Placeholder image
    The first line is the caption.
    Credits go here.
    <!-- Image With Caption -->
    <div class="image-center"> <!--could add .row if wanted-->
      <figure class="prl-figure">
        <img alt="" height="395" src="" width="600" />
        <figcaption>The first line is the caption.<br />
          <em>Credits go here. </em>
        </figcaption>
      </figure>
    </div>

      Image types

      • Science images: microscopy, figures (see examples)
      • Portraits: for awardees, personal contributors (see examples)
      • Landscapes: with a “vast/hero” feeling (see examples)
      • Photojournalistic: scientists in action (see examples)
      • Metaphorical representations: Molecular plant science is difficult to capture in images. Metaphorical representations can make the unseen and abstract relatable to the non-specialist. (see examples)

      Science image examples

      Microscopy image
      Microscopy
      By Joe Aung
      Stressed out plant
      A stressed-out plant
      By Donghee Hoh
      Figure of a bacterial microcompartment
      A descriptive figure can be useful.
      However, don't overuse.
      This is too abstract for a general public.
      By Clement Aussignargues, Kerfeld lab

      Portrait examples

      Portrait of Geoffry Davis
      Portrait 1: outside shot
      Scientist posing in the lab with lab coat
      Portrait 2: arms crossed, scientist in lab coat
      By Harley J Seeley Photography
      Scientist posing in the lab
      Portrait 3: arms crossed, blurred background
      By Harley J Seeley Photography
      Cyanobacteria workshop attendees.
      Group portrait
      By Samantha Lloyd, VisLab

      Landscape examples

      Yellowstone National Park cyanobacteria bloom
      Vast/Hero feeling
      By Jim Peaco, National Park Service, Public Domain
      Corn field vista
      Wide/vast feeling
      Public Domain
      Picture of Mars
      By NASA/Public Domain

      Photojournalistic examples

      Scientist presenting
      Scientist presenting to a large audience
      By iGEM Foundation and Justin Knight, CC BY 2.0
      Scientists talking in front of poster presentation
      Scientist working at the bench
      By MSU Communications and Brand Strategy
      Scientists talking in front of poster presentation
      Scientists talking at conference
      By Susanne Hoffmann-Benning

      Metaphorical representation examples

      Inside of a tunnel
      A speed tunnel,
      symbolizing taking the breaks off plant production
      By Romain Peli on Unsplash
      Fiber optic lights
      Fiber optics, symbolizing the field of optogenetics
      CC0 Creative Commons
      Dragon about to attack city
      Whimsical/Fantastical;
      Symbolizes the "Yellow Dragon" disease that
      infects citrus fruits
      By Baltasar Vischi, CC 2.0

      Fonticons

      Pre-designed icons are useful visual representations that load faster than traditional images. The PRL uses a custom icon font called natsci-icon-font, based on Font Awesome, that has over 300 icons to choose from that span many use scenarios. Icon size, rotation, and other effects can be controlled.

      How to use

      Fonticons are inserted in the HTML editor. For more, see:

      Fonticon Examples

      Map Marker:   Map marker

      Envelope (2x original size):   Envelope

      Spartan Shield (2x original size):  Spartan Shield

      Spartan Helmet (4x original size):  Spartan Helmet

        Layout

        Bootstrap grid system

        The College of Natural Sciences theme uses the Bootstrap grid system that divides the page up into 12 columns across the page. Columns can be combined in various combinations that add up to a total of 12 per row. In the example below, the first row combines twelve 1-column-width columns, the second combines three 4-column-width columns, while the last has a single 12-column-width column.

          Bootstrap grid examples

          How to use bootstrap grid

          Check out the following resources:

          College of Natural Sciences additional layouts

          The CNS theme includes a number of page layouts housed within Mura.

          Custom web layouts

          The research, news, faculty, staff, and events pages have custom layouts. Those are created through Mura components and styled with CSS automatically when added. Contact the PRL communications office for Instructions on how to add these components.

          Narrow container

          The narrow container limits the line length to approximately 65-75 characters per line for an accessible online reading experience. This is ideal for news articles. An example (italics added for contrast):

          When photosynthetic organisms have enough resources to grow – nutrients, the right temperature, enough water – photosynthesis hums along and they thrive.

          But during difficult times – say, nutrients are scarce, or the environment is too cold or dry – neither can the organisms grow nor can they hide from the hostile environment.

          In those cases, they must dial back photosynthesis until the stress blows over. This ability to change the rates of photosynthesis is a matter of life and death. Without it, the organisms produce bad toxins that inflict self-harm that can be fatal.

          <!--Custom Narrow Container -->
          <div class="prl-narrow-container">
            <p>Content goes in here</p>
          </div>

          Letterhead

          MSU letterhead includes the Michigan State University wordmark at the top and the university seal in the scholar’s margin. All college and department information appears within the scholar’s margin. MSU’s affirmative-action statement appears at the bottom of the scholar’s margin (see example below).

          Myriad Pro is the recommended typeface for use on all MSU letterhead. However, the Arial typeface may be substituted if Myriad Pro is not available. Use of the Arial typeface is recommended for letterhead that is sent electronically.

          Download the PRL letterhead template.
          Go here for instructions on personalizing the template.

          Letterhead example

          Typography

          Primary font: Gotham (sans serif)

          Typography choices say a lot about an organization, often before the actual words are read. The Gotham (sans serif) type family chosen by MSU has many weights and has the flexibility to feel sophisticated yet approachable, modern yet classic (see usage examples).

          Secondary font: Californian (serif)

          Californian is a bold, classic typeface that takes its cues from the ancient Spartans and reflects MSU’s epic, heroic quality. It is recommended as an alternative to Gotham for headlines and small blocks of text. It is only allowed for print usage.

          Substitution fonts

          Substitution fonts are available in commonly used programs (MS Word, PowerPoint, etc.) and are useful for PIs, grad students, and post-docs who don't have access to the primary and secondary fonts above.

          Serif fonts that maximize text readability:

          • Georgia
          • Times New Roman

          Sans serif fonts:

          • Helvetica (preferred)
          • Arial

          Custom <h2>

          h2 for Primary Pages

          Larger, thinner, capitalized, and uses primary color; used on primary pages for contrast. For examples, see Homepage or About Page.

          <!--Title Page h2  -->
          <h2 class="prl-h2-alternate"> H2 tag </h2>

          h2 for Inner Splash Page

          Default h2 with an added upper margin; used on secondary 'splash' pages, for spacing between blocks of content. For examples, see Research Projects, Graduate Program Overview, and Center for Advanced Algal and Plant Phenotyping pages.

          <!--Inner Page h2  -->
          <h2 class="prl-h2-secondary-spacing"> H2 tag </h2>

          Custom <p>

          Lead <p> for Primary Pages

          Acts as a lead paragraph, with larger font and light grey color. Used for contrast. For examples, see Homepage or About Page.

          <!--Custom p Tag -->
          <h2 class="prl-p-subheader"> Paragraph tag </h2>

          Lead <p> for Secondary Splash Pages

          Acts as a lead paragraph, with larger font and light grey color. Smaller than the lead paragraph styling for Primary Pages. For examples, see Seminars & Events, Graduate Program Overview, Research Areas, etc.

          <!--Custom p Tag -->
          <h2 class="prl-p-subheader-smaller"> Paragraph tag </h2>

          Wells

          Wells are an effective way of highlighting content by adding an inset to it.

          Default well

          This is some text in a well.

          <!-- Well -->
          <div class="well">
            <p>This is some text in a well.</p>
          </div>

          Custom well

          The custom well is slightly darker for elegance, and it has no hover effect.

          This is some text in a prl well.

          <!-- Custom Well -->
          <div class="prl-well">
            <p>This is some text in a prl well.</p>
          </div>