Trustpilot Design System Deep-Dive

1. Brand Overview

Trustpilot’s design language is exactly what you’d expect from a platform built entirely around credibility: clean, restrained, and designed to remove friction. This is a brand whose UI has one job — make it easy to read and trust information. They’re not chasing trends, they’re chasing clarity.

The first thing you notice is the neutrality. Colors are muted. Typography is strong but not flamboyant. Components have enough breathing room to avoid feeling cramped, but never waste space. The design system is functional first, aesthetic second — and that’s a smart choice for a reviews platform. You don’t want the interface competing with the content; you want it to frame it.

They lean heavily on a dark-neutral primary (#121511) for text and brand anchors, punctuated by a mid-blue (#3c57bc) for interactive elements. This blue isn’t the hyper-saturated "growth-hack" blue you see in social media brands — it’s more serious, slightly subdued. It says "click me" without screaming.

Rounded elements are everywhere — pill buttons hit a ridiculous 9999px radius, avatars go full 50%. This softness offsets the otherwise utilitarian palette. It’s a subtle trust signal: rounded = approachable.

The typography is custom — "Trustpilot Display" and "Trustpilot Sans" — with fallback to Arial. That tells you they care about brand-locked type but still want safe fallbacks. The weights are varied (400–800) and used deliberately to create hierarchy. Line heights are tight for headings, looser for body, which keeps things readable without feeling bloated.

Spacing runs on an 8px base grid. Everything is a multiple of 8px or 4px. That consistency is why the site feels coherent even when you jump between modules.

Overall: Trustpilot’s system is utilitarian with just enough personality. It’s built for trust, not for flash. And it works.

2. Color System

2.1 Primary Colors

The semantic primary color is rgb(18, 21, 17) (#121511) — a near-black with a hint of warmth. It’s used for text, core brand elements, and certain button states. This is serious, grounded, and high-contrast against light backgrounds.

Secondary semantic color is rgb(255, 255, 254) (#fffffe) — basically off-white. That’s the surface color for cards, modals, and backgrounds.

The interaction accent is rgb(60, 87, 188) (#3c57bc) — the link blue, button blue, and active state blue. It’s cooler than the primary, and it stands out well against both white and near-black. They also have lighter hover/focus blues (#799dfa and #9cc6ff) for interactive feedback.

This palette is low-saturation except for the blue accents. It’s not playful. It’s about clarity and contrast.

Competitor comparison: Google Reviews leans on brighter blues, Yelp uses aggressive reds. Trustpilot’s blue is calmer — it won’t fatigue the eye in long sessions.

2.2 Complete Palette

2.3 Color Relationships

The dark neutral #121511 on #fffffe hits WCAG AAA easily — contrast ratio is well over 12:1. Blue #3c57bc on white is about 7:1 — still AAA for normal text. Hover/focus blues lighten enough to signal change without losing contrast.

There’s no true dark mode here. The palette is tuned for a light surface.

2.4 Usage Guide

• Primary (#121511): Use for headings, primary text, and brand anchors.
• Blue (#3c57bc): ONLY for interactive elements. Don’t use it for decorative backgrounds — it breaks the trust signal.
• Neutrals: Borders are #dcd6d1. Keep them subtle — this brand doesn’t do heavy dividers.
• Hover/Focus: Lighter blues (#799dfa, #9cc6ff) are for state changes only.
• Avoid using multiple blues together — keeps interaction hierarchy clear.

3. Typography

3.1 Font Families

Two custom families:

• Trustpilot Display — used for major headings. Fallback: Arial.
• Trustpilot Sans — used for most UI text, links, buttons, captions. Fallback: Arial.

No Google Fonts, no Adobe Fonts. Likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

The jump from 48px to 32px for headings is big — you instantly know what’s the page title vs. section title. Sub-headings at 24px keep things readable without feeling small. Body text sits mostly at 16px with comfortable line heights (1.20–1.40). Captions drop to 12–14px, lightening the visual weight.

They use weight changes more than size changes for emphasis. That’s efficient — fewer font sizes to manage.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Common values:

4.2 Layout

Breakpoints range from 98px (!) up to 1280px. That’s a lot of fine-grained breakpoints — they’re tuning for many device widths. Expect fluid layouts, not rigid fixed widths.

5. Visual Elements

Border Radius

They love extremes: either sharp corners or absurdly rounded pills.

Shadows

Sparse. Three shadows in the whole system. Most UI uses borders for separation.

• rgba(106, 106, 104, 0.1) 0px 4px 8px (multi-layer) — subtle depth
• rgba(0, 0, 0, 0.2) 0px 0px 18px — heavier modal depth
• rgb(128, 128, 128) 0px 0px 5px — rare, maybe images

Borders

Default border: 1px solid #dcd6d1 — light neutral. Used on inputs, cards, dividers.

6. Components

6.1 Buttons

They have multiple variants. Example: a pill button with 9999px radius, blue background (#799dfa default), white text.

Each variant has full hover/active/focus specs. Example:

Primary:

• Default: bg #3c57bc, text #fffffe, border 1px solid transparent
• Hover: bg #1c52bd, text white
• Focus: outline 2px solid #000, bg #1eaedb

6.2 Links

No underlines. Color changes on hover (#565656).

Variants:

• Black (#000000)
• Dark neutral (#111011)
• Blue (#3c57bc)
• White (#fffffe)
• Light neutral RGBA (rgba(243, 242, 243, 0.9))
• Off-white (#ebe9ec)

6.3 Forms

Search inputs have big radii (32px), neutral borders (#dcd6d1), and blue focus backgrounds (#1eaedb). Padding is precise — often 0px 60px 0px 24px to accommodate icons.

6.4 Cards

Radius varies — 16px, 20px, 24px depending on importance. Borders are light neutral. Shadows are minimal.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #121511;
  --color-secondary: #fffffe;
  --color-dark-neutral: #2d2f29;
  --color-light-neutral-1: #dcd6d1;
  --color-mid-neutral: #605e56;
  --color-light-neutral-2: #ebe9ec;
  --color-off-white: #fffffe;
  --color-accent-blue: #3c57bc;
  --color-hover-blue: #799dfa;
  --color-focus-blue: #9cc6ff;
  --color-pure-dark: #1c1c1c;

  /* Typography */
  --font-display: "Trustpilot Display", Arial, sans-serif;
  --font-sans: "Trustpilot Sans", Arial, sans-serif;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13.008px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;
  --space-68: 68px;

  /* Radius */
  --radius-none: 0px;
  --radius-2: 2px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-subtle: rgba(106, 106, 104, 0.1) 0px 4px 8px, rgba(106, 106, 104, 0.1) 0px 2px 4px, rgba(28, 28, 28, 0.1) 0px 1px 2px;
  --shadow-medium: rgba(0, 0, 0, 0.2) 0px 0px 18px;
  --shadow-small: rgb(128, 128, 128) 0px 0px 5px;
}

8. AI Coding Assistant Prompt

# Trustpilot Design System Specification

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

## Brand Context
Trustpilot’s design philosophy: clarity over flash. Neutral palette with calm blue accents. Rounded elements soften an otherwise utilitarian grid. Typography is custom, bold for headings, lighter for body.

## Colors
- Primary Near-Black: #121511 — main text, brand anchors
- Secondary Off-White: #fffffe — backgrounds, surfaces
- Dark Neutral: #2d2f29 — headings, dark sections
- Light Neutral 1: #dcd6d1 — borders, dividers
- Mid Neutral: #605e56 — secondary text
- Light Neutral 2: #ebe9ec — text on dark backgrounds
- Accent Blue: #3c57bc — links, primary buttons
- Hover Blue: #799dfa — hover states for accents
- Focus Blue: #9cc6ff — focus outlines
- Pure Dark Grey: #1c1c1c — alternate dark

## Typography
Font families:
- Headings: "Trustpilot Display", Arial, sans-serif
- Body/UI: "Trustpilot Sans", Arial, sans-serif

Type sizes:
| Level | Font | Size | Weight | Line Height | Use |
| H1 | Display | 48px | 800 | 1.30 | Page titles |
| H2 | Display | 32px | 800 | 1.30 | Section headings |
| Subheading | Sans | 24px | 500–575 | 1.20 | Subtitles |
| Body | Sans | 16px | 400–575 | 1.20–1.40 | Main content |
| Caption | Sans | 12–14px | 400–575 | 1.20–1.40 | Footnotes |
| Button | Sans | 13–14.4px | 400–600 | 1.20–2.64 | CTAs |

## Spacing & Grid
Base: 8px
Scale: 4px, 8px, 10px, 12px, 13.008px, 16px, 24px, 32px, 40px, 64px, 68px
Use multiples of 8px for all spacing.

## Border Radius
- none: 0px — tables, sharp divs
- sm: 2px — small buttons
- md: 8px — inputs, small cards
- lg: 16px — cards
- xl: 20px–24px — featured cards
- pill: 32px — search fields
- full: 9999px — pill buttons
- circle: 50% — avatars

## Shadows & Depth
- subtle: rgba(106, 106, 104, 0.1) 0 4px 8px, rgba(106, 106, 104, 0.1) 0 2px 4px, rgba(28, 28, 28, 0.1) 0 1px 2px
- medium: rgba(0, 0, 0, 0.2) 0 0 18px
- small: rgb(128, 128, 128) 0 0 5px

## Component Specifications

### Primary Button
Default:
- bg: #3c57bc
- color: #fffffe
- padding: 0px 24px
- radius: 9999px
- border: 1px solid transparent
Hover:
- bg: #1c52bd
Active:
- bg: #1c52bd
Focus:
- outline: 2px solid #000

### Secondary Button
Default:
- bg: #fffffe
- color: #3c57bc
- padding: 12px 16px
- radius: 32px
- border: 1px solid #dcd6d1
Hover:
- bg: #ffffff
Active:
- bg: #1c52bd
Focus:
- bg: #1eaedb

### Navigation Links
Default: color per variant, no underline
Hover: #565656, no underline

### Input Fields
Default:
- bg: #ffffff
- color: #a9a9a9
- border: 1px solid #dcd6d1
- radius: 32px
Focus:
- bg: #1eaedb
- color: #ffffff
- border: 1px solid #000

### Cards
- bg: #fffffe
- radius: 16px–24px
- border: 1px solid #dcd6d1
- shadow: subtle or none

## Layout & Responsive Rules
Breakpoints: 98px, 400px, 425px, 426px, 480px, 530px, 550px, 600px, 640px, 768px, 769px, 890px, 896px, 897px, 1023px, 1024px, 1280px

## Interaction Rules
- Transition: 150ms ease
- Focus indicators: 2px solid black or focus blue
- Hover: subtle bg change for buttons

## DO List
- Use only palette colors
- Maintain 8px grid
- Use Trustpilot Display for headings
- Keep buttons pill-shaped for primary actions
- Use light borders for separation

## DON'T List
- Don’t use drop shadows heavily
- Don’t mix sharp and rounded corners on same element
- Don’t invent new blues
- Don’t underline links

## Code Examples
```css
.btn-primary {
  background: #3c57bc;
  color: #fffffe;
  padding: 0 24px;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 16px;
  border: 1px solid transparent;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #1c52bd; }
.btn-primary:focus { outline: 2px solid #000; }

.card {
  background: #fffffe;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #dcd6d1;
}

.input-search {
  border: 1px solid #dcd6d1;
  border-radius: 32px;
  padding: 0 60px 0 24px;
  background: #ffffff;
}
.input-search:focus {
  background: #1eaedb;
  color: #ffffff;
  border-color: #000;
}
```

9. Summary

TL;DR — Trustpilot’s design system is neutral, grid-tight, and built entirely around clarity. Blues signal interaction, neutrals frame content, and rounded shapes soften the utilitarian layout.

Brand Keywords:

• trust-first
• neutral-grid
• calm-interactive
• utility-softened
• content-priority