Sagepub Design System Deep Dive

1. Brand Overview

Sagepub’s site feels academic, structured, and trustworthy. This isn’t a lifestyle brand—it’s a publishing house aimed at educators, researchers, and students who live in a world of peer-reviewed journals and precise references. The design language reflects that: restrained colors, typography that’s legible over decorative, and layout choices that prioritize information clarity over visual flourish.

The vibe is professional but not sterile. The deep navy primary (#001a69) carries authority—think university banners and hardcover textbooks. The secondary (#ebf6ff) is a pale, almost icy blue that softens the experience without diluting that authority. This duality—serious primary, gentle secondary—makes the brand approachable to a broad academic audience.

Typography choices mix the sans-serif workhorse Open Sans with a custom family called Peak. Open Sans is everywhere in digital publishing for a reason: it’s readable at small sizes and scales well. Peak is used for headings and navigation, giving Sagepub a proprietary voice in places where tone matters. The combination avoids the trap of using only system fonts (too generic) or only custom fonts (risky for accessibility).

Spacing and grid choices scream “Bootstrap + Vuetify.” You see the container/row/col structure, but also Vuetify’s v- components in the markup. This means the design system is not just visual—it’s deeply tied to component frameworks. Breakpoints are standard responsive steps from 400px up to 1400px, making it comfortable on mobile, tablet, and desktop without special-case layouts.

The overall philosophy: clear, structured, accessible academic publishing in a digital format. No flamboyant gradients, no edgy micro-interactions. They’re building trust by staying consistent and restrained. I’d call it “academic-modern”—the modern web’s responsiveness and white space, but anchored in the tradition of print publishing design systems.

2. Color System

2.1 Primary Colors

The main brand color is Primary Navy #001a69 (rgb(0, 26, 105)). This is a deep, almost ink-like blue. Psychologically, dark blue conveys trust, stability, and intelligence. For an academic publisher, that’s perfect. It’s a common choice among competitors—IEEE, Springer, and Elsevier all lean on variants of blue—but Sagepub’s is darker and less saturated, which feels more formal.

Secondary is #ebf6ff (rgb(235, 246, 255)), a pale, cool blue used to lighten sections and create contrast without high visual tension.

They also have a link blue #2537c6 (rgb(37, 55, 198)). It’s more saturated than the primary, reserved for text links to make them pop in body copy.

2.2 Complete Palette

2.3 Color Relationships

Primary navy + white = high contrast, WCAG AAA for text. Primary navy + secondary pale blue is softer, good for large areas but needs careful text contrast (dark text over pale blue works fine, white text over pale blue is borderline).

Link blue (#2537c6) on white is readable but less contrast than navy—still passes AA for large text. The danger red (#D10000) is attention-grabbing against white but would fail against navy unless paired with white text.

Transparent navy overlay (rgba(0, 26, 105, 0.125)) is used for subtle hover states—doesn’t break legibility, but may be too subtle for low-vision users.

2.4 Usage Guide

• Works: Navy + white for CTAs, navy borders on white backgrounds.
• Works: Pale blue backgrounds with dark gray or navy text for section differentiation.
• Avoid: White text on pale blue—contrast drops.
• Avoid: Link blue on pale blue—it blends, losing affordance.
• Status colors should remain in alerts and form validation—they’re not in the primary palette for a reason.

3. Typography

3.1 Font Families

Two main families:

• Peak — custom (not Google/Adobe). Used for headings, navigation, buttons. No fallbacks listed. Likely a proprietary face.
• Open Sans — sans-serif, widely used. Used for body text, captions, some headings.

No variable fonts. No Google Fonts imports—Peak is probably self-hosted.

3.2 Type Scale

3.3 Hierarchy

Peak is used for large headings—72px for hero H1s, scaling down to 20px for sub-headings or nav. Open Sans handles small headings (16px–20px) and captions. The jumps between sizes are consistent with an 8px-ish scale (72 → 32 → 28 → 24 → 20 → 18 → 16 → 14 → 12 → 11.38). This creates a predictable hierarchy, making it easy to style new components without guessing.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Common values:

4.2 Layout

Bootstrap grid + Vuetify components. Breakpoints:

• 98px — tiny devices
• 400px, 425px, 426px — small mobile
• 530px, 550px — large mobile
• 576px — Bootstrap sm
• 600px — custom breakpoint
• 768px — Bootstrap md
• 896px — custom tablet
• 992px — Bootstrap lg
• 1200px — xl
• 1320px — custom wide
• 1400px — Bootstrap xxl

5. Visual Elements

Border Radius

Shadows

• rgba(0, 0, 0, 0.1) 0px 2px 8px — light drop, common
• rgba(0, 0, 0, 0.12) 0px 1px 4px — subtle depth
• rgba(0, 0, 0, 0.12) 0px 5px 20px — larger depth, modals
• Rare heavier: rgba(0, 0, 0, 0.2) ...

Borders

Mostly 1px solid navy or gray. Hairlines for lists, menus, inputs. Navy borders used for interactive elements, gray for neutral containers.

6. Components

6.1 Buttons

Variant: Skip Button

• Default: white bg, navy text, 4px radius, no shadow
• Hover: bg #f7f7f7, text white (! odd choice—white on light bg loses contrast)
• Active: bg navy, text navy (odd—text blends into bg)
• Focus: black outline, bg #f7f7f7, text white

Variant: Nav Link Active

• Default: bg #f2f3f8, navy text, 4px top corners radius
• Hover: white bg, white text (again, contrast drop), heavy shadow
• Active: green bg #2c6415, white text
• Focus: white text, bg #f7f7f7, scale transform

Variant: Primary Small

• Default: navy bg, pale blue text, 4px radius
• Hover: white bg, white text (!)
• Active: green bg, white text
• Focus: white text, bg #f7f7f7, scale transform

Variant: Dropdown Toggle

• Default: transparent bg, gray text, 4px radius, gray border
• Hover: #f7f7f7 bg, white text
• Active: navy bg, navy text
• Focus: black outline, bg #f7f7f7, white text

6.2 Links

Six styles:

• Link blue (#2537c6) underlined, hover to gray (#565656) no underline
• White text no underline, hover to gray
• Dark gray no underline, hover to gray
• Navy bold, hover to gray
• Gray bold, hover to gray
• Pale blue bold, hover to gray

6.3 Forms

Inputs: transparent bg, dark gray text, no border by default. Focus: bright blue bg (#1eaedb), white text, black border.

Checkboxes: transparent bg, black border, pill-like 32px radius. Focus: bright blue bg, white text.

6.4 Cards

Radius 8px, shadows rgba(0,0,0,0.1) or rgba(0,0,0,0.12). Padding from spacing scale—likely 16px or 24px.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #001a69;
  --color-secondary: #ebf6ff;
  --color-dark-gray: #333333;
  --color-white: #ffffff;
  --color-link-blue: #2537c6;
  --color-black: #000000;
  --color-transparent-primary: rgba(0, 26, 105, 0.125);
  --color-border-gray: #888888;
  --color-warning-bg-subtle: #fff7e0;
  --color-danger-text: #540000;
  --color-hr-light: #dddddd;
  --color-info-bg-subtle: #ebd7cc;
  --color-form-invalid: #d10000;
  --color-info-text: #3f1600;
  --color-code-pink: #d63384;
  --color-link-hover-navy: #001554;
  --color-dark-text: #555555;
  --color-warning-text: #665528;
  --color-primary-text: #000a2a;
  --color-dark-bg-subtle: #cccccc;
  --color-danger-bg-subtle: #f6cccc;
  --color-secondary-bg: #eeeeee;
  --color-primary-bg-subtle: #ccd1e1;
  --color-form-valid: #008929;
  --color-success-text: #003710;
  --color-highlight-bg: #fff3cd;
  --color-success-bg-subtle: #cce7d4;
  --color-secondary-bg-subtle: #d3d7f4;
  --color-body-bg: #ffffff;
  --color-secondary-text: #0f164f;
  --color-body-text: #333333;

  /* Typography */
  --font-peak: "Peak", sans-serif;
  --font-open-sans: "Open Sans", sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-84: 84px;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 100px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 2px 8px;
  --shadow-md: rgba(0, 0, 0, 0.12) 0px 1px 4px;
  --shadow-lg: rgba(0, 0, 0, 0.12) 0px 5px 20px;
}

8. AI Coding Assistant Prompt

# Sagepub Design System Specification

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

## Brand Context
Sagepub’s design is academic-modern: restrained colors, clear typography, predictable spacing. It’s built for researchers and educators—trust and clarity matter more than visual experimentation.

## Color Palette
- Primary Navy: #001a69 — CTAs, primary buttons, nav links, borders
- Secondary Pale Blue: #ebf6ff — section backgrounds
- Dark Gray: #333333 — body text
- White: #ffffff — page background, text on dark
- Link Blue: #2537c6 — inline links
- Black: #000000 — text, icons
- Transparent Navy: rgba(0, 26, 105, 0.125) — hover overlays
- Border Gray: #888888 — input borders
- Warning BG Subtle: #fff7e0 — warning alerts
- Danger Text: #540000 — error text emphasis
- HR Light Gray: #dddddd — horizontal rules
- Info BG Subtle: #ebd7cc — info alerts
- Form Invalid Red: #d10000 — form errors
- Info Text Emphasis: #3f1600 — info alert text
- Code Pink: #d63384 — code snippets
- Link Hover Navy: #001554 — link hover
- Dark Text Emphasis: #555555 — emphasis text
- Warning Text Emphasis: #665528 — warning alert text
- Primary Text Emphasis: #000a2a — text emphasis on primary bg
- Dark BG Subtle: #cccccc — neutral bg
- Danger BG Subtle: #f6cccc — error alert bg
- Secondary BG: #eeeeee — neutral surfaces
- Primary BG Subtle: #ccd1e1 — shaded primary bg
- Form Valid Green: #008929 — success state
- Success Text Emphasis: #003710 — success alert text
- Highlight BG: #fff3cd — highlights
- Success BG Subtle: #cce7d4 — success alert bg
- Secondary BG Subtle: #d3d7f4 — light bg
- Body BG: #ffffff — page background
- Secondary Text Emphasis: #0f164f — emphasis text in secondary contexts
- Body Text: #333333 — standard body text

## Typography
Fonts:
- Headings/Nav: "Peak", sans-serif
- Body/Caption: "Open Sans", sans-serif

Sizes:
| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 Hero | Peak | 72px | 600 | 0.89 | Hero titles |
| H1 Section | Peak | 32px | 400/600 | 1.38 | Section headings |
| Body | Open Sans | 16px | 400 | 1.75 | Paragraphs |
| Caption | Open Sans | 14px | 400/700 | 2.00 | Captions |
| Small UI | Open Sans | 12px | 400 | 2.00 | Small labels |
| Micro UI | Open Sans | 11.382px | 600/700 | 1.40–1.50 | Microtext |

## Spacing & Grid
Base: 8px grid
Scale: 1, 4, 5, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 72, 84px
Use multiples for padding/margin—never arbitrary values.

## Border Radius
- none: 0 — spans
- xs: 2px — small buttons
- sm: 4px — buttons, inputs
- md: 8px — cards, modals
- pill: 100px — pill buttons
- full: 50% — circular elements

## Shadows & Depth
- sm: rgba(0,0,0,0.1) 0px 2px 8px — light depth
- md: rgba(0,0,0,0.12) 0px 1px 4px — subtle depth
- lg: rgba(0,0,0,0.12) 0px 5px 20px — modal depth

## Component Specifications

### Primary Button
Default:
- bg: #001a69
- color: #d9eeff
- padding: 8px 16px
- radius: 4px
- border: 1px solid #001a69
Hover:
- bg: #ffffff
- color: #ffffff (low contrast—brand choice)
Focus:
- border: 1px solid #000000
- transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem)
Active:
- bg: #2c6415
- color: #ffffff

### Secondary Button (Dropdown Toggle)
Default:
- bg: transparent
- color: #555555
- border: 1px solid #888888
Hover:
- bg: #f7f7f7
- color: #ffffff
Focus:
- outline: 2px solid #000000

### Navigation Link
Default:
- color: #001a69
Hover:
- color: #565656

### Input Field
Default:
- bg: transparent
- color: #333333
- no border
Focus:
- bg: #1eaedb
- color: #ffffff
- border: 1px solid #000000

## Layout & Responsive Rules
Max content width: 1400px
Breakpoints: 400, 425, 426, 530, 550, 576, 600, 768, 896, 992, 1200, 1320, 1400px
Page padding: 16px mobile / 24px desktop
Grid gap: multiples of 8px

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus indicators: 2px solid outline
- Hover transforms: slight scale and translate

## DO
- Use only colors from palette
- Maintain 8px grid spacing
- Use Peak for headings, Open Sans for body
- Keep radius consistent per component type
- Respect brand’s hover/active state colors

## DON'T
- Invent new colors
- Mix sharp and rounded corners in same component
- Remove focus outlines
- Change hover transforms arbitrarily
- Ignore contrast issues—brand has some low contrast states, but don’t make it worse

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #001a69;
  color: #d9eeff;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #001a69;
  font-weight: 600;
  font-size: 16px;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #ffffff;
  color: #ffffff;
}
.btn-primary:focus {
  outline: 2px solid #000;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: rgba(0,0,0,0.1) 0px 2px 8px;
}
```

Input:
```css
.input {
  background: transparent;
  color: #333333;
  padding: 0 20px 0 0;
  border: none;
}
.input:focus {
  background: #1eaedb;
  color: #ffffff;
  border: 1px solid #000000;
}
```

9. Summary

TL;DR — Sagepub’s design system is academic-modern: navy primary, pale blue secondary, Peak + Open Sans typography, strict 8px spacing, Bootstrap+Vuetify components. It’s restrained and consistent, with some quirky low-contrast hover states.

Brand Keywords:

• academic-modern
• trust-driven
• restrained-color
• bootstrap-vuetify
• text-first