Wentworth Institute of Higher Education

Overview

Wentworth Institute of Higher Education employs a 'Vibrant Academic Modernism' aesthetic that balances professional credibility with contemporary energy. The design system centers on a bold purple primary (#5348c9) paired with complementary sky-blue accents (#6ec1e4), creating a visual identity that feels both aspirational and approachable for prospective and current students. The brand personality is confident, inclusive, and forward-thinking—speaking directly to learners' ambitions without condescension. The interface prioritizes clarity and navigation efficiency, recognizing that students juggle multiple information needs (course discovery, enrollment, support resources). Voice example: 'Start your degree in 2026 and join a community of innovators and leaders.'

Colors

The color system is anchored by Primary (#5348c9), a rich, saturated purple that commands attention on CTAs, active states, and key interactive elements. This is paired with Secondary (#6ec1e4), a soft sky-blue used for supporting accents, hover states, and secondary information hierarchies. Tertiary (#662d91), a deeper purple, provides additional depth for badges, tags, and tertiary actions. The surface stack uses clean, bright whites (#ffffff) for primary content areas, with subtle grays (#f2f2f2, #e6e6e6, #d9d9d9) for container differentiation and visual rhythm. On-surface text is set to #333333 for optimal readability (WCAG AA compliant at 16px body size). Error states use #cf2e2e for critical alerts. The primary-container (#ece6f6) provides a soft, tinted background for form fields an

Typography

The type system employs Montserrat (700–800 weight) for all display and headline levels, establishing a distinctive, modern voice that differentiates WIN from generic educational providers. Body copy uses the system font stack (-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, etc.) at 16px / 24px for optimal legibility on all devices. Display (85px, 800 weight) is reserved for hero headlines and major page titles; Headline-lg (48px, 700 weight) anchors section introductions; Headline-md (32px, 600 weight) breaks up content zones. Body-lg (18px, 400 weight) is used for introductory paragraphs and callout text, while Body-md (16px, 400 weight) serves as the default for all body copy. Label-md (14px, 600 weight) is applied to button text, form labels, and navigation items with +0.01em let

Layout

The layout follows a 12-column grid with a fixed max-width of 1024px, centered on the viewport. This constraint ensures content remains scannable and focused, critical for an educational site where users seek specific information (course details, enrollment deadlines, contact info). The spacing scale uses 8px as the base unit: xs (4px) for micro-adjustments, sm (12px) for tight groupings, md (24px) as the default section gutter, lg (40px) for major section breaks, and xl (64px) for hero padding and full-width container margins. Block-level elements (sections, cards, form groups) are separated by md (24px) vertically, with lg (40px) reserved for transitions between major content zones (hero to course listings, etc.). Horizontal gutters use md (24px) on desktop, scaling down to sm (12px) on

Elevation & Depth

Depth is conveyed through a three-tier shadow system combined with subtle background color shifts. Level 1 (Base/Surface): no shadow, white background (#ffffff) with 1px border in #cccccc. Level 2 (Standard Card): box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), background #f9f9f9 or #ffffff, used for course cards, form containers, and secondary content blocks. Level 3 (Elevated/Modal): box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), background #ffffff with 1px border in #d9d9d9, applied to modals, popovers, and primary action cards. Hover states on cards elevate from Level 2 to Level 3 with a 200ms ease

Shapes

The design system employs 'Accessible Roundness'—a philosophy that balances modern softness with professional clarity. Buttons and primary CTAs use full (50px) border-radius, creating pill-shaped elements that feel friendly and inviting while maintaining clear affordance as clickable objects. Cards and containers use lg (1rem / 16px) border-radius, providing subtle softening without appearing playful or casual. Form inputs use DEFAULT (0.5rem / 8px) border-radius, a minimal curve that preserves the input's rectangular clarity while avoiding harsh corners. Tab navigation uses 0 border-radius (s

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (#5348c9, 48px height, 12px 32px padding, 50px border-radius) use white text (Montserrat or system font, 14px, 600 weight) and a subtle shadow (0 4px 6px rgba(0, 0, 0, 0.1)). On hover, the background shifts to #662d91 with a 200ms ease-in-out transition and elevated shadow (0 8px 16px rgba(0, 0, 0, 0.15)). Secondary buttons (#e6e6e6 background, #333333 text, 1px #cccccc border) maintain the same dimensions and transition to #d9d9d9 background with #5348c9 text and #5348c9 border on hover. Both button types use cursor: pointer and disable pointer-events when in a disabled state (opacity: 0.5, cursor: not-allowed).

Containers & Surfaces Cards are the primary content container. Standard cards use #ffffff b

Do's and Don'ts

**Do**

• Do use the primary purple (#5348c9) exclusively for CTAs, active states, and focus indicators—never dilute it with secondary colors on the same element.
• Do apply the full (50px) border-radius to all buttons and pill-shaped elements to maintain the friendly, approachable brand voice.
• Do maintain 24px (md spacing) as the default vertical rhythm between sections; use 40px (lg) only for major transitions (hero to content, etc.).
• Do pair Montserrat (700–800 weight) headlines with system-font body copy to create clear visual hierarchy and ensure accessibility.
• Do test all interactive elements (buttons, inputs, tabs) with keyboard navigation and screen readers; ensure focus states are visible at 3px rgba(83, 72, 201, 0.1) minimum.
• Do use the secondary blue (#6ec1e4) for supporting accents and hover states on secondary actions, never as a primary CTA color.

**Don't**

• Don't use the primary purple for body text or large background areas—it reduces readability and dilutes its impact as an accent color.
• Don't apply border-radius values smaller than 8px (DEFAULT) to buttons or primary interactive elements; sharp corners feel cold and reduce affordance.
• Don't mix Montserrat and system fonts within the same headline or title; choose one per hierarchy level to maintain visual consistency.
• Don't overlay white text on the purple gradient hero without the 0 2px 4px rgba(0, 0, 0, 0.15) text-shadow; contrast will fail WCAG AA at small sizes.
• Don't use more than three colors in a single component (e.g., button with gradient background, colored border, and colored text); this creates visual noise.
• Don't set container max-width wider than 1024px; the layout will become difficult to scan and navigation will feel scattered.