Elsevier

Overview

Elsevier is a global information and decision-support platform serving the science, healthcare, and research communities. The design system embodies "Authoritative Minimalism"—a philosophy that combines institutional credibility with clean, purposeful interfaces. The visual language prioritizes clarity and trust through a restrained palette of deep blue (#2354ff) and vibrant orange (#ff551d) accents against expansive white surfaces, creating an environment where complex scientific and medical information feels accessible and navigable. The brand personality is authoritative yet approachable: precise, evidence-based, and human-centered. Elsevier speaks in the language of discovery—direct, confident, and focused on outcomes. Example voice: "Discover the research that advances your field, today."

Colors

The color system is built on a foundation of institutional trust and scientific clarity. Primary (#2354ff) is the signature accent used for all interactive elements—CTAs, links, focus states, and key navigation—evoking the precision of scientific inquiry. Secondary (#ff551d) provides energetic contrast for highlights, alerts, and supporting actions, representing innovation and discovery. Tertiary (#0056d6) serves as a deeper blue for secondary interactions and status indicators. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (#f6f6f6, #ecebe9, #b5b6ba) to near-black (#141415), ensuring sufficient contrast (WCAG AA minimum 4.5:1 on body text) while maintaining visual lightness. Error states use #af1d1d for destructive actions and validation feedbac

Typography

The type system pairs Elsevier Serif for display and headline levels (display through title-lg: 72px down to 40px, all at 700 weight with -0.03em letter-spacing) with Elsevier Sans for body and label text (18px down to 12px at 400–600 weight, -0.02em to -0.03em spacing). This pairing communicates both scholarly authority (serif headlines) and modern accessibility (sans body). Display (72px, 700, 1.153 line-height) anchors hero sections and major page titles. Headline-lg (56px) and headline-md (48px) structure content hierarchy. Body-lg (18px) and body-md (16px) serve as primary reading text with 1.5 line-height for comfortable scanning. Label-md (14px, 600) is used for buttons, form labels, and UI chrome. All text smaller than 16px should receive a text-shadow of 0 1px 2px rgba(0, 0, 0, 0.

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, maintaining a 24px gutter between columns and 40px section margins (lg spacing). The page rhythm alternates between full-bleed hero sections (often with background imagery or gradients) and contained content blocks. White space is treated as a design material: sections are separated by 40–64px vertical spacing (lg to xl), and internal card padding uses 24px (md spacing). The header maintains a fixed 8px vertical padding with 24px horizontal margins, creating a clean, minimal chrome. Form fields and inputs use 12px padding (sm spacing) with 4px border-radius (sm rounded), while larger interactive surfaces (cards, modals) use 24px padding and 4px border-radius. Container max-width of 1280px ensures readability

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than bold drop-shadows. Level 1 (Base): no shadow; flat surfaces on white background. Level 2 (Standard Card): box-shadow: 0 4px 4px rgba(51, 51, 51, 0.02), 0 10px 40px rgba(51, 51, 51, 0.1)—a soft, diffuse shadow suggesting gentle lift. Level 3 (Elevated/Modal): box-shadow: 0 4px 10px rgba(51, 51, 51, 0.06), 0 20px 80px rgba(51, 51, 51, 0.2)—a more pronounced shadow for modals and overlays. Hover states on cards transition to Level 3 shadow over 300ms (background-color 0.3s ease). Focus states use a 3px inset border in primary (#235

Shapes

The shape philosophy is "Refined Geometry"—minimal rounding that suggests precision and modernity without sacrificing approachability. Buttons and interactive elements use full rounding (border-radius: 9999px) to signal interactivity and create a friendly, inviting feel. Cards and containers use 4px (DEFAULT rounded) for subtle definition. Form inputs use 4px rounding to match cards. Modals and elevated surfaces use 8px (lg rounded) for slightly more presence. The 2px (sm rounded) is reserved for small UI elements like badges and tags. This graduated scale creates visual hierarchy: the more in

Components

Action Elements Buttons are the primary call-to-action mechanism. Button-primary uses background: {colors.primary} (#2354ff), color: white, padding: 12px 24px, height: 44px, border-radius: 9999px, and font-weight: 600 (label-md). On hover, background transitions to #1f40b4 over 300ms (background-color 0.3s ease). On active/pressed, background becomes #1c358e. Button-secondary uses transparent background with 1px solid border in primary, same padding and height, for secondary actions. Button-tertiary uses {colors.secondary} (#ff551d) for warning or highlight actions. All buttons include box-shadow: {elevation.md} for subtle depth. Focus state adds outline: 2px solid {colors.primary} with 4px offset.

Containers & Surfaces Cards use background: white, border: 1px solid #ecebe9, borde

Do's and Don'ts

**Do**

• Do use primary blue (#2354ff) for all primary CTAs and interactive elements—it is the signature accent that builds brand recognition.
• Do maintain 24px (md spacing) as the default margin between sections and 40px (lg spacing) for major section breaks to create breathing room.
• Do apply Elsevier Serif for all headline levels (display through title-lg) to establish authority and hierarchy; reserve Elsevier Sans for body and UI text.
• Do use the full-rounded button style (border-radius: 9999px) for all interactive buttons to signal affordance and friendliness.
• Do test all text smaller than 16px over colored or image backgrounds with the 0 1px 2px rgba(0, 0, 0, 0.08) text-shadow for legibility.
• Do use the three-level shadow system (sm, md, lg) to create depth without harsh drop-shadows; all shadows use rgba(51, 51, 51, x) for warmth.

**Don't**

• Don't use secondary orange (#ff551d) as a primary CTA color—it is reserved for highlights, alerts, and supporting actions only.
• Don't apply border-radius: 0 (sharp corners) to any interactive element; minimum 2px rounding maintains the refined aesthetic.
• Don't exceed 1280px container width; content beyond this width becomes difficult to scan and dilutes focus.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; use the on-* color tokens (on-primary, on-secondary, etc.) for proper contrast.
• Don't animate transitions faster than 300ms or slower than 500ms; this range feels responsive without appearing jarring.
• Don't mix Elsevier Serif and Elsevier Sans at the same size level; maintain clear hierarchy by using serif for headlines and sans for body.