MDPI Brand Design System Deep Dive

1. Brand Overview

MDPI is one of the largest open-access academic publishers in the world. Their website is a functional hub for researchers, editors, and readers — the audience is highly academic, detail-oriented, and impatient with fluff. The design language reflects that: minimal visual noise, conservative typography, and a utilitarian layout.

No gimmicks here. The site feels more like a well-maintained library catalog than a Silicon Valley startup landing page. That works for their audience — scientists value clarity and trustworthiness over “wow” animations.

The absence of a visible logo in the extracted dataset tells us something: brand recognition here is built less on a flashy mark and more on the name “MDPI” and its consistent typographic style. The favicon (favicon.ico) is the only visual brand stamp in the data, small but functional.

Colors? None extracted — which means the site likely leans heavily on default browser colors, minimal color accents, or server-rendered styles that don’t expose tokens in CSS variables. This isn’t unusual for academic publishing: they rely on a mostly monochrome base with occasional brand accents for links or headings. This approach minimizes distractions and keeps focus on the content.

Typography is conservative. The heading styles use Times with weights 700 and 400 — an old-school serif choice that screams “academic journal.” No Google Fonts. No variable fonts. No attempts at typographic branding through custom type. This is a deliberate decision: Times is universally available, readable in print-like layouts, and keeps the site looking serious.

Spacing uses an 8px grid — a practical choice for consistent rhythm. The extracted scale shows 8px, 16px, and a slightly odd 21.44px value (likely a line-height or typographic quirk). This tells us they’re not religious about sticking to exact multiples; they’ll break the rule if the typography demands it.

In short: MDPI’s design system is stripped of decorative excess. It’s built around trust, academic gravitas, and clarity — the design equivalent of a lab notebook. This works because the brand’s credibility comes from content and editorial rigor, not visual spectacle.

2. Color System

Here’s the thing: the extracted data shows no defined palette. No semantic colors, no CSS variables, no hex codes. That’s rare for a brand analysis, but it’s telling. MDPI likely uses hardcoded colors in stylesheets without tokenization, or they rely on default black/white/blue behavior from browsers.

This means the “color system” is effectively invisible in the CSS data — but from a design system perspective, that’s still a choice worth analyzing.

2.1 Primary Colors

No primary color token is declared. The absence of a defined “brand blue” or “brand green” suggests MDPI prioritizes content legibility over brand-colored UI. For an academic publisher, this makes sense: primary actions are often links, which default to browser blue (or a single site-wide override).

Psychology: This keeps MDPI’s site feeling neutral. The lack of strong accent colors means the content — journal titles, article abstracts — carries the visual weight.

Competitor comparison: Many publishers (Elsevier, Wiley) have strong orange or blue accents. MDPI’s neutral approach makes them feel less like a corporate entity and more like a public resource.

2.2 Complete Palette

No palette extracted — table is empty:

2.3 Color Relationships

Without tokens, we can’t calculate contrast ratios. But given the likely default use of black text on white backgrounds, WCAG AA/AAA compliance is almost guaranteed for body copy. Where they might slip is link contrast — default blue on white passes, but brand overrides could reduce accessibility.

2.4 Usage Guide

If MDPI were to tokenize their colors:

• Keep backgrounds pure white for maximum contrast with Times serif text.
• Use a single accent color for links and CTAs — and ensure it meets WCAG AA on white.
• Avoid using multiple accent colors; this audience values consistency.

3. Typography

Typography is the most clearly defined part of MDPI’s system.

3.1 Font Families

Heading font: "Times", no declared fallbacks in extracted data. This is the standard serif font available on all systems (Times New Roman on most).
No Google Fonts. No Adobe Fonts. No variable fonts. Everything is system-native.

This choice is pragmatic:

• No licensing issues.
• Consistent look in print and web.
• Immediate association with academic publishing.

3.2 Type Scale

Extracted styles:

The duplication of heading-1 with two sizes is odd. Likely one is a responsive override or a secondary heading style mislabeled. The 16px weight 400 version could be used for subheadings or smaller title bars.

3.3 Hierarchy

The jump from 16px body/headline to 32px primary heading is a clean 2x scale — easy to maintain in CSS and visually clear. In practice:

• 32px 700 — page titles.
• 16px 400 — body copy or minor headings.

The lack of intermediate sizes means hierarchy is created through weight, spacing, and layout rather than a complex type scale. This keeps things simple but can feel flat if overused.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid.

Extracted values:

The presence of 21.44px is interesting — not a clean multiple of 8. This is probably the result of typographic rhythm matching the serif font’s metrics.

4.2 Layout

No breakpoints extracted — which means layout is likely handled with hardcoded media queries in CSS, not exposed via variables.
Given the audience, expect:

• Narrow content columns for readability.
• Minimal responsive changes beyond collapsing navigation.

5. Visual Elements

Border Radius

