Onetrust Design System Deep Dive

1. Brand Overview

Onetrust’s design language hits you with a feeling of authority and compliance-first professionalism. This isn’t a playful consumer brand—it’s precision software for governance, privacy, and trust management. The site is built to reassure enterprise buyers: clean typography, deliberate spacing, and a restrained palette anchored in deep greens and neutral grays.

The vibe is corporate, but not cold. The greens soften the tone, hinting at sustainability and ethics, while the typography—Brut Grotesque—keeps it modern and slightly unconventional. They’re clearly not afraid of using large, airy type sizes in headings, which gives the layouts breathing room and communicates confidence. There’s no attempt to overload the user with visual noise; the UI is functional and direct.

From a design philosophy perspective, Onetrust leans into clarity over ornamentation. Buttons are flat or lightly shadowed, borders are used more than heavy shadows for separation, and the grid feels disciplined around an 8px base unit. This is a system aimed at scalable enterprise interfaces—where every pixel needs a reason to exist.

For designers, this brand is a case study in restrained color usage and typographic hierarchy. For developers, the takeaway is: stick to the token set, respect the spacing scale, and don’t improvise with off-palette colors or rogue corner radii. Everything here has been thought through to keep the brand consistent across potentially hundreds of enterprise products.

2. Color System

2.1 Primary Colors

The hero color here is #2c6145 (rgb(44, 97, 69)). It’s a dark, muted green—trustworthy, eco-conscious, and serious. In the context of privacy and compliance software, green signals “safe”, “approved”, and “go”. It’s less aggressive than blue and more grounded than red.

Competitors in the space (think SAP, Oracle, Adobe Enterprise) often lean on blues for tech credibility. Onetrust’s green differentiates while still feeling professional. It’s not the bright green of consumer apps—it’s darker, with enough contrast against white text for accessibility.

2.2 Complete Palette

2.3 Color Relationships

Contrast is solid across the board. #2c6145 with white text easily meets WCAG AAA for normal text (contrast ratio ~6.9:1). Black on white is obviously safe. The light grays (#e7e7e7, #d8d8d8) are used against white for subtle separation—low contrast but intentional for non-critical dividers.

There’s no dark mode palette in this data—the site is designed for light backgrounds. However, the dark green could anchor a dark mode if needed, with white and pale gray as text colors.

2.4 Usage Guide

• Pair #2c6145 with white for primary CTAs.
• Use #40484f for headings that need to stand out but not dominate.
• Avoid using #005fcc outside hover/focus—it’s a functional accent, not a brand color.
• Keep #e7e7e7 and #d8d8d8 for structural lines only—don’t use for text.
• Don’t mix #555555 and #696969 in the same component without clear hierarchy—they’re too close in tone.

3. Typography

3.1 Font Families

The entire system runs on Brut Grotesque with fallbacks to Work Sans and Arial. No Google Fonts or Adobe Fonts detected—likely self-hosted. Brut Grotesque is geometric, slightly quirky, and fits the brand’s modern corporate tone.

3.2 Type Scale

Here’s the raw type data:

(Full table continues with all extracted sizes—too long to repeat here, but the data includes sizes down to 6.25px.)

3.3 Hierarchy

They use extreme size variance. H1 at 72px is massive—hero section territory. The lighter weights (200–300) keep these big headings elegant. The body/link sizes cluster around 14–16px, with consistent 1.25–1.50 line heights for readability.

Interesting: buttons sometimes get oversized text (26px) compared to body copy—this makes CTAs impossible to miss. Captions go down to 8.5px in some contexts, which is tiny; probably in footers or disclaimers.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Common values:

Everything is clean multiples of 4 or 8—stick to that.

4.2 Layout

Breakpoints range from 370px up to 1441px, covering mobile, tablet, and desktop. The spread is granular—likely adaptive tweaks rather than a strict 3-tier responsive model.

5. Visual Elements

Border Radius

