Merriam-Webster Design System Deep Dive

1. Brand Overview

Merriam-Webster is a heritage brand with a very digital-first execution. When you load their site, you’re not stepping into some dusty library UX. The vibe is authoritative but approachable. It feels like they know they’re the definitive source for language, but they also want you to click around, play word games, and sign up for newsletters.

The design philosophy here is rooted in trust and clarity. That shows up in their typography choices—serif for headings (Playfair Display) to carry that scholarly tradition, sans-serif (Open Sans, system fonts) for body and UI to keep it clean and modern. They’re not trying to be trendy; they’re trying to be legible, dependable, and subtly inviting.

The audience is broad: students, academics, casual word nerds, crossword solvers, and anyone who just googled “defenestration.” That breadth explains the mixed palette: deep blues and reds for authority, bright accents for interactive elements, and lots of neutral grays/whites for readability.

Navigation and interaction patterns are straightforward. Buttons are unambiguous, forms are simple. The breakpoints cover everything from sub-100px (!) up to 1400px, which tells me they’re accounting for everything from tiny embedded widgets to big desktop layouts.

This is not a “cool” brand in the aesthetic sense—it’s a “solid” brand. The site’s visual language says: we’ve been here for 200 years, we’re online now, and you can trust what you read.

2. Color System

2.1 Primary Colors

