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.
![Default Header Banner](/_images/default-banner.png)
Default Banner Content
![Image Banner](/_images/chevron-banner.png)
Image Banner Content
![Short Image Banner Content](/_images/short-banner.png)
Short Image Banner Content
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](/_images/_logo-section/downloads/1000-horizontal-full-color.jpg)
SDSU Horizontal Logo: Full-Color
![SDSU Logo for darker backgrounds](/_images/_logo-section/downloads/1000-horizontal-white.jpg)
SDSU Horizontal Logo: White One-Color
The university logos cannot be modified in any way. Manipulations and interpretations dilute the integrity of our brand identity. Examples of logo misuse.
Links and Buttons
For example, a text link would look like this:
example link