WordPress.com Brand Design System Deep-Dive

1. Brand Overview

WordPress.com’s design language is mature, confident, and quietly opinionated. It’s not trying to “wow” you with flashy gradients or over-designed flourishes—because it doesn’t need to. This is a platform that has been around for decades, powering a huge chunk of the web. The brand’s design reflects that heritage: a mix of trustworthy dark neutrals, clean typography, and a splash of saturated blue for action.

The vibe is professional but not corporate. There’s a deliberate balance between approachability and authority. Serif for big headings (Recoleta) says, “We’ve been here a while—we know publishing.” Sans-serif (Inter Variable) for UI and body text says, “We’re modern and usable.” The typography choices alone communicate an editorial heritage wrapped in contemporary web design.

Color use is restrained. The primary brand blue (#3858e9) is bright enough to stand out against dark backgrounds, but it’s used sparingly—mostly in CTAs and interactive elements. The rest of the palette is monochrome neutrals, with one deep near-black (#101517) anchoring the design, and a range of grays supporting structure and legibility.

The design system is unapologetically grid-based. Spacing follows an 8px scale with some fractional values (11.5px, 12.5px) for optical balance in buttons and forms. Border radii are minimal—4px for most UI elements, 8px for images—keeping the feel crisp but not harsh. Rounded pills (999px) appear rarely, which makes them more noticeable when used.

Interaction states are subtle but meaningful. Hover states often scale elements slightly (transform: scale(1.02)) and add soft shadows. Active and focus states use transparent overlays and precise outlines—clearly designed for accessibility and keyboard navigation.

Overall, this is a system for long-term readability and trust. It’s not chasing trends. It’s built for content-heavy environments where UI must support, not overshadow, the words and media. If you’re designing within this system, the rules are clear: keep it clean, keep it consistent, and let the content breathe.

2. Color System

2.1 Primary Colors

The primary brand color is rgb(56, 88, 233) (#3858e9). This is a bold, medium-saturated blue leaning slightly toward indigo. It’s active, digital, and confident—perfect for CTAs and navigation highlights.

Psychologically, deep blues convey trust, stability, and professionalism. Against the brand’s dark base (#101517), this blue pops hard. It’s a clear action signal. Compared to competitors like Squarespace (which leans into monochrome minimalism) or Wix (which uses lighter, friendlier blues), WordPress.com’s blue is more assertive.

2.2 Complete Palette

2.3 Color Relationships

This palette is high contrast. #3858e9 on #101517 has excellent visibility. White on #101517 is pure AAA contrast. The neutrals are spaced so that each step is visually distinct while still harmonious.

Accessibility-wise, the brand’s main UI colors pass WCAG contrast easily for body text and interactive elements. The light gray (#c3c4c7) on white would fail for body text, but it’s used only for de-emphasized UI states (e.g., placeholders).

The palette is inherently dark-mode friendly because the base is near-black. Light mode reversals would work fine: swap #ffffff as background, keep #101517 for text, and #3858e9 remains consistent.

2.4 Usage Guide

• Primary Blue (#3858e9) — Use strictly for clickable elements. Don’t color body text with it unless it’s a link.
• Near Black (#101517) — Default text on light backgrounds, or background on dark layouts.
• Dark Gray (#3c434a) — Navigation, headers, and muted text.
• Medium Gray (#646970) — Secondary text, less important UI labels.
• Light Gray (#c3c4c7) — Borders, dividers, subtle separators.
• White (#ffffff) — Main background in light sections, text on dark.

Avoid using primary blue on large background areas—it shifts the tone from editorial to tech-product-heavy. Keep blue as an accent.

3. Typography

3.1 Font Families

Two core families:

• Recoleta Web — Serif, used for major headings.
  Fallbacks: Georgia, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol.
  This is a custom/proprietary font (not Google or Adobe-hosted).

• Inter Variable Web — Sans-serif, used for UI, body copy, and smaller headings.
  Fallbacks: -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol.

No Google Fonts or Adobe Fonts detected. The system relies on self-hosted webfonts.

3.2 Type Scale

3.3 Hierarchy

The serif headings create a strong top-level hierarchy—it’s impossible to confuse them with body text. The massive 100px option is likely for hero headers. UI headings drop into Inter at 22px–18px, signaling a shift from editorial to functional.

The line heights are tight for headlines (1.00–1.20) and looser for body (1.44–1.54), which improves readability. Weights are mostly regular (400) with occasional medium (500) or semibold (600) for emphasis.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. However, the system uses fractional values (11.5px, 12.5px) for button padding and optical balance.

4.2 Layout

Breakpoints are granular:
479px, 480px, 600px, 659px, 660px, 672px, 767px, 768px, 782px, 850px, 864px, 900px, 960px, 1080px, 1151px, 1152px, 1200px, 1224px, 1312px.

This suggests they design for exact device widths and fine-tune layouts rather than sticking to generic “mobile/tablet/desktop” buckets.

5. Visual Elements

Border Radius

The 4px default keeps things sharp. 8px on images softens them slightly. 999px is only for very specific pill/round avatar cases.

Shadows

Two shadows in play:

• rgba(16, 21, 23, 0.25) 0px 9px 48px 0px — deep, soft shadow for overlays or elevated cards.
• rgba(195, 196, 199, 0.7) 0px 0px 0px 1px — essentially a subtle border via shadow.

They’re used sparingly—most UI is flat with solid color separation.

Borders

They use hairline (1px) borders with low-opacity grays for dividers. Example: rgba(221, 221, 223, 0.85) top borders on sections.

6. Components

6.1 Buttons

Three main variants:

Primary (Blue)

Default:

• background: #3858e9
• text: #ffffff
• padding: 11.5px 36px 12.5px
• radius: 4px
• border: none
• font: Inter, 16px, weight 500

Hover:

• background: rgba(255, 255, 255, 0.24) overlay
• transform: scale(1.02)
• shadow: rgba(0,0,0,0.14) 0px 10px 28px

Active:

• background: rgba(255, 255, 255, 0.32) overlay
• text: rgb(31, 50, 134)
• border: 2px solid highlight
• shadow: rgba(0,0,0,0.12) 0px 6px 18px

Focus:

• outline: rgb(33, 44, 255) solid 2px
• box-shadow: 0 0 0 3px rgba(var(--lp-color-field-border-focus),1)

Secondary (White)

Default:

• background: #ffffff
• text: #3858e9
• same padding/radius/font as primary.

Hover/Active/Focus: same overlay/scale/shadow pattern as primary.

Dark

Default:

• background: #101517
• text: #ffffff
• padding: 11.5px 17px 12.5px

States match the others.

6.2 Links

Variants:

1. White text, underline default → hover removes underline.
2. Blue text (#3858e9), bold — hover changes color via --lp-color-button-label.
3. Light gray (#c3c4c7), underline — hover removes underline.
4. Near black (#101517) — plain, hover recolors.

Underlining is used selectively—mostly for text links in content, not navigation.

6.3 Forms

Search Input

• background: white
• text: rgb(29, 35, 39)
• border-radius: 4px
• no visible border
• focus adds 3px outline via box-shadow.

Select

• transparent background
• text: light gray
• border: 1px solid rgb(167, 170, 173)
• radius: 4px
• padding: 12px 31px 13px 42px

6.4 Cards

Radius: 9px.
Occasional shadow or subtle border. Padding likely follows spacing scale (20–24px). Hover states may include slight shadow.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #3858e9;
  --color-black: #101517;
  --color-gray-dark: #3c434a;
  --color-gray-medium: #646970;
  --color-gray-light: #c3c4c7;
  --color-white: #ffffff;

  /* Typography */
  --font-heading: recoleta-web, Georgia, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-body: inter-variable-web, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-size-h1-xl: 6.25rem;
  --font-size-h1-lg: 4.5rem;
  --font-size-h1-md: 3.5rem;
  --font-size-h1-sm: 3rem;
  --font-size-h1-xs: 2.5rem;
  --font-size-body: 1rem;
  --font-size-caption: 0.88rem;
  --font-size-small: 0.81rem;
  --font-size-micro: 0.69rem;
  --font-size-tiny: 0.63rem;

  /* Spacing */
  --space-0: 0;
  --space-1: 1px;
  --space-3: 3px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11-5: 11.5px;
  --space-12: 12px;
  --space-12-5: 12.5px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-23: 23px;
  --space-24: 24px;
  --space-25: 25px;
  --space-26: 26px;
  --space-48: 48px;
  --space-96: 96px;
  --space-206: 206.14px;
  --space-262: 262.312px;

  /* Radius */
  --radius-sm: 4px;
  --radius-badge: 5px;
  --radius-md: 8px;
  --radius-card: 9px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-lg: rgba(16, 21, 23, 0.25) 0px 9px 48px 0px;
  --shadow-border: rgba(195, 196, 199, 0.7) 0px 0px 0px 1px;
}

8. AI Coding Assistant Prompt

# WordPress.com Design System Specification

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

## Brand Context
WordPress.com’s design is professional, content-first, and built for trust. Serif headings reflect publishing heritage, sans-serif body text ensures clarity. Color is restrained—blue for action, neutrals for structure.

## Color Palette
- Primary Blue: #3858e9 — CTAs, primary buttons, links
- Near Black: #101517 — backgrounds, dark text
- Dark Gray: #3c434a — navigation, secondary text
- Medium Gray: #646970 — UI labels, muted text
- Light Gray: #c3c4c7 — dividers, placeholders
- White: #ffffff — backgrounds, text on dark

## Typography
- Headings: "recoleta-web", Georgia, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
- Body/UI: "inter-variable-web", -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 Hero | 100px | 400 | 1.00 | Hero titles |
| H1 Large | 72px | 400 | 1.11 | Page titles |
| H1 Medium | 56px | 400 | 1.14 | Section headings |
| H1 Small | 48px | 400 | 1.17 | Sub-sections |
| H1 XS | 40px | 400 | 1.20 | Content headers |
| UI Heading | 22px | 600 | 1.00 | UI section heads |
| Body L | 20px | 400 | 1.40 | Large body |
| Body M | 18px | 400/500 | 1.44 | Body copy |
| Body S | 16px | 400/500 | 1.50 | UI text |
| Caption | 14px | 400/600 | 1.50 | Meta text |
| Small | 13px | 400/600 | 1.46/1.54 | Labels |
| Micro | 11px | 500 | 1.00 | Tiny labels |
| Tiny | 10px | 400 | 1.00 | Legal/disclaimers |

## Spacing & Grid
Base: 8px grid with fractional values.  
Scale: 0, 1px, 3px, 6px, 8px, 10px, 11.5px, 12px, 12.5px, 16px, 18px, 20px, 23px, 24px, 25px, 26px, 48px, 96px, 206.14px, 262.312px.  
Use multiples for padding/margin. Buttons use 11.5/12.5px vertical padding.

## Border Radius
- sm: 4px — buttons, inputs
- badge: 5px — badges
- md: 8px — images
- card: 9px — cards/divs
- pill: 999px — pill buttons, avatars

## Shadows & Depth
- Large: rgba(16, 21, 23, 0.25) 0px 9px 48px 0px
- Border shadow: rgba(195, 196, 199, 0.7) 0px 0px 0px 1px

## Component Specifications

### Primary Button
Default: bg #3858e9, text #fff, padding 11.5px 36px 12.5px, radius 4px, font 16px/500, no border.  
Hover: bg rgba(255,255,255,0.24), scale 1.02, shadow rgba(0,0,0,0.14) 0 10px 28px.  
Active: bg rgba(255,255,255,0.32), text rgb(31,50,134), border 2px solid highlight, shadow rgba(0,0,0,0.12) 0 6px 18px.  
Focus: outline rgb(33,44,255) 2px solid, box-shadow 0 0 0 3px rgba(var(--lp-color-field-border-focus),1).

### Secondary Button
Default: bg #fff, text #3858e9, same padding/radius/font as primary.  
States: same overlay/scale/shadow logic.

### Dark Button
Default: bg #101517, text #fff, padding 11.5px 17px 12.5px.

### Navigation Links
Variants: white/underline, blue/bold, gray/underline, black/plain. Hover changes color or removes underline.

### Input Fields
Search: bg #fff, text rgb(29,35,39), radius 4px, no border. Focus adds 3px outline via box-shadow.  
Select: transparent bg, text #c3c4c7, border #a7aaad, radius 4px, padding 12px 31px 13px 42px.

### Cards
Radius 9px, optional shadow or subtle border.

## Layout & Responsive Rules
Breakpoints: 479px, 480px, 600px, 659px, 660px, 672px, 767px, 768px, 782px, 850px, 864px, 900px, 960px, 1080px, 1151px, 1152px, 1200px, 1224px, 1312px.

## Interaction Rules
- Hover: scale(1.02) + subtle shadow
- Focus: visible outlines (2px solid) + box-shadow ring
- Transition: 150ms ease on state changes

## DO
- Use only colors from palette
- Keep 8px-based spacing
- Use Recoleta for headings, Inter for body/UI
- Maintain 4px radius for UI elements
- Reserve blue for CTAs and links

## DON'T
- Introduce new colors
- Mix sharp and rounded corners
- Overuse shadows
- Change font stacks
- Use blue for non-interactive text

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #3858e9;
  color: #fff;
  padding: 11.5px 36px 12.5px;
  border-radius: 4px;
  font: 500 16px/1 var(--font-body);
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: rgba(255,255,255,0.24);
  transform: scale(1.02);
  box-shadow: rgba(0,0,0,0.14) 0 10px 28px;
}
.btn-primary:focus {
  outline: 2px solid rgb(33,44,255);
  box-shadow: 0 0 0 3px rgba(56,88,233,1);
}
```

Card:
```css
.card {
  background: #fff;
  border-radius: 9px;
  padding: 24px;
  box-shadow: rgba(16,21,23,0.25) 0 9px 48px 0;
}
```

Input:
```css
.input {
  background: #fff;
  color: rgb(29,35,39);
  border-radius: 4px;
  border: none;
  padding: 12px;
}
.input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(56,88,233,1);
}
```

9. Summary

TL;DR — WordPress.com’s design system is a disciplined mix of strong typography, restrained color, and subtle interaction. It’s built to support content, not overshadow it. Follow the 8px grid, keep blue for actions, and respect the serif/sans hierarchy.

Brand Keywords — editorial-modern, trust-driven, content-first, restrained-color, precise-grid