Style Guide

MedTech Website Style Guide

Table of Contents

8-min read

Color Palette

Primary Colors
#A60F2D
#4D4D4D
Secondary Colors
#1F1F1F
#4D4D4D
#808080
#A6A6A6
#CCCCCC
#EBEBEB
Accent Colors
#5BC3F5
#002D61

Site Logos & Branding

Main Logos
Washington State University Elson S. Floyd College of Medicine
The Office Of Technology

Typography

Font Weights

Aa

Montserrat Regular

Aa

Montserrat Semi-bold

Aa

Montserrat Bold

Primary Headlines

H1-45px

Font Family – Montserrat Bold

Line Spacing – 58px

Grey Scale Color Options

H1 – 45PX

#FFFFFF

H1 – 45PX

#222222

H2-20px

Font Family – Montserrat Bold

Line Spacing – 28px

Grey Scale Color Options

H2 – 20PX

#FFFFFF

H2 – 20PX

#222222
H3-22px (A-HEAD)

Font Family – Montserrat Semi-Bold

Line Spacing – 24px

Grey Scale Color Options

Title Case

H3 – 22PX

#FFFFFF

H3 – 22PX
#22222
H4-20px (B-HEAD)

Font Family – Montserrat Regular

Line Spacing – 32px

Grey Scale Color Options

First letter capped only

H4 – 20PX

#FFFFFF

H4 – 20PX
#222222
H5-20px (C-HEAD)

Font Family – Montserrat Italic

Line Spacing – 28px

Grey Scale Color Options

H5 – 20PX

#FFFFFF

H5 – 20PX
#222222
H6-16px (D-HEAD)

Font Family – Montserrrat Bold

Line Spacing – 28px

Grey Scale Color Options

H6 – 16PX

#FFFFFF

H6 – 16PX
#222222
Body Copy

Body Copy 14px

Font Family – Montserrat Regular

Line Spacing – 28px

Grey Scale Color Options

Body Copy

#FFFFFF

Body Copy

#222222

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.

700px wide preferred, if wider than 700px increase line spacing for readability.

List Styles

• Lorem ipsum dolor sit ametconsectetur adipiscing elit.
• Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
• Lorem ipsum dolor sit ametconsectetur adipiscing elit.

1. Lorem ipsum dolor sit ametconsectetur adipiscing elit.
2. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
3. Lorem ipsum dolor sit ametconsectetur adipiscing elit.

Pull Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet consectetur adipiscing elit dolor

John Doe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Image Caption

Image Caption – 16px

Font Family –  Montserrat Regular

Line Spacing – 28px

Default Color – #222222

Permission Line & Figure Label – 12px

Font Family – Montserrat

Line Spacing – 20px

Letter Spacing – 100px

Default Color – #222222

Figure 5.20. Deep neurovasculature of the palm; Gilroy, Atlas of Anatomy, 2nd edition, Thieme Publishing.

Buttons & Text

Button

This is the default button for the site, use button widget.

Download File Link*
*Saved as WSU Download File Link in Global
Text Link
Documentation Action*

This is documentation action text.

*Locate this styling in the format dropdown in the text editor

Element Spacing

Pixels & EM (Based on 16px default)
Font Weights

8px

.5em

16px

1em

24px

1.5em

32px

2em

48px

3em

64px

4em

80px

5em

112px

7em

Borders

Form Field Default Border - 3px
#464e54
Form Field Focused Border - 3px
#4f868e

Images, Hotspots, & Tooltips

Image Styles

Border – none

Border Radius (Image corners) 0px

Image Requirements

• Naming convention: “PageName_AssetType_Year”

• Save images for web, 72ppi/dpi

• Image file size should not exceed 500KB

• Check image dimensions and use your best judgement, for example do not use a 5000px wide image when a 800px wide image will do

• Do not skew or stretch images

• Do not use low res images

• Do not add outline or border

• Do not add shadow or animations

