![[Your]HealthResearch](http://images.squarespace-cdn.com/content/v1/5b158e474611a0586019853f/1528398560115-KJX8SG7QK96COPK50VPD/yourHealthResearch+logo.png?format=1500w)
Your Health Research Style Guide
This style guide defines the visual requirements for the Your Health Research brand. It includes guidance for logos, colors, photography, illustrations, typography, and digital presentation.
Use these standards when creating or updating application screens, emails, marketing pages, and other digital materials so the Your Health Research experience remains consistent, accessible, and recognizable.
Logo Requirements
Master Logo
The Master Logo is the primary logo used in the application. It is the logo users should see when they first land on the application and is the main starting point for the user’s relationship with the brand.
Ideal image size: 340px × 50px
Master Logo Examples
Square Logo
The Square Logo is used on mobile devices and in areas where web space is limited. This logo variant is usually presented to users after they have already established a relationship with the brand and can recognize it.
Ideal image size: 75px × 75px
Aspect ratio: 1:1
Square Logo Examples
Do
- Use the Master Logo in primary web headers and landing page experiences.
- Use the Square Logo in compact spaces, mobile layouts, and emails.
- Keep the logo in approved brand colors.
- Preserve the original logo proportions.
- Use high-resolution logo assets whenever possible.
- Provide clear spacing around the logo so it remains readable.
Don’t
- Do not stretch, squash, or distort the logo.
- Do not recreate the logo manually.
- Do not change the logo colors.
- Do not place the logo on backgrounds that reduce legibility.
- Do not use the Square Logo where the Master Logo is more appropriate.
- Do not use low-resolution or blurry logo files.
Color Requirements
Your Health Research allows colors to be customized to meet an institution’s needs. The colors below can be specified when standing up the application for an institution or research network.
Brand Colors
Brand colors set the overarching brand for the platform. They are used on global application elements such as headers, footers, and emails. They should conform to an institution’s or research network’s broader color scheme.
#00274C
0, 39, 76
#FFCB05
255, 203, 5
Do
- Use deep, dark, bold hues as brand colors.
- Make sure the primary and secondary brand colors contrast with each other.
Don’t
- Avoid lighter hues for brand colors.
- Light brand colors may cause white text to disappear or become difficult to read.
Application Colors
Application colors are used for interaction elements within the application and their varied states. Examples include buttons, tab bars, accordions, and modal headers.
#366CAF
54, 108, 175
#FF9800
255, 152, 0
#800080
128, 0, 128
#3F51B5
63, 81, 181
Do
- Use an accessibility contrast checker to ensure application colors have a high contrast ratio with white text.
Don’t
- Avoid lighter hues.
- Light colors may cause white text on them to not show clearly.
Background Colors
Background colors are used for setting the background color of the page and for adding emphasis to text and sections.
#F2F2F2
242, 242, 242
#D7E5F1
215, 229, 241
Do
- Use lighter hues for background colors.
Don’t
- Avoid darker background colors.
- Dark background colors may cause dark text to become difficult to read.
An Example Color Scheme
The University of Michigan uses institutional maize and blue as its brand colors. This helps with brand recognition and trust because visitors can quickly identify the experience as a University of Michigan site.
Accessibility
Consider web accessibility when choosing colors. Use online accessibility checkers, such as WebAIM, to test contrast between text and background colors.
HERO Images
HERO images are used as a backdrop for marketing messages on the home page. These images set the tone for the experience potential volunteers will have with recruitment efforts.
Anatomy of a HERO Banner
A HERO banner is made up of the HERO image, an accompanying quote, and a campaign tagline.
Choosing or Creating HERO Images
When choosing HERO images, compose the image around a clear primary subject. The primary subject should sit toward the top-left third of the image so that quote and campaign messaging can be layered on the right side.
Do
- Use a minimum image size of 1920px × 1080px.
- Compose or choose the image around a primary subject.
- Center the primary subject’s face in the top-left third of the image.
- Leave open space on the right side for quote and campaign messaging.
Don’t
- Do not use an image smaller than 1920px × 1080px.
- Do not use images with more than one competing area of focus.
- Do not place the main subject on the right side of the image.
- Do not use images where messaging would cover the subject’s face or important detail.
Highlighted Searches
Popular searches are used to provide volunteers with quick browsing access through the homepage to study categories that are in high demand. Each category has a title and an accompanying background image.
Anatomy of a Highlighted Search Bucket
A highlighted search bucket is made up of a background image and a search title.
Choosing or Creating Highlighted Search Background Images
Do
- Use an ideal image size of 800px × 530px.
- Make sure the image composition is simple yet meaningful.
- Choose images with enough visual quiet space for the search title.
Don’t
- Avoid bold or overly busy color compositions.
- Avoid images that make the white title text hard to read.
- Do not add the blue overlay directly into the image file.
Illustrations in Emails
Some emails include illustrations or supporting images. These visuals should reinforce the message while maintaining the Your Health Research visual system.
Illustration Images
Illustrations and supporting images in emails should feel simple, focused, and message-driven. They should support the email’s purpose without distracting from the primary call to action.
Quote Sources
Quote source images may be used to support testimonial-style content in emails. Keep quote source imagery clear, human, and emotionally relevant to the message.
Font Specifications
Primary Font Family
The application is carefully typeset using the Roboto font family. These fonts are served by Google Fonts.
Roboto
abcdefghijklmnopqrstuvwxyz
1234567890(.,;?!$&*)
abcdefghijklmnopqrstuvwxyz
1234567890(.,;?!$&*)
abcdefghijklmnopqrstuvwxyz
1234567890(.,;?!$&*)
abcdefghijklmnopqrstuvwxyz
1234567890(.,;?!$&*)
abcdefghijklmnopqrstuvwxyz
1234567890(.,;?!$&*)
Usage
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
CSS:
font-family: "Roboto", sans-serif;
Backup Font Family
As a backup to the web font, Arial is used when the primary font family fails to load over the internet. Arial is a system font.
Arial
abcdefghijklmnopqrstuvwxyz
1234567890(.,;?!$&*)
abcdefghijklmnopqrstuvwxyz
1234567890(.,;?!$&*)
abcdefghijklmnopqrstuvwxyz
1234567890(.,;?!$&*)
Usage
font-family: "Arial", sans-serif;