Index Exchange (Indexww) Design System Deep Dive

1. Brand Overview

Index Exchange (Indexww) is a global advertising marketplace. The company’s brand presence is rooted in trust, transparency, and precision. Their website reflects this — it’s clean, restrained, and business-first. There’s no loud color flooding the viewport, no gratuitous motion. Instead, the emphasis is on typography and spacing. This is a brand that wants you to focus on the message, not the decoration.

The first impression: corporate, but not sterile. They’ve chosen Times for headings, which is a surprising move in a tech-driven industry dominated by sans-serifs. It adds a touch of heritage and authority, positioning Index Exchange as a player with stability and gravitas. This choice says: “We’ve been around, we know our stuff, and we’re not chasing every design trend.”

The absence of a defined color palette in the extracted data is telling — either they rely heavily on imagery and typography for brand character, or their primary color values are embedded in images and CSS files not captured here. It’s a text-first visual system. The site feels like it’s built for decision-makers: advertisers, publishers, partners. The audience isn’t here to be entertained; they’re here to understand capabilities, see proof points, and move forward with business.

From a design philosophy standpoint, Index Exchange is leaning on minimalism, but with a twist: the serif headings break the monotony of the typical B2B tech aesthetic. Combined with a tight 8px spacing grid, it gives the site a disciplined rhythm. This is the kind of system that’s easy to maintain and scale, but not bland — it’s minimalism with a deliberate nod to tradition.

2. Color System

Here’s the catch: no explicit color palette was extracted. That means no defined hex values for primary, secondary, or neutral tones. We can’t reverse-engineer what’s not here — so instead, we note the implications:

2.1 Primary Colors

Data unavailable.
From the lack of extracted values, we can infer that primary colors might be embedded in background images, SVGs, or inline styles not picked up in the dataset. This is a potential risk for a design system — without codified tokens, developers can’t enforce brand color consistency programmatically.

2.2 Complete Palette

2.3 Color Relationships

Without color values, no contrast ratio analysis can be done. This is a blind spot in the extracted system — accessibility compliance can’t be verified here.

2.4 Usage Guide

No combinations to recommend or avoid without palette data. The takeaway: Index Exchange’s design system needs explicit documentation of colors. Every brand should have a clear, accessible palette — especially B2B companies where readability is paramount.

3. Typography

Typography is where Index Exchange’s system speaks the loudest. It’s almost entirely serif for headings — a bold move in digital advertising design.

3.1 Font Families

They’re using Times — yes, the classic Times — for headings.
No fallbacks listed beyond the default serif stack.
No custom fonts via Google Fonts or Adobe Fonts; everything is system-native.
That means fast loads, no font licensing headaches, and instant rendering.

3.2 Type Scale

Yes, they have two “heading-1” contexts — one bold at 32px and one regular at 16px. That’s unconventional naming. Usually, H1 is the largest display size. Here, “heading-1” might be a reusable component name rather than an HTML heading level.

3.3 Hierarchy

The hierarchy is minimal — just two defined contexts. The jump from 16px regular to 32px bold is clean and high-contrast. This works for emphasis, but without intermediate heading sizes (H2, H3, etc.), the system risks feeling flat in complex pages. Developers will need to extrapolate intermediate type sizes if they want richer hierarchy.

4. Spacing & Layout

Index Exchange uses an 8px base grid. This is industry-standard — easy to scale up or down, human-friendly, works well with both mobile and desktop.

4.1 Spacing Scale

Extracted common values:

Notice the oddball: 21.44px. That’s not a clean multiple of 8. This is likely from a typographic rhythm calculation (e.g., based on font metrics) rather than grid spacing. It might be line-height or a specific padding tied to text blocks.

4.2 Layout

No breakpoints extracted. That means either:

• They rely on fluid layouts without fixed breakpoints, OR
• Breakpoints are defined in another layer of the CSS not captured here.

5. Visual Elements

Border Radius System

No border radius values extracted — this suggests flat corners everywhere. That’s consistent with a corporate tone: sharp corners convey precision and seriousness.

Shadows

No shadow values found — again, flat design. Depth is likely conveyed through spacing and typography, not drop shadows.

Borders

No combinations extracted — possible minimal or absent borders, relying on whitespace for separation.

6. Components

The extracted data shows no explicit button, input, or link styles. That’s rare — most design systems define these. The absence means either:

• Styles are applied inline or via scoped CSS in components, OR
• The site uses browser defaults with minimal overrides.

