brynmawr.edu website design: fonts, colors and UI patterns

Overview

The Bryn Mawr College website presents a distinguished academic visual system that balances institutional heritage with contemporary clarity. The design relies on a confident pairing of classical display typography—serif and tall condensed sans-serif—against the utilitarian warmth of Proxima Nova for body content. The color palette is intentionally restrained: deep navy provides authoritative structure, warm orange serves as the primary interactive accent, and a muted teal appears as a subtle decorative rule. Generous white space and crisp rectangular forms reinforce the academic seriousness of the institution while allowing photography and content to breathe.

The system is organized around clear content hierarchies. Section headings command attention through scale and distinctive type choices, while body content remains highly readable through measured line height and careful weight contrast. Interactive elements are marked consistently with orange, creating a predictable visual language for links, buttons, and accordion controls. The overall impression is one of thoughtful restraint—every element serves a communicative purpose without decorative excess.

Colors

The navy dominates the typographic hierarchy, appearing in all major headings and the persistent border lines that separate content sections. This deep blue carries institutional weight without the harshness of pure black. Orange is reserved for action and emphasis—accordion expand icons, inline links, and interactive markers—creating a warm, approachable counterpoint to the formal navy. The teal appears sparingly as a thin horizontal rule beneath display headings, providing a subtle atmospheric accent that softens the transition between sections.

Yellow functions as the high-visibility action color, appearing most prominently in call-to-action buttons against photographic content. The white canvas is integral to the system's breathing room; even when content overlaps photography, as in featured cards, the overlapping panel maintains a clean white ground. The black token serves as a fallback for body text where maximum contrast is required, though navy remains the preferred text color for brand consistency.

Typography

The typographic system draws on multiple families from the supplied source. Ivy Mode, a refined serif, handles the most prominent display moments with elegant, slightly condensed letterforms and a classical academic sensibility. Dunbar Tall, a narrow sans-serif with substantial weight, provides bold structural headings that feel modern and authoritative. The Dunbar Tall family includes Dunbartall-600 as a semibold weight variant. Proxima Nova, designed by Mark Simonson and available from Mark Simonson Studio Llc, anchors the system as the workhorse family for all body content, labels, and navigation. The Proxima Nova family includes Proximanova-600 for semibold applications and Proximanova-Italic Regular for emphasized inline text. Turnip Regular-Italic appears as an additional italic serif option for editorial or pullquote contexts. Verify licensing for these families before production use.

Type sizes are established at whole-number multiples of the 4px relative unit. The display sizes at 48px and 40px create clear hierarchy without excessive scale. Body text at 16px maintains comfortable readability with generous 1.6 line height. The 14px label and navigation sizes provide functional compactness while preserving legibility. Weight distinctions are purposeful: Regular for flowing text, Semibold for labels and navigation, and Bold for emphasis and accordion questions.

Layout

The layout follows a centered, contained model with generous horizontal margins. Content areas appear to max out at approximately 1200px, creating comfortable reading measure and clear focal points. Sections are separated by substantial vertical whitespace—typically 5rem or more—allowing each content block to establish its own visual territory.

The grid is fundamentally single-column for text content, with accordions and body copy flowing full-width within the container. Featured content breaks this pattern through asymmetric composition: photography extends to the container edges while an overlapping white content panel intrudes from the bottom, creating depth and visual interest. This overlap technique—approximately 2rem of vertical intrusion—connects the image and text without fully separating them.

Horizontal rules in navy or teal consistently demarcate section boundaries. The teal rules appear specifically beneath display headings, while navy rules separate major content zones like accordion groups. Internal spacing within components follows a 1.5rem rhythm for related elements, expanding to 2.5rem or more between distinct content blocks. The accordion pattern demonstrates the system's approach to density: each item is separated by a thin navy border, with internal padding keeping text comfortably clear of edges.

Visual language

The visual language communicates academic excellence through restraint and precision. Photography is treated as immersive content, often full-bleed within containers, with subjects shown in active, natural contexts rather than staged portraits. The yellow sunburst motif visible in featured imagery provides a subtle brand mark that echoes the yellow action color without dominating composition.

Geometric discipline pervades the system. All corners are sharp—zero border-radius on buttons, panels, and cards—reinforcing the institutional seriousness. The only softness comes from color and photography. Typography carries the expressive load: the contrast between Ivy Mode's classical curves and Dunbar Tall's vertical rigidity creates visual tension that feels both historic and contemporary.

Iconography is minimal and functional. Accordion controls use simple plus and minus marks in orange, drawn with thin strokes that feel precise rather than playful. Links are indicated through color change rather than underlines, maintaining clean text lines. The overall effect is of a system that trusts its content and typography to communicate, using color and space as supporting instruments rather than primary voices.

Components

Accordion

The accordion is a primary content organization pattern, used extensively for FAQs and structured information.

