Cookielaw (OneTrust Cookie Consent) — Design System Deep Dive

1. Brand Overview

Cookielaw, as implemented under OneTrust’s Cookie Consent product, is not a consumer-facing “fun” cookie brand — it’s compliance software. That matters. The design choices are not about playful branding; they are about trust, clarity, and professionalism. This is software that sits on thousands of corporate websites, often in regulated industries, and the visual language reflects that.

The vibe: controlled, corporate, clear. Colors lean into greens and dark neutrals — the greens signal safety, environmental friendliness, and compliance. Typography is modern sans-serif but with a slight humanist touch via Brut Grotesque (with Work Sans and Arial fallbacks). That choice gives the interface a contemporary feel without going ultra-techy. It’s approachable but not casual.

Design philosophy here is utilitarian with occasional polish. You’ll see very small border radii (2px) for most UI elements — sharp enough to feel serious. Then they reserve large radii (50px, 100px, 50%) for specific components like pill buttons or circular icons. That contrast keeps the interface from feeling flat or monotonous.

The audience is primarily corporate web managers, compliance officers, and developers integrating consent banners. The UI needs to work in dozens of contexts — which explains the restrained palette and typography scale. It's a design system that prioritizes compatibility and legibility over brand-heavy visual identity.

OneTrust’s green (#2c6145) is the anchor. You’ll see it in links, button borders, and accent elements. The rest of the palette is neutrals — black, white, grays in various intensities — plus a single bright blue (#005fcc) that appears in hover/focus states. That blue is almost hidden until interaction, reinforcing the idea that color is functional, not decorative.

This is not a flashy design system. It’s the equivalent of a well-tailored compliance document — structured, readable, and consistent. And that’s exactly why it works for its purpose.

2. Color System

2.1 Primary Colors

Primary brand color: #2c6145 (rgb(44, 97, 69)). This is the “OneTrust green.” It’s dark enough to be legible for text and borders, but rich enough to feel like a brand color. Psychologically, dark green communicates stability, trust, and environmental awareness. Competitors in the compliance space often use blues (trust, tech) or grays (neutrality). OneTrust’s green stands out as a softer, more human approach.

2.2 Complete Palette

2.3 Color Relationships

• Primary green (#2c6145) against white (#ffffff) has sufficient WCAG contrast for normal text.
• Black (#000000) is used heavily for text — safe contrast on white backgrounds.
• Light grays (#e6e6e6, #d8d8d8) are used for background separation, not text — avoids low contrast issues.
• Bright blue (#005fcc) is reserved for interactive feedback — high contrast on white.
• This palette is friendly to both light and dark contexts, but the system is clearly designed for light mode. No dark mode-specific tokens are present.

2.4 Usage Guide

• Do use #2c6145 for links, accents, and borders on brand-heavy components.
• Do keep text colors either black (#000000) or dark gray (#40484f) for readability.
• Use #1eaedb for hover/focus highlights, but only on interactive elements.
• Avoid using CTA blue (#1eaedb) for static decorations — it’s meant for state changes.
• Avoid mixing multiple greens — stick to the brand green unless it’s an active state.

3. Typography

3.1 Font Families

• Primary: Brut Grotesque
• Fallbacks: Work Sans, Arial
• No Google Fonts or Adobe Fonts detected — likely self-hosted.

Brut Grotesque gives headings a modern, slightly condensed look. Work Sans is a clean fallback. Arial is the universal system fallback. This stack ensures consistency across browsers without relying on external font loading.

3.2 Type Scale

3.3 Hierarchy

The scale is wide — from 64px for large headings down to 6.25px micro-text. The low weights (200) on large headings create an airy feel. Buttons often use heavier weights (600–700) for emphasis. Line heights are tight for headings, looser for captions and buttons. This keeps large text compact and small text readable.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. They also use fractional values (7.5px, 15.5px).

4.2 Layout

Breakpoints range from 370px up to 1441px, covering mobile to large desktop. The number of breakpoints suggests careful tuning for specific device widths, not just standard mobile/tablet/desktop.

5. Visual Elements

Border Radius

Small radii dominate. Large radii are reserved for pills and circular elements.

Shadows

• rgba(0,0,0,0.08) 0px 16px 40px — used for depth on modals/cards
• rgb(153,153,153) 0px 2px 10px -3px — subtle button shadows
• Others are rare — shadows are minimal.

Borders

Mostly 1px solid in grays and greens. Thin dividers separate sections and components.

6. Components

6.1 Buttons

Variant 1 (cmp-jump-to-top)

• Default: bg #ffffff, color #000000, padding 16px, border 1px solid #000000
• Hover: bg #1eaedb, color #ffffff
• Active: bg #346e4a, color #346e4a
• Focus: bg #1eaedb, outline 2px solid #000000

Variant 2 (cmp-button) — solid green

• Default: bg rgb(70,130,84), color #000000, padding 10px 32px
• Hover: bg #ffffff, color #1883fd
• Active: bg #2c6415, color #ffffff
• Focus: bg #1eaedb, scale(1.1)

Variant 3 (cmp-button) — transparent

• Default: bg transparent, color #000000, border 1px solid #000000
• Hover: bg #ffffff, color #1883fd
• Active: bg #2c6415, color #ffffff
• Focus: bg #1eaedb, scale(1.1)

Variant 4 — pill green

• Default: bg #2c6145, color #f2f2f2, padding 10px, radius 50px
• Hover: bg #1eaedb, color #ffffff
• Active: bg #346e4a
• Focus: bg #1eaedb, outline 2px solid #000000

6.2 Links

Three styles — white, black, and green default colors — all underlined by default, remove underline on hover, change to hover blue (#1883fd).

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-black: #000000;
  --color-dark-gray: #40484f;
  --color-white: #ffffff;
  --color-brand-green: #2c6145;
  --color-gray-dim: #696969;
  --color-gray-medium: #505050;
  --color-light-gray: #e6e6e6;
  --color-light-gray-2: #d8d8d8;
  --color-mid-gray: #767676;
  --color-neutral-gray: #808080;
  --color-bright-blue: #005fcc;
  --color-hover-blue: #1883fd;
  --color-cta-blue: #1eaedb;
  --color-dark-green-active: #346e4a;
  --color-darker-green: #2c6415;
  --color-success-border-green: #32ae88;

  /* Typography */
  --font-primary: "Brut Grotesque", "Work Sans", Arial;

  /* Spacing */
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-7_5: 7.5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15_5: 15.5px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-26: 26px;
  --space-30: 30px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-6_5: 6.5px;
  --radius-lg: 10px;
  --radius-xl: 17px;
  --radius-xxl: 20px;
  --radius-pill: 50px;
  --radius-circle: 100px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.08) 0px 16px 40px;
  --shadow-md: rgb(153,153,153) 0px 2px 10px -3px;
}

8. AI Coding Assistant Prompt

# Cookielaw (OneTrust) Design System Specification

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

## Brand Context
OneTrust’s Cookie Consent UI is corporate, compliance-focused, and designed for clarity. It uses restrained greens and neutrals, minimal shadows, and exact spacing to ensure consistency across embedded contexts.

## Color Palette
- Black: #000000 — Body text, icons, borders
- Dark Gray: #40484f — Secondary headings
- White: #ffffff — Backgrounds, button fills
- Brand Green: #2c6145 — Links, borders, accents
- Gray Dim: #696969 — Secondary labels
- Gray Medium: #505050 — Menus, nav links
- Light Gray: #e6e6e6 — Background separators
- Light Gray 2: #d8d8d8 — Panel headers
- Mid Gray: #767676 — Placeholder text
- Neutral Gray: #808080 — Misc UI
- Bright Blue: #005fcc — Hover/focus states
- Hover Blue: #1883fd — Link hover color
- CTA Blue: #1eaedb — Button hover/focus
- Dark Green Active: #346e4a — Active button background
- Darker Green: #2c6415 — Alternate active background
- Success Border Green: #32ae88 — Rare border usage

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

| Level | Size | Weight | Line Height | Use |
| H1 | 64px | 200 | 1.13 | Page titles |
| H2 | 44px | 400 | 1.27 | Section headings |
| H3 | 36px | 200 | 1.22 | Sub-headings |
| Button Large | 36px | 200 | 1.22 | Hero buttons |
| Body Large | 28px | 400 | 1.29 | Intro text |
| Body Medium | 20px | 400–500 | 1.20 | Body text |
| Caption | 14px | 400–700 | 1.40–1.43 | Small labels |
| Micro-text | 6.25px | 400 | 1.50 | Icon labels |

## Spacing & Grid
Base: 8px grid.
Scale: 3px, 4px, 5px, 6px, 7px, 7.5px, 8px, 10px, 12px, 15.5px, 16px, 18px, 20px, 24px, 26px, 30px, 40px, 48px, 64px, 80px.

## Border Radius
- none: 0px — data tables
- sm: 2px — buttons
- md: 3px — panels
- lg: 10px — cards
- xl: 17px — filter inputs
- xxl: 20px — spans
- pill: 50px — pill buttons
- circle: 100px — circular buttons
- full: 50% — round buttons

## Shadows & Depth
- Large: rgba(0,0,0,0.08) 0px 16px 40px — modals/cards
- Medium: rgb(153,153,153) 0px 2px 10px -3px — buttons

## Component Specifications

### Primary Button (cmp-jump-to-top)
Default: bg #ffffff; color #000000; padding 16px; border 1px solid #000000; font-size 12px; font-weight 400.
Hover: bg #1eaedb; color #ffffff.
Active: bg #346e4a; color #346e4a.
Focus: bg #1eaedb; outline 2px solid #000000; color #ffffff.

### Secondary Button (cmp-button solid green)
Default: bg rgb(70,130,84); color #000000; padding 10px 32px.
Hover: bg #ffffff; color #1883fd; border 1px solid #919191.
Active: bg #2c6415; color #ffffff.
Focus: bg #1eaedb; transform scale(1.1); color #ffffff.

### Link
Default: underline; color #2c6145 (or #000000/#ffffff depending on context).
Hover: remove underline; color #1883fd.

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

## Interaction Rules
Transition timing: 150ms ease for color/background changes.
Focus indicators: 2px solid outline in #000000 or brand color.

## DO
- Use only defined color palette.
- Keep spacing multiples of 8px (or listed fractions).
- Use Brut Grotesque for all headings and buttons.
- Reserve CTA blue (#1eaedb) for hover/focus states.
- Maintain consistent border radius per component type.

## DON'T
- Invent new greens or blues.
- Mix sharp and large-radius corners on same component.
- Use shadows where borders are specified.
- Override type scale.

## Code Examples

```css
.btn-primary {
  background: #ffffff;
  color: #000000;
  padding: 16px;
  border-radius: 0px;
  border: 1px solid #000000;
  font-family: var(--font-primary);
  font-size: 12px;
}
.btn-primary:hover { background: #1eaedb; color: #ffffff; }
.btn-primary:focus { outline: 2px solid #000000; background: #1eaedb; color: #ffffff; }

.card {
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow-lg);
}

.input {
  border: 1px solid #d8d8d8;
  border-radius: 2px;
  padding: 8px;
  font-family: var(--font-primary);
  font-size: 14px;
}
.input:focus { border-color: #2c6145; outline: none; }
```

9. Summary

TL;DR — Cookielaw’s design system is corporate clarity: greens for brand, blues for interaction, sharp corners with occasional pills, tight type hierarchy, and an 8px grid. Every choice is about trust and legibility.

Brand Keywords:

• corporate-compliance
• trust-first
• green-accented
• grid-disciplined
• interaction-blue