Switch between the rendered Visual preview and the Raw DESIGN.md.
Manchester University's design system embodies institutional trust, academic excellence, and forward-thinking progress. The visual language combines bold, confident typography with a restrained color palette anchored by deep charcoal and bright gold accents. This creates an atmosphere of professionalism paired with approachable warmth, emphasizing community, growth, and transformational education. The design balances classic institutional authority with modern, accessible digital experiences. Photography and imagery dominate hero sections with atmospheric overlays, while intentional whitespace and generous typography breathing room reinforce the university's commitment to clarity and student-centered design.
Key Characteristics:
#0C0607, #000000) as primary dark anchor with warm gold (#EDB11F) for accents and CTAs#0C0607): Primary text, headings, and foundational UI elements; institutional color representing trust and authority#000000): High-contrast body text, navigation links, and critical information requiring maximum legibility#EDB11F): Primary accent and call-to-action elements; draws attention to key user actions like buttons and interactive components#DDEECC): Secondary accent for supporting visual elements and subtle highlights; provides warm contrast to dark palette#0693E3): Secondary interactive states, alternative emphasis elements#9B51E0): Tertiary interactive element; used sparingly for distinctive interactions#7A00DF): Alternative interactive state for depth hierarchy#007CBA, #006BA1): Specialized interactive contexts and link states#FFFFFF): Primary background, card surfaces, and contrast layer#969893): Secondary text, disabled states, and subtle borders#DDDDDD): Minimal borders and subtle dividers#EEEEEE): Alternative subtle background tint#F5F5F5): Form inputs and secondary container backgrounds#333333): Card edges and content container divisions#FCB900): Alert and warning states#CF2E2E): Error states and critical alertsPrimary: Clarendon Text Pro (serif), fallback stack: Georgia, 'Times New Roman', serif
Secondary: Roboto (sans-serif), fallback stack: 'Helvetica Neue', Arial, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Headline | Clarendon Text Pro | 75.87px | 700 | 84.21px | 0px | Hero section and major page titles; maximum visual impact |
| H1 / Large Heading | Clarendon Text Pro | 33px | 600 | 39.01px | 0px | Primary section headings and article titles |
| H2 / Medium Heading | Roboto | 24px | 800 | 32.16px | 0px | Secondary section headings and subsection titles |
| Body Large | Clarendon Text Pro | 33px | 500 | 39.01px | 0px | Large body copy and featured paragraphs |
| Body Regular | Roboto | 18px | 400 | 30.6px | 0px | Standard body text and paragraph copy |
| Body Small | Roboto | 20.7px | 400 | 20.7px | 0px | List items and compact body copy |
| Span / Label | Roboto | 18px | 400 | 30.6px | 0px | Inline labels and descriptive text |
| Caption | Roboto | 13.33px | 400 | normal | 0px | Footnotes, captions, and helper text |
Primary Button
background-color: transparentcolor: #000000font-family: Robotofont-size: 23.81pxfont-weight: 400line-height: 20.7pxpadding: 12px 24pxborder: 3px solid #EDB11Fborder-radius: 10pxbox-shadow: nonebackground-color: #EDB11F, color: #000000border-width: 4pxSecondary Button
background-color: transparentcolor: #000000font-family: Robotofont-size: 27.38pxfont-weight: 400line-height: 23.81pxpadding: 16px 28pxborder: 2px solid #0C0607border-radius: 0pxbox-shadow: nonebackground-color: #0C0607, color: #FFFFFFcolor: #969893, border-color: #969893Ghost Button (Text Link)
background-color: transparentcolor: #EDB11Ffont-family: Robotofont-size: 18pxfont-weight: 400line-height: 30.6pxpadding: 0pxborder: noneborder-radius: 0pxbox-shadow: nonetext-decoration: underline, color: #0C0607Standard Content Card
background-color: #FFFFFFcolor: #000000font-family: Robotofont-size: 18pxfont-weight: 400line-height: 30.6pxpadding: 0pxborder: 1px solid #333333border-radius: 0pxbox-shadow: nonewidth: 364pxheight: autoFeatured Card (with border)
background-color: #FFFFFFcolor: #000000font-family: Robotofont-size: 18pxfont-weight: 400line-height: 30.6pxpadding: 24px 28pxborder: 1px solid #333333border-radius: 0pxbox-shadow: rgba(0, 0, 0, 0.3) 0px 6px 30px 1px on hoverPage Container
background-color: #FFFFFFcolor: #000000font-family: Robotofont-size: 18pxfont-weight: 400line-height: 30.6pxpadding: 0pxborder: noneborder-radius: 0pxbox-shadow: nonemax-width: 1440pxmargin: 0 autoSearch Input
background-color: #FFFFFFcolor: #0C0607font-family: Robotofont-size: 18pxfont-weight: 400line-height: 27pxpadding: 0px 0px 0px 30pxborder: 0pxborder-radius: 0pxbox-shadow: noneheight: 100%width: 100%#969893border-bottom: 2px solid #EDB11FText Input
background-color: #F5F5F5color: #000000font-family: Robotofont-size: 13.33pxfont-weight: 400line-height: normalpadding: 10px 10px 10px 10pxborder: 1px solid #767676border-radius: 0pxbox-shadow: noneheight: 38pxwidth: 300pxborder-color: #EDB11F, outline: nonebackground-color: #EEEEEE, color: #969893Form Label
color: #0C0607font-family: Robotofont-size: 18pxfont-weight: 400line-height: 27pxmargin-bottom: 8pxPrimary Navigation Link
background-color: transparentcolor: #000000font-family: Robotofont-size: 20.7pxfont-weight: 400line-height: 30.6pxpadding: 12px 20pxborder: noneborder-radius: 0pxbox-shadow: nonecolor: #EDB11F, border-bottom: 2px solid #EDB11Fcolor: #EDB11F, font-weight: 600Navigation Container
background-color: #FFFFFFbox-shadow: rgba(0, 0, 0, 0.3) 0px 6px 30px 1pxpadding: 16px 40pxborder: noneMobile Menu Toggle
background-color: transparentcolor: #000000font-size: 24pxpadding: 12px 12pxborder: noneborder-radius: 0pxcolor: #EDB11FStandard Link
color: #0C0607font-family: Robotofont-size: 19pxfont-weight: 400line-height: 28.5pxtext-decoration: nonepadding: 1px 0px 1px 0pxborder: nonetext-decoration: underline, color: #EDB11FCTA Link (Styled Button)
background-color: #FFFFFFcolor: #0C0607font-family: Robotofont-size: 19pxfont-weight: 700line-height: 32.3pxpadding: 7px 19px 7px 19pxborder: 3px solid #EDB11Fborder-radius: 10pxbox-shadow: nonebackground-color: #EDB11F, color: #000000Accent Link
color: #EDB11Ffont-family: Robotofont-size: 18pxfont-weight: 400line-height: 30.6pxtext-decoration: nonecolor: #0C0607, text-decoration: underlineThe spacing system is built on an 8px base unit. All spacing values are multiples of 8px to maintain consistent visual rhythm and predictable layouts.
Context Usage:
76px top and bottom padding60px top and bottom padding24px–28px padding16px padding12px–20px padding20px–24px1440px for primary content container16px–24px between columnsManchester University's design prioritizes generous whitespace and breathing room. Content is intentionally spaced to reduce cognitive load and emphasize key messaging. Large whitespace areas between sections create visual pause points and guide the eye through content hierarchy. Single-column layouts on mobile expand to multi-column on desktop, maintaining consistent spacing relationships across breakpoints.
| Level | Treatment | Use |
|---|---|---|
| Level 0 (Flat) | No shadow | Primary content, cards, and text layers |
| Level 1 (Hover) | rgba(0, 0, 0, 0.1) 0px 2px 5px 0px | Dropdown menus, secondary elevation |
| Level 2 (Elevated) | rgba(0, 0, 0, 0.3) 0px 6px 30px 1px | Navigation header, modals, featured cards on hover |
Depth Philosophy: Manchester's design system uses minimal elevation and shadows to maintain a clean, modern aesthetic. Shadows are reserved for interactive moments—hover states, dropdowns, and modal overlays—creating subtle feedback without overwhelming the interface. The minimal shadow approach reflects the institutional preference for clarity and simplicity while still providing visual hierarchy through typography and color rather than spatial depth.
#EDB11F) for all primary call-to-action buttons and interactive accentsborder-radius: 10px for subtle softening0px or 10px—avoid intermediate values12px vertical spacing10px or intermediate values like 6px or 8px#DDEECC) as primary text color; use only as secondary accent highlight18px for body text without specific accessibility exemption#007CBA) or Purple (#9B51E0) as primary interactive colors; reserve Manchester Gold for high-priority CTAs28px inside form input fields8px spacing between adjacent elements#969893) for critical information or required field indicatorsborder-radius: 0px on CTA buttons styled with the gold border; these require border-radius: 10px| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | < 640px | Single-column layout; font-size: 16px–18px for body; full-width cards with padding: 16px; stacked navigation menu; padding: 32px section spacing |
| Tablet | 640px–1024px | Two-column grid layout; font-size: 18px for body; cards scale to fit container; padding: 40px section spacing; horizontal navigation with reduced item count |
| Desktop | 1025px–1440px | Multi-column layout (3–4 columns); full typography scale; max-width: 1440px container with centered alignment; padding: 60px section spacing; horizontal navigation fully expanded |
| Large Desktop | > 1440px | Maintain max-width: 1440px with centered alignment; padding increases to 76px for hero sections |
44px × 44px for all interactive elements (buttons, links, menu items)48px × 48px for optimal mobile usability8px between adjacent touch targets38px minimum on mobile, 40px–44px on desktop44px height minimum for mobile menu; horizontal spacing 12px–20px100% width containers; hide non-essential navigation items; collapse multi-column card grids to single stack; reduce section padding to 32px; stack hero content vertically with image below text50vw width cards in grid; 40px section padding; maintain heading scale with slight reduction on very small tabletsmax-width: 1440px container with centered alignment; 60px–76px section spacing#EDB11F)#0C0607) or Pure Black (#000000)#FFFFFF)#DDEECC)#969893)#CF2E2E)#FCB900)#333333) or Light Gray (#DDDDDD)#EDB11F for primary button borders and hover backgrounds—this is Manchester's signature interactive colorborder-radius: 0px by default on all components except inputs and CTA buttons (which use 10px)font-family: Clarendon Text Pro only to display headlines (h1, h5) and set font-family: Roboto for all body and interactive text18px font size for body text with line-height: 30.6px; never reduce below this without explicit override20px, 24px, 28px, 32px for paddings; 20px, 56px, 60px for margins between sectionsrgba(0, 0, 0, 0.3) 0px 6px 30px 1px—no shadows on resting state cardscolor: #000000 by default with color: #EDB11F + border-bottom: 2px solid #EDB11F on hovercolor, border, and padding values—no implicit defaultsborder: 3px solid #EDB11F, background-color: transparent, color: #000000, hover to inverse; secondary buttons: border: 2px solid #0C0607, expand or invert on hoverbackground-color: #F5F5F5, padding: 10px 10px 10px 10px, border: 1px solid #767676, border-radius: 0px; on focus add border-color: #EDB11F#0C0607 by default with underline on hover; CTA-style links are #EDB11F with text-decoration: underline on hoverborder: 1px solid #333333, border-radius: 0px, no shadow unless hovered1440px with centered alignment—no horizontal scrolling on desktop32px mobile, 40px tablet, 60px desktop; hero sections use 76px vertical padding