• Anatomy: Each item consists of a trigger row containing an orange icon (plus for collapsed, minus for expanded) and bold question text, followed by an expandable content area with body text and optional inline links.
• Surface: Trigger rows have no background, separated by 1px navy borders. Expanded content sits below the trigger with additional vertical padding.
• Typography: Question text uses body-bold at 1rem in navy. Body content uses body at 1rem in navy. Inline links within content appear in orange.
• Shape: Rectangular with sharp corners. Borders extend full-width.
• Spacing: Trigger padding is approximately 1.25rem vertical. Content padding below trigger is 1.5rem. Group controls ("Expand All", "Collapse All") sit above the accordion with 1.5rem separation.
• Composition: Items stack vertically with no gap between borders. Group-level controls use the same orange icon language.
• Variants: Expanded state reveals content and swaps plus to minus. Collapsed state shows trigger only.

Featured Article Card

Used for program highlights and editorial content, this component pairs photography with overlaid text.

• Anatomy: Full-width photograph with a white content panel overlapping the bottom portion. Panel contains a display heading, optional descriptive text, and a yellow call-to-action button.
• Surface: Photographic background with white overlay panel. Button uses solid yellow background with dark text.
• Typography: Heading uses section-display or hero-display in navy. Button uses label in dark text on yellow.
• Shape: Sharp corners throughout. Panel overlaps image by approximately 2rem vertically.
• Spacing: Internal panel padding is approximately 2rem. Button has compact padding of 0.75rem horizontal and 0.5rem vertical.
• Composition: Image dominates visually; panel anchors the composition and provides readable text ground.

Section Header

A recurring pattern that introduces content zones.

• Anatomy: Display heading followed by optional body text, separated from content below by a horizontal rule.
• Surface: White background. Rule may be teal (beneath display headings) or navy (between major sections).
• Typography: Heading uses hero-display or section-display. Subtext uses body.
• Shape: Rule is 1px, full container width, positioned with 1.5rem clearance below text.
• Spacing: Heading to subtext is 1rem. Subtext to rule is 1.5rem. Rule to subsequent content is 2.5rem.

Responsive behavior

The design appears optimized for desktop viewing with substantial content width. At narrower viewports, the contained layout should maintain horizontal margins of at least 1.5rem to preserve readability. The accordion pattern naturally adapts to any width, though touch targets for expand icons should increase to a minimum 44px height on mobile devices.

The featured card's overlapping panel should transition to full-width below the image on narrow screens, eliminating the overlap to prevent excessive text compression. Display type sizes should reduce by approximately 25% at tablet widths and 35% at mobile widths to maintain proportional hierarchy. The multi-column group controls ("Expand All", "Collapse All") should stack vertically on mobile with adequate tap spacing.

Navigation, not fully visible in the supplied images, should collapse to a hamburger menu or simplified pattern below approximately 900px, preserving the navy and orange color language for interactive states.

Practical implementation guidance

### Preserve - The sharp-cornered, zero-radius aesthetic on all interactive and container elements - The navy-orange color relationship for all interactive states and emphasis - The distinctive type pairing: Ivy Mode for display, Dunbar Tall for bold structure, Proxima Nova for body - The generous whitespace between sections—resist compressing vertical rhythm - The thin, full-width rules as section demarcation rather than heavy container borders

### Avoid - Rounded corners on buttons, cards, or panels—the system's rectangular discipline is intentional - Underlined links in body text; color change to orange is the established link pattern - Background colors behind accordion content; the white canvas and border separation is sufficient - Mixing display typefaces arbitrarily; Ivy Mode and Dunbar Tall serve distinct hierarchical roles

### Recommended build order 1. Establish the type scale with all families loaded and fallback stacks configured 2. Implement the section header pattern with teal and navy rules as the foundational content separator 3. Build the accordion component with proper icon state management and border rhythm 4. Create the featured card with overlapping panel and yellow call-to-action 5. Refine spacing tokens across all components, ensuring consistent 1.5rem content gaps and 5rem section separation

### Accessibility - Ensure orange text and icons meet minimum contrast ratios against white backgrounds; the warm orange may need darkening for small text compliance - Provide visible focus indicators on accordion triggers and buttons, using navy outlines or inverted color states - Maintain semantic heading hierarchy so Ivy Mode display headings map to appropriate h1-h2 levels and Dunbar Tall subheads follow sequentially - Include aria-expanded and aria-controls attributes on all accordion implementations - Ensure the yellow call-to-action buttons maintain sufficient contrast between text and background; consider navy text on yellow if pure black fails compliance

Scope note

This guide covers the content page and featured article patterns visible in the supplied admissions and program pages. Global navigation, footer systems, form components, and mobile-specific layouts were not present in the source material and are not specified. Measurements are practical adaptation targets derived from visible proportions. Motion, hover states, and loading behavior should be implemented with standard accessibility practices rather than specific source-defined patterns.

More website design guides

Browse website design guides by pattern and website.