No values extracted — likely a flat, square-cornered design throughout. This reinforces the academic, print-like feel.

Shadows

No shadows. Again — print metaphor. Depth is conveyed through spacing and grouping, not elevation.

Borders and Dividers

No extracted border styles. Likely subtle 1px lines in tables and navigation.

6. Components

The extracted data shows no styled components, meaning MDPI’s component library is either:

• Not tokenized in CSS variables, or
• Minimal, relying on browser defaults.

Still, we can deduce:

6.1 Buttons

Probably rare. Where present:

• Square corners.
• Solid background or simple bordered style.
• No hover animation beyond color change.

6.2 Links

Default link styling (blue, underlined) or a single brand override.
Hover likely changes color or underline behavior.

6.3 Forms

Inputs: Standard HTML forms with minimal styling.
Focus states: Browser default outlines.

6.4 Cards

Unlikely in the strict sense — content grouping handled via tables and lists.

7. Design Tokens

:root {
  /* Colors - none extracted */
  
  /* Typography */
  --font-heading-family: "Times";
  --font-heading-1-size: 32px;
  --font-heading-1-size-rem: 2.00rem;
  --font-heading-1-weight: 700;
  --font-heading-1-alt-size: 16px;
  --font-heading-1-alt-size-rem: 1.00rem;
  --font-heading-1-alt-weight: 400;

  /* Spacing */
  --spacing-8px: 8px;
  --spacing-8px-rem: 0.50rem;
  --spacing-16px: 16px;
  --spacing-16px-rem: 1.00rem;
  --spacing-21_44px: 21.44px;
  --spacing-21_44px-rem: 1.34rem;

  /* Border Radius - none extracted */
  
  /* Shadows - none extracted */
}

8. AI Coding Assistant Prompt

# MDPI Design System Specification

This design system is extracted directly from MDPI's production site. All values are taken from live CSS — no guesses.

## System Prompt
You are an MDPI design expert. Build UIs matching their visual language exactly.

## Brand Context
MDPI is an academic publisher. Their design prioritizes clarity, trust, and a print-like reading experience. Minimal color, conservative typography, and square corners dominate. Content is the brand.

## Color Palette
- None extracted — use black (#000) for text, white (#fff) for backgrounds, and a single accent color for links (browser default blue or MDPI's actual override if available).
- Usage: Keep UI neutral; accent only interactive elements.

## Typography
- Font family: "Times"
- Sizes:
  - Heading-1: 32px (2.00rem), weight 700 — page titles
  - Heading-1-alt: 16px (1.00rem), weight 400 — subheadings
- No custom line heights; follow font metrics.

## Spacing & Grid
- Base: 8px
- Scale: 8px, 16px, 21.44px
- Usage: 8px for tight gaps, 16px for standard padding, 21.44px for line-height-based spacing.

## Border Radius
- None extracted — use 0px for all elements.

## Shadows & Depth
Flat design — no shadows. Use borders or spacing for separation.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #000; /* or brand accent */
  color: #fff;
  padding: 8px 16px;
  border-radius: 0;
  font-family: "Times";
  font-size: 16px;
  font-weight: 700;
  border: none;
}
.btn-primary:hover { background: #222; }
.btn-primary:focus { outline: 2px solid #000; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Navigation Links
```css
a {
  color: blue; /* default */
  text-decoration: underline;
}
a:hover { text-decoration: none; }
```

### Input Fields
```css
input, select, textarea {
  border: 1px solid #000;
  padding: 8px;
  border-radius: 0;
  font-family: "Times";
  font-size: 16px;
}
input:focus { outline: 2px solid blue; }
```

## Layout & Responsive Rules
- Max content width: not extracted — use ~960px for readability.
- Page padding: 16px on mobile, 32px on desktop.
- Grid gap: multiples of 8px.

## Interaction Rules
- Transition timing: none, or 150ms ease for hover/focus.
- Focus indicators: high-contrast outlines.
- No motion on content.

## DO List
- Use "Times" for all text.
- Maintain 8px grid for spacing.
- Keep corners square.
- Keep colors neutral except for links/actions.
- Use bold weight for headings.

## DON'T List
- Don't add shadows.
- Don't round corners.
- Don't introduce new colors.
- Don't animate content transitions.

## Code Examples

### Button
```css
.btn-primary {
  background: #000;
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 0;
}
```

### Card
```css
.card {
  background: #fff;
  border: 1px solid #ccc;
  padding: 16px;
}
```

### Form Input
```css
.input {
  border: 1px solid #000;
  padding: 8px;
  font-family: "Times";
}
```

9. Summary

TL;DR — MDPI’s design is minimal, academic, and print-like. No flashy color palette, no rounded corners, no shadows. Typography is pure Times, spacing follows an 8px grid with occasional typographic exceptions. Everything is built to keep attention on the content.

Brand Keywords:

• academic-minimalist
• print-inspired
• color-neutral
• serif-traditional
• grid-disciplined