The mix of sharp and very round is deliberate—functional UI is sharp, special CTAs get pills.

Shadows

Main shadow: rgba(0,0,0,0.08) 0px 16px 40px—soft, large blur for modals/cards. Minimal depth elsewhere; some small inset shadows for focus.

Borders

1px solid lines everywhere, in brand greens or grays, used to define structure. Borders are a bigger part of depth than shadows here.

6. Components

6.1 Buttons

Five main patterns:

Jump to Top Button

• Default: white bg, black text, 16px padding, 1px black border.
• Hover: bg #1eaedb, white text, black border.
• Active: bg #346e4a, text same green.
• Focus: bg #1eaedb, white text, 2px black outline.

Primary Action Button (cmp-button)

• Default: bg rgb(70,130,84), no visible border, 10px vertical padding, 32px horizontal.
• Hover: white bg, blue text, 1px green border, heavy shadow.
• Active: white text, green bg, subtle border.
• Focus: bg #1eaedb, white text, scaled up slightly.

Secondary Ghost Button

• Default: transparent bg, black border.
• Hover: same as primary hover.
• Active/Focus: same as primary.

Mkto Button

• Default: semi-transparent white bg, semi-transparent white text, no border.
• Hover/Focus: turns bright blue with white text.

Pill Button

• Default: dark green bg, white text, 50px radius pill, green border, small shadow.
• Hover: bright blue bg, white text.
• Focus: blue bg, white text, black outline.

6.2 Links

Four styles:

• White text, underline; hover turns bright blue, no underline.
• Black text, underline; hover bright blue.
• Light gray text, underline; hover bright blue.
• Dark green text, bold; hover bright blue.

6.3 Forms

Email input:

• Default: semi-transparent black bg, white text, green border, 16px padding.
• Focus: black border, blue bg, white text.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-charcoal: #40484f;
  --color-dark-green: #2c6145;
  --color-dim-gray: #696969;
  --color-gray: #555555;
  --color-light-gray: #e7e7e7;
  --color-pale-gray: #d8d8d8;
  --color-blue: #005fcc;

  /* Typography */
  --font-primary: "Brut Grotesque", "Work Sans", Arial;
  --font-size-h1-xl: 4.50rem;
  --font-size-h1-lg: 4.00rem;
  --font-size-h1-md: 3.50rem;
  --font-size-h1-sm: 2.75rem;
  --font-size-body: 1rem;
  --line-height-tight: 1.11;
  --line-height-normal: 1.25;
  --line-height-loose: 1.50;

  /* Spacing */
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-64: 64px;
  --space-80: 80px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 20px;
  --radius-pill: 50px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.08) 0px 16px 40px 0px;

  /* Borders */
  --border-1-gray: 1px solid #e7e7e7;
  --border-1-green: 1px solid #2c6145;
}

8. AI Coding Assistant Prompt

# Onetrust Design System Specification

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

## Brand Context
Onetrust’s visual system is enterprise-focused: restrained colors, disciplined grid, and a modern grotesque typeface. It communicates trust, compliance, and professionalism with a muted green palette and clean typography.

## Color Palette
- Black: #000000 — Body text, borders
- White: #ffffff — Backgrounds, text on dark
- Charcoal: #40484f — Secondary text, headers
- Dark Green: #2c6145 — Primary brand color, CTAs, navigation headings
- Dim Gray: #696969 — Secondary text
- Gray: #555555 — Secondary link/button text
- Light Gray: #e7e7e7 — Dividers, card borders
- Pale Gray: #d8d8d8 — Header separators
- Blue: #005fcc — Hover/focus accent

## Typography
Font: "Brut Grotesque", "Work Sans", Arial

