Adform Brand Design System Deep Dive

1. Brand Overview

Adform’s site feels like it belongs to a B2B tech brand that wants to project serious capability with minimal visual noise. This isn’t a playful consumer-facing interface — it’s aimed at marketers, media buyers, and enterprise-level advertising professionals. The vibe is restrained, almost editorial in tone. The typography choice alone — Times for H1 — tells you they’re leaning into heritage and credibility rather than trendy sans-serifs.

What’s interesting is how little ornamentation there is in the extracted data. No shadows. No rounded corners. No flashy gradients. This is a flat, content-first design language. They’re confident enough to let the text and layout carry the story.

Spacing is disciplined — an 8px base grid shows up in multiple places. This is a safe choice for digital products, but the presence of odd values like 21.44px hints at some typographic rhythm alignment (possibly tied to line height or scaling from rem values). That’s a sign of a design team thinking in both pixel grids and typographic scales.

Colors? The extracted data shows no defined palette, which means either the site is using imagery and typography as the primary brand cues, or the palette is embedded in assets and not exposed in CSS variables. The only explicit color value in the scrape is a border color: rgb(128, 128, 128) — a mid-gray divider tone — which reinforces the minimal visual hierarchy.

If you’re building on Adform’s visual language, you’re working with a stripped-down toolkit: typography, spacing, and flat lines. This makes their system lightweight to implement, but also unforgiving — every misaligned pixel will show.

2. Color System

2.1 Primary Colors

Here’s the twist: no primary color token was extracted. This likely means Adform is not relying on a single saturated brand color in CSS — perhaps colors exist in SVGs, imagery, or inline styles. The one visible color token is a neutral gray for borders.

That’s a deliberate design move. A lot of enterprise brands do this to keep the UI neutral and let product screenshots or campaign imagery bring the vibrancy. It also makes the interface easier to white-label or adapt for different markets.

2.2 Complete Palette

From the extracted data, the entire palette is one value:

2.3 Color Relationships

