ScienceDirect Brand Design System Deep Dive

1. Brand Overview

ScienceDirect sits under Elsevier’s umbrella — which already tells you a lot about its design priorities. This isn’t a lifestyle brand. It’s a research platform serving academics, scientists, and students who live in a world of data-heavy documents, citations, and precise referencing. The design language reflects that: functional, restrained, and unapologetically utilitarian.

The vibe is clean and no-nonsense. The primary blue (#0272b1) is the only pop of saturated color in most contexts, used intentionally for interactive elements rather than decoration. This is a site that knows its audience: people scanning abstracts, flipping through PDFs, or drilling into subject taxonomies. No gradients. No ornamental flourishes beyond the Elsevier logo in the top left — a detailed, almost traditional emblem that feels like a nod to the brand’s publishing heritage.

Typography is consistent: ElsevierSans everywhere, with a safety net of system fallbacks. Sizes are conservative, line heights generous enough for dense reading. They haven’t tried to “modernize” with oversized hero headlines or quirky display fonts — which is smart, because ScienceDirect’s credibility comes from stability.

Spacing is predictable. You can almost feel the 8px grid ticking away underneath. Breakpoints are clearly defined for a responsive layout that keeps the experience consistent whether you’re on a 27-inch monitor or a phone in a lab. There’s no experimental asymmetry or “edge-to-edge” drama here — it’s about keeping the structure intact so you can trust where to find things.

Overall: the design system is built for information integrity. It’s not trying to charm; it’s trying to be a reliable, frictionless container for serious content. And it works.

2. Color System

2.1 Primary Colors

The main brand color is rgb(2, 114, 177) (#0272b1). This is a deep, slightly muted blue. It’s not a “fun” blue — it’s professional, leaning toward cyan without tipping into teal. This hue reads as trustworthy, stable, and academic. Blue in this range is common among research-focused brands because it signals authority without the aggression of pure navy.

Compared to competitors like SpringerLink (orange-heavy) or Wiley Online Library (bright cyan), ScienceDirect’s blue is more restrained. It’s used for CTAs, highlighted links, and footer logos. They do not flood large areas with it. That restraint keeps pages readable for long sessions.

2.2 Complete Palette

2.3 Color Relationships

Contrast:

• Primary Blue (#0272b1) on white easily clears WCAG AAA for normal text.
• Dark Text (#1f1f1f) on white is high-contrast; safe for body copy.
• Link Blue (#0000ee) is the default browser blue — high visibility but visually clashes with Primary Blue if used together.
• Orange (#eb6500) provides strong color contrast against both blue and dark text. It’s used sparingly to avoid visual overload.

No dedicated dark mode in the extracted data. The palette assumes a light background context.

Accessibility-wise: the system is safe for most combinations, but Link Blue on Primary Blue background would fail — avoid that.

2.4 Usage Guide

Works well:

• Primary Blue (#0272b1) + White = clean, trustworthy CTAs.
• Dark Text (#1f1f1f) + Carousel Banner (#f5f5f5) = subtle section separation.
• Accent Orange (#eb6500) on white for alert states — grabs attention instantly.

Avoid:

• Mixing Link Blue (#0000ee) and Primary Blue in the same interactive cluster — they fight for attention.
• Orange (#eb6500) as body text — too aggressive for long-form reading.
• Transparent backgrounds without solid contrast layers — risks illegibility.

3. Typography

3.1 Font Families

Everywhere: ElsevierSans. This is a custom corporate font. Fallbacks are system sans-serif stacks: Arial, Helvetica, Roboto, Lucida Sans Unicode, Microsoft Sans Serif, Segoe UI Symbol, STIXGeneral, Cambria Math, Arial Unicode MS. This is a belt-and-braces approach — even in weird environments, you’ll get something readable.

No Google Fonts, no Adobe Fonts, no variable fonts. This is a locked corporate font system.

3.2 Type Scale

3.3 Hierarchy

They keep heading weights light (400). This is unusual — many brands push headings to 600 or 700. Here, the hierarchy is size-driven, not weight-driven. The jump from 14px caption to 32px H1 is enough without altering heaviness.

Line heights are generous, especially at smaller sizes (1.57). This helps readability for dense academic text. The 1.25 line height on 32px headings keeps them tight enough to look like section anchors rather than decorative banners.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. All spacing values are multiples of 8:

This consistency makes scaling predictable for devs.

4.2 Layout

Breakpoints (px):

• 380
• 600
• 768
• 805
• 992
• 1120
• 1200

This is a dense set — they’ve likely fine-tuned for specific layout shifts (navigation collapse, column changes). The grid is responsive but conservative; expect content widths to lock at 1200px max.

5. Visual Elements

• Border Radius: None detected. This is a square-corner brand. No pill buttons, no rounded cards.
• Shadows: None. Flat design — depth comes from borders.
• Borders:
  • 0px 0px 2px solid #1f1f1f — used on buttons and spans (underline-like bottom borders).
  • 0px 0px 1px solid #1f1f1f — lighter variant for spans.
  • 1px 0px 0px solid #eb6500 — accent divider in footer (contentinfo).

The absence of radius/shadows gives the UI a sharp, print-like feel.

6. Components

6.1 Buttons

No explicit button styles extracted beyond border usage. The button element uses bottom borders (0px 0px 2px solid #1f1f1f) in some contexts — likely styled links acting as buttons. Without border-radius, they’re rectangular.

Hover states: Not explicitly extracted for buttons — but given link hover rules, expect color shifts rather than background fills.

6.2 Links

Three link styles:

1. Default browser link:

   • Color: #0000ee
   • Underline: yes
   • Hover: unchanged (default browser behavior)

2. Nav link / dark text link:

   • Color: #1f1f1f
   • No underline
   • Hover: rgb(50, 50, 50) (slightly lighter/darker shift)

3. Primary blue link:

   • Color: #0272b1
   • No underline
   • Hover: rgb(50, 50, 50) — interesting choice, shifts to a neutral grey on hover.

6.3 Forms

No input styles extracted — likely default browser or Vuetify defaults overridden to match ElsevierSans.

6.4 Cards

No explicit card component data — but given spacing values, expect 24px or 32px padding with flat borders (no radius/shadow).

7. Design Tokens

:root {
  /* Colors - Semantic */
  --color-primary: #0272b1;
  --color-secondary: rgba(0, 0, 0, 0);
  --color-dark-text: #1f1f1f;
  --color-link-blue: #0000ee;
  --color-white: #ffffff;
  --color-accent-orange: #eb6500;
  --color-carousel-banner: #f5f5f5;

  /* Typography */
  --font-elsevier-sans: "ElsevierSans", Arial, Helvetica, Roboto, Lucida Sans Unicode, Microsoft Sans Serif, Segoe UI Symbol, STIXGeneral, Cambria Math, Arial Unicode MS;
  --font-size-h1: 32px;
  --line-height-h1: 1.25;
  --font-size-body-lg: 16px;
  --line-height-body-lg: 1.50;
  --font-size-body-sm: 14px;
  --line-height-body-sm: 1.57;
  --font-weight-normal: 400;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 56px;
  --spacing-scale-type: 8px;

  /* Borders */
  --border-button: 0px 0px 2px solid #1f1f1f;
  --border-span: 0px 0px 1px solid #1f1f1f;
  --border-footer: 1px 0px 0px solid #eb6500;

  /* Breakpoints */
  --bp-xxs: 380px;
  --bp-xs: 600px;
  --bp-sm: 768px;
  --bp-md: 805px;
  --bp-lg: 992px;
  --bp-xl: 1120px;
  --bp-xxl: 1200px;
}

8. AI Coding Assistant Prompt

# ScienceDirect Design System Specification

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

## Brand Context
ScienceDirect is an academic research platform under Elsevier. Design is functional, restrained, and built for dense reading. No decorative excess — focus is on clarity, trust, and information hierarchy.

## Color Palette
- Primary Blue: #0272b1 — Anchor links, footer logo, primary actions
- Link Blue: #0000ee — Default hyperlinks
- Dark Text: #1f1f1f — Body text, navigation links
- White: #ffffff — Background for content
- Accent Orange: #eb6500 — Hover/focus states, footer borders
- Accent Orange Semi: #eb6500 (rgba(235,101,0,0.576)) — Semi-transparent hover/focus
- Accent Orange High: #eb6500 (rgba(235,101,0,0.96)) — Emphasis hover/focus
- Carousel Banner: #f5f5f5 — Banner background
- Transparent: rgba(0,0,0,0) — Layer backgrounds

## Typography
Font family: "ElsevierSans", Arial, Helvetica, Roboto, Lucida Sans Unicode, Microsoft Sans Serif, Segoe UI Symbol, STIXGeneral, Cambria Math, Arial Unicode MS

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 32px | 400 | 1.25 | Page titles |
| H1-alt | 16px | 400 | 1.50 | Secondary headings |
| Link-lg | 16px | 400 | 1.50 | Navigation links |
| Button-lg | 16px | 400 | 1.50 | Large buttons |
| Caption | 14px | 400 | 1.57 | Metadata, captions |
| Link-sm | 14px | 400 | 1.57 | Inline links |
| Button-sm | 14px | 400 | 1.57 | Small buttons |

## Spacing & Grid
Base: 8px grid  
Scale: 8px, 16px, 24px, 32px, 56px  
Use 24px for card padding, 32px for section spacing, 56px for large gaps.

## Border Radius
none — all corners are square.

## Shadows & Depth
Flat design — use borders, not shadows.

## Components

### Primary Button
```css
.btn-primary {
  background: transparent;
  color: #0272b1;
  font-family: var(--font-elsevier-sans);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-body-lg);
  border: var(--border-button);
  padding: var(--space-2) var(--space-3);
}
.btn-primary:hover { color: rgb(50,50,50); }
.btn-primary:focus { outline: 2px solid #eb6500; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

Secondary Button

Same as primary but color: #1f1f1f.

Navigation Links

Default:

.nav-link {
  color: #1f1f1f;
  text-decoration: none;
}
.nav-link:hover { color: rgb(50,50,50); }

Input Fields

.input {
  border: 1px solid #1f1f1f;
  border-radius: 0;
  padding: var(--space-2);
  font-size: var(--font-size-body-sm);
  font-family: var(--font-elsevier-sans);
}
.input:focus { border-color: #0272b1; outline: none; }

Card

.card {
  background: #ffffff;
  border: 1px solid #1f1f1f;
  border-radius: 0;
  padding: var(--space-3);
}

Layout & Responsive Rules

Max content width: 1200px
Page padding: 16px (mobile), 32px (desktop)
Breakpoints: 380px, 600px, 768px, 805px, 992px, 1120px, 1200px

Interaction Rules

• 150ms ease transitions for color changes
• Focus indicators use Accent Orange (#eb6500)
• No hover backgrounds — change text color only

DO

• Use ONLY colors from palette
• Maintain 8px grid
• Keep corners square
• Use ElsevierSans for all text
• Keep headings at weight 400
• Use generous line heights for body text

DON'T

• Add custom shadows
• Round corners
• Use colors outside palette
• Reduce line height below specified values
• Mix Primary Blue with Link Blue in same cluster

Code Examples

Primary button:

<button class="btn-primary">Read More</button>

Card:

<div class="card">Content here</div>

Form input:

<input class="input" placeholder="Search">

---

## 9. Summary

**TL;DR** — ScienceDirect’s design system is square, flat, and disciplined. Blue for action, orange for alerts, black for text. ElsevierSans everywhere. 8px grid. No radius, no shadows. It’s built for trust and readability, not for play.

**Brand Keywords**:  
- academic-functional  
- square-cornered  
- trust-first  
- flat-minimalist