3lift (TripleLift) Brand Design System Deep-Dive

1. Brand Overview

TripleLift (often stylized as 3lift) is an ad tech company that positions itself at the intersection of programmatic advertising, native formats, and creative integration. The site’s design language is clean, pragmatic, and unapologetically digital-first. You can feel the “platform” vibe: typography is modern and utilitarian, color is restrained, and UI elements are built for clarity over decoration.

The vibe is confident minimalism with a few well-placed bursts of color — mostly in interactive states. The primary palette leans heavily on pure black (#000000) for both text and primary surfaces, contrasted with high white (#FFFFFF) backgrounds. This is supported by a sharp digital blue (#007aff) and occasional deep slate (#253c4e). The accent bursts — notably in shadows — lean into vibrancy (rgb(241, 92, 44) and rgb(237, 121, 176)), but these are used sparingly, almost like a brand signature in hover states.

Typography is locked to Avenir LT Std — a geometric sans with corporate polish. No Google Fonts, no variable fonts — this is a deliberate, controlled choice, likely to ensure brand consistency across all touchpoints.

Spacing is built on an 8px scale, which is a safe, developer-friendly grid that keeps everything aligned. Border radii are small (mostly 6px), keeping components sharp but slightly softened — no fully pill-shaped buttons unless they’re circular social icons (50px radius). Shadows are almost absent except for colored, offset shadows used as a stylistic hover effect — a very deliberate break from functional shadows.

Overall, the design philosophy reads as: “We are a professional, modern tech company. We keep our UI lean and structured, but we’re not afraid to add a playful accent when you interact.” This isn’t a brand that wants skeuomorphic depth or ornamental flourishes — it’s a design system for a business tool, dressed in minimal black and white with smart pops of color.

2. Color System

2.1 Primary Colors

Primary is pure black (#000000). This is unusual in modern SaaS design (where primary might be a brand hue like blue or green), but it works here because TripleLift uses black as a universal anchor — text, borders, primary buttons. It conveys authority, stability, and clarity. Against white backgrounds, it’s high contrast and easy to read. Against accent colors, black reads as a bold outline or text color.

The secondary “action” hue is #007aff — a saturated, digital blue that feels very iOS. It’s only used in specific elements (swiper navigation buttons), making it more of a functional accent than a brand-defining color.

2.2 Complete Palette

2.3 Color Relationships

Black on white is WCAG AAA compliant for text, so accessibility is solid. Blue #007aff on white passes for normal text sizes (contrast ratio above 4.5:1). The deep slate (#253c4e) is less contrasted against white (ratio ~7:1) — still accessible for body text.

There’s no dark mode indicated in the extracted data. The palette leans toward a light UI with black text and white backgrounds.

2.4 Usage Guide

• Black + White → Default UI, high contrast, clean.
• Black + Pink Shadow (rgb(237, 121, 176)) → Hover states on buttons, playful depth.
• White text on Black background → Primary CTAs.
• Blue (#007aff) → Specific functional controls (don’t overuse; it’s not a brand primary).
• Avoid mixing deep slate with black in the same hierarchy — slate is secondary, black is primary.

3. Typography

3.1 Font Families

• Primary: Avenir LT Std — no fallbacks specified in data (likely system sans as backup).
• No Google Fonts, no Adobe Fonts license embedded — custom hosting.

This is a corporate sans-serif: precise, geometric, with consistent stroke width. It reads cleanly at large and small sizes.

3.2 Type Scale

3.3 Hierarchy

The scale jumps dramatically from body (18px) to hero H1 (128px) — a strong visual hierarchy for landing pages. Multiple H1 alt sizes (60px, 44px) suggest responsive scaling or secondary headline styles. 16px is the workhorse for links, buttons, and small headings. 14px is reserved for fine print (captions, small links).

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. All spacing values are multiples or near-multiples.

4.2 Layout

Breakpoints in px: 320, 400, 480, 600, 640, 781, 782, 800, 900, 1000, 1024, 1080, 1280. This is a granular set, suggesting responsive adjustments at many sizes. Likely container widths max out around 1280px.

5. Visual Elements

Border Radius

Common: 6px — buttons, inputs, links.
Others: 12px (images), 14px (various shapes), 24px (groups), 50px (social icons), 50% (perfect circles).

Shadows

Two shadows, both accent-based, not depth-based:

• rgb(241, 92, 44) 0px 0px 0px 0px — flat color halo
• rgb(237, 121, 176) -10px 10px 0px 0px — offset pink shadow

Borders

Mostly thin (1px solid #eeeeee) or 2px solid black. Used minimally — dividers, button outlines.

6. Components

6.1 Buttons

Variant 1 – Outline Black (CTA demo)
Default: Transparent, black text, 2px solid black, 6px radius, padding 0 24px, font-size 16px, weight 500.
Hover: White text, pink shadow -12px 12px, no border, scaleX(1.05).
Active: Currentcolor text, opacity 0.85, no border.
Focus: Gray text, bg #dddddd, 1px solid #f47b20 outline.

Variant 2 – Solid Black (CTA black hover)
Default: Black bg, white text, no border, 6px radius, padding 16px 24px, font-size 14px, weight 500.
Hover: Same as outline — pink offset shadow, scaleX(1.05).
Active: Opacity 0.85, no border.
Focus: Gray text, bg #dddddd, 1px solid #f47b20 outline.

6.2 Links

Two styles — black text and white text. Both remove underline in default, add underline on hover.

6.3 Forms

Email input: #eeeeee bg, slate text, no border, 6px 0 0 6px radius, padding 10px 16px. Focus outline in orange #f47b20.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-blue: #007aff;
  --color-white: #ffffff;
  --color-slate: #253c4e;
  --color-orange-shadow: rgb(241, 92, 44);
  --color-pink-shadow: rgb(237, 121, 176);
  --color-light-gray: #eeeeee;
  --color-focus-orange: #f47b20;
  --color-text-slate: rgb(55, 70, 79);

  /* Typography */
  --font-primary: "Avenir LT Std", sans-serif;
  --font-size-h1-xl: 128px;
  --font-size-h1-lg: 60px;
  --font-size-h1-md: 44px;
  --font-size-body: 18px;
  --font-size-link: 16px;
  --font-size-caption: 14px;
  --line-height-tight: 1.10;
  --line-height-normal: 1.40;

  /* Spacing */
  --space-8: 8px;
  --space-10: 10px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-110: 110px;
  --space-168: 168px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-round: 50px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-orange: rgb(241, 92, 44) 0px 0px 0px 0px;
  --shadow-pink-offset: rgb(237, 121, 176) -10px 10px 0px 0px;
}

8. AI Coding Assistant Prompt

# TripleLift Design System Specification

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

## Brand Context
TripleLift’s design language is minimal, grid-based, and tech-professional. Black and white dominate, with rare accent colors in interaction states. Typography is precise and geometric. Components are structured, with small corner radii and playful colored shadows on hover.

## Color Palette
- Primary Black: #000000 — Text, borders, primary buttons
- Digital Blue: #007aff — Swiper controls
- Pure White: #ffffff — Backgrounds, text on dark
- Deep Slate: #253c4e — Secondary text
- Light Gray: #eeeeee — Input backgrounds
- Orange Shadow: rgb(241, 92, 44) — Decorative hover shadows
- Pink Shadow: rgb(237, 121, 176) — Decorative offset shadows
- Focus Orange: #f47b20 — Focus outlines

## Typography
- Font Family: "Avenir LT Std", sans-serif
- Sizes:
  - H1 XL: 128px, weight 500, line-height 1.10
  - H1 LG: 60px, weight 500, line-height 1.20
  - H1 MD: 44px, weight 500, line-height 1.30
  - Body: 18px, weight 400, line-height 1.40
  - Link: 16px, weight 500, line-height 1.40 or 4.50
  - Caption: 14px, weight 400, line-height 1.20

## Spacing & Grid
Base: 8px
Scale: 8, 10, 16, 24, 32, 40, 48, 64, 96, 110, 168
- Button padding: 16px vertical, 24px horizontal
- Card padding: 24px
- Section gaps: 48px–96px

## Border Radius
- sm: 6px — buttons, inputs
- md: 12px — images
- lg: 14px — links, divs
- xl: 24px — grouped elements
- round: 50px — social icons
- circle: 50% — avatars

## Shadows & Depth
- Orange flat: rgb(241, 92, 44) 0px 0px 0px 0px
- Pink offset: rgb(237, 121, 176) -10px 10px 0px 0px
Use shadows for hover accents only, not depth.

## Component Specifications

### Primary Button (Outline Black)
Default: transparent bg, #000000 text, 2px solid #000000 border, 6px radius, padding 0 24px, font-size 16px, weight 500.
Hover: white text, pink offset shadow (-12px 12px), no border, transform scaleX(1.05).
Active: opacity 0.85, no border.
Focus: gray text, bg #dddddd, outline 1px solid #f47b20.

### Secondary Button (Solid Black)
Default: bg #000000, white text, no border, 6px radius, padding 16px 24px, font-size 14px, weight 500.
Hover: same pink offset shadow, scaleX(1.05).
Active: opacity 0.85.
Focus: gray text, bg #dddddd, outline 1px solid #f47b20.

### Navigation Links
Black or white text, no underline default, underline on hover.

### Input Fields
Email input: bg #eeeeee, text #37464f, no border, radius 6px left corners, padding 10px 16px.
Focus outline: 1px solid #f47b20.

## Layout & Responsive Rules
- Max width: 1280px
- Mobile padding: 16px
- Desktop padding: 24px
- Breakpoints: 320, 400, 480, 600, 640, 781, 782, 800, 900, 1000, 1024, 1080, 1280

## Interaction Rules
- Transition: 150ms ease for hover/focus/active
- Focus: visible outline using #f47b20
- Hover: apply pink offset shadow, slight scaleX transform

## DO
- Use only colors from palette
- Maintain 8px spacing grid
- Keep border radius consistent per component type
- Use hover shadows for interactive elements only
- Keep typography strictly Avenir LT Std

## DON'T
- Add unapproved colors
- Use drop shadows for depth
- Mix large and small radii inconsistently
- Overuse blue — reserved for specific controls

## Code Examples

### Primary Button
```css
.btn-primary {
  background: transparent;
  color: #000;
  padding: 0 24px;
  border-radius: 6px;
  border: 2px solid #000;
  font-weight: 500;
  font-size: 16px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  color: #fff;
  box-shadow: rgb(237, 121, 176) -12px 12px 0px 0px;
  transform: scaleX(1.05);
  border: none;
}
.btn-primary:focus {
  outline: 1px solid #f47b20;
  background: #dddddd;
}
```

### Secondary Button
```css
.btn-secondary {
  background: #000;
  color: #fff;
  padding: 16px 24px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  transition: all 150ms ease;
}
.btn-secondary:hover {
  box-shadow: rgb(237, 121, 176) -12px 12px 0px 0px;
  transform: scaleX(1.05);
}
```

### Input Field
```css
.input-email {
  background: #eeeeee;
  color: #37464f;
  border: none;
  border-radius: 6px 0 0 6px;
  padding: 10px 16px;
}
.input-email:focus {
  outline: 1px solid #f47b20;
}
```

9. Summary

TL;DR — TripleLift’s design system is minimal black-and-white with rare, vibrant accent colors in hover states. Typography is tightly controlled with Avenir LT Std. Components follow an 8px grid, small corner radii, and avoid depth shadows — except for playful colored offsets.

Brand Keywords:

• tech-minimalist
• grid-consistent
• accent-playful
• corporate-clean