• Use images with similar aspect
ratio/size to achieve uniformity

Examples:

Hotspots with Tooltips*
Screenshot with hotspots for oom Orientation
Meeting Information

Meeting Information
Send an invite to an individual by:

  • copying the meeting URL or the full meeting invitation, or
  • sending directly via email. This is great for when you forget to loop someone in and need to have someone join last minute.
Audio
Audio
This tab will allow you to control audio functioning in Zoom and select the microphone and speaker for your device. If you are having trouble hearing, you can change volume configurations. Generally it is a good idea to test your audio devices prior to the meeting to make sure they are working properly. 
Video

Video
Clicking this will start sending a video feed from your computer to all participants. The video feed will come from the default camera of the device. If your computer does not have a built-in webcam, you will need to connect one before you have access to video conferencing.

Video Layout

Video Layout
Changing the video layout will affect how the other participants' videos are displayed on your video panel.

Displayed Participant Information

Displayed Participant Information
This is where meeting participants' video or screen name will populate, allowing you to view whoever is actively speaking.

Number of Participants

Number of Participants
Clicking this tab will bring up a list of all the participants in a meeting and allow you to see who is talking at any given moment.

Chat

Chat
You can send messages within the meeting if you want to avoid talking over the main speaker. Great for structured Q & A!

Helpful Links

Share
This tab will allow you to send content to individuals from inside the meeting itself. You can share screens like your desktop, any files you are working on, or a Powerpoint that you may have loaded up.

We advise practicing this a couple of times before your meeting starts!

Record

Record
This will allow you to start a recording within the meeting. This can also be set up prior to the meeting as a default or as a function of the Zoom Outlook function when the meeting is created.

 

Reactions

Reactions
You have access to a list of non-verbal feedback and emoji reactions that show up for other participants in the video panel.

*Use global widget that is saved as WSU Styled Hotspot widget under global tab, please unlink before editing

Alerts*

Note

At this time, you are unable to backup Notability to your WSU OneDrive account.

Info

The Notability app isn't a free app, so. be prepared to purchase if you are interested in it!

Warning

At this time, you are unable to backup Notability to your OneDrive account.

*The alerts are located under the Elements tab and are labeled WSU Custom Alerts.

Add spacers set to 8px between buttons and images or above info boxes.

Tables*

Database Images Videos Figures Animation Clerkship Other
New England Journal of Medicine

ClinicKey

Access Medical

Acland's Video Atlas of Human Anatomy

Bate's Guide to Physical Examination

LWW Health Library

UpToDate

DynaMed Plus

*Saved under global tab as WSU Base Styled Table, please unlink before editing

Tabbed Content

Use Tabbed Content for different OS instructions.

Accordion

Study Mode allows you to use tips and get immediate feedback.

  • Key Info highlights important information
  • Attending Tip  provides additional help but will be reflected in your Analysis
  • Labs will display lab values
  • Show Answer reveals the correct answer; you can click on individual answers to see their explanations or Show All Explanations to expand all
  • Reset Question allows you to undo your choice if you accidentally chose an answer; your answer choice will not be documented to your Analytics
  • Rule out an answer by clicking the X
  • Save a question to a custom folder to make it easier to find in the future

Exam Mode simulates a USMLE/Shelf exam so you can get accustomed to the layout in advance. These features include flagging questions, viewing lab values, adding notes, a calculator, and basic color/text options.

  • Rule out an answer by right clicking or double clicking
  • Click on an image to view the full size
  • Notes and flags on an item will be indicated next to the question number on the left
 
*Saved under global tab as WSU Basic Accordion, please unlink before editing

Checklist*

*Saved under Elements tab as WSU Custom Checklist

Word Style

Hyphenate adjectives: note-taking app

Log in is a verb phase that defines the action of logging into something.

Log-in is a noun or adjective and refers to the actual information used for digital access interaction with an account or system.

Keep Learning

Applications and Resources