From a design system perspective, this is risky: without tokenized component styles, visual consistency depends on developer discipline.

7. Design Tokens

From the extracted data, here’s the CSS custom properties file:

:root {
  /* Typography */
  --font-heading-1-family: "Times";
  --font-heading-1-size-lg: 2.00rem; /* 32px */
  --font-heading-1-weight-lg: 700;
  --font-heading-1-size-sm: 1.00rem; /* 16px */
  --font-heading-1-weight-sm: 400;

  /* Spacing */
  --space-8: 0.50rem; /* 8px */
  --space-16: 1.00rem; /* 16px */
  --space-21-44: 1.34rem; /* 21.44px */

  /* Colors */
  /* No color tokens extracted */

  /* Border Radius */
  /* No radius tokens extracted */

  /* Shadows */
  /* No shadow tokens extracted */
}

8. AI Coding Assistant Prompt

# Index Exchange (Indexww) Design System Specification

This design system is inspired by Index Exchange's official website. All values, typography, and spacing are extracted from their production site. Use this specification to build UIs that match Index's visual language exactly.

## System Prompt
You are an Index Exchange design expert. Build UIs matching their visual language exactly.

## Brand Context
Index Exchange values clarity, discipline, and trust. Their design system is typographically driven, with restrained visual elements and a strict spacing rhythm. Serif headings convey authority and tradition in a digital advertising space dominated by sans-serif minimalism.

## Color Palette
No explicit palette extracted. Use only documented colors from the official site’s CSS. Avoid introducing unverified hex values.

## Typography
Font families:
- Headings: "Times", serif

Type sizes:
| Level | Font  | Size    | Weight | Line Height | Use For |
|-------|-------|---------|--------|-------------|---------|
| H1-lg | Times | 32px    | 700    | —           | Page titles, hero headings |
| H1-sm | Times | 16px    | 400    | —           | Small headings, section labels |

No Google Fonts or Adobe Fonts. All fonts are system-native.

## Spacing & Grid
Base: 8px grid
Scale:
- 8px (0.50rem) — tight gaps, icon spacing
- 16px (1.00rem) — button padding, small section gaps
- 21.44px (1.34rem) — text block padding, line-height-derived spacing

## Border Radius
None extracted — use sharp corners throughout.

## Shadows & Depth
Flat design — avoid shadows. Use spacing and typography for separation.

## Component Specifications

### Primary Button
```css
.btn-primary {
  font-family: "Times", serif;
  font-size: 1rem;
  font-weight: 400;
  padding: 0.5rem 1rem; /* 8px top/bottom, 16px left/right */
  border: none;
  border-radius: 0;
  background: var(--color-primary); /* must be defined from official CSS */
  color: var(--color-on-primary);
  transition: background 150ms ease;
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

Secondary Button

Same as primary but with background as transparent and border color from palette.

Input Field

.input {
  font-family: "Times", serif;
  font-size: 1rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-input-bg);
}
.input:focus { border-color: var(--color-focus); outline: none; }

Card

.card {
  background: var(--color-surface);
  border-radius: 0;
  padding: 1rem; /* 16px */
  border: 1px solid var(--color-border);
}

Layout & Responsive Rules

• Maintain 8px grid spacing
• Max content width defined in CSS — use official site values
• Mobile vs desktop padding to follow extracted patterns

Interaction Rules

• Transition timing: 150ms ease for state changes
• Use visible focus indicators for accessibility

DO

• Use only extracted typography and spacing values
• Keep corners sharp
• Maintain 8px grid multiples
• Preserve serif headings across breakpoints
• Use official color values — no improvisation

DON'T

• Add rounded corners
• Introduce shadows
• Use unverified colors
• Replace Times with another font

Code Examples

Primary Button

.btn-primary {
  font-family: "Times", serif;
  font-size: 1rem;
  font-weight: 400;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0;
  background: #0071e3; /* example, must verify */
  color: #fff;
}

Card

.card {
  background: #fff;
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 0;
}

Input

.input {
  border: 1px solid #ccc;
  padding: 0.5rem;
  border-radius: 0;
}

---

## 9. Summary

**TL;DR:** Index Exchange’s design system is minimal, grid-disciplined, and typography-led. No color tokens or component styles were extracted, but the use of Times for headings and an 8px grid define its voice: corporate precision with a nod to tradition.

**Brand Keywords:**  
- serif-authority  
- grid-disciplined  
- flat-minimal  
- corporate-clarity