With only one neutral tone visible in the CSS, there’s no color relationship to analyze in terms of contrast ratios between brand colors. The gray chosen (#808080) has a contrast ratio of roughly 3.95:1 against white — enough for non-interactive dividers, but below WCAG AA for text. That’s fine because it’s used for borders, not text.

2.4 Usage Guide

• Use #808080 for dividers, subtle UI boundaries, and separating sections without drawing attention.
• Pair with white or light backgrounds to maintain clarity.
• Avoid using this gray for text — contrast is insufficient for accessibility.
• If introducing a brand color, ensure it doesn’t overpower this subtle neutral.

3. Typography

3.1 Font Families

The only extracted font is:

• Times
• Fallbacks: None listed (likely defaults to system serif if Times is unavailable)
• Source: No Google Fonts, no Adobe Fonts — possibly system-installed font.

This is unusual for a modern web brand. Times is a classic serif, often associated with print, academia, and editorial authority. Using it for H1 suggests they want their headlines to feel formal and trustworthy.

3.2 Type Scale

Only one defined style in the scrape:

3.3 Hierarchy

With this single style, hierarchy is probably built through additional, unstated heading levels or body text defaults. A 32px bold serif H1 is large enough for desktop page titles but will need scaling for mobile. The serif gives strong typographic contrast if paired with a sans-serif body font — though that pairing isn’t exposed in the data.

Readability is high for titles, but for UI labels and small text, Times can feel cramped on screens. This reinforces the idea that Adform’s UI probably uses a different typeface for body and UI elements.

4. Spacing & Layout

4.1 Spacing Scale

Adform uses an 8px base grid — the most common in digital design — but also has a secondary, non-standard value of 21.44px.

Extracted spacing values:

The odd 21.44px spacing is intriguing — it’s not a clean multiple of 4 or 8, so it’s probably derived from a typographic scale rather than a pure grid. This may be vertical padding around text blocks.

4.2 Layout

No breakpoints were extracted, suggesting they’re either handled in inline styles or not defined in CSS variables. Without explicit container widths, the safest assumption when implementing is to align all spacing to the 8px grid and preserve proportional vertical rhythm.

5. Visual Elements

• Border Radius: None defined. This means square corners everywhere — very flat, utilitarian look.
• Shadows: None. They’re going for a flat design aesthetic — depth is conveyed with spacing and borders, not elevation.
• Borders: One combination:
  • Width: 1px
  • Style: inset
  • Color: rgb(128, 128, 128)
  • Used on: hr elements

This makes borders almost purely functional — light dividers, no decorative outlines.

6. Components

This is where it gets sparse. No buttons, inputs, or link styles were extracted from the CSS scrape. That means their component styling is either inline, in scoped CSS, or loaded dynamically.

6.1 Buttons

No button tokens available. If we follow the flat, square-corner, no-shadow rule, primary buttons would likely be solid fills with 8px grid padding, no rounding, and hover states defined by slight color shifts.

6.2 Links

No link styles extracted. Given the minimalism, expect underlines or subtle color shifts.

6.3 Forms

No extracted input styles. Probably minimal — 1px borders, square corners, padding in multiples of 8px.

6.4 Cards

No card-specific tokens. Cards would be flat rectangles with border or background contrast, adhering strictly to 8px grid padding.

7. Design Tokens

Here’s every extracted value as CSS custom properties, grouped semantically:

:root {
  /* Colors */
  --color-neutral-gray: #808080;

  /* Typography */
  --font-heading-1-family: "Times", serif;
  --font-heading-1-size: 32px;
  --font-heading-1-size-rem: 2.00rem;
  --font-heading-1-weight: 700;

  /* Spacing */
  --spacing-base-8px: 8px;
  --spacing-base-8px-rem: 0.50rem;
  --spacing-mid-21_44px: 21.44px;
  --spacing-mid-21_44px-rem: 1.34rem;

  /* Borders */
  --border-width-hr: 1px;
  --border-style-hr: inset;
  --border-color-hr: var(--color-neutral-gray);
}

8. AI Coding Assistant Prompt

# Adform Design System Specification

You are an Adform design expert. Build UIs matching their visual language exactly.

## Brand Context
Adform’s design language is minimal, flat, and typography-led. It avoids decorative colors, shadows, and rounded corners. The interface relies on disciplined spacing, neutral dividers, and strong typographic hierarchy for clarity.

## Color Palette
- Neutral Gray: #808080 — Dividers, horizontal rules, subtle UI boundaries

## Typography
- Headings: "Times", serif — Formal serif for page titles
- No Google or Adobe Fonts; rely on system fonts

| Level | Size        | Weight | Line Height | Use For |
|-------|-------------|--------|-------------|---------|
| H1    | 32px (2rem) | 700    | —           | Page titles |

## Spacing & Grid
Base: 8px grid
Scale:
- 8px — Core unit for margins, padding
- 21.44px — Vertical rhythm spacing around text blocks

## Border Radius
- none: 0px — All components are square-cornered

## Shadows & Depth
Flat design — no shadows. Use borders and spacing for separation.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: var(--color-neutral-gray);
  color: #fff;
  padding: 8px 16px;
  border-radius: 0;
  font-weight: 700;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #6e6e6e; }
.btn-primary:focus { outline: 2px solid var(--color-neutral-gray); outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Navigation Links
```css
.nav-link {
  color: var(--color-neutral-gray);
  text-decoration: underline;
}
.nav-link:hover { color: #000; }
```

### Input Fields
```css
.input {
  border: 1px solid var(--color-neutral-gray);
  border-radius: 0;
  padding: 8px;
  font-size: 16px;
}
.input:focus { border-color: #000; outline: none; }
```

### Cards
```css
.card {
  background: #fff;
  border: 1px solid var(--color-neutral-gray);
  border-radius: 0;
  padding: 21.44px;
}
```

## Layout & Responsive Rules
- Maintain 8px spacing grid
- Use proportional vertical spacing (21.44px) for text-heavy sections
- No defined breakpoints — apply responsive scaling based on content

## Interaction Rules
- Transition timing: 150ms ease for hover/focus states
- Focus indicators: 2px solid neutral gray with offset

## DO List
- Use ONLY #808080 for dividers and neutral elements
- Maintain 8px grid for all spacing
- Keep corners square
- Keep design flat — no shadows
- Use Times for headings

## DON'T List
- Don’t introduce rounded corners
- Don’t add shadows
- Don’t use colors outside the palette
- Don’t change heading font

## Code Examples

### Primary Button Example
```css
.btn-primary {
  background: #808080;
  color: #fff;
  padding: 8px 16px;
  border-radius: 0;
  border: none;
}
```

### Card Example
```css
.card {
  border: 1px inset #808080;
  padding: 21.44px;
}
```

### Input Example
```css
.input {
  border: 1px solid #808080;
  padding: 8px;
}
```

9. Summary

TL;DR — Adform’s design system is stripped down: one neutral color, one serif heading style, strict 8px grid, zero rounded corners, no shadows. It’s utilitarian and confident, letting typography and spacing carry the brand.

Brand Keywords:

• serif-authoritative
• flat-minimalist
• grid-disciplined
• neutral-industrial