Smartadserver / Equativ — Design System Deep Dive

1. Brand Overview

Equativ (formerly Smartadserver) positions itself firmly in the adtech space — programmatic advertising, supply-side and demand-side operations, and monetization tools. The design system reflects that focus: it's modern, corporate, and engineered for clarity under complexity.

The vibe: pragmatic sophistication. This isn’t a playful consumer brand with pastel gradients and quirky icons. It’s built for enterprise buyers, agencies, and tech teams who need to trust the platform’s stability. The visual language communicates confidence through restrained color use, heavy typographic clarity, and consistent spacing.

You’ll notice an intentional restraint in ornamentation: shadows are minimal, borders are clean, and radii are small. The primary orange (#fe5000) is the only real “pop” in the palette — it’s used sparingly for CTAs, links, and highlights. Everything else leans on deep greys (#0f1115, #333333), white space (#ffffff), and functional neutrals.

Typography is all about Soehne — a clean, neo-grotesque family from Adobe Fonts — with weights dialed in to differentiate headings, links, and buttons without resorting to color changes. In practice, this means the system’s hierarchy is carried by font size and weight more than by decorative elements.

Spacing is disciplined — an 8px scale, occasionally broken by 5px and 6px values for fine-tuning. This kind of micro-adjustment tells me they care about visual rhythm but aren’t dogmatic about only using the base grid.

The brand’s audience is likely split between C-level decision-makers and hands-on ad operations teams. The design system serves both: clear enough for quick scanning of data-heavy pages, but polished enough to impress in a sales demo.

This is a design language that says: “We’re serious. We’re precise. We’re not here to surprise you — we’re here to deliver results.” And that’s exactly what an adtech platform should be doing.

2. Color System

2.1 Primary Colors

The hero here is #fe5000 (rgb(254, 80, 0)) — a vivid, high-energy orange. It’s bright enough to draw attention without tipping into neon territory. Psychologically, orange communicates energy, action, and warmth — perfect for click targets and “get started” moments.

Notice they don’t overuse it. In a competitive space where many brands lean on blue (trust, stability), Equativ’s orange differentiates without losing authority. It’s used for CTAs, links, button borders, and some hover effects. They pair it with white for text on orange backgrounds and deep grey for orange text on light backgrounds.

2.2 Complete Palette

2.3 Color Relationships

Contrast is solid for accessibility. Orange (#fe5000) on white hits a contrast ratio around 3.5:1 — borderline for WCAG AA for normal text, but acceptable for large headings and buttons. White on orange is around 4.0:1 — okay for interactive elements.

Dark greys (#0f1115, #333333) on white provide excellent readability (>10:1). The palette supports both light and dark contexts, though there’s no explicit dark mode here — the design uses dark headers on light backgrounds rather than full dark UI.

2.4 Usage Guide

• Primary Orange (#fe5000) — Only for interactive elements. Avoid using it for large text bodies; it’s too aggressive for reading.
• Deep Grey (#0f1115) — Body copy, headings, navigation.
• Mid Grey (#333333) — Secondary text, icons, subtle borders.
• White (#ffffff) — Backgrounds, card surfaces, text on dark.
• Accent Blue (#007aff) — Reserved for Swiper elements — don’t use outside sliders.
• Avoid mixing orange with blue — they’re both high-energy and will compete.
• Safe combo: orange + white, grey + white, grey + orange (for text links).

3. Typography

3.1 Font Families

Everything runs on Soehne (Adobe Fonts), with two main variants:

• Soehne Buch — 400, 600 weights. Default for headings, body copy, and buttons.
• Soehne Leicht — 300, 400 weights. Used for lighter headings, secondary links, captions.

Fallback: Arial for both. System fonts (-apple-system, etc.) appear in some contexts (buttons, captions) — likely for performance in UI-heavy views.

No variable fonts; everything is static weights.

3.2 Type Scale

3.3 Hierarchy

The scale is tight — many headings sit at 22px–28px for subheads, with big jumps for H1 (50–70px). This creates clear anchor points for scanning, while body text stays around 16px. Weight changes do much of the hierarchy work — lighter weights for secondary info, heavier for interactive elements.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. But they break it — frequent use of 5px, 6px for micro-padding.

4.2 Layout

Breakpoints:

• 0px
• 479px
• 500px
• 640px
• 767px
• 768px
• 991px
• 1024px
• 1280px
• 1536px

A mix of standard and custom — the 500px breakpoint is unusual, likely for specific UI constraints.

5. Visual Elements

Border Radius

Small and consistent:

• 5px — dominant, used for buttons, cards, images.
• 8px — occasional, probably for slightly larger cards.
• Larger (10px, 20px, 30px) — rare, special modules.
• Square edges (0%) — tabs, bullets.
• Full (100%) — rare, round buttons.

Shadow System

Mostly subtle:

• rgba(0,0,0,0.1) 0px 0px 35px — soft drop on large elements.
• rgba(0,0,0,0.35) heavy offset — rare.
• Many “0px 0px 30px” variations.
• No heavy material-style elevation — it’s restrained.

Borders

• 1px solid #fe5000 — orange accent border on buttons.
• Hairline greys (#333333, rgba neutrals) for dividers.
• Some underlines for links.

6. Components

6.1 Buttons

Primary (Orange Fill)
Default: bg #fe5000, text #ffffff, padding 10px 25px, radius 5px, no border.
Focus: outline auto 5px.

Secondary (Grey Fill)
Default: bg #e2e8f0, text #333333, padding 10px 25px, radius 5px, no border.

Outline Orange
Default: transparent bg, text #fe5000, border 1px solid #fe5000, radius 5px.

Tab Link
Default: transparent bg, text #222222, padding 9px 0 4px, radius 0px. Hover: darker bg.

Swiper Bullet
Default: bg rgba(254,80,0,0.3), text #333333, padding 1px 6px, radius 0%.

Arrow
Default: bg #ffffff, text #fe5000, border 1px solid #fe5000, radius 5px.

6.2 Links

• Orange (#fe5000) — no underline by default.
• Dark grey (#333333) — body copy links.
• Deep grey (#0f1115) — underline default.
• White (#ffffff) — nav links on dark bg.

6.3 Forms

No text inputs data here — likely styled with 1px solid #ccc in defaults.

6.4 Cards

Padding: 30px or 45px. Radius: 5px. Shadows: subtle rgba(0,0,0,0.1) 0px 0px 35px.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-grey-1: #333333;
  --color-dark-grey-2: #0f1115;
  --color-white: #ffffff;
  --color-primary-orange: #fe5000;
  --color-black: #000000;
  --color-dark-grey-3: #222222;
  --color-light-grey: #d8dee6;
  --color-hover-orange: #f44600;
  --color-brown: #3d1d11;
  --color-swiper-blue: #007aff;

  /* Typography */
  --font-soehne-buch: "Soehne Buch", Arial, sans-serif;
  --font-soehne-leicht: "Soehne Leicht", Arial, sans-serif;
  --font-system: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue";

  /* Font Sizes */
  --font-size-h1-xl: 70px;
  --font-size-h1-lg: 58px;
  --font-size-h1-md: 50px;
  --font-size-h1-sm: 42px;
  --font-size-h1-xs: 40px;
  --font-size-subhead-lg: 28px;
  --font-size-subhead-md: 24px;
  --font-size-subhead-sm: 22px;
  --font-size-body: 16px;
  --font-size-caption: 14px;
  --font-size-small: 12px;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-30: 30px;
  --space-45: 45px;
  --space-80: 80px;
  --space-100: 100px;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 20px;
  --radius-xxl: 30px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-soft-lg: rgba(0,0,0,0.1) 0px 0px 35px 0px;
  --shadow-soft-md: rgba(0,0,0,0.1) 0px 0px 30px 0px;
  --shadow-soft-offset: rgba(0,0,0,0.35) 13px 4px 5px 50px;
}

8. AI Coding Assistant Prompt

# Equativ Design System Specification

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

## Brand Context
Equativ's design system is built for enterprise adtech: precise, restrained, and professional. It uses a disciplined grid, minimal ornamentation, and a single high-energy primary color for CTAs.

## Color Palette
- Dark Grey 1: #333333 — secondary text, icons
- Dark Grey 2: #0f1115 — primary text, headings
- White: #ffffff — backgrounds, text on dark
- Primary Orange: #fe5000 — CTAs, links, button borders
- Black: #000000 — rare, icons/overlays
- Dark Grey 3: #222222 — tab text
- Light Grey: #d8dee6 — hover/focus backgrounds
- Hover Orange: #f44600 — hover accents
- Brown: #3d1d11 — rare hover accent
- Swiper Blue: #007aff — slider theme

## Typography
Fonts:
- Headings & body: "Soehne Buch", Arial
- Secondary/light text: "Soehne Leicht", Arial
- System UI for some buttons/captions

Type Scale:
| Level | Size | Weight | Line Height | Use |
| H1 XL | 70px | 400 | 1.17 | Page title |
| H1 LG | 58px | 400 | 1.17 | Hero title |
| H1 MD | 50px | 400 | 1.00 | Hero alt |
| H1 SM | 42px | 300 | 1.24 | Section head |
| H1 XS | 40px | 400 | 1.25 | Subsection |
| Subhead LG | 28px | 400 | 1.36 | Subheaders |
| Subhead MD | 24px | 400 | 1.42 | UI headings |
| Subhead SM | 22px | 300/600 | 1.55/1.27 | Links, small heads |
| Body | 16px | 400 | 1.63 | Paragraphs |
| Caption | 14px | 400/600 | 1.43–2.43 | Labels |
| Small | 12px | 400/600 | 1.50–1.67 | Meta info |

## Spacing & Grid
Base: 8px. Scale: 1px, 4px, 5px, 6px, 8px, 10px, 12px, 16px, 20px, 30px, 45px, 80px, 100px.
Use multiples for padding/margins. Buttons: 10px 25px. Cards: 30px–45px padding.

## Border Radius
- none: 0 — tabs
- sm: 5px — buttons, cards, images
- md: 8px — larger cards
- lg: 10px — rare modules
- xl: 20px — hero elements
- xxl: 30px — special panels
- full: 100% — round buttons

## Shadows & Depth
- Soft large: rgba(0,0,0,0.1) 0px 0px 35px
- Soft medium: rgba(0,0,0,0.1) 0px 0px 30px
Avoid heavy shadows; use borders for depth.

## Component Specifications

### Primary Button
Default: bg #fe5000, color #ffffff, padding 10px 25px, radius 5px, no border, font-weight 700, font-size 16px.  
Focus: outline auto 5px.  
Hover: slightly darker orange (#f44600).  
Disabled: opacity 0.5.

### Secondary Button
Default: bg #e2e8f0, color #333333, padding 10px 25px, radius 5px, no border.  
Focus: outline auto 5px.

### Outline Button
Default: transparent bg, color #fe5000, border 1px solid #fe5000, radius 5px.

### Navigation Links
Orange (#fe5000) — no underline.  
Deep grey (#0f1115) — underline default.

### Cards
bg #ffffff, radius 5px, padding 30px–45px, shadow rgba(0,0,0,0.1) 0px 0px 35px.

## Layout & Responsive Rules
Breakpoints:
- 0px
- 479px
- 500px
- 640px
- 767px
- 768px
- 991px
- 1024px
- 1280px
- 1536px

## Interaction Rules
- Transition: background-color 150ms ease
- Focus: outline auto 5px or orange border
- Loading: dim opacity to 0.5

## DO List
- Use ONLY colors from palette
- Maintain 8px grid (allow 5px, 6px for fine-tuning)
- Use Soehne for all text
- Keep border radius consistent per component type
- Keep shadows subtle
- Use orange only for interactive elements

## DON'T List
- Don't use heavy shadows
- Don't mix sharp and rounded corners
- Don't introduce new colors
- Don't use orange for body text
- Don't break spacing rhythm

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #fe5000;
  color: #ffffff;
  padding: 10px 25px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 16px;
  border: none;
  transition: background-color 150ms ease;
}
.btn-primary:hover { background: #f44600; }
.btn-primary:focus { outline: -webkit-focus-ring-color auto 5px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

Outline Button:
```css
.btn-outline {
  background: transparent;
  color: #fe5000;
  border: 1px solid #fe5000;
  border-radius: 5px;
  padding: 10px 25px;
  font-size: 16px;
}
.btn-outline:focus { outline: -webkit-focus-ring-color auto 5px; }
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 5px;
  padding: 30px;
  box-shadow: rgba(0,0,0,0.1) 0px 0px 35px 0px;
}
```

9. Summary

TL;DR — Equativ’s design system is clean, disciplined, and built for enterprise credibility. One strong orange for action, deep greys for text, Soehne type for clarity, and an 8px grid that occasionally flexes for precision.

Brand Keywords — enterprise-pragmatic, grid-disciplined, restrained-energy, typographic-clarity, orange-action