Elmhurst University

Overview

Elmhurst University's design system embodies Institutional Confidence with Accessible Warmth—a sophisticated yet approachable aesthetic rooted in liberal arts tradition. The brand serves prospective students, families, and academic communities seeking clarity about educational pathways and campus life. The visual language combines deep navy authority (rgb(0, 45, 116)) with vibrant gold accents (rgb(234, 170, 0)) and crisp sans-serif typography, creating a hierarchy that feels both prestigious and inviting. The emotional response is one of belonging: "You are capable, you are welcome, and your future starts here."

The brand voice is direct, confident, and human-centered. Elmhurst speaks in active verbs and concrete outcomes rather than abstract aspirations. Vocabulary favors clarity over jargon: "Go Far and Do Well" rather than "transformative educational synergies." Tone is warm but never patronizing, authoritative but never distant. Example sentence in brand voice: "Our students don't just study business—they lead it, from day one through their careers."

Colors

The color system operates on a three-tier hierarchy: Navy (#002d74) establishes institutional authority and appears in primary navigation, headers, and secondary CTAs. Gold (#eaaa00) serves as the signature accent, reserved for primary call-to-action buttons, highlights, and moments requiring immediate attention. Cyan (#00a0df) provides a tertiary accent for links, hover states, and supporting interactive elements. The surface palette ranges from warm cream (#fbf5ea) for content backgrounds to neutral grays (#e1e1e1) for dividers and subtle containers, maintaining readability across all contexts. Navy is used for: navigation bars (background: rgb(0, 45, 116)), secondary buttons (background: rgb(0, 45, 116), color: rgb(255, 255, 255)), and active states. Gold is used for: primary CTAs (back

Typography

The type system pairs serif headlines with humanist sans-serif body text, creating visual contrast that signals hierarchy while maintaining warmth. Hoefler Text (serif) is used exclusively for display and headline levels (54px, 40px, 28px), establishing institutional gravitas and differentiating from commodity web fonts. Gotham SSM (sans-serif) handles all body, label, and UI text (18px down to 13px), providing excellent screen legibility and a contemporary feel. Font weights are intentional: headlines use 400 (regular) for elegance, body text uses 400 for readability, and labels use 600–700 for emphasis on interactive elements. Letter-spacing on headlines is tight (-0.02em to -0.01em) to reinforce formality, while body text uses default spacing for comfort. Apply text-shadow: 0 2px 4px rg

Layout

The layout system uses a 12-column grid with a fixed max-width of 1280px, centered on the viewport. Horizontal padding (gutter) is 24px on desktop, reducing to 16px on tablets and 12px on mobile. Vertical rhythm is established through the spacing scale: section breaks use lg (40px), component internal spacing uses md (24px), and micro-interactions use sm (12px). Hero sections occupy full viewport height with a semi-transparent overlay (rgba(0, 0, 0, 0.35)) to ensure text legibility over photography. Content cards are arranged in flexible grids (2–3 columns on desktop, 1 on mobile) with 24px gaps between items. The container-max-width of 1280px ensures comfortable line lengths for body text (approximately 65–75 characters per line at 16px). White space is generous but purposeful: never coll

Elevation & Depth

Visual hierarchy is conveyed through subtle shadows and layering rather than dramatic depth. The elevation system uses three levels: Level 1 (Base) has no shadow, representing the page background and default card state. Level 2 (Standard Card) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used for cards, modals, and interactive containers at rest. Level 3 (Elevated/Hover) applies box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), triggered on card hover and used for floating action buttons or modal overlays. Shadows are always soft (blur-radius 8–24px) and warm-tinted (black at 12–15% opacity) t

Shapes

The shape philosophy is Architectural Clarity: sharp enough to feel intentional and modern, rounded just enough to feel approachable. Border-radius follows a consistent scale: buttons and inputs use DEFAULT (0.5rem / 8px), cards and containers use md (0.75rem / 12px), and badges use full (9999px) for pill-shaped elements. Avoid mixing radii within a single component family—all primary buttons must use the same radius. The reasoning: 8px is the minimum radius that reads as "intentionally rounded" rather than "slightly worn," while 12px on cards creates visual softness without sacrificing the cl

Components

Action Elements Buttons follow a strict hierarchy: primary (gold background, black text, 48px height, 20px 24px padding) is used once per page for the main conversion goal (e.g., "Apply Online"). Secondary (navy background, white text, same dimensions) is used for supporting actions (e.g., "Learn More"). Tertiary (cyan background, white text, 40px height) is used for inline links and lower-priority actions. All buttons use label-sm typography (13px, 700 weight) and DEFAULT border-radius (8px). Hover states transition background-color over 200ms with no delay; active states darken the background by 15% and add a 2px inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.2)). Focus states add a 3px outline in the secondary color with 2px offset (outline: 3px solid #002d74; outline-offset: 2px).

Do's and Don'ts

**Do**

• Do use navy (#002d74) for structural elements (headers, navigation, secondary CTAs) to anchor the page and signal authority.
• Do reserve gold (#eaaa00) exclusively for primary call-to-action buttons and critical highlights—overuse dilutes its impact.
• Do pair Hoefler Text headlines with Gotham SSM body text; never reverse or mix serif/sans-serif within the same typographic level.
• Do maintain at least 24px vertical spacing between major sections and 12px between components; white space is a design tool, not wasted space.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards at rest and 0 8px 24px rgba(0, 0, 0, 0.12) on hover to create subtle depth without drama.
• Do test all interactive elements with keyboard navigation; focus states must use a visible 3px outline in the secondary color with 2px offset.

**Don't**

• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the system's coherence.
• Don't apply shadows with spread-radius or blur-radius exceeding 24px; they read as blurry rather than elevated.
• Don't mix serif and sans-serif fonts within a single component or section; each has a specific role in the hierarchy.
• Don't collapse spacing below 12px (sm) between interactive elements or below 24px (md) between major sections; cramped layouts feel chaotic.
• Don't use gold (#eaaa00) for text or small UI elements; it has poor contrast over light backgrounds and should be reserved for large, solid shapes.
• Don't override button heights or padding to fit content; instead, adjust typography size or component width to maintain the 48px standard.