Casalemedia / Index Exchange — Design System Deep Dive

1. Brand Overview

Index Exchange (formerly Casalemedia) positions itself as an enterprise-level ad exchange platform. The design language on the site screams corporate confidence with a tech-forward tone. This isn’t a whimsical startup palette or a playful consumer brand — it’s about precision, clarity, and trust.

You can feel the audience: publishers, advertisers, and engineers who expect clean interfaces, no fluff. The design is stripped of unnecessary decoration — typography is functional but with a touch of modern refinement, colors are deep and serious with occasional bright accents to signal interactivity.

There's a clear preference for structured grids, consistent use of an 8px spacing scale, and typography that holds a professional demeanor. The hero sections are bold but never chaotic. Buttons are utilitarian — solid fills, clear borders, minimal radius — but still follow accessible state changes.

One thing that stands out: the brand leans heavily on deep greens (#00291f) and blues (#1262eb), with a single pop accent of turquoise (#4cd3cc). This combination is unusual in ad tech, where blues dominate, but here the green adds a sense of stability and environmental grounding.

The design philosophy feels like: "We’re here to make complex systems understandable and trustworthy." It’s about reducing friction for a technical audience while maintaining a high-end polish that communicates reliability.

2. Color System

2.1 Primary Colors

The primary "action" color is #1262eb — a saturated, bright blue. It’s used in CTAs, navbar branding, and interactive elements. This color choice is smart: blue is universally trusted, and this particular tone is vibrant enough to stand out against the dark backgrounds without feeling childish.

Secondary tones are #00291f (deep green) for headers/navigation and #4cd3cc (turquoise) for accents. The green grounds the brand, while the turquoise injects energy without overwhelming.

Compared to competitors in ad tech (often heavy blue-gray), Index Exchange’s palette feels more distinctive due to the green base. It positions them slightly apart from the "all-blue" crowd.

2.2 Complete Palette

2.3 Color Relationships

• Primary contrast: Bright Blue (#1262eb) on White (#ffffff) — strong contrast, passes WCAG easily.
• Dark mode elements: Deep Green (#00291f) with White text — high contrast and consistent brand feel.
• Accent caution: Turquoise (#4cd3cc) on White has decent contrast but should avoid small text usage.
• Hover cues: Deep Blue (#1652c7) is close to Bright Blue but slightly darker — good for hover state differentiation without breaking brand harmony.

2.4 Usage Guide

• Work well together: Bright Blue + White for CTAs; Deep Green + White for headers; Turquoise as small pops in icons/buttons.
• Avoid: Turquoise for large text blocks — contrast is borderline.
• Accessibility tip: Keep primary actions in Bright Blue or Deep Green with white text to ensure readability.
• Dark mode: The palette already supports dark backgrounds — Deep Green or Charcoal as base, White as text.

3. Typography

3.1 Font Families

Main font: Neue Montreal — a clean, modern sans-serif.
Fallbacks: -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial.

Secondary font: Sohne Mono — monospaced, used for buttons/labels in uppercase.
Icon font: Font Awesome 6 Brands and icomoon for UI icons.

No Google or Adobe font sources — likely self-hosted.

3.2 Type Scale

(Full list is extensive — includes multiple adjustments for headings, links, captions, and buttons with slight size/weight differences.)

3.3 Hierarchy

Neue Montreal at 90px for hero titles creates a bold opening statement. Secondary headings at 45px keep hierarchy clear. The monospaced Sohne Mono adds a tech feel in small UI components — very deliberate for a data-heavy brand.

Line heights are tight for large display sizes (1.00–1.20), which keeps headlines dense and impactful. Body text at 1.25–1.40 line height is comfortable for reading without feeling loose.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Every spacing value is a multiple or fraction of 8px.

4.2 Layout

Breakpoints:

• Mobile: 400px–600px
• Tablet: 768px
• Desktop: 896px+

Responsive approach is minimal — relies on scaling typography and stacking layouts. Container widths are not explicitly extracted, but spacing tokens suggest consistent section padding across breakpoints.

5. Visual Elements

Border Radius

Values range from 1px to 100px.

• Small: 1px, 2px — inputs, buttons.
• Medium: 20px — occasional pill-like spans.
• Full: 100px — large rounded buttons.

The majority are square corners — radius is rarely applied except for small UI elements.

Shadows

Sparse use — mostly subtle depth:

• rgba(150, 158, 166, 0.2) 0px 8px 24px — for cards/modals.
• rgba(0, 0, 0, 0.2) 0px 4px 8px — minor UI elevation.

This is not a shadow-heavy brand — most depth comes from borders.

Borders

Frequent 1px solid borders — usually #00291f deep green or neutral grays. Used to separate sections and frame buttons.

6. Components

6.1 Buttons

Multiple variants:

Homepage Hero Button

• Default: bg #e9e9e9, text #00291f, padding 16px 20px, border 1px solid #73716e, radius 0px.
• Hover: bg #ffffff, text #2285f7, transform translate(0.5em, -50%).
• Active: bg #2c6415, text #ffffff.
• Focus: bg #1eaedb, text #fff, border #000, box-shadow 0 0 0 5px #1199ff.

Outline Button

• Default: bg transparent, text #00291f, border 1px solid #b7b7b7.
• Same hover/active/focus behaviors as hero button.

Accent Button

• Default: bg #4cd3cc, text #00291f, padding 20px, no border.
• Hover: bg #ffffff, text #2285f7.

Small Dark Button

• Default: bg #00291f, text #e6e6e6, padding 12px 10px, border 1px solid #00291f.
• Hover: bg #1eaedb, text #fff.

6.2 Links

Variants by context:

• Primary link: #1262eb default, underline; hover: #3860be, no underline.
• Dark link: #00291f default, hover: #3860be.
• White link: #ffffff default, hover: #3860be.

Underline only on default state for primary links — hover removes underline.

6.3 Forms

No input styles extracted — likely default browser styles with minor border adjustments.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-dark-charcoal: #212529;
  --color-white: #ffffff;
  --color-deep-green: #00291f;
  --color-bright-blue: #1262eb;
  --color-turquoise: #4cd3cc;
  --color-black: #000000;
  --color-dark-gray: #555555;
  --color-medium-gray: #666666;
  --color-light-gray: #e9e9e9;
  --color-deep-blue: #1652c7;

  /* Typography */
  --font-neue-montreal: "Neue Montreal", -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial;
  --font-sohne-mono: "Sohne Mono", -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial;
  --font-icon-fa: "Font Awesome 6 Brands";
  --font-icon-icomoon: "icomoon";

  /* Spacing */
  --space-8: 8px;
  --space-16: 16px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-48: 48px;
  --space-60: 60px;
  --space-90: 90px;

  /* Border Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-20: 20px;
  --radius-100: 100px;

  /* Shadows */
  --shadow-card: rgba(150, 158, 166, 0.2) 0px 8px 24px 0px;
  --shadow-small: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
}

8. AI Coding Assistant Prompt

# Index Exchange Design System Specification

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

## Brand Context
Index Exchange’s design language is corporate, precise, and trustworthy. It uses a deep green/blue foundation, restrained accents, and tight typography to communicate reliability in a complex tech space.

## Color Palette
- Dark Charcoal: #212529 — neutral text, dark UI backgrounds
- White: #ffffff — base background, text on dark backgrounds
- Deep Green: #00291f — navigation, header text, accents
- Bright Blue: #1262eb — primary brand/action color
- Turquoise: #4cd3cc — accent icons/buttons
- Black: #000000 — UI icons, dots, outlines
- Dark Gray: #555555 — secondary neutral
- Medium Gray: #666666 — utility icons
- Light Gray: #e9e9e9 — secondary backgrounds, button fills
- Deep Blue: #1652c7 — hover/focus state color

## Typography
- Headings & body: "Neue Montreal", -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial
- Monospace labels: "Sohne Mono", -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial
- Icons: "Font Awesome 6 Brands", "icomoon"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 90px | 500 | 1.00 | Hero titles |
| H2 | 45px | 500 | 1.20 | Section headings |
| Body | 24px | 400 | 1.25 | Paragraphs |
| Caption | 14px | 400 | 1.60 | Labels, meta |
| Button | 14px | 700 | 1.00 | CTA text |

## Spacing & Grid
Base: 8px grid.
Scale: 8px, 16px, 20px, 25px, 30px, 48px, 60px, 90px.
Use for padding/margins in multiples.

## Border Radius
- none: 0px — most containers
- sm: 2px — inputs, small buttons
- md: 20px — pills
- full: 100px — large rounded buttons

## Shadows & Depth
- Card: rgba(150, 158, 166, 0.2) 0px 8px 24px
- Small UI: rgba(0, 0, 0, 0.2) 0px 4px 8px

## Component Specifications

### Primary Button
Default: bg #e9e9e9, color #00291f, padding 16px 20px, border 1px solid #73716e, radius 0px.  
Hover: bg #ffffff, color #2285f7.  
Active: bg #2c6415, color #ffffff.  
Focus: bg #1eaedb, color #ffffff, border #000, box-shadow 0 0 0 5px #1199ff.

### Secondary Button
Default: bg transparent, color #00291f, border 1px solid #b7b7b7.  
Same state changes as primary.

### Accent Button
Default: bg #4cd3cc, color #00291f, padding 20px.  
Hover: bg #ffffff, color #2285f7.

### Navigation Links
Primary: #1262eb underline; hover #3860be no underline.  
Secondary: #00291f default; hover #3860be.

## Layout & Responsive Rules
Breakpoints: 400px, 425px, 426px, 500px, 530px, 550px, 600px, 768px, 896px.  
Maintain section padding in 8px multiples.

## Interaction Rules
- Transition: 150ms ease for state changes
- Focus: visible outline + box-shadow from palette
- Hover: color change + optional underline removal

## DO List
- Use ONLY colors from palette
- Maintain 8px grid
- Use Neue Montreal for all text except monospace labels
- Keep border radius consistent per component type
- Use hover/focus colors exactly as specified

## DON'T List
- Don't invent new colors
- Don't mix rounded and square corners within a component
- Don't apply shadows unless specified
- Don't remove focus indicators

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #e9e9e9;
  color: #00291f;
  padding: 16px 20px;
  border-radius: 0;
  font-weight: 400;
  font-size: 14px;
  border: 1px solid #73716e;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #ffffff;
  color: #2285f7;
}
.btn-primary:focus {
  outline: 1px solid #000;
  box-shadow: 0 0 0 5px #1199ff;
}
```

### Accent Button
```css
.btn-accent {
  background: #4cd3cc;
  color: #00291f;
  padding: 20px;
  border: none;
}
.btn-accent:hover {
  background: #ffffff;
  color: #2285f7;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 2px;
  padding: 25px;
  box-shadow: rgba(150, 158, 166, 0.2) 0px 8px 24px;
}
```

9. Summary

TL;DR — Index Exchange’s design system is a study in tech precision: deep greens and blues, restrained accent use, tight typographic hierarchy, and an 8px grid underpinning everything. Buttons are flat but responsive, shadows are rare, and border discipline is strong.

Brand Keywords:

• deep-tech
• trust-driven
• grid-consistent
• accent-restrained
• typography-tight