ANIMALS IN THE ZOO (Heading 1)​

There are lots of animals in the Zoo from all different biomes. (content)​

BIOMES AT THE ZOO (Heading 2)​

There are many different biomes represented at the Zoo. (content)​

​Tropical Rainforest biome (Heading 3)

There are many different classes represented in the Tropical Rainforest at the Zoo. (content)​

Amphibians (​Heading 4)

Some amphibians that live in the tropical Rainforest include frogs & salamanders.​

FROGS​ (heading 5)

Some types of frogs from the Tropical Rainforest that you'll see in the Zoo are Gladiator Tree Frog and the Green Poison Arrow Frog.

Subheading of Frogs​ (heading 6)

This subheading has to be a sub-idea about frogs that would live in the Tropical Rainforest and also be seen at the zoo.

​SALAMANDERS (Heading 5)​

One type of salamanders from the Tropical Rainforest that you'll see in the Zoo is the Giant Chinese Salamander.​

reptiles (​Heading 4)

Some reptiles that live in the tropical Rainforest include sea turtles & chameleons.

Desert Biome (Heading 3)

There are many different classes represented in the Desert Biome at the Zoo. (content)

Another section about Animals in the zoo but not related to biomes (Heading 2)

Here is another paragraph about this new section that talks about animals in the zoo but not related to their biomes. (content)

Heading 1

font: acumin-pro-extra-condensed
color: #000000
font-size: 48px
font-weight: 600
line-height: 1.22

Heading 2

font: acumin-pro-extra-condensed
color: #70727B
font-size: 36px
font-weight: 500
line-height: 1.2

Heading 3

font: United Sans
color: #000000
font-size: 26.4px
font-weight: 700
line-height: 1.2

Heading 4

font: United Sans
color: #70727b
font-size: 24px
font-weight: 500
line-height: 1.2

Heading 5

font: acumin-pro
color: #000000
font-size: 19.8px
font-weight: 500
line-height: 1.2

Heading 6

font: acumin-pro
color: #70727B
font-size: 17.6px
font-weight: 500
line-height: 1.2

Paragraph

font: acumin-pro
color: #000000
font-size: 18px
font-weight: 300
line-height: 1.5

The chart below shows what text colors can be used on what background colors for all of the brand colors. A safe rule of thumb is never put the same color families on top of each other (gold on gold, gray on gray) - for example, never put boilermaker gold on any of the other gold brand colors and vice versa. Click on the image below to view the chart as a PDF.

Text on the images

• Every image must have descriptive alt text that conveys its meaning. 

• Use plain text on the page to describe important information.

• If an image includes essential text (e.g., in a graphic or flyer), be sure to include all that information in the body of the page or as a detailed alt text description.

• Be mindful when adding alt text descriptions to images, as some users rely on screen readers and other assistive technologies to access content.

• Also, name your image files appropriately, as doing so helps with search engine indexing (Google) and makes it easier for you to locate and identify the image later.

compressing and resizing

Please resize images before you add them to Cascade or before handing them to the client. Large images can slow down page loading times, negatively impacting user experience and potentially driving visitors away.

Check the Cascade User Guide for resources on how to work with images. 

Resize/Edit your Images (crop or change the dimensions (length & width))

• How to resize an image for the web - in pixels and kilobytes (kaydee.net)
  
• Simple Image Resizer, resize online images without losing quality
• Bulk Image Resizer | Bulk Resize Images Online - RedKetchup
• Pixlr.com's freemium photo editor, animation, and design tools

Compress your Images (reduce file size to below 1MB)

• Compress to WebP, PNG and JPG
• Compress jpg/jpeg, png, or gifs
• RedKetchup Image Compressor

For web projects, they need to be run through a member of the web team before going to the client. This helps ensure that fonts and colors are aligned with Purdue’s branding guidelines and designs meet basic accessibility standards (contrast, readability, etc.).

Please follow the next checklist:

1. Use Web-Safe and Brand-Approved Fonts
   Only use fonts that are approved for web use and included in Purdue’s digital brand guide. Avoid using decorative fonts that may not render correctly across devices or screen readers.

2. Ensure Sufficient Color Contrast (e.g., Parallax Effect Background)
   Check that text placed over backgrounds or images meets WCAG contrast standards (minimum 4.5:1 for normal text, 3:1 for large text). Tools like the WebAIM Contrast Checker or Siteimprove plugins can help.

3. Avoid Text in Images (When Possible)
   Do not embed essential information (like event details or calls to action) in images. Screen readers cannot access text in images, and this approach fails accessibility checks. 

4. Optimize for Web Performance
   Export assets in appropriate formats and sizes:

• Use SVG for simple icons or vector graphics.
• Use compressed JPG or WebP for photos.
• Keep file sizes under 1MB where possible to improve page load times.

1. Coordinate on Image Dimensions
   Confirm with the web team what dimensions or aspect ratios work best for different page components (e.g., hero banners, thumbnails, social media sharing, cards).

This means: 

• Text must remain accessible and readable without relying solely on animation. 

• Animations should be perceivable and operable for all users, including those using assistive technologies or with motion sensitivity. 

• No essential information should be lost if the animation does not trigger (especially important on mobile, where hover states may not function) (WCAG 1.3.1 – Info and Relationships). 

• Users must be able to pause or stop any moving, blinking, or scrolling content that starts automatically and lasts more than 5 seconds (WCAG 2.2.2 – Pause, Stop, Hide). 

• On mobile screens, where hover effects are often unavailable, you will need to ensure that the same information is available through tap or static text so all users have equal access.