Design Elements

Typography

Use of brand specific fonts across all SDSU websites helps maintain consistency in branding. Proxima Nova and Brandon Grotesque are the two typefaces used for the web. Brandon Grotesque is reserved for headings and Proxima Nova should be used for body text.

Images

• Use images that have proper waivers and provide image credits where needed. Utilize the brand portal photography page for image options.
• Resize images using tools like Adobe Photoshop, Gimp or Canva before uploading them to web. Keep the image size under 200kb for a faster page load time.
• Check for image dimensions across all screen sizes and devices and ensure that the image dimensions used fill up the image container width.
• Ensure that the images used are of high quality and do not appear blurry across different screen sizes.
• We recommend using JPEG format for photographs and PNG format for graphics/illustrations. When in doubt, save in both formats and compare size vs quality.

Videos

Keep your video short so your audience will want to consume the content.  In general, website videos should be less than three minutes.

Color palette

The color palette for the web should follow the SDSU brand standard color scheme. Using a consistent color palette promotes brand identity and provides a seamless experience for the users.

• SDSU red (#A6192E) is reserved for hyperlinks and indicates linked items.
• Teal (#00A39D, #008080) and charcoal (#2D2828) to be used for:
  • Overlays
  • Decorative lines
  • Photographic designs
• Color contrast, legibility, and ADA compliance should always be considered when designing with the color palette. To check color contrast ratios, use the WebAIM Color Contrast Checker tool.

Hero banners

We recommend using a chevron image banner or video banner on the homepage of a site, short image banner for secondary pages and a default banner(without image) for all tertiary pages. 

If using a video banner, do not include text in your video.  Video length should not be longer than 40 seconds.  You may need to reposition the video in the player to ensure the content is displayed appropriately due to the horizontal nature of the banner.  Contact the multimedia team for video production support at [email protected].

SDSU Primary Logos

Logo variations available for web are as below:

SDSU Horizontal Logo: Full-Color

For use on light backgrounds

SDSU Horizontal Logo: White One-Color

For use on dark backgrounds

The university logos cannot be modified in any way. Manipulations and interpretations dilute the integrity of our brand identity. Examples of logo misuse.

More information on logos

Links and Buttons

For example, a text link would look like this:
example link

A cta button would look like this:
example