| Level       | Size      | Weight | Line Height | Use For         |
|-------------|-----------|--------|-------------|-----------------|
| H1 XL       | 72px      | 200    | 1.11        | Hero headings   |
| H1 LG       | 64px      | 200    | 1.13        | Large titles    |
| H1 MD       | 56px      | 200-400| 1.14        | Section titles  |
| H1 SM       | 44px      | 400    | 1.27        | Subheadings     |
| Body        | 16px      | 400-500| 1.25-1.50   | Main content    |
| Caption     | 14px      | 300-700| 1.40-1.43   | Small notes     |
| Button Text | 26px      | 400    | 1.50        | CTA text        |

## Spacing & Grid
Base: 8px. Scale: 4px, 5px, 8px, 10px, 16px, 24px, 32px, 64px, 80px.

## Border Radius
- none: 0px — tables, flat cards
- sm: 2px — buttons, inputs
- md: 3px — panels
- lg: 20px — pills
- pill: 50px — CTA buttons
- full: 50% — circular buttons

## Shadows & Depth
- Large Card Shadow: rgba(0,0,0,0.08) 0px 16px 40px — modals, feature cards

## Component Specifications

### Primary Button
Default: bg #468254, color #000, padding 10px 32px, radius 0px, border 1px transparent.
Hover: bg #fff, color #1883fd, border 1px #447f19, shadow rgba(0,0,0,0.2) 0px 1.6rem 4rem.
Active: bg #75ae4c, color #fff, border rgba(162,192,169,0.5).
Focus: bg #1eaedb, color #fff, transform scale(1.1), border 1px #447f19.

### Secondary Button (Ghost)
Default: transparent bg, black border, padding 10px 32px.
Hover/Focus: same as primary hover.

### Navigation Link
Default: black text, underline.
Hover: bright blue text, no underline.

### Input Field (Email)
Default: bg rgba(0,0,0,0.2), white text, green border, 16px padding.
Focus: bg #1eaedb, white text, black border.

### Card
Padding: 24px, bg white, border 1px #e7e7e7, shadow var(--shadow-lg).

## Layout & Responsive Rules
Breakpoints: 370px, 400px, 425px, 510px, 550px, 600px, 640px, 760px, 768px, 881px, 896px, 1024px, 1200px, 1280px, 1440px.

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus indicators: 2px solid outline in brand or accent color
- Disabled states: opacity 0.5

## DO List
- Use ONLY colors from the palette—no custom colors
- Maintain 8px grid—all spacing must be multiples of 4px/8px
- Use Brut Grotesque for all text
- Keep corner radii consistent per component type
- Reserve blue (#005fcc) for hover/focus

## DON'T List
- Don’t mix rounded and sharp corners in the same component
- Don’t use shadows heavier than the defined large card shadow
- Don’t apply primary green to non-interactive text
- Don’t deviate from the spacing scale

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #468254;
  color: #000;
  padding: 10px 32px;
  border-radius: 0px;
  border: 1px solid transparent;
  font-family: var(--font-primary);
  font-size: 26px;
  font-weight: 400;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #fff;
  color: #1883fd;
  border: 1px solid #447f19;
  box-shadow: rgba(0,0,0,0.2) 0px 1.6rem 4rem;
}
.btn-primary:focus {
  background: #1eaedb;
  color: #fff;
  transform: scale(1.1);
  border: 1px solid #447f19;
}
```

### Card
```css
.card {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: var(--space-24);
  border: var(--border-1-gray);
  box-shadow: var(--shadow-lg);
}
```

### Input
```css
.input-email {
  background: rgba(0,0,0,0.2);
  color: #fff;
  border: 1px solid #2c6145;
  padding: 16px;
}
.input-email:focus {
  background: #1eaedb;
  color: #fff;
  border: 1px solid #000;
}
```

9. Summary

TL;DR — Onetrust’s design system is all about disciplined color use, big confident typography, and a strict 8px grid. Greens and neutrals dominate, with blue reserved for interaction states. Keep radii consistent and spacing precise, and you’ll match the brand tone.

Brand Keywords:

• trust-driven
• compliance-modern
• green-authoritative
• grid-disciplined
• typography-confident