Gravatar Brand Design System Deep Dive

1. Brand Overview

Gravatar is one of those rare web utilities that’s been around forever and still feels clean, direct, and functional. The service—globally recognized avatars tied to email addresses—is utilitarian at its core, and the design reflects that ethos. No fluff. No unnecessary ornamentation. The visual language is built to be read quickly, interacted with easily, and remembered through a single, strong primary color.

The vibe is “developer-friendly, but not developer-only.” It’s approachable for people who’ve never heard the word “API” yet sharp enough to sit inside WordPress’s brand ecosystem without losing identity. That means minimal gradients, flat color fills, crisp sans-serif typography, and spacing that breathes without feeling luxurious. The whole thing is a functional tool dressed in a friendly uniform.

Gravatar’s design philosophy here leans into clarity over decoration. Primary blue (#1d4fc4) is the connective tissue—buttons, links, borders—while a neutral black/white/grey set keeps the interface grounded. Typography uses Apple’s SF Pro Display and system fonts, reinforcing speed and familiarity. There’s no “bespoke” font introducing cognitive load. It’s a smart move for a utility brand that needs to render perfectly across devices.

The design targets a broad audience: bloggers, forum users, developers, and anyone who’s ever signed up for a service that uses Gravatar under the hood. It’s not trying to “wow” with lavish visuals—it’s trying to be dependable, quick to parse, and coherent across contexts.

When you strip away the brand story, you’re left with a design system that’s almost spartan. But that’s the point. Every style choice serves interaction. The blue calls you to act. The neutrals keep focus. The typography says “this is standard, trustworthy UI.” And if you know Automattic’s design DNA, you’ll see the family resemblance—WordPress.com, Jetpack, and Gravatar all share the same pragmatic, accessible approach.

2. Color System

2.1 Primary Colors

The primary color is rgb(29, 79, 196) — normalized #1d4fc4. This is the action color. It shows up in:

• Filled buttons
• Outline buttons (border and text)
• Links
• Some borders

This shade of blue is saturated but not neon. It’s professional, readable on white, and has enough darkness to meet WCAG contrast for text.

Compared to competitors (think GitHub’s muted grays, Twitter’s lighter blues), Gravatar’s blue is heavier and more assertive. It feels less playful than Twitter’s blue, more “this is a tool” than “this is a social network.”

2.2 Complete Palette

Here’s every extracted color, normalized to hex:

CSS variables found:

• --wp-components-color-accent-inverted: #fff
• --wp-components-color-accent-darker-10: #1a47b0

2.3 Color Relationships

Contrast is solid. Primary blue on white clears AA easily for normal text. White on primary blue (buttons) also passes. The neutrals are chosen to be legible but unobtrusive—#50575e as secondary text is still above the minimum.

No obvious dark mode configuration in the extracted data. The palette could work in inverted form—#1d4fc4 still readable on a dark background—but here it’s all light mode.

2.4 Usage Guide

Works well:

• Blue (#1d4fc4) with white text (primary buttons)
• Blue border + white background (outline buttons)
• Black or deep neutral text on white
• Yellow accent against neutral backgrounds for alerts

Avoid:

• Blue text on pale blue backgrounds—it loses contrast
• Yellow accent on white—contrast is borderline
• Mixing multiple blue accents (#84a4f0, #618df2) without clear hierarchy—it dilutes the primary

3. Typography

3.1 Font Families

Gravatar uses two main families:

• SF Pro Display — for large headings
• -apple-system — system font stack for everything else

Fallbacks: system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol

No Google Fonts, no Adobe Typekit—purely native/system rendering. This means no blocking font loads; everything appears instantly.

3.2 Type Scale

3.3 Hierarchy

The big jump from 96px to 56px for headings gives flexibility in hero vs section titles. Then it drops sharply to 20px and below for body and UI text. Weight changes are subtle—600 for links and buttons, 400 for body—keeping UI elements crisp without shouting.

SF Mono is reserved for code or data displays—keeping technical content visually distinct.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px. Common values:

4.2 Layout

Breakpoints:

• 659px
• 850px
• 900px

Not a huge range—likely mobile, small tablet, and desktop thresholds. No max container width extracted, but spacing is consistent multiples of 8px.

5. Visual Elements

Border Radius

The 999px is overkill but ensures pill shapes regardless of size. 50% is used for perfect circles.

Shadows

Three main patterns:

1. rgba(16, 21, 23, 0.05) 0px 1px 1px, rgba(16, 21, 23, 0.15) 0px 3px 48px — soft depth
2. rgb(240, 240, 240) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) multi-layer subtle shadow
3. rgba(42, 57, 75, 0.07) multi-layer with varying blur — more complex depth

Borders are common—1px solid neutrals—suggesting shadows are complementary, not primary.

6. Components

6.1 Buttons

Outline Login Button:

Default:

• Background: transparent
• Text color: #1d4fc4
• Padding: 7px 22px
• Radius: 4px
• Border: 1px solid #1d4fc4
• Font-size: 15px
• Weight: 600

Filled Signup Button:

Default:

• Background: #1d4fc4
• Text: white
• Same padding, radius, border as outline

Both use consistent sizing—good for visual rhythm.

6.2 Links

Three styles:

1. Black/deep neutral (#101517), 600 weight, no underline.
2. Primary blue (#1d4fc4), 600 weight, no underline.
3. White, 600 weight, no underline (likely on dark backgrounds).

Hover: No underline—keeps clean. Could be a missed opportunity for stronger affordance.

6.3 Forms

Radio input:

• Transparent background
• No border
• Uses native styles—minimal customization.

No text inputs extracted—likely styled similarly with 1px borders and 4px radius.

6.4 Cards

One radius value: 8px. Shadows likely from the third pattern above. Padding multiples of 8px.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-deep-neutral: #101517;
  --color-mid-neutral: #50575e;
  --color-primary-blue: #1d4fc4;
  --color-light-neutral: #a7aaad;
  --color-pale-blue: #abc1f5;
  --color-soft-blue: #84a4f0;
  --color-yellow-accent: #f2d76b;
  --color-medium-blue: #618df2;
  --wp-components-color-accent-inverted: #ffffff;
  --wp-components-color-accent-darker-10: #1a47b0;

  /* Typography */
  --font-sf-pro-display: "SF Pro Display", -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-system: -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-sf-mono: "SF Mono", "Roboto Mono", Menlo, Consolas, Monaco, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-12: 12px;
  --space-14_4: 14.4px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-80: 80px;
  --space-91: 91px;
  --space-120: 120px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-7: 7px;
  --radius-8: 8px;
  --radius-20: 20px;
  --radius-22: 22px;
  --radius-999: 999px;
  --radius-50pct: 50%;

  /* Shadows */
  --shadow-soft: rgba(16, 21, 23, 0.05) 0px 1px 1px 0px, rgba(16, 21, 23, 0.15) 0px 3px 48px 0px;
  --shadow-border-subtle: rgb(240, 240, 240) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 0.7px 1px 0px, rgba(0, 0, 0, 0.1) 0px 1.2px 1.7px -0.2px, rgba(0, 0, 0, 0.1) 0px 2.3px 3.3px -0.5px;
  --shadow-complex: rgba(42, 57, 75, 0.07) 0px 6px 10px 0px, rgba(42, 57, 75, 0.047) 0px 1.80882px 24.1177px 0px, rgba(42, 57, 75, 0.035) 0px 0.751293px 10.0172px 0px, rgba(42, 57, 75, 0.024) 0px 0.271728px 3.62304px 0px;
}

8. AI Coding Assistant Prompt

# Gravatar Design System Specification

System Prompt:
You are a Gravatar design expert. Build UIs matching their visual language exactly.

Brand Context:
Gravatar’s design is minimal, functional, and typography-driven. It uses a strong primary blue for actions, neutral backgrounds, and system fonts for speed and familiarity. Shadows are subtle; borders provide structure.

## Colors
- Black: #000000 — Logo, icons, primary text
- White: #ffffff — Backgrounds, text on primary buttons
- Deep Neutral: #101517 — Body text, dividers
- Mid Neutral: #50575e — Secondary text, captions
- Primary Blue: #1d4fc4 — CTAs, links, primary buttons
- Light Neutral: #a7aaad — Disabled text, placeholders
- Pale Blue: #abc1f5 — Accent background highlights
- Soft Blue: #84a4f0 — Secondary accents
- Yellow Accent: #f2d76b — Warnings, notifications
- Medium Blue: #618df2 — Secondary actions, hover states

## Typography
Fonts:
- Headings: SF Pro Display, fallback system stack
- Body/UI: -apple-system, fallback system stack
- Code: SF Mono, fallback monospace stack

Sizes:
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 Hero | 96px | 700 | 0.98 | Main page title |
| H1 Section | 56px | 700 | 1.11 | Section titles |
| H3 | 20px | 700 | 1.20 | Subheadings |
| Body Large | 18px | 400 | 1.50 | Paragraphs |
| Link | 16px | 600 | 1.50 | Navigation |
| Button | 15px | 600 | 1.40 | CTAs |
| Caption | 14px | 600 | 1.50 | Uppercase labels |
| Small Link | 13px | 400 | 1.54 | Inline links |
| Caption Small | 12px | 400 | 1.33 | Meta info |

## Spacing & Grid
Base unit: 8px
Scale: 1px, 2px, 4px, 6px, 7px, 8px, 9px, 12px, 14.4px, 16px, 18px, 20px, 24px, 32px, 40px, 48px, 60px, 80px, 91px, 120px

## Border Radius
- xs: 2px — images
- sm: 4px — buttons, inputs
- md: 8px — cards
- lg: 20px — links
- xl: 22px — buttons
- full: 999px — pill shapes
- circle: 50% — avatars

## Shadows & Depth
- Soft: rgba(16, 21, 23, 0.05) 0px 1px 1px, rgba(16, 21, 23, 0.15) 0px 3px 48px
- Border-subtle: rgb(240, 240, 240) + subtle black layers
- Complex: multi-layer rgba(42, 57, 75) shadows

## Components

### Primary Button
Default:
```css
.btn-primary {
  background: #1d4fc4;
  color: #ffffff;
  padding: 7px 22px;
  border-radius: 4px;
  border: 1px solid #1d4fc4;
  font-size: 15px;
  font-weight: 600;
}
```

### Secondary Button (Outline)
```css
.btn-secondary {
  background: transparent;
  color: #1d4fc4;
  padding: 7px 22px;
  border-radius: 4px;
  border: 1px solid #1d4fc4;
  font-size: 15px;
  font-weight: 600;
}
```

### Navigation Links
Default: color `#1d4fc4` or `#101517`, font-weight 600, no underline.

### Input Fields
Radio: native styles, transparent background, no border.

### Cards
Border-radius: 8px, padding multiple of 8px, optional soft shadow.

## Layout & Responsive Rules
Breakpoints:
- Mobile: <659px
- Tablet: 659px–850px
- Desktop: >900px

## Interaction Rules
- Transitions: 150ms ease for hover/focus
- Focus: outline or border-color change using primary blue
- Loading: maintain button height, swap text for spinner

## DO
- Use only palette colors
- Keep spacing multiples of 8px
- Apply consistent corner radii
- Use system fonts for body
- Reserve primary blue for interactive elements

## DON'T
- Invent new colors
- Mix sharp and rounded corners arbitrarily
- Overuse shadows—prefer borders
- Remove focus indicators

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #1d4fc4;
  color: #fff;
  padding: 7px 22px;
  border-radius: 4px;
  border: 1px solid #1d4fc4;
  font-size: 15px;
  font-weight: 600;
}
.btn-primary:hover { background: #1a47b0; }
.btn-primary:focus { outline: 2px solid #1a47b0; }
```

Outline Button:
```css
.btn-outline {
  background: transparent;
  color: #1d4fc4;
  padding: 7px 22px;
  border-radius: 4px;
  border: 1px solid #1d4fc4;
}
```

Card:
```css
.card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
```

9. Summary

TL;DR — Gravatar’s design system is a functional, minimal toolkit driven by one strong primary blue, neutral text colors, and system fonts. Spacing is on an 8px grid, corners are consistent, shadows are subtle, and components are stripped to essentials.

Brand Keywords:

• utilitarian-minimalist
• action-blue
• system-font-driven
• border-structured
• developer-friendly