The dominant semantic color is Secondary: rgb(15, 56, 80) (#0f3850). Yes, they call it “secondary” in the data, but it behaves like a primary brand color—a deep, almost navy blue. It’s used in headers, buttons (btn-blue), and key navigation elements. Psychology-wise, this is classic: deep blue = trust, stability, intelligence. It’s less aggressive than black, more formal than sky blue. Compared to competitors (Dictionary.com’s bright blue, Oxford’s royal blue), Merriam-Webster’s shade is restrained.

They also lean on reds (rgb(215, 25, 32) and rgb(174, 0, 21)) for call-to-action buttons and accents—speaks to urgency and brand heritage (think of their print logo’s red circle).

2.2 Complete Palette

2.3 Color Relationships

Contrast is generally high: navy (#0f3850) on white, white on navy, black on pale backgrounds. The bright blue (#0061f2) is used sparingly for links and CTAs—it pops hard against white.

Accessibility: Most primary text/background combos pass WCAG AA easily. Potential issues: pale blue (#cbe1ea) as text on white—low contrast. They use it mostly for borders, so fine.

Dark mode: No explicit dark mode palette here—the dark blues and grays are already part of the primary scheme.

2.4 Usage Guide

• Works: Navy + white (high trust, clean), red CTA on pale background (attention).
• Avoid: Pale blue text on white—low contrast. Bright blue + red together—too loud.
• Good combos: Charcoal (#3b3e41) for secondary text on cream (#f9f2d9) backgrounds; white text on deep slate blue (#224255).

3. Typography

3.1 Font Families

They mix serif and sans for hierarchy:

• Playfair Display — Headlines. No fallbacks listed, so rely on custom load.
• Open Sans — Buttons, headings, body. Fallbacks: Helvetica, Arial.
• system-ui — Links, captions. Fallbacks: -apple-system, Segoe UI, Roboto, etc.
• Verdana — Occasional headings/captions.
• Arial — Some links.

No Google Fonts or Adobe Fonts flagged—likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

Serif headings stand out immediately—great for page titles. Sans-serif for buttons keeps them modern. Size scale is tight—most headings are between 16px–39px, so no giant hero text. This keeps things compact, which suits dense dictionary content.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Common values:

4.2 Layout

Breakpoints: from 98px up to 1400px. Notable: they cover micro-widget embedding (<375px) and full desktop. Likely fluid container widths—not listed explicitly.

5. Visual Elements

Border Radius

Values from 0px to full circles:

• 0px variants for tables, spans.
• 4px (93 counts) — default small buttons, inputs.
• 5px, 6px, 8px, 10px — progressive rounding for cards, modals.
• 45px — pill-style buttons.
• 100% — fully circular divs.

Shadows

They do use shadows, but lightly:

• rgba(17, 27, 63, 0.03) 0px 0px 80px inset — subtle depth.
• rgba(0, 0, 0, 0.2) 0px 10px 10px -8px — hover lift.
• Others for cards, modals.

Borders: lots of 1px solid lines in pale colors for separation.

6. Components

6.1 Buttons

Example: btn-blue
Default: #0f3850 background, white text, 6.8px vertical padding, 4px radius.
Hover: white background, black text, 3px solid black border, shadow lift.
Active: white background, white text (odd choice—probably icon overlay), heavy inset shadow.
Focus: white background, black text, 1px solid brand color.

Other variants:

• btn-switch — #d71920 red background, white text, 5px radius.
• games-promo-card-btn — #e4c04b gold background, navy text, hover goes dark navy.

6.2 Links

Default: no underline, color tied to context (white, black, brand blue). Hover: underline, sometimes color shift.

6.3 Forms

Inputs: 6px radius, pale gray background (#f4f4f4), focus border in brand red (rgb(176,0,7)).

6.4 Cards

Border radius 8px–10px, occasional shadows, white background.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-gray: #303336;
  --color-white: #ffffff;
  --color-pale-blue: #cbe1ea;
  --color-deep-slate-blue: #224255;
  --color-brand-navy: #0f3850;
  --color-black: #000000;
  --color-light-gray: #f4f4f4;
  --color-charcoal: #3b3e41;
  --color-deep-navy: #0a1b27;
  --color-warm-beige: #f5d0b2;
  --color-cream: #f9f2d9;
  --color-bright-blue: #0061f2;
  --color-light-warm-gray: #d7d5d5;
  --color-deep-graphite: #1b2228;

  /* Typography */
  --font-playfair: 'Playfair Display';
  --font-open-sans: 'Open Sans', Helvetica, Arial;
  --font-system: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans;
  --font-verdana: Verdana, Geneva, Tahoma;
  --font-arial: Arial, Helvetica Neue, Helvetica;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-2_8125: 2.8125px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-40: 40px;
  --space-50: 50px;

  /* Border Radius */
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-45: 45px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-inset-light: rgba(17, 27, 63, 0.03) 0px 0px 80px inset;
  --shadow-hover-lift: rgba(0, 0, 0, 0.2) 0px 10px 10px -8px;
}

8. AI Coding Assistant Prompt

# Merriam-Webster Design System Specification

You are a Merriam-Webster design expert. Build UIs matching their visual language exactly.

## Brand Context
Merriam-Webster's design language is authoritative, scholarly, and approachable. Serif headings carry tradition, sans-serif UI keeps it clean. The palette balances deep blues (trust) with reds (attention) and neutrals for readability.

## Color Palette
- Dark Gray: #303336 — UI chrome, text
- White: #ffffff — Backgrounds, text on dark
- Pale Blue: #cbe1ea — Borders, subtle backgrounds
- Deep Slate Blue: #224255 — Headers, icons
- Brand Navy: #0f3850 — Primary actions, headers
- Black: #000000 — Text, icons
- Light Gray: #f4f4f4 — Inputs, button backgrounds
- Charcoal: #3b3e41 — Secondary text
- Deep Navy: #0a1b27 — Button backgrounds
- Warm Beige: #f5d0b2 — Decorative accents
- Cream: #f9f2d9 — Background fills
- Bright Blue: #0061f2 — Links, CTAs
- Light Warm Gray: #d7d5d5 — Neutral backgrounds
- Deep Graphite: #1b2228 — Hover/focus backgrounds

## Typography
- Headings: 'Playfair Display'
- Body/UI: 'Open Sans', Helvetica, Arial
- Links: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
- Occasional: Verdana, Arial

| Level | Size | Weight | Line Height | Use |
| H1-lg | 39px | 700 | 1.28 | Page titles |
| H1-md | 34px | 700 | 1.00 | Section titles |
| H1-sm | 26px | 700 | 1.38–1.65 | Subheadings |
| Button-lg | 24px | 700 | 1.40 | Primary buttons |
| Body | 18px | 400 | 1.50 | Paragraph text |
| Caption | 14px | 400/700 | 1.40–1.43 | Labels |

## Spacing & Grid
Base: 8px. Scale: 1px, 2px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 25px, 40px, 50px.
Use multiples for padding/margins.

## Border Radius
- sm: 4px — small buttons, inputs
- md: 6px — standard buttons, forms
- lg: 8px — cards
- xl: 10px — modals
- pill: 45px — pill buttons
- full: 100% — circles

## Shadows & Depth
- Inset light: rgba(17, 27, 63, 0.03) 0px 0px 80px inset — subtle depth
- Hover lift: rgba(0, 0, 0, 0.2) 0px 10px 10px -8px — interactive lift

## Components

### Primary Button (.btn-blue)
Default:
- background: #0f3850
- color: #ffffff
- padding: 6.8px 8px
- border-radius: 4px
Hover:
- background: #ffffff
- color: #000000
- border: 3px solid #000000
- shadow: hover lift
Active:
- background: #ffffff
- color: #ffffff
Focus:
- border: 1px solid #0f3850

### Secondary Button (.btn-switch)
Default:
- background: #d71920
- color: #f4f4f4
- radius: 5px

### Input Field
Default:
- background: #f4f4f4
- color: #0a1b27
- radius: 6px
Focus:
- background: #edf4f7
- border: 1px solid rgb(176,0,7)

### Card
- background: #ffffff
- radius: 8px–10px
- optional shadow: inset light

## Layout & Responsive Rules
- Breakpoints: 98px, 375px, 576px, 768px, 992px, 1200px, 1400px
- Maintain 8px grid

## Interaction Rules
- Transition: 150ms ease for hover/focus changes
- Focus: solid border in brand color or accent

## DO
- Use only palette colors
- Maintain 8px multiples
- Use Playfair Display for headings
- Keep button radii consistent per variant
- Ensure contrast ratios meet WCAG AA

## DON'T
- Invent new colors
- Mix sharp and rounded corners
- Use shadows heavier than hover lift
- Use serif for body text

## Code Examples

```css
.btn-blue {
  background: #0f3850;
  color: #fff;
  padding: 6.8px 8px;
  border-radius: 4px;
  font-weight: 700;
}
.btn-blue:hover {
  background: #fff;
  color: #000;
  border: 3px solid #000;
  box-shadow: rgba(0,0,0,0.2) 0px 6px 16px;
}

.input {
  background: #f4f4f4;
  border-radius: 6px;
  padding: 6px 12px;
}
.input:focus {
  background: #edf4f7;
  border: 1px solid rgb(176,0,7);
}
```

9. Summary

TL;DR — Merriam-Webster’s design system is built for trust and clarity: deep blues, authoritative serif headings, clean sans for UI, and an 8px grid. Buttons are bold but consistent, forms are simple, and the palette never strays from brand colors.

Brand Keywords — scholarly-trustworthy, bold-functional, grid-disciplined, heritage-modern