Purdue University

Overview

Purdue University's design system embodies **Institutional Modernism**—a visual language that merges academic gravitas with contemporary accessibility. The brand serves prospective students, current scholars, faculty, and alumni, communicating excellence in research, engineering, and discovery through a carefully calibrated palette of Boiler Gold (#cfb991), deep blacks, and strategic accent colors. The aesthetic is neither austere nor playful: it is confident, grounded, and purposeful, evoking the precision of engineering and the warmth of a welcoming community. The UI prioritizes clarity and hierarchy, using condensed sans-serif headlines (United Sans Condensed at 128px, 700 weight) to command attention, paired with humanist body copy (Acumin Pro at 16px, 400 weight) that invites engagement. Voice: authoritative yet approachable, data-driven yet human. Example: "Explore 200+ degree programs designed to launch your career in innovation."

Colors

The color system is anchored by **Boiler Gold** (#cfb991), Purdue's signature institutional accent—used exclusively on primary CTAs, focus states, and brand-defining interactive elements. This warm, earthy gold conveys tradition and prestige while remaining contemporary. The surface stack progresses from pure white (#ffffff) for primary content areas through carefully graded grays (#f5f5f5, #eeeeee, #e9ecef) for container hierarchy, ensuring legibility and visual separation without harsh contrast. **Primary usage**: Boiler Gold (#cfb991) on all "Request Information" and main action buttons; hover state shifts to #DDB945 (inverse-primary, slightly darker and more saturated). **Secondary accent** (#ff6900, luminous vivid orange) energizes calls-to-action in supporting contexts—event promotio

Typography

The type system enforces a **two-family hierarchy**: condensed display faces (United Sans Condensed, Impact, Arial Black) for headlines and hero content, paired with humanist sans-serif (Acumin Pro, Franklin Gothic) for body and UI text, with serif accents (Source Serif Pro) for editorial titles. **Display** (128px, 700 weight, -0.04em letter-spacing) commands hero sections and major page titles—used sparingly to maximize impact. **Headline-lg** (56px, 700 weight) for section breaks and feature titles; **headline-md** (40px, 700 weight) for subsections. **Title-lg** (24px, 600 weight, Source Serif Pro) introduces editorial content and card headers, adding warmth and distinction. **Body-lg** (18px, 400 weight, 28px line-height) for introductory paragraphs and feature descriptions; **body-md

Layout

The layout system employs a **12-column fluid grid** with a 1280px container max-width, ensuring responsive scaling from mobile (single column) through tablet (6 columns) to desktop (12 columns). **Gutter spacing** is fixed at 24px (md spacing token) between columns and sections, creating consistent rhythm. **Vertical rhythm** follows the spacing scale: section breaks use lg spacing (40px), card stacks use md spacing (24px), and internal component padding uses sm spacing (12px). Hero sections occupy full viewport height with 64px (xl spacing) top/bottom padding; content sections use 40px (lg spacing) for separation. The container max-width of 1280px ensures readability on ultra-wide displays while maintaining focus. White-space is generous—never less than 12px between interactive elements—

Elevation & Depth

Depth is conveyed through **subtle layering and precise shadows**, avoiding heavy drop-shadows that would feel dated. The elevation system uses three levels: **Level 1 (sm)**: 0 1px 2px rgba(0, 0, 0, 0.06) for subtle separation of input fields and low-emphasis cards. **Level 2 (md)**: 0 3px 8px rgba(0, 0, 0, 0.15) for standard cards, buttons on hover, and dropdown panels—the most frequently used elevation. **Level 3 (lg)**: 0 8px 24px rgba(0, 0, 0, 0.12) for modals, floating action elements, and elevated overlays. All shadows use a 15–24px blur radius and 0–8px vertical offset to create a sens

Shapes

The shape philosophy is **Architectural Precision**—sharp, rectilinear forms that reflect engineering discipline and institutional authority, with minimal rounding to maintain formality. **Border-radius scale**: sm (0.25rem / 4px) for small UI elements like badges and tight inputs; DEFAULT (0.5rem / 8px) for standard buttons, cards, and form fields; md (0.75rem / 12px) for larger cards and modals; lg (1rem / 16px) for hero sections and prominent containers; xl (1.5rem / 24px) for oversized modals and feature blocks; full (9999px) for pill-shaped badges and circular avatars. **Button radius** i

Components

Action Elements **Button-primary** is the dominant CTA: 48px height, 12px vertical / 24px horizontal padding, Boiler Gold background (#cfb991), black text (label-md weight), 8px border-radius, and md elevation (0 3px 8px rgba(0, 0, 0, 0.15)). On hover, the background shifts to #DDB945 (inverse-primary) and elevation escalates to lg (0 8px 24px rgba(0, 0, 0, 0.12)) with a 200ms ease-in-out transition. On active/press, apply transform: scale(0.98) to provide tactile feedback. **Button-secondary** uses a transparent background with a 2px solid Boiler Gold border, matching the 48px height and padding of primary buttons. On hover, the background fills with primary-container (#EBD99F) and text shifts to on-primary-container (#3d2f1a), maintaining the 2px border. Both button variants support

Do's and Don'ts

**Do**

• Do use Boiler Gold (#cfb991) exclusively on primary CTAs and focus states—it is the brand's signature and must not be diluted across secondary elements.
• Do maintain 48px minimum height for all interactive buttons and 44px for input fields to ensure touch-friendly targets and visual consistency.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) as the default shadow for cards and buttons; reserve lg elevation for modals and floating elements only.
• Do use United Sans Condensed (700 weight) for all headlines and display text to reinforce institutional authority and visual hierarchy.
• Do pair condensed headlines with generous white-space (40px+ section breaks) to prevent visual crowding and support readability.

**Don't**

• Don't use Boiler Gold on secondary buttons, badges, or non-interactive elements—reserve it for primary CTAs only to maintain brand distinction.
• Don't apply border-radius greater than 8px (DEFAULT) to standard buttons or form fields; this dilutes the architectural precision and feels inconsistent.
• Don't use flat design or remove shadows entirely; every interactive surface must have defined elevation to communicate clickability and hierarchy.
• Don't mix Acumin Pro body text with serif headlines in the same section; maintain the two-family hierarchy (condensed sans for headlines, humanist sans for body, serif for editorial titles only).
• Don't reduce padding below 12px (sm spacing) between interactive elements or below 24px (md spacing) inside cards; this creates cognitive overload and violates touch-target spacing.