Wiley Design System Deep-Dive

1. Brand Overview

Wiley is a heavyweight in academic publishing, research, and learning solutions, and their design system reflects that — serious, highly structured, but with enough warmth to avoid feeling sterile. The vibe is professional first, approachable second. Think “trusted institution meets modern web.”

Their site reads like it’s built for two audiences: academic professionals who expect clarity and precision, and the broader learning community who need quick navigation and a sense of credibility. You don’t get whimsical illustration, you get clean geometry, restrained color, and typography choices that balance authority with legibility.

The philosophy here is minimal ornamentation. Black (#000000) is the semantic primary color. It’s used unapologetically for text, key headings, and foundational UI. The secondary (#f2f2eb) is a soft, muted off-white — not pure white, but slightly warm, which keeps the site from feeling harsh. This combination says: “We’re serious, but human.”

The rest of the palette is functional. There’s a deep teal (#003b44), a bright green (#00d875), and multiple shades of grey (#302f2f, #8c8b89) used as accents and control states. These are not decorative — they’re doing heavy lifting in CTAs, borders, and state changes.

Typography is pragmatic. Inter is the star, paired with Arial/Helvetica for legacy and system consistency. IBM Plex Mono shows up for uppercase microtext and technical contexts. This mix covers display, body, and code-like elements without losing coherence.

Buttons, links, and inputs are restrained but clear. No over-the-top gradients or animations — hover states are subtle, active states are crisp. Border radii are tight (4px, 8px) except for pill forms (50px, 50%) where they want emphasis. Shadows are rare — depth is mostly from borders.

Overall: Wiley’s design system is built for clarity, trust, and efficiency. It’s not trying to be trendy, it’s trying to be timeless.

2. Color System

2.1 Primary Colors

Primary: #000000 — The anchor of the system. It’s everywhere: headings, text, icons. Black is absolute; it doesn’t shift between states beyond opacity changes.

Secondary: #f2f2eb — Softened off-white. Warmer than pure white, which keeps contrast high without looking stark. Acts as background for light mode and text in inverted schemes.

This works because the black/off-white relationship is classic and high-contrast — WCAG AAA for most text sizes. Against competitors who lean into bright brand colors for primary (Pearson’s blues, Elsevier’s orange), Wiley’s choice signals seriousness.

2.2 Complete Palette

2.3 Color Relationships

The black (#000000) on off-white (#f2f2eb) is textbook WCAG AAA. Deep teal (#003b44) and bright green (#00d875) both have high contrast against off-white, making them perfect for CTAs. Mid grey (#8c8b89) is borderline for body text but fine for borders and disabled elements.

No evidence of dark mode — palette is fixed around light backgrounds.

2.4 Usage Guide

Works well:

• Black text on off-white or pure white backgrounds.
• Bright green buttons with deep teal text — high visibility.
• Deep teal buttons with off-white text — strong contrast.

Avoid:

• Mid grey on off-white for body copy — too low contrast.
• Bright green text on off-white background — fails WCAG for small sizes.
• Mixing deep teal and bright green in adjacent elements — they compete for attention.

3. Typography

3.1 Font Families

• Inter — Modern sans-serif, variable font support. Primary headings, body, and UI labels.
• Arial / Helvetica — Legacy/system fallback. Used in buttons, headings, captions.
• IBM Plex Mono — Monospaced, uppercase microtext, metadata.
• VideoJS — Appears in video player captions.

Google Fonts present: Noto Serif, Open Sans (though not heavily used in extracted styles).

3.2 Type Scale

3.3 Hierarchy

Inter’s large display sizes (80px, 48px) set a clear hierarchy for hero and section headings. Smaller Inter sizes (32px, 24px) bridge to body text. IBM Plex Mono in uppercase acts as a visual break for metadata. Arial/Helvetica covers functional UI text — buttons, captions — without drawing attention.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. The data shows consistent multiples of 8px for layout.

4.2 Layout

Breakpoints: 250px, 376px, 600px, 640px, 767px, 768px, 800px, 1023px, 1024px, 1199px, 1200px, 1439px, 1440px.

These are tight — they’re accounting for every device class from small phones to large desktop screens. This suggests fluid layouts with specific tweaks at each breakpoint.

5. Visual Elements

Border Radius:

Shadows: Rare. Two values:

• rgba(51, 51, 51, 0.12) 4px 8px 24px — subtle depth.
• rgb(204, 204, 204) 0px 0px 2px 2px — fine edge highlight.

Depth is mostly from borders.

Borders:

• 1px solid dark charcoal (#302f2f) for inputs/cards.
• 1px solid bright green (#00d875) for CTA emphasis.
• 1px solid mid grey (#8c8b89) for neutral buttons.

6. Components

6.1 Buttons

Bright Green CTA:

• Default: background: #00d875, text #003b44, padding 16px 24px, radius 8px, border 1px solid #00d875.
• Hover: Darker background var, white text, opacity 0.25.
• Active: Dark primary background var, white text.

Deep Teal CTA:

• Default: background: #003b44, text #f2f2eb, padding 16px 24px, radius 8px.
• Hover/Active: Darker background var, white text.

Outline Neutral:

• Default: Transparent background, text #f2f2eb, border 1px solid #adaca8, radius 8px.
• Hover/Active: Same as above but with foreground dark var.

Pill Navigation:

• Default: background: #ffffff, text #000000, padding 16px 32px, radius 50px.
• Hover: Background var, opacity 0.25, white border.

Circular Control Buttons:

• Default: background: rgba(0,0,0,0.2), text rgba off-white, radius 50%.
• Hover: White border, glow.

6.2 Links

Variants:

• Black with underline (hover changes color var).
• White with underline.
• Teal (#003b44) no underline (hover underline).
• Bright green (#00d875) no underline (hover underline).
• Off-white (#f2f2eb) no underline (hover underline).

6.3 Forms

Checkbox:

• Default: Transparent background, black text, no border.
• Focus: Light foreground background, border var negative hover.

No text input styles captured beyond borders.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #f2f2eb;
  --color-white: #ffffff;
  --color-offwhite-transparent: rgba(242, 242, 235, 0.59);
  --color-dark-charcoal: #302f2f;
  --color-deep-teal: #003b44;
  --color-bright-green: #00d875;
  --color-mid-grey: #8c8b89;
  --color-dark-grey-hover: #3f3f3f;
  --color-dark-grey-hover-alt: #3d3d3d;
  --color-light-grey-hover: #e5e4e0;

  /* Typography */
  --font-inter: "Inter", sans-serif;
  --font-arial: Arial, Helvetica, sans-serif;
  --font-helvetica: Helvetica, Arial, sans-serif;
  --font-ibm-plex-mono: "IBM Plex Mono", monospace;
  --font-videojs: VideoJS;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 50px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-lg: rgba(51, 51, 51, 0.12) 4px 8px 24px 0px;
  --shadow-sm: rgb(204, 204, 204) 0px 0px 2px 2px;
}

8. AI Coding Assistant Prompt

# Wiley Design System Specification

You are a Wiley design expert. Build UIs matching their visual language exactly.

## Brand Context
Wiley’s design language is serious, clear, and professional. It uses high-contrast black/off-white as its foundation, with deep teal and bright green for accents. Typography is modern sans-serif with functional system fallbacks.

## Color Palette
- Primary Black: #000000 — Headings, body text, icons
- Secondary Off-White: #f2f2eb — Backgrounds, inverted text
- Pure White: #ffffff — Surfaces, menus
- Transparent Off-White: rgba(242, 242, 235, 0.59) — Overlays, controls
- Dark Charcoal: #302f2f — Buttons, borders
- Deep Teal: #003b44 — CTAs, accents
- Bright Green: #00d875 — Positive CTAs, success
- Mid Grey: #8c8b89 — Neutral borders, disabled
- Dark Grey Hover: #3f3f3f — Hover states
- Dark Grey Hover Alt: #3d3d3d — Alternate hover
- Light Grey Hover: #e5e4e0 — Light hover backgrounds

## Typography
- Font Families:
  - Inter (primary), Arial/Helvetica (fallback), IBM Plex Mono (monospaced labels)
- Sizes:
  - H1: 80px / 300 / 1.20 / -1.6px
  - H2: 48px / 300 / 1.33 / -0.96px
  - H3: 32px / 400 / 1.25 / -0.64px
  - H4: 24px / 400 / 1.33 / -0.48px
  - Button: 16px / 500–600 / 1.50
  - Caption: 12px / 400 / 1.40 / -0.32px
  - Mono Labels: 14px / 500 / 1.71 / 1.225px uppercase

## Spacing & Grid
Base: 8px grid
Scale: 1px, 4px, 8px, 16px, 24px, 32px, 40px, 64px

## Border Radius
- sm: 4px — buttons, inputs
- md: 8px — cards, modals
- pill: 50px — navigation buttons
- full: 50% — circular controls

## Shadows & Depth
- lg: rgba(51,51,51,0.12) 4px 8px 24px
- sm: rgb(204,204,204) 0px 0px 2px 2px
Use sparingly. Borders preferred.

## Components

### Primary Button (Bright Green)
Default: bg #00d875, color #003b44, padding 16px 24px, radius 8px, border 1px solid #00d875.
Hover: bg var(--foreground-dark-secondary-hover), color #ffffff, opacity 0.25.
Active: bg var(--foreground-dark-primary), color #ffffff.

### Secondary Button (Deep Teal)
Default: bg #003b44, color #f2f2eb, padding 16px 24px, radius 8px, border 1px solid #003b44.

### Outline Button
Default: transparent bg, color #f2f2eb, border 1px solid #adaca8, radius 8px.

### Pill Nav Button
Default: bg #ffffff, color #000000, padding 16px 32px, radius 50px.
Hover: opacity 0.25, white border.

### Link
Default: color per variant, underline or none.
Hover: color var(--text-dark-system-alert-hover), underline.

### Input Field
Border: 1px solid #302f2f, radius 4px.
Focus: bg var(--foreground-light-primary), border var(--border-light-system-negative-hover).

## Layout & Responsive
Breakpoints: 250px, 376px, 600px, 640px, 767px, 768px, 800px, 1023px, 1024px, 1199px, 1200px, 1439px, 1440px.

## Interaction Rules
- Transitions: 150ms ease for color/background changes
- Focus: visible outline or border change
- Hover: subtle opacity changes, no large-scale animations

## DO
- Use only defined colors
- Maintain 8px spacing
- Keep corners consistent per radius tokens
- Use Inter for headings
- Use IBM Plex Mono for technical labels

## DON'T
- Invent new colors
- Mix sharp and rounded corners
- Use shadows where borders suffice
- Overuse bright green — reserve for primary CTAs

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #00d875;
  color: #003b44;
  padding: 16px 24px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid #00d875;
  transition: background 150ms ease;
}
.btn-primary:hover {
  opacity: 0.25;
  color: #ffffff;
}
.btn-primary:focus {
  outline: none;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  border: 1px solid #302f2f;
}
```

### Input
```css
.input {
  border: 1px solid #302f2f;
  border-radius: 4px;
  padding: 8px;
  font-size: 16px;
}
.input:focus {
  outline: none;
}
```

9. Summary

TL;DR — Wiley’s design system is built on black/off-white contrast, restrained accent colors, and a tight 8px grid. Typography is clean and functional, components are minimal with clear states, and depth comes from borders, not shadows.

Brand Keywords:

• academic-authoritative
• minimal-structured
• high-contrast
• functional-modern