Cover Photo Image
Web buttons

Yellow Button

Purple Button

CTA Button
Arial 14px, bold, all caps
Padding: 20, 10, 20, 10
Line-height: 18px
bg-color: #450084 or #FFBD00
rounded-corner: 5px
Hover color: #8F66B5 OR #FFCC3E

Form buttons
Arial 14px; all caps
Padding: 15, 5, 5, 15px
bg-color: #B2B2B2 text color #595959
OR
bg-color: 450084 text color #FFFFFFF

In cascade, apply the style "yellow-button" or "purple-button" to the text.

  • A button should never contain more than 20 characters.
  • A button should never be more than two lines of text.
  • Don’t have more than one yellow CTA button on a page; multiple CTAs can be purple.
  • Avoid grouping multiple buttons of different styles together.
Color with buttons

Purple buttons can be used with light purples, gray and gold background colors; yellow buttons work with light purple backgrounds, gray and gold, and the lightest secondary shades. Do not put the buttons on any other background color than these: 


Button


Button


Button


Button


Button


Button


Button


Button

Social icons

Use images from this set of icons. 

fb
Daily Duke
fb
Email
fb
Facebook
flickr
Flickr
google plus
Google +
instagram
Instagram
google plus
LinkedIn
google plus
Twitter
google plus
Wordpress
google plus
YouTube
Video button
example

When including a graphic that links to a video, place this button graphic over the image. For example, this image is a still from a Holiday video, and the button overlay implies that clicking it will take you to the video.

To download: Right click the buttons below (Control-click or Command-click) then "Save as".  

play button

Light button

play button

Dark button

Next Buttons

action link size buttons: 

left   left

smaller buttons: 

left   left

Factoid overlay
factoid

Image size:

1000px by 600px

Specs

Factoid overlay:

480px by 124px

  • Background: white, 70% transparency
  • Size of the large number depends on the number, but should be large and attention-grabbing. Balance the number with the amount of text beside it. There should be 15px of padding between the content and the edge of the overlay.
  • The button is 40px tall, with 10px above and below the text and 20px to the left and right.
  • Save as a PNG, to preserve the transparency.

Back to Top