ResearchGate Design System Deep Dive

1. Brand Overview

ResearchGate’s visual language is exactly what you’d expect from a professional academic network — restrained, functional, and unfussy — but with just enough personality to avoid feeling sterile. This is a brand aimed at scientists, researchers, and academics who value clarity over flash. You won’t find ornamental flourishes here. The design is stripped down to essentials, focusing on legibility, information hierarchy, and trust.

The vibe is “science-forward minimalism.” The primary green (#40ba9b) is calm and confident, a color that signals health, growth, and trust without the aggression of tech blues or the corporate stiffness of dark navies. The supporting palette leans heavily on muted greys (#677469, #9bb2ac) and deep neutrals (#001e1d, #000000). These are workhorse tones that keep the interface grounded and let content — research papers, figures, charts — take center stage.

Typography sticks with Montserrat almost everywhere, a geometric sans-serif that’s clean, modern, and readable in both headings and small UI labels. There’s no typographic experimentation — it’s consistency over variety. That’s good for a platform where 80% of the interface is content-heavy and the rest is data entry.

Buttons and links are understated. No glossy gradients, no oversized call-to-actions. Even the “Join” button uses a soft green with a minimal 3px radius — enough to soften edges without tipping into “app-y” bubble territory. Borders replace shadows for depth, reinforcing the flat, content-first philosophy.

Overall, the design language tells you: “We’re here to help you share your research, not to distract you.” It’s pragmatic, slightly conservative, but professional. This works because ResearchGate’s audience cares about credibility and focus. A flashy, overdesigned interface would erode trust in seconds.

2. Color System

2.1 Primary Colors

The hero tone is #40ba9b — a medium green that’s neither too bright nor too dull. It’s used for CTAs, active states, and brand accents. This choice is deliberate: green conveys progress without the urgency (or spammy vibe) of red, and without the “corporate coldness” of blue. The secondary accent is #0080ff, a saturated blue used for links and some UI highlights. Blue is common in academic and tech interfaces, but here it’s secondary, supporting the green rather than dominating.

Compared to competitors (think Academia.edu’s warm red, LinkedIn’s corporate blue), ResearchGate’s palette feels more neutral and less “salesy.”

2.2 Complete Palette

Here’s the extracted high-confidence palette from the site:

The full color system includes hundreds of --nova-color-* tokens with various opacities (e.g., a1 = 20% alpha, a7 = 90% alpha). These are used for hover/focus states, overlays, and subtle UI distinctions. For example, --nova-color-green-400-a3: #69D6CD60 is a semi-transparent green used for hover highlights.

2.3 Color Relationships

The green (#40ba9b) against white (#fffffe) is comfortably WCAG AA compliant for large text and UI elements. Blue (#0080ff) on white is even higher contrast, safe for body text and links. Grey tones are trickier — #9bb2ac on white is borderline for small text; it’s fine for dividers but not for primary copy.

There’s no dark mode in the extracted data, but the deep neutral (#001e1d) could serve as a dark background if needed. The palette structure makes a dark mode feasible — swap white for #001e1d, adjust text to light greys, and keep green/blue accents.

2.4 Usage Guide

• Works well: Primary green for buttons with white text; blue links inside paragraphs; grey borders against white backgrounds.
• Avoid: Using light grey (#9bb2ac) for text — it fails accessibility for small sizes.
• Good combo: Green borders with blue text — keeps visual variety without clashing.
• Bad combo: Blue text on green background — not enough contrast.

3. Typography

3.1 Font Families

One family dominates: Montserrat, with no declared fallbacks in the extracted data. It’s likely loaded via Google Fonts, but here it’s applied uniformly to headings, links, buttons, captions, and body text. There’s a single exception: a button style using Arial at 12px, probably a legacy or fallback case.

No variable fonts or Adobe Fonts are detected. This is a straight, static Montserrat setup.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is clear but subtle. H1s at 38–40px are big enough for page titles without feeling oversized. The jump down to 24px for lighter-weight headings creates a secondary tier. Body and UI text live in the 14–18px range, with weight shifts (400–700) doing most of the work to signal importance.

No wild tracking changes except uppercase captions with 1.4px spacing — these are for section labels or meta info. The consistency of Montserrat across all contexts means hierarchy relies heavily on size and weight, not font changes. This works for a utilitarian interface where users scan for headings and links quickly.

4. Spacing & Layout

4.1 Spacing Scale

Base grid is 8px, but there are some oddball values like 8.5px and 15px. These are probably from legacy padding or pixel-perfect alignments.

4.2 Layout

No explicit breakpoints in the data, but the spacing scale suggests an 8px grid applied across components. The lack of shadows hints at a flat layout style — depth is created with spacing and borders, not elevation.

5. Visual Elements

• Border Radius: Only two values — 3px (buttons, inputs) and 60.5px (badges, pill shapes). This is binary: either slightly rounded or fully pill.
• Shadows: None. This is a flat design system.
• Borders: Mostly 1px solid with functional colors (#40ba9b green, #9bb2ac light grey). A few 0px none solid combos for bottom borders in navs.

6. Components

6.1 Buttons

Two main variants:

Join Button (index-main__join-btn)

• Default: background #40ba9b, text #0080ff
• Padding: 20px 0px
• Radius: 3px
• No border, no shadow
• Font: Montserrat, 12px, weight 400

Footer Button (index-footer__btn)

• Default: transparent background, text #111111
• Padding: 8.5px 13.5px
• Radius: 3px
• Border: 1px solid #40ba9b
• Font: Montserrat, 12px, weight 400

No hover/active/focus states in extracted data — probably handled by alpha variants (a1–a7 tokens) elsewhere.

6.2 Links

Four styles:

1. Blue (#0080ff), weight 400 — default inline link
2. Dark grey (#677469), weight 700 — muted but bold
3. Green (#40ba9b), weight 700 — brand accent link
4. Black (#111111), weight 400 — standard text link

No underline on default state.

6.3 Forms

Inputs have 1px solid #677469 borders, 3px radius. No shadows. Focus styles aren’t in the data — likely handled with alpha greens or blues.

6.4 Cards

No explicit card component in extracted data, but layout spacing (15px, 20px, 24px) and border colors suggest flat cards with light grey borders.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary-green: #40ba9b;
  --color-secondary-blue: #0080ff;
  --color-grey-dark: #677469;
  --color-grey-light: #9bb2ac;
  --color-deep-neutral: #001e1d;
  --color-black: #000000;
  --color-white-ish: #fffffe;
  --color-mid-grey: #888888;

  /* Typography */
  --font-family-primary: "Montserrat", sans-serif;
  --font-family-fallback: Arial, sans-serif;
  --font-size-h1-lg: 40px;
  --font-size-h1-md: 38px;
  --font-size-h1-sm: 24px;
  --font-size-button-lg: 18px;
  --font-size-button-sm: 14px;
  --font-size-caption: 14px;
  --font-size-link: 12px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-tight: 1.10;
  --line-height-normal: 1.29;
  --line-height-loose: 1.50;

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-8-5: 8.5px;
  --space-10: 10px;
  --space-14: 14px;
  --space-15: 15px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-62: 62px;
  --space-80: 80px;

  /* Radius */
  --radius-sm: 3px;
  --radius-pill: 60.5px;

  /* Borders */
  --border-green: 1px solid #40ba9b;
  --border-grey-light: 1px solid #9bb2ac;
  --border-grey-dark: 1px solid #677469;
}

8. AI Coding Assistant Prompt

# ResearchGate Design System Specification

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

## Brand Context
ResearchGate’s design is academic, professional, and content-first. It uses a restrained palette, flat design, and consistent typography to prioritize clarity. Borders and spacing define structure; shadows are avoided.

## Color Palette
- Primary Green: #40ba9b — CTAs, borders, active states
- Secondary Blue: #0080ff — Links, secondary CTAs
- Grey Dark: #677469 — Secondary text, muted headings
- Grey Light: #9bb2ac — Dividers, inactive states
- Deep Neutral: #001e1d — Body text, icons
- Black: #000000 — High-contrast text
- White-ish: #fffffe — Page background
- Mid Grey: #888888 — Disabled states, metadata

## Typography
Font Family: "Montserrat", sans-serif; fallback: Arial
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 Large | 40px | 700 | 1.10 | Page titles |
| H1 Medium | 38px | 700 | 1.21 | Section titles |
| H1 Light | 24px | 300 | 1.17 | Subheadings |
| Button Large | 18px | 700 | 1.06 | Primary buttons |
| Button Small | 14px | 700 | 1.29 | Secondary buttons |
| Caption Bold | 14px | 700 | 1.50 | Labels (uppercase) |
| Caption Regular | 14px | 400 | 1.29 | Meta info |
| Link | 14px | 700 | 1.29 | Inline links |
| Link Small | 12px | 400 | 1.50 | Footer links |

## Spacing & Grid
Base: 8px grid
Tokens: 1px, 3px, 4px, 5px, 8.5px, 10px, 14px, 15px, 18px, 20px, 24px, 30px, 32px, 40px, 62px, 80px
Use multiples for all padding/margin.

## Border Radius
- sm: 3px — buttons, inputs
- pill: 60.5px — badges

## Shadows & Depth
Flat design—use borders instead of shadows.

## Component Specifications

### Primary Button
Default:
```css
.btn-primary {
  background: #40ba9b;
  color: #0080ff;
  padding: 20px 0px;
  border-radius: 3px;
  font-family: "Montserrat";
  font-size: 12px;
  font-weight: 400;
  border: none;
}
```
Hover/Focus: use alpha variant of green (`--nova-color-green-400-a3`), no shadow.

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: #111111;
  padding: 8.5px 13.5px;
  border-radius: 3px;
  font-family: "Montserrat";
  font-size: 12px;
  font-weight: 400;
  border: 1px solid #40ba9b;
}
```

### Navigation Links
No underline default; color per variant.

### Input Fields
```css
.input {
  border: 1px solid #677469;
  border-radius: 3px;
  font-family: "Montserrat";
}
.input:focus {
  border-color: #40ba9b;
  outline: none;
}
```

### Cards
Background: #fffffe; border: 1px solid #9bb2ac; padding: 15px.

## Layout & Responsive Rules
Max width: content-first, no fixed in data.
Page padding: multiples of 8px.
Grid gap: 15–32px.

## Interaction Rules
- 150ms ease for state changes
- Focus with 2px border in primary green
- Disabled: 50% opacity

## DO List
- Use only palette colors
- Maintain 8px grid
- Keep corners at 3px or pill
- Use Montserrat everywhere
- Rely on borders, not shadows
- Use uppercase captions for meta labels

## DON'T List
- Don't add shadows
- Don't mix sharp and rounded corners
- Don't introduce new colors
- Don't use light grey for small text
- Don't overload green — reserve for interactive elements

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #40ba9b;
  color: #0080ff;
  padding: 20px 0px;
  border-radius: 3px;
  font-family: "Montserrat";
  font-size: 12px;
  font-weight: 400;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: rgba(64,186,155,0.9);
}
```

Card:
```css
.card {
  background: #fffffe;
  border: 1px solid #9bb2ac;
  border-radius: 3px;
  padding: 15px;
}
```

Input:
```css
.input {
  border: 1px solid #677469;
  border-radius: 3px;
  font-size: 14px;
}
.input:focus {
  border-color: #40ba9b;
}
```

9. Summary

TL;DR — ResearchGate’s design is flat, academic, and functional. Green (#40ba9b) is the hero, blue (#0080ff) supports it, Montserrat runs the whole typography stack, and spacing/borders do the heavy lifting. No shadows. No fuss.

Brand Keywords:

• science-minimalist
• flat-interface
• trust-first
• content-prioritized
• restrained-color